/* =====================================================================
   HOME v5 — the sections below the hero (index-v5.html). Behaviour: home-v5.js
   One system for every section:
   - eyebrow pill → Poppins 600 headline (never heavier) with a yellow marker on the key words → Inter body copy
   - 24px cards, 1px hairlines, soft navy shadows
   - white / soft grey / navy sections alternate; yellow is only ever an accent (marker, buttons, small shapes)
   - one reveal motion (rise + fade), words of each headline rise in turn, numbers count up
   Everything is prefixed hm- so it never collides with styles.css / home2.css.
   ===================================================================== */

.hm {
  --hm-ink: #101f70;
  --hm-deep: #0b1550;
  --hm-royal: #2945c5;
  --hm-yellow: var(--brand-yellow, #fccd0b);
  --hm-text: #4a5578;
  --hm-muted: #7a84a6;
  --hm-line: #e3e8f4;
  --hm-soft: #f4f6fb;
  --hm-tint: #eef2fd;
  --hm-ok: #00b67a;
  --hm-ease: cubic-bezier(.2, .8, .2, 1);
  --hm-r: 24px;
  --hm-shadow: 0 1px 2px rgba(16, 31, 112, .06), 0 12px 32px -12px rgba(16, 31, 112, .18);
  --hm-shadow-lg: 0 2px 6px rgba(16, 31, 112, .06), 0 30px 60px -24px rgba(16, 31, 112, .35);
  --hm-pad: clamp(84px, 9vw, 136px);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  color: var(--hm-ink);
  -webkit-font-smoothing: antialiased;
}
/* resets use :where() so they carry no weight: every component's own colours, backgrounds and margins always win */
:where(.hm) *, :where(.hm) *::before, :where(.hm) *::after { box-sizing: border-box; }
:where(.hm) :where(h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
:where(.hm) :where(ul, ol) { padding: 0; list-style: none; }
:where(.hm) img { display: block; max-width: 100%; }
:where(.hm) svg { display: block; }
:where(.hm) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.hm) a { color: inherit; text-decoration: none; }
.hm :focus-visible { outline: 3px solid var(--hm-royal); outline-offset: 3px; border-radius: 10px; }
.hm-dark :focus-visible, .hm-ft :focus-visible { outline-color: var(--hm-yellow); }

.hm-main { position: relative; z-index: 1; background: #fff; }
.hm-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.hm-sec { position: relative; padding-block: var(--hm-pad); overflow: clip; scroll-margin-top: 0; }
.hm-soft { background: var(--hm-soft); }
.hm-dark { color: #fff; background: radial-gradient(60% 70% at 85% 0%, rgba(54, 83, 224, .55) 0%, rgba(54, 83, 224, 0) 70%), linear-gradient(170deg, #1a2f9a 0%, var(--hm-ink) 45%, var(--hm-deep) 100%); }

/* ---------- section heading system ---------- */
.hm-head { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); }
.hm-head--center { justify-items: center; text-align: center; }
.hm-head--center .hm-lede { max-width: 620px; }
.hm-head--split { align-items: end; }
@media (min-width: 900px) {
  .hm-head--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; }
  .hm-head__side { display: grid; gap: 20px; justify-items: start; padding-bottom: 6px; }
  .hm-head__side.hm-head__side--end { justify-items: end; text-align: right; }
}
.hm-head__side { display: grid; gap: 18px; justify-items: start; }
.hm-head > div { display: grid; gap: 16px; justify-items: start; }

.hm-eyebrow { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 7px 14px 7px 12px; border-radius: 999px; background: var(--hm-tint); color: var(--hm-royal);
  font: 600 12.5px/1 "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.hm-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--hm-yellow); box-shadow: 0 0 0 3px rgba(252, 205, 11, .25); }
.hm-dark .hm-eyebrow { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

.hm-h2 { font: 600 clamp(2.1rem, 1.25rem + 3vw, 3.6rem)/1.04 "Poppins", sans-serif; letter-spacing: -.035em; text-wrap: balance; color: var(--hm-ink); }
.hm-dark .hm-h2 { color: #fff; }
.hm-lede { font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.6; color: var(--hm-text); max-width: 540px; text-wrap: pretty; }
.hm-dark .hm-lede { color: rgba(255, 255, 255, .72); }

/* yellow marker under the key words: sweeps in when the headline is revealed */
.hm-mk { background: linear-gradient(var(--hm-yellow), var(--hm-yellow)) 0 92% / 0% .3em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .04em;
  transition: background-size 1.1s var(--hm-ease) .45s; }
.hm-dark .hm-mk { background-image: linear-gradient(rgba(252, 205, 11, .85), rgba(252, 205, 11, .85)); }
.is-in .hm-mk, .hm-mk.is-in { background-size: 100% .3em; }

/* ---------- buttons ---------- */
.hm-btn { --h: 56px; display: inline-flex; align-items: center; gap: 16px; height: var(--h); padding: 0 8px 0 24px; border-radius: 14px; font: 600 16px/1 "Poppins", sans-serif; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .3s var(--hm-ease), box-shadow .3s var(--hm-ease), background-color .3s, color .3s; }
.hm-btn__go { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--hm-yellow); color: var(--hm-ink); overflow: hidden; }
.hm-btn__go svg { width: 18px; height: 18px; transition: transform .35s var(--hm-ease); }
.hm-btn:hover .hm-btn__go svg { animation: hmArrow .55s var(--hm-ease); }
@keyframes hmArrow { 0% { transform: none; } 45% { transform: translateX(130%); } 46% { transform: translateX(-130%); } 100% { transform: none; } }
.hm-btn:hover { transform: translateY(-2px); }
.hm-btn:active { transform: none; }
.hm-btn--primary { color: #fff; background: linear-gradient(180deg, #1a2fa8, #0f1f80); box-shadow: 0 10px 22px -6px rgba(15, 31, 128, .45); }
.hm-btn--primary:hover { box-shadow: 0 16px 30px -8px rgba(15, 31, 128, .55); }
.hm-btn--ghost { color: var(--hm-ink); background: #fff; box-shadow: inset 0 0 0 1.5px var(--hm-line); padding-right: 24px; }
.hm-btn--ghost .hm-btn__go { background: var(--hm-tint); width: 32px; height: 32px; margin-right: -14px; }
.hm-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--hm-ink); }
.hm-btn--yellow { color: var(--hm-ink); background: var(--hm-yellow); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1), 0 12px 26px -10px rgba(252, 205, 11, .55); }
.hm-btn--yellow .hm-btn__go { background: var(--hm-ink); color: var(--hm-yellow); }
.hm-btn--xl { --h: 64px; font-size: 18px; width: 100%; justify-content: space-between; padding-left: 26px; }
@media (max-width: 420px) { .hm-btn--xl { --h: 60px; font-size: 16px; gap: 10px; padding-left: 20px; } }

/* ---------- reveal motion (home-v4.js adds .is-in once an element is on screen) ---------- */
.js .hm [data-r] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--hm-ease) var(--d, 0s), transform 1s var(--hm-ease) var(--d, 0s); }
.js .hm [data-r].is-in { opacity: 1; transform: none; }
/* headlines: each word rises out of its own line box */
.hm-w { display: inline-block; overflow: clip; vertical-align: top; padding: .06em .02em .12em; margin: -.06em -.02em -.12em; }
.hm-w > span { display: inline-block; }
.js .hm [data-split] .hm-w > span { transform: translateY(105%); transition: transform .9s var(--hm-ease) calc(var(--w, 0) * 45ms); }
.js .hm [data-split].is-in .hm-w > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .hm [data-r], .js .hm [data-split] .hm-w > span { opacity: 1; transform: none; transition: none; }
  .hm-mk { background-size: 100% .3em; transition: none; }
}

/* =====================================================================
   2 · How it works (inside the pinned stage, revealed by the car)
   The steps are three photo panels: the scroll opens one at a time (--o: 0 folded → 1 open, set by home-v5.js),
   the others fold into slim strips with a vertical title. A segmented stepper above moves with them and fills as you scroll.
   ===================================================================== */
.stage > .hm-steps { align-items: stretch; justify-content: stretch; background: #fff; }
.hm-steps__in { display: flex; flex-direction: column; height: 100%; padding-top: clamp(92px, 13svh, 132px); padding-bottom: clamp(20px, 4svh, 40px); }
.hm-steps .hm-head { margin-bottom: clamp(16px, 3svh, 30px); }
.hm-steps .hm-h2 { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.3rem); }
.hm-steps .hm-lede { font-weight: 500; color: var(--hm-ink); }
.hm-steps__track { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.8svh, 16px); }

/* stepper */
.hm-stepper { display: flex; gap: 14px; }
.hm-stepper li { --o: 0; --f: 0; flex: calc(1 + var(--o) * 2.4) 1 0; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 9px; }
.hm-stepper__n { font: 600 12.5px/1 "Poppins", sans-serif; color: var(--hm-muted); transition: color .3s; }
.hm-stepper__t { font: 600 14px/1.2 "Poppins", sans-serif; letter-spacing: -.01em; color: var(--hm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: clamp(.35, calc(var(--o) * 1.4), 1); transition: color .3s; }
.hm-stepper li.is-on .hm-stepper__n, .hm-stepper li.is-on .hm-stepper__t { color: var(--hm-ink); }
.hm-stepper i { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--hm-line); overflow: hidden; }
.hm-stepper b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hm-royal), var(--hm-ink)); transform-origin: 0 50%; transform: scaleX(var(--f)); }

/* panels */
.hm-panels { flex: 1; min-height: 0; display: flex; gap: 14px; }
.hm-panel { --o: 0; position: relative; flex: calc(1 + var(--o) * 2.4) 1 0; min-width: 0; border-radius: 28px; overflow: hidden; isolation: isolate; color: #fff; background: var(--hm-ink);
  box-shadow: 0 30px 60px -34px rgba(16, 31, 112, calc(.25 + var(--o) * .4)); cursor: pointer; }
.hm-panel.is-on { cursor: default; }
.hm-panel__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.2 - var(--o) * .2)); filter: saturate(calc(.25 + var(--o) * .75)) brightness(calc(.6 + var(--o) * .4)); }
.hm-panel:nth-child(1) .hm-panel__img { object-position: 40% 30%; }
.hm-panel:nth-child(3) .hm-panel__img { object-position: 60% 50%; }
/* folded panels wash over in royal blue; the open one keeps its photo with a dark fade under the text */
.hm-panel__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 21, 80, 0) 38%, rgba(11, 21, 80, calc(.25 + var(--o) * .65)) 100%), rgba(41, 69, 197, calc((1 - var(--o)) * .72)); }
.hm-panel__no { position: absolute; left: 20px; top: 20px; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font: 600 16px/1 "Poppins", sans-serif;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); backdrop-filter: blur(8px); transition: background-color .4s, color .4s, box-shadow .4s; }
.hm-panel.is-on .hm-panel__no { background: var(--hm-yellow); color: var(--hm-ink); box-shadow: 0 10px 24px -8px rgba(252, 205, 11, .7); }
/* folded: the title runs up the strip */
.hm-panel__mini { position: absolute; left: 50%; bottom: 28px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); white-space: nowrap; font: 600 clamp(16px, 1.4vw, 20px)/1 "Poppins", sans-serif; letter-spacing: -.01em;
  opacity: clamp(0, calc(1 - var(--o) * 2.4), 1); pointer-events: none; }
/* open: title + text at the bottom (fixed width so nothing reflows while the panel grows) */
.hm-panel__body { position: absolute; left: 0; bottom: 0; width: min(520px, 54vw); display: grid; gap: 8px; padding: clamp(22px, 3svh, 30px) clamp(24px, 2.4vw, 32px);
  opacity: clamp(0, calc((var(--o) - .55) * 3), 1); transform: translateY(calc((1 - var(--o)) * 28px)); pointer-events: none; }
.hm-panel__body h3 { font: 600 clamp(22px, 2.1vw, 32px)/1.1 "Poppins", sans-serif; letter-spacing: -.03em; }
.hm-panel__body p { font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.55; color: rgba(255, 255, 255, .84); max-width: 420px; }
/* the little piece of live UI on each open panel */
.hm-panel__chip { position: absolute; right: 20px; top: 20px; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; color: var(--hm-ink);
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -16px rgba(6, 12, 56, .55);
  opacity: 0; transform: translateY(-12px) scale(.94); transition: opacity .45s var(--hm-ease), transform .6s var(--hm-ease); pointer-events: none; }
.hm-panel.is-on .hm-panel__chip { opacity: 1; transform: none; transition-delay: .25s; }
.hm-panel__chip i { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; font: 600 16px/1 "Poppins", sans-serif; font-style: normal; }
.hm-panel__chip i.ok { background: var(--hm-ok); color: #fff; } .hm-panel__chip i.ok svg { width: 18px; height: 18px; }
.hm-panel__chip i.gbp { background: var(--hm-yellow); color: var(--hm-ink); }
.hm-panel__chip > span { display: grid; gap: 2px; }
.hm-panel__chip b { font: 600 14px/1.2 "Poppins", sans-serif; }
.hm-panel__chip small { font-size: 12px; color: var(--hm-text); }
.hm-panel__chip--plate { padding: 0; gap: 0; height: 52px; border: 2.5px solid var(--hm-ink); border-radius: 10px; overflow: hidden; background: #ffd400; }
.hm-panel__chip--plate .uk { width: 32px; height: 100%; display: grid; place-items: end center; padding-bottom: 7px; background: var(--brand-blue, #2541bb); color: #fff; font: 700 10px/1 "Poppins", sans-serif; }
.hm-panel__chip--plate .reg { min-width: 150px; padding: 3px 16px 0; text-align: center; font: 700 26px/1 "Charles Wright", "Poppins", sans-serif; letter-spacing: .05em; color: #111; }
.hm-panel__chip--plate .reg span::after { content: ""; display: inline-block; width: 2px; height: .85em; margin-left: 2px; vertical-align: -.08em; background: #111; animation: blink 1s steps(1) infinite; }
.hm-panel:not(.is-on):hover .hm-panel__shade { background: linear-gradient(180deg, rgba(11, 21, 80, 0) 38%, rgba(11, 21, 80, .4) 100%), rgba(41, 69, 197, .5); }

/* the stepper and panels arrive one after the other as the car's tail clears the screen (home-v5.js adds .is-in to the section) */
.js .hm-steps .hm-panel, .js .hm-steps .hm-stepper, .js .hm-steps .hm-head__side { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--hm-ease) calc(var(--i, 0) * .1s + .15s), transform 1s var(--hm-ease) calc(var(--i, 0) * .1s + .15s); }
.js .hm-steps .hm-eyebrow { opacity: 0; transition: opacity .6s var(--hm-ease); }
.js .hm-steps.is-in .hm-panel, .js .hm-steps.is-in .hm-stepper, .js .hm-steps.is-in .hm-head__side, .js .hm-steps.is-in .hm-eyebrow { opacity: 1; transform: none; }

/* phones and tablets: the panels stack and open downwards like an accordion; folded ones show number + title in a row */
@media (max-width: 899px) {
  .hm-steps__in { padding-top: clamp(84px, 12svh, 110px); }
  .hm-steps .hm-head { gap: 12px; }
  .hm-steps .hm-head__side .hm-btn { display: none; }
  .hm-stepper li { flex: 1 1 0; }
  .hm-stepper__t { display: none; }
  .hm-panels { flex-direction: column; gap: 10px; }
  .hm-panel { flex: calc(1 + var(--o) * 5.5) 1 0; min-height: 58px; border-radius: 22px; }
  .hm-panel__no { left: 12px; top: 10px; width: 38px; height: 38px; border-radius: 12px; font-size: 14px; }
  .hm-panel__mini { left: 62px; top: 0; bottom: auto; height: 58px; display: flex; align-items: center; writing-mode: horizontal-tb; transform: none; font-size: 16px; }
  .hm-panel__body { width: 100%; padding: 18px 20px; }
  .hm-panel__body h3 { font-size: 21px; }
  .hm-panel__body p { font-size: 14px; }
  .hm-panel__chip { right: 12px; top: 12px; padding: 8px 12px 8px 8px; }
  .hm-panel__chip i { width: 32px; height: 32px; }
  .hm-panel__chip b { font-size: 12.5px; } .hm-panel__chip small { font-size: 11px; }
  .hm-panel__chip--plate { height: 44px; padding: 0; } .hm-panel__chip--plate .reg { min-width: 120px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .hm-panel__img, .hm-panel__body, .hm-panel__chip { transition: none; } }

/* =====================================================================
   4 · Why Motormoolah: features around a phone
   ===================================================================== */
.hm-why { background: radial-gradient(50% 40% at 50% 62%, rgba(41, 69, 197, .09) 0%, rgba(41, 69, 197, 0) 100%), #fff; }
.hm-why__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .hm-why__grid { grid-template-columns: minmax(0, 1fr) 440px minmax(0, 1fr); gap: 32px; } }
.hm-feats { display: grid; gap: 14px; }
.hm-feat { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--hm-line); transition: box-shadow .45s var(--hm-ease), transform .45s var(--hm-ease), opacity .8s var(--hm-ease) var(--d, 0s); }
.hm-feat.is-lit { box-shadow: inset 0 0 0 1.5px var(--hm-royal), var(--hm-shadow); }
.js .hm-feat.is-in.is-lit { transform: translateX(var(--nudge, 0)); }
.hm-feats--l .hm-feat { --nudge: 6px; } .hm-feats--r .hm-feat { --nudge: -6px; }
.hm-feat__ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--hm-tint); color: var(--hm-royal); transition: background-color .4s, color .4s; }
.hm-feat.is-lit .hm-feat__ic { background: var(--hm-ink); color: var(--hm-yellow); }
.hm-feat__ic svg { width: 22px; height: 22px; }
.hm-feat h3 { font: 600 17px/1.25 "Poppins", sans-serif; letter-spacing: -.015em; margin: 2px 0 4px; }
.hm-feat p { font-size: 14.5px; line-height: 1.5; color: var(--hm-text); }
@media (min-width: 1024px) { .hm-feats--l { text-align: right; } .hm-feats--l .hm-feat { flex-direction: row-reverse; } }
@media (min-width: 600px) and (max-width: 1023px) { .hm-feats { grid-template-columns: 1fr 1fr; } .hm-why__grid > .hm-phone-wrap { order: -1; } }
@media (max-width: 1023px) { .hm-why__grid > .hm-phone-wrap { order: -1; } }

.hm-phone-wrap { position: relative; width: min(300px, 78vw); margin-inline: auto; }
.hm-phone { position: relative; aspect-ratio: 9 / 19; border-radius: 52px; padding: 58px 18px 22px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #f6f8fe 100%);
  box-shadow: 0 0 0 10px #0d1240, 0 0 0 11.5px #3a4378, 0 40px 80px -24px rgba(16, 31, 112, .55), 0 18px 30px -18px rgba(16, 31, 112, .4); }
.hm-phone__island { position: absolute; left: 50%; top: 12px; width: 104px; height: 30px; margin-left: -52px; border-radius: 20px; background: #0d1240; }
.hm-phone__status { position: absolute; left: 30px; right: 26px; top: 18px; display: flex; justify-content: space-between; align-items: center; font: 600 13px/1 "Inter", sans-serif; color: var(--hm-ink); }
.hm-phone__sig { display: flex; gap: 2px; align-items: flex-end; } .hm-phone__sig i { width: 3px; background: var(--hm-ink); border-radius: 1px; } .hm-phone__sig i:nth-child(1) { height: 4px; } .hm-phone__sig i:nth-child(2) { height: 6px; } .hm-phone__sig i:nth-child(3) { height: 8px; } .hm-phone__sig i:nth-child(4) { height: 10px; }
.hm-phone__brand { display: flex; justify-content: center; padding: 2px 0 14px; }
.hm-phone__brand img { width: 118px; height: auto; }
.hm-scr { position: absolute; left: 18px; right: 18px; top: 92px; bottom: 22px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateX(24px); pointer-events: none; transition: opacity .5s var(--hm-ease), transform .6s var(--hm-ease); }
.hm-scr.is-on { opacity: 1; transform: none; }
.hm-scr.is-out { transform: translateX(-24px); }
.hm-scr h4 { font: 600 22px/1.12 "Poppins", sans-serif; letter-spacing: -.03em; color: var(--hm-ink); }
.hm-scr h4 em { font-style: normal; background: linear-gradient(var(--hm-yellow), var(--hm-yellow)) 0 90% / 100% .28em no-repeat; }
.hm-scr__sub { font-size: 12.5px; color: var(--hm-text); margin-top: -4px; }
.hm-scr__plate { display: flex; height: 54px; border: 2.5px solid var(--hm-ink); border-radius: 10px; overflow: hidden; background: #ffd400; }
.hm-scr__uk { width: 34px; display: grid; place-items: end center; padding-bottom: 8px; background: var(--brand-blue, #2541bb); color: #fff; font: 700 10px/1 "Poppins", sans-serif; }
.hm-scr__reg { flex: 1; display: grid; place-items: center; font: 700 24px/1 "Charles Wright", "Poppins", sans-serif; letter-spacing: .05em; color: #111; padding-top: 3px; }
.hm-scr__reg span::after { content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 2px; vertical-align: -.1em; background: #111; animation: blink 1s steps(1) infinite; }
.hm-scr__btn { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 6px 0 16px; border-radius: 11px; color: #fff; font: 600 14px/1 "Poppins", sans-serif; background: linear-gradient(180deg, #1a2fa8, #0f1f80); }
.hm-scr__btn i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--hm-yellow); color: var(--hm-ink); font-style: normal; font-weight: 700; }
.hm-scr__micro { font-size: 11px; color: var(--hm-muted); text-align: center; margin-top: -4px; }
.hm-scr__stats { margin-top: 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hm-scr__stats span { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--hm-tint); font-size: 10.5px; color: var(--hm-text); }
.hm-scr__stats b { font: 600 15px/1 "Poppins", sans-serif; color: var(--hm-ink); }
.hm-scr__trust { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--hm-line); font-size: 11px; color: var(--hm-text); }
.hm-scr__trust b { color: var(--hm-ink); font-weight: 600; }
.hm-scr__trust .hm-stars { gap: 2px; } .hm-scr__trust .hm-stars i { width: 14px; background: #dcdce6; }
.hm-scr__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hm-scr__tiles span { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--hm-tint); }
.hm-scr__tiles img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }
.hm-scr__tiles b { position: absolute; left: 6px; bottom: 6px; padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .92); font: 600 10px/1.2 "Inter", sans-serif; color: var(--hm-ink); }
.hm-scr__tiles span::after { content: "✓"; position: absolute; right: 6px; top: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--hm-ok); color: #fff; font-size: 11px; font-weight: 700;
  transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .22s + .3s); }
.hm-scr.is-on .hm-scr__tiles span::after { transform: scale(1); }
.hm-scr__val { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--hm-ink); color: #fff; }
.hm-scr__val small { font-size: 11px; color: rgba(255, 255, 255, .7); }
.hm-scr__val b { font: 600 30px/1.05 "Poppins", sans-serif; letter-spacing: -.03em; color: var(--hm-yellow); }
.hm-scr__val span { font-size: 12px; font-weight: 600; }
.hm-scr__val em { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .62); }
.hm-scr__steps { display: grid; gap: 10px; }
.hm-scr__steps li { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; padding: 11px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--hm-line);
  opacity: 0; transform: translateY(10px); transition: opacity .5s var(--hm-ease) calc(var(--i) * .35s + .2s), transform .6s var(--hm-ease) calc(var(--i) * .35s + .2s); }
.hm-scr.is-on .hm-scr__steps li { opacity: 1; transform: none; }
.hm-scr__steps .tick { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--hm-ok); display: grid; place-items: center; color: #fff; font: 700 14px/1 "Poppins", sans-serif; }
.hm-scr__steps .tick:not(.tick--gbp)::before { content: "✓"; font-size: 14px; }
.hm-scr__steps .tick--gbp { background: var(--hm-yellow); color: var(--hm-ink); }
.hm-scr__steps b { font: 600 13px/1.2 "Poppins", sans-serif; color: var(--hm-ink); }
.hm-scr__steps small { font-size: 11px; color: var(--hm-text); }
.hm-scr__done { margin-top: auto; display: grid; justify-items: center; gap: 4px; padding: 18px; border-radius: 16px; background: var(--hm-tint); }
.hm-scr__done b { font: 600 34px/1 "Poppins", sans-serif; letter-spacing: -.03em; color: var(--hm-ink); }
.hm-scr__done small { font-size: 12px; font-weight: 600; color: var(--hm-ok); }

.hm-toasts { position: absolute; inset: 0; pointer-events: none; }
.hm-toast { position: absolute; top: calc(var(--y) * 100%); left: 50%; display: grid; grid-template-columns: 34px auto; column-gap: 10px; align-items: center; width: max-content; max-width: 214px; padding: 10px 14px 10px 10px; border-radius: 16px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); box-shadow: var(--hm-shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .8);
  transform: translateX(calc(-50% + var(--x) * 160px)) scale(.85); opacity: 0; transition: opacity .45s var(--hm-ease), transform .7s var(--hm-ease); }
.hm-toast.is-on { opacity: 1; transform: translateX(calc(-50% + var(--x) * 200px)) scale(1); }
.hm-toast .ic { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--hm-ink); color: var(--hm-yellow); font: 600 12px/1 "Poppins", sans-serif; font-style: normal; }
.hm-toast .ic svg { width: 17px; height: 17px; }
.hm-toast b { font: 600 13px/1.2 "Poppins", sans-serif; color: var(--hm-ink); }
.hm-toast small { font-size: 11.5px; color: var(--hm-text); }
@media (max-width: 599px) { .hm-toast { display: none; } }

