/* Hilton Garage homepage "life and budget": everything below the hero. Classes are prefixed lf- (the hero owns
   .car, .sh, .foot, .sr, .sp, .flip, .tag). Older-buyer rules: body ≥16px, labels ≥13px, tap targets ≥48px. */
.lf{background:#fff;color:var(--ink);font-size:17px;line-height:1.55}
html.big .lf{font-size:20px}
.lf-sec{padding:clamp(56px,7vw,96px) 0}
.lf h2{font-size:clamp(28px,3vw,40px)}
.lf h3{font-size:1.1em;font-weight:600;letter-spacing:-.01em;margin:0}
.lf-h{max-width:720px;margin-bottom:28px}
.lf-h--row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.lf-k{font-size:.82em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.lf-k--y{color:var(--yellow)}
.lf-sub{color:var(--grey);margin-top:10px;max-width:58ch}
.lf-fine{font-size:.8em;color:var(--grey);margin-top:18px}
.lf-link{font-weight:600;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--yellow);padding:8px 0}
.lf-txt{background:none;border:0;padding:12px 4px;font-weight:600;color:var(--navy);text-decoration:underline;cursor:pointer}

/* buttons: big, clear words */
.lf-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;border-radius:12px;border:0;
  font-weight:600;font-size:1em;text-decoration:none;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s}
.lf-btn:active{transform:translateY(2px)}
.lf-btn--y{background:var(--yellow);color:var(--deep);box-shadow:0 4px 0 var(--yellow-2)}
.lf-btn--n{background:var(--navy);color:#fff;box-shadow:0 4px 0 var(--deep)}
.lf-btn--ghost{background:rgba(255,255,255,.08);color:#fff;border:2px solid rgba(255,255,255,.35)}
.lf-btn--sm{min-height:48px;padding:0 18px;font-size:.92em}
.lf-btn--big{min-height:64px;font-size:1.15em}

/* reveal */
.js .lf [data-r]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
.js .lf [data-r].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .lf [data-r]{opacity:1;transform:none;transition:none}}

/* text size switch */
.lf-size{display:flex;justify-content:flex-end;padding-top:16px}
.lf-sizebtn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:#fff;cursor:pointer;font-weight:500;font-size:15px}
.lf-sizebtn span{font-weight:600;color:var(--navy)}.lf-sizebtn span b{font-size:1.35em}
.lf-sizebtn em{font-style:normal}
.lf-sizebtn[aria-pressed=true]{border-color:var(--navy);background:var(--mist)}

/* toggles */
.lf-show{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;font-weight:500}
.lf-seg{display:inline-flex;background:var(--mist);border-radius:12px;padding:4px}
.lf-seg button{min-height:46px;padding:0 18px;border:0;border-radius:9px;background:none;font-weight:600;cursor:pointer;color:var(--grey)}
.lf-seg button[aria-pressed=true]{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(18,26,69,.15)}

/* 1 · shop by life */
.lf-life{padding-top:clamp(28px,4vw,48px)}
.lf-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lf-tile{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer;border-radius:var(--r-lg);overflow:hidden;
  background:#fff;box-shadow:0 1px 3px rgba(18,26,69,.12),0 18px 36px -24px rgba(18,26,69,.45);transition:transform .25s var(--ease),box-shadow .25s}
.lf-tile:hover{transform:translateY(-4px)}
.lf-tile:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.lf-tile__img{display:block;aspect-ratio:16/11;overflow:hidden;background:var(--mist)}
.lf-tile__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.lf-tile:hover .lf-tile__img img{transform:scale(1.04)}
.lf-tile__t{display:flex;flex-direction:column;gap:4px;padding:18px 20px 18px;flex:1}
.lf-tile__t b{font-size:1.12em;font-weight:600;line-height:1.25}
.lf-tile__t small{font-size:.9em;color:var(--grey)}
.lf-tile__f{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:14px;font-size:.9em}
.lf-tile__f strong{color:var(--navy)}
.lf-tile__f i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--yellow);color:var(--deep);font-style:normal;font-weight:600;font-size:22px}
.lf-tile[aria-expanded=true]{box-shadow:0 0 0 3px var(--navy),0 18px 36px -24px rgba(18,26,69,.45)}
.lf-tile[aria-expanded=true] .lf-tile__f i{background:var(--navy);color:#fff}

.lf-match{grid-column:1/-1;list-style:none;margin-top:2px;padding:24px;border-radius:var(--r-lg);background:var(--mist);animation:lfIn .35s var(--ease)}
@keyframes lfIn{from{opacity:0;transform:translateY(-8px)}}
.lf-match__h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.lf-match__h h3 span{color:var(--navy)}
.lf-match__cars{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lf-match__cars a{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--r-md);padding:12px 16px 16px;text-decoration:none}
.lf-match__cars img{aspect-ratio:2/1;object-fit:contain;width:100%}
.lf-match__cars b{display:block;font-weight:600}
.lf-match__cars small{display:block;font-size:.85em;color:var(--grey)}
.lf-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin-top:8px}
.lf-p strong{font-size:1.3em;color:var(--navy)}.lf-p span{font-size:.9em}
.lf-p small{flex-basis:100%;font-size:.85em;color:var(--grey)}

.lf-quick{margin-top:36px}
.lf-quick p{font-weight:600;margin-bottom:12px}
.lf-quick ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.lf-quick a{display:flex;flex-direction:column;justify-content:center;min-height:72px;height:100%;padding:12px 14px;border:2px solid var(--line);border-radius:var(--r-md);text-decoration:none;transition:border-color .2s,background .2s}
.lf-quick a:hover{border-color:var(--navy);background:var(--mist)}
.lf-quick b{font-weight:600;color:var(--navy);line-height:1.25}
.lf-quick span{font-size:.82em;color:var(--grey)}

