/* Car stage + swinging price tag for heroes 4 and 5 (adapted from hero 2's showroom stage). */
.spot{position:absolute;left:50%;top:-140px;width:120%;height:780px;transform:translateX(-50%);pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0,rgba(255,255,255,0) 160deg,rgba(255,255,255,.10) 172deg,rgba(255,255,255,.16) 180deg,rgba(255,255,255,.10) 188deg,rgba(255,255,255,0) 200deg);
  -webkit-mask:linear-gradient(180deg,#000 30%,transparent 92%);mask:linear-gradient(180deg,#000 30%,transparent 92%)}
.floor{position:absolute;left:-10%;right:-10%;bottom:20px;height:180px;border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(140,160,255,.32),rgba(80,100,220,.1) 55%,transparent 72%)}
/* The lane can reach left under a box (--under) and bleed right to the window edge (--bleed) */
.lane{--bleed:max(24px,calc((100vw - 1240px) / 2 + 24px));--under:0px;position:relative;
  margin:0 calc(-1 * var(--bleed)) 0 calc(-1 * var(--under));clip-path:inset(-260px 0 -260px 0)}
.lane .car{position:absolute;left:var(--under);bottom:-38px;width:calc(100% - var(--bleed) - var(--under));will-change:transform}
.lane .canvas{--cw:min(120%,760px);position:relative;width:var(--cw);margin-left:calc((100% - var(--cw)) / 2)}
.lane .canvas img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none}
.lane .sh{position:absolute;inset:0}
.lane .cb{position:relative;will-change:transform}
/* Part exchange: a big number plate floats on the empty stage and types what's in the reg box */
.bigplate{position:absolute;left:50%;bottom:24%;z-index:2;width:min(88%,440px);aspect-ratio:4.6/1;display:flex;align-items:stretch;container-type:size;
  background:linear-gradient(180deg,#ffd84d,var(--yellow) 60%,#f3c11c);border:3px solid #111;border-radius:12px;overflow:hidden;
  box-shadow:0 2px 0 rgba(255,255,255,.35) inset,0 30px 50px -18px rgba(0,0,0,.65);
  transform:translate(-50%,40px) rotateX(10deg) scale(.92);opacity:0;pointer-events:none;transition:opacity .45s ease,transform .7s cubic-bezier(.2,.9,.25,1.15)}
.bigplate.on{opacity:1;transform:translate(-50%,0) rotateX(8deg);animation:float 4.5s ease-in-out .7s infinite}
@keyframes float{50%{transform:translate(-50%,-8px) rotateX(8deg)}}
.still .bigplate.on{animation:none}
.bigplate .gb{flex:none;width:13%;background:#1442b8;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;font:700 16cqh/1 var(--font)}
.bigplate .gb svg{width:52%;height:auto}
.bigplate .txt{flex:1;display:flex;align-items:center;justify-content:center;font:700 62cqh/1 "Charles Wright",var(--font);letter-spacing:.05em;color:#111;padding-top:4cqh;white-space:pre}
.bigplate .txt.ph{color:rgba(17,17,17,.34)}
.bigplate .txt::after{content:"";width:.08em;height:.8em;margin-left:.06em;background:currentColor;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.bigplate-floor{position:absolute;left:50%;bottom:calc(24% - 34px);width:min(70%,360px);height:26px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(5,8,30,.55),transparent);opacity:0;transition:opacity .45s}
.bigplate.on + .bigplate-floor{opacity:1}
.rig{transition:transform .75s cubic-bezier(.5,-.25,.3,1.25)}
.rig.up{transform:translateY(calc(-100% - 260px))}
.lane .car.moving{filter:var(--mb)}

/* Tag on a cord, hung from the spotlight rig */
.rig{position:absolute;z-index:3;will-change:transform}
.tag{position:relative;transform-origin:50% -78px;will-change:transform;perspective:700px;transform-style:preserve-3d}
.tag .cord{position:absolute;z-index:2;left:50%;top:-78px;width:34px;height:96px;transform:translateX(-50%);pointer-events:none;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.flip{position:relative;transform-style:preserve-3d;will-change:transform}
.flip .t,.flip .back{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip .back{position:absolute;inset:0;transform:rotateY(180deg);background:linear-gradient(160deg,var(--royal),var(--deep));display:grid;place-items:center;
  clip-path:polygon(17% 0,83% 0,100% 11%,100% 100%,0 100%,0 11%);border-radius:16px}
.flip .back img{width:72%;height:auto}
/* One fixed size in every state (find, part exchange, finance), so the tag never changes shape as it twists:
   the bottom row is pinned to the foot, name and note are capped at two lines */
.tag .t{position:relative;width:224px;height:214px;display:flex;flex-direction:column;background:#fff;color:var(--ink);border-radius:16px;padding:30px 22px 20px;box-shadow:0 26px 44px -20px rgba(0,0,0,.65);
  clip-path:polygon(17% 0,83% 0,100% 11%,100% 100%,0 100%,0 11%)}
.tag .t::before,.flip .back::before{content:"";position:absolute;left:50%;top:9px;width:14px;height:14px;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle,#0b1033 0 3.2px,#eef0f4 3.6px 4.6px,#b9bfca 5.4px,#8e95a3 6.4px 7px,transparent 7.2px)}
.tag .kick{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);opacity:.8}
.tag .kick.over{color:#b4232a;opacity:1}
.tag .kick.good{color:#0a7a52;opacity:1}
.tag .name{overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:none;margin-top:5px;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.015em}
.tag .name.plate-f{align-self:flex-start;font:700 21px/1 "Charles Wright",var(--font);letter-spacing:.05em;background:var(--yellow);border:2px solid var(--ink);border-radius:6px;padding:5px 8px 3px;display:inline-block}
.tag .pm{display:flex;align-items:baseline;gap:5px;margin-top:10px}
.tag .pm small{font-size:13px;color:var(--grey)}
.tag .pm b{font-size:32px;font-weight:600;letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1}
.tag .pm b.good{color:#0a7a52}
.tag .pm span{font-size:13px;color:var(--grey)}
/* Text always keeps the card's 22px inner padding: rows wrap rather than run into the edge */
.tag .row{margin-top:auto!important;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:12px;border-top:1px dashed var(--line);padding-top:11px}
.tag .stock>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tag .stock{display:flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.35;color:var(--grey);min-width:0}
.tag .stock i{width:7px;height:7px;border-radius:50%;background:var(--tp);box-shadow:0 0 0 3px rgba(0,182,122,.18);flex:none}
/* same underline as the Free Finance Check link (.tl): 4px offset, 2px thick; yellow here (as hero 2) */
.tag .see{white-space:nowrap;font-size:13px;font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:4px;text-decoration-thickness:2px}
.tag .see:hover{text-decoration-color:var(--navy)}
.tag .see:empty{display:none}

/* Tabs: a sliding thumb under the active tab */
.tabs45{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:5px;border-radius:14px;background:var(--mist);isolation:isolate}
.tabs45 button{appearance:none;border:0;background:none;min-height:48px;border-radius:10px;font:600 14.5px/1.1 var(--font);color:var(--grey);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:color .25s;padding:0 8px}
.tabs45 button svg{width:18px;height:18px;flex:none;transition:transform .35s var(--ease)}
.tabs45 button:hover{color:var(--ink)}
.tabs45 button[aria-selected=true]{color:#fff}
.tabs45 button[aria-selected=true] svg{transform:rotate(-8deg) scale(1.1)}
.tabs45 .thumb{position:absolute;z-index:-1;top:5px;bottom:5px;border-radius:10px;background:var(--navy);box-shadow:0 3px 0 var(--deep),0 8px 16px -6px rgba(27,36,89,.5);
  transition:left .42s cubic-bezier(.3,1.35,.5,1),width .42s cubic-bezier(.3,1.35,.5,1)}

/* Panels: one at a time; the box eases to the new panel's height */
.panes{position:relative;transition:height .4s var(--ease)}
.pane{display:flex;flex-direction:column;gap:14px}
.pane[hidden]{display:none!important}
.pane.in-r{animation:paneR .42s var(--ease)}
.pane.in-l{animation:paneL .42s var(--ease)}
@keyframes paneR{from{opacity:0;transform:translateX(26px)}}
@keyframes paneL{from{opacity:0;transform:translateX(-26px)}}
.still .pane.in-r,.still .pane.in-l{animation:none}

/* Headline that rolls to each tab's question */
.qroll{display:block;position:relative;overflow:hidden;line-height:1.12em;padding-bottom:.06em;transition:height .45s var(--ease)}
.qroll>span{display:block;transition:transform .5s cubic-bezier(.2,.9,.25,1.1),opacity .35s}
.qroll>span.out{position:absolute;left:0;top:0;transform:translateY(-110%);opacity:0}
.qroll>span.pre{position:absolute;left:0;top:0;transform:translateY(110%);opacity:0;transition:none}
.qroll em{font-style:normal;position:relative;z-index:0;white-space:nowrap}
.qroll em::before{content:"";position:absolute;z-index:-1;left:-.04em;right:-.04em;top:55%;height:38%;border-radius:.12em .2em .14em .22em;
  background:linear-gradient(100deg,#ffd84d,var(--yellow) 40%,#f9c419);transform:skewX(-8deg) rotate(-1deg)}