/* MV1 vision kit (flows/marketplace/BRIEF.md). Loaded after tokens.css and popup.css by every vision-*.html page.
   Tokens only: Figtree, ink and grey, Panda blue only for the main forward action, switches that are on and the
   Certified badge. Browsing pages are white (body.mv); doing pages are grey with white cards (body.mv.mv--grey).
   Phones first; 744px (tablet) and 1128px (desktop) widen the layout. App mode is html.mv-app (?app=1). */

/* ================= Base ================= */
:root{
  --mv-gutter:24px;--mv-max:1200px;
  --mv-status-h:0px;--mv-tabbar-h:0px;--mv-safe-b:env(safe-area-inset-bottom,0px);
  --mv-bar-h:0px;--mv-top-offset:0px;--mv-scroll-top:0px;--mv-bar-pad-b:calc(12px + var(--mv-safe-b));
  --mv-hairline:#ebebeb;
  --mv-photo-tile:#f4f4f2;   /* the light tile under product photos (tires) */
  --mv-track:#e9e9e6;        /* the rating bars' and score ring's track */
  --mv-ink-hover:var(--action-hover);   /* resolved here (#080a0d) before body.mv points --action-hover at blue */
}
@media(min-width:744px){:root{--mv-gutter:32px}}
@media(min-width:1128px){:root{--mv-gutter:40px}}
html.mv-app{--mv-status-h:54px;--mv-safe-b:34px}
html.mv-app.mv-device{--mv-status-h:40px;--mv-safe-b:env(safe-area-inset-bottom,0px)}   /* the demo on a real phone: the demo bar, no fake status or home bar */
html.mv-app.mv-has-tabbar{--mv-tabbar-h:83px;--mv-bar-pad-b:12px}
html.mv-app.mv-device.mv-has-tabbar{--mv-tabbar-h:calc(56px + var(--mv-safe-b))}   /* a real phone: the web tab bar's height, the phone's own safe area */
@media(max-width:743px){html.mv-has-tabbar-web{--mv-tabbar-h:calc(56px + var(--mv-safe-b));--mv-bar-pad-b:12px}}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--mv-scroll-top) + 12px);scroll-padding-bottom:calc(var(--mv-bar-h) + var(--mv-tabbar-h))}
body.mv{--mv-bg:#fff;--action-primary:var(--brand-blue);--action-hover:var(--brand-blue-hover);margin:0;min-height:100vh;font-family:var(--font-body);font-size:var(--type-body);line-height:var(--leading-body);color:var(--text-primary);background:var(--mv-bg);font-variant-numeric:proportional-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-bottom:calc(var(--mv-bar-h) + var(--mv-tabbar-h));overflow-x:clip}
body.mv.mv--grey{--mv-bg:var(--surface-page)}
html.mv-app body.mv{padding-top:var(--mv-status-h);padding-bottom:calc(var(--mv-bar-h) + max(var(--mv-tabbar-h), var(--mv-safe-b)))}
.mv *,.mv *::before,.mv *::after{box-sizing:border-box}
:where(.mv) a{color:inherit}
:where(.mv) button{font:inherit;color:inherit}
:where(.mv) img{display:block;max-width:100%}
:where(.mv) :where(h1,h2,h3,h4,p,dl,dd,figure){margin:0}   /* :where keeps these resets below every component rule */
.mv :focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.mv [hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mv-skip{position:absolute;left:12px;top:0;z-index:200;transform:translateY(calc(-100% - 16px));padding:10px 16px;border-radius:var(--radius-pill);background:var(--text-primary);color:#fff!important;font-weight:600;text-decoration:none}
.mv-skip:focus{top:12px;transform:none}   /* off screen by its own height (a fixed offset left a sliver at 200% text) */
html.mv-app .mv-web-only{display:none!important}
html:not(.mv-app) .mv-app-only{display:none!important}
body.mv>#mv-top{display:contents}   /* the compact header and the app bar are position:sticky: they stick to the page, not to this wrapper */
.mv-wrap{width:100%;max-width:calc(var(--mv-max) + 2 * var(--mv-gutter));margin-inline:auto;padding-inline:var(--mv-gutter)}
.mv-main{display:block;padding-bottom:56px}
.mv svg.icon{flex:none;fill:none}
.mv svg.icon:not([width]){width:var(--icon-medium);height:var(--icon-medium)}   /* MV.icon(name, size) sets its own size */
.mv-ui,.mv-icon{flex:none}

/* ================= Buttons ================= */
/* .button: the base that popup.css's footer action relies on (copied from studio.css; vision pages don't load it). */
.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;border:1px solid transparent;min-height:50px;border-radius:var(--radius-pill);padding:12px 24px;text-decoration:none;font-size:var(--type-body);line-height:1.25;font-weight:600;cursor:pointer;transition:background var(--motion-feedback),color var(--motion-feedback),transform var(--motion-feedback)}
.button:active:not(:disabled){transform:scale(.98)}
.button:disabled{background:var(--surface-subtle);color:var(--text-secondary);border-color:var(--border-divider)}
/* The pop-up's close button (popup.js) uses the design system's icon button. */
.icon-action{width:var(--control-hit);height:var(--control-hit);flex:none;border-radius:var(--radius-pill);border:1px solid transparent;background:var(--surface-subtle);display:inline-flex;align-items:center;justify-content:center;color:var(--text-primary);cursor:pointer;transition:background var(--motion-feedback),transform var(--motion-feedback)}
.icon-action.bare{background:transparent}
.icon-action.bare:hover{background:var(--surface-subtle)}
.icon-action:active:not(:disabled){transform:scale(.96)}
.icon-action .icon{width:var(--icon-medium);height:var(--icon-medium);fill:none}
/* Pills: blue = the one main forward action; secondary = white with an ink edge; quiet = text only. */
.mv-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border:1px solid transparent;border-radius:var(--radius-pill);background:none;font-size:var(--type-body);line-height:1.25;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--motion-feedback),border-color var(--motion-feedback),transform var(--motion-feedback)}
.mv-btn:active:not(:disabled):not([aria-disabled=true]){transform:scale(.98)}
.mv-btn--primary{background:var(--brand-blue);color:#fff!important}
.mv-btn--primary:hover{background:var(--brand-blue-hover)}
.mv-btn--primary:active{background:#0c4a91}
.mv-btn--secondary{background:#fff;border-color:var(--text-primary);color:var(--text-primary)}
.mv-btn--secondary:hover{background:var(--surface-subtle)}
.mv-btn--quiet{padding-inline:14px;color:var(--text-primary)}
.mv-btn--quiet:hover{background:var(--surface-subtle)}
.mv-btn--small{min-height:36px;padding:7px 16px;font-size:var(--type-meta);line-height:20px}
.mv-btn--small::after{content:"";position:absolute;inset:-4px 0}
.mv-btn--block{width:100%}
.mv-btn:disabled,.mv-btn[aria-disabled=true]{background:var(--surface-subtle);border-color:transparent;color:var(--text-secondary)!important;cursor:default}
.mv-btn .mv-ui{width:18px;height:18px}
/* A text link that acts (underlined, ink). */
.mv-link{padding:0;border:0;background:none;font-weight:600;color:var(--text-primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer}
.mv-link:hover{text-decoration-thickness:2px}

/* ================= Chips, tags, rating, badge, info ================= */
.mv-chips{display:flex;flex-wrap:wrap;gap:8px}
.mv-chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:-4px calc(var(--mv-gutter) * -1);padding:6px var(--mv-gutter);scroll-padding-inline:var(--mv-gutter)}   /* 6px: room for the focus ring */
.mv-chips--scroll::-webkit-scrollbar{display:none}
.mv-chip{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 16px;border:1px solid var(--border-choice);border-radius:var(--radius-pill);background:#fff;font-size:var(--type-meta);line-height:20px;font-weight:500;color:var(--text-primary);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--motion-selection) var(--ease-out),border-color var(--motion-feedback),color var(--motion-selection)}
.mv-chip::after{content:"";position:absolute;inset:-2px 0}
.mv-chip:hover{border-color:var(--text-primary)}
.mv-chip:is([aria-pressed=true],[aria-checked=true],[aria-selected=true],.is-on){background:var(--text-primary);border-color:var(--text-primary);color:#fff}
.mv-chip .mv-ui{width:16px;height:16px}
.mv-chip__count{color:inherit;opacity:.7}
.mv-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-pill);background:var(--surface-subtle);font-size:.75rem;line-height:1rem;font-weight:500;color:var(--text-primary);white-space:nowrap}
.mv-tag .mv-ui{width:12px;height:12px}
.mv-rating{display:inline-flex;align-items:center;gap:4px;font-size:var(--type-meta);line-height:20px;color:var(--text-primary);white-space:nowrap}
.mv-star{width:12px;height:12px;flex:none;color:var(--text-primary)}
.mv-rating__n{color:inherit}
.mv-cert{--cert:18px;display:inline-flex;flex:none;width:var(--cert);height:var(--cert);color:var(--brand-blue);vertical-align:-3px}
.mv-cert svg{width:100%;height:100%}
.mv-cert--btn{position:relative;padding:0;border:0;background:none;cursor:pointer}
.mv-cert--btn::after{content:"";position:absolute;inset:min(-13px, calc((var(--cert) - 44px) / 2))}   /* 44px at least */
.mv-snow{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;line-height:1rem;color:var(--text-secondary);white-space:nowrap}
.mv-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-2px 0;padding:0;border:0;border-radius:50%;background:none;color:var(--text-secondary);vertical-align:middle;cursor:pointer;flex:none}
.mv-info::after{content:"";position:absolute;inset:-10px}
.mv-info:hover{color:var(--text-primary)}
.mv-info .mv-ui{width:20px;height:20px}
/* The quiet grey pencil (an "Edit …" aria-label). */
.mv-edit{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:var(--text-secondary);cursor:pointer;flex:none}
.mv-edit::after{content:"";position:absolute;inset:-6px}
.mv-edit:hover{background:var(--surface-subtle);color:var(--text-primary)}
.mv-edit svg{width:16px;height:16px}

/* ================= Type and sections ================= */
.mv-h1{font-size:var(--type-title);line-height:var(--leading-title);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
@media(min-width:744px){.mv-h1{font-size:2rem;line-height:2.375rem}}
.mv-lede{margin-top:8px;font-size:var(--type-body);line-height:var(--leading-body);color:var(--text-secondary);max-width:62ch;text-wrap:pretty}
.mv-section{margin-top:40px}
@media(min-width:744px){.mv-section{margin-top:48px}}
.mv-h2row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 16px;margin-bottom:16px}
.mv-h2row__t{flex:1 1 auto;min-width:min(100%, 14rem)}   /* with large text the heading keeps the row and the link wraps under it */
.mv-h2line{display:block}
.mv-h2line>.mv-h2:has(+.mv-info){display:inline}   /* the info button follows the heading's last word, even when it wraps */
.mv-h2line>.mv-info{margin:-2px 0 0 4px;vertical-align:-3px}
html.mv-app .mv-hero{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}
.mv-h2{font-size:var(--type-section);line-height:var(--leading-section);font-weight:600;letter-spacing:-.012em;text-wrap:balance}
.mv-sub{margin-top:2px;font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary)}
.mv-h2row__end{display:flex;align-items:center;gap:12px;flex:none}
.mv-seeall{display:inline-flex;align-items:center;justify-content:flex-end;min-width:44px;min-height:44px;margin:-12px 0;font-size:var(--type-meta);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.mv-arrows{display:none;gap:12px}
@media(min-width:744px) and (hover:hover){.mv-arrows{display:flex}}
.mv-arrow{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid var(--border-choice);border-radius:50%;background:#fff;cursor:pointer;transition:transform var(--motion-feedback),box-shadow var(--motion-feedback)}
.mv-arrow{position:relative}
.mv-arrow::after{content:"";position:absolute;inset:-6px}   /* a 44px target (the arrows sit 12px apart, so the areas meet without overlapping) */
.mv-arrow:hover:not(:disabled){box-shadow:var(--shadow-selection);transform:scale(1.04)}
.mv-arrow:disabled{opacity:.35;cursor:default}
.mv-hr{height:1px;margin:32px 0 0;border:0;background:var(--border-divider)}

/* ================= Rows and grids ================= */
.mv-row{--gap:16px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--c1) - 1) * var(--gap)) / var(--c1));gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--mv-gutter) * -1);padding:4px var(--mv-gutter) 8px;scroll-padding-inline:var(--mv-gutter)}
.mv-row::-webkit-scrollbar{display:none}
.mv-row__item{scroll-snap-align:start;min-width:0}
@media(min-width:744px){.mv-row{--gap:20px;grid-auto-columns:calc((100% - (var(--c2) - 1) * var(--gap)) / var(--c2))}}
@media(min-width:1128px){.mv-row{--gap:24px;grid-auto-columns:calc((100% - (var(--c3) - 1) * var(--gap)) / var(--c3));margin-inline:0;padding-inline:0;scroll-padding-inline:0}}
.mv-grid{--gap:24px 16px;display:grid;grid-template-columns:repeat(var(--g1),minmax(0,1fr));gap:var(--gap)}
@media(min-width:744px){.mv-grid{--gap:32px 20px;grid-template-columns:repeat(var(--g2),minmax(0,1fr))}}
@media(min-width:1128px){.mv-grid{--gap:40px 24px;grid-template-columns:repeat(var(--g3),minmax(0,1fr))}}