.hm-why__tabs { position: relative; display: flex; justify-content: center; gap: 8px; width: fit-content; margin: clamp(40px, 5vw, 56px) auto 0; padding: 6px; border-radius: 999px; background: var(--hm-soft); box-shadow: inset 0 0 0 1px var(--hm-line); }
.hm-why__tabs button { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 8px; border-radius: 999px; overflow: hidden; font: 600 clamp(15px, 1.3vw, 18px)/1 "Poppins", sans-serif; letter-spacing: -.02em; color: var(--hm-muted); transition: color .3s, background-color .3s, box-shadow .3s; }
.hm-why__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: #fff; color: var(--hm-muted); box-shadow: inset 0 0 0 1px var(--hm-line); transition: inherit; }
.hm-why__tabs button[aria-selected="true"] { color: var(--hm-ink); background: #fff; box-shadow: var(--hm-shadow); }
.hm-why__tabs button[aria-selected="true"] .hm-why__n { background: var(--hm-yellow); color: var(--hm-ink); box-shadow: none; }
.hm-why__tabs button i { position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--hm-yellow); transform-origin: 0 50%; transform: scaleX(0); }
.hm-why__tabs button[aria-selected="true"] i { animation: hmTab var(--dur, 4.2s) linear forwards; }
.hm-why.is-paused .hm-why__tabs button i { animation-play-state: paused; }
@keyframes hmTab { to { transform: scaleX(1); } }
@media (max-width: 520px) { .hm-why__tabs button { padding: 0 14px 0 6px; gap: 6px; } .hm-why__n { width: 30px; height: 30px; } }

/* =====================================================================
   5 · Compare
   ===================================================================== */
.hm-cx .hm-head { position: relative; }
.hm-cx__car { position: relative; justify-self: end; width: min(460px, 90%); margin-bottom: -40px; transform: translateX(calc(var(--cx, 1) * 30%)); opacity: calc(1 - var(--cx, 1) * .6); will-change: transform; }
.hm-cx__car img { width: 100%; height: auto; filter: drop-shadow(0 30px 24px rgba(16, 31, 112, .22)); }
@media (max-width: 899px) { .hm-cx__car { justify-self: center; margin: 0 0 -24px; width: min(340px, 80%); } }
.hm-cx__table { position: relative; z-index: 1; border-radius: 28px; background: #fff; box-shadow: var(--hm-shadow-lg); overflow: hidden; }
.hm-cx__cols, .hm-cx__row { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; }
.hm-cx__cols > span { display: flex; align-items: center; gap: 10px; padding: 24px 28px; font: 600 15px/1 "Poppins", sans-serif; color: var(--hm-muted); }
.hm-cx__cols .hm-cx__us { justify-content: space-between; background: var(--hm-ink); color: #fff; border-radius: 0; }
.hm-cx__cols .hm-cx__us img { width: 150px; height: auto; }
.hm-cx__cols .hm-cx__us em { font-style: normal; padding: 6px 10px; border-radius: 999px; background: var(--hm-yellow); color: var(--hm-ink); font: 600 11px/1 "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.hm-cx__row > span { display: flex; align-items: center; gap: 14px; padding: 22px 28px; border-top: 1px solid var(--hm-line); }
.hm-cx__row .hm-cx__lab { font: 600 14px/1 "Poppins", sans-serif; color: var(--hm-ink); gap: 12px; }
.hm-cx__row .hm-cx__lab svg { width: 20px; height: 20px; color: var(--hm-royal); }
.hm-cx__row .hm-cx__them { color: var(--hm-muted); }
.hm-cx__row .hm-cx__us { background: linear-gradient(90deg, #13248a, var(--hm-ink)); color: #fff; border-top-color: rgba(255, 255, 255, .1); }
.hm-cx__row:last-child .hm-cx__us { border-bottom-right-radius: 28px; }
.hm-cx__row b { display: block; font: 600 15.5px/1.3 "Poppins", sans-serif; letter-spacing: -.01em; }
.hm-cx__row small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; }
.hm-cx__them b { color: var(--hm-ink); opacity: .55; text-decoration: line-through; text-decoration-color: rgba(16, 31, 112, .3); }
.hm-cx__us small { color: rgba(255, 255, 255, .7); }
.hm-cx__row i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.hm-cx__row i svg { width: 16px; height: 16px; }
.hm-cx__row i.no { background: #f1f2f7; color: #9aa2bf; }
.hm-cx__row i.ok { background: var(--hm-yellow); color: var(--hm-ink); }
.js .hm-cx__row i.ok { transform: scale(0) rotate(-90deg); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .15s + .5s); }
.js .hm-cx__table.is-in .hm-cx__row i.ok { transform: none; }
.js .hm-cx__row > span { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--hm-ease) calc(var(--i) * .12s + .15s), transform .7s var(--hm-ease) calc(var(--i) * .12s + .15s); }
.js .hm-cx__table.is-in .hm-cx__row > span { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .hm-cx__table { background: transparent; box-shadow: none; overflow: visible; display: grid; gap: 14px; }
  .hm-cx__cols { display: none; }
  .hm-cx__row { grid-template-columns: 1fr; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--hm-shadow); }
  .hm-cx__row > span { border-top: 0; padding: 16px 20px; }
  .hm-cx__row .hm-cx__lab { padding-bottom: 4px; }
  .hm-cx__row .hm-cx__them { padding-top: 8px; }
  .hm-cx__row:last-child .hm-cx__us { border-radius: 0; }
}

/* =====================================================================
   6 · How we're different: cards that stack as you scroll
   ===================================================================== */
.hm-df { overflow: visible; }
.hm-stack { display: grid; gap: 24px; }
.hm-card { position: relative; display: grid; gap: 0; border-radius: 32px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--hm-line), var(--hm-shadow-lg); transform-origin: 50% 0;
  transform: scale(var(--sc, 1)); filter: brightness(var(--br, 1)); }
@media (min-width: 900px) {
  .hm-stack { gap: 40px; padding-bottom: 40px; }
  .hm-card { position: sticky; top: calc(110px + var(--i) * 22px); grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: min(520px, 70svh); }
}
.hm-card--b { background: var(--hm-tint); }
.hm-card--c { background: var(--hm-ink); color: #fff; box-shadow: var(--hm-shadow-lg); }
.hm-card__txt { display: grid; align-content: center; gap: 18px; padding: clamp(28px, 4vw, 60px); }
.hm-card__tag { display: flex; align-items: center; gap: 12px; font: 600 12.5px/1 "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--hm-royal); }
.hm-card__tag span { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--hm-yellow); color: var(--hm-ink); font: 600 14px/1 "Poppins", sans-serif; letter-spacing: 0; }
.hm-card--c .hm-card__tag { color: rgba(255, 255, 255, .7); }
.hm-card h3 { font: 600 clamp(26px, 2.6vw, 40px)/1.08 "Poppins", sans-serif; letter-spacing: -.03em; text-wrap: balance; }
.hm-card__txt > p { font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.6; color: var(--hm-text); max-width: 460px; }
.hm-card--c .hm-card__txt > p { color: rgba(255, 255, 255, .72); }
.hm-checks { display: grid; gap: 10px; margin-top: 4px; }
.hm-checks li { display: flex; align-items: center; gap: 12px; font: 500 15.5px/1.3 "Inter", sans-serif; }
.hm-checks svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--hm-ink); color: var(--hm-yellow); flex: none; }
.hm-card__img { position: relative; min-height: 280px; margin: 0 12px 12px; border-radius: 24px; overflow: hidden; }
@media (min-width: 900px) { .hm-card__img { margin: 12px 12px 12px 0; } }
.hm-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1.08)); transition: transform 1.4s var(--hm-ease); }
.hm-card.is-in .hm-card__img img { --zoom: 1; }
.hm-card--a .hm-card__img img { object-position: 70% 30%; }
.hm-card--c .hm-card__img img { object-position: 60% 50%; }
.hm-chip { position: absolute; left: 18px; bottom: 18px; display: grid; grid-template-columns: 40px auto; column-gap: 12px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px); box-shadow: var(--hm-shadow-lg); color: var(--hm-ink); transform: translateY(18px); opacity: 0; transition: transform .8s var(--hm-ease) .4s, opacity .6s var(--hm-ease) .4s; }
.hm-card.is-in .hm-chip { transform: none; opacity: 1; }
.hm-chip__ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--hm-ink); color: var(--hm-yellow); }
.hm-chip__ic--ok { background: var(--hm-ok); color: #fff; }
.hm-chip__ic svg { width: 20px; height: 20px; }
.hm-chip > span:last-child { display: grid; gap: 2px; }
.hm-chip b { font: 600 14.5px/1.2 "Poppins", sans-serif; }
.hm-chip small { font-size: 12.5px; color: var(--hm-text); }

/* =====================================================================
   8 · Guides
   ===================================================================== */
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-chips button { height: 42px; padding: 0 18px; border-radius: 999px; font: 600 14px/1 "Inter", sans-serif; color: var(--hm-text); background: #fff; box-shadow: inset 0 0 0 1.5px var(--hm-line); transition: color .25s, background-color .25s, box-shadow .25s; }
.hm-chips button:hover { color: var(--hm-ink); box-shadow: inset 0 0 0 1.5px var(--hm-ink); }
.hm-chips button.is-on { color: #fff; background: var(--hm-ink); box-shadow: none; }
.hm-gd__grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .hm-gd__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; } .hm-guide--big { grid-row: span 2; } }
.hm-guide { position: relative; display: grid; border-radius: var(--hm-r); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--hm-line); transition: box-shadow .4s var(--hm-ease), transform .5s var(--hm-ease), opacity .5s; }
.hm-guide:hover { box-shadow: inset 0 0 0 1px var(--hm-line), var(--hm-shadow-lg); transform: translateY(-4px); }
.hm-guide figure { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin: 10px 10px 0; border-radius: 16px; }
.hm-guide figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--hm-ease); }
.hm-guide:hover figure img { transform: scale(1.05); }
.hm-guide__hot { position: absolute; left: 14px; top: 14px; padding: 7px 12px; border-radius: 999px; background: var(--hm-yellow); color: var(--hm-ink); font: 600 12px/1 "Inter", sans-serif; }
.hm-guide__body { display: grid; gap: 10px; align-content: start; padding: 20px 24px 24px; }
.hm-guide__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--hm-muted); }
.hm-guide__meta span { padding: 5px 10px; border-radius: 8px; background: var(--hm-tint); color: var(--hm-royal); font-weight: 600; font-size: 12px; }
.hm-guide h3 { font: 600 clamp(18px, 1.5vw, 21px)/1.25 "Poppins", sans-serif; letter-spacing: -.02em; }
.hm-guide--big h3 { font-size: clamp(22px, 2vw, 28px); }
.hm-guide--big figure { aspect-ratio: 16 / 8.6; }
.hm-guide__body > p:not(.hm-guide__meta) { font-size: 15px; line-height: 1.55; color: var(--hm-text); }
.hm-guide__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 14.5px/1 "Poppins", sans-serif; color: var(--hm-royal); }
.hm-guide__go svg { width: 16px; height: 16px; transition: transform .35s var(--hm-ease); }
.hm-guide:hover .hm-guide__go svg { transform: translateX(4px); }
@media (min-width: 900px) {
  .hm-guide:not(.hm-guide--big) { grid-template-columns: 42% 1fr; }
  .hm-guide:not(.hm-guide--big) figure { aspect-ratio: auto; margin: 10px 0 10px 10px; }
  .hm-guide:not(.hm-guide--big) .hm-guide__body { align-content: center; }
}
.hm-guide.is-hidden { display: none; }
.hm-gd__grid.is-filtered { grid-template-rows: none; }
.hm-gd__grid.is-filtered .hm-guide { grid-row: auto; }
.hm-gd__all { display: flex; justify-content: center; margin-top: 40px; }

/* =====================================================================
   9 · FAQs
   ===================================================================== */
.hm-fq__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .hm-fq__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; } .hm-fq__intro { position: sticky; top: 120px; } }
.hm-fq__intro { display: grid; gap: 20px; justify-items: start; }
.hm-fq__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hm-help { display: flex; align-items: center; gap: 14px; max-width: 420px; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--hm-line); font-size: 14.5px; line-height: 1.5; color: var(--hm-text); }
.hm-help__ic { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--hm-yellow); color: var(--hm-ink); }
.hm-help__ic svg { width: 22px; height: 22px; }
.hm-acc { display: grid; gap: 12px; }
.hm-acc__item { border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--hm-line); transition: box-shadow .35s var(--hm-ease), opacity .8s var(--hm-ease) var(--d, 0s), transform 1s var(--hm-ease) var(--d, 0s); }
.hm-acc__item.is-open { box-shadow: inset 0 0 0 1.5px var(--hm-ink), var(--hm-shadow); }
.hm-acc__item h3 { margin: 0; font: inherit; }
.hm-acc__item button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 20px 22px; text-align: left; border-radius: 20px; }
.hm-acc__n { font: 600 13px/1 "Poppins", sans-serif; color: var(--hm-muted); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--hm-soft); transition: background-color .3s, color .3s; }
.is-open .hm-acc__n { background: var(--hm-yellow); color: var(--hm-ink); }
.hm-acc__q { font: 600 clamp(15.5px, 1.25vw, 18px)/1.35 "Poppins", sans-serif; letter-spacing: -.015em; color: var(--hm-ink); }
.hm-acc__pm { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--hm-tint); transition: background-color .3s, transform .45s var(--hm-ease); }
.hm-acc__pm::before, .hm-acc__pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--hm-ink); transition: transform .45s var(--hm-ease); }
.hm-acc__pm::after { transform: rotate(90deg); }
.is-open .hm-acc__pm { background: var(--hm-ink); transform: rotate(180deg); }
.is-open .hm-acc__pm::before, .is-open .hm-acc__pm::after { background: #fff; }
.is-open .hm-acc__pm::after { transform: rotate(0); }
.hm-acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--hm-ease); }
.is-open .hm-acc__a { grid-template-rows: 1fr; }
.hm-acc__a > div { overflow: hidden; }
.hm-acc__a p { padding: 0 72px 22px 72px; font-size: 15.5px; line-height: 1.65; color: var(--hm-text); }
@media (max-width: 599px) { .hm-acc__a p { padding: 0 22px 20px 72px; } .hm-acc__item button { padding: 18px; gap: 12px; } .hm-acc__a p { padding-left: 64px; } }

/* =====================================================================
   11 · Footer: sits underneath the page and is uncovered as it lifts away
   ===================================================================== */
.hm-ft { position: sticky; bottom: 0; z-index: -1; overflow: hidden; color: #fff; background: var(--hm-deep); padding-top: clamp(56px, 7vw, 96px); }
.hm-ft__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 900px) { .hm-ft__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; } }
.hm-ft__news h3 { font: 600 clamp(24px, 2.4vw, 34px)/1.15 "Poppins", sans-serif; letter-spacing: -.03em; max-width: 520px; margin-bottom: 20px; }
.hm-ft__form { display: flex; gap: 10px; max-width: 520px; padding: 6px; border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.hm-ft__form:focus-within { box-shadow: inset 0 0 0 1.5px var(--hm-yellow); }
.hm-ft__form input { flex: 1; width: 0; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 14px; color: #fff; font: 500 16px/1 "Inter", sans-serif; }
.hm-ft__form input::placeholder { color: rgba(255, 255, 255, .5); }
.hm-ft__form .hm-btn { --h: 50px; font-size: 15px; padding-left: 20px; }
.hm-ft__ok { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--hm-yellow); }
.hm-ft__ok:empty { display: none; }
.hm-ft__nav { display: flex; flex-wrap: wrap; gap: 6px 28px; }
@media (min-width: 900px) { .hm-ft__nav { justify-content: flex-end; } }
.hm-ft__nav a { position: relative; font: 600 16px/2 "Poppins", sans-serif; color: rgba(255, 255, 255, .8); transition: color .25s; }
.hm-ft__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px; background: var(--hm-yellow); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--hm-ease); }
.hm-ft__nav a:hover { color: #fff; }
.hm-ft__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hm-ft__mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-block: 28px; }
.hm-ft__addr { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: rgba(255, 255, 255, .7); }
.hm-ft__addr svg { width: 18px; height: 18px; color: var(--hm-yellow); flex: none; }
.hm-ft__soc { display: flex; gap: 10px; }
.hm-ft__soc a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); transition: background-color .25s, color .25s, transform .35s var(--hm-ease); }
.hm-ft__soc a:hover { background: var(--hm-yellow); color: var(--hm-ink); transform: translateY(-2px); box-shadow: none; }
.hm-ft__soc svg { width: 18px; height: 18px; }
.hm-ft__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-bottom: 20px; font-size: 13.5px; color: rgba(255, 255, 255, .55); }
.hm-ft__top-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.hm-ft__top-btn svg { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform .35s var(--hm-ease); }
.hm-ft__top-btn:hover svg { transform: rotate(-90deg) translateX(3px); }
.hm-ft__word { display: flex; justify-content: center; margin-bottom: -.2em; font: 600 clamp(64px, 16.5vw, 250px)/1 "Poppins", sans-serif; letter-spacing: -.055em; white-space: nowrap; user-select: none;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .16); transform: translateY(var(--ftw, 30%)); transition: transform .1s linear; }
.hm-ft__word em { font-style: normal; -webkit-text-stroke-color: rgba(252, 205, 11, .5); }

/* =====================================================================
   phones: valuation button pinned to the bottom
   ===================================================================== */
.hm-dock { position: fixed; z-index: 110; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: none; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 8px 0 22px; border-radius: 16px;
  color: #fff; font: 600 17px/1 "Poppins", sans-serif; background: linear-gradient(180deg, #1a2fa8, #0f1f80); box-shadow: 0 16px 34px -10px rgba(11, 21, 80, .6); transform: translateY(140%); transition: transform .5s var(--hm-ease); }
.hm-dock .hm-btn__go { width: 44px; height: 44px; }
.hm-dock.is-on { transform: none; }
@media (max-width: 899px) { .hm-dock { display: flex; } }

/* =====================================================================
   nav bar over the sections (states set by home-v5.js)
   ===================================================================== */
/* once content runs under it, the nav floats as a rounded glass capsule (no full-width band): smoked blue over the coloured
   sections, white glass over the light ones. It shrinks in from full width and stays visible (the car script hides it only while the car passes). */
/* the capsule is drawn on a layer behind the bar, so nothing inside the nav moves or resizes: it just fades and settles in.
   The header slides up a little with translate (no padding change), so there is no layout shift while scrolling. */
body > .header { transition: translate .5s var(--hm-ease, ease); }
body > .header.is-solid::before { opacity: 0 !important; }
body > .header .header__bar { position: relative; isolation: isolate; }
body > .header .header__bar::after { content: ""; position: absolute; z-index: -1; inset: -1px calc(var(--gutter, 24px) - 14px); border-radius: 22px; pointer-events: none;
  opacity: 0; transform: scaleX(1.04); transition: opacity .45s var(--hm-ease, ease), transform .6s var(--hm-ease, ease), background-color .45s, box-shadow .45s;
  -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); }