/* 2 · ready to drive away */
.lf-stock{background:var(--off)}
.lf-cars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lf-car{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 1px 3px rgba(18,26,69,.1)}
.lf-car__img{position:relative;display:block;background:radial-gradient(80% 90% at 50% 70%,#eef1f7,#dde3ee);padding:22px 12px 8px}
.lf-car__img img{aspect-ratio:2/1;object-fit:contain;width:100%}
.lf-badge{position:absolute;top:12px;left:12px;font-size:13px;font-weight:600;padding:5px 10px;border-radius:999px;background:#fff;color:var(--ink)}
.lf-badge::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--grey)}
.lf-badge--great::before{background:var(--tp)}.lf-badge--good::before{background:#7cc242}.lf-badge--fair::before{background:#4b8fe0}
.lf-car__b{display:flex;flex-direction:column;gap:12px;padding:18px;flex:1}
.lf-car h3 a{text-decoration:none}
.lf-specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.lf-specs li{font-size:13px;padding:4px 9px;border-radius:6px;background:var(--mist)}
.lf-prices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lf-prices div{padding:10px 12px;border-radius:10px;border:1.5px solid var(--line)}
.lf-prices div:first-child{border-color:var(--navy);background:#f3f5fc}
.lf-prices span{display:block;font-size:13px;color:var(--grey)}
.lf-prices strong{font-size:1.25em;color:var(--navy)}
.lf-car__act{display:flex;gap:8px;margin-top:auto}
.lf-car__act .lf-btn{flex:1}
.lf-save{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;border-radius:12px;border:2px solid var(--line);background:#fff;font-weight:600;cursor:pointer}
.lf-save svg{width:20px;height:20px;fill:none;stroke:var(--navy);stroke-width:1.8}
.lf-save[aria-pressed=true]{border-color:var(--navy)}.lf-save[aria-pressed=true] svg{fill:#e5484d;stroke:#e5484d}
.lf-reserve{font-size:13px;color:var(--grey);text-align:center}

/* 3 · what could I afford? (navy, like the hero) */
.lf-afford{background:linear-gradient(180deg,var(--deep),var(--night));color:#fff}
.lf-afford .lf-sub{color:rgba(255,255,255,.78)}
.lf-afford__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.lf-q{margin-top:28px}
.lf-q__l{font-weight:600;margin-bottom:12px}
.lf-step{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.lf-step button{width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.lf-step button:hover{background:rgba(255,255,255,.18)}
.lf-step output{min-width:5ch;text-align:center;font-size:clamp(40px,4.4vw,56px);font-weight:600;letter-spacing:-.02em;color:var(--yellow)}
.lf-presets{display:flex;flex-wrap:wrap;gap:8px}
.lf-presets button{min-height:50px;padding:0 18px;border-radius:12px;border:2px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-weight:600;cursor:pointer}
.lf-presets button:hover{border-color:#fff}
.lf-presets button[aria-pressed=true]{background:#fff;color:var(--deep);border-color:#fff}
.lf-afford__a{display:flex;flex-direction:column;gap:14px}
.lf-ans{background:#fff;color:var(--ink);border-radius:var(--r-xl);padding:26px 26px 24px;text-align:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.lf-ans__k{color:var(--grey)}
.lf-ans__big{font-size:clamp(44px,5vw,64px);font-weight:600;letter-spacing:-.03em;color:var(--navy);line-height:1.1}
.lf-ans__n b{color:var(--navy)}
.lf-ans__car{margin:10px 0 16px}
.lf-ans__car img{width:min(100%,380px);margin:0 auto;aspect-ratio:2/1;object-fit:contain}
.lf-ans__car span{display:block;font-size:.85em;color:var(--grey)}
.lf-ans .lf-btn{width:100%}
.lf-check{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:18px 20px;border-radius:var(--r-lg);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.lf-check b{font-size:1.05em}.lf-check p{font-size:.9em;color:rgba(255,255,255,.82)}
.lf-check strong{color:#fff}
.lf-check .lf-btn{flex:none;background:var(--yellow);color:var(--deep);box-shadow:0 4px 0 var(--yellow-2)}
.lf-rep{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0}
.lf-rep div{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.06)}
.lf-rep dt{font-size:13px;color:rgba(255,255,255,.72)}.lf-rep dd{margin:0;font-weight:600}
.lf-fine--d{color:rgba(255,255,255,.7);margin-top:0}

/* 4 · part exchange: photo with a parallax drift, card on top */
.lf-px{position:relative;overflow:hidden;background:var(--night);padding:clamp(64px,8vw,120px) 0}
.lf-px__photo{position:absolute;inset:0}
.lf-px__photo img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;transform:scale(1.12);will-change:transform}
.lf-px__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,52,.6) 0%,rgba(12,18,52,.15) 60%,rgba(12,18,52,0) 100%)}
.lf-px__in{position:relative}
.lf-px__card{max-width:500px;background:#fff;border-radius:var(--r-xl);padding:clamp(24px,3vw,36px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.lf-pxf{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.lf-pxf label{font-weight:600;font-size:.95em;margin-top:6px}
.lf-plate{display:flex;align-items:stretch;height:64px;border-radius:10px;overflow:hidden;border:2px solid var(--ink);background:var(--yellow)}
.lf-gb{display:grid;place-items:center;width:46px;background:#1f47a8;color:#fff;font-weight:600;font-size:15px}
.lf-plate input{flex:1;min-width:0;border:0;background:transparent;font-family:"Charles Wright",var(--font);font-weight:700;font-size:30px;letter-spacing:.06em;text-transform:uppercase;padding:0 14px;color:#111}
.lf-plate input::placeholder{color:rgba(0,0,0,.4)}
.lf-plate input:focus{outline:none}.lf-plate:focus-within{box-shadow:0 0 0 3px var(--navy)}
.lf-in{min-height:54px;border:2px solid var(--line);border-radius:10px;padding:0 14px;font-size:1em}
.lf-pxf .lf-btn{margin-top:12px}
.lf-err{color:var(--err);font-weight:500;min-height:1.2em}
.lf-pxres{margin-top:22px;padding:20px;border-radius:var(--r-lg);background:var(--mist);text-align:center}
.lf-pxres__v{font-size:clamp(40px,4.6vw,56px);font-weight:600;color:var(--navy);line-height:1.1;margin-bottom:14px}
.lf-pxres .lf-btn{width:100%}
.lf-ticks{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.92em}
.lf-ticks li::before{content:"✓";color:var(--tp);font-weight:700;margin-right:10px}

/* 5 · trust */
.lf-trust{padding-top:0}
.lf-trust__band{position:relative;height:clamp(300px,38vw,500px);overflow:hidden;background:var(--deep)}
.lf-trust__band img{width:100%;height:100%;object-fit:cover;object-position:center 60%;transform:scale(1.12);will-change:transform}
.lf-trust__band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,18,52,.55) 0%,rgba(12,18,52,0) 45%)}
.lf-trust__over{position:absolute;inset:0;z-index:1;padding-top:clamp(28px,4vw,56px);color:#fff}
.lf-trust__over h2{max-width:16ch;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.lf-usps{position:relative;z-index:2;list-style:none;margin:-48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lf-usps a{display:flex;align-items:center;gap:14px;height:100%;min-height:92px;padding:16px 18px;background:#fff;border-radius:var(--r-lg);text-decoration:none;
  box-shadow:0 20px 40px -24px rgba(18,26,69,.5),0 1px 3px rgba(18,26,69,.1);transition:transform .2s var(--ease)}
.lf-usps a:hover{transform:translateY(-3px)}
.lf-usps b{display:block;font-weight:600;line-height:1.25}.lf-usps small{display:block;font-size:.82em;color:var(--grey)}
.lf-usps i{margin-left:auto;font-style:normal;color:var(--navy);font-weight:600}
.lf-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--mist)}
.lf-ic svg{width:26px;height:26px;fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lf-revs{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lf-rev{margin:0;display:grid;grid-template-columns:110px 1fr;gap:16px;height:100%;padding:16px;border-radius:var(--r-lg);border:1.5px solid var(--line)}
.lf-rev img{width:110px;height:140px;object-fit:cover;border-radius:10px}
.lf-stars{color:var(--tp);letter-spacing:2px}
.lf-rev blockquote{margin:6px 0 10px;font-size:.95em}
.lf-rev b{display:block;font-weight:600;font-size:.9em}.lf-rev small{display:block;font-size:.82em;color:var(--grey)}

/* 6 · prefer to talk */
.lf-talk{background:var(--navy);color:#fff}
.lf-talk .lf-sub{color:rgba(255,255,255,.82)}
.lf-talk__in{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.lf-hours{margin-top:14px;font-weight:500}
.lf-talk__btns{display:flex;flex-direction:column;gap:12px}

/* tablets */
@media (max-width:1080px){
  .lf-quick ul{grid-template-columns:repeat(3,1fr)}
  .lf-cars{grid-template-columns:repeat(2,1fr)}
  .lf-usps{grid-template-columns:repeat(2,1fr)}
  .lf-revs{grid-template-columns:1fr}
  .lf-rep{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .lf-tiles{grid-template-columns:repeat(2,1fr)}
  .lf-match__cars{grid-template-columns:1fr}
  .lf-match__cars a{flex-direction:row;align-items:center;gap:14px}
  .lf-match__cars img{width:42%;flex:none}
  .lf-afford__in,.lf-talk__in{grid-template-columns:1fr}
}
/* phones: one column, nothing sideways */
@media (max-width:600px){
  .lf{font-size:17px}
  .lf-size{justify-content:stretch}.lf-sizebtn{width:100%;justify-content:center}
  .lf-tiles{grid-template-columns:1fr;gap:14px}
  .lf-tile{flex-direction:row}
  .lf-tile__img{width:38%;flex:none;aspect-ratio:auto}
  .lf-tile__t{padding:14px}
  .lf-tile__t small{display:none}
  .lf-tile__f{flex-direction:column;align-items:flex-start}
  .lf-tile__f i{position:absolute;right:12px;top:12px;width:36px;height:36px}
  .lf-tile{position:relative}
  .lf-tile__t b{padding-right:40px}
  .lf-quick ul{grid-template-columns:1fr 1fr}
  .lf-cars{grid-template-columns:1fr}
  .lf-match{padding:16px}
  .lf-match__cars img{width:38%}
  .lf-usps{grid-template-columns:1fr;margin-top:-36px}
  .lf-rev{grid-template-columns:84px 1fr}.lf-rev img{width:84px;height:110px}
  .lf-check{flex-direction:column;align-items:stretch}
  .lf-step{justify-content:center}
  .lf-px__photo{position:relative;height:220px;margin:calc(-1 * clamp(64px,8vw,120px)) 0 -40px}
  .lf-px__photo::after{background:linear-gradient(0deg,var(--night) 0%,rgba(12,18,52,0) 60%)}
  .lf-trust__band{height:300px}
}

/* 0 · Shop by type (after butter.video): sentence with small car tiles → each detaches, grows, tumbles and falls a
   full screen down onto a navy shelf of big tiles. Flyers live in a fixed layer only while in the air. */
.lf-types{position:relative;background:#fff;padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,96px)}
.lf-types__top{text-align:center}
.lf-sent{max-width:1120px;margin:6px auto 0;font-size:clamp(26px,3.3vw,48px);font-weight:500;line-height:1.36;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.lf-slot{display:inline-block;width:1.4em;height:1.4em;vertical-align:-.3em;margin:0 .08em}
/* the tile: a glossy rounded square with the car on it, like an app icon */
.lf-tv{position:relative;display:block;width:100%;height:100%;border-radius:24%;overflow:hidden;
  background:linear-gradient(160deg,#fff 0%,var(--tv,#d9ecfd) 70%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.85),inset 0 -6px 14px rgba(18,26,69,.16),0 10px 22px -10px rgba(18,26,69,.55)}
.lf-tv img{position:absolute;left:3%;top:50%;width:94%;max-width:none;transform:translateY(-46%)}
.lf-tv--photo img{left:0;top:0;width:100%;height:100%;object-fit:cover;transform:none}
[data-slot=hatch],[data-dock=hatch],[data-fly=hatch]{--tv:#ffd84d}
[data-slot=suv],[data-dock=suv],[data-fly=suv]{--tv:#9ec9f5}
[data-slot=estate],[data-dock=estate],[data-fly=estate]{--tv:#b9c3ec}
[data-slot=saloon],[data-dock=saloon],[data-fly=saloon]{--tv:#e6e9ef}
[data-slot=city],[data-dock=city],[data-fly=city]{--tv:#ffe9a8}
[data-slot=sporty],[data-dock=sporty],[data-fly=sporty]{--tv:#c9e7d4}

/* the shelf: a navy panel like Butter's dark editor, with a thin "timeline" strip on top */
.lf-shelf-w{margin-top:clamp(36px,5vw,56px)}
.lf-shelf{list-style:none;margin:0;padding:54px 22px 26px;position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;border-radius:var(--r-xl);
  background:linear-gradient(180deg,#1e2a6b,var(--night));box-shadow:0 40px 80px -40px rgba(18,26,69,.85)}
.lf-shelf::before{content:"1,084 cars in stock today";position:absolute;left:22px;right:22px;top:16px;height:22px;padding-left:12px;border-radius:8px;
  font-size:13px;font-weight:500;letter-spacing:.02em;line-height:22px;color:rgba(255,255,255,.7);
  background:none;padding-left:0}
.lf-dc{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;padding:8px 4px 10px;border-radius:var(--r-lg);color:#fff;text-decoration:none;text-align:center;transition:background .2s}
.lf-dc:hover{background:rgba(255,255,255,.07)}
.lf-dc:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.lf-dc__slot{display:block;width:100%;max-width:190px;aspect-ratio:1;margin-bottom:12px;border-radius:24%}
.lf-dc b{font-weight:600;font-size:1.05em}
.lf-dc small{font-size:.82em;color:rgba(255,255,255,.8);line-height:1.35}
.lf-dc b,.lf-dc small{transition:opacity .4s var(--ease),transform .4s var(--ease)}

/* motion mode (desktop): a long gap so the tiles fall a full screen; flyers in a fixed layer above the page */
.lf-flyers{display:none}
.lf-types--move .lf-types__top{min-height:62vh;display:flex;flex-direction:column;justify-content:center}
.lf-types--move .lf-shelf-w{margin-top:28vh}
/* layers, back to front: the page (sentence, shelf) → the flying tiles (bigger = nearer = in front) → the nav,
   sticky bar and toasts (z 30+), which always stay on top */
.lf-types--move .lf-flyers{display:block;position:fixed;inset:0;pointer-events:none;z-index:20}
.lf-types--move .lf-fly{position:absolute;left:0;top:0;visibility:hidden;will-change:transform,width,height}
.lf-types--move .lf-fly .lf-tv{box-shadow:inset 0 2px 1px rgba(255,255,255,.85),inset 0 -8px 18px rgba(18,26,69,.18),0 var(--lift,24px) calc(var(--lift,24px) * 1.6) -16px rgba(18,26,69,var(--sh,.4))}
.lf-types--move .lf-slot.gone .lf-tv{visibility:hidden}
.lf-types--move .lf-dc__slot{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.lf-types--move .lf-dc__slot:not(.here) .lf-tv{visibility:hidden}
.lf-types--move .lf-dc:not(.landed) b,.lf-types--move .lf-dc:not(.landed) small{opacity:0;transform:translateY(8px)}

/* tablets and phones: no flying; the shelf becomes a grid */
@media (max-width:899px){
  .lf-shelf{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .lf-sent{font-size:26px;line-height:1.4}
  .lf-shelf{grid-template-columns:1fr 1fr;padding:46px 12px 14px;gap:8px}
  .lf-shelf::before{left:12px;right:12px;top:12px}
  .lf-dc__slot{max-width:140px}
}

/* 0b · Hot deals: real photos, one clear reading order per card (photo + saving → name → monthly price → buy price →
   key facts → one button). Larger type than elsewhere: these are the cards people compare. */
.lf-deals{padding-top:clamp(24px,3vw,40px)}
.lf-dfil{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.lf-dfil button{min-height:48px;padding:0 18px;border-radius:999px;border:2px solid var(--line);background:#fff;font-weight:600;font-size:15px;cursor:pointer;color:var(--ink)}
.lf-dfil button span{font-weight:500;color:var(--grey)}
.lf-dfil button:hover{border-color:var(--navy)}
.lf-dfil button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.lf-dfil button[aria-pressed=true] span{color:rgba(255,255,255,.75)}
.lf-deal-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lf-deal-grid>li{animation:lfIn .4s var(--ease) both;animation-delay:var(--d,0s)}
.lf-deal{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 3px rgba(18,26,69,.12),0 24px 44px -30px rgba(18,26,69,.5);transition:transform .25s var(--ease),box-shadow .25s}
.lf-deal:hover{transform:translateY(-3px);box-shadow:0 1px 3px rgba(18,26,69,.12),0 30px 54px -30px rgba(18,26,69,.6)}

/* photo: price check top-left, Save top-right, the saving as a big yellow ribbon bottom-left, angle gallery */
.lf-deal__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.lf-gal{display:block;position:relative;height:100%}
.lf-gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;opacity:0;transition:opacity .35s ease,transform .6s var(--ease)}
.lf-gal img.on{opacity:1}
.lf-deal:hover .lf-gal img.on{transform:scale(1.03)}
.lf-gal__nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer;transition:transform .2s var(--ease),opacity .2s}
.lf-gal__nav svg{width:22px;height:22px;fill:none;stroke:var(--deep);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lf-gal__nav:hover{transform:scale(1.08)}
.lf-gal__nav--prev{left:10px}.lf-gal__nav--next{right:10px}
@media (hover:hover) and (pointer:fine){.lf-gal__nav{opacity:0}.lf-deal__img:hover .lf-gal__nav,.lf-gal__nav:focus-visible{opacity:1}}
.lf-gal__dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;display:flex;justify-content:center;gap:6px;pointer-events:none}
.lf-gal__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:width .25s var(--ease),background .25s}
.lf-gal__dots i.on{width:18px;border-radius:4px;background:#fff}
.lf-gal__count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* AutoTrader price check: "Great price" is solid green with a pulsing dot and a light shine every few seconds */
.lf-deal__check{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.96);color:#14532d;font-size:13.5px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.lf-deal__check svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lf-deal__check--great{background:#15803d;color:#fff;font-size:14px;font-weight:700}
.lf-deal__save{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 10px;border:0;border-radius:999px;
  background:rgba(255,255,255,.95);color:var(--ink);font-weight:600;font-size:13.5px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.lf-deal__save svg{width:19px;height:19px;fill:none;stroke:var(--navy);stroke-width:1.8}
.lf-deal__save[aria-pressed=true] svg{fill:#e5484d;stroke:#e5484d}
.lf-deal__save-tag{position:absolute;left:0;bottom:30px;z-index:2;padding:7px 14px 7px 11px;border-radius:0 999px 999px 0;background:var(--yellow);color:var(--deep);
  font-weight:700;font-size:15px;letter-spacing:-.01em;box-shadow:0 6px 16px rgba(0,0,0,.22)}

/* body */
.lf-deal__b{display:flex;flex-direction:column;padding:14px 16px 14px;flex:1}
.lf-deal h3{font-size:1.05em;line-height:1.25}
.lf-deal h3 a{text-decoration:none}
.lf-deal h3 a:hover{text-decoration:underline}
.lf-deal__ver{font-size:14px;color:var(--grey);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-deal__price{margin:12px 0 10px;padding:10px 12px;border-radius:var(--r-md);background:#f3f5fc}
.lf-deal__pm{display:flex;align-items:baseline;gap:8px;line-height:1}
.lf-deal__pm strong{font-size:clamp(26px,2.1vw,30px);font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.lf-deal__pm span{font-size:15px;font-weight:500;color:var(--ink)}
.lf-deal__full{margin-top:6px;font-size:14.5px;color:var(--ink)}
.lf-deal__full b{font-weight:700}
.lf-deal__full s{margin-left:4px;color:var(--grey);font-size:13.5px}
.lf-deal__facts{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px;color:var(--ink)}
.lf-deal__facts li{display:inline-flex;align-items:center;gap:7px}
.lf-deal__facts svg,.lf-deal__res svg{width:18px;height:18px;fill:none;stroke:var(--navy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lf-deal__cta{width:100%;margin-top:auto}
.lf-deal__res{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:13.5px;color:var(--ink)}
.lf-deal__res svg{stroke:var(--tp);stroke-width:2.4;width:18px;height:18px}
@media (max-width:1180px){.lf-deal-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.lf-deal-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.lf-deal-grid{grid-template-columns:1fr}.lf-dfil{gap:6px}.lf-dfil button{padding:0 14px}}

/* modern card layer (29 Oct): inset rounded photo, hairline border, open price row, pill button */
.lf-deal{border-radius:22px;padding:8px;background:#fff;border:1px solid #e6e9f0;box-shadow:0 1px 2px rgba(18,26,69,.06),0 14px 30px -24px rgba(18,26,69,.35)}
.lf-deal:hover{transform:translateY(-3px);border-color:#d5dae6;box-shadow:0 1px 2px rgba(18,26,69,.06),0 22px 40px -24px rgba(18,26,69,.45)}
.lf-deal__img{border-radius:16px}
.lf-deal__save-tag{left:10px;bottom:28px;padding:6px 12px;border-radius:999px;font-size:14px}
.lf-deal__b{padding:14px 8px 8px}
.lf-deal__price{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin:12px 0 10px;padding:0 0 12px;background:none;border-radius:0;border-bottom:1px solid #eceef3}
.lf-deal__pm{flex-direction:column;align-items:flex-start;gap:2px}
.lf-deal__pm span{font-size:14px;color:var(--grey)}
.lf-deal__full{display:flex;flex-direction:column;align-items:flex-end;margin:0;text-align:right;line-height:1.25}
.lf-deal__full b{font-size:16px}
.lf-deal__full span{font-size:13px;color:var(--grey)}
.lf-deal__full s{margin:0;font-size:13px}
.lf-deal__facts{color:#3b4157}
.lf-deal__cta{min-height:48px;border-radius:999px;box-shadow:none;font-size:15px}
.lf-deal__cta:hover{background:var(--deep)}
.lf-deal__res{margin-top:10px}

/* Nav after scrolling: solid Hilton deep navy. The shared see-through navy (hg.css .nav.glass) mixed with the white
   sections below into a washed-out lavender. Overridden here only, so the approved hero files stay untouched. */
.nav.glass{background:var(--deep);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 28px -16px rgba(18,26,69,.55)}

/* 0c · Cars by monthly budget: big amount tabs, four cars per band, a summary bar with the next step */
.lf-bud2{background:var(--off)}
.lf-btabs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:22px}
.lf-btabs [role=tab]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:84px;padding:10px;border-radius:var(--r-lg);
  border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.lf-btabs [role=tab] small{font-size:14px;color:var(--grey);font-weight:500}
.lf-btabs [role=tab] b{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--navy)}
.lf-btabs [role=tab]:hover{border-color:var(--navy)}
.lf-btabs [role=tab][aria-selected=true]{background:var(--navy);border-color:var(--navy);box-shadow:0 14px 26px -16px rgba(18,26,69,.7);transform:translateY(-2px)}
.lf-btabs [role=tab][aria-selected=true] small{color:rgba(255,255,255,.8)}
.lf-btabs [role=tab][aria-selected=true] b{color:var(--yellow)}
.lf-bpanel:focus-visible{outline:3px solid var(--navy);outline-offset:6px;border-radius:var(--r-lg)}
.lf-bgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lf-bgrid>li{animation:lfIn .35s var(--ease) both;animation-delay:var(--d,0s)}
.lf-bcard{height:100%;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 1px 3px rgba(18,26,69,.1),0 18px 34px -26px rgba(18,26,69,.45)}
.lf-bcard__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.lf-bcard__img img{width:100%;height:100%;object-fit:cover;object-position:center 62%;transition:transform .6s var(--ease)}
.lf-bcard:hover .lf-bcard__img img{transform:scale(1.04)}
.lf-bcard__b{padding:14px 16px 16px}
.lf-bcard h3{font-size:1.05em;line-height:1.25}
.lf-bcard h3 a{text-decoration:none}
.lf-bcard h3 a:hover{text-decoration:underline}
.lf-bcard__ver{font-size:14.5px;color:var(--grey)}
.lf-bcard__pm{margin-top:10px;font-size:16px}
.lf-bcard__pm strong{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.lf-bcard__full{font-size:15px}
.lf-bcard__facts{margin-top:8px;font-size:14.5px;color:var(--grey)}
.lf-bsum{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:20px;padding:18px 22px;border-radius:var(--r-lg);background:var(--navy);color:#fff}
.lf-bsum p{font-size:17px}
.lf-bsum b{color:var(--yellow)}
@media (max-width:1080px){.lf-bgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  .lf-btabs{grid-template-columns:repeat(3,1fr)}
  .lf-btabs [role=tab]{min-height:72px}.lf-btabs [role=tab] b{font-size:22px}
  .lf-bsum{flex-direction:column;align-items:stretch;text-align:center}
}
@media (max-width:480px){
  .lf-bgrid{grid-template-columns:1fr;gap:12px}
  .lf-bcard{flex-direction:row}
  .lf-bcard__img{width:40%;flex:none;aspect-ratio:auto}
  .lf-bcard__b{padding:12px 14px}
  .lf-bcard__pm strong{font-size:24px}
}

/* price check moved off the photo (29 Oct): a quiet line under the prices, so "Save £x" is the only badge on the photo */
.lf-deal__pc{display:flex;align-items:center;gap:5px;margin:-2px 0 10px;white-space:nowrap;font-size:13.5px;font-weight:600;color:#3f6212}
.lf-deal__pc svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lf-deal__pc span{margin-left:4px;font-weight:400;color:var(--grey);font-size:12.5px}
.lf-deal__pc--great{color:#15803d}

/* shop by type shelf: "from £143/month" on one line, the stock count under it */
.lf-dc__pm{display:block;white-space:nowrap;font-size:.82em;color:rgba(255,255,255,.8);line-height:1.35}
.lf-dc b,.lf-dc small,.lf-dc__pm{transition:opacity .4s var(--ease),transform .4s var(--ease)}
.lf-types--move .lf-dc:not(.landed) .lf-dc__pm{opacity:0;transform:translateY(8px)}

/* hot deals: a See all button under the grid that follows the filter ("See all 395 hatchbacks") */
.lf-deals__more{display:flex;justify-content:center;margin-top:26px}
.lf-deals__more .lf-btn{min-width:280px;border-radius:999px}

/* nav heart beats when a car is saved (same lub-dub + ripple as its hover in the hero) */
.nav .heart.beat .lv{transform:translate(0,3px)}
.nav .heart.beat .ol{stroke:var(--yellow)}
.nav .heart.beat .liq{animation:wave 1.1s linear infinite}
.nav .heart.beat .hrt{animation:lubdub 1.1s .3s ease-in-out 2}
.nav .heart.beat::after{animation:ripple 1.1s .3s ease-out 2}
@media (prefers-reduced-motion:reduce){.nav .heart.beat .hrt,.nav .heart.beat::after,.nav .heart.beat .liq{animation:none}}

/* heart-only save buttons (29 Oct) */
.lf-deal__save{width:42px;height:42px;min-height:0;padding:0;justify-content:center;border-radius:50%}
.lf-deal__save svg{width:21px;height:21px}
.lf-save{width:48px;padding:0;justify-content:center;flex:none}

/* slimmer, lighter filter tags (29 Oct) */
.lf-dfil{gap:8px}
.lf-dfil button{min-height:42px;padding:0 16px;border:0;background:#f1f3f8;font-size:14.5px;font-weight:600;color:var(--ink);transition:background .2s,color .2s}
.lf-dfil button span{font-weight:400;color:#6b7186;margin-left:2px}
.lf-dfil button:hover{background:#e6e9f2}
.lf-dfil button[aria-pressed=true]{background:var(--navy);color:#fff}
.lf-dfil button[aria-pressed=true] span{color:rgba(255,255,255,.72)}

/* "See all" as a modern pill with an arrow in a circle, not an underlined link (29 Oct) */
.lf-link{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 6px 0 20px;border:0;border-radius:999px;background:#f1f3f8;color:var(--navy);
  font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:background .2s}
.lf-link span[aria-hidden]{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-size:16px;transition:transform .25s var(--ease)}
.lf-link:hover{background:#e6e9f2}
.lf-link:hover span[aria-hidden]{transform:translateX(3px)}
.lf-h--row .lf-sub{max-width:52ch}

/* See all pill: label is one text run, so the flex gap only sits before the arrow (29 Oct) */
.lf-link__t{white-space:nowrap}
/* filter tags: no yellow focus ring on click; a thin navy ring only for keyboard users */
.lf-dfil button:focus{outline:none}
.lf-dfil button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* 3 · finance, refined (29 Oct): one control panel on the left, one answer card with a real photo on the right */
.lf-afford__in{grid-template-columns:1fr 1.05fr;align-items:center}
.lf-afford .lf-sub{max-width:44ch}
.lf-panel{margin-top:28px;border-radius:var(--r-xl);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:6px 22px}
.lf-row{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px 16px;padding:18px 0}
.lf-row+.lf-row{border-top:1px solid rgba(255,255,255,.1)}
.lf-row__l{font-weight:600;font-size:15.5px;color:rgba(255,255,255,.85)}
.lf-row .lf-step{margin:0;gap:10px;justify-self:start;background:rgba(255,255,255,.08);border-radius:999px;padding:5px}
.lf-row .lf-step button{width:44px;height:44px;border:0;background:rgba(255,255,255,.12);font-size:24px}
.lf-row .lf-step output{min-width:4.2ch;font-size:32px;line-height:1}
.lf-chips{grid-column:2;display:flex;flex-wrap:wrap;gap:6px}
.lf-chips button{min-height:38px;padding:0 14px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-weight:500;font-size:14.5px;cursor:pointer}
.lf-chips button:hover{background:rgba(255,255,255,.16)}
.lf-chips button[aria-pressed=true]{background:#fff;color:var(--deep);font-weight:600}
.lf-seg2{display:inline-flex;flex-wrap:wrap;justify-self:start;padding:4px;border-radius:999px;background:rgba(255,255,255,.08)}
.lf-seg2 button{min-height:42px;padding:0 16px;border:0;border-radius:999px;background:none;color:rgba(255,255,255,.85);font-weight:600;font-size:15px;cursor:pointer;transition:background .2s,color .2s}
.lf-seg2 button:hover{color:#fff}
.lf-seg2 button[aria-pressed=true]{background:#fff;color:var(--deep)}
.lf-afford button:focus{outline:none}
.lf-afford button:focus-visible{outline:2px solid #fff;outline-offset:2px}

.lf-ans{padding:0;overflow:hidden;text-align:left;border-radius:var(--r-xl)}
.lf-ans__photo{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--mist)}
.lf-ans__photo img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.lf-ans__eg{position:absolute;left:12px;bottom:12px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.94);font-size:13px;font-weight:500;color:var(--ink)}
.lf-ans__body{padding:20px 24px 22px}
.lf-ans__k{font-size:15px;color:var(--grey)}
.lf-ans__big{font-size:clamp(40px,4vw,52px);line-height:1.05;margin:2px 0 8px}
.lf-ans__n{display:inline-block;padding:5px 12px;border-radius:999px;background:#eef1f8;font-size:14px;color:var(--ink)}
.lf-ans .lf-rep{grid-template-columns:1fr 1fr;gap:0 24px;margin:16px 0 18px;padding-top:12px;border-top:1px solid #eceef3}
.lf-ans .lf-rep div{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;background:none;border-radius:0}
.lf-ans .lf-rep dt{font-size:14px;color:var(--grey)}
.lf-ans .lf-rep dd{font-size:15px;color:var(--ink)}
.lf-ans__cta{width:100%;border-radius:999px;box-shadow:none}
.lf-check{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-lg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.lf-check__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,205,39,.15)}
.lf-check__ic svg{width:22px;height:22px;fill:none;stroke:var(--yellow);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lf-check p{font-size:14.5px;color:rgba(255,255,255,.85)}.lf-check p b{color:#fff}
.lf-check__btn{white-space:nowrap;min-height:42px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);color:#fff;font-weight:600;font-size:14.5px;text-decoration:none}
.lf-check__btn:hover{background:rgba(255,255,255,.1)}
@media (max-width:900px){.lf-afford__in{grid-template-columns:1fr}}
@media (max-width:600px){
  .lf-panel{padding:4px 14px}
  .lf-row{grid-template-columns:1fr}.lf-chips{grid-column:1}
  .lf-ans .lf-rep{grid-template-columns:1fr}
  .lf-check{grid-template-columns:auto 1fr}.lf-check__btn{grid-column:1/-1;justify-content:center}
}

/* slimmer "Save £x" tag (29 Oct) */
.lf-deal__save-tag{left:10px;bottom:26px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:0;box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* hero-style live options (29 Oct): the budget shows a car AND the other models it covers */
.lf-opts{margin-top:14px}
.lf-opts__h{font-size:13.5px;font-weight:600;color:var(--grey);margin-bottom:8px}
.lf-opts__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.lf-opts button{display:flex;align-items:center;gap:8px;min-height:56px;padding:6px 8px 6px 6px;border:1px solid #e3e6ee;border-radius:12px;background:#fff;text-align:left;cursor:pointer;transition:border-color .2s,transform .2s var(--ease)}
.lf-opts button:hover{border-color:var(--navy);transform:translateY(-1px)}
.lf-opts img{width:46px;height:46px;flex:none;border-radius:8px;object-fit:cover}
.lf-opts b{display:block;font-size:13px;line-height:1.2;color:var(--ink)}
.lf-opts small{display:block;font-size:12.5px;color:var(--grey)}
.lf-opts__next{width:100%;margin-top:8px;border-style:dashed !important}
.lf-opts__next i{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-style:normal;font-weight:600}
.lf-pxbuy{margin:6px 0 14px;text-align:left}
.lf-pxbuy__k{font-size:15px;color:var(--ink)}
.lf-pxbuy__car{display:flex;align-items:center;gap:12px;margin-top:10px;padding:8px;border-radius:14px;background:#fff}
.lf-pxbuy__car img{width:88px;height:66px;border-radius:10px;object-fit:cover}
.lf-pxbuy__car small{display:block;font-size:12.5px;color:var(--grey)}
.lf-pxbuy__car b{display:block;font-size:16px}
.lf-pxbuy__car em{font-style:normal;font-size:14px;color:var(--navy);font-weight:600}
.lf-pxbuy__also{margin-top:8px;font-size:13.5px;color:var(--grey)}
@media (max-width:600px){.lf-opts__row{grid-template-columns:1fr}}

/* 3 · finance v3 (29 Oct): headline that matches the control, big monthly stepper (as before), deposit + term rows,
   then on the right the result and a small pile of car cards you drag through (like the Motormoolah stories) */
.lf-afford__in{grid-template-columns:1fr 1fr;align-items:start;gap:clamp(32px,6vw,90px)}
.lf-afford h2{font-size:clamp(30px,3.2vw,44px);max-width:16ch}
.lf-y{color:var(--yellow)}
.lf-afford .lf-q{margin-top:30px}
.lf-afford .lf-step{gap:16px;margin-bottom:14px;background:none;padding:0}
.lf-afford .lf-step button{width:60px;height:60px;border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);font-size:30px}
.lf-afford .lf-step output{font-size:clamp(44px,4.6vw,58px);min-width:4.6ch}
.lf-afford .lf-presets{gap:8px}
.lf-afford .lf-presets button{min-height:48px;padding:0 18px;border-radius:999px;border:0;background:rgba(255,255,255,.1);font-size:15.5px}
.lf-afford .lf-presets button[aria-pressed=true]{background:#fff;color:var(--deep)}
.lf-q2{margin-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.lf-q2 .lf-row{grid-template-columns:96px 1fr;padding:14px 0;border-top:0}
.lf-q2 .lf-row+.lf-row{border-top:1px solid rgba(255,255,255,.1)}
.lf-afford .lf-check{margin-top:18px}

.lf-sum{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:18px}
.lf-sum p:first-child{width:100%;font-size:15px;color:rgba(255,255,255,.75)}
.lf-sum__big{font-size:clamp(40px,4.2vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff}
.lf-sum__n{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);font-size:14px;color:rgba(255,255,255,.9)}
.lf-sum__n b{color:var(--yellow)}

.lf-cdeck{position:relative;width:min(330px,80vw);aspect-ratio:330/420;margin:4px 0 0 4px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.lf-cdeck__cards{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.lf-cc{--k:0;position:absolute;inset:0;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#fff;color:var(--ink);cursor:grab;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transform-origin:50% 100%;will-change:transform}
.lf-cc::after{content:"";position:absolute;inset:0;background:#0b1550;opacity:calc(var(--k) * .12);pointer-events:none;transition:opacity .4s}
.lf-cc.far{opacity:0}
.lf-cc.drag{cursor:grabbing}
.lf-cc img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 60%;pointer-events:none;flex:none}
.lf-cc__b{display:flex;flex-direction:column;gap:3px;padding:14px 18px 16px;flex:1}
.lf-cc__b small{font-size:12.5px;font-weight:600;color:var(--grey);text-transform:uppercase;letter-spacing:.05em}
.lf-cc h3{font-size:1.15em}
.lf-cc__pm{font-size:15px}.lf-cc__pm b{font-size:22px;color:var(--navy)}
.lf-cc__n{font-size:14px;color:var(--grey)}
.lf-cc__cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:999px;background:var(--navy);color:#fff;font-weight:600;font-size:14.5px;text-decoration:none;cursor:pointer}
.lf-cc--next .lf-cc__cta{background:var(--yellow);color:var(--deep)}
.lf-cdeck:focus-visible .lf-cc[aria-hidden=false]{box-shadow:0 0 0 3px #fff,0 30px 60px -30px rgba(0,0,0,.6)}
.lf-cdeck__ctrl{display:flex;align-items:center;gap:12px;margin:18px 0 22px}
.lf-cdeck__ctrl.single .lf-round,.lf-cdeck__ctrl.single .lf-cdeck__hint{visibility:hidden}
.lf-round{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:none;cursor:pointer}
.lf-round svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lf-round:hover{background:rgba(255,255,255,.1)}
.lf-cdeck__count{font-size:14px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}.lf-cdeck__count b{font-size:18px;color:#fff}
.lf-cdeck__hint{font-size:13px;color:rgba(255,255,255,.55)}
.lf-afford .lf-rep{grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:900px){.lf-afford__in{grid-template-columns:1fr}.lf-cdeck{margin:4px auto 0}.lf-cdeck__ctrl{justify-content:center}.lf-cdeck__hint{display:none}}
@media (max-width:600px){.lf-q2 .lf-row{grid-template-columns:1fr}}
.lf-afford{overflow:hidden}
@media (max-width:600px){.lf-cdeck{width:min(300px,74vw);aspect-ratio:300/420;margin-left:0}.lf-cc img{aspect-ratio:16/11}.lf-cc__b{padding:12px 14px 14px}}

/* finance v3.1: bigger cards; rep example as one slim row under the Free Finance Check so both columns end together */
.lf-cdeck{width:min(400px,84vw);aspect-ratio:400/520}
.lf-cc__b{padding:16px 20px 18px;gap:4px}
.lf-cc h3{font-size:1.3em}
.lf-cc__pm b{font-size:26px}
.lf-cc__cta{min-height:48px;font-size:15px}
.lf-afford .lf-rep--row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:18px 0 8px;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.12)}
.lf-afford .lf-rep--row div{padding:0 12px;background:none;border-radius:0}
.lf-afford .lf-rep--row div:first-child{padding-left:0}
.lf-afford .lf-rep--row div+div{border-left:1px solid rgba(255,255,255,.12)}
.lf-afford .lf-rep--row dt{font-size:13px}.lf-afford .lf-rep--row dd{font-size:17px}
.lf-afford__a{display:flex;flex-direction:column;align-items:flex-start}
@media (max-width:900px){.lf-afford__a{align-items:center}}
@media (max-width:600px){.lf-cdeck{width:min(320px,80vw);aspect-ratio:320/450}.lf-afford .lf-rep--row{grid-template-columns:1fr 1fr;row-gap:12px}.lf-afford .lf-rep--row div:nth-child(3){border-left:0;padding-left:0}}
@media (min-width:901px){.lf-cdeck{width:min(430px,84vw);aspect-ratio:430/585}}
@media (min-width:901px){.lf-cc img{aspect-ratio:5/4}}

.lf-cc__ver{font-size:13.5px;color:var(--grey);margin-bottom:4px}
.lf-cc__pm span{display:block;font-size:14px;color:var(--ink)}
.lf-afford .lf-rep--row{margin-top:24px}
.lf-afford .lf-fine--d{margin-bottom:18px}

/* budget tabs v2: slim one-line pills ("Under £150 a month") instead of tall boxes */
.lf-btabs{gap:8px;margin-bottom:20px}
.lf-btabs [role=tab]{flex-direction:row;align-items:baseline;gap:6px;min-height:52px;padding:8px 14px;border-width:1.5px;border-radius:999px}
.lf-btabs [role=tab] small{font-size:15px}
.lf-btabs [role=tab] b{font-size:20px}
.lf-btabs [role=tab][aria-selected=true]{transform:none;box-shadow:none}
@media (max-width:700px){.lf-btabs [role=tab]{min-height:48px;padding:6px 10px;gap:4px}.lf-btabs [role=tab] b{font-size:18px}.lf-btabs [role=tab] small{font-size:13.5px}}
.lf-btabs [role=tab]{align-items:center;justify-content:center;padding-top:0;padding-bottom:0}
.lf-btabs [role=tab] small,.lf-btabs [role=tab] b{line-height:1;display:block}

/* budget summary bar: bold figures in white, not yellow */
.lf-bsum b{color:#fff;font-weight:700}

/* monthly stepper: meter-style digit roll (lf.js roll()) + a little press on the buttons */
.lf-step output{display:inline-flex;justify-content:center;font-variant-numeric:tabular-nums}
.lf-rc{position:relative;display:inline-block;overflow:hidden;line-height:1.15;height:1.15em;vertical-align:top}
.lf-rc>span{display:block}
.lf-rc>.out{position:absolute;inset:0}
.lf-rc>.in.up{animation:lfRcInUp .42s cubic-bezier(.2,.9,.25,1) both}
.lf-rc>.out.up{animation:lfRcOutUp .42s cubic-bezier(.2,.9,.25,1) both}
.lf-rc>.in.dn{animation:lfRcInDn .42s cubic-bezier(.2,.9,.25,1) both}
.lf-rc>.out.dn{animation:lfRcOutDn .42s cubic-bezier(.2,.9,.25,1) both}
@keyframes lfRcInUp{from{transform:translateY(80%);opacity:0;filter:blur(2px)}to{transform:none;opacity:1;filter:none}}
@keyframes lfRcOutUp{from{transform:none;opacity:1}to{transform:translateY(-80%);opacity:0;filter:blur(2px)}}
@keyframes lfRcInDn{from{transform:translateY(-80%);opacity:0;filter:blur(2px)}to{transform:none;opacity:1;filter:none}}
@keyframes lfRcOutDn{from{transform:none;opacity:1}to{transform:translateY(80%);opacity:0;filter:blur(2px)}}
.lf-step output.pop{animation:lfRcPop .35s cubic-bezier(.2,.9,.25,1)}
@keyframes lfRcPop{from{transform:scale(.92);opacity:.4}}
.lf-step button{transition:transform .15s ease,background .2s}
.lf-step button:active{transform:scale(.9)}
@media (prefers-reduced-motion:reduce){.lf-rc>span{animation:none!important}.lf-step button:active{transform:none}}

/* ===== site-wide motion (lf-motion.js). One easing everywhere: quick start, long soft landing ===== */
:root{--mo-ease:cubic-bezier(.16,1,.3,1)}
/* sliding pill behind the chosen toggle */
.mo .mo-g{position:relative;isolation:isolate}
.mo .mo-pill{position:absolute;left:0;top:0;z-index:-1;border-radius:999px;pointer-events:none;
  transition:transform .5s var(--mo-ease),width .5s var(--mo-ease),height .5s var(--mo-ease),opacity .2s}
.mo .lf-btabs .mo-pill{background:var(--navy);box-shadow:0 10px 22px -14px rgba(18,26,69,.7)}
.mo .lf-dfil .mo-pill{background:var(--navy)}
.mo .lf-seg2 .mo-pill{background:#fff}
.mo .lf-btabs [role=tab][aria-selected=true],.mo .lf-dfil button[aria-pressed=true],.mo .lf-seg2 button[aria-pressed=true]{background:transparent!important;border-color:transparent}
.mo .lf-btabs [role=tab],.mo .lf-dfil button,.mo .lf-seg2 button{transition:color .35s var(--mo-ease),border-color .35s,background-color .2s}
.mo .lf-btabs [role=tab] b,.mo .lf-btabs [role=tab] small,.mo .lf-dfil button span{transition:color .35s var(--mo-ease)}
.mo .lf-btabs [role=tab]:active,.mo .lf-dfil button:active,.mo .lf-seg2 button:active{transform:scale(.96)}
/* cards swapped in by a toggle */
.mo .mo-swap{animation:moSwap .6s var(--mo-ease) both;animation-delay:var(--md,0s)}
@keyframes moSwap{from{opacity:0;transform:translateY(18px) scale(.98)}}
.mo .mo-fade{animation:moFade .45s var(--mo-ease) both}
@keyframes moFade{from{opacity:0;transform:translateY(6px)}}
/* scroll reveals */
.mo [data-mo=up]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--mo-ease) var(--md,0s),transform .9s var(--mo-ease) var(--md,0s)}
.mo [data-mo=fade]{opacity:0;transition:opacity 1s var(--mo-ease) var(--md,0s)}
.mo [data-mo=zoom]{transform:scale(1.08);transition:transform 1.4s var(--mo-ease)}
.mo [data-mo=up].mo-in,.mo [data-mo=fade].mo-in{opacity:1;transform:none}
.mo [data-mo=zoom].mo-in{transform:none}
/* the older per-section reveal uses the same soft easing */
.js .lf [data-r]{transition-duration:.9s;transition-timing-function:var(--mo-ease);transform:translateY(28px)}
.js .lf [data-r].in{transform:none}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* card pile v4: every card visible at its own angle; new budget = old pile sinks behind, new cards dealt on top */
.lf-cc.far{opacity:1}
.lf-cc{box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.lf-cc::after{opacity:calc(var(--k) * .08)}
.lf-cc.lf-cc--in{animation:lfCcIn .35s ease-out both;animation-delay:var(--in,0s)}
@keyframes lfCcIn{from{opacity:0}}
.lf-cc.gone{pointer-events:none;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s ease .1s,filter .6s;
  transform:translate3d(-18px,26px,0) rotate(-7deg) scale(.88)!important;opacity:0;filter:brightness(.7)}
/* arrows and count centred under the pile, hint on its own line */
.lf-cdeck__ctrl{flex-wrap:wrap;justify-content:center;width:min(430px,84vw);margin-left:4px;row-gap:8px}
.lf-cdeck__hint{flex-basis:100%;text-align:center}
@media (max-width:900px){.lf-cdeck__ctrl{margin-left:auto;margin-right:auto}}
@media (max-width:600px){.lf-cdeck__ctrl{width:min(320px,80vw)}}
/* "/month" sits right after the price */
.lf-deal__pm{flex-direction:row;align-items:baseline;gap:1px}
.lf-btabs [role=tab] b+small{margin-left:-5px}
/* summary above the pile: centred over the cards (like the arrows below), badge centred on the big figure */
.lf-sum{align-items:center;justify-content:center;text-align:center;width:min(430px,84vw);margin-left:4px}
.lf-sum p:first-child{text-align:center}
@media (max-width:900px){.lf-sum{margin-left:auto;margin-right:auto}}
@media (max-width:600px){.lf-sum{width:min(320px,80vw)}}
/* summary: right-aligned (label and figure+badge share the right edge) */
.lf-sum{justify-content:flex-end;text-align:right}
.lf-sum p:first-child{text-align:right}

/* ===== part exchange v2: same build as the finance section (navy, two columns, live answer on the right) ===== */
.lf-px2{background:linear-gradient(180deg,var(--night),var(--deep));color:#fff;border-top:1px solid rgba(255,255,255,.08);overflow:hidden}
.lf-px2__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.lf-px2 h2{font-size:clamp(30px,3.2vw,44px);max-width:16ch;color:#fff}
.lf-px2 .lf-sub{color:rgba(255,255,255,.78);max-width:44ch}
.lf-px2__f{display:flex;flex-direction:column;gap:8px;margin-top:26px;max-width:460px}
.lf-px2__f label{font-weight:600;font-size:16px;color:#fff;margin-top:8px}
.lf-px2 .lf-plate{height:68px;border-color:#0b1240}
.lf-px2 .lf-plate:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.6)}
.lf-px2 .lf-in{min-height:56px;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:12px}
.lf-px2 .lf-in::placeholder{color:rgba(255,255,255,.5)}
.lf-px2 .lf-in:focus{outline:none;border-color:#fff}
.lf-px2 .lf-err{min-height:0;color:#ffb4b4;font-size:14.5px}
.lf-px2 .lf-err:empty{display:none}
.lf-px2 .lf-ticks{margin-top:24px;color:rgba(255,255,255,.85)}
.lf-px2 .lf-ticks li::before{color:var(--yellow)}
/* right: value + what it gets you */
.lf-px2__a{width:min(430px,100%);justify-self:center;display:flex;flex-direction:column;align-items:stretch}
.lf-px2__k{font-size:15px;color:rgba(255,255,255,.75)}
.lf-px2__v{font-size:clamp(44px,4.6vw,60px);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:18px;font-variant-numeric:tabular-nums}
.lf-px2__card{border-radius:22px;overflow:hidden;background:#fff;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.lf-px2__card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 60%}
.lf-px2__b{display:flex;flex-direction:column;gap:4px;padding:16px 20px 20px}
.lf-px2__b small{font-size:12.5px;font-weight:600;color:var(--grey);text-transform:uppercase;letter-spacing:.05em}
.lf-px2__b h3{font-size:1.3em}
.lf-px2__pm{font-size:15px}.lf-px2__pm b{font-size:26px;color:var(--navy)}
.lf-px2__n{font-size:15px}.lf-px2__n b{color:var(--navy)}
.lf-px2__also{font-size:14px;color:var(--grey)}
.lf-px2__ph{position:relative}
.lf-px2__ph img{filter:grayscale(.6) brightness(.9);opacity:.55}
.lf-px2__ph p{padding:18px 20px 22px;font-size:16px;color:var(--grey)}
.lf-px2__card--in{animation:moSwap .55s cubic-bezier(.16,1,.3,1) both}
.lf-px2__use{margin-top:18px;width:100%}
.lf-px2__use:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3);transform:none}
@media (max-width:900px){.lf-px2__in{grid-template-columns:1fr}.lf-px2__a{justify-self:stretch;width:100%;max-width:430px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.lf-px2__card--in{animation:none}}

/* heart on car cards: hover = button lifts, heart turns red and gives a small beat; press squeezes */
.lf-deal__save{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background-color .2s}
.lf-deal__save svg{transition:fill .2s,stroke .2s,transform .3s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){
  .lf-deal__save:hover{transform:scale(1.08);background:#fff;box-shadow:0 6px 16px -6px rgba(18,26,69,.45)}
  .lf-deal__save:hover svg{stroke:#e5484d;fill:rgba(229,72,77,.15);animation:lfHeartHover .6s ease}
  .lf-deal__save[aria-pressed=true]:hover svg{fill:#e5484d}
}
.lf-deal__save:active{transform:scale(.92)}
.lf-deal__save:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
@keyframes lfHeartHover{0%{transform:scale(1)}35%{transform:scale(1.22)}60%{transform:scale(.95)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.lf-deal__save:hover svg{animation:none}.lf-deal__save:hover{transform:none}}

/* budget tabs: "Under" said once, outside; pills shrink to their price */
.lf-brow{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:20px}
.lf-brow__l{font-size:17px;font-weight:600;color:var(--ink)}
.lf-brow .lf-btabs{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.lf-brow .lf-btabs [role=tab]{padding:0 20px;gap:0}
.lf-btabs [role=tab] b+small{margin-left:1px}
@media (max-width:700px){.lf-brow .lf-btabs [role=tab]{padding:0 14px}}
/* heart on the budget cards: same button as Hot deals */
.lf-bcard{position:relative}
.lf-bcard__save{top:10px;right:10px}

/* ===== part exchange v3: one wide banner, copy left, boxes right, no photo ===== */
.lf-px2{padding:clamp(48px,6vw,88px) 0}
.lf-px3{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(28px,4vw,52px) clamp(24px,4vw,56px);border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.lf-px3 h2{font-size:clamp(28px,3vw,40px);color:#fff}
.lf-px3 .lf-sub{color:rgba(255,255,255,.78);max-width:40ch;margin-top:10px}
.lf-px3 .lf-ticks{margin-top:20px;color:rgba(255,255,255,.85)}
.lf-px3__f{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;align-items:end}
.lf-px3__fld{display:flex;flex-direction:column;gap:8px}
.lf-px3__fld label{font-weight:600;font-size:16px;color:#fff}
.lf-px3 .lf-plate,.lf-px3 .lf-in{height:64px;min-height:64px}
.lf-px3 .lf-plate input{font-size:28px}
.lf-px3__res{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.lf-px3__v{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;width:100%}
.lf-px3__k{font-size:15px;color:rgba(255,255,255,.75)}
.lf-px3__v b{font-size:clamp(30px,3vw,40px);font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.lf-px3__res:not(.on) .lf-px3__v b{color:rgba(255,255,255,.35)}
.lf-px3__n{flex:1 1 260px;font-size:15px;color:rgba(255,255,255,.75)}
.lf-px3__n b{color:#fff}
.lf-px3__use{flex:none}
.lf-px3__res.on .lf-px3__use{animation:moFade .45s cubic-bezier(.16,1,.3,1) both}
@media (max-width:900px){.lf-px3{grid-template-columns:1fr}}
@media (max-width:560px){.lf-px3__f{grid-template-columns:1fr}.lf-px3__use{width:100%}}
/* part exchange: white section so it stands apart from the navy finance section; the banner itself stays navy */
.lf-px2{background:#fff;border-top:0}
.lf-px3{background:linear-gradient(135deg,var(--deep),var(--night));border:0;box-shadow:0 30px 60px -36px rgba(18,26,69,.6)}
.lf-px3__f{grid-template-columns:1.1fr 1fr}
.lf-px3__fld label{white-space:nowrap}
.lf-px3__f{grid-template-columns:minmax(0,1.2fr) minmax(200px,1fr)}
/* part exchange result: a soft panel; before a plate is typed it just says where the value will appear */
.lf-px3__res{margin-top:18px;padding:18px 20px;border-top:0;border-radius:16px;background:rgba(255,255,255,.07);min-height:84px}
.lf-px3__empty{display:flex;align-items:center;gap:10px;font-size:15.5px;color:rgba(255,255,255,.72)}
.lf-px3__empty::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(247,207,74,.18)}
.lf-px3__res.on .lf-px3__empty,.lf-px3__res:not(.on) .lf-px3__v,.lf-px3__res:not(.on) .lf-px3__n{display:none}
.lf-px3__res.on{animation:moFade .45s cubic-bezier(.16,1,.3,1) both}
/* nothing shows under the boxes until there is a value */
.lf-px3__res:not(.on){display:none}
/* plate and miles stacked */
.lf-px3__f{grid-template-columns:1fr;gap:16px}
.lf-px3__fld label{white-space:normal}

/* homepage: the nav stays on top the whole way down (hg.js still adds .hide on scroll; ignored here) */
.nav.hide{transform:none}
.lf-cdeck{isolation:isolate}

/* ===== 5a · story: team photo shown whole, family copy + facts beside it, three promise cards ===== */
.lf-story{background:var(--off)}
.lf-story__top{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,5vw,72px);align-items:center}
.lf-story h2{font-size:clamp(30px,3.2vw,44px);max-width:14ch}
.lf-story .lf-sub{max-width:44ch;margin-top:12px}
.lf-story__facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin:28px 0 0}
.lf-story__facts div{padding:0 24px;border-left:1px solid var(--line)}
.lf-story__facts div:first-child{padding-left:0;border-left:0}
.lf-story__facts dt{font-size:14px;color:var(--grey)}
.lf-story__facts dd{margin:2px 0 0;font-size:clamp(26px,2.4vw,32px);font-weight:700;letter-spacing:-.02em;color:var(--navy);line-height:1.1}
.lf-story__facts dd small{font-size:.55em;font-weight:600;color:var(--grey)}
.lf-story__pic{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 30px 60px -34px rgba(18,26,69,.55)}
.lf-story__pic img{width:100%;height:100%;object-fit:cover;object-position:55% 70%}
.lf-story__pic figcaption{position:absolute;left:14px;bottom:14px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.92);font-size:14px;font-weight:600;color:var(--ink)}
.lf-why{list-style:none;margin:clamp(36px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lf-why a{display:flex;flex-direction:column;gap:6px;height:100%;padding:24px;border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;
  box-shadow:0 1px 3px rgba(18,26,69,.08),0 18px 34px -28px rgba(18,26,69,.45);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.lf-why a:hover{transform:translateY(-4px);box-shadow:0 1px 3px rgba(18,26,69,.08),0 26px 44px -26px rgba(18,26,69,.5)}
.lf-why__ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--yellow);margin-bottom:10px}
.lf-why__ic svg{width:28px;height:28px;fill:none;stroke:var(--deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lf-why b{font-size:20px;font-weight:700;color:var(--navy);line-height:1.25}
.lf-why span:not(.lf-why__ic){font-size:16.5px;color:var(--ink)}
.lf-why em{margin-top:auto;padding-top:12px;font-style:normal;font-weight:600;font-size:16px;color:var(--navy)}
.lf-why em i{font-style:normal;display:inline-block;transition:transform .3s}
.lf-why a:hover em i{transform:translateX(4px)}

/* ===== 5b · Trustpilot reviews: logo + score up front, large photos, readable quotes ===== */
.lf-tp{background:#fff}
.lf-tp__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.lf-tp__head h2{font-size:clamp(28px,3vw,40px)}
.lf-tp__score{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:12px}
.lf-tp__logo{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:20px;letter-spacing:-.02em;color:#191919}
.lf-tp__logo svg{width:26px;height:26px;fill:#00b67a}
.lf-tp__stars{display:inline-flex;gap:3px}
.lf-tp__stars i{display:grid;place-items:center;width:28px;height:28px;background:#00b67a}
.lf-tp__stars svg{width:20px;height:20px;fill:#fff}
.lf-tp__stars--s i{width:22px;height:22px}.lf-tp__stars--s svg{width:16px;height:16px}
.lf-tp__txt{font-size:16px;color:var(--ink)}.lf-tp__txt b{font-weight:700}
.lf-tp__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lf-tpc{margin:0;height:100%;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 18px 34px -30px rgba(18,26,69,.45)}
.lf-tpc__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.lf-tpc__img img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.lf-tpc__car{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);font-size:14px;font-weight:600;color:var(--ink)}
.lf-tpc__b{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.lf-tpc__t{font-size:19px;font-weight:700;color:var(--ink)}
.lf-tpc blockquote{margin:0;font-size:17px;line-height:1.6;color:var(--ink)}
.lf-tpc__who{margin-top:auto;padding-top:10px;font-size:16px;color:var(--ink)}
.lf-tpc__who small{display:block;font-size:14px;color:var(--grey)}
@media (max-width:1000px){.lf-story__top{grid-template-columns:1fr}.lf-why,.lf-tp__list{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.lf-why,.lf-tp__list{grid-template-columns:1fr}.lf-story__facts{grid-template-columns:1fr 1fr 1fr}.lf-story__facts div{padding:0 12px}.lf-tp__head .btn{width:100%}}

/* ===== 5b · reviews stage v3 (lf-reviews.js) ===== */
.lf-tp{position:relative;overflow:hidden;color:#fff;background:radial-gradient(900px 500px at 85% 20%,rgba(0,182,122,.16),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(247,207,74,.10),transparent 60%),linear-gradient(180deg,var(--deep),var(--night))}
.lf-tp__in{display:grid;grid-template-columns:340px 1fr;gap:clamp(28px,4vw,64px);align-items:start}
/* score panel */
.lf-tp__panel{position:sticky;top:110px}
.lf-tp__logo{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:22px;letter-spacing:-.02em;color:#fff}
.lf-tp__logo svg{width:28px;height:28px;fill:#00b67a}
.lf-tp h2{font-size:clamp(26px,2.6vw,34px);color:#fff;margin-top:18px;max-width:12ch}
.lf-tp h2 b{color:#00d68f}
.lf-tp__big{display:flex;align-items:baseline;gap:10px;margin-top:18px}
.lf-tp__big b{font-size:clamp(64px,6vw,84px);font-weight:700;letter-spacing:-.04em;line-height:.9}
.lf-tp__big span{font-size:17px;color:rgba(255,255,255,.7)}
.lf-tp__stars{display:inline-flex;gap:4px;margin-top:12px}
.lf-tp__stars i{display:grid;place-items:center;width:34px;height:34px;background:#00b67a;border-radius:3px}
.lf-tp__stars svg{width:24px;height:24px;fill:#fff}
.lf-tp__stars--s{margin:0}.lf-tp__stars--s i{width:26px;height:26px}.lf-tp__stars--s svg{width:18px;height:18px}
.lf-tp__count{margin-top:10px;font-size:15px;color:rgba(255,255,255,.7)}
.lf-tp__bars{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.lf-tp__bars li{display:grid;grid-template-columns:52px 1fr 40px;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.75)}
.lf-tp__bars i{height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.lf-tp__bars b{display:block;height:100%;width:0;border-radius:99px;background:#00b67a;transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.lf-tp__bars li:nth-child(2) b{transition-delay:.08s}.lf-tp__bars li:nth-child(3) b{transition-delay:.16s}.lf-tp__bars li:nth-child(n+4) b{transition-delay:.24s}
.lf-tp__bars.on b{width:var(--w)}
.lf-tp__bars em{font-style:normal;text-align:right}
.lf-tp__fl{margin-top:26px;font-size:15px;font-weight:600;color:#fff}
.lf-tp__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lf-tp__chips button{min-height:42px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.22);background:transparent;color:#fff;font-weight:600;font-size:14.5px;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .2s}
.lf-tp__chips button span{margin-left:4px;font-weight:500;opacity:.65}
.lf-tp__chips button:hover{border-color:#fff}
.lf-tp__chips button:active{transform:scale(.96)}
.lf-tp__chips button[aria-pressed=true]{background:#fff;border-color:#fff;color:var(--deep)}
/* featured review */
.lf-tp__card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);min-height:460px;border-radius:28px;overflow:hidden;background:#fff;color:var(--ink);box-shadow:0 40px 80px -40px rgba(0,0,0,.7);touch-action:pan-y}
.lf-tp__ph{position:relative;overflow:hidden;background:var(--mist)}
.lf-tp__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.lf-tp__car{position:absolute;left:16px;bottom:16px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.95);font-size:15px;font-weight:600;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.lf-tp__q{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(26px,3vw,44px)}
.lf-tp__q::before{content:"“";position:absolute;right:28px;top:-6px;font-size:150px;line-height:1;font-weight:700;color:var(--mist);pointer-events:none}
.lf-tp__q h3{position:relative;font-size:clamp(22px,2vw,28px);color:var(--navy);line-height:1.2}
.lf-tp__q blockquote{position:relative;margin:0;font-size:clamp(18px,1.5vw,21px);line-height:1.6}
.lf-tp__who{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:17px}
.lf-tp__who small{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:14.5px;color:var(--grey)}
.lf-tp__ok{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#00b67a;color:#fff;font-size:11px;font-weight:700}
.lf-tp__pos{position:absolute;right:clamp(26px,3vw,44px);bottom:clamp(26px,3vw,44px);font-size:14px;color:var(--grey)}
/* change of review: photo eases in from a touch larger, words slide in from the side you're heading */
.lf-tp__card.go .lf-tp__ph img{animation:tpPh .8s cubic-bezier(.16,1,.3,1) both}
.lf-tp__card.go .lf-tp__q>*{animation:tpQ .6s cubic-bezier(.16,1,.3,1) both}
.lf-tp__card.go .lf-tp__q>:nth-child(2){animation-delay:.04s}.lf-tp__card.go .lf-tp__q>:nth-child(3){animation-delay:.08s}.lf-tp__card.go .lf-tp__q>:nth-child(n+4){animation-delay:.12s}
@keyframes tpPh{from{opacity:.2;transform:scale(1.08)}}
@keyframes tpQ{from{opacity:0;transform:translateX(calc(var(--dir,1) * 24px))}}
/* faces strip */
.lf-tp__nav{display:flex;align-items:center;gap:12px;margin-top:22px}
.lf-tp__arr{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);cursor:pointer;transition:background .2s,transform .2s}
.lf-tp__arr:hover{background:rgba(255,255,255,.16)}.lf-tp__arr:active{transform:scale(.92)}
.lf-tp__arr svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lf-tp__faces{flex:1;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:6px 4px 4px;scroll-snap-type:x mandatory}
.lf-tp__faces::-webkit-scrollbar{display:none}
.lf-tp__faces [role=tab]{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;padding:0;border:0;background:none;color:rgba(255,255,255,.7);font-size:13px;font-weight:600;cursor:pointer;scroll-snap-align:center}
.lf-tp__faces [role=tab] img{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:center top;border:3px solid transparent;box-shadow:0 0 0 2px rgba(255,255,255,.18);transition:box-shadow .3s,transform .3s cubic-bezier(.16,1,.3,1),filter .3s;filter:saturate(.75) brightness(.85)}
.lf-tp__faces [role=tab]{position:relative}
.lf-tp__faces [role=tab]::before{content:"";position:absolute;top:0;left:6px;width:60px;height:60px;border-radius:50%;overflow:hidden}
.lf-tp__faces [role=tab] span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72px}
.lf-tp__faces [role=tab]:hover img{filter:none}
.lf-tp__faces [role=tab][aria-selected=true]{color:#fff}
.lf-tp__faces [role=tab][aria-selected=true] img{filter:none;box-shadow:0 0 0 3px var(--yellow)}
.lf-tp__faces.in [role=tab]{animation:moSwap .5s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0s)}
.lf-tp__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px}
.lf-tp__foot .lf-fine{color:rgba(255,255,255,.55);margin:0}
@media (max-width:1100px){.lf-tp__in{grid-template-columns:1fr}.lf-tp__panel{position:static}}
@media (max-width:760px){.lf-tp__card{grid-template-columns:1fr}.lf-tp__ph{aspect-ratio:4/3}.lf-tp__arr{display:none}.lf-tp__q::before{font-size:110px}.lf-tp__foot .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.lf-tp__bars b{transition:none}}
/* reviews follow the page's dark-section rules (same as the finance section): plain navy gradient, same headline
   size and yellow highlight, same sub copy, Trustpilot green only on the stars and logo */
.lf-tp{background:linear-gradient(180deg,var(--deep),var(--night))}
.lf-tp h2{font-size:clamp(30px,3.2vw,44px);max-width:14ch;margin-top:16px;line-height:1.1}
.lf-tp .lf-sub{color:rgba(255,255,255,.78);max-width:34ch;margin-top:12px}
.lf-tp__panel{position:static}
.lf-tp__big{margin-top:24px}
.lf-tp__chips button[aria-pressed=true]{background:#fff;color:var(--deep)}
.lf-tp__stage{min-width:0}
.lf-tp__face{display:block;width:60px;height:60px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.18);transition:box-shadow .3s,transform .3s cubic-bezier(.16,1,.3,1)}
.lf-tp__faces [role=tab] .lf-tp__face img{width:100%;height:100%;border:0;border-radius:0;box-shadow:none;object-fit:cover}
.lf-tp__faces [role=tab]:hover .lf-tp__face{transform:translateY(-3px)}
.lf-tp__faces [role=tab][aria-selected=true] .lf-tp__face{box-shadow:0 0 0 3px var(--yellow);transform:translateY(-3px)}
.lf-tp__faces [role=tab][aria-selected=true] img{box-shadow:none}
.lf-tp__faces [role=tab]::before{display:none}
.lf-tp__face{position:relative}
.lf-tp__faces [role=tab] .lf-tp__face img{position:absolute;max-width:none;object-fit:cover}
.lf-tp__faces [role=tab] .lf-tp__face img{object-position:50% 50%;transform:none}
/* shelf card hover: same rounded shape as the photo, with even padding all round (outer radius = photo radius + padding) */
.lf-dc{padding:10px 10px 16px;border-radius:calc(var(--dcw, 118px) * .24 + 10px);transition:background .25s,box-shadow .25s}
.lf-dc:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* reviews v4: simplified — score panel left, one review right, arrows + count underneath */
.lf-tp__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);align-items:center}
.lf-tp__all{margin-top:28px}
.lf-tp__nav{justify-content:center;gap:18px}
.lf-tp__n{min-width:60px;text-align:center;font-size:15px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.lf-tp__n b{font-size:19px;color:#fff}
.lf-tp__stage .lf-fine{margin-top:14px;text-align:center;color:rgba(255,255,255,.5)}
@media (max-width:1100px){.lf-tp__in{grid-template-columns:1fr}}

/* ===== 6 · talk v2 (lf-talk.js): light section between the navy reviews and footer; three action cards ===== */
.lf-talk2{background:var(--off)}
.lf-talk2__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.lf-talk2 h2{font-size:clamp(30px,3.2vw,44px)}
.lf-talk2 .lf-sub{max-width:52ch;margin-top:12px}
/* live open / closed line */
.lf-open{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:#fff;font-size:16px;color:var(--ink);box-shadow:0 1px 3px rgba(18,26,69,.1)}
.lf-open i{position:relative;width:10px;height:10px;border-radius:50%;background:#9aa0b4}
.lf-open.on i{background:#12a150}
.lf-open.on i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#12a150;animation:lfPulse 2s ease-out infinite}
@keyframes lfPulse{from{transform:scale(1);opacity:.6}to{transform:scale(3);opacity:0}}
.lf-open b{font-weight:700}
.lf-open.on b{color:#0b7a3c}
/* cards */
.lf-talk2__cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.lf-tc{position:relative;display:flex;flex-direction:column;gap:6px;padding:26px;border-radius:24px;background:#fff;color:var(--ink);text-decoration:none;
  box-shadow:0 1px 3px rgba(18,26,69,.08),0 18px 34px -28px rgba(18,26,69,.45);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
a.lf-tc:hover,.lf-tc:not(.open):hover{transform:translateY(-4px);box-shadow:0 1px 3px rgba(18,26,69,.08),0 26px 44px -26px rgba(18,26,69,.5)}
.lf-tc__ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--mist);margin-bottom:12px;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.lf-tc__ic svg{width:28px;height:28px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lf-tc small{font-size:14px;font-weight:600;color:var(--grey);text-transform:uppercase;letter-spacing:.05em}
.lf-tc b{font-size:21px;font-weight:700;color:var(--navy);line-height:1.25}
.lf-tc__p{font-size:16.5px;color:var(--ink)}
.lf-tc em,.lf-tc__open,.lf-tc__dir{margin-top:14px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;font-style:normal;font-weight:600;font-size:16px;cursor:pointer;text-decoration:none;transition:background .2s,transform .2s}
.lf-tc__open,.lf-tc__dir{border:1.5px solid var(--line);background:#fff;color:var(--navy)}
.lf-tc__open:hover,.lf-tc__dir:hover{border-color:var(--navy)}
.lf-tc__open:active,.lf-tc__dir:active{transform:scale(.97)}
.lf-tc__dir{margin-top:10px}
.lf-tc i{font-style:normal;display:inline-block;transition:transform .3s}
/* call card: the strongest one */
.lf-tc--call{background:linear-gradient(160deg,var(--navy),var(--deep));color:#fff}
.lf-tc--call .lf-tc__ic{background:var(--yellow)}
.lf-tc--call .lf-tc__ic svg{stroke:var(--deep)}
.lf-tc--call small{color:rgba(255,255,255,.7)}
.lf-tc--call .lf-tc__num{font-size:clamp(28px,2.6vw,34px);color:#fff;letter-spacing:-.01em}
.lf-tc--call .lf-tc__p{color:rgba(255,255,255,.82)}
.lf-tc--call em{background:var(--yellow);color:var(--deep)}
.lf-tc--call:hover .lf-tc__ic{animation:lfRing .7s ease}
.lf-tc--call:hover em i{transform:translateX(4px)}
@keyframes lfRing{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
/* drawers open smoothly inside the card */
.lf-tc__drawer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
.lf-tc__drawer>div{overflow:hidden;min-height:0}
.lf-tc.open .lf-tc__drawer{grid-template-rows:1fr}
.lf-tc.open .lf-tc__open{background:var(--mist);border-color:transparent}
/* call-back form */
.lf-cbf{display:flex;flex-direction:column;gap:6px;padding-top:16px}
.lf-cbf label,.lf-cbf__l{font-weight:600;font-size:15.5px;margin-top:6px}
.lf-cbf .lf-in{min-height:52px}
.lf-cbf__when{display:flex;gap:6px;padding:4px;border-radius:999px;background:var(--mist)}
.lf-cbf__when button{flex:1;min-height:44px;border:0;border-radius:999px;background:none;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.lf-cbf__when button[aria-pressed=true]{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(18,26,69,.15)}
.lf-cbf .btn{margin-top:10px;width:100%}
.lf-cbf .lf-err:empty{display:none}
.lf-cbok{display:flex;align-items:center;gap:14px;padding-top:18px;outline:none}
.lf-cbok svg{flex:none;width:52px;height:52px;fill:none;stroke:#12a150;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lf-cbok circle{stroke-dasharray:145;stroke-dashoffset:145;animation:lfDraw .6s ease forwards}
.lf-cbok path{stroke-dasharray:40;stroke-dashoffset:40;animation:lfDraw .4s ease .45s forwards}
@keyframes lfDraw{to{stroke-dashoffset:0}}
.lf-cbok p{font-size:17px}.lf-cbok b{font-size:17px}
/* opening hours */
.lf-hrs{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.lf-hrs li{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:10px;font-size:16px}
.lf-hrs li.today{background:var(--mist);font-weight:600;color:var(--navy)}
.lf-hrs em{font-style:normal;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--yellow);color:var(--deep);font-size:12.5px;font-weight:700}
.lf-hrs__tbc{font-size:13px;color:var(--grey);margin:6px 10px 0}
@media (max-width:960px){.lf-talk2__cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.lf-open.on i::after,.lf-tc--call:hover .lf-tc__ic{animation:none}.lf-tc__drawer{transition:none}.lf-cbok circle,.lf-cbok path{animation:none;stroke-dashoffset:0}}
/* equal card heights at rest; when a drawer is open the others keep their own height */
.lf-talk2__cards{align-items:stretch}
.lf-talk2__cards>li{display:flex;flex-direction:column}
.lf-talk2__cards:not(:has(.open))>li>.lf-tc{flex:1}
.lf-talk2__cards:has(.open){align-items:start}
.lf-tc--call em{margin-top:auto}
.lf-tc--call .lf-tc__p{margin-bottom:14px}
/* Trustpilot (ported from Motormoolah): official logo; tiles fill green one by one, each star pops, a glint passes over */
.lf-tp__logo img{display:block;height:34px;width:auto}
.lf-tp__panel .lf-tp__stars{position:relative;overflow:hidden}
.lf-tp__panel .lf-tp__stars i{position:relative;overflow:hidden;background:rgba(255,255,255,.2)}
.lf-tp__panel .lf-tp__stars i::before{content:"";position:absolute;inset:0;background:#00b67a;transform-origin:0 50%;transform:scaleX(var(--f,1))}
.lf-tp__panel .lf-tp__stars i.part{--f:.8}
.lf-tp__panel .lf-tp__stars i svg{position:relative}
.lf-tp__panel .lf-tp__stars i:nth-child(2){--n:1}.lf-tp__panel .lf-tp__stars i:nth-child(3){--n:2}.lf-tp__panel .lf-tp__stars i:nth-child(4){--n:3}.lf-tp__panel .lf-tp__stars i:nth-child(5){--n:4}
.lf-tp__panel .lf-tp__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}
.lf-tp__panel .lf-tp__stars.is-wait i::before{transform:scaleX(0)}
.lf-tp__panel .lf-tp__stars.is-go i::before{animation:tpFill .42s cubic-bezier(.33,1,.68,1) calc(var(--n,0) * .13s) both}
.lf-tp__panel .lf-tp__stars.is-go i svg{animation:tpPop .5s ease-in-out calc(var(--n,0) * .13s + .16s) both}
.lf-tp__panel .lf-tp__stars.is-go::after{animation:tpGlint .9s ease-in-out .85s both}
@keyframes tpFill{from{transform:scaleX(0)}to{transform:scaleX(var(--f,1))}}
@keyframes tpPop{0%,100%{transform:none}35%{transform:scale(1.3) rotate(-14deg)}65%{transform:scale(.92) rotate(4deg)}}
@keyframes tpGlint{from{background-position:110% 0}to{background-position:-10% 0}}
.lf-tp__big b{font-variant-numeric:tabular-nums}
/* talk v2.1 alignment: intro on two lines with the open/closed pill level with its last line; every card has the
   same top block (icon, label, title, line) and its buttons pinned to the bottom edge, so all three line up */
.lf-talk2 .lf-sub{max-width:62ch}
.lf-talk2__head{align-items:flex-end;margin-bottom:32px}
.lf-open{margin-bottom:2px}
.lf-tc{padding:28px;gap:8px}
.lf-tc__ic{margin-bottom:14px}
.lf-tc>b{min-height:54px}
.lf-tc--call .lf-tc__num{font-size:clamp(26px,2.3vw,30px);line-height:1.2}
.lf-tc em,.lf-tc__open,.lf-tc__dir,.lf-tc__acts{margin-top:auto}
.lf-tc em,.lf-tc__open{align-self:flex-start}
.lf-tc--cb .lf-tc__open,.lf-tc--call em{margin-top:auto}
.lf-tc__p{margin-bottom:22px}
.lf-tc__acts{display:flex;flex-wrap:wrap;gap:10px}
.lf-tc__acts .lf-tc__open,.lf-tc__acts .lf-tc__dir{margin-top:0}
.lf-tc--visit .lf-tc__drawer>div{padding-bottom:0}
.lf-tc--visit.open .lf-hrs{margin:0 0 16px}
.lf-tc--cb.open .lf-tc__open{display:none}
.lf-cbf{padding-top:4px}
/* finance: the right column (summary, card pile, arrows) sits on the page's right guide, the same edge the nav ends on */
@media (min-width:901px){
  .lf-afford__a{align-items:flex-end}
  .lf-afford__a .lf-sum,.lf-afford__a .lf-cdeck,.lf-afford__a .lf-cdeck__ctrl{margin-left:0;margin-right:0}
}
.lf-tc__acts{flex-wrap:nowrap;gap:8px}
.lf-tc__acts .lf-tc__open,.lf-tc__acts .lf-tc__dir{padding:0 16px;white-space:nowrap}
.lf-tc:not(.open) .lf-tc__drawer{margin-top:-8px}
@media (max-width:420px){.lf-tc__acts{flex-wrap:wrap}}

/* one stroke weight for every line icon below the hero: 2px on screen whatever the icon's size
   (non-scaling strokes, so small ticks and big card icons draw the same line). The animated success tick keeps its own. */
main.lf svg:not(.lf-cbok svg) :is(path,circle,rect,line,polyline,ellipse){vector-effect:non-scaling-stroke}
main.lf svg:not(.lf-cbok svg),.lf-deal__save svg{stroke-width:2px}
.lf-gal__nav svg,.lf-deal__check svg,.lf-deal__res svg,.lf-deal__pc svg,.lf-round svg,.lf-tp__arr svg,.lf-why__ic svg,.lf-tc__ic svg,.lf-deal__save svg,.lf-ic svg{stroke-width:2px}
/* top bar Trustpilot stars: live tiles that fill on load (same motion as the reviews section) */
.tp-tiles{position:relative;display:inline-flex;gap:2px;overflow:hidden;vertical-align:middle}
.tp-tiles i{position:relative;display:grid;place-items:center;width:var(--t,14px);height:var(--t,14px);overflow:hidden;background:rgba(255,255,255,.25)}
.tp-tiles i::before{content:"";position:absolute;inset:0;background:#00b67a;transform-origin:0 50%;transform:scaleX(var(--f,1))}
.tp-tiles i.part{--f:.8}
.tp-tiles svg{position:relative;width:72%;height:72%;fill:#fff}
.tp-tiles i:nth-child(2){--n:1}.tp-tiles i:nth-child(3){--n:2}.tp-tiles i:nth-child(4){--n:3}.tp-tiles i:nth-child(5){--n:4}
.tp-tiles::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}
.tp-tiles.is-wait i::before{transform:scaleX(0)}
.tp-tiles.is-go i::before{animation:tpFill .42s cubic-bezier(.33,1,.68,1) calc(var(--n,0) * .13s) both}
.tp-tiles.is-go svg{animation:tpPop .5s ease-in-out calc(var(--n,0) * .13s + .16s) both}
.tp-tiles.is-go::after{animation:tpGlint .9s ease-in-out .85s both}

/* ===== car photo slideshow (HG.gallery in lf-deals.js), used by Hot deals and the budget cards ===== */
.lf-gal img{transform:scale(var(--z,1));transition:opacity .6s ease,transform 1.6s cubic-bezier(.16,1,.3,1)}
.lf-deal:hover .lf-gal img.on{transform:scale(calc(var(--z,1) * 1.04))}
/* progress dots: the current one stretches and fills over the time the photo shows */
.lf-gal__dots i{position:relative;overflow:hidden}
.lf-gal__dots i b{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.lf-gal__dots i.on{width:22px;background:rgba(255,255,255,.55)}
.lf-gal__dots i.on b,.lf-gal__dots i.done b{transform:scaleX(1)}
.play .lf-gal__dots i.on b{transform:scaleX(0);animation:galFill var(--step,1400ms) linear forwards}
@keyframes galFill{to{transform:scaleX(1)}}
/* how many photos the full listing has */
.lf-gal__n{position:absolute;right:10px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:rgba(12,18,52,.62);color:#fff;font-size:12.5px;font-weight:600;backdrop-filter:blur(6px);pointer-events:none}
.lf-gal__n::before{content:"";width:13px;height:10px;border:1.6px solid #fff;border-radius:3px;box-sizing:border-box;box-shadow:inset 0 0 0 2.2px rgba(12,18,52,.62),inset 0 0 0 3.6px #fff}
.lf-deal__img .lf-gal__dots{bottom:13px}
/* budget cards now use the Hot deals card */
.lf-bgrid .lf-deal__save-tag{display:none}
@media (prefers-reduced-motion:reduce){.lf-gal img{transition:opacity .2s}.play .lf-gal__dots i.on b{animation:none;transform:scaleX(1)}}

/* photo overlays, tidied: at rest only the Save tag shows. On hover the photo progress appears as thin bars along the
   top (one per photo, the current one fills), and the photo count sits bottom-right on the same line and height as
   the Save tag. */
.lf-deal__img .lf-gal__dots{top:10px;bottom:auto;left:12px;right:56px;justify-content:stretch;gap:4px;opacity:0;transition:opacity .3s}
.lf-deal__img .lf-gal__dots i{flex:1;width:auto;height:3px;border-radius:2px;background:rgba(255,255,255,.45);box-shadow:none}
.lf-deal__img .lf-gal__dots i.on{width:auto;height:3px;border-radius:2px;background:rgba(255,255,255,.45)}
.lf-deal__save-tag,.lf-gal__n{bottom:12px;height:28px;padding:0 11px;display:inline-flex;align-items:center;border-radius:999px;font-size:13px;line-height:1;box-shadow:none}
.lf-deal__save-tag{left:12px}
.lf-gal__n{right:12px;gap:0;background:rgba(12,18,52,.55);opacity:0;transition:opacity .3s}
.lf-gal__n::before{content:none}
.lf-deal__img:hover .lf-gal__dots,.lf-deal__img:hover .lf-gal__n,.lf-deal__img:focus-within .lf-gal__dots,.lf-deal__img:focus-within .lf-gal__n{opacity:1}
@media (hover:none){.lf-deal__img .lf-gal__dots{opacity:1}}

/* ===== end of page v3: each part has its own character ===== */
/* 5a · family firm: full-width team photo, story over the sky, timeline along the bottom */
.lf-story3{position:relative;overflow:hidden;color:#fff;background:var(--deep);min-height:clamp(560px,52vw,760px);display:flex}
.lf-story3__pic{position:absolute;inset:0}
.lf-story3__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.lf-story3__pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,52,.88) 0%,rgba(12,18,52,.55) 38%,rgba(12,18,52,.05) 65%),linear-gradient(0deg,rgba(12,18,52,.92) 0%,rgba(12,18,52,0) 34%)}
.lf-story3__in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:48px;width:100%;padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(36px,4vw,56px)}
.lf-story3 h2{font-size:clamp(32px,3.6vw,52px);max-width:12ch;color:#fff;line-height:1.08}
.lf-story3 .lf-sub{max-width:38ch;margin-top:14px;color:rgba(255,255,255,.85)}
.lf-k--y{color:var(--yellow)}
/* timeline: a line that fills yellow as you scroll, four stops */
.lf-tl{--p:0;position:relative;list-style:none;margin:0;padding:22px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lf-tl::before,.lf-tl::after{content:"";position:absolute;left:0;top:0;height:3px;border-radius:2px}
.lf-tl::before{right:0;background:rgba(255,255,255,.25)}
.lf-tl::after{width:calc(var(--p) * 100%);background:var(--yellow);box-shadow:0 0 14px rgba(247,207,74,.6)}
.lf-tl li{position:relative;display:flex;flex-direction:column;gap:4px;opacity:.45;transform:translateY(8px);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1)}
.lf-tl li::before{content:"";position:absolute;left:0;top:-29px;width:17px;height:17px;border-radius:50%;background:var(--deep);border:3px solid rgba(255,255,255,.4);transition:background .3s,border-color .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.lf-tl li.on{opacity:1;transform:none}
.lf-tl li.on::before{background:var(--yellow);border-color:var(--yellow);transform:scale(1.15)}
.lf-tl b{font-size:clamp(26px,2.4vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1}
.lf-tl span{font-size:16px;color:rgba(255,255,255,.85);max-width:24ch}
.lf-tl__now b{color:var(--yellow);font-variant-numeric:tabular-nums}
@media (max-width:760px){.lf-story3{min-height:0}.lf-story3__pic img{object-position:60% 62%}.lf-story3__pic::after{background:linear-gradient(0deg,rgba(12,18,52,.95) 0%,rgba(12,18,52,.75) 55%,rgba(12,18,52,.35) 100%)}
  .lf-tl{grid-template-columns:1fr 1fr;row-gap:36px}.lf-tl::before,.lf-tl::after{display:none}.lf-tl li::before{top:-24px}}
@media (prefers-reduced-motion:reduce){.lf-tl li{opacity:1;transform:none;transition:none}}

/* 5a+ · promises: one yellow band, three links split by thin rules */
.lf-band{background:var(--yellow);color:var(--deep)}
.lf-band__in{list-style:none;margin:0 auto;padding-top:0;padding-bottom:0;display:grid;grid-template-columns:repeat(3,1fr)}
.lf-band li+li{border-left:1px solid rgba(18,26,69,.18)}
.lf-band a{display:flex;align-items:center;gap:16px;height:100%;padding:30px 28px;color:var(--deep);text-decoration:none;transition:background .3s}
.lf-band li:first-child a{padding-left:0}.lf-band li:last-child a{padding-right:0}
.lf-band a:hover{background:rgba(255,255,255,.22)}
.lf-band__ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--deep);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.lf-band__ic svg{width:26px;height:26px;fill:none;stroke:var(--yellow);stroke-linecap:round;stroke-linejoin:round}
.lf-band a:hover .lf-band__ic{transform:rotate(-8deg) scale(1.08)}
.lf-band b{display:block;font-size:19px;font-weight:700;line-height:1.2}
.lf-band small{display:block;font-size:15px;color:rgba(18,26,69,.75);margin-top:2px}
.lf-band i{margin-left:auto;font-style:normal;font-weight:700;font-size:20px;transition:transform .3s}
.lf-band a:hover i{transform:translateX(5px)}
@media (max-width:900px){.lf-band__in{grid-template-columns:1fr}.lf-band li+li{border-left:0;border-top:1px solid rgba(18,26,69,.18)}.lf-band a,.lf-band li:first-child a,.lf-band li:last-child a{padding:22px 0}}

/* 6 · closing: the phone number is the headline */
.lf-close{background:var(--off);padding:clamp(64px,8vw,120px) 0 clamp(56px,6vw,88px)}
.lf-close__k{font-size:clamp(20px,1.8vw,24px);font-weight:600;color:var(--ink)}
.lf-close__num{position:relative;display:inline-flex;align-items:center;gap:.25em;margin-top:6px;font-size:clamp(52px,9vw,132px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--navy);text-decoration:none;white-space:nowrap}
.lf-close__num::after{content:"";position:absolute;left:0;right:1.1em;bottom:-.06em;height:.06em;border-radius:99px;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.lf-close__num:hover::after,.lf-close__num:focus-visible::after{transform:scaleX(1)}
.lf-close__num i{display:grid;place-items:center;width:.62em;height:.62em;margin-left:.1em;border-radius:50%;background:var(--yellow);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.lf-close__num i svg{width:46%;height:46%;fill:none;stroke:var(--deep);stroke-linecap:round;stroke-linejoin:round}
.lf-close__num:hover i{animation:lfRing .7s ease}
.lf-close__row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:22px}
.lf-close__sub{font-size:17px;color:var(--grey);max-width:56ch}
.lf-close__acts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lf-close__a{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;min-height:88px;padding:16px 22px;border:0;background:none;text-align:left;font:inherit;color:var(--ink);text-decoration:none;cursor:pointer;transition:background .3s}
.lf-close__a+.lf-close__a{border-left:1px solid var(--line)}
.lf-close__a:first-child{padding-left:0}
.lf-close__a span{font-size:19px;font-weight:700;color:var(--navy)}
.lf-close__a small{grid-column:1;font-size:15px;color:var(--grey)}
.lf-close__a i{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;font-style:normal;font-weight:700;color:var(--navy);box-shadow:0 1px 3px rgba(18,26,69,.12);transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s,color .25s}
.lf-close__a:hover i{background:var(--navy);color:#fff}
.lf-close__a[aria-expanded=true] i{transform:rotate(180deg);background:var(--navy);color:#fff}
a.lf-close__a:hover i{transform:translate(2px,-2px)}
.lf-close__drawer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
.lf-close__drawer>div{overflow:hidden;min-height:0}
.lf-close__drawer.open{grid-template-rows:1fr}
.lf-close__panel{padding:24px 0 6px}
.lf-close .lf-cbf{display:grid;grid-template-columns:1fr 1fr 1.2fr auto;align-items:end;gap:14px;padding:0}
.lf-cbf__f{display:flex;flex-direction:column;gap:6px}
.lf-close .lf-cbf label,.lf-close .lf-cbf__l{margin:0}
.lf-close .lf-cbf .btn{margin:0;width:auto;min-height:52px}
.lf-close .lf-cbf .lf-err{grid-column:1 / -1}
.lf-close .lf-cbf__when{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.lf-close .lf-cbf__when button[aria-pressed=true]{background:var(--navy);color:#fff}
.lf-close .lf-in{background:#fff}
.lf-close .lf-hrs{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:0}
.lf-close .lf-hrs li{flex-direction:column;justify-content:flex-start;gap:2px;padding:12px;border-radius:14px;background:#fff;font-size:15px}
.lf-close .lf-hrs li.today{background:var(--navy);color:#fff}
.lf-close .lf-hrs li.today em{align-self:flex-start}
@media (max-width:1000px){.lf-close .lf-cbf{grid-template-columns:1fr 1fr}.lf-close .lf-hrs{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.lf-close__acts{grid-template-columns:1fr}.lf-close__a+.lf-close__a{border-left:0;border-top:1px solid var(--line)}.lf-close__a{padding-left:0;padding-right:0}.lf-close .lf-cbf{grid-template-columns:1fr}.lf-close .lf-hrs{grid-template-columns:1fr 1fr}.lf-close__num{font-size:clamp(40px,12vw,64px)}}

/* footer sign-off: the name, very large, rising into place as the page ends */
.sfoot{overflow:hidden}
.ft-giant{margin:clamp(24px,3vw,40px) 0 -.18em;text-align:center;font-size:clamp(64px,15.5vw,250px);line-height:1;letter-spacing:-.05em;font-weight:500;color:rgba(255,255,255,.07);white-space:nowrap;user-select:none}
.ft-giant b{font-weight:800;color:rgba(247,207,74,.16)}
.mo .ft-giant{transform:translateY(30%);opacity:0;transition:transform 1.4s cubic-bezier(.16,1,.3,1),opacity 1.2s}
.mo .ft-giant.mo-in{transform:none;opacity:1}
/* promise band v2: quieter and more modern. White strip with hairline dividers, light outline icons, medium-weight
   titles; the arrow only appears on hover */
.lf-band{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.lf-band li+li{border-left:1px solid var(--line)}
.lf-band a{gap:14px;padding:26px 28px}
.lf-band a:hover{background:var(--off)}
.lf-band__ic{width:44px;height:44px;background:var(--mist)}
.lf-band__ic svg{width:22px;height:22px;stroke:var(--navy)}
.lf-band a:hover .lf-band__ic{transform:none;background:var(--navy)}
.lf-band a:hover .lf-band__ic svg{stroke:#fff}
.lf-band__ic,.lf-band__ic svg{transition:background .3s,stroke .3s}
.lf-band b{font-size:17px;font-weight:600;color:var(--ink)}
.lf-band small{font-size:15px;color:var(--grey);white-space:nowrap}
.lf-band i{font-size:18px;color:var(--navy);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.lf-band a:hover i{opacity:1;transform:none}
@media (max-width:900px){.lf-band li+li{border-top:1px solid var(--line)}.lf-band i{opacity:1;transform:none}.lf-band small{white-space:normal}}
/* closing phone icon: solid fill, not an outline */
.lf-close__num i svg{fill:var(--deep);stroke:none}
/* part exchange: dark navy section (no white gap between the navy finance section and the team photo); the banner is
   a slightly lighter glass panel on it */
.lf-px2{background:#0c1233;border-top:0}
.lf-px3{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);box-shadow:none}
/* part exchange call to action (the value still appears as you type; the button confirms it and catches mistakes) */
.lf-px3__go{width:100%;margin-top:6px;min-height:58px}
.lf-px3__ping{animation:moFade .45s cubic-bezier(.16,1,.3,1) both}

/* every toggle on the page slides the same way: one speed, one easing (the hero's toggles included) */
.mo .lf-cbf__when .mo-pill{background:var(--navy);box-shadow:0 2px 6px rgba(18,26,69,.2)}
.mo .lf-cbf__when button[aria-pressed=true]{background:transparent!important;box-shadow:none}
.mo .lf-cbf__when button{position:relative;transition:color .35s cubic-bezier(.16,1,.3,1)}
.mo .lf-close .lf-cbf__when button[aria-pressed=true]{color:#fff}
.mo .mo-pill{transition:transform .5s cubic-bezier(.16,1,.3,1),width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1),opacity .2s}
.seg .thumb,.tabs45 .thumb{transition:left .5s cubic-bezier(.16,1,.3,1),width .5s cubic-bezier(.16,1,.3,1),top .5s cubic-bezier(.16,1,.3,1)!important}
.seg button,.tabs45 button{transition:color .35s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){.seg .thumb,.tabs45 .thumb{transition:none!important}}

/* ===================== PHONES (≤760px): refined layout ===================== */
@media (max-width:760px){
  .lf-sec{padding:48px 0}
  /* card stacks (lf-mobile.js) for Hot deals and budget cards */
  .lf-stack{display:flex!important;gap:16px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 -16px;padding:6px 16px 18px;overscroll-behavior-x:contain}
  .lf-stack::-webkit-scrollbar{display:none}
  .lf-stack>li{flex:0 0 calc(100% - 52px);scroll-snap-align:start;scroll-margin-left:16px;position:relative;transform-origin:50% 60%;animation:none!important;will-change:transform}
  .lf-stack>li .lf-deal{box-shadow:0 18px 36px -22px rgba(18,26,69,.45)}
  .lf-stackn{margin:4px 0 0;font-size:15px;color:var(--grey);text-align:center}
  .lf-stackn b{color:var(--ink);font-size:17px}
  .lf-stackn span{font-size:14px}
  /* filters and budget tabs: one row you can slide sideways */
  .lf-dfil,.lf-brow .lf-btabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:2px 16px}
  .lf-dfil::-webkit-scrollbar,.lf-brow .lf-btabs::-webkit-scrollbar{display:none}
  .lf-dfil button,.lf-brow .lf-btabs [role=tab]{flex:none}
  .lf-brow{flex-direction:column;align-items:flex-start;gap:8px}
  .lf-bsum{padding:16px}
  /* shop by type: three across */
  .lf-shelf,[data-shelf]{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
  .lf-dc{padding:6px 2px 10px}
  .lf-dc__slot{margin-bottom:8px}
  .lf-dc b{font-size:15px}
  .lf-dc__pm{font-size:12.5px;line-height:1.3}
  .lf-dc small{font-size:12px}
  /* finance: the result sits right under the monthly amount, so you see the cars change as you tap + / − */
  .lf-afford__in{display:flex!important;flex-direction:column;gap:0}
  .lf-afford__q,.lf-afford__a{display:contents}
  .lf-afford__q>h2{order:1}.lf-afford__q>.lf-sub{order:2}.lf-afford__q>.lf-q{order:3}
  .lf-afford__a>.lf-sum{order:4;margin:8px auto 14px}
  .lf-afford__a>.lf-cdeck{order:5;margin:0 auto}
  .lf-afford__a>.lf-cdeck__ctrl{order:6;margin:14px auto 26px}
  .lf-afford__q>.lf-q2{order:7}.lf-afford__q>.lf-rep{order:8}.lf-afford__q>.lf-fine{order:9}.lf-afford__q>.lf-check{order:10}
  .lf-sum{justify-content:center;text-align:center}.lf-sum p:first-child{text-align:center}
  .lf-step{justify-content:center}
  .lf-afford .lf-q .lf-q__l{text-align:center}
  /* reviews: score in one compact row */
  .lf-tp__panel{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px}
  .lf-tp__panel>.lf-tp__logo,.lf-tp__panel>h2,.lf-tp__panel>.lf-tp__all{grid-column:1 / -1}
  .lf-tp__big{margin-top:14px;grid-row:span 2}.lf-tp__big b{font-size:60px}.lf-tp__big span{display:none}
  .lf-tp__panel .lf-tp__stars{margin-top:14px}.lf-tp__panel .lf-tp__stars i{width:28px;height:28px}
  .lf-tp__count{margin-top:4px;font-size:14px}
  .lf-tp__all{margin-top:18px;width:100%}
  .lf-tp__in{gap:24px}
  .lf-tp__q{padding:22px}.lf-tp__q blockquote{font-size:17px}
  /* promise band: tighter rows */
  .lf-band a,.lf-band li:first-child a,.lf-band li:last-child a{padding:16px 0}
  /* family firm */
  .lf-story3__in{gap:32px;padding-top:48px;padding-bottom:36px}
  /* closing */
  .lf-close{padding:48px 0 40px}
  .lf-close__a{min-height:72px}
  /* footer */
  .ft-giant{font-size:19vw}
}
@media (max-width:760px){
  .lf-brow{align-items:stretch}
  .lf-brow .lf-btabs{width:auto;max-width:none;min-width:0}
  .lf-shelf,[data-shelf]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .lf-dc{min-width:0}.lf-dc__slot{max-width:100%}
  .lf-dc__pm,.lf-dc small{overflow-wrap:anywhere}
}
@media (max-width:760px){.lf-brow .lf-btabs{width:calc(100% + 32px)!important;max-width:calc(100% + 32px)!important;box-sizing:border-box;align-self:auto}}

/* ===================== PHONES v2: refinement pass ===================== */
.sticky.lf-hide{transform:translateY(110%)!important}
@media (max-width:760px){
  /* section rhythm: one consistent gutter and spacing */
  .lf .lf-fine{font-size:13px;line-height:1.5;color:#8a90a6}
  .lf-sec h2,.lf-px3 h2,.lf-story3 h2{font-size:30px;line-height:1.12}

  /* shop by type: a calmer sentence, tidy shelf labels */
  .lf-types .lf-sent{font-size:24px;line-height:1.45}
  .lf-dc__av{display:none}
  .lf-dc b{font-size:14.5px}
  .lf-dc__pm{font-size:12px;white-space:nowrap;letter-spacing:-.01em}

  /* budget: "Under" sits inside the sliding row as its first item */
  .lf-brow{flex-direction:row!important;align-items:center!important;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 18px;padding:2px 16px;gap:10px}
  .lf-brow::-webkit-scrollbar{display:none}
  .lf-brow__l{flex:none;font-size:15px}
  .lf-brow .lf-btabs{width:auto!important;max-width:none!important;overflow:visible;margin:0;padding:0;flex:none}

  /* finance: equal-width choice buttons, a card tall enough for its button */
  .lf-afford .lf-seg2{display:grid!important;grid-template-columns:repeat(4,1fr);width:100%}
  .lf-afford .lf-seg2 button{padding:0 4px;font-size:15px}
  .lf-afford .lf-row,.lf-afford .lf-q2>div{grid-template-columns:1fr!important}
  .lf-cdeck{width:min(330px,86vw)!important;aspect-ratio:330/500!important}
  .lf-cc img{aspect-ratio:16/11!important}
  .lf-afford__q>.lf-q .lf-q__l{text-align:center}

  /* part exchange: nothing wider than the screen */
  .lf-px3{padding:24px 18px;border-radius:22px}
  .lf-px3>*{min-width:0}
  .lf-px3__fld label{white-space:normal}

  /* family firm: the team photo shown as a picture on top, story and a vertical timeline below */
  .lf-story3{display:block;min-height:0}
  .lf-story3__pic{position:relative;height:auto;aspect-ratio:16/10}
  .lf-story3__pic img{object-position:55% 60%}
  .lf-story3__pic::after{background:linear-gradient(0deg,var(--deep) 0%,rgba(27,36,89,0) 45%)}
  .lf-story3__in{padding-top:8px;padding-bottom:40px;gap:28px}
  .lf-tl{grid-template-columns:1fr;row-gap:20px;padding:0 0 0 30px}
  .lf-tl::before,.lf-tl::after{display:block;left:7px;top:6px;bottom:6px;right:auto;width:3px;height:auto}
  .lf-tl::after{height:calc(var(--p) * (100% - 12px));bottom:auto}
  .lf-tl li::before{left:-30px;top:4px}
  .lf-tl li{flex-direction:row;align-items:baseline;gap:12px;transform:translateX(6px)}
  .lf-tl li.on{transform:none}
  .lf-tl b{flex:none;min-width:78px;font-size:24px}
  .lf-tl span{font-size:15px}

  /* reviews: the score row sized to its content (no stray glint band) */
  .lf-tp__panel .lf-tp__stars{justify-self:start;width:max-content}
  .lf-tp__panel{column-gap:16px}
}
.lf-px3__f{grid-template-columns:minmax(0,1fr)!important}
.lf-px3 .lf-plate,.lf-px3 .lf-in{min-width:0;width:100%}
.lf-px3 .lf-plate input{min-width:0;width:100%}

/* timeline v2: a glowing dot travels the line as it fills; each stop pulses as it is reached */
.lf-tl__head{position:absolute!important;z-index:2;left:calc(var(--p) * 100%);top:-7px;width:17px;height:17px;margin-left:-8px;border-radius:50%;
  background:var(--yellow);box-shadow:0 0 0 6px rgba(247,207,74,.22),0 0 22px 4px rgba(247,207,74,.55);opacity:calc(min(1, var(--p) * 20));transform:none!important;pointer-events:none}
.lf-tl__head::before{content:none!important}
.lf-tl li.on:not(.lf-tl__head)::before{animation:tlPing .7s cubic-bezier(.16,1,.3,1)}
@keyframes tlPing{0%{box-shadow:0 0 0 0 rgba(247,207,74,.7)}100%{box-shadow:0 0 0 14px rgba(247,207,74,0)}}
.lf-tl li:not(.lf-tl__head){transition:opacity .6s,transform .7s cubic-bezier(.16,1,.3,1)}
@media (max-width:760px){
  .lf-tl{padding-top:6px;padding-bottom:6px}
  .lf-tl__head{left:7px;top:calc(6px + var(--p) * (100% - 24px));margin-left:-7px;margin-top:-7px}
  .lf-tl li:not(.lf-tl__head){opacity:.3;transform:translateX(14px)}
  .lf-tl li.on:not(.lf-tl__head){opacity:1;transform:none}
  .lf-tl{row-gap:28px}
}
@media (prefers-reduced-motion:reduce){.lf-tl li.on::before{animation:none}}

/* finance on phones: one alignment, everything on the left edge like the headline; the pile spans the width */
@media (max-width:760px){
  .lf-afford .lf-q .lf-q__l,.lf-afford__q>.lf-q .lf-q__l{text-align:left}
  .lf-step{justify-content:space-between!important;width:100%}
  .lf-step output{flex:1;text-align:center}
  .lf-sum{justify-content:flex-start!important;text-align:left!important;width:100%!important;margin:22px 0 16px!important;align-items:baseline}
  .lf-sum p:first-child{text-align:left!important}
  .lf-afford__a>.lf-cdeck{width:calc(100% - 20px)!important;margin:0 auto 0 4px!important}
  .lf-afford__a>.lf-cdeck__ctrl{width:100%!important;justify-content:flex-start!important;margin:16px 0 26px!important}
}
.lf-tl li.lf-tl__head{opacity:calc(min(1, var(--p) * 20))!important;display:block}
@media (max-width:760px){.lf-afford__a>.lf-cdeck{width:calc(100% - 16px)!important;margin:0 0 0 6px!important}}
/* phones: card row with a clear peek of the next card (about a fifth of it shows) */
@media (max-width:760px){
  .lf-stack{gap:12px;scroll-padding-left:16px}
  .lf-stack>li{flex:0 0 calc(100% - 72px)}
  .lf-stack>li:last-child{margin-right:40px}
}
/* finance on phones: every block spans the full content width; the arrows sit centred under the (centred) card pile */
@media (max-width:760px){
  .lf-afford__q>*,.lf-afford__a>.lf-sum{width:100%!important;max-width:none!important;align-self:stretch}
  .lf-afford .lf-q2,.lf-afford .lf-q2>div,.lf-afford .lf-rep{width:100%;max-width:none}
  .lf-afford .lf-seg2{width:100%!important;max-width:none}
  .lf-afford .lf-seg2 button{min-height:46px}
  .lf-afford__a>.lf-cdeck__ctrl{justify-content:center!important;margin:16px auto 26px!important}
}
/* reviews on phones: a compact card. Short wide photo, smaller title and quote, tighter padding */
@media (max-width:760px){
  .lf-tp__ph{aspect-ratio:16/9!important}
  .lf-tp__ph img{object-position:center 30%}
  .lf-tp__car{left:12px;bottom:12px;padding:6px 12px;font-size:13.5px}
  .lf-tp__q{padding:18px 18px 20px;gap:8px}
  .lf-tp__q::before{font-size:90px;right:16px;top:-4px}
  .lf-tp__q h3{font-size:19px}
  .lf-tp__q blockquote{font-size:15.5px;line-height:1.55}
  .lf-tp__who{padding-top:12px;font-size:15px}
  .lf-tp__who small{font-size:13.5px}
  .lf-tp__stars--s i{width:22px;height:22px}.lf-tp__stars--s svg{width:15px;height:15px}
  .lf-tp__card{border-radius:22px}
  .lf-tp h2{font-size:26px}
  .lf-tp__big b{font-size:52px}
  .lf-tp__all{min-height:50px}
}

/* ===================== PHONES v3: readability floor for an older audience =====================
   nothing below 13px, body copy 15px+, every tap target at least 44px */
@media (max-width:760px){
  /* shop by type shelf */
  .lf-dc__pm{font-size:13px}
  .lf-dc small{font-size:13px}
  /* car cards */
  .lf-deal__save-tag{font-size:13.5px}
  .lf-deal__full span,.lf-deal__full s{font-size:14px}
  .lf-deal__ver{font-size:14.5px}
  .lf-deal__facts li{font-size:15px}
  .lf-gal__nav{width:44px!important;height:44px!important;margin-top:-22px!important}
  .lf-deal__save{width:44px!important;height:44px!important}
  /* finance */
  .lf-afford .lf-rep dt{font-size:14px}
  .lf-cc__b small{font-size:13px}
  .lf-cc__ver{font-size:14px}
  /* reviews */
  .lf-tp__who small,.lf-tp__car{font-size:14px}
  /* fine print stays small but readable */
  .lf .lf-fine,.lf-hrs__tbc{font-size:13px}
  .ft-legal a,.ft-legal p{font-size:14px}
  .ft-legal a{display:inline-flex;align-items:center;min-height:44px}
  .ft-col a{min-height:44px;display:flex;align-items:center}
  /* the bottom bar */
  .sticky .t span{font-size:14.5px}
  .sticky .t small{font-size:13px}
  /* hero: only the very small labels are raised, layout untouched */
  .hero .pop>span,.hero [class*=popular] small,.hero small{font-size:12.5px}
  .hero .fine{font-size:12.5px}
  .util .tel,.util .tp{min-height:32px;display:inline-flex;align-items:center}
}
.lf-dc__pm b{font-size:inherit;font-weight:600}
@media (max-width:760px){
  .lf-dc__from{display:block;font-size:12.5px;opacity:.8}
  .lf-dc__pm{font-size:14px;line-height:1.25;white-space:normal}
  .lf-dc__pm b{color:#fff}
}

/* shop by type on phones v2: two per row, even spacing, one-line price */
@media (max-width:760px){
  .lf-types{padding-bottom:36px}
  .lf-shelf,[data-shelf]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important;row-gap:18px!important}
  .lf-shelf-w{padding-left:16px;padding-right:16px}
  .lf-dc{padding:8px 8px 12px;gap:2px}
  .lf-dc__slot{max-width:100%;margin-bottom:10px}
  .lf-dc b{font-size:17px}
  .lf-dc__from{display:inline;font-size:inherit;opacity:1}
  .lf-dc__pm{font-size:14.5px;white-space:nowrap}
  .lf-dc small{font-size:14px}
}
@media (max-width:760px){
  .lf-shelf .lf-dc__slot,[data-shelf] .lf-dc__slot{max-width:none!important;width:100%}
  .lf-shelf,[data-shelf]{row-gap:10px!important;padding:44px 12px 16px!important}
  .lf-dc{padding:6px 6px 10px}
}
@media (max-width:760px){.lf-types .lf-sent{font-size:27px;line-height:1.42}}
@media (max-width:900px){.lf-band li+li{border-left:0!important;border-top:1px solid var(--line)}}
/* form boxes: no yellow focus ring; the box border turns navy with a soft navy halo instead */
.lf .lf-in:focus,.lf .lf-in:focus-visible,.lf input:focus,.lf input:focus-visible{outline:none!important;border-color:var(--navy)!important;box-shadow:0 0 0 3px rgba(41,54,128,.16)!important}
.lf-px2 .lf-in:focus,.lf-px2 .lf-in:focus-visible{border-color:#fff!important;box-shadow:0 0 0 3px rgba(255,255,255,.18)!important}
/* full-width arrow buttons: words centred, circle at the right end (lf-mobile.js adds .lf-wide) */
.btn.lf-wide{position:relative;padding-left:56px!important;padding-right:56px!important;justify-content:center}
.btn.lf-wide .go{position:absolute;right:8px;top:50%;margin-top:-18px}
.btn.sm.lf-wide .go{right:6px;margin-top:-15px}
/* finance on phones: all three controls first (monthly, deposit, pay over), then the result and the cards */
@media (max-width:760px){
  .lf-afford__q>.lf-q2{order:4;margin-top:6px}
  .lf-afford__a>.lf-sum{order:5}
  .lf-afford__a>.lf-cdeck{order:6}
  .lf-afford__a>.lf-cdeck__ctrl{order:7}
  .lf-afford__q>.lf-rep{order:8}.lf-afford__q>.lf-fine{order:9}.lf-afford__q>.lf-check{order:10}
}
@media (max-width:760px){.lf-types .lf-sent{font-size:29px;line-height:1.62}}

/* ===== timeline v3: refined. 2px track, gradient fill, ring stops, a small crisp travelling dot ===== */
.lf-tl::before{height:2px;background:rgba(255,255,255,.14)}
.lf-tl::after{height:2px;background:linear-gradient(90deg,rgba(247,207,74,.25),var(--yellow));box-shadow:0 0 10px rgba(247,207,74,.45)}
.lf-tl li:not(.lf-tl__head)::before{width:14px;height:14px;top:-28px;border:2px solid rgba(255,255,255,.35);background:var(--deep);box-shadow:none;
  transition:border-color .4s,background .4s,box-shadow .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.lf-tl li.on:not(.lf-tl__head)::before{border-color:var(--yellow);background:radial-gradient(circle,var(--yellow) 0 3.5px,var(--deep) 4px);transform:none;box-shadow:0 0 0 5px rgba(247,207,74,.12)}
.lf-tl li.lf-tl__head{width:8px;height:8px;margin-left:-4px;top:-3px;background:#fff;box-shadow:0 0 0 3px rgba(247,207,74,.5),0 0 14px 3px rgba(247,207,74,.55);
  opacity:calc(min(1, var(--p) * 20) * min(1, (1 - var(--p)) * 25))!important}
@keyframes tlPing{0%{box-shadow:0 0 0 0 rgba(247,207,74,.55)}100%{box-shadow:0 0 0 12px rgba(247,207,74,0)}}
.lf-tl li.on:not(.lf-tl__head)::before{animation:tlPing .8s cubic-bezier(.16,1,.3,1)}
.lf-tl b{letter-spacing:-.02em}
@media (max-width:760px){
  .lf-tl{padding-left:28px}
  .lf-tl::before,.lf-tl::after{left:6px;width:2px;height:auto}
  .lf-tl::after{height:calc(var(--p) * (100% - 12px));background:linear-gradient(180deg,rgba(247,207,74,.25),var(--yellow))}
  .lf-tl li:not(.lf-tl__head)::before{left:-28px;top:5px}
  .lf-tl li.lf-tl__head{left:7px;margin-left:-4px;margin-top:-4px;top:calc(6px + var(--p) * (100% - 24px))}
  .lf-tl b{font-size:22px;min-width:74px}
}
/* promises are statements, not links: no arrow, no hover state */
.lf-band__it{display:flex;align-items:center;gap:14px;height:100%;padding:26px 28px;color:var(--ink)}
.lf-band li:first-child .lf-band__it{padding-left:0}.lf-band li:last-child .lf-band__it{padding-right:0}
@media (max-width:900px){.lf-band__it,.lf-band li:first-child .lf-band__it,.lf-band li:last-child .lf-band__it{padding:16px 0}}

/* promise band v3: the hero's USP style. Glass cards on navy, round outlined icon with a yellow accent, white title
   and soft subline. Sits straight under the team story on the same navy. */
.lf-band{background:var(--deep);border-bottom:0;padding:0 0 clamp(40px,5vw,64px)}
.lf-band__in{gap:14px}
.lf-band li+li{border:0!important}
.lf-band__it,.lf-band li:first-child .lf-band__it,.lf-band li:last-child .lf-band__it{padding:16px 20px;gap:14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff}
.lf-band__ic{width:44px;height:44px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.lf-band__ic svg{width:22px;height:22px;stroke:#fff}
.lf-band__ic svg .a{stroke:var(--yellow)}
.lf-band b{color:#fff;font-size:17px;font-weight:600}
.lf-band small{color:rgba(255,255,255,.7);font-size:15px;white-space:normal}
@media (max-width:900px){
  .lf-band__in{gap:10px}
  .lf-band__it,.lf-band li:first-child .lf-band__it,.lf-band li:last-child .lf-band__it{padding:14px 16px}
}
/* finance card pile on phones: shorter cards (wide photo, no empty band above the button) */
@media (max-width:760px){.lf-cdeck{aspect-ratio:330/440!important}.lf-cc img{aspect-ratio:16/9!important}.lf-cc__b{padding:14px 16px 16px!important;gap:2px!important}.lf-cc__cta{margin-top:12px!important}.lf-cc h3{font-size:20px!important}.lf-cc__pm b{font-size:24px!important}}
/* reviews on phones: the Trustpilot header is centred (logo, headline, score with stars, button) */
@media (max-width:760px){
  .lf-tp__panel{display:flex!important;flex-direction:column;align-items:center;text-align:center}
  .lf-tp__panel h2{max-width:none}
  .lf-tp__score-row{display:flex}
  .lf-tp__panel>.lf-tp__big{margin-top:16px;justify-content:center}
  .lf-tp__panel>.lf-tp__big span{display:inline}
  .lf-tp__panel>.lf-tp__stars{justify-self:auto;margin-top:8px}
  .lf-tp__panel>.lf-tp__count{margin-top:8px}
  .lf-tp__panel>.lf-tp__all{width:100%}
}
@media (max-width:760px){.lf-story3 h2{max-width:none}}
/* finance on phones v3: controls, then the finance figures and hire purchase line, then the result and cards,
   then the Free Finance Check */
@media (max-width:760px){
  .lf-afford__q>.lf-q2{order:4}
  .lf-afford__q>.lf-rep{order:5;margin-top:18px}
  .lf-afford__q>.lf-fine{order:6}
  .lf-afford__a>.lf-sum{order:7}
  .lf-afford__a>.lf-cdeck{order:8}
  .lf-afford__a>.lf-cdeck__ctrl{order:9}
  .lf-afford__q>.lf-check{order:10}
}
/* card pile height follows the content (lf.js sets --cch from the tallest card) */
.lf-cdeck[style*="--cch"]{aspect-ratio:auto!important;height:var(--cch)}
.lf-cdeck[style*="--cch"] .lf-cc{bottom:auto;height:var(--cch)}
.lf-cc__cta{margin-top:14px!important}
/* cards share one height; any spare room sits above the button (not as an empty band under it) */
.lf-cdeck[style*="--cch"] .lf-cc__cta{margin-top:auto!important}
.lf-cdeck[style*="--cch"] .lf-cc__b{padding-bottom:16px}
.lf-cdeck[style*="--cch"] .lf-cc__pm{margin-bottom:12px}
/* closing: bigger phone icon circle */
.lf-close__num i{width:.78em;height:.78em;margin-left:.14em}
.lf-close__num i svg{width:50%;height:50%}
/* reviews on phones: make "there's more" obvious. The next two cards peek out behind the current one, the arrows
   come back either side of the count, and a hint says you can swipe */
@media (max-width:760px){
  .lf-tp__stage{position:relative;padding-right:14px}
  .lf-tp__card{position:relative;z-index:2;box-shadow:9px 9px 0 -1px rgba(255,255,255,.28),18px 18px 0 -2px rgba(255,255,255,.12),0 30px 60px -30px rgba(0,0,0,.7)}
  .lf-tp__nav{margin-top:30px;gap:14px}
  .lf-tp__arr{display:grid!important;width:48px;height:48px}
  .lf-tp__n::after{content:"Swipe for more";display:block;margin-top:2px;font-size:13px;color:rgba(255,255,255,.55);white-space:nowrap}
}
/* family firm on phones: the photo melts into the navy below (solid at the very bottom, longer fade, no 1px seam) */
@media (max-width:760px){
  .lf-story3__pic{margin-bottom:-2px}
  .lf-story3__pic::after{background:linear-gradient(0deg,var(--deep) 0%,var(--deep) 8%,rgba(27,36,89,.85) 22%,rgba(27,36,89,.35) 45%,rgba(27,36,89,0) 65%)!important}
}
/* family firm on phones v2: the photo itself fades to transparent (no edge can show) and the story text moves up
   over the faded part */
@media (max-width:760px){
  .lf-story3__pic{margin-bottom:0}
  .lf-story3__pic img{-webkit-mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.5) 72%,transparent 96%);mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.5) 72%,transparent 96%)}
  .lf-story3__pic::after{content:none!important}
  .lf-story3__in{position:relative;z-index:2;margin-top:-64px}
}
/* footer sign-off: sized to fit the screen exactly (the words are ~6.5x as wide as the font size), never cropped */
.ft-giant{font-size:min(190px,calc((100vw - 40px) / 6.6))!important;padding:0 16px;margin-bottom:-.16em}
/* reviews on phones: score header, then the review, then "Read all reviews" underneath */
@media (max-width:760px){
  .lf-tp__in{display:flex!important;flex-direction:column;gap:0!important}
  .lf-tp__panel{display:contents!important}
  .lf-tp__panel>*{align-self:center;text-align:center}
  .lf-tp__stage{order:1;margin-top:26px;align-self:stretch}
  .lf-tp__panel>.lf-tp__all{order:2;align-self:stretch;margin-top:26px}
}
/* no hard edges between sections of similar colour: each one blends from the colour of the section above */
.lf-bud2{background:linear-gradient(180deg,#fff 0,var(--off) 220px)}
.lf-px2{background:linear-gradient(180deg,var(--night) 0,#0c1233 260px)}
.lf-close{background:var(--off)}
/* phones: room inside the swipe row for the whole card shadow (no cut-off edge under the cards) */
@media (max-width:760px){.lf-stack{padding-top:10px!important;padding-bottom:44px!important;margin-bottom:-26px!important}.lf-stackn{position:relative;z-index:1}}
@media (max-width:760px){.lf-afford .lf-sum{align-items:center!important}.lf-afford .lf-sum__n{margin-left:auto}}
@media (max-width:760px){.lf-afford .lf-sum{flex-wrap:wrap;column-gap:10px}.lf-afford .lf-sum__big{font-size:44px}.lf-afford .lf-sum__n{font-size:13.5px;padding:6px 11px;white-space:nowrap}}
@media (max-width:760px){.lf-afford .lf-sum__big{font-size:42px}.lf-afford .lf-sum__n{font-size:13px;padding:6px 10px}}
/* dark sections overlap by a pixel so the page's white never shows through as a hairline between them */
.lf-px2,.lf-story3,.lf-band,.lf-tp{position:relative;margin-top:-1px}
.lf-band{z-index:1}
/* timeline on phones: more room between the stops */
@media (max-width:760px){
  .lf-tl{row-gap:44px!important;padding-top:10px;padding-bottom:10px}
  .lf-tl span{font-size:16px;line-height:1.45}
  .lf-tl b{font-size:24px}
  .lf-story3__in{gap:36px}
}
/* phones: section intro paragraphs one size, a little smaller */
@media (max-width:760px){
  .lf .lf-sub,.lf-close__sub,.lf-story3 .lf-sub,.lf-px3 .lf-sub{font-size:16px!important;line-height:1.55!important}
}
/* Hot deals "See all" link: in the header on desktop, centred under the cards on phones */
.lf-deals__more-m{display:none}
@media (max-width:760px){
  #deals .lf-h .lf-link{display:none}
  .lf-deals__more-m{display:flex;justify-content:center;margin-top:10px}
}
/* the bottom "Show cars" bar is removed everywhere */
.sticky{display:none!important}
/* phones: the small-print notes under sections are centred */
@media (max-width:760px){.lf .lf-fine{text-align:center}}
/* footer sign-off on phones: "Hilton" over "Garage", each word filling the width almost to the edges */
@media (max-width:760px){
  .ft-giant{font-size:calc((100vw - 24px) / 3.3)!important;line-height:.9;padding:0 12px;text-align:left;white-space:normal;margin-bottom:-.12em}
  .ft-giant b{display:block}
}
@media (max-width:760px){.ft-giant{font-size:calc((100vw - 24px) / 3.55)!important}}

/* ===================== PHONES: section rhythm ===================== */
@media (max-width:760px){
  .lf-sec{padding-top:64px!important;padding-bottom:64px!important}
  .lf-types{padding-top:56px!important;padding-bottom:56px!important}
  .lf-px2{padding-top:56px!important;padding-bottom:64px!important}
  .lf-story3__in{padding-bottom:48px!important}
  .lf-band{padding-bottom:64px!important}
  .lf-tp{padding-top:72px!important;padding-bottom:72px!important}
  .lf-close{padding-top:72px!important;padding-bottom:64px!important}
  .lf-close__acts{margin-top:36px}
  .sfoot{padding-top:56px!important}
  .sfoot .ft-top{gap:28px}
  .sfoot .ft-rep{margin-top:32px}
  .sfoot .ft-legal{margin-top:24px}
  .lf .lf-fine{margin-top:20px}
  .lf-h,.lf-tp__panel,.lf-talk2__head{margin-bottom:28px}
  /* Hot deals "See all" under the cards: a full, easy-to-tap button */
  .lf-deals__more-m{margin-top:16px}
  .lf-deals__more-m .lf-link{width:100%;min-height:56px;justify-content:center;gap:12px;font-size:17px;padding:0 12px 0 24px;position:relative}
  .lf-deals__more-m .lf-link>span[aria-hidden]{position:absolute;right:10px}
}
/* finance reveal: the card pile rises in with a slight tilt that settles */
.mo [data-mo=deck]{opacity:0;transform:translateY(48px) rotate(-3deg) scale(.95);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.mo [data-mo=deck].mo-in{opacity:1;transform:none}
/* the − £x + control: buttons slide in from either side as it appears */
.mo .lf-afford .lf-step[data-mo] button{transition:transform .9s cubic-bezier(.16,1,.3,1)}
.mo .lf-afford .lf-step[data-mo]:not(.mo-in) button:first-child{transform:translateX(-16px)}
.mo .lf-afford .lf-step[data-mo]:not(.mo-in) button:last-child{transform:translateX(16px)}
/* car card heart: smaller and lighter. A 34px soft glass circle with a 17px heart; the invisible tap area stays 44px */
.lf-deal__save{width:34px!important;height:34px!important;min-height:0!important;top:10px!important;right:10px!important;background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(18,26,69,.18)!important}
.lf-deal__save svg{width:17px!important;height:17px!important}
.lf-deal__save::before{content:"";position:absolute;inset:-5px;border-radius:50%}
@media (hover:hover){.lf-deal__save:hover{transform:scale(1.1)}}
/* heart hover, calmer: no grow, no beat, no extra shadow; the outline just turns red and the circle goes solid white */
@media (hover:hover){
  .lf-deal__save:hover{transform:none!important;background:#fff!important;box-shadow:0 2px 8px rgba(18,26,69,.18)!important}
  .lf-deal__save:hover svg{animation:none!important;fill:none!important;stroke:#e5484d!important;transform:none!important}
  .lf-deal__save[aria-pressed=true]:hover svg{fill:#e5484d!important}
}
.lf-deal__save svg{transition:stroke .25s ease,fill .25s ease!important}
.lf-deal__save:active{transform:scale(.94)!important}
/* review card text, calmer on desktop/tablet: in line with the rest of the page */
@media (min-width:761px){
  .lf-tp__q{gap:10px;padding:clamp(24px,2.6vw,36px)}
  .lf-tp__q h3{font-size:22px}
  .lf-tp__q blockquote{font-size:17px;line-height:1.6}
  .lf-tp__who{font-size:15.5px;padding-top:14px}
  .lf-tp__who small{font-size:14px}
  .lf-tp__q::before{font-size:110px;right:24px}
  .lf-tp__stars--s i{width:24px;height:24px}.lf-tp__stars--s svg{width:16px;height:16px}
}
/* car card key facts: one quiet line, no icons ("45,700 miles · Diesel · Automatic") */
.lf-deal__facts{display:flex!important;flex-wrap:wrap;gap:0!important;align-items:center;font-size:15px;color:var(--grey)}
.lf-deal__facts li{display:inline!important;gap:0!important;font-size:15px!important;color:var(--grey)}
.lf-deal__facts li svg{display:none!important}
.lf-deal__facts li+li::before{content:"·";margin:0 7px;color:#b3b8c7}
/* facts line: dots sit after each item (a wrapped line never starts with a dot), slightly smaller so it fits on one line */
.lf-deal__facts{font-size:14px;row-gap:2px!important}
.lf-deal__facts li{font-size:14px!important;white-space:nowrap}
.lf-deal__facts li+li::before{content:none!important}
.lf-deal__facts li:not(:last-child)::after{content:"·";margin:0 6px;color:#b3b8c7}