/* ================= Listing cards (image + text, no shadow) ================= */
.mv-listing__link{display:block;text-decoration:none;color:inherit;border-radius:var(--radius-tile-lg)}
.mv-listing__media{position:relative;aspect-ratio:20/19;border-radius:var(--radius-tile-lg);overflow:hidden;background:var(--surface-subtle);isolation:isolate}
.mv-listing--wide .mv-listing__media{aspect-ratio:4/3}
.mv-listing__media>img,.mv-listing__media>.mv-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mv-listing__tag{position:absolute;z-index:2;left:12px;top:12px;padding:5px 11px;border-radius:var(--radius-pill);background:#fff;font-size:.75rem;line-height:1rem;font-weight:600;color:var(--text-primary);box-shadow:0 1px 4px rgb(0 0 0 / 12%)}
.mv-listing__body{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;padding-top:12px}
.mv-listing__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.mv-listing__title{display:flex;align-items:center;gap:5px;min-width:0;font-size:.9375rem;line-height:1.25rem;font-weight:600}
.mv-listing__title>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-listing__title .mv-cert{--cert:16px}
.mv-listing__line{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-listing__price{margin-top:4px;font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-primary)}
.mv-listing__price b{font-weight:600}
@media(hover:hover){.mv-listing__link:hover .mv-listing__title>span:first-child{text-decoration:underline;text-underline-offset:2px}}
/* Sample photos (MVArt.photo) */
.mv-photo{position:relative;width:100%;height:100%;overflow:hidden;background:var(--surface-subtle)}
.mv-photo>svg{display:block;width:100%;height:100%}
/* A wrap or film shop's sample photo: the real car in another colour on a light studio backdrop (MV.shopPhoto) */
.mv-photo--car{background:linear-gradient(180deg,#f1f0ed 0%,#e9e8e4 58%,#dcdad5 58.4%,#e6e4e0 100%)}
.mv-photo__car{position:absolute;left:5%;right:5%;bottom:13%;display:block}
.mv-photo__car .mv-carimg>canvas,.mv-photo__car .mv-carimg>img{display:block;width:100%;height:auto}
.mv-photo__car .mv-carimg>svg{display:block;width:100%;height:auto}
.mv-photo__chip{position:absolute;left:10px;bottom:10px;padding:2px 8px;border-radius:var(--radius-pill);background:rgb(255 255 255 / 86%);font-size:.6875rem;line-height:1rem;font-weight:500;color:var(--text-secondary);pointer-events:none}

/* ================= Pro cards (round photo) ================= */
@media(min-width:1128px){.mv-pro{--pro-photo:152px}}
.mv-pro__link{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 4px 8px;text-align:center;text-decoration:none;color:inherit;border-radius:var(--radius-tile-lg)}
.mv-pro__photo{position:relative;display:block;width:min(100%,var(--pro-photo,128px));aspect-ratio:1;margin-bottom:12px}
.mv-pro__photo img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--surface-subtle)}
.mv-pro__photo .mv-cert{position:absolute;z-index:1;right:2px;bottom:2px;padding:2px;border-radius:50%;background:#fff;width:calc(var(--cert) + 4px);height:calc(var(--cert) + 4px)}
.mv-pro__name{font-size:var(--type-body);line-height:1.375rem;font-weight:600}
.mv-pro__price{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary)}
.mv-pro__name,.mv-pro__price,.mv-pro__next{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* one line each */
.mv-pro__price b{font-weight:600;color:var(--text-primary)}
.mv-pro__next{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary)}
@media(hover:hover){.mv-pro__link:hover .mv-pro__name{text-decoration:underline;text-underline-offset:2px}}
.mv-pro__photo--all{display:grid;place-items:center;border-radius:50%;background:var(--surface-subtle);color:var(--text-primary)}
.mv-work{aspect-ratio:4/3;border-radius:var(--radius-tile-lg);overflow:hidden;background:var(--surface-subtle)}
.mv-work img{width:100%;height:100%;object-fit:cover}

/* ================= Product cards (tires) ================= */
/* Round 2: the tire's photo on a light tile with its season on it, the brand's logo, the model, the rating, the Panda
   score, the price per tire and the price for 4 installed. One line each. */
.mv-product{position:relative;container-type:inline-size}
.mv-product__link{display:block;text-decoration:none;color:inherit;border-radius:var(--radius-tile-lg)}
.mv-product__media{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:var(--radius-tile-lg);background:var(--mv-photo-tile);overflow:hidden}
.mv-product__media>svg{width:80%;height:auto}
.mv-product__media>img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply}
.mv-product__season{position:absolute;left:10px;top:10px;padding:3px 10px;border-radius:var(--radius-pill);background:#fff;font-size:.75rem;line-height:1rem;font-weight:600;color:var(--text-primary);box-shadow:0 1px 3px rgb(0 0 0 / 10%)}
.mv-product__brand{display:flex;align-items:center;height:18px;margin-top:12px;color:var(--text-secondary)}
.mv-product__name{margin-top:2px;font-size:var(--type-body);line-height:1.375rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-product__meta{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-top:6px;min-width:0}
.mv-snow__t{display:none}
.mv-product__rating{display:flex;align-items:center;gap:8px;margin-top:2px;min-width:0}
.mv-product__rating .mv-snow{color:var(--text-primary)}
.mv-product__score{margin-top:8px}
.mv-product__price{margin-top:8px;font-size:.9375rem;line-height:1.25rem;color:var(--text-primary)}
.mv-product__price b{font-weight:600}
.mv-product__total{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-product__total b{font-weight:600;color:var(--text-primary)}
@container (max-width:175px){.mv-product__total{font-size:.8125rem}}
@media(hover:hover){.mv-product__link:hover .mv-product__name{text-decoration:underline;text-underline-offset:2px}}
.mv-compare{position:absolute;top:4px;right:4px;z-index:2;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.mv-compare input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.mv-compare__box{width:24px;height:24px;display:grid;place-items:center;border:1.5px solid var(--border-control);border-radius:7px;background:#fff;color:transparent;transition:background var(--motion-feedback),border-color var(--motion-feedback)}
.mv-compare__box .mv-ui{width:14px;height:14px}
.mv-compare input:checked+.mv-compare__box{background:var(--text-primary);border-color:var(--text-primary);color:#fff}
.mv-compare input:focus-visible+.mv-compare__box{outline:3px solid var(--focus-ring);outline-offset:2px}

/* ================= Visual option tiles (levels, coverage, colours, washes) ================= */
.mv-tile__link{display:block;text-decoration:none;color:inherit;border-radius:var(--radius-tile-lg)}
.mv-tile__media{aspect-ratio:4/3;display:grid;place-items:center;border-radius:var(--radius-tile-lg);background:var(--surface-subtle);overflow:hidden;padding:8%}
.mv-tile__media.is-bare{padding:0}
.mv-tile__media>svg{width:100%;height:auto}
.mv-tile--car .mv-tile__media{aspect-ratio:16/10;padding:6% 5%}
.mv-tile__media>.mv-carimg{width:100%}
/* A close-up (MVCar focus) fills its tile edge to edge, like a detail photo */
.mv-tile--car .mv-tile__media.is-bare{padding:0}
.mv-tile__media.is-bare>.mv-carimg{height:100%}
.mv-tile__media.is-bare>.mv-carimg>canvas{width:100%;height:100%;object-fit:cover}
.mv-tile__title{margin-top:12px;font-size:var(--type-body);line-height:1.375rem;font-weight:600}
.mv-tile__line{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-tile__price{margin-top:2px;font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-primary)}
.mv-tile__price b{font-weight:600}
@media(hover:hover){.mv-tile__link:hover .mv-tile__title{text-decoration:underline;text-underline-offset:2px}}

/* ================= Steps three-up ================= */
.mv-steps{list-style:none;margin:0;padding:0;display:grid;gap:20px}
@media(min-width:744px){.mv-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.mv-steps__item{display:flex;align-items:flex-start;gap:16px}
@media(min-width:744px){.mv-steps__item{flex-direction:column;gap:14px}}
.mv-steps__ico{flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--surface-subtle);color:var(--text-primary);font-weight:600}
.mv-steps__ico svg{width:24px;height:24px}
.mv-steps__t{font-size:var(--type-body);line-height:1.375rem;font-weight:600}
.mv-steps__l{margin-top:2px;font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary);text-wrap:pretty}

/* ================= FAQ, city links, breadcrumbs ================= */
.mv-faq .mv-h2{margin-bottom:12px}
.mv-faq__list{border-top:1px solid var(--border-divider)}
@media(min-width:1128px){.mv-faq{max-width:820px}}
.mv-faq__item{border-bottom:1px solid var(--border-divider)}
.mv-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:16px 0;font-weight:600;cursor:pointer;list-style:none}
.mv-faq__item summary::-webkit-details-marker{display:none}
.mv-faq__item summary .mv-ui{transition:transform var(--motion-selection) var(--ease-out);color:var(--text-secondary)}
.mv-faq__item[open] summary .mv-ui{transform:rotate(180deg)}
.mv-faq__item p{padding:0 32px 20px 0;color:var(--text-secondary);max-width:68ch}
.mv-near{margin-top:12px}
.mv-cities{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
@media(min-width:744px){.mv-cities{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 24px}}
@media(min-width:1128px){.mv-cities{grid-template-columns:repeat(5,minmax(0,1fr))}}
.mv-citylink{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:6px 0;text-decoration:none}
.mv-citylink b{font-size:var(--type-meta);line-height:var(--leading-meta);font-weight:600}
.mv-citylink span{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary)}
.mv-citylink:hover b{text-decoration:underline;text-underline-offset:2px}
.mv-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:var(--type-meta);line-height:var(--leading-meta)}
.mv-crumbs li{display:inline-flex;align-items:center;gap:4px;color:var(--text-secondary)}
.mv-crumbs a{position:relative;display:inline-flex;align-items:center;min-height:32px;color:var(--text-secondary);text-decoration:none}
.mv-crumbs a::after{content:"";position:absolute;inset:-6px min(-2px, calc((100% - 44px) / 2))}   /* a 44px target, however short the word ('Tires') */
.mv-crumbs a:hover{color:var(--text-primary);text-decoration:underline}
.mv-crumbs [aria-current]{color:var(--text-primary);font-weight:500}
.mv-crumbs .mv-ui{width:12px;height:12px;color:var(--text-secondary)}

/* ================= Cards (doing pages) and rows ================= */
.mv-card{background:var(--surface-panel);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--pad-card)}
body.mv:not(.mv--grey) .mv-card{box-shadow:var(--shadow-card-white)}
.mv-card--rows{padding:0 var(--pad-card)}
.mv-rowline{display:flex;align-items:center;gap:12px;min-height:56px;padding:var(--pad-row) 0;border-top:1px solid var(--border-divider)}
.mv-rowline:first-child{border-top:0}
.mv-rowline__label{flex:1;min-width:0;font-size:var(--type-body);line-height:1.375rem}
.mv-rowline__value{color:var(--text-secondary);text-align:right}

/* ================= Controls for page builders ================= */
/* Option tile (outlined, one line): .mv-opt (+ .is-on, aria-pressed) with .mv-opt__text (<b> + <small>), optional
   .mv-opt__ico / .mv-opt__art at the start and .mv-opt__end (a price) at the end. Chosen = the 2px ink outline. */
.mv-opt__end{flex:none;margin-left:auto;padding-left:12px;font-size:.9375rem;line-height:1.25rem;font-weight:600;color:var(--text-primary)}
/* Switch: <button type="button" class="mv-switch" role="switch" aria-checked="false" aria-label="…"></button>. Blue when on. */
.mv-switch{position:relative;flex:none;width:52px;height:32px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--switch-off);cursor:pointer;transition:background var(--motion-selection) var(--ease-out)}
.mv-switch::before{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / 22%);transition:transform var(--motion-selection) var(--ease-out)}
.mv-switch::after{content:"";position:absolute;inset:-6px -2px}
.mv-switch[aria-checked=true]{background:var(--switch-on)}
.mv-switch[aria-checked=true]::before{transform:translateX(20px)}
/* Switch row: a label (and an optional grey line) on the left, the switch on the right. */
.mv-switchrow{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}
.mv-switchrow__text{min-width:0;display:flex;flex-direction:column}
.mv-switchrow__text b{font-size:var(--type-body);line-height:1.375rem;font-weight:600}
.mv-switchrow__text small{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary)}
/* Stepper: <div class="mv-stepper"><button class="mv-stepper__btn" aria-label="Fewer tires">−</button><output>4</output><button …>+</button></div> */
.mv-stepper{display:inline-flex;align-items:center;gap:4px}
.mv-stepper output{min-width:32px;text-align:center;font-size:var(--type-body);font-weight:600}
.mv-stepper__btn{position:relative;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid var(--border-control);border-radius:50%;background:#fff;color:var(--text-primary);cursor:pointer;transition:border-color var(--motion-feedback),transform var(--motion-feedback)}
.mv-stepper__btn::after{content:"";position:absolute;inset:-4px}
.mv-stepper__btn:hover:not(:disabled){border-color:var(--text-primary)}
.mv-stepper__btn:active:not(:disabled){transform:scale(.94)}
.mv-stepper__btn:disabled{border-color:var(--border-choice);color:var(--text-disabled);cursor:default}
.mv-stepper__btn .mv-ui{width:16px;height:16px}
/* Segmented control (switches a view): <div class="mv-seg" role="group"><button aria-pressed="true">All</button>…</div> */
.mv-seg{display:flex;gap:2px;padding:3px;border-radius:var(--radius-pill);background:var(--surface-track);overflow-x:auto;scrollbar-width:none}
.mv-seg::-webkit-scrollbar{display:none}
.mv-seg>button{position:relative;flex:1 0 auto;min-height:38px;padding:0 14px;border:0;border-radius:var(--radius-pill);background:none;font-size:var(--type-meta);line-height:20px;font-weight:500;color:var(--text-primary);white-space:nowrap;cursor:pointer;transition:background var(--motion-selection) var(--ease-out),box-shadow var(--motion-selection)}
.mv-seg>button::after{content:"";position:absolute;inset:-3px 0}   /* 44px with the track's padding */
.mv-seg>button[aria-pressed=true]{background:#fff;font-weight:600;box-shadow:0 1px 3px rgb(0 0 0 / 12%),0 0 0 .5px rgb(0 0 0 / 4%)}
/* Field: <label class="mv-field"><span class="mv-field__label">Email</span><input type="email"></label> (inset label) */
.mv-field{position:relative;display:block;min-height:56px;border:1px solid var(--border-control);border-radius:var(--radius-field);background:#fff;cursor:text}
.mv-field:focus-within{outline:2px solid var(--text-primary);outline-offset:-1px}
.mv-field__label{position:absolute;left:16px;top:8px;font-size:.75rem;line-height:1rem;color:var(--text-secondary);pointer-events:none}
.mv-field input,.mv-field select{width:100%;height:54px;padding:22px 16px 6px;border:0;border-radius:var(--radius-field);background:none;font:inherit;font-size:var(--type-body);color:var(--text-primary);outline:none}
.mv-field.is-error{border-color:var(--status-error);box-shadow:inset 0 0 0 1px var(--status-error)}
.mv .mv-field input:focus-visible,.mv .mv-field select:focus-visible{outline:none}   /* the field's own ink ring shows focus */
.mv-field.is-error:focus-within{outline-color:var(--status-error)}
.mv-err{display:flex;align-items:flex-start;gap:6px;margin-top:8px;font-size:.8125rem;line-height:1.25rem;font-weight:600;color:var(--status-error)}
/* Checkbox row (filters): <label class="mv-check"><input type="checkbox"><span class="mv-check__box" aria-hidden="true">✓ svg</span><span>Michelin</span><span class="mv-check__n">2</span></label> */
.mv-check{display:flex;align-items:center;gap:12px;min-height:44px;font-size:var(--type-body);line-height:1.375rem;cursor:pointer}
.mv-check input{position:absolute;opacity:0;width:1px;height:1px}
.mv-check__box{flex:none;width:22px;height:22px;display:grid;place-items:center;border:1.5px solid var(--border-control);border-radius:6px;background:#fff;color:transparent;transition:background var(--motion-feedback),border-color var(--motion-feedback)}
.mv-check__box .mv-ui{width:14px;height:14px}
.mv-check input:checked+.mv-check__box{background:var(--text-primary);border-color:var(--text-primary);color:#fff}
.mv-check input:focus-visible+.mv-check__box{outline:3px solid var(--focus-ring);outline-offset:2px}
.mv-check__n{margin-left:auto;color:var(--text-secondary);font-size:var(--type-meta)}
/* A short grey note line, and the "Proposal" / "Sample" label tag for undecided things. */
.mv-meta{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary)}
.mv-tag--proposal{background:var(--surface-warning);color:var(--text-primary)}
/* Dividers between sections on white browsing pages (a shop page, a tire page). */
.mv-divide>*+*{margin-top:32px;padding-top:32px;border-top:1px solid var(--border-divider)}

/* ================= Address strip (prototype chrome) ================= */
.mv-strip{position:relative;z-index:41;background:var(--surface-subtle);border-bottom:1px solid #e4e4e0}
.mv-strip__in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:40px;max-width:calc(var(--mv-max) + 2 * var(--mv-gutter));margin:0 auto;padding:6px 12px}   /* with large text the chips wrap under the URL */
@media(min-width:744px){.mv-strip__in{padding:6px var(--mv-gutter)}}
.mv-strip__url{flex:1 1 7.5rem;min-width:0;display:flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:var(--radius-pill);background:#fff;box-shadow:0 0 0 1px rgb(0 0 0 / 6%);font-size:.8125rem;line-height:1rem;white-space:nowrap;overflow:hidden}
.mv-strip__url .mv-ui{width:13px;height:13px;color:var(--text-secondary);flex:none}
.mv-strip__addr{min-width:0;display:flex;overflow:hidden}
.mv-strip__host{color:var(--text-primary);flex:none}
.mv-strip__path{min-width:0;flex:0 1 auto;color:var(--text-primary);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.mv-strip__hash{min-width:0;flex:0 1000 auto;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis}   /* the # part gives way first */
.mv-strip__hash:not(:empty){min-width:1.7em}   /* …but always shows "#…" */
@media(max-width:419px){.mv-strip__url{padding:0 10px}.mv-strip__url .mv-ui{display:none}.mv-strip__chip{padding:0 9px}}
.mv-strip__chip{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:0;border-radius:var(--radius-pill);background:#fff;box-shadow:0 0 0 1px rgb(0 0 0 / 6%);font-size:.75rem;line-height:1rem;font-weight:600;color:var(--text-primary);cursor:pointer;white-space:nowrap}
.mv-strip__chip::after{content:"";position:absolute;inset:-8px -2px}
.mv-strip__chip:hover{background:#fafaf8}
/* The investor demo's bar (MV.demo): in the strip's place on the web; on a real phone, fixed in the status bar's place. */
.mv-demo{position:relative;z-index:41;background:var(--surface-subtle);border-bottom:1px solid #e4e4e0}
.mv-demo__in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;max-width:calc(var(--mv-max) + 2 * var(--mv-gutter));margin:0 auto;padding:0 var(--mv-gutter)}
.mv-demo__what,.mv-demo__restart{position:relative;display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;font:inherit;font-size:.8125rem;line-height:1rem;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.mv-demo__what b{margin-right:4px;font-weight:600;color:var(--text-primary)}
.mv-demo__restart{font-weight:600;color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
.mv-demo__what::after,.mv-demo__restart::after{content:"";position:absolute;inset:-6px -4px}
.mv-demo__what:focus-visible,.mv-demo__restart:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px;border-radius:4px}
html.mv-device .mv-demo{position:fixed;top:0;left:0;right:0;z-index:70;height:var(--mv-status-h);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
html.mv-device .mv-demo__in{height:100%;min-height:0;padding:0 16px}
.mv-strip__chip i{width:8px;height:8px;border-radius:50%;background:#8a8d93;flex:none}
.mv-strip__chip[data-tone=green] i{background:#1f8a4c}
.mv-strip__chip[data-tone=amber] i{background:#c98a12}
.mv-strip__chip--sample{font-weight:500;color:var(--text-secondary)}
.mv-strip__long{display:none}
@media(min-width:744px){.mv-strip__long{display:inline}.mv-strip__short{display:none}}

/* ================= Web header ================= */
.mv-head{position:relative;z-index:40;background:#fff;display:grid;align-items:center;column-gap:16px;padding-inline:max(var(--mv-gutter),calc((100% - var(--mv-max)) / 2))}
.mv-logo{display:inline-flex;align-items:center;min-height:44px;justify-self:start;border-radius:8px}
.mv-logo img{width:76px;height:auto}
@media(min-width:744px){.mv-logo img{width:85px}}
.mv-head__end{display:flex;align-items:center;justify-content:flex-end;gap:4px}
/* Full header (home and service pages). Phones: logo and "Get the app", the search pill, the tabs. */
.mv-head--full{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo end" "search search" "tabs tabs";padding-top:6px;border-bottom:1px solid var(--mv-hairline)}
.mv-head--full .mv-logo{grid-area:logo}
.mv-head--full .mv-head__end{grid-area:end}
.mv-head--full .mv-tabs{grid-area:tabs}
.mv-head__search{grid-area:search;min-width:0}
.mv-head__bar{display:none}
.mv-head__pill{padding:6px 0 4px}
.mv-head--full .mv-acct{display:none}
.mv-getapp{min-height:36px;padding:7px 14px;font-size:var(--type-meta);border-color:var(--border-choice)}
.mv-getapp::after{content:"";position:absolute;inset:-4px 0}
@media(min-width:744px){
  .mv-head--full{grid-template-columns:1fr auto 1fr;grid-template-areas:"logo tabs end" "search search search";padding-top:8px;padding-bottom:24px}
  .mv-head__bar{display:block}
  .mv-head__pill{display:none}
  .mv-head--full .mv-acct{display:block}
  .mv-getapp{display:none}
}
@media(min-width:1128px){.mv-getapp{display:inline-flex;min-height:44px;padding:10px 16px;border-color:transparent}}
/* Service tabs. Phones: six equal columns that fit 375 (icon 24, 12px short label). */
.mv-tabs{display:grid;grid-template-columns:repeat(6,minmax(max-content,1fr));column-gap:6px;margin:0 calc(var(--mv-gutter) * -1 + 6px);overflow-x:auto;scrollbar-width:none}   /* six across; with large text the row scrolls instead of the labels running together */
.mv-tabs::-webkit-scrollbar{display:none}
.mv-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:64px;padding:10px 0 12px;border-radius:12px;color:var(--text-secondary);text-decoration:none;--mv-icon-fill:#fff;transition:color var(--motion-feedback)}
.mv-tab__icon{display:grid;place-items:center;height:26px}
.mv-tab__label{position:relative;font-size:.75rem;line-height:1rem;font-weight:500;white-space:nowrap}
.mv-tab__long{display:none}
.mv-tab::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;border-radius:2px;background:var(--text-primary);transform:translateX(-50%);transition:width var(--motion-selection) var(--ease-out)}
.mv-tab.is-active{color:var(--text-primary)}
.mv-tab.is-active .mv-tab__label{font-weight:600}
.mv-tab.is-active::after{width:min(56px,80%)}
.mv-tab:hover{color:var(--text-primary)}
@media(min-width:744px){
  .mv-tabs{display:flex;justify-content:safe center;gap:4px;margin:0}
  .mv-tab{min-height:72px;padding:10px 10px 14px;gap:6px}
  .mv-tab__icon{height:28px}
  .mv-tab__label{font-size:var(--type-meta);line-height:1.125rem}
  .mv-tab.is-active::after{width:calc(100% - 20px)}
}
@media(min-width:1128px){.mv-tabs{gap:16px}.mv-tab__long{display:inline}.mv-tab__short{display:none}}
/* Desktop search bar: a 64px pill, segments split by hairlines, the round blue search button at the end. */
.mv-sbar{position:relative;display:flex;align-items:center;width:100%;max-width:860px;height:66px;margin:6px auto 0;padding:0 8px 0 0;border-radius:var(--radius-pill);background:#fff;box-shadow:var(--shadow-card-white),0 6px 18px rgb(0 0 0 / 5%)}
.mv-sbar__seg{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 20px 0 30px;border:0;border-radius:var(--radius-pill);background:none;text-align:left;cursor:pointer;transition:background var(--motion-feedback)}
.mv-sbar__seg:first-child{flex-grow:1.25}
.mv-sbar__seg:hover{background:var(--surface-subtle)}
.mv-sbar__label{font-size:.75rem;line-height:1rem;font-weight:600;color:var(--text-primary)}
.mv-sbar__value{font-size:var(--type-meta);line-height:1.125rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-sbar__value.is-set{color:var(--text-primary)}
.mv-sbar__sep{flex:none;width:1px;height:32px;background:var(--border-divider)}
.mv-sbar__go{flex:none;display:grid;place-items:center;width:48px;height:48px;margin-left:8px;border-radius:50%;background:var(--brand-blue);color:#fff;text-decoration:none;transition:background var(--motion-feedback),transform var(--motion-feedback)}
.mv-sbar__go:hover{background:var(--brand-blue-hover)}
.mv-sbar__go:active{transform:scale(.96)}
.mv-sbar__go--text{display:inline-flex;align-items:center;gap:8px;width:auto;padding:0 22px 0 18px;border-radius:var(--radius-pill);font-weight:600;white-space:nowrap}
/* A page's search module (stack: true): on phones a stacked box with a full-width button. */
@media(max-width:743px){
  .mv-sbar--stack{flex-direction:column;align-items:stretch;height:auto;max-width:none;padding:6px;border-radius:var(--radius-card)}
  .mv-sbar--stack .mv-sbar__seg{flex:none;height:auto;min-height:60px;padding:10px 18px;border-radius:12px}   /* grows with its words at 200% text */
  .mv-sbar--stack .mv-sbar__value{flex:none;white-space:normal}
  .mv-sbar--stack .mv-sbar__sep{width:auto;height:1px;margin:0 18px}
  .mv-sbar--stack .mv-sbar__go{width:auto;height:48px;margin:6px 0 0;border-radius:var(--radius-pill)}
  .mv-sbar--stack .mv-sbar__go--text{height:auto;min-height:48px;padding-block:10px;justify-content:center;text-align:center;white-space:normal}   /* wraps inside its pill at 200% text */
}
/* Phone search pill */
.mv-spill{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:8px 20px 8px 20px;border:0;border-radius:var(--radius-pill);background:#fff;box-shadow:0 0 0 1px rgb(0 0 0 / 5%),0 3px 14px rgb(0 0 0 / 10%);text-align:left;cursor:pointer}
.mv-spill__icon{display:grid;place-items:center;color:var(--text-primary)}
.mv-spill__text{min-width:0;display:flex;flex-direction:column}
.mv-spill b{font-size:var(--type-meta);line-height:1.125rem;font-weight:600}
.mv-spill small{font-size:.75rem;line-height:1rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Compact pill (inner pages, the scrolled header) */
.mv-cpill{display:flex;align-items:center;gap:12px;width:100%;max-width:420px;height:48px;margin:0 auto;padding:0 8px 0 20px;border:0;border-radius:var(--radius-pill);background:#fff;box-shadow:0 0 0 1px rgb(0 0 0 / 7%),0 2px 8px rgb(0 0 0 / 7%);font-size:var(--type-meta);line-height:1.125rem;font-weight:500;text-align:left;cursor:pointer;transition:box-shadow var(--motion-feedback)}
.mv-cpill:hover{box-shadow:0 0 0 1px rgb(0 0 0 / 9%),0 4px 14px rgb(0 0 0 / 10%)}
.mv-cpill__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-cpill__go{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--text-primary);color:#fff}
/* Compact header (inner pages): logo · the pill · account; sticky. */
.mv-head--compact{position:sticky;top:0;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"logo mid";height:64px;border-bottom:1px solid var(--mv-hairline);transition:box-shadow 200ms var(--ease-out)}
.mv-head--compact[data-scrolled=true]{box-shadow:var(--shadow-head)}
.mv-head--compact .mv-logo{grid-area:logo}
.mv-head__mid{grid-area:mid;min-width:0}
.mv-head--compact .mv-head__end{display:none}
@media(min-width:744px){.mv-head--compact{grid-template-columns:1fr minmax(0,420px) 1fr;grid-template-areas:"logo mid end";height:80px}.mv-head--compact .mv-head__end{display:flex;grid-area:end}}
/* Account pill and menu */
.mv-acct{position:relative}
.mv-acct__pill{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 14px;border:1px solid var(--border-choice);border-radius:var(--radius-pill);background:#fff;cursor:pointer;transition:box-shadow var(--motion-feedback)}
.mv-acct__pill:hover,.mv-acct__pill[aria-expanded=true]{box-shadow:var(--shadow-selection)}
.mv-acct__pill svg:last-child{width:30px;height:30px}
.mv-acct__av{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--text-primary);color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.02em}
.mv-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:240px;padding:8px 0;border-radius:16px;background:#fff;box-shadow:var(--shadow-tip),0 0 0 1px rgb(0 0 0 / 4%)}
.mv-menu a{display:flex;align-items:center;min-height:44px;padding:0 16px;font-size:var(--type-meta);text-decoration:none}
.mv-menu a:hover{background:var(--surface-subtle)}
.mv-menu__strong{font-weight:600}
.mv-menu hr{margin:8px 0;border:0;border-top:1px solid var(--border-divider)}
/* The scrolled header: slides in once the full header has scrolled away. */
.mv-sticky{position:fixed;left:0;right:0;top:var(--mv-status-h);z-index:42;background:#fff;box-shadow:var(--shadow-head);transform:translateY(calc(-100% - var(--mv-status-h) - 8px));transition:transform 220ms var(--ease-out);visibility:hidden}
.mv-sticky.is-on{transform:none;visibility:visible}
.mv-sticky__in{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:16px;padding:10px max(var(--mv-gutter),calc((100% - var(--mv-max)) / 2))}
.mv-sticky .mv-logo,.mv-sticky__mid,.mv-sticky__end{display:none}
.mv-sticky .mv-spill{min-height:52px;box-shadow:0 0 0 1px rgb(0 0 0 / 6%),0 2px 8px rgb(0 0 0 / 8%)}
@media(min-width:744px){
  html:not(.mv-app) .mv-sticky__in{grid-template-columns:1fr minmax(0,420px) 1fr;height:80px;padding-block:0}
  html:not(.mv-app) .mv-sticky .mv-logo,html:not(.mv-app) .mv-sticky__mid{display:flex}
  html:not(.mv-app) .mv-sticky__end{display:flex;justify-content:flex-end}
  html:not(.mv-app) .mv-sticky__pill{display:none}
}
@media(prefers-reduced-motion:reduce){.mv-sticky{transition:none}}

/* ================= Footer ================= */
.mv-foot{margin-top:16px;padding:40px 0 calc(32px + var(--mv-safe-b));background:var(--surface-page);border-top:1px solid var(--mv-hairline)}
.mv--grey .mv-foot{background:#fff}
.mv-foot__cols{display:grid;gap:0}
.mv-foot__col{padding:24px 0;border-top:1px solid var(--border-divider)}
.mv-foot__col:first-child{border-top:0;padding-top:0}
.mv-foot__h{font-size:var(--type-meta);line-height:var(--leading-meta);font-weight:600}
.mv-foot ul{list-style:none;margin:8px 0 0;padding:0;display:grid;column-gap:16px}
.mv-foot__col--2 ul{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:744px){.mv-foot__col--2 ul{grid-template-columns:none}}
.mv-foot li a{position:relative;display:inline-flex;align-items:center;min-height:36px;font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-primary);text-decoration:none}
.mv-foot li a::after{content:"";position:absolute;inset:-4px min(0px, calc((100% - 44px) / 2))}   /* a 44px target, however short the word ('Help') */
.mv-foot li a:hover{text-decoration:underline}
.mv-foot__line{margin-top:24px;padding-top:24px;border-top:1px solid var(--border-divider);font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary)}
@media(min-width:744px){.mv-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}.mv-foot__col:nth-child(2){border-top:0;padding-top:0}}
@media(min-width:1128px){.mv-foot__cols{grid-template-columns:repeat(4,minmax(0,1fr))}.mv-foot__col{border-top:0;padding-top:0}}

/* ================= App mode: status bar, top bar, tab bar ================= */
.mv-status{position:fixed;top:0;left:0;right:0;z-index:70;height:54px;display:flex;align-items:center;justify-content:space-between;padding:6px 26px 0 40px;background:var(--mv-bg);color:var(--text-primary);pointer-events:none}
.mv-status__time{width:54px;font-size:17px;font-weight:600;letter-spacing:-.01em;text-align:center}
.mv-status__island{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000}
.mv-status__icons{display:flex;align-items:center;gap:6px}
.mv-status__icons svg{fill:currentColor}
.mv-head--app{grid-template-columns:minmax(0,1fr);grid-template-areas:"search" "tabs";padding-top:4px;border-bottom:1px solid var(--mv-hairline)}
.mv-head--app .mv-head__pill{grid-area:search;padding-top:6px}
.mv-head--app .mv-tabs{grid-area:tabs}
.mv-sticky--app .mv-sticky__in{padding-block:8px}
.mv-appbar{position:sticky;top:var(--mv-status-h);z-index:40;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;height:52px;padding:0 8px;background:var(--mv-bg);transition:box-shadow 200ms var(--ease-out)}
.mv-appbar[data-scrolled=true]{box-shadow:var(--shadow-head)}
.mv-appbar__back{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--text-primary)}
.mv-appbar__back:hover{background:var(--surface-subtle)}
.mv-appbar__title{text-align:center;font-size:var(--type-body);line-height:var(--leading-body);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-appbar__end{display:flex;justify-content:flex-end}
.mv-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;height:var(--mv-tabbar-h);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:7px 4px 34px;background:var(--surface-panel);border-top:1px solid rgb(0 0 0 / 7%)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mv-tabbar{background:rgb(255 255 255 / 86%);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}}
.mv-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-width:0;min-height:44px;font-size:11px;line-height:14px;font-weight:500;color:var(--text-secondary);text-decoration:none}
.mv-tabbar a.is-active{color:var(--text-primary);font-weight:600}
html.mv-has-tabbar-web .mv-tabbar,html.mv-device .mv-tabbar{padding-bottom:var(--mv-safe-b)}
@media(min-width:744px){html.mv-has-tabbar-web .mv-tabbar{display:none}}
/* Floating pill (the city page's "Map" / "List" switch): ink, centred above the bars. */
.mv-fab{position:fixed;left:50%;bottom:calc(var(--mv-bar-h) + var(--mv-tabbar-h) + 20px);z-index:44;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border:0;border-radius:var(--radius-pill);background:var(--text-primary);color:#fff;font-size:var(--type-meta);font-weight:600;box-shadow:var(--shadow-tip);cursor:pointer;transition:transform var(--motion-feedback)}
html:not(.mv-has-tabbar):not(.mv-has-tabbar-web) .mv-fab{bottom:calc(var(--mv-bar-h) + 20px + var(--mv-safe-b))}
.mv-fab:active{transform:translateX(-50%) scale(.97)}
.mv-fab .mv-ui{width:18px;height:18px}
.mv-homebar{position:fixed;left:50%;bottom:8px;z-index:90;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:#111;pointer-events:none}

/* ================= Docked bar ================= */
.mv-bar{position:fixed;left:0;right:0;bottom:var(--mv-tabbar-h);z-index:45;padding:12px var(--mv-gutter) var(--mv-bar-pad-b);background:var(--surface-panel);box-shadow:var(--shadow-bar);border-top:1px solid rgb(255 255 255 / 70%)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mv-bar{background:var(--surface-bar);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}}
@media(prefers-reduced-transparency:reduce){.mv-bar,.mv-tabbar{background:var(--surface-panel);-webkit-backdrop-filter:none;backdrop-filter:none}}
.mv-bar__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;max-width:var(--mv-max);min-height:52px;margin:0 auto}
.mv-bar__info{flex:999 1 6.5rem;min-width:0;display:flex;flex-direction:column;justify-content:center}   /* takes the free space on one row */
.mv-bar__info b,.mv-bar__info small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-bar__info b{font-size:1.0625rem;line-height:1.4375rem;font-weight:600;color:var(--text-primary)}
.mv-bar__info small{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-on-bar)}
.mv-bar__price{position:relative;display:inline;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--text-primary);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;cursor:pointer}
.mv-bar__price::after{content:"";position:absolute;inset:-12px -10px}   /* a 44px target */
.mv-bar__info small:has(.mv-bar__price),.mv-bar__info b:has(.mv-bar__price){overflow:visible}   /* room for its focus ring */
/* The button keeps its label on one line beside the info; when the two don't fit (200% text) it drops onto a row of its
   own and spans it, so the price stays readable, and a label longer than the screen wraps. */
.mv-bar .mv-btn--primary,.mv-bar .mv-btn--secondary{flex:1 0 auto;min-width:150px;max-width:100%;white-space:normal;text-align:center}
@media(min-width:1128px){.mv-bar--phone{display:none}}

/* ================= Tip (pop-up tip above the bar) ================= */
.mv-tip{position:fixed;z-index:60;left:var(--mv-gutter);right:var(--mv-gutter);max-width:420px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-card);background:#fff;box-shadow:var(--shadow-tip),0 0 0 1px rgb(0 0 0 / 4%);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 200ms var(--ease-out),transform 260ms var(--ease-out),visibility 0s 260ms;cursor:pointer}
.mv-tip{bottom:calc(var(--mv-bar-h) + var(--mv-tabbar-h) + 14px)}
html:not(.mv-has-tabbar):not(.mv-has-tabbar-web) .mv-tip{bottom:calc(var(--mv-bar-h) + 14px + var(--mv-safe-b))}
.mv-tip[data-show=true]{opacity:1;visibility:visible;transform:none;transition:opacity 200ms var(--ease-out),transform 300ms cubic-bezier(.2,.9,.3,1.2),visibility 0s}
.mv-tip__icon{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--surface-success);color:var(--status-success)}
.mv-tip[data-tone=info] .mv-tip__icon{background:var(--surface-info);color:var(--status-info)}
.mv-tip__text{flex:1;min-width:0}
.mv-tip__text strong{display:block;font-size:.9375rem;line-height:1.35;font-weight:600}
.mv-tip__text span{display:block;margin-top:1px;font-size:.8125rem;line-height:1.4;color:var(--text-secondary)}
@media(prefers-reduced-motion:reduce){.mv-tip,.mv-tip[data-show=true]{transform:none;transition:opacity 1ms}}

/* ================= Map (MVArt.map) ================= */
.mv-map{--k:max(.1cqw, .142857cqh);position:relative;height:var(--map-h,320px);border-radius:var(--radius-tile-lg);overflow:hidden;background:#eeeeea;container-type:size;isolation:isolate}
.mv-map__art{position:absolute;inset:0;width:100%;height:100%}
.mv-map__label,.mv-pin{position:absolute;left:calc(50cqw + var(--dx) * var(--k));top:calc(50cqh + var(--dy) * var(--k));transform:translate(-50%,-50%)}
.mv-map__label{font-size:11px;line-height:1;font-weight:500;color:#8b8e93;white-space:nowrap;pointer-events:none;letter-spacing:.01em}
@container (max-width:640px){.mv-map__label--minor{display:none}}   /* small maps keep the main areas only */
.mv-pin{z-index:2;display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:5px 11px;border:0;border-radius:var(--radius-pill);background:#fff;font-size:var(--type-meta);line-height:20px;font-weight:600;color:var(--text-primary);text-decoration:none;white-space:nowrap;box-shadow:0 0 0 1px rgb(0 0 0 / 7%),0 2px 6px rgb(0 0 0 / 16%);cursor:pointer;transition:transform var(--motion-feedback) var(--ease-out),background var(--motion-selection),color var(--motion-selection)}
.mv-pin::after{content:"";position:absolute;inset:-7px -4px}
.mv-pin:hover{transform:translate(-50%,-50%) scale(1.06);z-index:3}
.mv-pin.is-chosen,.mv-pin[aria-pressed=true]{z-index:4;background:var(--text-primary);color:#fff;transform:translate(-50%,-50%) scale(1.06)}
.mv-pin--home{width:32px;height:32px;min-height:0;padding:0;border-radius:50%;background:var(--text-primary);color:#fff;box-shadow:0 0 0 4px rgb(255 255 255 / 85%),0 2px 8px rgb(0 0 0 / 22%);cursor:default}
.mv-pin--home::after{display:none}
.mv-pin--home .mv-ui{width:16px;height:16px}
/* The installer map (MV.installerMap): a smaller pin for your address, and a far shop's pin on the edge with an arrow. */
.mv-pin--you{width:26px;height:26px;box-shadow:0 0 0 3px rgb(255 255 255 / 85%),0 2px 8px rgb(0 0 0 / 22%)}
.mv-pin--you .mv-ui{width:14px;height:14px}
.mv-pin--edge{gap:2px;padding-left:7px}
.mv-pin--edge .mv-ui{width:14px;height:14px}

/* ================= Pop-up content ================= */
.pop__badge--ink{background:var(--surface-subtle);color:var(--text-primary)}
.mv-pop-p{margin:12px 0 0;font-size:.9375rem;line-height:1.5;color:var(--text-secondary);text-wrap:pretty}
.pop__lede+.mv-pop-p{margin-top:16px}
.mv-pop-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px}
.mv-pop-list li{display:flex;align-items:flex-start;gap:14px;font-size:.875rem;line-height:1.45}
.mv-pop-list li:not(:has(div>span)){align-items:center}   /* a one-line item sits in the middle of its icon */
.mv-pop-list__ico{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--surface-subtle);color:var(--text-primary)}
.mv-pop-list strong{display:block;font-size:.9375rem;font-weight:600}
.mv-pop-list span{color:var(--text-secondary)}
.mv-pop-brands{display:grid;gap:0;margin-top:4px}
.mv-pop-brands section{padding:16px 0;border-top:1px solid var(--border-divider)}
.mv-pop-brands section:first-child{border-top:0;padding-top:4px}
.mv-pop-brands h4{font-size:var(--type-body);line-height:1.375rem;font-weight:600}
.mv-pop-brands p{margin-top:2px;font-size:.875rem;line-height:1.45;color:var(--text-secondary)}
.mv-pop-brands ul{margin:8px 0 0;padding-left:18px;font-size:.875rem;line-height:1.5;color:var(--text-primary)}
.mv-seo__status{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 4px;font-weight:600}
.mv-seo__status i{width:10px;height:10px;border-radius:50%;background:#8a8d93}
.mv-seo__status[data-tone=green] i{background:#1f8a4c}
.mv-seo__status[data-tone=amber] i{background:#c98a12}
.mv-seo__rows{margin:16px 0 0;border-top:1px solid var(--border-divider)}
.mv-seo__rows>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-divider);font-size:.875rem;line-height:1.45}
.mv-seo__rows dt{flex:none;color:var(--text-secondary)}
.mv-seo__rows dd{min-width:0;text-align:right;font-weight:500;overflow-wrap:anywhere}
.mv-seo__url span{color:var(--text-secondary);font-weight:400}

/* Price breakdown (PandaPopup.priceSheet(); copied from components.css, which vision pages don't load) */
.price-sheet{display:grid;gap:8px;padding:2px 0 34px;font-size:var(--type-body);line-height:var(--leading-body);font-variant-numeric:proportional-nums;color:var(--text-primary)}
.price-sheet__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 16px}
.price-sheet__row>span:first-child{min-width:0}
.price-sheet__row>span:last-child{flex:none;margin-left:auto;text-align:right}   /* on a line of its own (200% text) it stays right */
.price-sheet__row s{margin-right:8px;font-size:var(--type-meta);color:var(--text-secondary)}
.price-sheet__row.is-minus>span:last-child{color:var(--status-success)}
.price-sheet__car{margin:2px 0 -2px;font-weight:600}
.price-sheet__hr{width:100%;margin:6px 0;border:0;border-top:1px solid var(--border-divider)}
.price-sheet__total{margin-top:8px;padding-top:16px;border-top:1px solid var(--border-divider);font-size:var(--type-total);line-height:var(--leading-total);font-weight:600}
.pop:has(.pop__body .price-sheet) .pop__foot{display:none}   /* a breakdown (even under a heading) needs no Got it */
.mv .pop__foot .button:not(.primary){--action-hover:var(--mv-ink-hover)}   /* Got it, Sign out: ink, not blue, on hover */

/* ================= Search pop-up ================= */
.mv-search-host .pop,.mv-search-host .pop__head{background:var(--surface-page)}
.mv-search-host .pop__body{padding-top:2px}
@media(max-width:640px){.mv-search-host>.pop{top:max(8px,calc(var(--mv-status-h) + 2px));max-height:none}}
.mv-search-host .pop__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;box-shadow:0 -1px 0 var(--border-divider);border-radius:0 0 32px 32px}
.mv-search-host .pop[data-shape=center] .pop__foot{border-radius:0 0 28px 28px}
.mv-search-host .pop__foot .button{width:auto;min-width:150px;padding-inline:28px}
.mv-clear{min-height:44px;padding:0 4px;border:0;background:none;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mv-qtabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0 -12px 12px}
.mv-qtab{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:60px;padding:6px 0 10px;border:0;border-radius:12px;background:none;color:var(--text-secondary);cursor:pointer;--mv-icon-fill:var(--surface-page)}
.mv-qtab__label{font-size:.75rem;line-height:1rem;font-weight:500}
.mv-qtab.is-on{color:var(--text-primary)}
.mv-qtab.is-on .mv-qtab__label{font-weight:600}
.mv-qtab.is-on::after{content:"";position:absolute;left:50%;bottom:2px;width:min(48px,76%);height:2px;border-radius:2px;background:var(--text-primary);transform:translateX(-50%)}
.mv-qs{display:grid;gap:12px;padding-bottom:16px}
.mv-q{border-radius:var(--radius-card);background:#fff;box-shadow:var(--shadow-card)}
.mv-q--row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:58px;padding:0 24px;border:0;text-align:left;cursor:pointer;font-size:var(--type-meta);line-height:var(--leading-meta)}
.mv-q__label{color:var(--text-secondary);font-weight:500}
.mv-q__value{min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-q__value.is-empty{font-weight:600}
.mv-q.is-open{padding:24px}
.mv-q__ask{margin:0 0 16px;font-size:1.375rem;line-height:1.75rem;font-weight:600;letter-spacing:-.015em}
.mv-q__body{display:grid;gap:10px}
.mv-q__note{font-size:var(--type-meta);color:var(--text-secondary)}
.mv-opt{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:10px 16px;border:1px solid var(--border-choice);border-radius:var(--radius-choice);background:#fff;text-align:left;cursor:pointer;transition:border-color var(--motion-feedback),box-shadow var(--motion-selection) var(--ease-out)}
.mv-opt:hover{border-color:var(--text-primary)}
.mv-opt.is-on{border-color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--text-primary)}
.mv-opt__text{min-width:0;display:flex;flex-direction:column}
.mv-opt__text b{font-size:.9375rem;line-height:1.25rem;font-weight:600}
.mv-opt__text small{font-size:.8125rem;line-height:1.125rem;color:var(--text-secondary)}
.mv-opt__ico{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--surface-subtle)}
.mv-opt__ico svg{width:18px;height:18px}
.mv-opt--car{padding:10px 16px 10px 10px}
.mv-opt__art{flex:none;width:96px;display:grid;place-items:center}
.mv-opt--car .mv-opt__art{aspect-ratio:4/3;border-radius:10px;background:var(--mv-photo-tile);overflow:hidden}
.mv-opt--car .mv-carimg{width:100%;height:100%}
.mv-opt--car .mv-carimg{display:grid;place-items:center}
.mv-opt--car .mv-carimg>img,.mv-opt--car .mv-carimg>canvas{width:94%;height:auto;object-fit:contain}
.mv-opt--car .mv-carimg>svg{width:92%;height:100%;margin:0 auto}
.mv-addrow{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;border:0;background:none;font-size:var(--type-meta);font-weight:600;color:var(--text-primary);text-decoration:none;cursor:pointer}
.mv-addrow .mv-ui{width:18px;height:18px}
.mv-addrow:hover span{text-decoration:underline}
.mv-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:6px}
.mv-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 0;border:1px solid var(--border-choice);border-radius:var(--radius-choice);background:#fff;cursor:pointer}
.mv-day small{font-size:.6875rem;line-height:.875rem;color:var(--text-secondary)}
.mv-day b{font-size:var(--type-body);line-height:1.25rem;font-weight:600}
.mv-day[aria-pressed=true]{background:var(--text-primary);border-color:var(--text-primary);color:#fff}
.mv-day[aria-pressed=true] small{color:rgb(255 255 255 / 80%)}
.mv-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}
.mv-sw{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;padding:4px 0;border:0;background:none;cursor:pointer}
.mv-sw__dot{width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 10%);transition:box-shadow var(--motion-selection) var(--ease-out)}
.mv-sw.is-on .mv-sw__dot{box-shadow:inset 0 0 0 1px rgb(0 0 0 / 10%),0 0 0 3px #fff,0 0 0 5px var(--text-primary)}
.mv-sw__name{display:flex;flex-direction:column;font-size:.8125rem;line-height:1.125rem;text-align:center}
.mv-sw__name small{font-size:.75rem;line-height:1rem;color:var(--text-secondary)}
.mv-sw.is-on .mv-sw__name{font-weight:600}
.mv-sw.is-on .mv-sw__name small{font-weight:400}

/* ================= Home and service pages ================= */
.mv-hero{padding-top:24px}
@media(min-width:744px){.mv-hero{padding-top:40px}}
.mv-pkgs{display:grid;gap:12px}
@media(min-width:744px){.mv-pkgs{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.mv-pkg{display:flex;flex-direction:column;gap:2px;padding:20px 24px;border-radius:var(--radius-tile-lg);background:var(--surface-subtle);text-decoration:none;color:inherit}
.mv-pkg b{font-size:var(--type-body);line-height:1.375rem;font-weight:600}
.mv-pkg span{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary)}
.mv-pkg__price{margin-top:10px;font-size:var(--type-meta)!important;color:var(--text-primary)!important}
.mv-pkg__price strong{font-weight:600}
.mv-brands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(min-width:744px){.mv-brands{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}}
@media(min-width:1128px){.mv-brands{grid-template-columns:repeat(9,minmax(0,1fr))}}
.mv-brand{display:flex;align-items:center;justify-content:center;min-height:64px;padding:8px;border-radius:var(--radius-choice);background:var(--surface-subtle);font-size:var(--type-meta);font-weight:600;letter-spacing:.02em;text-decoration:none;color:var(--text-primary);transition:background var(--motion-feedback)}
.mv-brand:hover{background:var(--surface-hover)}
.mv-washes{display:grid;gap:12px}
@media(min-width:744px){.mv-washes{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.mv-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px}
.mv-cta-row p{font-size:var(--type-meta);color:var(--text-secondary)}

/* ================= Round 2 kit (2026-10-27) ================= */
/* Brand logos: h px tall at their own width; never stretched. .is-mono: a neutral grey version. The text fallback reads
   as a quiet wordmark. */
.mv-logo-img{display:inline-block;flex:none;max-width:none;object-fit:contain;object-position:left center;vertical-align:middle}
.mv-logo-img.is-mono{filter:grayscale(1) contrast(.9);opacity:.72}
.mv-logo-txt{display:inline-flex;align-items:center;max-width:100%;height:var(--h,20px);font-size:calc(var(--h,20px) * .62);line-height:1;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--text-primary);white-space:nowrap;overflow:hidden}
/* Tire photos fill their tile; the car photo fills its width. */
.mv-tirephoto{display:block}
.mv-carimg{display:block;position:relative}
.mv-carimg>img,.mv-carimg>canvas{display:block;width:100%;height:auto}
.mv-carimg>svg{display:block;width:100%;height:auto}

/* Rating bars: a label, a thin ink bar on a light track, the number at the end. */
.mv-bars__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mv-bars__row{display:grid;grid-template-columns:minmax(76px,auto) minmax(0,1fr) 30px;align-items:center;gap:14px;font-size:var(--type-meta);line-height:var(--leading-meta)}
.mv-bars__label{color:var(--text-primary)}
.mv-bars__track{position:relative;height:4px;border-radius:2px;background:var(--mv-track);overflow:hidden}
.mv-bars__fill{position:absolute;inset:0 auto 0 0;border-radius:2px;background:var(--text-primary)}
.mv-bars__n{text-align:right;font-weight:600}
.mv-bars__row.is-none .mv-bars__none{grid-column:2 / 4;color:var(--text-secondary)}
.mv-bars__note{margin-top:14px;font-size:.8125rem;line-height:1.125rem;color:var(--text-secondary)}

/* The Panda score: a thin ring with the number in it, one word beside it. */
.mv-score{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.mv-score__main{display:inline-flex;align-items:center;gap:8px;min-width:0}
.mv-score__ring{position:relative;flex:none;display:grid;place-items:center}
.mv-score__ring svg{display:block}
.mv-score__ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;line-height:1;font-weight:700;color:var(--text-primary);letter-spacing:-.01em}
.mv-score--md .mv-score__ring b{font-size:15px}
.mv-score--lg .mv-score__ring b{font-size:22px}   /* px, like the ring: at 200% text a rem number spilled out of it */
.mv-score__track{stroke:var(--mv-track)}
.mv-score__arc{stroke:var(--text-primary)}
.mv-score__text{display:flex;flex-direction:column;min-width:0}
.mv-score__word{font-size:var(--type-meta);line-height:1.125rem;font-weight:600;color:var(--text-primary);white-space:nowrap}
.mv-score--md .mv-score__word{font-size:var(--type-body);line-height:1.375rem}
.mv-score--lg .mv-score__word{font-size:1.125rem;line-height:1.5rem}
.mv-score__line{font-size:.8125rem;line-height:1.125rem;color:var(--text-secondary)}
.mv-score--bold>span:first-child{display:inline-flex;align-items:baseline;gap:6px}
.mv-score--bold b{font-size:1.125rem;font-weight:700}
.mv-score--bold b+span{font-size:var(--type-meta);font-weight:600}
.mv-score .mv-info{margin:0}

/* Top picks: three cards (good, better, best). Phones: stacked rows, the photo on the left; from 744: three across. */
.mv-picks{display:grid;gap:12px}
.mv-picks__item,.mv-pick{height:100%}
@media(min-width:744px){.mv-picks{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.mv-picks:has(>.mv-picks__item:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}   /* two picks (a season where the best is also the most popular) share the row */
.mv-pick__link{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center;height:100%;padding:12px 16px 12px 12px;border:1px solid var(--border-divider);border-radius:var(--radius-tile-lg);background:#fff;color:inherit;text-decoration:none;transition:border-color var(--motion-feedback),box-shadow var(--motion-feedback)}
@media(hover:hover){.mv-pick__link:hover{border-color:var(--border-choice);box-shadow:var(--shadow-card-white)}.mv-pick__link:hover .mv-pick__name{text-decoration:underline;text-underline-offset:2px}}
.mv-pick__media{aspect-ratio:1;display:grid;place-items:center;border-radius:12px;background:var(--mv-photo-tile);overflow:hidden}
.mv-pick__media>img{width:86%;height:86%;object-fit:contain;mix-blend-mode:multiply}
.mv-pick__media>svg{width:84%;height:auto}
.mv-pick__body{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.mv-pick__label{padding:2px 9px;border-radius:var(--radius-pill);background:var(--surface-subtle);font-size:.75rem;line-height:1rem;font-weight:600;color:var(--text-primary)}
.mv-pick--best .mv-pick__label{background:var(--text-primary);color:#fff}
.mv-pick__brand{display:flex;align-items:center;height:16px;margin-top:10px}
.mv-pick__name{max-width:100%;margin-top:2px;font-size:var(--type-body);line-height:1.375rem;font-weight:600;overflow-wrap:anywhere}
.mv-pick__reason{font-size:.8125rem;line-height:1.125rem;color:var(--text-secondary)}
.mv-pick__foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;min-width:0;max-width:100%}
.mv-pick__price{min-width:0;font-size:.8125rem;line-height:1.125rem;color:var(--text-secondary)}
.mv-pick__price b{font-weight:600;color:var(--text-primary)}
@media(min-width:744px) and (max-width:1127px){
  .mv-pick__link{grid-template-columns:minmax(0,1fr);gap:0;padding:12px 12px 18px;align-items:stretch;height:100%}
  .mv-pick__media{aspect-ratio:16/10}
  .mv-pick__media>img{width:60%;height:88%}
  .mv-pick__media>svg{width:44%}
  .mv-pick__body{padding:14px 6px 0}
}
@media(min-width:1128px){.mv-pick__link{grid-template-columns:136px minmax(0,1fr);gap:20px;height:100%;padding:14px 20px 14px 14px}}

/* Order tracker. List: dots on a thin line, the label and its date on one line each. Line: one compact row. */
.mv-track{list-style:none;margin:0;padding:0;--dot:20px}
.mv-track__step{position:relative;display:flex;gap:14px;min-height:44px}
.mv-track--list .mv-track__step:not(:last-child)::before{content:"";position:absolute;left:calc(var(--dot) / 2 - 1px);top:calc(var(--dot) + 2px);bottom:-2px;width:2px;border-radius:1px;background:var(--mv-track)}
.mv-track--list .mv-track__step.is-done:not(:last-child)::before{background:var(--text-primary)}
.mv-track__dot{position:relative;z-index:1;flex:none;width:var(--dot);height:var(--dot);display:grid;place-items:center;border:2px solid var(--border-choice);border-radius:50%;background:#fff;color:#fff}
.mv-track__step.is-done .mv-track__dot{border-color:var(--text-primary);background:var(--text-primary)}
.mv-track__step.is-now .mv-track__dot{border-color:var(--text-primary)}
.mv-track__step.is-now .mv-track__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-primary)}
.mv-track__dot .mv-ui{width:12px;height:12px}
.mv-track__text{flex:1;min-width:0;display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:12px;padding-bottom:16px;font-size:var(--type-meta);line-height:max(var(--dot), 1.25rem)}   /* wraps (200% text) without overlapping */
.mv-track__label{color:var(--text-secondary)}
.mv-track__step.is-done .mv-track__label{color:var(--text-primary)}
.mv-track__step.is-now .mv-track__label{color:var(--text-primary);font-weight:600}
.mv-track__date{flex:none;color:var(--text-secondary)}
.mv-track--line{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);--dot:16px}
.mv-track--line .mv-track__step{flex-direction:column;align-items:center;gap:6px;min-height:0;text-align:center}
.mv-track--line .mv-track__step:not(:last-child)::before{content:"";position:absolute;top:calc(var(--dot) / 2 - 1px);left:calc(50% + var(--dot) / 2 + 2px);right:calc(-50% + var(--dot) / 2 + 2px);height:2px;border-radius:1px;background:var(--mv-track)}
.mv-track--line .mv-track__step.is-done:not(:last-child)::before{background:var(--text-primary)}
.mv-track--line .mv-track__text{flex:none;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:0 2px;font-size:.75rem;line-height:1rem}
.mv-track--line .mv-track__step.is-now .mv-track__dot::after{width:6px;height:6px}
.mv-track--line .mv-track__dot .mv-ui{width:10px;height:10px}

/* Push notification. App: an iOS-style banner sliding in from the top. Web: an inline notice (a notification preview),
   or with no place for it, a card at the top right. */
.mv-appicon{flex:none;width:38px;height:38px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 8%);overflow:hidden;position:relative}
.mv-appicon img{position:absolute;left:7px;top:6px;width:68px;height:auto;max-width:none;clip-path:inset(0 64% 0 0)}
.mv-note{display:flex;align-items:flex-start;gap:12px;color:var(--text-primary);text-decoration:none;text-align:left}
.mv-note__text{flex:1;min-width:0;display:flex;flex-direction:column}
.mv-note__top{display:flex;justify-content:space-between;gap:8px;font-size:.8125rem;line-height:1.125rem;color:var(--text-secondary)}
.mv-note__app{font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:.6875rem}
.mv-note__title{margin-top:1px;font-size:.9375rem;line-height:1.25rem;font-weight:600}
.mv-note__body{font-size:.9375rem;line-height:1.25rem;color:var(--text-primary)}
.mv-note__cta{margin-top:8px;font-size:var(--type-meta);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mv-push{position:fixed;z-index:95;left:8px;right:8px;top:calc(var(--mv-status-h) + 4px);max-width:420px;margin:0 auto;padding:12px 14px;border-radius:24px;background:rgb(246 246 246 / 92%);box-shadow:0 8px 30px rgb(0 0 0 / 18%),0 0 0 .5px rgb(0 0 0 / 8%);transform:translateY(calc(-100% - var(--mv-status-h) - 20px));transition:transform 520ms cubic-bezier(.2,.9,.25,1.05);cursor:pointer}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mv-push{background:rgb(245 245 245 / 78%);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}}
.mv-push.is-in{transform:none}
.mv-push--web{top:16px;left:auto;right:16px;width:min(380px,calc(100% - 32px));border-radius:18px;background:#fff}
.mv-notice{padding:16px;border:1px solid var(--border-divider);border-radius:var(--radius-tile-lg);background:#fff;box-shadow:var(--shadow-card-white);opacity:0;transform:translateY(-6px);transition:opacity 260ms var(--ease-out),transform 360ms var(--ease-out)}
.mv-notice.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.mv-push,.mv-notice{transition:opacity 1ms}.mv-push{transform:none;opacity:0}.mv-push.is-in{opacity:1}}

/* Size picker: width / profile / rim as one size. */
.mv-sizepick__legend{margin-bottom:8px;font-size:var(--type-meta);line-height:var(--leading-meta);font-weight:600}
.mv-sizepick__row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px}
.mv-sizepick__sep{font-size:var(--type-body);font-weight:600;color:var(--text-secondary)}
.mv-sizepick__f{cursor:pointer}
.mv-sizepick__f select{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;font-weight:600}
.mv-sizepick__f .mv-ui{position:absolute;right:10px;top:50%;margin-top:-8px;color:var(--text-secondary);pointer-events:none}

/* Pop-up content added in round 2: which film, finishes, the score's weights, the sidewall. */
.mv-pop-brands__head{display:flex;align-items:center;gap:10px;min-width:0}
.mv-pop-brands__head h4{flex:1;min-width:0}
.mv-pop-brands__logo{flex:none;display:grid;place-items:center;min-width:44px;height:32px;padding:0 6px;border:1px solid var(--border-divider);border-radius:8px;background:#fff}
.mv-pop-brands__logo .mv-logo-img{max-width:84px}
.mv-pop-brands__logo .mv-logo-txt{--h:14px!important;font-size:.625rem}
.mv-pop-brands__logo--shop{color:var(--text-primary)}
.mv-pop-brands__rate{flex:none}
.mv-pop-brands section>p{margin-top:8px}
.mv-pop-facts{margin:10px 0 0;display:grid;gap:4px}
.mv-pop-facts>div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;font-size:.875rem;line-height:1.4}
.mv-pop-facts dt{color:var(--text-secondary)}
.mv-pop-facts dd{margin:0;color:var(--text-primary)}
.mv-pop-facts__off{color:var(--border-choice)}
.mv-pop-finish{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:18px}
.mv-pop-finish li{display:flex;align-items:flex-start;gap:14px;font-size:.875rem;line-height:1.45}
.mv-pop-finish__sw{flex:none;width:44px;height:44px}
.mv-pop-finish strong{display:block;font-size:.9375rem;font-weight:600}
.mv-pop-finish span:not(.mv-pop-finish__sw){display:block;color:var(--text-secondary)}
.mv-pop-weights{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.mv-pop-weights li{display:grid;grid-template-columns:84px minmax(0,1fr) 40px;align-items:center;gap:12px;font-size:.875rem}
.mv-pop-weights__bar{height:4px;border-radius:2px;background:var(--mv-track);overflow:hidden}
.mv-pop-weights__bar i{display:block;height:100%;border-radius:2px;background:var(--text-primary)}
.mv-pop-weights b{text-align:right;font-weight:600}
.mv-pop-sidewall{margin:2px 0 4px}
.mv-pop-sidewall svg{display:block;width:100%;height:auto}
.mv-pop-num{font-size:.9375rem;font-weight:700;color:var(--text-primary)}

/* ================= Service icon play (one flat movement, about 0.8 s, once) ================= */
.mv-icon *{transform-box:view-box}
.mvi-spark{transform-origin:24.5px 7.6px}
.mvi-spark2{transform-origin:17.6px 4.8px}
.mvi-spin{transform-origin:16px 16px}
.mvi-drop{transform-origin:16px 24px}
.mvi-glint{transform-origin:14px 19px}
.mvi-shield{transform-origin:24.6px 14px}
.mvi-card{transform-origin:10.5px 24.8px;transform:rotate(var(--r))}
.is-playing .mvi-spark{animation:mvi-twinkle 800ms var(--ease-out) both}
.is-playing .mvi-spark2{animation:mvi-twinkle 700ms 140ms var(--ease-out) both}
.is-playing .mvi-spin{animation:mvi-spin 800ms cubic-bezier(.3,.1,.2,1) both}
.is-playing .mvi-drop{animation:mvi-drop 820ms cubic-bezier(.3,0,.2,1) both}
.is-playing .mvi-glint{animation:mvi-glint 820ms both}
.is-playing .mvi-shield{animation:mvi-pop 700ms cubic-bezier(.2,.9,.3,1.3) both}
.is-playing .mvi-card{animation:mvi-fan 780ms cubic-bezier(.2,.8,.2,1.15) both}
.is-playing .mvi-rain{animation:mvi-rain 700ms cubic-bezier(.4,0,.6,1) both}
.is-playing .mvi-rain2{animation-delay:90ms}
.is-playing .mvi-rain3{animation-delay:180ms}
@keyframes mvi-twinkle{0%{transform:scale(.3) rotate(-45deg);opacity:0}55%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes mvi-spin{from{transform:rotate(0)}to{transform:rotate(90deg)}}
@keyframes mvi-drop{0%{transform:translateY(-8px);opacity:0}45%{transform:translateY(0);opacity:1}60%{transform:scale(1.1,.88)}80%{transform:scale(.97,1.04)}100%{transform:none}}
@keyframes mvi-glint{0%,60%{opacity:0}100%{opacity:1}}
@keyframes mvi-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:none;opacity:1}}
@keyframes mvi-fan{from{transform:rotate(0)}to{transform:rotate(var(--r))}}
@keyframes mvi-rain{0%{transform:translateY(-6px);opacity:0}40%{opacity:1}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.is-playing *{animation:none!important}.mv-tab::after{transition:none}}
@media(forced-colors:active){.mv-sbar,.mv-spill,.mv-cpill,.mv-q,.mv-opt{border:1px solid CanvasText}.mv-pin{border:1px solid CanvasText}}

/* The car photo's credit at the end of a page with no web footer (the app, the booking): CC BY-SA (MV.chrome) */
.mv-appcredit{max-width:var(--mv-max);margin:28px auto 20px;padding:0 var(--mv-gutter);font-size:12px;line-height:16px;color:var(--text-secondary);text-align:center}