body > .header.is-solid { translate: 0 calc(10px - clamp(14px, 1.6vw, 24px)); }
body > .header.is-solid .header__bar::after { opacity: 1; transform: none; }
body > .header.is-solid:not(.is-ink) .header__bar::after { background: rgba(14, 27, 100, .74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 44px -22px rgba(3, 8, 40, .7); }
body > .header.is-solid.is-ink .header__bar::after { background: rgba(255, 255, 255, .88); box-shadow: inset 0 0 0 1px rgba(16, 31, 112, .08), 0 20px 44px -24px rgba(16, 31, 112, .4); }

/* =====================================================================
   v5 · surfaces, texture and light
   ===================================================================== */
.hm-royal { color: #fff; background: radial-gradient(70% 60% at 88% 8%, #5573ff 0%, rgba(85, 115, 255, 0) 60%), radial-gradient(60% 70% at 0% 100%, #13248a 0%, rgba(19, 36, 138, 0) 70%), linear-gradient(160deg, #2b48cf 0%, #2340bb 50%, #1a2fa0 100%); }
.hm-tint { background: linear-gradient(180deg, #e9eefc 0%, #f2f5fd 55%, #fff 100%); }   /* fades into the white guides below */
.hm-royal .hm-h2 { color: #fff; }
.hm-royal .hm-lede { color: rgba(255, 255, 255, .78); }
.hm-royal .hm-eyebrow { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.hm-royal .hm-mk { background-image: linear-gradient(rgba(252, 205, 11, .9), rgba(252, 205, 11, .9)); }
.hm-royal :focus-visible { outline-color: var(--hm-yellow); }
/* film grain on the coloured sections, so the flat gradients feel printed rather than digital */
.hm-dark::before, .hm-royal::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* a soft light follows the mouse across the coloured sections (home-v5.js sets --mx / --my) */
.hm-light { position: absolute; z-index: 0; left: 0; top: 0; width: 1200px; height: 1200px; margin: -600px 0 0 -600px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0)); opacity: 0; transition: opacity .6s; will-change: transform; }
.hm-fx:hover > .hm-light { opacity: 1; }
.hm-sec > .hm-wrap, .hm-sec > :not(.hm-wrap):not(.hm-light):not([class*="__marquee"]):not([class*="__kinetic"]) { position: relative; z-index: 1; }

/* the sections are sheets stacked on top of each other: each one overlaps the previous with rounded top corners */
.hm-main { background: transparent; }
.hm-main > .hm-sec { --lap: 44px; isolation: isolate; }          /* each sheet is its own layer, so a later sheet always covers an earlier one completely */
.hm-main > .hm-sec + .hm-sec { margin-top: calc(-1 * var(--lap)); border-radius: var(--lap) var(--lap) 0 0; padding-top: calc(var(--hm-pad) + var(--lap) / 2); }
@media (max-width: 699px) { .hm-main > .hm-sec { --lap: 28px; } }

/* ---------- the steps shrink back as the Hilton section slides over them (--cv: 0 → 1) ---------- */
.stage > .hm-steps { transform: scale(calc(1 - var(--cv, 0) * .07)); border-radius: calc(var(--cv, 0) * 40px); filter: brightness(calc(1 - var(--cv, 0) * .35)); transform-origin: 50% 30%; overflow: hidden; }

/* =====================================================================
   3 · Motormoolah × Hilton Garage
   ===================================================================== */
.hm-main > .hm-hg { margin-top: -100svh; padding: 0; background: #050a33; border-radius: 44px 44px 0 0; }
.hm-hg__pin { position: relative; }
.hm-hg__stage { position: relative; display: flex; align-items: center; min-height: 100svh; padding-block: clamp(96px, 12vh, 140px) clamp(64px, 8vh, 110px); overflow: hidden; isolation: isolate;
  background: radial-gradient(55% 60% at 26% 46%, rgba(54, 83, 224, .55) 0%, rgba(54, 83, 224, 0) 70%), radial-gradient(60% 50% at 100% 0%, rgba(41, 69, 197, .45) 0%, rgba(41, 69, 197, 0) 70%), linear-gradient(170deg, #14268f 0%, var(--hm-ink) 40%, var(--hm-deep) 100%);
  border-radius: calc(44px + var(--cv, 0) * 0px) calc(44px + var(--cv, 0) * 0px) calc(var(--cv, 0) * 40px) calc(var(--cv, 0) * 40px);
  transform: scale(calc(1 - var(--cv, 0) * .07)); filter: brightness(calc(1 - var(--cv, 0) * .4)); transform-origin: 50% 30%; }
.hm-pin .hm-hg__pin { height: 330svh; }
.hm-pin .hm-hg__stage { position: sticky; top: 0; height: 100svh; min-height: 0; padding-block: clamp(84px, 11vh, 120px) clamp(28px, 5vh, 56px); }
.hm-hg__glow { position: absolute; z-index: -1; left: 6%; top: 50%; width: 46vw; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(252, 205, 11, calc(.10 + var(--hr, 1) * .1)), rgba(252, 205, 11, 0)); }
.hm-hg__beams { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.hm-hg__beams i { position: absolute; top: -30%; width: 18vw; height: 160%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)); transform: rotate(22deg); animation: hmBeam 14s ease-in-out infinite; }
.hm-hg__beams i:nth-child(1) { left: 10%; } .hm-hg__beams i:nth-child(2) { left: 42%; animation-delay: -5s; width: 10vw; } .hm-hg__beams i:nth-child(3) { left: 72%; animation-delay: -9s; }
@keyframes hmBeam { 0%, 100% { translate: -6vw 0; opacity: .5; } 50% { translate: 6vw 0; opacity: 1; } }
.hm-hg__grid { display: grid; gap: 40px; align-items: center; width: 100%; }
@media (min-width: 900px) { .hm-hg__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 80px); } }
.hm-hg__art { display: grid; justify-items: center; gap: clamp(20px, 3.4vh, 36px); }
/* the two logos slide in from either side and lock together (--hl: 0 → 1) */
.hm-hg__lock { display: flex; align-items: center; gap: 10px; }
.hm-hg__logo { display: grid; place-items: center; height: clamp(52px, 7vh, 64px); padding: 0 clamp(16px, 1.6vw, 24px); border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 40px -20px rgba(0, 0, 0, .6); backdrop-filter: blur(8px);
  opacity: calc(.15 + var(--hl, 1) * .85); }
.hm-hg__logo img { height: clamp(20px, 2.6vh, 26px); width: auto; }
.hm-hg__logo--hl img { height: clamp(26px, 3.4vh, 34px); }
.hm-hg__logo--mm { transform: translateX(calc((1 - var(--hl, 1)) * -18vw)) rotate(calc((1 - var(--hl, 1)) * -8deg)); }
.hm-hg__logo--hl { transform: translateX(calc((1 - var(--hl, 1)) * 18vw)) rotate(calc((1 - var(--hl, 1)) * 8deg)); }
.hm-hg__x { display: flex; align-items: center; gap: 6px; font: 600 11px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--hm-yellow); white-space: nowrap; opacity: var(--hl, 1); }
.hm-hg__x i { width: 18px; height: 1.5px; background: var(--hm-yellow); transform: scaleX(var(--hl, 1)); }
@media (max-width: 520px) { .hm-hg__lock { flex-wrap: wrap; justify-content: center; } }
/* the emblem: the ring draws and the number counts with the scroll (--hr: 0 → 1) */
.hm-hg__emblem { position: relative; display: grid; place-items: center; width: min(400px, 46vh, 78vw); aspect-ratio: 1; }
.hm-hg__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.hm-hg__ring circle { fill: none; }
.hm-hg__ring .t { stroke: rgba(255, 255, 255, .1); stroke-width: 1.2; }
.hm-hg__ring .d { stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-dasharray: 2 6; transform-origin: 100px 100px; animation: hmSpin 80s linear infinite; }
.hm-hg__ring .p { stroke: var(--hm-yellow); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--hr, 1) * 100); filter: drop-shadow(0 0 6px rgba(252, 205, 11, .6)); }
.hm-hg__orbit { position: absolute; inset: 0; transform: rotate(calc(var(--hr, 1) * 360deg)); }
.hm-hg__orbit i { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--hm-yellow); box-shadow: 0 0 0 6px rgba(252, 205, 11, .2), 0 0 24px rgba(252, 205, 11, .9); opacity: calc(var(--hr, 1) * 4); }
@keyframes hmSpin { to { transform: rotate(360deg); } }
.hm-hg__fifty { position: relative; display: flex; align-items: flex-start; line-height: .8; margin-top: -6%; }
.hm-hg__num { font: 600 clamp(110px, min(13vw, 21vh), 190px)/.82 "Poppins", sans-serif; letter-spacing: -.06em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .45) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-hg__fifty sup { font: 600 clamp(40px, 4.4vw, 64px)/1 "Poppins", sans-serif; color: var(--hm-yellow); margin-left: 4px; }
.hm-hg__yrs { position: absolute; left: 0; right: 0; bottom: 27%; text-align: center; font: 600 12.5px/1 "Inter", sans-serif; letter-spacing: .32em; text-transform: uppercase; color: var(--hm-yellow); }
@media (max-width: 599px) { .hm-hg__yrs { font-size: 10px; letter-spacing: .16em; bottom: 26%; } }
.hm-hg__shield { position: absolute; bottom: -4%; left: 50%; width: clamp(44px, 6vh, 58px); height: auto; translate: -50% 0; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5)); transform: scale(calc(.4 + var(--hr, 1) * .6)); opacity: var(--hr, 1); }
.hm-hg__txt { display: grid; gap: clamp(14px, 2.2vh, 22px); justify-items: start; }
.hm-hg__txt .hm-h2 { font-size: clamp(1.9rem, 1rem + 2.4vw, 3.15rem); }
.hm-hg [data-hg] { opacity: var(--o, 1); transform: translateY(calc((1 - var(--o, 1)) * 30px)); }
.hm-hg__list { display: grid; gap: 10px; width: 100%; margin-top: 4px; }
@media (min-width: 600px) { .hm-hg__list { grid-template-columns: 1fr 1fr; } }
.hm-hg__list a { position: relative; display: flex; align-items: center; gap: 14px; height: 100%; padding: 15px 16px; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: background-color .3s, box-shadow .3s, transform .4s var(--hm-ease); }
.hm-hg__list a:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(252, 205, 11, .45); transform: translateY(-2px); }
.hm-hg__ic { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; background: rgba(252, 205, 11, .14); color: var(--hm-yellow); transition: background-color .3s, color .3s; }
.hm-hg__list a:hover .hm-hg__ic { background: var(--hm-yellow); color: var(--hm-ink); }
.hm-hg__ic svg { width: 20px; height: 20px; }
.hm-hg__list b { display: block; font: 600 15px/1.25 "Poppins", sans-serif; }
.hm-hg__list small { display: block; margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .62); }
.hm-hg__go { width: 18px; height: 18px; margin-left: auto; flex: none; opacity: .5; transition: opacity .3s, transform .4s var(--hm-ease); }
.hm-hg__list a:hover .hm-hg__go { opacity: 1; transform: translate(2px, -2px); color: var(--hm-yellow); }
@media (max-height: 760px) and (min-width: 900px) { .hm-hg__list small { display: none; } .hm-hg__list a { padding: 12px 14px; } }

/* =====================================================================
   4 · Customer stories: a deck of cards
   ===================================================================== */
.hm-main > .hm-rv { overflow: clip; }
.hm-pin .hm-main > .hm-rv { margin-top: -100svh; }          /* slides over the pinned Hilton stage */
.hm-rv__marquee { position: absolute; z-index: 0; left: 0; top: 50%; translate: 0 -50%; white-space: nowrap; pointer-events: none; font: 600 clamp(110px, 15vw, 230px)/1 "Poppins", sans-serif; letter-spacing: -.045em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .13); }
.hm-rv__marquee span { display: inline-block; transform: translateX(var(--mq, 0px)); will-change: transform; }
.hm-rv__marquee i, .hm-rd__row i { display: inline-block; width: .16em; height: .16em; margin: 0 .3em; border-radius: 50%; vertical-align: .32em; background: rgba(252, 205, 11, .45); }
.hm-rv__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .hm-rv__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.hm-rv__intro { display: grid; gap: 20px; justify-items: start; align-content: start; }
.hm-score { display: grid; gap: 14px; width: 100%; max-width: 420px; margin-top: 8px; padding: 22px 24px; border-radius: 22px; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 60px -30px rgba(6, 12, 56, .6); backdrop-filter: blur(10px); }
.hm-score__row { display: flex; align-items: center; gap: 18px; }
.hm-score__num { font: 600 64px/.9 "Poppins", sans-serif; letter-spacing: -.04em; min-width: 2.3ch; }
.hm-score__txt { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.hm-score__txt b { color: #fff; font-weight: 600; }
.hm-score__tp { height: 24px; width: auto; }
.hm-stars { display: inline-flex; gap: 3px; }
.hm-stars i { position: relative; width: 26px; aspect-ratio: 1; background: rgba(255, 255, 255, .22); overflow: hidden; }
.hm-stars i::before { content: ""; position: absolute; inset: 0; background: var(--hm-ok); transform-origin: 0 50%; transform: scaleX(var(--f, 1)); }
.hm-stars i.half { --f: .5; }
.hm-stars i::after { content: ""; position: absolute; inset: 15%; background: #fff; clip-path: polygon(50% 0, 62% 36%, 100% 36%, 69% 58%, 80% 94%, 50% 72%, 20% 94%, 31% 58%, 0 36%, 38% 36%); }
.js .hm-stars i::before { transform: scaleX(0); transition: transform .45s cubic-bezier(.33, 1, .68, 1); }
.js .is-in .hm-stars i::before { transform: scaleX(var(--f, 1)); }
.hm-stars i:nth-child(2)::before { transition-delay: .13s; } .hm-stars i:nth-child(3)::before { transition-delay: .26s; } .hm-stars i:nth-child(4)::before { transition-delay: .39s; } .hm-stars i:nth-child(5)::before { transition-delay: .52s; }
.hm-rv__ctrl { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 420px; margin-top: 4px; }
.hm-round { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); transition: background-color .25s, color .25s, box-shadow .25s; }
.hm-round svg { width: 20px; height: 20px; }
.hm-round:hover { background: var(--hm-yellow); color: var(--hm-ink); box-shadow: none; }
.hm-rv__count { font: 600 14px/1 "Poppins", sans-serif; color: rgba(255, 255, 255, .6); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-rv__count b { color: #fff; font-weight: 600; font-size: 18px; }
.hm-rv__bar { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.hm-rv__bar i { position: absolute; inset: 0; background: var(--hm-yellow); transform-origin: 0 50%; transform: scaleX(0); }
.hm-rv__bar i.is-run { animation: hmTab var(--dur, 5.5s) linear forwards; }
.hm-rv.is-held .hm-rv__bar i { animation-play-state: paused; }

.hm-deck { position: relative; width: min(370px, 74vw); aspect-ratio: 720 / 1040; margin: 0 auto 40px; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; }
@media (min-width: 1024px) { .hm-deck { margin-right: 14%; } }
.hm-deck__cards { position: absolute; inset: 0; }
.hm-story { --k: 0; position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: var(--hm-royal); isolation: isolate; cursor: grab;
  box-shadow: 0 40px 80px -30px rgba(6, 12, 56, .75), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: translate3d(calc(var(--k) * 34px), calc(var(--k) * -16px), 0) rotate(calc(var(--k) * 5deg)) scale(calc(1 - var(--k) * .07));
  z-index: calc(20 - var(--k)); will-change: transform, opacity; backface-visibility: hidden;
  transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; }
.hm-story::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #0b1550; opacity: calc(var(--k) * .2); transition: opacity .6s ease; }
.hm-story.is-far { opacity: 0; }
.hm-story.is-drag { transition: none; cursor: grabbing; transform: translate3d(var(--dx, 0px), calc(var(--dxn, 0) * .06px), 0) rotate(calc(var(--dxn, 0) * .05deg)); }
.hm-story.is-out { z-index: 40; transition: transform .6s cubic-bezier(.45, .05, .55, .95), opacity .4s ease .18s; opacity: 0;
  transform: translate3d(calc(var(--dir, 1) * 120%), -4%, 0) rotate(calc(var(--dir, 1) * 18deg)); }
.hm-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; z-index: -1; pointer-events: none; }
.hm-story::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 21, 80, 0) 34%, rgba(11, 21, 80, .78) 64%, rgba(11, 21, 80, .97) 100%); }
.hm-story__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 10px; padding: 26px 26px 28px; }
.hm-story__q { width: 30px; height: 22px; fill: var(--hm-yellow); }
.hm-story h3 { font: 600 22px/1.18 "Poppins", sans-serif; letter-spacing: -.02em; }
.hm-story blockquote { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.hm-story__who { font-size: 13.5px; color: rgba(255, 255, 255, .65); padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); }
.hm-story__who b { color: #fff; font-weight: 600; }
.hm-deck__hint { position: absolute; left: 0; right: 0; bottom: -44px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.hm-deck__hint svg { width: 14px; height: 14px; }
.hm-deck:focus-visible .hm-story:not(.is-far) { box-shadow: 0 0 0 3px var(--hm-yellow), 0 40px 80px -30px rgba(6, 12, 56, .75); }

/* =====================================================================
   4b · Why: the phone tilts flat as it arrives and follows the mouse; feature cards catch the light
   ===================================================================== */
.hm-why { background: radial-gradient(50% 40% at 50% 62%, rgba(41, 69, 197, .1) 0%, rgba(41, 69, 197, 0) 100%), radial-gradient(rgba(16, 31, 112, .07) 1px, transparent 1.5px) 0 0 / 26px 26px, #fff; }
.hm-phone-wrap { perspective: 1600px; }
.hm-phone { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) scale(var(--ps, 1)); transform-style: preserve-3d; will-change: transform; }
.hm-toasts { opacity: var(--tq, 1); transition: opacity .3s; }
.hm-feat { position: relative; overflow: hidden; }
.hm-feat::before, .hm-guide::before, .hm-acc__item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(41, 69, 197, .13), rgba(41, 69, 197, 0) 65%); }
.hm-feat:hover::before, .hm-guide:hover::before, .hm-acc__item:hover::before { opacity: 1; }
.hm-feat > *, .hm-acc__item > * { position: relative; }

/* =====================================================================
   5 · Compare on navy
   ===================================================================== */
.hm-cx .hm-h2, .hm-cx .hm-lede { color: inherit; }
.hm-cx .hm-lede { color: rgba(255, 255, 255, .72); }
.hm-cx__car { isolation: isolate; }
.hm-cx__halo { position: absolute; z-index: -1; inset: 10% 0 0 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(252, 205, 11, .28), rgba(252, 205, 11, 0)); filter: blur(10px); }
.hm-cx__floor { position: absolute; z-index: -1; left: 6%; right: 2%; bottom: 8%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.hm-cx__streaks { position: absolute; z-index: -1; right: 62%; top: 26%; bottom: 30%; width: 70vw; opacity: calc(var(--cx, 0) * 1.4); }
.hm-cx__streaks i { position: absolute; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(252, 205, 11, 0), rgba(252, 205, 11, .75)); transform-origin: 100% 50%; transform: scaleX(calc(.2 + var(--cx, 0))); }
.hm-cx__streaks i:nth-child(1) { top: 0; width: 60%; } .hm-cx__streaks i:nth-child(2) { top: 22%; width: 90%; } .hm-cx__streaks i:nth-child(3) { top: 46%; width: 70%; } .hm-cx__streaks i:nth-child(4) { top: 70%; width: 100%; } .hm-cx__streaks i:nth-child(5) { top: 92%; width: 50%; }
.hm-cx__car img { filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45)) blur(calc(var(--cx, 0) * 2px)); }
.hm-cx .hm-cx__table { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 80px -40px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); }
.hm-cx .hm-cx__cols > span { color: rgba(255, 255, 255, .55); }
.hm-cx .hm-cx__cols .hm-cx__us { background: linear-gradient(90deg, #2945c5, #3654dc); color: #fff; }
.hm-cx .hm-cx__row > span { border-top-color: rgba(255, 255, 255, .09); }
.hm-cx .hm-cx__row .hm-cx__lab { color: #fff; }
.hm-cx .hm-cx__row .hm-cx__lab svg { color: var(--hm-yellow); }
.hm-cx .hm-cx__row .hm-cx__them { color: rgba(255, 255, 255, .5); }
.hm-cx .hm-cx__them b { color: rgba(255, 255, 255, .62); opacity: 1; text-decoration: none; position: relative; width: fit-content; }
.hm-cx .hm-cx__them b::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 1.5px; background: rgba(255, 120, 120, .8); transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s var(--hm-ease) calc(var(--i) * .15s + .7s); }
.hm-cx .hm-cx__table.is-in .hm-cx__them b::after { transform: scaleX(1); }
.hm-cx .hm-cx__row .hm-cx__us { background: linear-gradient(90deg, rgba(41, 69, 197, .95), rgba(54, 84, 220, .95)); }
.hm-cx .hm-cx__row i.no { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .5); }
.hm-cx .hm-cx__row:hover .hm-cx__us { background: linear-gradient(90deg, #3654dc, #4362ea); }
@media (max-width: 899px) { .hm-cx .hm-cx__row { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } }

/* =====================================================================
   6 · Different: royal + navy cards, big outlined numbers, photos drift inside the cards
   ===================================================================== */
.hm-card--b { background: linear-gradient(150deg, #2f4dd6 0%, var(--hm-royal) 60%, #213bb3 100%); color: #fff; }
.hm-card--b .hm-card__tag { color: rgba(255, 255, 255, .78); }
.hm-card--b .hm-card__txt > p { color: rgba(255, 255, 255, .8); }
.hm-card--c { background: linear-gradient(150deg, #14268f 0%, var(--hm-ink) 55%, var(--hm-deep) 100%); }
.hm-card__big { position: absolute; z-index: 0; left: clamp(20px, 3vw, 44px); bottom: -.18em; font: 600 clamp(140px, 17vw, 260px)/1 "Poppins", sans-serif; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(16, 31, 112, .09); pointer-events: none; }
.hm-card--b .hm-card__big, .hm-card--c .hm-card__big { -webkit-text-stroke-color: rgba(255, 255, 255, .12); }
.hm-card__txt { position: relative; z-index: 1; }
.hm-card__img img { transform: translateY(var(--py, 0px)) scale(calc(var(--zoom, 1.08) + .1)); }

/* =====================================================================
   7 · Guides: tilt + a "Read" bubble that follows the cursor over the photos
   ===================================================================== */
.hm-gd { position: relative; background: #fff; }
.hm-guide { transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: box-shadow .4s var(--hm-ease), transform .5s var(--hm-ease), opacity .5s; }
.hm-guide:hover { transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-4px); }
.hm-guide figure { cursor: none; }
@media (hover: none) { .hm-guide figure { cursor: auto; } }
.hm-cursor { position: absolute; z-index: 5; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; pointer-events: none;
  background: var(--hm-yellow); color: var(--hm-ink); font: 600 14px/1 "Poppins", sans-serif; box-shadow: 0 16px 30px -10px rgba(16, 31, 112, .45);
  transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(var(--gs, 0)); transition: transform .35s var(--hm-ease); }
.hm-cursor svg { width: 18px; height: 18px; transform: rotate(-45deg); }

/* =====================================================================
   9 · Ready to see what your car is worth? — full width royal, kinetic words, swinging keys
   ===================================================================== */
.hm-main > .hm-rd { padding-block: calc(var(--hm-pad) + 30px) calc(var(--hm-pad) + 10px); border-radius: var(--lap) var(--lap) var(--lap) var(--lap); overflow: clip; }
.hm-rd__kinetic { position: absolute; z-index: 0; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding-block: 2vh; pointer-events: none; }
.hm-rd__row { white-space: nowrap; font: 600 clamp(80px, 10.5vw, 170px)/1.05 "Poppins", sans-serif; letter-spacing: -.045em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .12); }
.hm-rd__row span { display: inline-block; transform: translateX(var(--kx, 0px)); will-change: transform; }
.hm-rd__row em { font-style: normal; -webkit-text-stroke-color: rgba(252, 205, 11, .55); }
.hm-rd__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .hm-rd__grid { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); } .hm-rd__stats { grid-column: 1 / -1; } }
.hm-rd__txt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; min-width: 0; }
.hm-rd__txt .hm-h2 { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem); }
.hm-rd__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 600px; margin-top: 10px; padding: 14px; border-radius: 26px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 40px 80px -40px rgba(6, 12, 56, .7); backdrop-filter: blur(14px); }
.hm-rd__row2 { display: grid; gap: 12px; }
@media (min-width: 640px) { .hm-rd__row2 { grid-template-columns: minmax(0, 1fr) auto; } .hm-rd__row2 .hm-btn--xl { width: auto; font-size: 16.5px; gap: 12px; padding-left: 22px; } }
.hm-plate { display: flex; height: 84px; border: 3px solid var(--hm-ink); border-radius: 14px; overflow: hidden; background: #ffd400; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .45); transition: box-shadow .25s; }
.hm-plate:focus-within { box-shadow: 0 0 0 5px rgba(252, 205, 11, .45), 0 16px 34px -12px rgba(0, 0, 0, .45); }
.hm-plate.has-error { box-shadow: 0 0 0 4px rgba(255, 107, 107, .7); }
.hm-plate__uk { flex: none; width: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--brand-blue, #2541bb); color: #fff; font: 700 13px/1 "Poppins", sans-serif; }
.hm-plate__uk svg { width: 24px; height: 24px; }
.hm-plate__input { flex: 1; width: 0; min-width: 0; border: 0; outline: 0; background: transparent; text-align: center; padding: .08em 12px 0; font: 700 clamp(32px, 3.4vw, 46px)/1 "Charles Wright", "Poppins", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #111; }
.hm-plate__input::placeholder { color: rgba(17, 17, 17, .38); }
.hm-miles { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 18px; border-radius: 14px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); transition: box-shadow .25s, background-color .25s; }
.hm-miles:focus-within { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px var(--hm-yellow); }
.hm-miles svg { width: 22px; height: 22px; color: rgba(255, 255, 255, .75); flex: none; }
.hm-miles input { flex: 1; width: 0; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: 500 17px/1 "Inter", sans-serif; }
.hm-miles input::placeholder { color: rgba(255, 255, 255, .6); }
.hm-miles span { font-size: 14px; color: rgba(255, 255, 255, .65); }
.hm-rd__err { font-size: 14px; font-weight: 600; color: #ffd0d0; padding-left: 4px; }
.hm-rd__err:empty { display: none; }
.hm-rd__micro { font-size: 13.5px; color: rgba(255, 255, 255, .7); text-align: center; }
.hm-rd__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
@media (min-width: 700px) { .hm-rd__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hm-rd__stats li { display: grid; gap: 6px; padding: 20px 22px; border-radius: 20px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.hm-rd__stats b { font: 600 clamp(26px, 2.4vw, 36px)/1 "Poppins", sans-serif; letter-spacing: -.03em; color: var(--hm-yellow); white-space: nowrap; }
.hm-rd__stats small { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .78); }
/* the keychain hangs from a hook and swings: an idle sway plus a push whenever the mouse moves (home-v5.js sets --sw) */
.hm-rd__keys { position: relative; justify-self: center; width: clamp(260px, 30vw, 440px); margin-top: -30px; }
.hm-rd__hook { position: absolute; left: 33%; top: -14px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b9c1dc 45%, #59628a 100%); box-shadow: 0 6px 12px rgba(0, 0, 0, .35); }
.hm-rd__keys img { width: 100%; height: auto; transform-origin: 33% 2%; transform: rotate(var(--sw, 0deg)); filter: drop-shadow(0 34px 30px rgba(6, 12, 56, .5)); }
@media (max-width: 1023px) { .hm-rd__keys { display: none; } }

/* =====================================================================
   v5 · global touches
   ===================================================================== */
/* smooth scrolling (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* buttons lean towards the cursor (home-v5.js sets --mgx / --mgy) */
.hm-btn, .hm-round, .hm-dock { translate: var(--mgx, 0px) var(--mgy, 0px); }
.hm-btn { transition: transform .3s var(--hm-ease), translate .4s var(--hm-ease), box-shadow .3s var(--hm-ease), background-color .3s, color .3s; }
.hm-round { transition: background-color .25s, color .25s, box-shadow .25s, translate .4s var(--hm-ease); }

@media (prefers-reduced-motion: reduce) {
  .hm-main > .hm-hg { margin-top: 0; }
  .stage > .hm-steps { transform: none; filter: none; }
  .hm-hg__beams i, .hm-hg__ring .d { animation: none; }
  .hm-story, .hm-phone, .hm-guide { transition: none; }
}

/* =====================================================================
   v5.1 · section labels and headline highlights
   Labels: small uppercase text led by a short yellow line that draws in (no pill). Headlines: the key words change colour
   instead of being underlined: royal blue on light sections, yellow on the coloured ones (like "Moolah!" in the hero).
   ===================================================================== */
.hm-eyebrow, .hm-dark .hm-eyebrow, .hm-royal .hm-eyebrow { gap: 12px; padding: 0; border-radius: 0; background: none; box-shadow: none; font: 600 12.5px/1.2 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.hm-eyebrow { color: var(--hm-ink); }
.hm-dark .hm-eyebrow, .hm-royal .hm-eyebrow { color: rgba(255, 255, 255, .86); }
.hm-eyebrow i, .hm-dark .hm-eyebrow i, .hm-royal .hm-eyebrow i { width: 28px; height: 2px; border-radius: 2px; background: var(--hm-yellow); box-shadow: none; transform-origin: 0 50%; }
.js .hm-eyebrow i { transform: scaleX(0); transition: transform .9s var(--hm-ease) .2s; }
.js .hm-eyebrow.is-in i, .js .is-in .hm-eyebrow i, .js .hm-steps.is-in .hm-eyebrow i { transform: none; }
.js .hm-hg .hm-eyebrow i { transform: scaleX(var(--o, 1)); }
.hm-mk, .hm-dark .hm-mk, .hm-royal .hm-mk { background: none; padding: 0; transition: none; }
.hm-mk { color: var(--hm-royal); }
.hm-dark .hm-mk, .hm-royal .hm-mk { color: var(--hm-yellow); }
.hm-scr h4 em { background: none; color: var(--hm-royal); }
@media (prefers-reduced-motion: reduce) { .js .hm-eyebrow i { transform: none; transition: none; } }

/* =====================================================================
   v5.1 · compare: a mirrored comparison. Elsewhere on the left (quiet), Motormoolah on the right (one bright panel),
   the topic on a spine down the middle. Rows slide in from both sides; a valuation button closes the Motormoolah column.
   ===================================================================== */
.hm-vs { position: relative; z-index: 1; isolation: isolate; display: grid; margin-top: 8px; }
.hm-vs__head, .hm-vs__row, .hm-vs__foot { display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); grid-template-areas: "them mid us"; }
.hm-vs__mid { grid-area: mid; } .hm-vs__us { grid-area: us; } .hm-vs__them { grid-area: them; }
.hm-vs::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 56px; bottom: 96px; width: 1px; margin-left: -.5px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 10%, rgba(255, 255, 255, .22) 90%, rgba(255, 255, 255, 0)); }
.hm-vs::after { content: ""; position: absolute; z-index: -2; left: calc(50% + 66px); right: 0; top: -14px; bottom: 0; border-radius: 30px; background: linear-gradient(170deg, #3a59e0 0%, var(--hm-royal) 45%, #1f39b0 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 50px 90px -40px rgba(0, 0, 0, .65), 0 0 80px -30px rgba(85, 115, 255, .7); }
.hm-vs__head > span { display: flex; align-items: center; padding: 18px 34px 22px; }
.hm-vs__head .hm-vs__them { justify-content: flex-end; font: 600 17px/1 "Poppins", sans-serif; letter-spacing: -.01em; color: rgba(255, 255, 255, .7); }
.hm-vs__head .hm-vs__us img { height: 24px; width: auto; }
.hm-vs__head .hm-vs__mid { justify-content: center; padding-inline: 0; }
.hm-vs__head .hm-vs__mid i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 "Poppins", sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-yellow); background: var(--hm-ink); box-shadow: inset 0 0 0 1px rgba(252, 205, 11, .5); }
.hm-vs__row > span { display: flex; align-items: center; gap: 16px; padding: 24px 34px; }
.hm-vs__row + .hm-vs__row > .hm-vs__us { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.hm-vs__row + .hm-vs__row > .hm-vs__them { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.hm-vs__them { justify-content: flex-end; text-align: right; }
.hm-vs__them b { display: block; font: 600 16px/1.3 "Poppins", sans-serif; color: rgba(255, 255, 255, .8); }
.hm-vs__them small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .58); }
.hm-vs__tag { display: none; }
.hm-vs__us b { display: block; font: 600 17.5px/1.3 "Poppins", sans-serif; letter-spacing: -.01em; color: #fff; }
.hm-vs__us small { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .8); }
.hm-vs__row i { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.hm-vs__row i svg { width: 16px; height: 16px; }
.hm-vs__row i.no { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .55); }
.hm-vs__row i.ok { background: var(--hm-yellow); color: var(--hm-ink); box-shadow: 0 8px 18px -6px rgba(252, 205, 11, .6); }
.hm-vs__row .hm-vs__mid { flex-direction: column; justify-content: center; gap: 8px; padding-inline: 0; }
.hm-vs__ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--hm-yellow); background: var(--hm-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 6px rgba(16, 31, 112, .9); transition: background-color .3s, color .3s, transform .4s var(--hm-ease); }
.hm-vs__ic svg { width: 22px; height: 22px; }
.hm-vs__mid em { font: 600 11.5px/1 "Inter", sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.hm-vs__row:hover .hm-vs__ic { background: var(--hm-yellow); color: var(--hm-ink); transform: scale(1.08); }
.hm-vs__row:hover .hm-vs__them b { color: #fff; }
.hm-vs__foot { padding-top: 6px; }
.hm-vs__foot .hm-btn { grid-area: us; justify-self: start; margin: 6px 34px 32px; }
/* arrival: elsewhere slides in from the left, Motormoolah from the right, the topic pops on the spine */
.js .hm-vs .hm-vs__row > span, .js .hm-vs .hm-vs__head > span, .js .hm-vs .hm-vs__foot .hm-btn { opacity: 0; transition: opacity .7s var(--hm-ease) calc(var(--i, 0) * .14s + .1s), transform .9s var(--hm-ease) calc(var(--i, 0) * .14s + .1s); }
.js .hm-vs .hm-vs__them { transform: translateX(-36px); }
.js .hm-vs .hm-vs__us { transform: translateX(36px); }
.js .hm-vs .hm-vs__mid { transform: scale(.6); }
.js .hm-vs .hm-vs__foot .hm-btn { transform: translateY(16px); transition-delay: .75s; }
.js .hm-vs.is-in .hm-vs__row > span, .js .hm-vs.is-in .hm-vs__head > span, .js .hm-vs.is-in .hm-vs__foot .hm-btn { opacity: 1; transform: none; }
.js .hm-vs .hm-vs__row i.ok { transform: scale(0) rotate(-90deg); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i, 0) * .14s + .55s); }
.js .hm-vs.is-in .hm-vs__row i.ok { transform: none; }
/* phones and tablets: one card per topic, leading with the Motormoolah benefit, "Elsewhere" underneath */
@media (max-width: 899px) {
  .hm-vs { gap: 12px; }
  .hm-vs::before, .hm-vs::after, .hm-vs__head { display: none; }
  .hm-vs__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mid" "us" "them"; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
  .hm-vs__row + .hm-vs__row > .hm-vs__us, .hm-vs__row + .hm-vs__row > .hm-vs__them { box-shadow: none; }
  .hm-vs__row .hm-vs__mid { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 14px 16px 4px; }
  .hm-vs__ic { width: 34px; height: 34px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); } .hm-vs__ic svg { width: 17px; height: 17px; }
  .hm-vs__row > .hm-vs__us { margin: 6px 8px 0; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #3a59e0, var(--hm-royal)); }
  .hm-vs__row > .hm-vs__them { flex-direction: row-reverse; justify-content: flex-end; text-align: left; gap: 12px; padding: 12px 16px 16px; }
  .hm-vs__them b { font-size: 14px; } .hm-vs__them small { font-size: 13px; }
  .hm-vs__tag { display: inline; color: rgba(255, 255, 255, .55); font-weight: 500; }
  .hm-vs__row i { width: 28px; height: 28px; }
  .hm-vs__foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "us"; }
  .hm-vs__foot .hm-btn { justify-self: stretch; justify-content: space-between; margin: 4px 0 0; }
  .js .hm-vs .hm-vs__them, .js .hm-vs .hm-vs__us { transform: translateY(14px); }
}

/* =====================================================================
   v5.2 · section labels: plain uppercase text, no line, no pill. Centred headings centre it exactly
   (the trailing letter-spacing is cancelled so the text sits dead centre).
   ===================================================================== */
.hm-eyebrow i, .hm-dark .hm-eyebrow i, .hm-royal .hm-eyebrow i { display: none; }
.hm-eyebrow, .hm-dark .hm-eyebrow, .hm-royal .hm-eyebrow { gap: 0; margin-right: -.16em; }
.hm-head--center .hm-eyebrow { justify-self: center; }

/* =====================================================================
   v5.2 · light sections flow into each other: no overlap, no rounded edge, no doubled spacing
   (rounded sheets stay only where the colour changes)
   ===================================================================== */
.hm-main > .hm-sec.hm-gd, .hm-main > .hm-sec.hm-fq { margin-top: 0; border-radius: 0; padding-top: calc(var(--hm-pad) * .5); }
.hm-fq.hm-soft { background: linear-gradient(180deg, #fff 0%, var(--hm-soft) 45%); }

/* =====================================================================
   v5.2 · compare: flip cards. Each topic starts on "selling elsewhere" and turns over to the Motormoolah way.
   ===================================================================== */
.hm-cmp { position: relative; display: grid; gap: clamp(22px, 3vw, 32px); }
.hm-cmp__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.hm-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); isolation: isolate; }
.hm-switch__thumb { position: absolute; z-index: -1; left: 6px; top: 6px; bottom: 6px; width: calc(50% - 6px); border-radius: 999px; background: rgba(255, 255, 255, .16);
  transition: transform .6s var(--hm-ease), background-color .4s; }
.hm-cmp[data-state="us"] .hm-switch__thumb { transform: translateX(100%); background: var(--hm-yellow); box-shadow: 0 10px 24px -8px rgba(252, 205, 11, .6); }
.hm-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; white-space: nowrap;
  font: 600 15px/1 "Poppins", sans-serif; color: rgba(255, 255, 255, .7); transition: color .3s; }
.hm-switch button[aria-pressed="true"] { color: #fff; }
.hm-cmp[data-state="us"] .hm-switch button[data-view="us"] { color: var(--hm-ink); }
.hm-switch button img { height: 15px; width: auto; transition: filter .3s; }
.hm-switch .lg-n { display: none; }
.hm-cmp[data-state="us"] .hm-switch .lg-w { display: none; }
.hm-cmp[data-state="us"] .hm-switch .lg-n { display: block; }
.hm-cmp__hint { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .6); }
.hm-cmp__hint svg { width: 14px; height: 17px; }
.hm-cmp__grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .hm-cmp__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .hm-cmp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hm-flip { perspective: 1400px; }
.hm-flip__in { position: relative; display: grid; height: 100%; min-height: clamp(260px, 30vw, 330px); transform-style: preserve-3d; cursor: pointer; outline: none;
  transform: rotateY(calc(var(--f, 0) * 180deg)); transition: transform 1s cubic-bezier(.2, .8, .2, 1) var(--dly, 0s); }
.hm-flip.is-us .hm-flip__in { --f: 1; }
.hm-flip__in:hover .hm-flip__face { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 40px 70px -36px rgba(0, 0, 0, .7); }
.hm-flip__in:focus-visible .hm-flip__face { box-shadow: 0 0 0 3px var(--hm-yellow); }
.hm-flip__face { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; border-radius: 26px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hm-flip__face--them { background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.hm-flip__face--us { transform: rotateY(180deg); background: radial-gradient(80% 60% at 100% 0%, rgba(120, 145, 255, .55) 0%, rgba(120, 145, 255, 0) 70%), linear-gradient(160deg, #3a59e0 0%, var(--hm-royal) 55%, #1f39b0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 40px 70px -36px rgba(0, 0, 0, .7); }
.hm-flip__top { display: flex; align-items: center; gap: 10px; margin-bottom: auto; padding-bottom: 28px; }
.hm-flip__ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; }
.hm-flip__ic svg { width: 21px; height: 21px; }
.hm-flip__face--them .hm-flip__ic { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); }
.hm-flip__face--us .hm-flip__ic { background: rgba(255, 255, 255, .16); color: var(--hm-yellow); }
.hm-flip__top em { font: 600 12px/1 "Inter", sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.hm-flip__top i { width: 32px; height: 32px; margin-left: auto; border-radius: 50%; display: grid; place-items: center; }
.hm-flip__top i svg { width: 16px; height: 16px; }
.hm-flip__top i.no { background: rgba(255, 120, 120, .14); color: #ffb0b0; }
.hm-flip__top i.ok { background: var(--hm-yellow); color: var(--hm-ink); box-shadow: 0 8px 18px -6px rgba(252, 205, 11, .7); }
.hm-flip__face h3 { font: 600 clamp(20px, 1.7vw, 24px)/1.15 "Poppins", sans-serif; letter-spacing: -.02em; }
.hm-flip__face--them h3 { color: rgba(255, 255, 255, .82); }
.hm-flip__face p { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .66); }
.hm-flip__face--us p { color: rgba(255, 255, 255, .86); }
.hm-flip__tag { width: fit-content; margin-top: 12px; padding: 7px 12px; border-radius: 999px; font: 600 11.5px/1 "Inter", sans-serif; letter-spacing: .04em; color: rgba(255, 255, 255, .65); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.hm-flip__tag--us { padding: 6px 12px; background: rgba(11, 21, 80, .35); box-shadow: none; }
.hm-flip__tag--us img { height: 12px; width: auto; }
.hm-flip__deco { position: absolute; right: -18px; bottom: -18px; width: 130px; height: 130px; opacity: .06; color: #fff; pointer-events: none; }
.hm-flip__face--us .hm-flip__deco { opacity: .12; color: var(--hm-yellow); }
.hm-cmp__foot { display: flex; justify-content: center; }
.js .hm-cmp .hm-flip { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--hm-ease) calc(var(--i) * .1s), transform .9s var(--hm-ease) calc(var(--i) * .1s); }
.js .hm-cmp.is-in .hm-flip { opacity: 1; transform: none; }
@media (max-width: 639px) { .hm-switch { width: 100%; } .hm-switch button { padding: 0 10px; font-size: 14px; } .hm-cmp__hint { display: none; } .hm-flip__in { min-height: 200px; } .hm-cmp__foot .hm-btn { width: 100%; justify-content: space-between; } }
@media (prefers-reduced-motion: reduce) { .hm-flip__in, .hm-switch__thumb { transition: none; } }

/* =====================================================================
   v5.3 · CONSISTENCY LAYER — one scale for spacing, type and shape, used by every section.
   Change a token here and the whole page follows.
   ===================================================================== */
.hm {
  --s-section: clamp(96px, 10vw, 144px);     /* section padding, top and bottom */
  --s-head: clamp(44px, 5vw, 64px);          /* heading block → content */
  --s-eyebrow: 14px;                         /* label → headline */
  --s-lede: 18px;                            /* headline → intro text */
  --s-block: 28px;                           /* intro text → whatever follows (buttons, forms, cards, lists) */
  --fs-h2: clamp(2.2rem, 1.3rem + 2.8vw, 3.5rem);
  --fs-h3-lg: clamp(26px, 2.3vw, 34px);      /* big feature cards: open step panels, stacked cards, featured guide */
  --fs-h3: clamp(19px, 1.5vw, 22px);         /* standard cards: stories, flip cards, guides */
  --fs-h4: 17px;                             /* small tiles: features, Hilton links, FAQ questions */
  --fs-lede: clamp(17px, 1.2vw, 18.5px);
  --fs-body: 15.5px;
  --fs-small: 13.5px;
  --r-lg: 28px; --r-md: 20px; --r-sm: 14px;
  --ic: 44px;                                /* icon tiles */
}

/* ---- section padding: the same everywhere; sheets that overlap get the overlap added underneath so the visible gap stays equal ---- */
.hm-main > .hm-sec { padding-block: var(--s-section); }
.hm-main > .hm-sec:not(:last-child) { padding-bottom: calc(var(--s-section) + var(--lap)); }
.hm-main > .hm-sec + .hm-sec { padding-top: var(--s-section); }
.hm-main > .hm-sec.hm-gd, .hm-main > .hm-sec.hm-fq { padding-top: calc(var(--s-section) * .4); }   /* light → light: they share one gap */
.hm-main > .hm-sec.hm-df { padding-bottom: calc(var(--s-section) * .6); }
.hm-main > .hm-sec.hm-gd { padding-bottom: calc(var(--s-section) * .6); }
.hm-main > .hm-rd { padding-block: var(--s-section); }
.hm-main > .hm-hg { padding: 0; }

/* ---- the heading stack: label → headline → intro → next block, identical in every section ---- */
.hm-head { margin-bottom: var(--s-head); gap: 0; }
.hm-head > div, .hm-rv__intro, .hm-fq__intro, .hm-hg__txt, .hm-rd__txt { gap: 0; }
.hm .hm-eyebrow + .hm-h2 { margin-top: var(--s-eyebrow); }
.hm .hm-h2 + .hm-lede { margin-top: var(--s-lede); }
:is(.hm-head > div:not(.hm-head__side), .hm-rv__intro, .hm-fq__intro, .hm-hg__txt, .hm-rd__txt) > .hm-lede + * { margin-top: var(--s-block); }
:is(.hm-rv__intro, .hm-fq__intro) > * + :not(.hm-h2):not(.hm-lede) { margin-top: var(--s-block); }
.hm-rv__intro > .hm-rv__ctrl { margin-top: 20px; }
.hm-head__side { gap: var(--s-block); }
@media (min-width: 900px) { .hm-head--split { gap: 48px; } .hm-head__side { gap: 22px; padding-bottom: 4px; } }
@media (max-width: 899px) { .hm-head--split { gap: var(--s-lede); } }
.hm-steps .hm-head { margin-bottom: clamp(18px, 3svh, 30px); }    /* the pinned steps have to fit one screen */

/* ---- type: one headline size, three title sizes, one body and one small size ---- */
.hm .hm-h2, .hm-steps .hm-h2, .hm-hg__txt .hm-h2, .hm-rd__txt .hm-h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.035em; }
.hm .hm-lede, .hm-steps .hm-lede { font-size: var(--fs-lede); line-height: 1.6; font-weight: 400; max-width: 560px; }
.hm-steps .hm-lede { color: var(--hm-text); }
.hm-head--center .hm-lede { max-width: 620px; }
.hm-panel__body h3, .hm-card h3, .hm-guide--big h3 { font-size: var(--fs-h3-lg); line-height: 1.1; letter-spacing: -.03em; }
.hm-story h3, .hm-flip__face h3, .hm-guide h3:not(.hm-guide--big h3) { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.02em; }
.hm-feat h3, .hm-hg__list b, .hm-acc__q, .hm-panel__chip b, .hm-chip b { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -.015em; }
.hm-panel__chip b, .hm-chip b { font-size: 14.5px; }
.hm-panel__body p, .hm-card__txt > p, .hm-story blockquote, .hm-flip__face p, .hm-guide__body > p:not(.hm-guide__meta), .hm-acc__a p { font-size: var(--fs-body); line-height: 1.6; }
.hm-feat p, .hm-hg__list small, .hm-story__who, .hm-guide__meta, .hm-score__txt, .hm-help, .hm-rd__stats small, .hm-rd__micro, .hm-cmp__hint { font-size: var(--fs-small); line-height: 1.5; }
@media (max-width: 899px) { .hm-panel__body h3 { font-size: 22px; } .hm-panel__body p { font-size: 14.5px; } }

/* ---- shape: three corner sizes, one icon tile size ---- */
.hm-card, .hm-guide, .hm-story, .hm-panel, .hm-flip__face, .hm-rd__form, .hm-scr__val { border-radius: var(--r-lg); }
.hm-feat, .hm-hg__list a, .hm-acc__item, .hm-acc__item button, .hm-rd__stats li, .hm-help, .hm-score { border-radius: var(--r-md); }
.hm-card__img, .hm-guide figure { border-radius: calc(var(--r-lg) - 10px); }
.hm-btn, .hm-plate, .hm-miles { border-radius: var(--r-sm); }
.hm-feat__ic, .hm-hg__ic, .hm-flip__ic, .hm-help__ic { width: var(--ic); height: var(--ic); border-radius: var(--r-sm); }
.hm-help__ic { border-radius: 50%; }
.hm-feat__ic svg, .hm-hg__ic svg, .hm-flip__ic svg { width: 21px; height: 21px; }

/* ---- cards share padding steps: big cards 28–56px, standard cards 24px, tiles 18–20px ---- */
.hm-card__txt { padding: clamp(28px, 4vw, 56px); gap: 16px; }
.hm-guide__body { padding: 22px 24px 24px; }
.hm-feat { padding: 20px; }
.hm-acc__item button { padding: 20px 22px; }
.hm-hg__list a { padding: 16px 18px; }

/* =====================================================================
   v5.4 · sections meet on clean straight edges (no rounded sheets between them). Only the two pinned
   covers keep a rounded top while they slide over: Hilton over the steps, the stories over Hilton.
   ===================================================================== */
.hm-main > .hm-sec + .hm-sec { margin-top: 0; border-radius: 0; }
.hm-main > .hm-sec:not(:last-child) { padding-bottom: var(--s-section); }
.hm-main > .hm-rd { border-radius: 0; }
.hm-pin .hm-main > .hm-sec.hm-rv { margin-top: -100svh; border-radius: 44px 44px 0 0; }

/* =====================================================================
   v5.4 · FAQ actions: two buttons of equal width, the help card the same width underneath
   ===================================================================== */
.hm-fq__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 440px; }
.hm-fq__btns .hm-btn { width: 100%; justify-content: center; padding-inline: 20px; }
.hm-fq__btns .hm-btn--primary { justify-content: space-between; padding-right: 8px; }
.hm-fq__intro .hm-help { width: 100%; max-width: 440px; margin-top: 12px; }

/* =====================================================================
   v5.4 · button hover: nothing moves. The colour deepens, a soft light sweeps across, the arrow slides out and back.
   ===================================================================== */
.hm-btn, .hm-round, .hm-dock { translate: none; }
.hm-btn:hover, .hm-btn:active { transform: none; }
.hm-btn { position: relative; overflow: hidden; isolation: isolate; transition: box-shadow .35s var(--hm-ease), background-color .3s, color .3s; }
.hm-btn::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 70%) -150% 0 / 70% 100% no-repeat; }
.hm-btn:hover::after { background-position: 250% 0; transition: background-position .9s var(--hm-ease); }
.hm-btn--primary:hover { background: linear-gradient(180deg, #2238c0, #12248c); box-shadow: 0 14px 30px -12px rgba(15, 31, 128, .6); }
.hm-btn--yellow:hover { background: #ffd83a; }
.hm-btn--ghost:hover { background: var(--hm-tint); box-shadow: inset 0 0 0 1.5px var(--hm-ink); }
.hm-btn--ghost::after { display: none; }
/* the nav and hero buttons on this page get the same still hover */
body > .header .btn-yellow:hover, body > .header .icon-btn:hover, .hero .card .cta:hover { transform: none; }

/* =====================================================================
   v5.5 · Why: phone on one side, the three reasons on the other. The reasons are the controls: each carries its step
   ("Value it." …) and plays that screen; a thin bar shows when the next one comes up.
   ===================================================================== */
@media (min-width: 900px) { .hm-why .hm-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); } }
.hm-why .hm-phone-wrap { width: min(310px, 78vw); }
.hm-why__list { display: grid; gap: 14px; }
.hm-why__list .hm-feat { width: 100%; align-items: center; gap: 18px; padding: 22px 24px; text-align: left; cursor: pointer; }
.hm-feat__txt { display: grid; gap: 4px; }
.hm-feat__txt em { font: 600 12px/1 "Inter", sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--hm-royal); }
.hm-feat__txt b { font: 600 var(--fs-h4)/1.3 "Poppins", sans-serif; letter-spacing: -.015em; color: var(--hm-ink); }
.hm-feat__txt > span { font-size: var(--fs-small); line-height: 1.5; color: var(--hm-text); }
.hm-feat > .hm-feat__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hm-yellow); transform-origin: 0 50%; transform: scaleX(0); }
.hm-feat[aria-selected="true"] .hm-feat__bar { animation: hmTab var(--dur, 4.6s) linear forwards; }
.hm-why.is-paused .hm-feat__bar { animation-play-state: paused; }
.hm-why__list .hm-feat:hover:not(.is-lit) { box-shadow: inset 0 0 0 1.5px rgba(41, 69, 197, .35); }
/* phone screen 1 · the car, the photo checks, the offer */
.hm-scr__car { display: flex; align-items: center; gap: 12px; }
.hm-scr__car .hm-scr__plate { flex: none; width: 142px; height: 42px; }
.hm-scr__car .hm-scr__reg { font-size: 20px; }
.hm-scr__car b { display: block; font: 600 15px/1.2 "Poppins", sans-serif; color: var(--hm-ink); }
.hm-scr__car small { display: block; font-size: 11.5px; color: var(--hm-text); }
.hm-scr .hm-scr__btn { margin-top: auto; }
/* phone screen 2 · collection or drop-off, then a time */
.hm-scr__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-scr__opts span { position: relative; display: grid; justify-items: start; gap: 10px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--hm-line); }
.hm-scr__opts span.is-on { background: var(--hm-tint); box-shadow: inset 0 0 0 2px var(--hm-royal); }
.hm-scr__opts span.is-on::after { content: "✓"; position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--hm-royal); color: #fff; font-size: 11px; font-weight: 700; }
.hm-scr__opts i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--hm-ink); color: var(--hm-yellow); }
.hm-scr__opts i svg { width: 17px; height: 17px; }
.hm-scr__opts b { font: 600 13.5px/1 "Poppins", sans-serif; color: var(--hm-ink); }
.hm-scr__lbl { margin-top: 4px; font: 600 11px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--hm-muted); }
.hm-scr__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hm-scr__slots span { display: grid; justify-items: center; gap: 3px; padding: 10px 4px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--hm-line); font-size: 11px; color: var(--hm-text); }
.hm-scr__slots span b { font: 600 14px/1 "Poppins", sans-serif; color: var(--hm-ink); }
.hm-scr__slots span.is-on { background: var(--hm-ink); box-shadow: none; color: rgba(255, 255, 255, .7); }
.hm-scr__slots span.is-on b { color: var(--hm-yellow); }
/* phone screen 3 · sold */
.hm-scr[data-scr="2"] h4 { font-size: 30px; }
.hm-scr__steps .tick { grid-row: auto; }
.hm-scr__steps li { padding: 13px 14px; }
.hm-scr__done small { color: var(--hm-ink); font-size: 13px; }

/* =====================================================================
   v5.5 · final form: one yellow box only (the plate). The button is deep navy with a yellow arrow, like the hero card.
   ===================================================================== */
.hm-btn--navy { color: #fff; background: linear-gradient(180deg, #16278f, var(--hm-deep)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 32px -14px rgba(6, 12, 56, .8); }
.hm-btn--navy:hover { background: linear-gradient(180deg, #1c30a6, #0f1c66); }
.hm-btn--navy .hm-btn__go { background: var(--hm-yellow); color: var(--hm-ink); }

/* =====================================================================
   v5.6 · arrow hover, the same on every arrow button: the arrow slides out to the right until its box hides it,
   then a fresh one slides in from the left and settles in the middle (accelerates out, eases in).
   ===================================================================== */
@keyframes mmArrowR {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(.55, 0, .8, .35); }
  42% { transform: translateX(170%); }
  42.1% { transform: translateX(-170%); animation-timing-function: cubic-bezier(.2, .75, .25, 1); }
  100% { transform: translateX(0); }
}
@keyframes mmArrowL {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(.55, 0, .8, .35); }
  42% { transform: translateX(-170%); }
  42.1% { transform: translateX(170%); animation-timing-function: cubic-bezier(.2, .75, .25, 1); }
  100% { transform: translateX(0); }
}
/* the boxes that mask the arrow */
.hm-btn__go, .hero .card .cta__go, .hm-round, body > .header .btn-yellow { overflow: hidden; }
.hm-btn__go svg, .hero .card .cta__go svg, .hm-round svg, body > .header .btn-yellow svg { transition: none; }
.hm-btn:hover .hm-btn__go svg, .hm-dock:hover .hm-btn__go svg, .hero .card .cta:hover .cta__go svg, body > .header .btn-yellow:hover svg, .hm-round[data-rv="next"]:hover svg { animation: mmArrowR .7s both; transform: none; }
.hm-round[data-rv="prev"]:hover svg { animation: mmArrowL .7s both; }
@media (prefers-reduced-motion: reduce) { .hm-btn:hover .hm-btn__go svg, .hm-dock:hover .hm-btn__go svg, .hero .card .cta:hover .cta__go svg, body > .header .btn-yellow:hover svg, .hm-round:hover svg { animation: none; } }

/* =====================================================================
   v5.7 · compare: a clear table (topic | selling elsewhere | Motormoolah). The Motormoolah column is one raised panel;
   the rows slide in one after another, the panel rises in behind them, the ticks pop.
   ===================================================================== */
.hm-tbl { position: relative; isolation: isolate; display: grid; margin-top: 16px; }
.hm-tbl__row { display: grid; grid-template-columns: 22% 39% 39%; }
.hm-tbl::after { content: ""; position: absolute; z-index: -2; left: 0; top: 0; bottom: 0; right: calc(39% - 24px); border-radius: var(--r-lg) 0 0 var(--r-lg); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.hm-tbl::before { content: ""; position: absolute; z-index: -1; left: 61%; right: 0; top: -16px; bottom: -16px; border-radius: var(--r-lg);
  background: radial-gradient(80% 40% at 100% 0%, rgba(120, 145, 255, .5) 0%, rgba(120, 145, 255, 0) 70%), linear-gradient(170deg, #3a59e0 0%, var(--hm-royal) 50%, #1f39b0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 44px 80px -36px rgba(0, 0, 0, .65), 0 0 70px -26px rgba(85, 115, 255, .7); transform-origin: 50% 0; }
.hm-tbl__row > span { display: flex; align-items: center; gap: 14px; padding: 22px 28px; transition: background-color .25s; }
.hm-tbl__row + .hm-tbl__row:not(.hm-tbl__row--foot) > .hm-tbl__topic, .hm-tbl__row + .hm-tbl__row:not(.hm-tbl__row--foot) > .hm-tbl__them { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.hm-tbl__row + .hm-tbl__row:not(.hm-tbl__row--foot) > .hm-tbl__us { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.hm-tbl__row--head > span { padding-block: 24px 18px; font: 600 16px/1 "Poppins", sans-serif; color: rgba(255, 255, 255, .7); }
.hm-tbl__row--head .hm-tbl__us img { height: 24px; width: auto; }
.hm-tbl__topic { font: 600 15px/1.2 "Poppins", sans-serif; color: #fff; }
.hm-tbl__ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--hm-yellow); }
.hm-tbl__ic svg { width: 20px; height: 20px; }
.hm-tbl__row i { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.hm-tbl__row i svg { width: 15px; height: 15px; }
.hm-tbl__row i.no { background: rgba(255, 110, 110, .15); color: #ffb4b4; }
.hm-tbl__row i.ok { background: var(--hm-yellow); color: var(--hm-ink); box-shadow: 0 8px 18px -6px rgba(252, 205, 11, .6); }
.hm-tbl__them b, .hm-tbl__us b { display: block; font: 600 16.5px/1.3 "Poppins", sans-serif; letter-spacing: -.01em; }
.hm-tbl__them small, .hm-tbl__us small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; }
.hm-tbl__them b { color: rgba(255, 255, 255, .86); } .hm-tbl__them small { color: rgba(255, 255, 255, .62); }
.hm-tbl__us b { color: #fff; } .hm-tbl__us small { color: rgba(255, 255, 255, .86); }
.hm-tbl__row:not(.hm-tbl__row--head):not(.hm-tbl__row--foot):hover > .hm-tbl__topic, .hm-tbl__row:not(.hm-tbl__row--head):not(.hm-tbl__row--foot):hover > .hm-tbl__them { background-color: rgba(255, 255, 255, .035); }
.hm-tbl__row:not(.hm-tbl__row--head):not(.hm-tbl__row--foot):hover > .hm-tbl__us { background-color: rgba(255, 255, 255, .07); }
.hm-tbl__row--foot { --i: 5; }
.hm-tbl__row--foot > span { padding-block: 8px 30px; }
.js .hm-tbl::before { opacity: 0; transform: scaleY(.9); transition: opacity .7s ease .1s, transform 1s var(--hm-ease) .1s; }
.js .hm-tbl.is-in::before { opacity: 1; transform: none; }
.js .hm-tbl__row > span { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--hm-ease) calc(var(--i, 0) * .1s + .25s), transform .8s var(--hm-ease) calc(var(--i, 0) * .1s + .25s), background-color .25s; }
.js .hm-tbl.is-in .hm-tbl__row > span { opacity: 1; transform: none; }
.js .hm-tbl i.ok { transform: scale(0) rotate(-90deg); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i, 0) * .1s + .65s); }
.js .hm-tbl.is-in i.ok { transform: none; }
/* phones and tablets: one card per topic, the Motormoolah answer first, the "elsewhere" answer underneath */
@media (max-width: 899px) {
  .hm-tbl { gap: 12px; }
  .hm-tbl::before, .hm-tbl::after, .hm-tbl__row--head { display: none; }
  .hm-tbl__row { grid-template-columns: minmax(0, 1fr); border-radius: var(--r-md); overflow: hidden; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
  .hm-tbl__row > span { box-shadow: none !important; padding: 14px 16px; }
  .hm-tbl__topic { padding-bottom: 6px !important; }
  .hm-tbl__us { order: 1; margin: 0 8px; border-radius: var(--r-sm); background: linear-gradient(135deg, #3a59e0, var(--hm-royal)); }
  .hm-tbl__them { order: 2; }
  .hm-tbl__them > span::before { content: "Selling elsewhere"; display: block; margin-bottom: 4px; font: 600 10.5px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
  .hm-tbl__row--foot { background: none; box-shadow: none; }
  .hm-tbl__row--foot .hm-tbl__topic, .hm-tbl__row--foot .hm-tbl__them { display: none; }
  .hm-tbl__row--foot .hm-tbl__us { margin: 4px 0 0; padding: 0; background: none; }
  .hm-tbl__row--foot .hm-btn { width: 100%; justify-content: space-between; }
}


/* v5.8 · the final form is the plate and one full-width button (no mileage), like the hero card */
.hm-rd__row2, .hm-rd__row2 .hm-btn--xl { grid-template-columns: minmax(0, 1fr); width: 100%; }
@media (min-width: 640px) { .hm-rd__row2 { grid-template-columns: minmax(0, 1fr); } .hm-rd__row2 .hm-btn--xl { width: 100%; font-size: 18px; } }

/* =====================================================================
   v5.9 · the 50+ emblem as a heritage seal: the yellow ring draws and the circular text writes itself in, clockwise,
   while the number counts to 50 (--hr: 0 → 1); afterwards the words turn very slowly.
   ===================================================================== */
.hm-hg__emblem { width: min(360px, 42vh, 74vw); }
.hm-hg__seal { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-hg__seal .ring-t { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .12); stroke-width: .8; }
.hm-hg__seal .ring-p { fill: none; stroke: var(--hm-yellow); stroke-width: 1.4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 100px 100px;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--hr, 1) * 100); }
.hm-hg__seal .words { transform-origin: 100px 100px; animation: hmSpin 90s linear infinite; }
.hm-hg__seal text { font: 600 8.6px "Inter", sans-serif; letter-spacing: .1em; fill: rgba(255, 255, 255, .78); }
/* the words appear clockwise from the top in step with the ring */
.hm-hg__seal .words text { -webkit-mask: conic-gradient(from -90deg at 100px 100px, #000 calc(var(--hr, 1) * 360deg), transparent 0); mask: conic-gradient(from -90deg at 100px 100px, #000 calc(var(--hr, 1) * 360deg), transparent 0); }
.hm-hg__fifty { margin-top: -5%; align-items: flex-start; }
.hm-hg__num { font-size: clamp(92px, min(10.5vw, 16vh), 138px); line-height: .82; letter-spacing: -.055em; background: none; color: #fff; -webkit-text-fill-color: #fff; }
.hm-hg__fifty sup { font-size: clamp(28px, 3vw, 42px); line-height: 1; margin: .08em 0 0 .04em; color: var(--hm-yellow); }
.hm-hg__yrs { left: 50%; right: auto; bottom: 27%; translate: -50% 0; width: max-content; font: 600 12px/1 "Inter", sans-serif; letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase; color: var(--hm-yellow); }
@media (prefers-reduced-motion: reduce) { .hm-hg__seal .words { animation: none; } }

/* =====================================================================
   v5.10 · hero stats on desktop and tablet: "10,000+ Customers served" shows three customer faces instead of the icon (as on phones)
   ===================================================================== */
@media (min-width: 700px) {
  .usps li:has(.usp-faces) > .ic { display: none; }
  .usp-faces { display: flex; flex: none; }
  .usp-faces { --fs: clamp(34px, 2.5vw, 42px); }
  .usp-faces img { width: var(--fs); height: var(--fs); border-radius: 50%; object-fit: cover; object-position: 50% 15%;
    border: 2px solid #fff; margin-left: calc(var(--fs) * -.46); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .55); }
  .usp-faces img:first-child { margin-left: 0; }
  .usps li:has(.usp-faces) .tx, .usps li:has(.usp-faces) .tx span { white-space: nowrap; }
}

/* =====================================================================
   v5.11 · Why: the phone in the centre, the three cards around it in a zigzag (left · right · left).
   Desktop: the section holds while you scroll and the scroll moves the walkthrough; elsewhere it plays by itself.
   ===================================================================== */
.hm-why .hm-why__grid { display: grid; gap: 16px; align-items: center; }
@media (min-width: 1024px) {
  .hm-why .hm-why__grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: repeat(3, auto); column-gap: clamp(36px, 4vw, 64px); row-gap: 0; }
  .hm-why .hm-phone-wrap { grid-column: 2; grid-row: 1 / span 3; }
  .hm-why__card--a { grid-column: 1; grid-row: 1; align-self: end; }
  .hm-why__card--b { grid-column: 3; grid-row: 2; }
  .hm-why__card--c { grid-column: 1; grid-row: 3; align-self: start; }
  .hm-why__card--a, .hm-why__card--c { justify-self: end; }
  .hm-why__card--b { justify-self: start; }
  .hm-why__card { max-width: 380px; }
}
@media (max-width: 1023px) { .hm-why .hm-phone-wrap { order: -1; margin-bottom: 12px; } }
.hm-why__card { position: relative; }
.hm-why__card:not(.is-lit) { opacity: .62; }
.hm-why__card { transition: opacity .4s var(--hm-ease), box-shadow .45s var(--hm-ease), transform .45s var(--hm-ease); }
/* a connector from the lit card towards the phone */
@media (min-width: 1024px) {
  .hm-why__card::after { content: ""; position: absolute; top: 50%; width: clamp(28px, 3vw, 52px); height: 2px; background: linear-gradient(90deg, var(--hm-royal), rgba(41, 69, 197, 0)); opacity: 0; transition: opacity .4s; }
  .hm-why__card--a::after, .hm-why__card--c::after { left: 100%; }
  .hm-why__card--b::after { right: 100%; transform: scaleX(-1); }
  .hm-why__card.is-lit::after { opacity: 1; }
}
.hm-why .hm-phone-wrap { width: min(300px, 76vw, calc((100svh - 300px) * .47)); min-width: 236px; }
.hm-why__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.hm-why__dots li { width: 34px; height: 4px; border-radius: 4px; background: var(--hm-line); overflow: hidden; }
.hm-why__dots i { display: block; height: 100%; background: var(--hm-ink); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
/* pinned (desktop): the stage holds while the walkthrough plays through with the scroll */
.hm-pin .hm-why__pin { height: 300svh; }
.hm-pin .hm-why__stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-top: 64px; }
.hm-pin .hm-main > .hm-why { padding-block: 0; }
.hm-pin .hm-why .hm-head { margin-bottom: clamp(20px, 3.5svh, 40px); }
.hm-pin .hm-why .hm-feat__bar { display: none; }      /* the scroll drives it, so no timer bar */

.hm-why .hm-why__card, .hm-why .hm-why__card .hm-feat__txt { text-align: left; }
.hm-why .hm-why__card { flex-direction: row !important; }

.hm-card--a .hm-card__img img { object-position: 62% 40%; }

/* v5.12 · a realistic phone: true-to-life corner radius (~13% of the width) and a slimmer frame with a metal edge */
.hm-phone { border-radius: 13% / 6.15%; box-shadow: 0 0 0 8px #0d1240, 0 0 0 9.5px #5a6390, 0 0 0 10.5px #232a5c, 0 40px 80px -24px rgba(16, 31, 112, .5), 0 18px 30px -18px rgba(16, 31, 112, .4); }
.hm-phone__island { width: 30%; height: 26px; margin-left: -15%; top: 10px; border-radius: 16px; }
.hm-scr[data-scr="0"] .hm-scr__btn { margin-top: 0; }
.js .hm-scr__trust .hm-stars i::before { transform: scaleX(var(--f, 1)); }
.hm-scr__trust .hm-stars i { background: #dcdce6; }
.hm-card--c .hm-card__img img { object-position: 72% 40%; }

/* v5.13 · the phone is designed at one size (300px wide) and scaled as a whole to fit (home-v5.js sets --z),
   so its screens look identical at every size instead of reflowing */
.hm-why .hm-phone-wrap { min-width: 0; }
.hm-why .hm-phone { width: 300px; zoom: var(--z, 1); }
.hm-scr > * { flex-shrink: 0; }

/* =====================================================================
   v5.14 · the falling key: the car key snaps off the hero keychain (the keychain stays, its key is masked out), tumbles down the
   right-hand edge as you scroll, and clips back onto the final-section keychain (shown without its key until it lands).
   ===================================================================== */
.hm-fall { position: fixed; z-index: 110; left: 0; top: 0; width: 80px; pointer-events: none; opacity: 0; visibility: hidden; will-change: transform; transform-origin: 50% 40%; }
.hm-fall img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(6, 12, 56, .35)); }
.hm-falling .hm-fall { opacity: 1; visibility: visible; }
.hm-key-off .keys.keys--v2 .keys__swing { -webkit-mask: url(assets/keychain-hero-nokey-mask.png) 0 0 / 100% 100% no-repeat; mask: url(assets/keychain-hero-nokey-mask.png) 0 0 / 100% 100% no-repeat; }
.hm-rd__keys img.nokey { position: absolute; left: 0; top: 0; width: 100%; }
.hm-rd__keys img.nokey { opacity: 0; }
.hm-fall-armed:not(.hm-landed) .hm-rd__keys img.nokey { opacity: 1; }
.hm-fall-armed:not(.hm-landed) .hm-rd__keys img.full { opacity: 0; }

/* v5.15 · the footer sits on layer 0 (the page content is on layer 1 above it), not below the body: with z-index -1 the body
   caught every click and hover, so the email field couldn't be typed in and the Subscribe button had no hover */
.hm-ft { z-index: 0; }
.hm-main { z-index: 1; }
/* footer Subscribe: no resting glow (it read as a hover state); a clear hover instead */
.hm-ft__form .hm-btn--yellow { box-shadow: none; }
.hm-ft__form .hm-btn--yellow:hover { background: #ffdf4d; box-shadow: 0 0 0 3px rgba(252, 205, 11, .25); }

/* =====================================================================
   v5.16 · Guides: three equal article cards. Each has its own illustration built from brand elements (no stock photos);
   on hover the card outline darkens and the pieces of the illustration move a little. Nothing jumps.
   ===================================================================== */
.hm-blog { display: grid; gap: 20px; }
@media (min-width: 700px) { .hm-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hm-blog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.hm-post { display: flex; }
.hm-post__link { position: relative; display: flex; flex-direction: column; width: 100%; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--hm-line), var(--hm-shadow);
  transition: box-shadow .4s var(--hm-ease); }
.hm-post__link:hover { box-shadow: inset 0 0 0 1.5px var(--hm-ink), var(--hm-shadow-lg); }
.hm-post__art { position: relative; aspect-ratio: 400 / 260; margin: 10px 10px 0; border-radius: calc(var(--r-lg) - 10px); overflow: hidden; isolation: isolate; }
.hm-post__art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-post__art--sell { background: radial-gradient(70% 80% at 85% 10%, #4a68ea 0%, rgba(74, 104, 234, 0) 60%), linear-gradient(160deg, #2f4dd6, var(--hm-royal) 55%, #1f39b0); }
.hm-post__art--finance { background: radial-gradient(70% 80% at 15% 10%, #2a44c4 0%, rgba(42, 68, 196, 0) 60%), linear-gradient(160deg, #16288f, var(--hm-ink) 55%, var(--hm-deep)); }
.hm-post__art--collect { background: radial-gradient(70% 80% at 90% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #e3e9fc, #eef2fd); }
.hm-post__art .ring { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.5; }
.hm-post__art--collect .ring { stroke: rgba(16, 31, 112, .08); }
.hm-post__art text { font-family: "Poppins", sans-serif; }
.hm-post__art .uk { font: 700 13px "Poppins", sans-serif; fill: #fff; text-anchor: middle; }
.hm-post__art .reg { font: 700 46px "Charles Wright", "Poppins", sans-serif; letter-spacing: .03em; fill: #111; text-anchor: middle; }
.hm-post__art .chip-t { font: 600 15px "Poppins", sans-serif; fill: var(--hm-ink); }
.hm-post__art .chip-t--c { text-anchor: middle; }
.hm-post__art .chip-s { font: 500 11px "Inter", sans-serif; fill: var(--hm-muted); }
.hm-post__art .gbp { font: 700 18px "Poppins", sans-serif; fill: var(--hm-ink); text-anchor: middle; }
.hm-post__art .road { fill: none; stroke: #c9d3f3; stroke-width: 30; stroke-linecap: round; }
.hm-post__art .road-dash { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 14 12; }
.hm-post__art .ripple { fill: rgba(252, 205, 11, .45); }
.hm-post__art .chip rect:first-child { filter: drop-shadow(0 10px 14px rgba(6, 12, 56, .22)); }
/* resting poses, and where each piece moves to on hover */
.hm-post__art g { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--hm-ease); }
.hm-post__art .plate { transform: rotate(-6deg); }
.hm-post__link:hover .plate { transform: rotate(-2deg) translateY(-4px); }
.hm-post__art .tap .ripple { transform-box: fill-box; transform-origin: center; }
.hm-post__link:hover .tap .ripple { animation: hmRipple 1.2s ease-out infinite; }
@keyframes hmRipple { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.hm-post__link:hover .chip { transform: translateY(-5px); }
.hm-post__art .doc { transform: rotate(5deg); }
.hm-post__link:hover .doc { transform: rotate(1deg); }
.hm-post__art .stamp { transform: scale(.9) rotate(8deg); }
.hm-post__link:hover .stamp { transform: scale(1.05) rotate(-6deg); }
.hm-post__link:hover .truck { transform: translateX(16px); }
.hm-post__link:hover .pin { transform: translateY(-6px); }
.hm-post__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 26px 26px; }
.hm-post__meta { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--hm-muted); }
.hm-post__meta span { padding: 5px 10px; border-radius: 8px; background: var(--hm-tint); color: var(--hm-royal); font-weight: 600; font-size: 12px; }
.hm-post h3 { font: 600 var(--fs-h3)/1.25 "Poppins", sans-serif; letter-spacing: -.02em; color: var(--hm-ink); text-wrap: balance; }
.hm-post__body > p:not(.hm-post__meta) { font-size: var(--fs-body); line-height: 1.6; color: var(--hm-text); }
.hm-post__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font: 600 15px/1 "Poppins", sans-serif; color: var(--hm-royal); }
.hm-post__go svg { width: 16px; height: 16px; overflow: hidden; }
.hm-post__link:hover .hm-post__go svg { animation: mmArrowR .7s both; }
@media (prefers-reduced-motion: reduce) { .hm-post__art g, .hm-post__link:hover .tap .ripple { transition: none; animation: none; } }

/* =====================================================================
   v5.17 · no jumps in the Hilton scene: the number keeps a fixed width while it counts, so "+" and the label stay put
   ===================================================================== */
.hm-hg__num { display: inline-block; min-width: 2.05ch; text-align: center; font-variant-numeric: tabular-nums; }

/* =====================================================================
   v5.17 · the hero's shine on the yellow words: the same white-gold sweep as "Moolah!", travelling word by word
   ===================================================================== */
.hm-dark .hm-mk .hm-w > span, .hm-royal .hm-mk .hm-w > span {
  background-image: linear-gradient(105deg, transparent 30%, rgba(255, 250, 205, .9) 41%, #fff 46%, #fff 54%, rgba(255, 250, 205, .9) 59%, transparent 70%), linear-gradient(var(--hm-yellow), var(--hm-yellow));
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 175% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: hlShine 5s ease-in-out calc(2s + var(--w, 0) * .14s) infinite; }
@keyframes hlShine { 0% { background-position: 175% 0, 0 0; } 40%, 100% { background-position: -75% 0, 0 0; } }
/* the Trustpilot stars in the stories get the hero's glint once they have filled */
.hm-score .hm-stars { position: relative; }
.hm-score .hm-stars::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%) 110% 0 / 250% 100% no-repeat; }
.js .hm-score.is-in .hm-stars::after { animation: hmStarGlint 4.5s ease-in-out .9s infinite; }
@keyframes hmStarGlint { 0% { background-position: 110% 0; } 25%, 100% { background-position: -10% 0; } }
@media (prefers-reduced-motion: reduce) { .hm-dark .hm-mk .hm-w > span, .hm-royal .hm-mk .hm-w > span, .js .hm-score.is-in .hm-stars::after { animation: none; } }

/* =====================================================================
   v5.17 · the story deck deals faster
   ===================================================================== */
.hm-story { transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; }
.hm-story.is-out { transition: transform .4s cubic-bezier(.45, .05, .55, .95), opacity .28s ease .1s; }
.hm-story::before { transition: opacity .4s ease; }

/* =====================================================================
   v5.18 · steady light in the pinned scenes: the grain sits on the pinned stage (not on the tall section that scrolls behind it),
   there is no mouse-follow light here, and the dimming as the next section covers it is a fading overlay instead of a filter
   (a filter re-renders every gradient on each frame, which flickered).
   ===================================================================== */
.hm-hg::before { display: none; }
.hm-hg__stage { filter: none !important; }
.hm-hg__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hm-hg__stage::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #030726; opacity: calc(var(--cv, 0) * .42); border-radius: inherit; }
.hm-hg__beams i { will-change: translate, opacity; }
.hm-hg__glow { will-change: opacity; }
.stage > .hm-steps { filter: none !important; }
.stage > .hm-steps::after { content: ""; position: absolute; inset: 0; z-index: 50; pointer-events: none; background: #030726; opacity: calc(var(--cv, 0) * .38); border-radius: inherit; }

/* v5.19 · footer form: no yellow strokes. Focus is shown by the field brightening a little instead. */
.hm-ft__form:focus-within { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .1); }
.hm-ft__form input:focus-visible { outline: none; }
.hm-ft__form .hm-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
/* the separator dots in the giant outlined words are outlined too, instead of solid grey-looking dots */
.hm-rv__marquee i, .hm-rd__row i { background: none; box-shadow: inset 0 0 0 1.5px rgba(252, 205, 11, .5); }

/* =====================================================================
   v5.20 · Guides: photo-led article cards. The photo runs edge to edge at the top, category and read time sit on it as glass chips,
   then title, summary and a round arrow. Hover: the photo eases in slightly, the arrow fills; nothing else moves.
   ===================================================================== */
.hm-post__link { overflow: hidden; }
.hm-post__img { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hm-tint); }
.hm-post__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 1.1s var(--hm-ease); }
.hm-post__link:hover .hm-post__img img { transform: scale(1.06); }
.hm-post__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 21, 80, .28) 0%, rgba(11, 21, 80, 0) 34%); pointer-events: none; }
.hm-post__chip, .hm-post__time { position: absolute; z-index: 1; top: 16px; padding: 7px 12px; border-radius: 999px; font: 600 12px/1 "Inter", sans-serif; color: #fff;
  background: rgba(11, 21, 80, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.hm-post__chip { left: 16px; } .hm-post__time { right: 16px; font-weight: 500; }
.hm-post__body { gap: 12px; padding: 24px 26px 26px; }
.hm-post__body > p { font-size: var(--fs-body); line-height: 1.6; color: var(--hm-text); }
.hm-post__go { justify-content: space-between; width: 100%; padding-top: 14px; margin-top: auto; border-top: 1px solid var(--hm-line); }
.hm-post__go i { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--hm-ink); box-shadow: inset 0 0 0 1.5px var(--hm-line); overflow: hidden; transition: background-color .3s, color .3s, box-shadow .3s; }
.hm-post__go i svg { width: 16px; height: 16px; }
.hm-post__link:hover .hm-post__go i { background: var(--hm-ink); color: var(--hm-yellow); box-shadow: none; }
.hm-post__link:hover .hm-post__go svg { animation: mmArrowR .7s both; }
.hm-post__link:hover .hm-post__go > span + svg { animation: none; }
/* phones: a swipeable row with the next card peeking in */
@media (max-width: 699px) {
  .hm-blog { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * clamp(20px, 4vw, 40px)); padding: 4px clamp(20px, 4vw, 40px) 12px; }
  .hm-blog::-webkit-scrollbar { display: none; }
  .hm-post { flex: 0 0 84%; scroll-snap-align: center; }
}

/* v5.21 · the FAQ intro scrolls with the questions (no sticky column) */
@media (min-width: 1024px) { .hm-fq__intro { position: static; } }

/* =====================================================================
   v5.21 · more on-scroll motion
   - photos open with a wipe from the bottom while they settle from a slight zoom (guides, stacked cards)
   - the three guide cards drift at slightly different speeds as you scroll past (home-v5.js sets --pd)
   - FAQ questions slide in from the right one after another
   - the comparison panel and the stats lift in with the scroll
   ===================================================================== */
.js .hm-post .hm-post__img { clip-path: inset(22% 0 0 0); transition: clip-path 1.2s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0s) + .1s); }
.js .hm-post .hm-post__img img { transform: scale(1.16); transition: transform 1.6s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0s) + .1s); }
.js .hm-post.is-in .hm-post__img { clip-path: inset(0 0 0 0); }
.js .hm-post.is-in .hm-post__img img { transform: scale(1.01); }
.js .hm-post.is-in .hm-post__link:hover .hm-post__img img { transform: scale(1.06); transition-duration: 1.1s; transition-delay: 0s; }
.js .hm-card .hm-card__img { clip-path: inset(30% 0 0 0 round calc(var(--r-lg) - 10px)); transition: clip-path 1.3s cubic-bezier(.2, .8, .2, 1) .15s; }
.js .hm-card.is-in .hm-card__img { clip-path: inset(0 0 0 0 round calc(var(--r-lg) - 10px)); }
@media (min-width: 1024px) { .hm-blog .hm-post { translate: 0 var(--pd, 0px); } }
.js .hm-acc__item[data-r] { transform: translateX(40px); }
.js .hm-acc__item[data-r].is-in { transform: none; }
.hm-tbl { scale: var(--ts, 1); transform-origin: 50% 0; }
@media (prefers-reduced-motion: reduce) {
  .js .hm-post .hm-post__img, .js .hm-card .hm-card__img { clip-path: none; transition: none; }
  .js .hm-post .hm-post__img img { transform: none; transition: none; }
  .hm-blog .hm-post { translate: none; }
}

/* v5.22 · easier reading: body and small text a step larger, a little more line height */
.hm { --fs-body: 16.5px; --fs-small: 14.5px; --fs-lede: clamp(18px, 1.3vw, 20px); }
.hm-tbl__them small, .hm-tbl__us small { font-size: 14.5px; }
.hm-hg__list small { font-size: 13.5px; }

/* v5.23 · reg plates: the backing is the border colour and only the typing area is yellow, so no yellow sliver can show
   at the rounded corner beside the blue UK strip (final form and the phone screen) */
.hm-plate { background: var(--hm-ink); }
.hm-plate__input { background: #ffd400; align-self: stretch; }
.hm-scr__plate { background: var(--hm-ink); }
.hm-scr__plate .hm-scr__reg { background: #ffd400; }

/* =====================================================================
   v5.24 · Hilton scene, steady while you scroll past: no sliding light bars, no grain, no blurred glass, and the stage keeps
   fixed corners while it shrinks (only its size and a dimming layer change, both cheap to draw).
   ===================================================================== */
.hm-hg__beams { display: none; }
.hm-hg__stage::before { display: none; }
.hm-hg__stage { border-radius: 44px 44px 0 0 !important; }
.hm-hg__logo { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .09); }
.hm-hg__glow { will-change: auto; }

/* the shine on yellow words is one continuous sweep across the whole phrase (home-v5.js gives each word its offset),
   so it travels smoothly like "Moolah!" in the hero instead of flashing word by word */
@property --sh { syntax: '<number>'; inherits: true; initial-value: 1.75; }
.hm-dark .hm-mk, .hm-royal .hm-mk { --sh: 1.75; animation: hmPhraseShine 5s ease-in-out 2s infinite; }
@keyframes hmPhraseShine { 0% { --sh: 1.75; } 40%, 100% { --sh: -.75; } }
.hm-dark .hm-mk .hm-w > span, .hm-royal .hm-mk .hm-w > span {
  animation: none;
  background-size: calc(var(--pw, 400px) * 2.6) 100%, 100% 100%;
  background-position: calc(var(--sh) * (var(--pw, 400px) - var(--pw, 400px) * 2.6) - var(--ox, 0px)) 0, 0 0; }
@media (prefers-reduced-motion: reduce) { .hm-dark .hm-mk, .hm-royal .hm-mk { animation: none; --sh: 1.75; } }

/* =====================================================================
   v5.25 · one icon style everywhere: outline icons on a 24px grid, 2px line, rounded ends, no solid fills (sprite in index-v5.html).
   The typed "✓" and "→" characters in the phone screens are replaced by the same icons, and every icon tile uses one size.
   ===================================================================== */
.hm-scr__tiles span::after, .hm-scr__opts span.is-on::after { content: ""; background: var(--hm-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 64% no-repeat; }
.hm-scr__opts span.is-on::after { background-color: var(--hm-royal); }
.hm-scr__steps .tick:not(.tick--gbp)::before { content: ""; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 56% no-repeat; }
.hm-scr__btn i svg { width: 16px; height: 16px; }
.hm-feat__ic, .hm-hg__ic, .hm-tbl__ic, .hm-help__ic { width: 44px; height: 44px; }
.hm-feat__ic, .hm-hg__ic, .hm-tbl__ic { border-radius: var(--r-sm); }
.hm-feat__ic svg, .hm-hg__ic svg, .hm-tbl__ic svg, .hm-help__ic svg { width: 20px; height: 20px; }

/* v5.26 · Why cards (as before: icon beside the text), set further out from the phone and with rounder corners */
@media (min-width: 1024px) {
  .hm-why .hm-why__grid { column-gap: clamp(72px, 8vw, 132px); }
  .hm-why .hm-why__card { border-radius: 30px; }
  .hm-why__card::after { display: none; }
}

/* v5.27 · the stories use illustrative photos, and say so */
.hm-rv__note { margin-top: 14px !important; font-size: 13px; color: rgba(255, 255, 255, .6); }
.hm-story img { object-position: 50% 30%; }

/* =====================================================================
   v5.28 · guide photos: a small piece of live UI on each, placed clear of faces. It plays when the card comes into view
   and replays on hover (home-v5.js toggles .ov-on and types the plate).
   ===================================================================== */
.hm-ov { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: "Inter", sans-serif; }
.hm-ov > * { position: absolute; opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .5s var(--hm-ease), transform .7s var(--hm-ease); }
.ov-on .hm-ov > * { opacity: 1; transform: none; }
.hm-ov__chip, .hm-ov__card { display: grid; background: rgba(255, 255, 255, .95); color: var(--hm-ink); border-radius: 14px; box-shadow: 0 14px 30px -12px rgba(6, 12, 56, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hm-ov i.ok { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--hm-ok); color: #fff; transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.hm-ov i.ok svg { width: 13px; height: 13px; stroke-width: 3; }
.hm-ov small { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--hm-muted); text-transform: uppercase; }
.hm-ov b { font: 600 17px/1.1 "Poppins", sans-serif; letter-spacing: -.02em; }
/* 1 · the plate types the reg (bottom right, over the tabletop), then the price chip pops over the window */
.hm-ov__plate { right: 5%; bottom: 7%; display: flex; height: 40px; border: 2.5px solid var(--hm-ink); border-radius: 9px; overflow: hidden; background: var(--hm-ink); box-shadow: 0 14px 30px -12px rgba(6, 12, 56, .6); }
.hm-ov__plate .uk { width: 26px; display: grid; place-items: end center; padding-bottom: 5px; background: var(--brand-blue, #2541bb); color: #fff; font: 700 8.5px/1 "Poppins", sans-serif; }
.hm-ov__plate .reg { min-width: 116px; padding: 3px 12px 0; display: grid; place-items: center; background: #ffd400; font: 700 21px/1 "Charles Wright", "Poppins", sans-serif; letter-spacing: .05em; color: #111; }
.hm-ov__plate .reg span:empty::before { content: "\00a0"; }
.hm-ov__plate .reg span::after { content: ""; display: inline-block; width: 2px; height: .8em; margin-left: 2px; vertical-align: -.06em; background: #111; animation: blink 1s steps(1) infinite; }
.hm-ov__price { right: 6%; top: 15%; grid-template-columns: auto auto; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; }
.hm-ov__price > span { display: grid; gap: 2px; }
.ov-on .hm-ov__price { transition-delay: 1.5s; }
.ov-on .hm-ov__price i.ok { transform: none; transition-delay: 1.8s; }
/* 2 · the settlement card (bottom right) */
.hm-ov__card { right: 5%; bottom: 6%; gap: 3px; padding: 11px 14px 12px; min-width: 150px; }
.hm-ov__card .row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; font-weight: 600; }
.ov-on .hm-ov--g2 .hm-ov__card i.ok { transform: none; transition-delay: .8s; }
/* 3 · the collection checklist (right side, over the car), ticking off one by one */
.hm-ov--g3 .hm-ov__list { top: 36%; bottom: auto; }
.hm-ov__list .row { opacity: .45; transition: opacity .3s calc(var(--n) * .5s + .6s); }
.ov-on .hm-ov__list .row { opacity: 1; }
.ov-on .hm-ov__list .row i.ok { transform: none; transition-delay: calc(var(--n) * .5s + .6s); }
@media (max-width: 699px) { .hm-ov__plate { height: 34px; } .hm-ov__plate .reg { min-width: 96px; font-size: 17px; } .hm-ov b { font-size: 15px; } .hm-ov__card .row { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .hm-ov > *, .hm-ov i.ok, .hm-ov__list .row { transition: none; } }

/* =====================================================================
   v5.29 · the page flows section by section: nothing slides over the section before it. The steps finish and scroll away,
   the Hilton scene plays (pinned) and then scrolls away, and the stories follow. No shrinking or dimming of covered sections.
   ===================================================================== */
.hm-main > .hm-hg, .hm-pin .hm-main > .hm-hg { margin-top: 0; border-radius: 0; }
.hm-pin .hm-main > .hm-sec.hm-rv, .hm-main > .hm-sec.hm-rv { margin-top: 0; border-radius: 0; }
.hm-hg__stage, .hm-pin .hm-hg__stage { border-radius: 0 !important; transform: none !important; }
.hm-hg__stage::after, .stage > .hm-steps::after { display: none; }
.stage > .hm-steps { transform: none !important; border-radius: 0 !important; }
.stage { background: #fff; }

/* =====================================================================
   v5.30 · the collection overlay on guide 3 is one small chip over the car door, clear of the driver.
   ===================================================================== */
.hm-ov--g3 .hm-ov__chip { right: 5%; top: 40%; grid-template-columns: auto auto; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; }
.hm-ov--g3 .hm-ov__chip > span { display: grid; gap: 2px; }
.ov-on .hm-ov--g3 .hm-ov__chip { transition-delay: .5s; }
.ov-on .hm-ov--g3 .hm-ov__chip i.ok { transform: none; transition-delay: .8s; }
/* the Hilton section ends where its own gradient ends (no darker band before the stories), and a white gap sits under the steps */
.hm-main > .hm-sec.hm-hg { padding: 0; }
.hm-main { padding-top: clamp(64px, 7vw, 104px); background: linear-gradient(#fff, #fff) top / 100% clamp(64px, 7vw, 104px) no-repeat; }
@media (max-width: 899px) { .hm-main { padding-top: 48px; background-size: 100% 48px; } }

/* v5.31 · the Why cards are scroll-driven again on desktop: the section holds while the three cards play, then the page moves on */
.hm-pinwhy .hm-why__pin { height: 300svh; }
.hm-pinwhy .hm-why__stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-top: 64px; }
.hm-pinwhy .hm-main > .hm-why { padding-block: 0; }
.hm-pinwhy .hm-why .hm-head { margin-bottom: clamp(20px, 3.5svh, 40px); }
.hm-pinwhy .hm-why .hm-feat__bar { display: none; }

/* v5.32 · the stories deck runs on springs in home-v5.js (inline transforms), so the CSS only keeps the dimming per depth */
.hm-deck.is-phys .hm-story { transition: none; cursor: grab; }
.hm-deck.is-phys .hm-story.is-drag { cursor: grabbing; }
.hm-deck.is-phys .hm-story.is-far { opacity: 1; }
.hm-deck.is-phys .hm-story::before { opacity: calc(var(--k) * .15); transition: opacity .5s ease; }

/* v5.33 · guide 3: the chip sits low on the right, over the road, clear of the driver, his tablet and the tyre */
.hm-ov--g3 .hm-ov__chip { top: auto; bottom: 5%; right: 3.5%; }

/* v5.34 · footer links hover like the nav bar: a glass pill slides to the link under the pointer (no underline) */
.hm-ft__nav { position: relative; gap: 4px 0; margin-inline: -16px; }
.hm-ft__nav a { z-index: 1; padding: 6px 16px; border-radius: 999px; line-height: 1.6; }
.hm-ft__nav a::after { content: none; }
.hm-ft__glide { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
.hm-ft__nav:hover .hm-ft__glide, .hm-ft__nav:focus-within .hm-ft__glide { opacity: 1; }

/* v5.35 · guide cards: no rising or drifting. Each card comes into focus from a soft blur, its photo opens out of a rounded
   window while it settles from a zoom, then a light passes across the photo once. */
.hm-blog .hm-post { translate: none !important; }
.js .hm-gd .hm-post[data-r] { transform: none; scale: .97; filter: blur(8px);
  transition: opacity .9s var(--hm-ease) var(--d, 0s), scale 1.2s var(--hm-ease) var(--d, 0s), filter .9s var(--hm-ease) var(--d, 0s); }
.js .hm-gd .hm-post[data-r].is-in { scale: 1; filter: none; }
.js .hm-gd .hm-post .hm-post__img { clip-path: inset(9% 9% 9% 9% round 22px); }
.js .hm-gd .hm-post.is-in .hm-post__img { clip-path: inset(0 0 0 0 round 0); }
.hm-post__img::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .32) 47%, rgba(255, 255, 255, .32) 53%, transparent 65%) 200% 0 / 250% 100% no-repeat; }
.js .hm-gd .hm-post.is-in .hm-post__img::before { animation: hmPhotoSweep 1.4s cubic-bezier(.3, .6, .3, 1) calc(var(--d, 0s) + .75s) both; }
@keyframes hmPhotoSweep { from { background-position: 200% 0; } to { background-position: -100% 0; } }

/* v5.36 · the CTAs and small yellow tags shine like "Moolah!" in the hero: a bright band sweeps across every few seconds
   (each with its own delay, so they never flash together) */
body > .header .btn-yellow { position: relative; isolation: isolate; }
.hm-card__tag span, .hm-panel__no { overflow: hidden; isolation: isolate; }
.hm-card__tag span { position: relative; }
.hm-btn--yellow::before, .hm-btn--primary::before, .hm-btn--navy::before, body > .header .btn-yellow::before, .hm-card__tag span::before, .hm-panel.is-on .hm-panel__no::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 250, 205, .6) 43%, #fff 48%, #fff 52%, rgba(255, 250, 205, .6) 57%, transparent 68%) 175% 0 / 260% 100% no-repeat;
  animation: hmCtaShine 5.4s ease-in-out var(--shd, 1.4s) infinite; }
.hm-btn--yellow::before, body > .header .btn-yellow::before, .hm-card__tag span::before, .hm-panel.is-on .hm-panel__no::before { opacity: .8; }
.hm-btn--primary::before, .hm-btn--navy::before { opacity: .28; }
body > .header .btn-yellow { --shd: .5s; }
.hm-btn--navy { --shd: 2.2s; }
.hm-card__tag span { --shd: 3s; }
.hm-panel.is-on .hm-panel__no { --shd: .6s; }
@keyframes hmCtaShine { 0% { background-position: 175% 0; } 34%, 100% { background-position: -75% 0; } }
@media (prefers-reduced-motion: reduce) {
  .hm-btn--yellow::before, .hm-btn--primary::before, .hm-btn--navy::before, body > .header .btn-yellow::before, .hm-card__tag span::before, .hm-panel.is-on .hm-panel__no::before, .js .hm-gd .hm-post.is-in .hm-post__img::before { animation: none; }
  .js .hm-gd .hm-post[data-r] { filter: none; scale: 1; }
}

/* v5.37 · one stroke for every line icon and arrow: 1.5px on screen, whatever the icon's size or viewBox
   (non-scaling stroke, so a 13px tick and a 24px arrow draw the same line). Illustrations (seal, ring, guide art) keep their own. */
symbol [stroke="currentColor"], svg[stroke="currentColor"] *, .usps .ic svg *, .hm-ov i.ok svg { stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

/* v5.38 · footer social tiles and Back to top: glass tiles; on hover a yellow fill rises from the bottom while the icon rolls up
   out of the tile and a fresh copy rolls in from below (the same "out and back in" idea as the button arrows). Nothing moves its box. */
.hm-ft__soc { gap: 12px; }
.hm-ft__soc a { position: relative; width: 52px; height: 52px; border-radius: 16px; overflow: hidden; isolation: isolate; color: #fff; transform: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 28px -16px rgba(0, 0, 0, .6);
  transition: color .35s var(--hm-ease), box-shadow .35s var(--hm-ease); }
.hm-ft__soc a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, #ffe066, var(--hm-yellow));
  transform: translateY(101%); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.hm-ft__soc a:hover, .hm-ft__soc a:focus-visible { color: var(--hm-ink); transform: none; background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(252, 205, 11, .6), 0 18px 34px -14px rgba(252, 205, 11, .5); }
.hm-ft__soc a:hover::before, .hm-ft__soc a:focus-visible::before { transform: none; }
.hm-ft__soc svg { width: 20px; height: 20px; overflow: visible; filter: drop-shadow(0 40px 0 currentColor); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.hm-ft__soc a:hover svg, .hm-ft__soc a:focus-visible svg { transform: translateY(-40px); }
.hm-ft__soc a:nth-child(2)::before, .hm-ft__soc a:nth-child(2) svg { transition-delay: .02s; }
.hm-ft__top-btn { gap: 12px; padding: 6px 6px 6px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: box-shadow .35s var(--hm-ease), color .35s; }
.hm-ft__top-go { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; overflow: hidden; color: var(--hm-ink); background: var(--hm-yellow); }
.hm-ft__top-btn .hm-ft__top-go svg { width: 16px; height: 16px; transform: none; rotate: -90deg; }
.hm-ft__top-btn:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.hm-ft__top-btn:hover .hm-ft__top-go svg { transform: none; animation: mmArrowU .7s both; }
/* the same arrow hover as every other arrow, turned upwards: out through the top of the circle, a fresh one in from below */
@keyframes mmArrowU {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.55, 0, .8, .35); }
  42% { translate: 0 -170%; }
  42.1% { translate: 0 170%; animation-timing-function: cubic-bezier(.2, .75, .25, 1); }
  100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .hm-ft__soc a::before, .hm-ft__soc svg { transition: none; } .hm-ft__top-btn:hover .hm-ft__top-go svg { animation: none; } }

/* v5.39 · the big footer wordmark is decoration: it no longer sits over Back to top and swallows its clicks */
.hm-ft__word { pointer-events: none; }
.hm-ft__bot { position: relative; z-index: 1; }

/* v5.40 · nav glass: a lighter tint so the page shows through, still well blurred */
body > .header .header__bar::after { -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); }
body > .header.is-solid:not(.is-ink) .header__bar::after { background: rgba(14, 27, 100, .42); }
body > .header.is-solid.is-ink .header__bar::after { background: rgba(255, 255, 255, .55); }

/* v5.41 · new How it works photos (ChatGPT, art-directed): each folded strip is centred on the person */
.hm-panel:nth-child(1) .hm-panel__img { object-position: 64% 30%; }
.hm-panel:nth-child(2) .hm-panel__img { object-position: 76% 35%; }
.hm-panel:nth-child(3) .hm-panel__img { object-position: 32% 40%; }
/* v5.42 · new photos on cards 1 and 3 (ChatGPT, art-directed), framed on the people */
.hm-card--a .hm-card__img img { object-position: 60% 45%; }
.hm-card--c .hm-card__img img { object-position: 50% 35%; }

/* v5.44 · nav glass more see-through: a lighter tint and a softer blur, so shapes and colours behind it stay readable */
body > .header .header__bar::after { -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); }
body > .header.is-solid:not(.is-ink) .header__bar::after { background: rgba(14, 27, 100, .3); }
body > .header.is-solid.is-ink .header__bar::after { background: rgba(255, 255, 255, .34); }

/* v5.45 · phone, first screen: no stat tiles; the title and its line are centred and Trustpilot sits straight under the button */
.hm-scr[data-scr="0"] h4, .hm-scr[data-scr="0"] .hm-scr__sub { text-align: center; }
.hm-scr[data-scr="0"] .hm-scr__trust { margin-top: 6px; }

/* v5.46 · Hilton section: the four tiles that linked nowhere became three real checks, each opening the page it names
   (Companies House, Google Maps, Trustpilot). Rows read as links: a plain label on the right says what happens. */
.hm-hg__label { margin-top: var(--s-block); font: 600 12.5px/1.2 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.hm-hg__checks { display: grid; gap: 10px; width: 100%; margin-top: 14px; }
.hm-hg__checks a { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: var(--r-md); color: #fff;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background-color .3s, box-shadow .3s; }
.hm-hg__checks a:hover, .hm-hg__checks a:focus-visible { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(252, 205, 11, .55); }
.hm-hg__checks .hm-hg__ic { background: rgba(252, 205, 11, .14); color: var(--hm-yellow); transition: background-color .3s, color .3s; }
.hm-hg__checks a:hover .hm-hg__ic { background: var(--hm-yellow); color: var(--hm-ink); }
.hm-hg__ct { min-width: 0; }
.hm-hg__ct b { display: block; font: 600 var(--fs-h4)/1.3 "Poppins", sans-serif; letter-spacing: -.015em; }
.hm-hg__ct small { display: block; margin-top: 2px; font-size: var(--fs-small); line-height: 1.45; color: rgba(255, 255, 255, .66); }
.hm-hg__do { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 "Poppins", sans-serif; color: var(--hm-yellow); white-space: nowrap; }
.hm-hg__do svg { width: 15px; height: 15px; overflow: hidden; }
.hm-hg__checks a:hover .hm-hg__do svg { animation: mmArrowR .7s both; }
@media (max-width: 599px) { .hm-hg__do { font-size: 0; gap: 0; } .hm-hg__do svg { width: 18px; height: 18px; } }

/* =====================================================================
   v5.47 · ONE TYPE SCALE. Every text on the page uses one of these styles (the approved hero keeps its own H1):
     H2     section headlines ............ Poppins 600, --fs-h2 (56px on a laptop), 1.05
     H3     feature titles ............... Poppins 600, 24–33px, 1.15   (step panels, stacked cards, footer newsletter)
     H4     card titles .................. Poppins 600, 19–22px, 1.25   (stories, guides)
     H5     item titles .................. Poppins 600, 17px, 1.3       (Hilton checks, Why cards, comparison, FAQ questions)
     Body   every paragraph .............. Inter 400, 17px, 1.6         (section intros, card text, quotes, answers, lists)
     Small  supporting lines, fine print . Inter 400, 14.5px, 1.5
     Label  eyebrows and tags ............ Inter 600, 12.5px, uppercase, .16em
   ===================================================================== */
:root { --t-h3: clamp(24px, 2.3vw, 33px); --t-h4: clamp(19px, 1.5vw, 22px); --t-h5: 17px; --t-body: 17px; --t-small: 14.5px; --t-label: 12.5px; }
html .hm :is(.hm-panel__body h3, .hm-card__txt h3, .hm-ft__news h3) { font: 600 var(--t-h3)/1.15 "Poppins", sans-serif; letter-spacing: -.03em; }
html .hm :is(.hm-story__body h3, .hm-post__body h3) { font: 600 var(--t-h4)/1.25 "Poppins", sans-serif; letter-spacing: -.02em; }
html .hm :is(.hm-hg__ct b, .hm-feat__txt > b, .hm-acc__q, .hm-tbl b, .hm-tbl__topic, .hm-tbl__them) { font: 600 var(--t-h5)/1.3 "Poppins", sans-serif; letter-spacing: -.015em; }
html .hm :is(.hm-lede, .hm-panel__body p, .hm-card__txt > p:not(.hm-card__tag), .hm-checks li, .hm-acc__a p, .hm-post__body > p, .hm-story blockquote, .hm-ft__news p) {
  font: 400 var(--t-body)/1.6 "Inter", sans-serif; letter-spacing: 0; }
html .hm :is(.hm-hg__ct small, .hm-feat__txt > span, .hm-tbl small, .hm-ft__addr, .hm-help p, .hm-rd__micro, .hm-score__txt, .hm-story__who, .hm-deck__hint, .hm-rv__note, .hm-ft__bot p) {
  font-family: "Inter", sans-serif; font-size: var(--t-small); line-height: 1.5; font-weight: 400; letter-spacing: 0; }
html .hm :is(.hm-score__txt b, .hm-story__who b) { font-weight: 600; }
html .hm :is(.hm-eyebrow, .hm-hg__label, .hm-card__tag, .hm-feat__txt > em) { font: 600 var(--t-label)/1.2 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; font-style: normal; }
html .hm .hm-checks li { font-weight: 400; }
/* link labels (the "do this" words next to arrows) and the small photo chips each use one style too */
html .hm :is(.hm-hg__do, .hm-post__go > span, .hm-ft__top-btn) { font: 600 15px/1 "Poppins", sans-serif; letter-spacing: -.01em; }
html .hm .hm-panel__mini { font: 600 var(--t-h4)/1 "Poppins", sans-serif; letter-spacing: -.02em; }
html .hm :is(.hm-post__chip, .hm-post__time) { font: 600 12.5px/1 "Inter", sans-serif; }

/* v5.48 · phone, first screen balanced: the form sits in the middle of the screen (not packed at the top), a touch larger,
   with the title, the form and Trustpilot as three groups */
.hm-scr[data-scr="0"] { justify-content: center; gap: 14px; padding-bottom: 34px; }
.hm-scr[data-scr="0"] h4 { font-size: 24px; }
.hm-scr[data-scr="0"] .hm-scr__sub { margin-bottom: 10px; }
.hm-scr[data-scr="0"] .hm-scr__plate { height: 60px; }
.hm-scr[data-scr="0"] .hm-scr__reg { font-size: 27px; }
.hm-scr[data-scr="0"] .hm-scr__btn { height: 50px; }
.hm-scr[data-scr="0"] .hm-scr__trust { margin-top: 18px; }
/* v5.49 · the same balance on the other two phone screens: content centred in the screen, title centred, a touch larger */
.hm-scr { justify-content: center; gap: 14px; padding-bottom: 34px; }
.hm-scr h4 { font-size: 24px; text-align: center; }
.hm-scr[data-scr="1"] h4 { margin-bottom: 6px; }
.hm-scr[data-scr="1"] .hm-scr__opts span { padding: 16px; }
.hm-scr[data-scr="1"] .hm-scr__opts b { font-size: 14.5px; }
.hm-scr[data-scr="1"] .hm-scr__lbl { margin-top: 10px; text-align: center; }
.hm-scr[data-scr="1"] .hm-scr__slots span { padding: 12px 4px; }
.hm-scr[data-scr="1"] .hm-scr__slots span b { font-size: 15px; }
.hm-scr[data-scr="1"] .hm-scr__btn { height: 50px; margin-top: 10px; }
.hm-scr[data-scr="2"] h4 { margin-bottom: 6px; }
.hm-scr[data-scr="2"] .hm-scr__steps li { padding: 14px 16px; }
.hm-scr[data-scr="2"] .hm-scr__steps b { font-size: 14px; }
.hm-scr[data-scr="2"] .hm-scr__done { margin-top: 12px; padding: 20px; }
.hm-scr[data-scr="2"] .hm-scr__done b { font-size: 38px; }
/* v5.50 · phone screens build from the top down: the title, then each card in turn, then the total (home-v5.js numbers the
   pieces --sd in reading order). Everything plays when the phone comes into view, and again each time a screen opens;
   a screen that is leaving just fades, all at once. */
.js .hm-scr :is(.hm-scr__steps, .hm-scr__opts, .hm-scr__slots) { opacity: 1; transform: none; }
.js .hm-scr [data-sd] { opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .3s ease; }
.js .hm-phone.is-seen .hm-scr.is-on [data-sd] { opacity: 1; transform: none;
  transition: opacity .55s var(--hm-ease) calc(var(--sd) * .14s + .15s), transform .7s var(--hm-ease) calc(var(--sd) * .14s + .15s); }
.js .hm-scr__steps li { transition: opacity .25s ease, transform .3s ease; }
@media (prefers-reduced-motion: reduce) { .js .hm-scr [data-sd] { opacity: 1; transform: none; transition: none; } }
/* v5.51 · FAQ headline on two even lines ("Good questions." / "Straight answers."): the intro column is a little wider */
@media (min-width: 1024px) { .hm-fq__grid { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); column-gap: 56px; } }
.hm-fq__intro .hm-h2 .hm-mk { white-space: nowrap; }

/* v5.52 · the progress dashes sit behind the phone, so in the outro they tuck in under it */
.hm-why .hm-phone { z-index: 1; }
.hm-why .hm-why__dots { position: relative; z-index: 0; }

/* =====================================================================
   v5.53 · FAQ: a more satisfying open (home-v5.js runs the spring on the answer's height and splits it into lines)
   ===================================================================== */
.hm-acc.acc-js .hm-acc__item .hm-acc__a { grid-template-rows: 0fr; transition: none; }
.hm-acc.acc-js .hm-acc__item .hm-acc__a.a-open { grid-template-rows: 1fr; }
/* the + spins a quarter-and-a-half turn into a × (it stays a cross, so it reads as "close") */
.hm-acc__pm { transition: background-color .3s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.is-open .hm-acc__pm { transform: rotate(135deg); }
.is-open .hm-acc__pm::after { transform: rotate(90deg); }
/* the number tile fills with yellow from the bottom, with a small pop */
.hm-acc__n { position: relative; overflow: hidden; isolation: isolate; }
.hm-acc__n::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hm-yellow); transform: translateY(101%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.is-open .hm-acc__n { background: var(--hm-soft); animation: hmAccPop .55s cubic-bezier(.34, 1.56, .64, 1); }
.is-open .hm-acc__n::before { transform: none; }
@keyframes hmAccPop { 0% { scale: 1; } 40% { scale: 1.14; } 100% { scale: 1; } }
/* the answer's lines rise in one by one */
.hm-acc__ln { display: block; opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.is-open .hm-acc__ln { opacity: 1; transform: none; transition: opacity .5s var(--hm-ease) calc(var(--l) * .06s + .1s), transform .6s var(--hm-ease) calc(var(--l) * .06s + .1s); }
@media (prefers-reduced-motion: reduce) { .hm-acc__ln { opacity: 1; transform: none; transition: none; } .is-open .hm-acc__n { animation: none; } .hm-acc__pm, .hm-acc__n::before { transition: none; } }

/* v5.54 · the FAQ cards' mouse spotlight stays inside its card (it was lighting the whole section behind the headline) */
.hm-acc__item { position: relative; isolation: isolate; }
.hm-acc__item::before { z-index: -1; }


/* v5.56 · final section: the text and form are centred; the keychain is no longer a fixed picture beside them: it drops in from
   above, rests on the right, and falls away behind the footer as you reach it (home-v5.js) */
@media (min-width: 1024px) { .hm-rd__grid { grid-template-columns: minmax(0, 1fr); } }
.hm-rd__grid { justify-items: center; }
.hm-rd__txt { justify-items: center; text-align: center; width: 100%; max-width: 700px; }
.hm-rd__txt .hm-lede { margin-inline: auto; max-width: 560px; }
.hm-rd__form { width: 100%; max-width: 600px; margin-inline: auto; }
@media (min-width: 1024px) {
  .hm-rd .hm-rd__keys { position: absolute; z-index: 2; top: -10px; right: -40px; width: clamp(200px, 20vw, 320px); margin: 0; justify-self: auto; pointer-events: none; }
}
/* the filmed keychain is drawn on a canvas covering the clip's whole frame; the still is only the fallback */
.hm-rd__kc { position: absolute; max-width: none; pointer-events: none; opacity: 0; will-change: transform; }
.hm-rd__keys.is-film img { visibility: hidden; }

/* =====================================================================
   v5.57 · MOBILE REFINEMENT (phones, under 700px)
   - a tighter vertical rhythm, so the page is shorter to scroll and sections still breathe
   - Hilton checks: the row is the link; only the arrow shows, so the text has the width
   - footer: the email field gets the full width with Subscribe under it; the links sit on an even 2×2 grid, 44px tall
   - the sticky "Get my free valuation" bar respects the home indicator, and the page leaves room for it at the very end
   ===================================================================== */
@media (max-width: 699px) {
  .hm { --s-section: 72px; --s-head: 32px; }
  html .hm .hm-hg__checks .hm-hg__do { font-size: 0; gap: 0; }
  html .hm .hm-hg__checks .hm-hg__do svg { width: 18px; height: 18px; }
  .hm-hg__checks a { gap: 14px; padding: 14px 14px 14px 12px; }
  .hm-ft__form { flex-direction: column; gap: 8px; padding: 8px; }
  .hm-ft__form input { width: 100%; height: 52px; flex: none; }
  .hm-ft__form .hm-btn { width: 100%; justify-content: space-between; }
  .hm-ft__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-inline: -16px; }
  .hm-ft__nav a { display: flex; align-items: center; min-height: 44px; }
  .hm-dock { bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .hm-acc__pm { width: 38px; height: 38px; }
  .hm-rd__txt .hm-h2 { font-size: var(--fs-h2); }
}

/* v5.58 · phones: "What makes us different" stacks like on desktop: each card sticks under the menu bar and the next one
   slides over it (the one underneath shrinks and dims a touch) */
@media (max-width: 899px) {
  .hm-stack { gap: 18px; padding-bottom: 24px; }
  .hm-card { position: sticky; top: calc(80px + var(--i, 0) * 12px); transform: scale(var(--sc, 1)); transform-origin: 50% 0; filter: brightness(var(--br, 1)); }
}

/* =====================================================================
   v5.59 · MOBILE UX PASS (phones)
   1 · Why: a smaller phone, and only the active card is open: the other two fold to their label and title, so the
       three steps read as one short list that follows the phone screen
   2 · Compare: each topic is a true side-by-side (them | us) instead of two stacked panels, with the detail lines hidden,
       so the whole table is scannable in one screen and a half
   3 · Hilton: the message comes first and the artwork follows it, smaller
   4 · Different: card photos a little shorter so each stacked card fits under the menu bar
   ===================================================================== */
@media (max-width: 899px) {
  .hm-why .hm-phone-wrap { width: min(236px, 62vw); min-width: 0; }
  .hm-why .hm-why__grid { gap: 10px; }
  .hm-why .hm-why__card { padding: 14px 16px; transition: opacity .35s var(--hm-ease), padding .35s var(--hm-ease); }
  .hm-why .hm-why__card:not(.is-lit) { padding-block: 12px; }
  .hm-why .hm-why__card .hm-feat__txt > span { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--hm-ease), opacity .3s; }
  .hm-why .hm-why__card:not(.is-lit) .hm-feat__txt > span { grid-template-rows: 0fr; opacity: 0; overflow: hidden; height: 0; margin: 0; }
  .hm-why .hm-why__card:not(.is-lit) .hm-feat__ic { width: 36px; height: 36px; }
}
@media (max-width: 699px) {
  .hm-hg__grid { display: flex; flex-direction: column; gap: 36px; }
  .hm-hg__txt { order: -1; }
  .hm-hg__art { transform: scale(.82); transform-origin: 50% 0; margin-bottom: -60px; }
  .hm-card__img { max-height: 220px; }
}

/* =====================================================================
   v5.60 · MOBILE: things stack where they were cramped, and each section reads in the order a phone user needs
   ===================================================================== */
@media (max-width: 699px) {
  /* Hilton lockup: the two logos stack, centred, with "part of" between them */
  .hm-hg__lock { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
  .hm-hg__x i { display: none; }
  /* stories: the outlined word behind the deck ran over the photos */
  .hm-rv__marquee { display: none; }
  /* guides: the guides first, "See all guides" after them */
  .hm-gd .hm-wrap { display: flex; flex-direction: column; }
  .hm-gd .hm-head { display: contents; }
  .hm-gd .hm-head > div:first-child { order: 1; margin-bottom: var(--s-head); }
  .hm-gd .hm-blog { order: 2; }
  .hm-gd .hm-head__side { order: 3; margin-top: 20px; }
  .hm-gd .hm-head__side .hm-btn { width: 100%; justify-content: space-between; }
  /* FAQ: the questions straight after the intro; "Chat to us" and the help card follow them */
  .hm-fq__grid { display: flex; flex-direction: column; gap: 0; }
  .hm-fq__intro { display: contents; }
  .hm-fq__intro > :is(.hm-eyebrow, .hm-h2, .hm-lede) { order: 1; }
  .hm-fq__grid > .hm-acc { order: 2; margin-top: var(--s-head); }
  .hm-fq__btns { order: 3; margin-top: 24px; }
  .hm-fq__intro .hm-help { order: 4; max-width: none; margin-top: 12px; }
  .hm-fq__btns .hm-btn { width: 100%; }
  /* the menu bar: the account button is not live yet, so phones keep just call + menu */
  body > .header .icon-btn.acct { display: none; }
}

/* =====================================================================
   v5.61 · phones: the comparison as one list with a "Selling elsewhere | Motormoolah" switch (home-v5.js 5b). Each row shows
   the topic and one answer; flipping the switch turns every row over, the rows light up blue and the ticks pop in turn.
   ===================================================================== */
.hm-cmpsw { display: none; }
@media (max-width: 699px) {
  .hm-cmpsw { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; margin: 0 0 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
  .hm-cmpsw button { position: relative; z-index: 1; height: 46px; border-radius: 999px; font: 600 15px/1 "Poppins", sans-serif; letter-spacing: -.01em;
    color: rgba(255, 255, 255, .72); transition: color .35s var(--hm-ease); }
  .hm-cmpsw button[aria-pressed="true"] { color: #fff; }
  .hm-cmpsw[data-side="us"] button[data-side="us"] { color: var(--hm-ink); }
  .hm-cmpsw__thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: rgba(255, 255, 255, .16);
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), background-color .35s; }
  .hm-cmpsw[data-side="us"] .hm-cmpsw__thumb { transform: translateX(100%); background: var(--hm-yellow); }

  .hm-tbl { gap: 10px; }
  .hm-tbl__row:not(.hm-tbl__row--foot):not(.hm-tbl__row--head) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "topic" "cell"; row-gap: 10px; padding: 16px 16px 18px;
    background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background-color .45s var(--hm-ease) calc(var(--i, 0) * .07s), box-shadow .45s var(--hm-ease); }
  .hm-tbl.is-us .hm-tbl__row:not(.hm-tbl__row--foot):not(.hm-tbl__row--head) { background-color: rgba(58, 89, 224, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
  .hm-tbl__row:not(.hm-tbl__row--foot):not(.hm-tbl__row--head) > span { padding: 0 !important; margin: 0; background: none; box-shadow: none !important; }
  .hm-tbl__row:not(.hm-tbl__row--foot):not(.hm-tbl__row--head) > .hm-tbl__topic { grid-area: topic; display: flex; align-items: center; gap: 10px; font: 600 12.5px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
  .hm-tbl__row:not(.hm-tbl__row--foot):not(.hm-tbl__row--head) > .hm-tbl__topic .hm-tbl__ic { width: 32px; height: 32px; }
  .hm-tbl__row:not(.hm-tbl__row--foot):not(.hm-tbl__row--head) > :is(.hm-tbl__them, .hm-tbl__us) { grid-area: cell; display: flex; align-items: flex-start; gap: 12px;
    transition: opacity .3s ease calc(var(--i, 0) * .07s), transform .45s var(--hm-ease) calc(var(--i, 0) * .07s); }
  .hm-tbl__them > span::before { display: none; }
  .hm-tbl .hm-tbl__row--head { display: none !important; }
  html .hm-tbl.is-us .hm-tbl__row:not(.hm-tbl__row--foot) > .hm-tbl__them, html .hm-tbl.is-them .hm-tbl__row:not(.hm-tbl__row--foot) > .hm-tbl__us { opacity: 0 !important; transform: translateY(10px) !important; pointer-events: none; }
  html .hm-tbl.is-us .hm-tbl__row:not(.hm-tbl__row--foot) > .hm-tbl__us, html .hm-tbl.is-them .hm-tbl__row:not(.hm-tbl__row--foot) > .hm-tbl__them { opacity: 1 !important; transform: none !important; }
  .hm-tbl__row:not(.hm-tbl__row--foot):not(.hm-tbl__row--head) :is(.hm-tbl__them, .hm-tbl__us) small { display: block; margin-top: 3px; }
  html .hm .hm-tbl__row:not(.hm-tbl__row--foot):not(.hm-tbl__row--head) :is(.hm-tbl__them, .hm-tbl__us) b { font: 600 17px/1.3 "Poppins", sans-serif; }
  .hm-tbl__row :is(i.ok, i.no) { flex: none; margin-top: 1px; transition: transform .45s cubic-bezier(.34, 1.6, .5, 1) calc(var(--i, 0) * .09s + .15s); }
  .hm-tbl.is-them .hm-tbl__us i.ok, .hm-tbl.is-us .hm-tbl__them i.no { transform: scale(0); }
  .hm-tbl__row--foot { margin-top: 6px; }
  .hm-tbl__row--foot > .hm-tbl__us, .hm-tbl__row--foot .hm-btn { width: 100%; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) { .hm-tbl__row, .hm-tbl__row > span, .hm-tbl__row i, .hm-cmpsw__thumb { transition: none !important; } }

/* =====================================================================
   v5.62 · phones: the Why section holds the screen like on desktop: the scroll moves the phone through Value it → Book it →
   Get paid, the matching card sits under the phone (one at a time), and once all three have played the page carries on
   ===================================================================== */
@media (max-width: 899px) {
  .hm-pinwhy .hm-why__stage { padding-top: 76px; padding-bottom: 12px; }
  .hm-pinwhy .hm-why .hm-head { margin-bottom: 14px; }
  .hm-pinwhy .hm-why .hm-h2 { font-size: clamp(26px, 7.4vw, 32px); }
  .hm-pinwhy .hm-why .hm-why__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "phone" "card"; gap: 14px; }
  .hm-pinwhy .hm-why .hm-phone-wrap { grid-area: phone; width: clamp(150px, calc((100svh - 410px) * .47), 210px); }
  .hm-pinwhy .hm-why .hm-why__dots { margin-top: 10px; }
  .hm-pinwhy .hm-why .hm-why__card { grid-area: card; align-self: start; padding: 14px 16px; opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity .4s var(--hm-ease), transform .5s var(--hm-ease); }
  .hm-pinwhy .hm-why .hm-why__card.is-lit { opacity: 1; transform: none; pointer-events: auto; }
  .hm-pinwhy .hm-why .hm-why__card .hm-feat__txt > span { display: block; height: auto; opacity: 1; }
}

/* =====================================================================
   v5.63 · the mobile menu: a sheet that drops from the menu bar over a dimmed, blurred page. Numbered rows slide in one after
   another; "Value my car" and "Call us" sit at the bottom with the Trustpilot rating. Tap a row and the sheet folds away.
   ===================================================================== */
html.mm-open, html.mm-open body { overflow: hidden; }
body .mobile-menu { position: fixed; z-index: 119; inset: 0; display: block; padding: calc(84px + env(safe-area-inset-top, 0px)) 12px 12px;
  background: rgba(6, 12, 56, .42); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); opacity: 0; transition: opacity .35s ease; }
body .mobile-menu[hidden] { display: none; }
body .mobile-menu.open { opacity: 1; }
.mm-sheet { padding: 10px 10px 16px; border-radius: 28px; background: linear-gradient(180deg, #16258c 0%, #0d1866 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 60px -20px rgba(3, 8, 40, .7);
  transform: translateY(-14px) scale(.98); transform-origin: 50% 0; transition: transform .5s cubic-bezier(.2, .9, .25, 1.1); }
.mobile-menu.open .mm-sheet { transform: none; }
.mm-links { display: grid; gap: 2px; }
body .mobile-menu a { border-bottom: 0; padding: 0; font-size: inherit; }
body .mobile-menu .mm-links a { display: grid; grid-template-columns: 38px minmax(0, 1fr) 42px; align-items: center; height: 64px; padding: 0 10px 0 14px; border-radius: 18px;
  color: #fff; font: 600 21px/1 "Poppins", sans-serif; letter-spacing: -.02em; transition: background-color .25s; }
body .mobile-menu .mm-links a:active, body .mobile-menu .mm-links a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.mm-n { font: 600 12px/1 "Inter", sans-serif; letter-spacing: .08em; color: rgba(255, 255, 255, .42); }
.mm-links i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #ffd400; background: rgba(255, 255, 255, .07); overflow: hidden; }
.mm-links i svg, .mm-cta i svg { width: 17px; height: 17px; }
.mm-links a:active i svg { animation: mmArrowR .6s both; }
.mm-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
body .mobile-menu .mm-cta { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 8px 0 20px; border-radius: 16px; color: #111c5c;
  background: #ffd400; font: 600 17px/1 "Poppins", sans-serif; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1); }
.mm-cta i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #111c5c; color: #ffd400; }
body .mobile-menu .mm-call { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 18px; border-radius: 16px; color: #fff; font: 600 16px/1 "Poppins", sans-serif;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.mm-call svg { width: 18px; height: 18px; color: #ffd400; }
.mm-tp { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font: 400 13.5px/1.3 "Inter", sans-serif; color: rgba(255, 255, 255, .72); }
.mm-tp b { color: #fff; font-weight: 600; }
.mm-stars { display: inline-flex; gap: 2px; }
.mm-stars i { position: relative; width: 15px; height: 15px; background: #00b67a; }
.mm-stars i.half { background: linear-gradient(90deg, #00b67a 50%, #dcdce6 50%); }
.mm-stars i::after { content: ""; position: absolute; inset: 16%; background: #fff; clip-path: polygon(50% 0, 62% 36%, 100% 36%, 69% 58%, 80% 94%, 50% 72%, 20% 94%, 31% 58%, 0 36%, 38% 36%); }
/* rows, then the buttons, then the rating arrive one after another */
.mm-links a, .mm-foot, .mm-tp { opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, background-color .25s; }
.mobile-menu.open :is(.mm-links a, .mm-foot, .mm-tp) { opacity: 1; transform: none;
  transition: opacity .45s cubic-bezier(.2, .8, .2, 1) calc(var(--n) * .05s + .08s), transform .55s cubic-bezier(.2, .8, .2, 1) calc(var(--n) * .05s + .08s), background-color .25s; }
@media (prefers-reduced-motion: reduce) { .mm-sheet, .mm-links a, .mm-foot, .mm-tp { transition: none !important; transform: none !important; } }

/* v5.64 · phones, Why section: more air between the phone (and its dashes) and the card under it; the headline breaks over
   three lines ("Selling a car / shouldn't feel / like a second job") */
.hm-br-m { display: none; }
@media (max-width: 899px) {
  .hm-br-m { display: inline; }
  .hm-pinwhy .hm-why .hm-why__grid { gap: 30px; }
  .hm-why .hm-why__grid { gap: 26px; }
  .hm-pinwhy .hm-why .hm-why__dots { margin-top: 14px; }
}
/* v5.65 · phones: more room between the Why headline and the phone (the phone gives back the same space, so it all still fits) */
@media (max-width: 899px) {
  .hm-why .hm-head.hm-head, html.hm-pinwhy .hm-why .hm-head.hm-head { margin-bottom: 44px; }
  .hm-pinwhy .hm-why .hm-phone-wrap { width: clamp(150px, calc((100svh - 440px) * .47), 205px); }
}
/* short phones (iPhone SE and similar): the same layout, a little tighter, so the card never touches the bottom edge */
@media (max-width: 899px) and (max-height: 700px) {
  .hm-why .hm-head.hm-head, html.hm-pinwhy .hm-why .hm-head.hm-head { margin-bottom: 26px; }
  .hm-pinwhy .hm-why .hm-why__grid { gap: 18px; }
}