/*
 * AVAVA Car — HTML template
 * Main stylesheet
 *
 * Sizing: the desktop layout is drawn on a 2560px artboard.
 * --u is 1px of that artboard (viewport width / 2560) and is set by
 * assets/js/main.js; below 1200px it becomes a fixed value and the
 * grids reflow (see "Responsive").
 *
 * Table of contents
 *   01. Fonts
 *   02. Tokens — light theme
 *   03. Tokens — dark theme
 *   04. Reset and base
 *   05. Icons
 *   06. Layout
 *   07. Section heads
 *   08. Buttons, pills and chips
 *   09. Photo slots
 *   10. Header
 *   11. Hero
 *   12. Featured — spec strip
 *   13. Body type — bento
 *   14. Car of the week — stage
 *   15. Why Avava
 *   16. How it works
 *   17. Finance — live calculator
 *   18. Reviews — photo wall
 *   19. Journal
 *   20. Stats
 *   21. Footer — spec sheet
 *   22. Responsive — tablet (768–1199px)
 *   23. Responsive — phone (≤767px)
 *   24. Reduced motion
 *   25. Sign in / sign up popup
 *   26b. Skin — Cobalt (account › Preferences)
 *   26. Skin — Racing Green (Home V2)
 *   27. Preloader
 *   28. Inner pages — header, breadcrumbs, page header
 *   29. About — story
 *   30. About — by the numbers
 *   31. About — promises
 *   32. About — team
 *   33. About — milestones
 *   34. About — visit us
 *   35. About — tablet and phone
 *   36. Service — shared
 *   37. Service — 01 services
 *   38. Service — 02 order tracker
 *   39. Service — 03 membership cards
 *   40. Service — 04 booking form and ticket
 *   41. Service — 05 FAQ
 *   42. Service — tablet and phone
 *   43. Pricing — shared
 *   44. Pricing — 01 plans
 *   45. Pricing — 02 compare table
 *   46. Pricing — 03 buyer fees
 *   47. Pricing — 04 add-ons
 *   48. Pricing — 05 flip FAQ
 *   49. Pricing — tablet and phone
 *   50. FAQ — shared
 *   51. FAQ — 01 search
 *   52. FAQ — 02 questions
 *   53. FAQ — 03 popular
 *   54. FAQ — 04 contact band
 *   55. FAQ — 05 guides
 *   56. FAQ — tablet and phone
 *   57. Contact — shared
 *   58. Contact — 01 ways to reach us
 *   59. Contact — 02 message
 *   60. Contact — 03 visit
 *   61. Contact — 04 departments
 *   62. Contact — tablet and phone
 *   63. Terms — shared
 *   64. Terms — 01 the short version
 *   65. Terms — 02 the full agreement
 *   66. Terms — 03 what changed
 *   67. Terms — 04 questions
 *   68. Terms — print
 *   69. Terms — tablet and phone
 *   70. Listing v1 — shared
 *   71. Listing v1 — 01 search console
 *   72. Listing v1 — 02 results: grid cards
 *   73. Listing v1 — 02 results: list rows
 *   74. Listing v1 — pagination
 *   75. Listing v1 — 04 can't find it
 *   76. Listing v1 — tablet and phone
 *   77. 404 — shared
 *   78. 404 — 01 lost
 *   79. 404 — 02 destinations
 *   80. 404 — 03 you might like
 *   81. 404 — tablet and phone
 *   82. Listing v2 — shared
 *   83. Listing v2 — 01 two-tier console
 *   84. Listing v2 — 02 spec cards
 *   85. Listing v2 — 02 spec rows
 *   86. Listing v2 — tablet and phone
 *   87. Listing v3 — shared
 *   88. Listing v3 — 01 garage console
 *   89. Listing v3 — 02 full-bleed cards
 *   90. Listing v3 — 02 cinematic rows
 *   91. Listing v3 — tablet and phone
 *   92. Listing v4 — shared
 *   93. Listing v4 — toolbar
 *   94. Listing v4 — sidebar
 *   95. Listing v4 — results: price-tag cards
 *   96. Listing v4 — tablet and phone
 *   97. Listing v5 — dark sidebar
 *   98. Listing v5 — stat-strip cards
 *   99. Listing v5 — tablet and phone
 *   100. Listing v6 — condition tiles and the results controls
 *   101. Listing v6 — tablet and phone
 *   102. Listing Map v1 — shared
 *   103. Listing Map v1 — layout and map
 *   104. Listing Map v1 — results
 *   105. Listing Map v1 — smaller screens
 *   106. Listing Map v2 — command bar
 *   107. Listing Map v2 — smaller screens
 *   108. Listing Map v3 — the app page
 *   109. Listing Single v1 — shared
 *   110. Listing Single v1 — hero and key specs
 *   111. Listing Single v1 — overview, history, finance
 *   112. Listing Single v1 — visit, similar cars, sticky bar
 *   113. Listing Single v1 — smaller screens
 *   114. Listing Single v2 — shared
 *   115. Listing Single v2 — hero and section nav
 *   116. Listing Single v2 — gallery, stories, specs
 *   117. Listing Single v2 — condition, history
 *   118. Listing Single v2 — finance 122e
 *   119. Listing Single v2 — showroom, ribbon
 *   120. Listing Single v2 — smaller screens
 *   121. Listing Single v3 — split and stage
 *   122. Listing Single v3 — the reading column
 *   123. Listing Single v3 — the fixed bar
 *   124. Listing Single v3 — smaller screens
 *   125. Listing Single v4 — title and bento
 *   126. Listing Single v4 — price history, comps, cost
 *   127. Listing Single v4 — finance, equipment, history, next
 *   128. Listing Single v4 — smaller screens
 *   129. Listing Single v5 — bands and chapters
 *   130. Listing Single v5 — add-ons, inspection, closing band
 *   131. Listing Single v5 — smaller screens
 *   132. Listing Single v6 — hero and ask bar
 *   133. Listing Single v6 — the questions
 *   134. Listing Single v6 — the advisor chat
 *   135. Listing Single v6 — smaller screens
 *   136. Shop v1 — search, car, categories
 *   137. Shop v1 — filters and results
 *   138. Shop v1 — kits, why, cart
 *   139. Shop v1 — smaller screens
 *   140. Shop v3 — hero slider, category ribbon
 *   141. Shop v3 — tabs, product cards, featured brand
 *   142. Shop v3 — catalog, reviews, club, toast
 *   143. Shop v3 — smaller screens
 *   144. Shop v2 — category tiles, sticky toolbar
 *   145. Shop v2 — results, cards, list, pages
 *   146. Shop v2 — smaller screens
 *   147. Shop single v1 — hero: gallery and buy column
 *   148. Shop single v1 — bundle and details bento
 *   149. Shop single v1 — reviews, similar, recent, review dialog
 *   150. Shop single v1 — smaller screens
 *   151. Shop single v2 — showroom hero
 *   152. Shop single v2 — make it a kit
 *   153. Shop single v2 — details bento
 *   154. Shop single v2 — how they hold up
 *   155. Shop single v2 — you may also like
 *   156. Shop single v2 — tablet and phone
 *   157. Checkout — title row and step cards
 *   158. Checkout — delivery and payment
 *   159. Checkout — order summary
 *   160. Checkout — tablet and phone
 *   161. Listing v7 — compact inventory, 4-up grid
 *   162. Listing v7 — tablet and phone
 *   163. Shop v4 — filters and car pickers
 *   164. Shop v4 — results bar, spec-sheet cards, pages
 *   165. Shop v4 — tablet and phone
 *   166. Blog — feed with the ruler rail
 *   167. Blog — spec-sheet sidebar
 *   168. Blog — tablet and phone
 *   169. Blog post — hero, fact strip, rail, text
 *   170. Blog post — comments
 *   171. Blog post — tablet and phone
 *   172. Account · Profile — spec-sheet sidebar
 *   173. Account · Profile — the form
 *   174. Account · Profile — tablet and phone
 *   175. Account · My garage — car pills, the car card
 *   176. Account · My garage — value, service, reminders, parts
 *   177. Account · My garage — tablet and phone
 *   178. Account · Saved cars — KPIs, price-drop banner, toolbar
 *   179. Account · Saved cars — the card grid
 *   180. Account · Saved cars — saved searches, compare tray, dialog
 *   181. Account · Saved cars — tablet and phone
 *   182. Account · My listings — KPIs, tabs
 *   183. Account · My listings — the listing card
 *   184. Account · My listings — right panel, strip
 *   185. Account · My listings — tablet and phone
 *   186. Account · Orders — filters and the active order
 *   187. Account · Orders — order cards
 *   188. Account · Orders — returns
 *   189. Account · Orders — tablet and phone
 *   190. Account · Test drives — the next drive
 *   191. Account · Test drives — route, logistics, actions
 *   192. Account · Test drives — tabs, drive cards, quick book
 *   193. Account · Test drives — tablet and phone
 *   194. Account · Trade-in — the instant offer
 *   195. Account · Trade-in — breakdown, payout, tracker
 *   196. Account · Trade-in — my offers on other cars
 *   197. Account · Trade-in — tablet and phone
 *   198. Account · Messages — the conversation list
 *   199. Account · Messages — the thread
 *   200. Account · Messages — chat cards, typing, composer
 *   201. Account · Messages — tablet and phone
 *   202. Account · Payment methods — the wallet
 *   203. Account · Payment methods — the add form
 *   204. Account · Payment methods — finance, payouts, history
 *   205. Account · Payment methods — tablet and phone
 *   206. Account · Notifications — mode switch and the activity feed
 *   207. Account · Notifications — settings
 *   208. Account · Notifications — tablet and phone
 *   209. Account · Security — score
 *   210. Account · Security — cards, rows, controls
 *   211. Account · Security — tablet and phone
 *   212. Account · Preferences — save bar, cards, controls
 *   213. Account · Preferences — preview, theme, accent, budget
 *   214. Account · Preferences — tablet and phone
 *   215. Sell my car — step bar, form card, shared controls
 *   216. Sell my car — step panes
 *   217. Sell my car — live preview
 *   218. Sell my car — tablet and phone
 *   219. Dealer — shell: grid and sidebar
 *   220. Dealer dashboard — greeting and KPIs
 *   221. Dealer dashboard — cards: tasks, sales, funnel
 *   222. Dealer dashboard — today, leaderboard, reputation
 *   223. Dealer dashboard — leads, inventory
 *   224. Dealer — tablet and phone
 *   225. Dealer · Leads — KPI row, SLA bar, filters
 *   226. Dealer · Leads — grouped list, rows, bulk bar
 *   227. Dealer · Leads — the lead file
 *   228. Dealer · Leads — tablet and phone
 *   229. Dealer · Test drives — KPIs, day bar
 *   230. Dealer · Test drives — day calendar
 *   231. Dealer · Test drives — drive panel and fleet
 *   232. Dealer · Test drives — tablet and phone
 *   233. Dealer · Deals — KPIs and the pipeline board
 *   234. Dealer · Deals — the deal sheet
 *   235. Dealer · Deals — tablet and phone
 *   236. Dealer · Inventory — KPIs, stock health, price position
 *   237. Dealer · Inventory — toolbar, smart views, bulk bar
 *   238. Dealer · Inventory — stock table
 *   239. Dealer · Inventory — the car panel
 *   240. Dealer · Inventory — tablet and phone
 *   241. Dealer · Add listing — VIN hero and the ready rail
 *   242. Dealer · Add listing — section cards
 *   243. Dealer · Add listing — pricing, options, publish
 *   244. Dealer · Add listing — preview, placement, quality
 *   245. Dealer · Add listing — tablet and phone
 *   246. Dealer · Trade-ins — KPIs and the queue strip
 *   247. Dealer · Trade-ins — the desk (left)
 *   248. Dealer · Trade-ins — the desk (right) and the action bar
 *   249. Dealer · Trade-ins — tablet and phone
 *   250. Dealer · Finance — KPIs and the application picker
 *   251. Dealer · Finance — the builder
 *   252. Dealer · Finance — lenders, documents, actions
 *   253. Dealer · Finance — tablet and phone
 *   254. Dealer · Messages — KPIs and the conversation list
 *   255. Dealer · Messages — the thread
 *   256. Dealer · Messages — customer context
 *   257. Dealer · Messages — tablet and phone
 *   258. Dealer · Reviews — rating strip and filters
 *   259. Dealer · Reviews — queue and review card
 *   260. Dealer · Reviews — AI analysis, preview, customer
 *   261. Dealer · Reviews — tablet and phone
 *   262. Dealer · Analytics — controls, summary, goals, KPIs
 *   263. Dealer · Analytics — chart, insights, funnel, sources
 *   264. Dealer · Analytics — profit, inventory, team, heatmap
 *   265. Dealer · Analytics — tablet and phone
 *   266. Dealer · Team — KPI row, invite and tabs
 *   267. Dealer · Team — people: grid, org chart, profile
 *   268. Dealer · Team — roles & permissions
 *   269. Dealer · Team — lead routing
 *   270. Dealer · Team — schedule and time off
 *   271. Dealer · Profile — tokens, strength hero
 *   272. Dealer · Profile — insights and the unpublished bar
 *   273. Dealer · Profile — section cards
 *   274. Dealer · Profile — buyer preview
 *   275. Dealer · Profile — tablet and phone
 *   276. Dealer · Billing — tokens, alerts, shared bits
 *   277. Dealer · Billing — plan, usage, spend, budget
 *   278. Dealer · Billing — plans comparison
 *   279. Dealer · Billing — next invoice and payment methods
 *   280. Dealer · Billing — invoices, details, tablet and phone
 *   281. Dealer · Settings — search, unsaved bar, shared rows
 *   282. Dealer · Settings — left column
 *   283. Dealer · Settings — cards
 *   284. Dealer · Settings — tablet and phone
 */

/* == 01. Fonts ========================================================= */
@font-face {
  font-family: "BBH Bartle";
  src: url("../fonts/BBHBartle-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* == 02. Tokens — light theme ========================================== */
:root {
  --u: calc(100vw / 2560);
  --gut: calc(var(--u) * 60);

  --acc: #d8470e;
  --acc-d: #c23e0b;
  --acc-s: #fde7dc;
  --acc-s2: #fbd5c2;
  --acc-s3: #fff4ee;
  --acc-sh: var(--acc-a24);
  --acc-a03: rgba(216, 71, 14, .03);
  --acc-a04: rgba(216, 71, 14, .04);
  --acc-a06: rgba(216, 71, 14, .06);
  --acc-a07: rgba(216, 71, 14, .07);
  --acc-a08: rgba(216, 71, 14, .08);
  --acc-a10: rgba(216, 71, 14, .1);
  --acc-a12: rgba(216, 71, 14, .12);
  --acc-a14: rgba(216, 71, 14, .14);
  --acc-a16: rgba(216, 71, 14, .16);
  --acc-a18: rgba(216, 71, 14, .18);
  --acc-a20: rgba(216, 71, 14, .2);
  --acc-a24: rgba(216, 71, 14, .24);
  --acc-a25: rgba(216, 71, 14, .25);
  --acc-a30: rgba(216, 71, 14, .3);
  --acc-a35: rgba(216, 71, 14, .35);
  --acc-a40: rgba(216, 71, 14, .4);
  --acc-a45: rgba(216, 71, 14, .45);
  --acc-a50: rgba(216, 71, 14, .5);
  --ok: #2fa36b;

  --bg: #f7f8fa;
  --page: #fdfefe;
  --stage: #f4f5f7;
  --surf: #fff;
  --surf2: #f4f5f7;
  --ink: #111418;
  --ink-h: #2a2e35;
  --on-ink: #fff;
  --on-ink-25: rgba(255, 255, 255, .25);
  --on-ink-55: rgba(255, 255, 255, .55);
  --mute: #8a9099;
  --body: #5f6671;
  --line: rgba(17, 20, 24, .25);
  --line2: rgba(17, 20, 24, .22);
  --line3: rgba(17, 20, 24, .2);
  --chip-line: rgba(17, 20, 24, .22);
  --line-bar: #e3e5e8;
  --hair: rgba(17, 20, 24, .1);
  --ghost: rgba(17, 20, 24, .12);
  --ghost2: rgba(17, 20, 24, .1);
  --tint: var(--acc-a04);
  --tint2: var(--acc-a03);
  --glass: rgba(255, 255, 255, .88);
  --glass9: rgba(255, 255, 255, .9);
  --glass94: rgba(255, 255, 255, .94);
  --glass86: rgba(255, 255, 255, .86);
  --glass80: rgba(255, 255, 255, .8);
  --glass60: rgba(255, 255, 255, .6);
  --glass50: rgba(255, 255, 255, .5);
  --s1: #eceef1;
  --s2: #f5f6f8;
  --av1: #e3e5e9;
  --av2: #f0f1f3;
  --shadow: 0 20px 50px rgba(17, 20, 24, .1);
  --stripes: repeating-linear-gradient(135deg, var(--s1) 0 calc(var(--u) * 14), var(--s2) calc(var(--u) * 14) calc(var(--u) * 28));

  color-scheme: light;
}

/* == 03. Tokens — dark theme =========================================== */
[data-theme="dark"] {
  --bg: #111317;
  --page: #111317;
  --stage: #0f1114;
  --surf: #15171b;
  --surf2: #1b1e23;
  --ink: #f2f3f5;
  --ink-h: #d9dce1;
  --on-ink: #111418;
  --on-ink-25: rgba(17, 20, 24, .25);
  --on-ink-55: rgba(17, 20, 24, .55);
  --mute: #7d838d;
  --body: #a3a9b3;
  --line: rgba(242, 243, 245, .18);
  --line2: rgba(242, 243, 245, .16);
  --line3: rgba(242, 243, 245, .16);
  --chip-line: rgba(242, 243, 245, .2);
  --line-bar: #2a2e35;
  --hair: rgba(242, 243, 245, .1);
  --ghost: rgba(242, 243, 245, .1);
  --ghost2: rgba(242, 243, 245, .08);
  --tint: var(--acc-a07);
  --tint2: var(--acc-a06);
  --glass: rgba(17, 19, 23, .85);
  --glass9: rgba(17, 19, 23, .85);
  --glass94: rgba(20, 22, 27, .9);
  --glass86: rgba(20, 22, 27, .82);
  --glass80: rgba(255, 255, 255, .03);
  --glass60: rgba(22, 24, 29, .6);
  --glass50: rgba(22, 24, 29, .5);
  --s1: #1a1d22;
  --s2: #15171b;
  --av1: #1f2228;
  --av2: #15171b;

  color-scheme: dark;
}

/* == 04. Reset and base ================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Geist, Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
address {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3 {
  font-weight: 300;
}

ul,
ol {
  list-style: none;
}

address {
  font-style: normal;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--acc);
}

button,
input,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

input::placeholder {
  color: var(--mute);
  opacity: 1;
}

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 20px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 14px;
}

.skip:focus {
  top: 12px;
}

.acc {
  color: var(--acc);
}

.mute {
  color: var(--mute);
}

.nobr {
  white-space: nowrap;
}

.flip {
  transform: rotate(180deg);
}

/* == 05. Icons ========================================================= */
.ico {
  flex-shrink: 0;
}

.i10 { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.i11 { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.i12 { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.i14 { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.i16 { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.i18 { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.i20 { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.i22 { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.i30 { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.i-pin { width: calc(var(--u) * 14); height: calc(var(--u) * 18); color: var(--acc); }
.i-pin-s { width: calc(var(--u) * 10); height: calc(var(--u) * 13); }
.i-shield { width: calc(var(--u) * 20); height: calc(var(--u) * 22); }
.i-truck { width: calc(var(--u) * 19); height: calc(var(--u) * 18); }
.i-bm { width: calc(var(--u) * 16); height: calc(var(--u) * 18); }

.star {
  color: var(--acc);
}

.star--ink {
  color: var(--ink);
}

/* Outline figures set in BBH Bartle */
.fig {
  overflow: visible;
}

.fig text {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  fill: none;
  stroke-width: 1;
}

.fig--ink text { stroke: var(--ink); }
.fig--acc text { stroke: var(--acc); }
.fig--soft text { stroke: var(--acc); fill: var(--acc-a08); }
.fig--soft10 text { stroke: var(--acc); fill: var(--acc-a10); }

/* Rulers */
.ruler {
  width: 100%;
  height: calc(var(--u) * 14);
  overflow: visible;
}

.ruler line {
  stroke-width: .5;
}

.ruler__maj { stroke: var(--acc); }
.ruler__min { stroke: var(--mute); }

.ruler text {
  font-family: Geist, sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 1.5px;
  fill: var(--mute);
}

/* account › Preferences › Reduce motion: <html data-motion="reduce"> (theme.js) switches animations off site-wide */
[data-motion="reduce"] *,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

/* == 06. Layout ======================================================== */
.wrap {
  margin-left: var(--gut);
  margin-right: var(--gut);
}

.sec {
  display: flex;
  flex-direction: column;
}

.sep {
  margin: calc(var(--u) * 80) var(--gut);
  height: .5px;
  border: 0;
  background: var(--line);
}

.hd-gap {
  height: calc(var(--u) * 80);
}

/* == 07. Section heads ================================================= */
.shead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 60);
  padding: 0 var(--gut);
}

.shead__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.shead--80 .shead__l {
  gap: calc(var(--u) * 22);
}

.shead__r {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 36);
}

.shead--jr .vsep {
  background: var(--line2);
}

.shead--why .shead__r {
  gap: calc(var(--u) * 30);
}

.shead--jr .shead__r {
  gap: calc(var(--u) * 24);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.92);
  color: var(--mute);
}

.eyebrow__n {
  color: var(--acc);
}

.eyebrow__rule {
  width: calc(var(--u) * 60);
  height: .5px;
  background: var(--mute);
}

.h2 {
  font-size: max(12px, calc(var(--u) * 96));
  letter-spacing: -.045em;
  line-height: 1;
  white-space: nowrap;
}

.shead--80 .h2 {
  font-size: max(12px, calc(var(--u) * 80));
}

.vsep {
  width: .5px;
  height: calc(var(--u) * 36);
  background: var(--line);
}

.vsep--60 { height: calc(var(--u) * 60); margin: 0 calc(var(--u) * 10); background: var(--line2); }
.vsep--30 { height: calc(var(--u) * 30); margin: 0 calc(var(--u) * 10); background: var(--line2); }
.vsep--70 { height: calc(var(--u) * 70); background: var(--line3); }

/* == 08. Buttons, pills and chips ====================================== */
.chips {
  display: flex;
}

.pill {
  height: calc(var(--u) * 55);
  padding: 0 calc(var(--u) * 28);
  border-radius: calc(var(--u) * 28);
  border: .5px solid transparent;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 18));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
  color: var(--ink);
}

.pill--sm {
  padding: 0 calc(var(--u) * 22);
  font-size: max(12px, calc(var(--u) * 15));
  letter-spacing: calc(var(--u) * 1.2);
}

.pill:hover {
  color: var(--acc);
}

.pill.is-on {
  border-color: var(--ink);
}

.pill__n {
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.circ {
  width: calc(var(--u) * 55);
  height: calc(var(--u) * 55);
  border-radius: 50%;
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
}

.circ:hover {
  color: var(--acc);
}

.circ--ink {
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
}

.circ--ink:hover {
  background: var(--acc);
  color: #fff;
}

.circ--glass {
  background: var(--glass50);
  transition: background .2s, color .2s;
}

.circ--48 { width: calc(var(--u) * 48); height: calc(var(--u) * 48); }
.circ--50 { width: calc(var(--u) * 50); height: calc(var(--u) * 50); }

.circ[aria-pressed="true"] {
  color: var(--acc);
  border-color: var(--acc);
}

.navbtns {
  display: flex;
  gap: calc(var(--u) * 14);
}

.navbtns--12 {
  gap: calc(var(--u) * 12);
}

/* pill with a round arrow at the end */
.apill {
  height: calc(var(--u) * 55);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 30);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 16));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  white-space: nowrap;
  color: var(--ink);
}

.apill__dot {
  width: calc(var(--u) * 39);
  height: calc(var(--u) * 39);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.apill--ink {
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
}

.apill--ink:hover {
  background: var(--acc);
  color: #fff;
}

/* 48px text pills */
.lpill {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  white-space: nowrap;
  color: var(--ink);
  letter-spacing: .14em;
}

.lpill--ink {
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 22);
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
}

.lpill--ink:hover {
  background: var(--acc);
  color: #fff;
}

.lpill__dot {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* primary CTA buttons (hero) */
.btn {
  height: calc(var(--u) * 53);
  border-radius: calc(var(--u) * 27);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 500;
}

.btn--acc {
  width: calc(var(--u) * 249);
  background: var(--acc);
  color: #fff;
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 20) var(--acc-sh);
}

.btn--acc:hover {
  background: var(--acc-d);
  color: #fff;
}

.btn--line {
  width: calc(var(--u) * 251);
  background: rgba(255, 255, 255, .9);
  border: calc(var(--u) * 2) solid var(--acc);
  color: var(--acc);
}

.btn--line:hover {
  background: var(--acc-s3);
  color: var(--acc);
}

[data-theme="dark"] .btn--line {
  background: rgba(22, 24, 29, .9);
}

/* small badges on cards */
.badge {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 7);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  white-space: nowrap;
}

.badge--line { border: .5px solid var(--ink); color: var(--ink); }
.badge--acc { background: var(--acc); color: #fff; }
.badge--ink { background: var(--ink); color: var(--on-ink); }

/* outline tags (car of the week) */
.tag {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  border: .5px solid var(--ink);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  flex-shrink: 0;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
}

.tag--acc {
  border: 0;
  background: var(--acc);
  color: #fff;
}

/* live status dot */
.live-dot {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.dot {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  flex-shrink: 0;
}

.dot--ok {
  background: var(--ok);
  box-shadow: 0 0 0 calc(var(--u) * 5) rgba(47, 163, 107, .18);
}

.dot--8 {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  box-shadow: 0 0 0 calc(var(--u) * 5) rgba(47, 163, 107, .2);
}

/* striped avatars */
.av {
  display: block;
  border-radius: 50%;
  flex-shrink: 0;
  background: repeating-linear-gradient(135deg, var(--s1) 0 calc(var(--u) * 5), var(--s2) calc(var(--u) * 5) calc(var(--u) * 10));
  border: 1.5px solid var(--surf);
}

.av--52 { width: calc(var(--u) * 52); height: calc(var(--u) * 52); }
.av--40 { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.av--line { border: .5px solid var(--line2); }

/* cell heads (why, journal) */
.cell__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.64);
  color: var(--mute);
}

.cell__head .acc:first-child {
  margin-right: calc(var(--u) * 12);
}

/* checklist chips */
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.checks li {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
  color: var(--ink);
}

/* progress line */
.progress {
  flex: 1;
  height: .5px;
  background: var(--line);
  position: relative;
}

.progress__fill {
  position: absolute;
  left: 0;
  top: -1px;
  width: 56%;
  height: 2px;
  background: var(--acc);
  transition: width .3s;
}

/* input pill with a round submit button */
.field {
  height: calc(var(--u) * 55);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 5) 0 calc(var(--u) * 26);
  gap: calc(var(--u) * 14);
}

.field__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  color: var(--ink);
}

.field__go {
  width: calc(var(--u) * 45);
  height: calc(var(--u) * 45);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.field__go--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.field:focus-within {
  border-color: var(--acc);
}

.field.is-done .field__go {
  background: var(--ok);
}

/* == 09. Photo slots =================================================== */
.slot {
  position: relative;
  background: var(--stripes);
  --mk: calc(var(--u) * 14);
  --mk-in: calc(var(--u) * 6.5);
}

.slot--16 { --mk: calc(var(--u) * 16); --mk-in: calc(var(--u) * 7.5); }
.slot--12 { --mk: calc(var(--u) * 12); --mk-in: calc(var(--u) * 5.5); }

.slot__mk {
  position: absolute;
  width: var(--mk);
  height: var(--mk);
  pointer-events: none;
  background:
    linear-gradient(var(--acc), var(--acc)) var(--mk-in) 0 / 1px 100% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 0 var(--mk-in) / 100% 1px no-repeat;
}

.slot__mk--tl { left: calc(var(--u) * 10); top: calc(var(--u) * 10); }
.slot__mk--tr { right: calc(var(--u) * 10); top: calc(var(--u) * 10); }
.slot__mk--bl { left: calc(var(--u) * 10); bottom: calc(var(--u) * 10); }
.slot__mk--br { right: calc(var(--u) * 10); bottom: calc(var(--u) * 10); }

.slot__tag {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 10) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 12);
  background: var(--glass);
  border: .5px solid var(--line);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  font-weight: 400;
  color: var(--mute);
  white-space: nowrap;
}

.slot__size {
  color: var(--ink);
}

/* avatar photos — characters from the AVAVA set and the team portraits */
.av.av--p-daniel { background: #1b1e23 url("../img/av-daniel.webp") center / cover no-repeat; }
.av.av--p-chris { background: #1b1e23 url("../img/av-chris.webp") center / cover no-repeat; }
.av.av--p-priya { background: #1b1e23 url("../img/av-priya.webp") center / cover no-repeat; }
.av.av--p-reyes { background: #1b1e23 url("../img/av-reyes.webp") center / cover no-repeat; }
.av.av--p-chen { background: #1b1e23 url("../img/av-chen.webp") center / cover no-repeat; }
.av.av--p-patel { background: #1b1e23 url("../img/av-patel.webp") center / cover no-repeat; }
.av.av--p-kim { background: #1b1e23 url("../img/av-kim.webp") center / cover no-repeat; }
.av.av--p-lee { background: #1b1e23 url("../img/av-lee.webp") center / cover no-repeat; }
.av.av--p-agent-1 { background: #1b1e23 url("../img/av-agent-1.webp") center / cover no-repeat; }
.av.av--p-agent-2 { background: #1b1e23 url("../img/av-agent-2.webp") center / cover no-repeat; }
.av.av--p-agent-3 { background: #1b1e23 url("../img/av-agent-3.webp") center / cover no-repeat; }
.av.av--p-alex-moreno { background: #1b1e23 url("../img/av-team-alex-moreno.webp") center / cover no-repeat; }
.av.av--p-jordan-reyes { background: #1b1e23 url("../img/av-team-jordan-reyes.webp") center / cover no-repeat; }
.av.av--p-maya-chen { background: #1b1e23 url("../img/av-team-maya-chen.webp") center / cover no-repeat; }
.av.av--p-priya-patel { background: #1b1e23 url("../img/av-team-priya-patel.webp") center / cover no-repeat; }
.av.av--p-sam-okafor { background: #1b1e23 url("../img/av-team-sam-okafor.webp") center / cover no-repeat; }

/* == 10. Header ======================================================== */
:root {
  --hs96: rgba(255, 255, 255, .96);
  --hs94: rgba(255, 255, 255, .94);
  --hs92: rgba(255, 255, 255, .92);
  --hs90: rgba(255, 255, 255, .9);
  --hs60: rgba(255, 255, 255, .6);
  --hi04: rgba(17, 20, 24, .04);
  --hi15: rgba(17, 20, 24, .15);
  --hi18: rgba(17, 20, 24, .18);
  --hi25: rgba(17, 20, 24, .25);
}

[data-theme="dark"] {
  --hs96: rgba(22, 24, 29, .96);
  --hs94: rgba(22, 24, 29, .94);
  --hs92: rgba(22, 24, 29, .92);
  --hs90: rgba(22, 24, 29, .9);
  --hs60: rgba(22, 24, 29, .6);
  --hi04: rgba(242, 243, 245, .04);
  --hi15: rgba(242, 243, 245, .15);
  --hi18: rgba(242, 243, 245, .18);
  --hi25: rgba(242, 243, 245, .25);
}

.hd {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 30;
  color: var(--ink);
}

.hd__bar {
  height: calc(var(--u) * 63);
  margin: 0 var(--gut);
  padding-top: calc(var(--u) * 20);
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 400;
  color: var(--body);
}

.hd__info,
.hd__util {
  height: calc(var(--u) * 22);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 36);
}

.hd__loc {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.hd__sep {
  width: 1px;
  height: calc(var(--u) * 18);
  background: var(--hi15);
}

.hd__main {
  position: relative;
  height: calc(var(--u) * 57);
  margin: calc(var(--u) * 20) var(--gut) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.logo {
  height: calc(var(--u) * 57);
  width: auto;
}

.logo--dark,
[data-theme="dark"] .logo--light {
  display: none;
}

[data-theme="dark"] .logo--dark {
  display: block;
}

/* main navigation */
.nav {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 10;
}

.nav__list {
  display: flex;
  height: calc(var(--u) * 55);
}

.nav__item {
  position: relative;
}

.nav__btn {
  height: calc(var(--u) * 55);
  padding: 0 calc(var(--u) * 44);
  border-radius: calc(var(--u) * 28);
  border: .5px solid transparent;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 20));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.2);
  color: var(--ink);
}

.nav__btn:hover,
.nav__item.is-open .nav__btn {
  color: var(--acc);
}

.nav__btn.is-current {
  border-color: var(--ink);
}

.dd {
  display: none;
  position: absolute;
  left: 0;
  top: calc(var(--u) * 55);
  padding-top: calc(var(--u) * 12);
  z-index: 20;
}

.nav__item.is-open .dd {
  display: block;
}

.dd__list {
  width: calc(var(--u) * 380);
  padding: calc(var(--u) * 10) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--ink);
  background: var(--hs96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

.dd__link {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
  padding: calc(var(--u) * 18) 0;
  border-bottom: .5px solid var(--hi18);
  color: var(--ink);
}

.dd__list li:last-child .dd__link {
  border-bottom: 0;
}

.dd__link[aria-current="page"] {
  color: var(--acc);
}

.dd__n {
  font-size: max(12px, calc(var(--u) * 13));
  letter-spacing: calc(var(--u) * 1.3);
  color: var(--mute);
}

.dd__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 17));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.04);
  white-space: nowrap;
}

.dd__go {
  opacity: .35;
}

/* second level (LISTING, EXPLORE) */
.dd__grp {
  position: relative;
}

.dd__link--grp {
  width: 100%;
  text-align: left;
  font-weight: 300;
}

.dd__more {
  opacity: .6;
}

.dd__grp.is-open > .dd__link--grp {
  color: var(--acc);
}

.dd__sub {
  display: none;
  position: absolute;
  left: 100%;
  top: calc(var(--u) * -10);
  padding-left: calc(var(--u) * 40);
  z-index: 21;
}

.dd__sub--up {
  top: calc(var(--u) * -67);
}

.dd__grp.is-open > .dd__sub {
  display: block;
}

.dd__list--sub {
  width: calc(var(--u) * 340);
}

.dd__list--sub .dd__link {
  gap: calc(var(--u) * 18);
  padding: calc(var(--u) * 16) 0;
}

.dd__list--tight .dd__link {
  padding: calc(var(--u) * 14) 0;
}

.dd__list--sub .dd__n {
  font-size: max(12px, calc(var(--u) * 12));
}

.dd__list--sub .dd__t {
  font-size: max(12px, calc(var(--u) * 16));
}

/* header actions */
.hd__acts {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.theme-sun,
[data-theme="dark"] .theme-moon {
  display: none;
}

[data-theme="dark"] .theme-sun {
  display: block;
}

.hd__add {
  height: calc(var(--u) * 55);
  padding: 0 calc(var(--u) * 30);
  white-space: nowrap;
  border-radius: calc(var(--u) * 28);
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 20));
  letter-spacing: calc(var(--u) * 2.4);
  text-transform: uppercase;
}

.hd__add:hover {
  background: var(--ink-h);
  color: var(--on-ink);
}

.hd__burger,
.burger-close,
.hd__burger[aria-expanded="true"] .burger-open {
  display: none;
}

.hd__burger[aria-expanded="true"] .burger-close {
  display: block;
}

/* == 11. Hero ========================================================== */
/* Laptop/HD screens (1200–1999px): the hero grows to the window height.
   main.js sets --hs = window height / hero height (1…1.25); everything inside
   the hero scales by it, the photo grows from the centre. 2000px+ is untouched. */
:root {
  --uw: calc(100vw / 2560);
}

@media (min-width: 1200px) {
  .hero {
    --u: calc(var(--uw) * var(--hs, 1));
  }
}

.hero {
  position: relative;
  height: calc(var(--u) * 1200);
  overflow: hidden;
  background-color: var(--page);
  background-image: url("../img/hero-bg.webp"), linear-gradient(90deg, #f5f7fb 0%, #fff 25%, #fdfffe 50%, #fff 80%, #f8fafb 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: calc(var(--u) * 2560) calc(var(--u) * 1060), 100% 100%;
  background-position: center bottom, left top;
  color: var(--ink);
}

[data-theme="dark"] .hero {
  background-image: url("../img/hero-dark.webp"), linear-gradient(90deg, rgb(7, 8, 12) 0%, rgb(24, 26, 30) 25%, rgb(33, 35, 41) 50%, rgb(19, 21, 24) 75%, rgb(11, 12, 16) 100%);
}

.hero__social {
  position: absolute;
  left: var(--gut);
  top: calc(var(--u) * 330);
  width: calc(var(--u) * 55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.hero__follow {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 4.2);
  text-transform: uppercase;
  color: var(--body);
}

.hero__rule {
  width: .5px;
  height: calc(var(--u) * 64);
  margin: calc(var(--u) * 8) 0 calc(var(--u) * 10);
  background: var(--ink);
}

.hero__copy {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 179);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__kicker {
  margin-left: .42em;
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 500;
  letter-spacing: calc(var(--u) * 7.14);
  text-transform: uppercase;
  color: var(--body);
}

.hero__title {
  margin-top: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 88));
  line-height: calc(var(--u) * 82);
  font-weight: 600;
  letter-spacing: -.035em;
}

.hero__line {
  display: block;
}

.hero__acc {
  position: relative;
  display: inline-block;
  color: var(--acc);
}

.hero__swash {
  position: absolute;
  left: calc(var(--u) * -2);
  top: calc(var(--u) * 74);
  width: calc(var(--u) * 590);
  height: calc(var(--u) * 34);
  overflow: visible;
}

.hero__swash path {
  fill: none;
  stroke: var(--acc);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.hero__sub {
  margin-top: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 28));
  line-height: calc(var(--u) * 40);
  font-weight: 400;
  white-space: nowrap;
  color: var(--body);
}

.hero__ctas {
  display: flex;
  gap: calc(var(--u) * 27);
  margin-top: calc(var(--u) * 37);
}

.hero .btn--line {
  background: var(--hs90);
}

/* driving range widget */
.range {
  position: absolute;
  right: var(--gut);
  top: calc(var(--u) * 263);
  width: calc(var(--u) * 260);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.range__lbl {
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 4.2);
  text-transform: uppercase;
  color: var(--body);
}

.range__val {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 10);
}

.range__num {
  font-size: max(12px, calc(var(--u) * 104));
  letter-spacing: -.05em;
  line-height: .9;
}

.range__unit {
  font-size: max(12px, calc(var(--u) * 22));
  letter-spacing: .08em;
}

.range__bar {
  position: relative;
  width: 100%;
  height: .5px;
  margin-top: calc(var(--u) * 22);
  background: var(--ink);
}

.range__fill {
  position: absolute;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--acc);
}

.range__fill--78 { width: 78%; }
.range__fill--90 { width: 90%; }

.range__scale {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 13));
  letter-spacing: calc(var(--u) * 2.6);
  color: var(--body);
}

/* flexible finance card */
.fincard {
  position: absolute;
  right: var(--gut);
  top: calc(var(--u) * 591);
  width: calc(var(--u) * 340);
  height: calc(var(--u) * 336);
  padding: calc(var(--u) * 26) calc(var(--u) * 28) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 28);
  background: var(--hs94);
  box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 44) rgba(17, 20, 24, .09);
  display: flex;
  flex-direction: column;
  font-weight: 400;
}

.fincard__img {
  width: calc(var(--u) * 270);
  aspect-ratio: 300 / 130;
  flex-shrink: 0;
  margin: calc(var(--u) * 14) auto 0;
  border-radius: calc(var(--u) * 14);
  background: url("../img/finance-light.webp") center 42% / cover no-repeat;
}

[data-theme="dark"] .fincard__img {
  background-image: url("../img/finance-dark.webp");
}

.fincard__t {
  margin-top: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 24));
}

.fincard__p {
  margin-top: calc(var(--u) * 6);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 24));
}

.fincard__num {
  font-size: max(12px, calc(var(--u) * 31));
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--acc);
}

.fincard__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 36);
}

.fincard__go {
  width: calc(var(--u) * 53);
  height: calc(var(--u) * 53);
  border-radius: 50%;
  background: var(--acc-s);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 26));
  display: flex;
  align-items: center;
  justify-content: center;
}

.fincard__go:hover {
  background: var(--acc-s2);
}

.fincard__line {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: var(--line-bar);
}

/* 0–100 gauge */
.gauge {
  position: absolute;
  left: calc(50% + calc(var(--u) * 329));
  top: calc(var(--u) * 876);
  width: max(calc(var(--u) * 168), 128px);
  height: max(calc(var(--u) * 168), 128px);
  z-index: 2;
}

.gauge__ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  fill: none;
}

.gauge__o {
  stroke: var(--ink);
  stroke-width: .5;
}

.gauge__a {
  stroke: var(--acc);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 120 465;
}

.gauge__disc {
  position: absolute;
  left: 8.333%;
  top: 8.333%;
  width: 83.333%;
  height: 83.333%;
  border-radius: 50%;
  background: var(--hs92);
  box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 40) rgba(17, 20, 24, .16), 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(17, 20, 24, .06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
}

.gauge__v {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 3);
}

.gauge__num {
  font-size: max(12px, calc(var(--u) * 48));
  letter-spacing: -.04em;
  line-height: .95;
}

.gauge__u {
  margin-top: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 13));
  font-weight: 400;
  letter-spacing: calc(var(--u) * 1.3);
  color: var(--acc);
}

.gauge__l {
  margin-left: .22em;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 11));
  letter-spacing: calc(var(--u) * 2.42);
  text-transform: uppercase;
  color: var(--body);
}

/* search console */
.search {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  top: calc(var(--u) * 1080);
  height: calc(var(--u) * 90);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 45);
  border: .5px solid var(--ink);
  background: var(--hs60);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  color: var(--ink);
}

.search__f {
  position: relative;
  flex: 1;
  height: 100%;
  min-width: 0;
  padding: 0 calc(var(--u) * 32);
  border-right: .5px solid var(--hi25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 6);
}

.search__f.w12 {
  flex: 1.2;
}

.search__f:hover {
  background: var(--hi04);
}

.search__lbl {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  color: var(--body);
  cursor: pointer;
}

.search__sel {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0 calc(var(--u) * 24) 0 0;
  border: 0;
  background: transparent;
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  color: var(--ink);
  cursor: pointer;
  outline: 0;
  text-overflow: ellipsis;
}

.search__sel option {
  background: var(--surf);
  color: var(--ink);
}

.search__f:focus-within .search__lbl {
  color: var(--acc);
}

.search__chev {
  position: absolute;
  right: calc(var(--u) * 32);
  top: 50%;
  margin-top: calc(var(--u) * -6);
  pointer-events: none;
}

.search__count {
  padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 28);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
  white-space: nowrap;
  color: var(--body);
}

.search__go {
  height: calc(var(--u) * 70);
  padding: 0 calc(var(--u) * 44);
  border-radius: calc(var(--u) * 35);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 20));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
}

.search__go:hover {
  background: var(--acc-d);
}

/* the saved profile photo fills the Account circle (main.js paintHeaderAvatar) */
.hd__acc.has-ph {
  background: var(--surf) center / cover no-repeat;
  border-color: var(--acc);
}

.hd__acc.has-ph svg {
  display: none;
}

/* dealer back-office: the account circle is the dealership's logo tile (parts.header) */
.hd__acc--dealer {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.hd__acc--dealer:hover {
  background: var(--acc-d);
  color: #fff;
}

.hd__dlogo {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 17));
  letter-spacing: calc(var(--u) * 0.34);
  line-height: 1;
}

/* == 12. Featured — spec strip ========================================= */
.feat {
  gap: calc(var(--u) * 48);
}

.feat__body {
  position: relative;
}

.feat__rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-top: .5px solid var(--line);
  border-bottom: .5px solid var(--line);
  border-left: .5px solid var(--line);
}

.feat__rail::-webkit-scrollbar {
  display: none;
}

.feat__ruler {
  margin-top: calc(var(--u) * 14);
}

.car {
  position: relative;
  flex: 0 0 calc(var(--u) * 540);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-right: .5px solid var(--line);
  color: var(--ink);
}

.car:hover {
  background: var(--tint);
}

.car--pick {
  box-shadow: inset 0 calc(var(--u) * 2) 0 var(--acc);
}

.car__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--u) * 24) calc(var(--u) * 30) calc(var(--u) * 20);
}

.car__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.64);
  color: var(--mute);
}

.car__n {
  margin-right: calc(var(--u) * 12);
  color: var(--acc);
}

.car__top {
  gap: calc(var(--u) * 10);
}

.car__badges {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.car__save {
  position: relative;
  z-index: 2;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  margin-left: calc(var(--u) * 6);
  border-radius: 50%;
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.car__save:hover,
.car__save[aria-pressed="true"] {
  color: var(--acc);
  border-color: var(--acc);
}

.car__save[aria-pressed="true"] .ico {
  fill: currentColor;
}

.car__photo {
  height: calc(var(--u) * 300);
  margin: 0 calc(var(--u) * 30);
  border-radius: calc(var(--u) * 18);
  overflow: hidden;
}

.car__photo--img {
  position: relative;
  background: var(--s2);
}

.car__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.car__360 {
  position: absolute;
  right: calc(var(--u) * 16);
  bottom: calc(var(--u) * 14);
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: var(--glass);
  border: .5px solid var(--line);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--ink);
}

.car__head {
  padding: calc(var(--u) * 26) calc(var(--u) * 30) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.car__sub {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
  color: var(--mute);
}

.car__title {
  font-size: max(12px, calc(var(--u) * 30));
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* the whole card is clickable through the title link */
.car__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.car__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: calc(var(--u) * 22) calc(var(--u) * 30) 0;
  border-top: .5px solid var(--line);
  border-bottom: .5px solid var(--line);
}

.car__spec {
  padding: calc(var(--u) * 16) 0 calc(var(--u) * 16) calc(var(--u) * 18);
  border-right: .5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.car__spec:first-child {
  padding-left: 0;
}

.car__spec:last-child {
  border-right: 0;
}

.car__spec dt {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  color: var(--mute);
}

.car__spec dd {
  font-size: max(12px, calc(var(--u) * 21));
}

.deal {
  margin: calc(var(--u) * 20) calc(var(--u) * 30) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.deal__row {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.deal__fair {
  color: var(--ink);
}

.deal__bar {
  position: relative;
  height: calc(var(--u) * 6);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(var(--u) * 4);
}

.deal__seg {
  height: 2px;
  margin-top: calc(var(--u) * 2);
  background: var(--line);
}

.deal__seg.is-on {
  background: var(--acc);
}

.deal__pin {
  position: absolute;
  top: calc(var(--u) * -3);
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  margin-left: calc(var(--u) * -6);
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--acc);
}

.deal__pin--p50 { left: 50%; }
.deal__pin--p52 { left: 52%; }
.deal__pin--p55 { left: 55%; }
.deal__pin--p66 { left: 66%; }
.deal__pin--p70 { left: 70%; }
.deal__pin--p72 { left: 72%; }
.deal__pin--p82 { left: 82%; }
.deal__pin--p86 { left: 86%; }

.car__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 28);
  margin-top: auto;
}

.car__price {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.car__mo {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
}

.car__num {
  font-size: max(12px, calc(var(--u) * 34));
  letter-spacing: -.03em;
}

.car__per {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.8);
  color: var(--acc);
}

.car__full {
  font-size: max(12px, calc(var(--u) * 13));
  letter-spacing: calc(var(--u) * 0.78);
  color: var(--mute);
}

.car__go {
  width: calc(var(--u) * 55);
  height: calc(var(--u) * 55);
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.car__go--acc,
.car:hover .car__go {
  background: var(--acc);
  color: #fff;
}

.feat__foot {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 30);
  padding: 0 var(--gut);
}

.feat__count,
.feat__note {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.8);
}

.feat__note {
  color: var(--mute);
}

/* == 13. Body type — bento ============================================= */
.bodyt {
  gap: calc(var(--u) * 56);
}

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: calc(var(--u) * 520) calc(var(--u) * 520);
  grid-template-areas:
    "big big lux ele suv cla"
    "big big con quiz quiz mix";
  border-top: .5px solid var(--line);
  border-left: .5px solid var(--line);
}

.bt,
.quiz,
.mix {
  position: relative;
  overflow: hidden;
  border-right: .5px solid var(--line);
  border-bottom: .5px solid var(--line);
  display: flex;
  flex-direction: column;
  color: var(--ink);
}

.bt {
  padding: calc(var(--u) * 26);
  gap: calc(var(--u) * 18);
  isolation: isolate;
}

.bt:hover {
  background: var(--tint);
  color: var(--acc);
}

.bt--big { grid-area: big; padding: calc(var(--u) * 30); gap: calc(var(--u) * 24); box-shadow: inset 0 calc(var(--u) * 2) 0 var(--acc); }
.bt--big:hover { color: var(--ink); }
.bt--lux { grid-area: lux; }
.bt--ele { grid-area: ele; }
.bt--suv { grid-area: suv; }
.bt--cla { grid-area: cla; }
.bt--con { grid-area: con; }

.bt__ghost {
  position: absolute;
  z-index: -1;
  right: calc(var(--u) * 24);
  top: calc(var(--u) * 60);
  width: calc(var(--u) * 220);
  height: calc(var(--u) * 120);
  pointer-events: none;
}

.bt__ghost text {
  stroke: var(--ghost);
}

.bt__ghost--big {
  top: calc(var(--u) * 50);
  width: calc(var(--u) * 420);
  height: calc(var(--u) * 230);
}

.bt__ghost--big text {
  stroke: var(--acc-a40);
}

.bt__head,
.quiz__head {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.64);
  color: var(--mute);
}

.bt__n {
  margin-right: calc(var(--u) * 12);
  color: var(--acc);
}

.bt__ico {
  height: calc(var(--u) * 64);
  display: flex;
  align-items: center;
}

.i-lux { width: calc(var(--u) * 75.6); height: calc(var(--u) * 63); }
.i-ele { width: calc(var(--u) * 42); height: calc(var(--u) * 63); }
.i-suv { width: calc(var(--u) * 84); height: calc(var(--u) * 67.2); }
.i-cla { width: calc(var(--u) * 63); height: calc(var(--u) * 63); }
.i-con { width: calc(var(--u) * 84); height: calc(var(--u) * 63); }
.i-bigsports { width: calc(var(--u) * 120); height: calc(var(--u) * 90); color: var(--acc); }

.bt__name {
  margin-top: auto;
  font-size: max(12px, calc(var(--u) * 42));
  letter-spacing: -.03em;
  line-height: 1;
}

.bt__meta {
  margin-top: calc(var(--u) * -10);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--mute);
}

.bt__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bt__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: .5px solid var(--line);
  padding-top: calc(var(--u) * 16);
}

.bt__price {
  font-size: max(12px, calc(var(--u) * 22));
  color: var(--ink);
}

.bt__per {
  margin-left: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  color: var(--acc);
}

.bt__go {
  width: calc(var(--u) * 55);
  height: calc(var(--u) * 55);
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bt__go--acc,
.bt:hover .bt__go {
  background: var(--acc);
  color: #fff;
}

.bt__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: calc(var(--u) * 30);
}

.bt__title {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.bt__bigname {
  font-size: max(12px, calc(var(--u) * 96));
  letter-spacing: -.045em;
  line-height: .9;
}

.bt__sub {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
  color: var(--mute);
}

.bt__photo {
  flex: 1;
  min-height: 0;
  border-radius: calc(var(--u) * 20);
}

.bt__photo--img {
  position: relative;
  overflow: hidden;
  background: var(--s2);
}

.bt__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bt__specs {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-top: .5px solid var(--line);
  padding-top: calc(var(--u) * 20);
}

.bt__dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.bt__dl > div {
  padding: 0 calc(var(--u) * 24);
  border-left: .5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.bt__dl > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.bt__specs dt {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  color: var(--mute);
}

.bt__specs dd {
  font-size: max(12px, calc(var(--u) * 26));
  color: var(--ink);
}

/* quiz tile */
.quiz {
  grid-area: quiz;
  padding: calc(var(--u) * 30);
  gap: calc(var(--u) * 22);
  background: var(--ink);
  color: var(--on-ink);
}

.quiz__head {
  color: var(--on-ink-55);
}

.quiz__t {
  font-size: max(12px, calc(var(--u) * 48));
  letter-spacing: -.035em;
  line-height: 1.02;
}

.quiz__t span {
  display: block;
}

.quiz__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
  margin-top: auto;
}

.qchip {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 23);
  border: .5px solid var(--on-ink-25);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
}

.qchip:hover {
  color: var(--acc);
}

.qchip.is-on {
  border-color: var(--acc);
  background: var(--acc-a14);
  color: var(--acc);
}

.quiz__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: .5px solid var(--on-ink-25);
  padding-top: calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.8);
  color: var(--on-ink-55);
}

.quiz__go {
  height: calc(var(--u) * 55);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 28);
  border-radius: calc(var(--u) * 28);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 15));
  letter-spacing: calc(var(--u) * 1.8);
}

.quiz__go:hover {
  background: var(--acc-d);
  color: #fff;
}

.quiz__dot {
  width: calc(var(--u) * 39);
  height: calc(var(--u) * 39);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* inventory mix tile */
.mix {
  grid-area: mix;
  padding: calc(var(--u) * 26);
  gap: calc(var(--u) * 18);
}

.mix__total {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
}

.mix__num {
  font-size: max(12px, calc(var(--u) * 56));
  letter-spacing: -.04em;
  line-height: 1;
}

.mix__unit {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--acc);
}

.mix__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  margin-top: auto;
}

.mix__row {
  display: grid;
  grid-template-columns: max(calc(var(--u) * 100), 92px) 1fr max(calc(var(--u) * 30), 20px);
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
}

.mix__row--acc {
  color: var(--acc);
}

.mix__bar {
  position: relative;
  height: 1.5px;
  background: var(--line);
}

.mix__row--acc .mix__bar {
  height: 3px;
}

.mix__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--ink);
}

.mix__row--acc .mix__fill {
  background: var(--acc);
}

.mix__fill--89 { width: 89%; }
.mix__fill--67 { width: 67%; }
.mix__fill--78 { width: 78%; }
.mix__fill--100 { width: 100%; }
.mix__fill--30 { width: 30%; }
.mix__fill--44 { width: 44%; }

.mix__n {
  text-align: right;
}

.mix__live {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
}

/* == 14. Car of the week — stage ====================================== */
.cw__stage {
  position: relative;
  height: calc(var(--u) * 1260);
  overflow: hidden;
  background: var(--stage);
  isolation: isolate;
}

.cw__scene {
  position: absolute;
  inset: 0;
}

.cw__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--acc);
}

.cw__word {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 300);
  width: calc(var(--u) * 2560);
  height: calc(var(--u) * 520);
}

.cw__word text {
  stroke: var(--acc);
  stroke-width: 1.2;
}

.cw__car {
  position: absolute;
  inset: 0;
  background: url("../img/car-clean.webp") 52% 86% / calc(var(--u) * 3300) auto no-repeat;
  mix-blend-mode: multiply;
}

[data-theme="dark"] .cw__car {
  background-image: url("../img/car-dark.webp");
  mix-blend-mode: lighten;
}

/* bottom fade over the photo — used by the green skin */
.cw__fade {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 260);
}

/* hotspots */
.spot {
  position: absolute;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 calc(var(--u) * 8) var(--acc-a20), 0 0 0 calc(var(--u) * 20) var(--acc-a08);
  animation: spot-pulse 2.4s ease-in-out infinite;
}

.spot--h1 { left: calc(var(--u) * 1002); top: calc(var(--u) * 772); }
.spot--h2 { left: calc(var(--u) * 1422); top: calc(var(--u) * 897); animation-delay: .8s; }
.spot--h3 { left: calc(var(--u) * 1632); top: calc(var(--u) * 692); animation-delay: 1.6s; }

@keyframes spot-pulse {
  0%, 100% { box-shadow: 0 0 0 calc(var(--u) * 8) var(--acc-a20), 0 0 0 calc(var(--u) * 20) var(--acc-a08); }
  50% { box-shadow: 0 0 0 calc(var(--u) * 11) var(--acc-a16), 0 0 0 calc(var(--u) * 26) var(--acc-a04); }
}

.spot__lbl {
  position: absolute;
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: .5px solid var(--line);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  white-space: nowrap;
  color: var(--ink);
}

.spot__lbl--h1 { right: calc(var(--u) * 1584); top: calc(var(--u) * 758); }
.spot__lbl--h2 { left: calc(var(--u) * 1464); top: calc(var(--u) * 883); }
.spot__lbl--h3 { left: calc(var(--u) * 1674); top: calc(var(--u) * 678); }

/* left column */
.cw__l {
  position: absolute;
  left: var(--gut);
  top: calc(var(--u) * 70);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
}

.cw__title {
  font-size: max(12px, calc(var(--u) * 128));
  letter-spacing: -.05em;
  line-height: .9;
  white-space: nowrap;
  text-wrap: balance;
}

.cw__tags {
  display: flex;
  gap: calc(var(--u) * 10);
}

/* right column */
.cw__r {
  position: absolute;
  right: var(--gut);
  top: calc(var(--u) * 70);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 24);
}

.timer {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
}

.timer__row {
  display: flex;
  gap: calc(var(--u) * 6);
}

.timer__b {
  height: calc(var(--u) * 38);
  min-width: calc(var(--u) * 58);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 10);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 16));
  letter-spacing: calc(var(--u) * 0.96);
  text-transform: none;
  white-space: nowrap;
}

.timer__b .mute {
  margin-left: calc(var(--u) * 3);
}

.timer__b--acc {
  border-color: var(--acc);
  color: var(--acc);
}

.cw__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 8);
}

.cw__from {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.88);
  color: var(--mute);
}

.cw__mo {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.cw__big {
  font-size: max(12px, calc(var(--u) * 96));
  letter-spacing: -.05em;
  line-height: .9;
}

.cw__per {
  font-size: max(12px, calc(var(--u) * 18));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.6);
  color: var(--acc);
}

.cw__was {
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 0.84);
  color: var(--mute);
}

.cw__live {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
}

/* week switcher */
.cw__week {
  position: absolute;
  left: var(--gut);
  top: calc(var(--u) * 560);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 14);
}

.cw__wk {
  width: calc(var(--u) * 190);
  height: calc(var(--u) * 120);
}

.cw__wk text {
  stroke: var(--ink);
}

.cw__wkl {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.36);
  color: var(--mute);
}

.cw__wknav {
  display: flex;
  gap: calc(var(--u) * 10);
  margin-top: calc(var(--u) * 6);
}

/* angle thumbnails */
.cw__thumbs {
  position: absolute;
  right: var(--gut);
  top: calc(var(--u) * 600);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.cw__thumbs ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.thumb {
  width: calc(var(--u) * 132);
  height: calc(var(--u) * 88);
  border-radius: calc(var(--u) * 14);
  border: .5px solid var(--line);
  background: repeating-linear-gradient(135deg, var(--s1) 0 calc(var(--u) * 10), var(--s2) calc(var(--u) * 10) calc(var(--u) * 20));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 11));
  font-weight: 400;
  color: var(--mute);
}

.thumb:hover,
.thumb.is-on {
  border-color: var(--acc);
}

/* Home v1: the four studio angles (thumbs beat the generic .thumb photo in 15-service.css) */
.cw .thumb.thumb--img {
  padding: 0;
  background-color: #fff;
  background-position: 50% 72%;
  background-size: 165% auto;
  background-repeat: no-repeat;
  cursor: pointer;
}

.cw .thumb.thumb--img.thumb--serpent-front34 { background-image: url("../img/cw-serpent-front34.webp"); }
.cw .thumb.thumb--img.thumb--serpent-side { background-image: url("../img/cw-serpent-side.webp"); }
.cw .thumb.thumb--img.thumb--serpent-rear34 { background-image: url("../img/cw-serpent-rear34.webp"); }
.cw .thumb.thumb--img.thumb--serpent-front { background-image: url("../img/cw-serpent-front.webp"); }
.cw .thumb.thumb--img.thumb--gtr-front34 { background-image: url("../img/cw-gtr-front34.webp"); }
.cw .thumb.thumb--img.thumb--gtr-side { background-image: url("../img/cw-gtr-side.webp"); }
.cw .thumb.thumb--img.thumb--gtr-rear34 { background-image: url("../img/cw-gtr-rear34.webp"); }
.cw .thumb.thumb--img.thumb--gtr-front { background-image: url("../img/cw-gtr-front.webp"); }

/* one layer per angle; the chosen one fades in while the stage photo fades out */
.cw__car {
  transition: opacity .6s ease-in-out;
}

.cw__ang {
  position: absolute;
  inset: 0;
  background: 50% 92% / calc(var(--u) * 2900) auto no-repeat;
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease-in-out;
}

.cw__ang--serpent-side { background-image: url("../img/cw-serpent-side.webp"); }
.cw__ang--serpent-rear34 { background-image: url("../img/cw-serpent-rear34.webp"); }
.cw__ang--serpent-front { background-image: url("../img/cw-serpent-front.webp"); }
.cw__ang--gtr-side { background-image: url("../img/cw-gtr-side.webp"); }
.cw__ang--gtr-rear34 { background-image: url("../img/cw-gtr-rear34.webp"); }
.cw__ang--gtr-front { background-image: url("../img/cw-gtr-front.webp"); }

/* Home v2: the GTR angles sit where its stage photo sits */
[data-skin="green"] .cw__ang {
  background-position: 50% calc(var(--u) * 33);
  background-size: calc(var(--u) * 2560) auto;
}

.cw[data-angle]:not([data-angle="front34"]) .cw__car,
.cw:not([data-angle="side"]) .cw__ang--side,
.cw:not([data-angle="rear34"]) .cw__ang--rear34,
.cw:not([data-angle="front"]) .cw__ang--front {
  opacity: 0;
}

.cw[data-angle="side"] .cw__ang--side,
.cw[data-angle="rear34"] .cw__ang--rear34,
.cw[data-angle="front"] .cw__ang--front {
  opacity: 1;
}

/* dark theme: the studio photo can't blend away, so it sits in a soft pool of light */
[data-theme="dark"] .cw__ang {
  mix-blend-mode: normal;
  filter: brightness(.88);
  -webkit-mask-image: radial-gradient(ellipse 38% 48% at 50% 62%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 38% 48% at 50% 62%, #000 52%, transparent 100%);
}

/* Home v1 dark: the owner's dark-studio angles blend away like the stage photo does */
[data-theme="dark"] .cw .thumb.thumb--img.thumb--serpent-front34 { background-color: #050505; background-image: url("../img/cw-serpent-dark-front34.webp"); }
[data-theme="dark"] .cw .thumb.thumb--img.thumb--serpent-side { background-color: #050505; background-image: url("../img/cw-serpent-dark-side.webp"); }
[data-theme="dark"] .cw .thumb.thumb--img.thumb--serpent-rear34 { background-color: #050505; background-image: url("../img/cw-serpent-dark-rear34.webp"); }
[data-theme="dark"] .cw .thumb.thumb--img.thumb--serpent-front { background-color: #050505; background-image: url("../img/cw-serpent-dark-front.webp"); }

[data-theme="dark"] .cw__ang--serpent-side { background-image: url("../img/cw-serpent-dark-side.webp"); }
[data-theme="dark"] .cw__ang--serpent-rear34 { background-image: url("../img/cw-serpent-dark-rear34.webp"); }
[data-theme="dark"] .cw__ang--serpent-front { background-image: url("../img/cw-serpent-dark-front.webp"); }

/* Home v2 dark: the same for the green GTR */
[data-theme="dark"] .cw .thumb.thumb--img.thumb--gtr-front34 { background-color: #050505; background-image: url("../img/cw-gtr-dark-front34.webp"); }
[data-theme="dark"] .cw .thumb.thumb--img.thumb--gtr-side { background-color: #050505; background-image: url("../img/cw-gtr-dark-side.webp"); }
[data-theme="dark"] .cw .thumb.thumb--img.thumb--gtr-rear34 { background-color: #050505; background-image: url("../img/cw-gtr-dark-rear34.webp"); }
[data-theme="dark"] .cw .thumb.thumb--img.thumb--gtr-front { background-color: #050505; background-image: url("../img/cw-gtr-dark-front.webp"); }

[data-theme="dark"] .cw__ang--gtr-side { background-image: url("../img/cw-gtr-dark-side.webp"); }
[data-theme="dark"] .cw__ang--gtr-rear34 { background-image: url("../img/cw-gtr-dark-rear34.webp"); }
[data-theme="dark"] .cw__ang--gtr-front { background-image: url("../img/cw-gtr-dark-front.webp"); }

[data-theme="dark"] .cw__ang--serpent-side,
[data-theme="dark"] .cw__ang--serpent-rear34,
[data-theme="dark"] .cw__ang--serpent-front,
[data-theme="dark"] .cw__ang--gtr-side,
[data-theme="dark"] .cw__ang--gtr-rear34,
[data-theme="dark"] .cw__ang--gtr-front {
  mix-blend-mode: lighten;
  filter: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
}

/* the hotspots belong to the first angle */
.cw[data-angle] .spot,
.cw[data-angle] .spot__lbl {
  transition: opacity .4s ease-in-out, visibility 0s;
}

.cw[data-angle]:not([data-angle="front34"]) .spot,
.cw[data-angle]:not([data-angle="front34"]) .spot__lbl {
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease-in-out, visibility 0s .4s;
}

.cw__photos {
  margin-top: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  text-align: center;
  color: var(--mute);
}

/* frosted spec bar */
.cw__bar-panel {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: calc(var(--u) * 60);
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: center;
  padding: calc(var(--u) * 28) calc(var(--u) * 28) calc(var(--u) * 28) 0;
  border-radius: calc(var(--u) * 36);
  background: var(--glass86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: .5px solid var(--line);
}

.cw__spec {
  padding: 0 calc(var(--u) * 40);
  border-left: .5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.cw__spec:first-child {
  border-left: 0;
}

.cw__sl {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.88);
  color: var(--mute);
}

.cw__sl .acc {
  margin-right: calc(var(--u) * 10);
}

.cw__sv {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
}

.cw__num {
  font-size: max(12px, calc(var(--u) * 60));
  letter-spacing: -.045em;
  line-height: 1;
}

.cw__u {
  font-size: max(12px, calc(var(--u) * 16));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.2);
  color: var(--acc);
}

.cw__bar {
  position: relative;
  height: 2px;
  margin-bottom: calc(var(--u) * -4);
  background: var(--line);
}

.cw__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--acc);
}

.cw__fill--82 { width: 82%; }
.cw__fill--70 { width: 70%; }
.cw__fill--55 { width: 55%; }
.cw__fill--76 { width: 76%; }

.cw__avg {
  position: absolute;
  left: 62%;
  top: calc(var(--u) * -4);
  width: 1px;
  height: calc(var(--u) * 10);
  background: var(--ink);
}

.cw__cls {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--mute);
}

.cw__acts {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.cw__book {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 32);
  border-radius: calc(var(--u) * 30);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 24);
  font-size: max(12px, calc(var(--u) * 16));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  white-space: nowrap;
}

.cw__book:hover {
  background: var(--acc-d);
  color: #fff;
}

.cw__bookdot {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cw__row {
  display: flex;
  gap: calc(var(--u) * 10);
}

.cw__res {
  flex: 1;
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 25);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
  color: var(--ink);
}

/* == 15. Why Avava ===================================================== */
.why {
  gap: calc(var(--u) * 56);
}

.rating {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.why__rate,
.revs .fig--acc {
  width: calc(var(--u) * 170);
  height: calc(var(--u) * 100);
}

.rating__stars {
  display: flex;
  gap: calc(var(--u) * 4);
}

.rating__stars--20,
.rating__stars--18 {
  gap: calc(var(--u) * 3);
}

.rating__t {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
  color: var(--mute);
}

.revs .rating__t {
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 2.4);
}

.grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: .5px solid var(--line2);
  border-left: .5px solid var(--line2);
}

.why__cell {
  position: relative;
  padding: calc(var(--u) * 34) calc(var(--u) * 36) calc(var(--u) * 36);
  border-right: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 28);
}

.why__cell:hover {
  background: var(--tint);
}

.is-pick {
  box-shadow: inset 0 calc(var(--u) * 2) 0 var(--acc);
}

.why__fig {
  height: calc(var(--u) * 180);
  display: flex;
  align-items: flex-end;
}

.why__fig .fig {
  height: calc(var(--u) * 175);
  width: auto;
}

.why__photo {
  height: calc(var(--u) * 250);
  border-radius: calc(var(--u) * 20);
}

.why__photo--img {
  position: relative;
  overflow: hidden;
  background: var(--s2);
}

.why__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why .slot__tag,
.how .slot__tag {
  border-color: var(--line2);
}

.why__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.why__t {
  font-size: max(12px, calc(var(--u) * 38));
  letter-spacing: -.03em;
  line-height: 1.05;
}

.why__p {
  font-size: max(12px, calc(var(--u) * 19));
  line-height: 1.5;
  color: var(--body);
}

.vs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 20) 0;
  border-top: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
}

.vs__row {
  display: grid;
  grid-template-columns: max(calc(var(--u) * 140), 112px) 1fr max(calc(var(--u) * 90), 64px);
  align-items: center;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
  white-space: nowrap;
}

.vs__row span:last-child {
  text-align: right;
}

.vs__row--us {
  color: var(--acc);
}

.vs__bar {
  position: relative;
  height: 1.5px;
  background: var(--line2);
}

.vs__row--us .vs__bar {
  height: 3px;
}

.vs__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: var(--acc);
}

.vs__row:not(.vs__row--us) .vs__fill {
  background: var(--ink);
  opacity: .5;
}

.vs__fill--20 { width: 20%; }
.vs__fill--25 { width: 25%; }
.vs__fill--27 { width: 27%; }
.vs__fill--35 { width: 35%; }

.vs__them {
  color: var(--ink);
}

.why__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.8);
  color: var(--ink);
}

.why__dot {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.why__dot--acc {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.backed {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  overflow: hidden;
}

.backed__l {
  margin-right: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.64);
  white-space: nowrap;
  color: var(--mute);
}

.backed__list {
  display: flex;
  gap: calc(var(--u) * 14);
}

.bchip {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--line2);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  flex-shrink: 0;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  white-space: nowrap;
}

.bchip--acc {
  border-color: var(--acc);
  color: var(--acc);
}

/* == 16. How it works ================================================== */
.how {
  gap: calc(var(--u) * 60);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * 40);
}

.step {
  display: flex;
  flex-direction: column;
}

.step__fig {
  height: calc(var(--u) * 170);
  display: flex;
  align-items: flex-end;
  padding-bottom: calc(var(--u) * 22);
}

.step__fig .fig {
  width: calc(var(--u) * 230);
  height: calc(var(--u) * 150);
}

.step__line {
  position: relative;
  height: calc(var(--u) * 40);
  display: flex;
  align-items: center;
}

.step__track {
  position: absolute;
  left: 0;
  right: calc(var(--u) * -40);
  top: calc(var(--u) * 19.5);
  height: .5px;
  background: var(--ink);
}

.step--done .step__track {
  height: 2px;
  background: var(--acc);
}

.step--cur .step__track {
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--acc) 0 calc(var(--u) * 8), transparent calc(var(--u) * 8) calc(var(--u) * 14));
}

.step__node {
  position: relative;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  background: var(--bg);
  border: .5px solid var(--ink);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step--done .step__node,
.step--cur .step__node {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.step__time {
  position: relative;
  margin-left: calc(var(--u) * 16);
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 15);
  border: .5px solid var(--line2);
  background: var(--bg);
  color: var(--mute);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
}

.step--done .step__time,
.step--cur .step__time {
  border-color: var(--acc);
  color: var(--acc);
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
  padding-top: calc(var(--u) * 36);
}

.step__t {
  font-size: max(12px, calc(var(--u) * 48));
  letter-spacing: -.035em;
  line-height: 1;
}

.step__p {
  max-width: calc(var(--u) * 520);
  font-size: max(12px, calc(var(--u) * 20));
  line-height: 1.5;
  color: var(--body);
}

.step__photo {
  position: relative;
  aspect-ratio: 580 / 300;
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 22);
  overflow: hidden;
  background: #fff;
}

.step__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* each step screen comes in a light and a dark version; the theme picks one */
.step__img--dark,
[data-theme="dark"] .step__img--light {
  display: none;
}

[data-theme="dark"] .step__img--dark {
  display: block;
}

.step__list {
  display: flex;
  flex-direction: column;
  border-top: .5px solid var(--line2);
}

.step__list li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 13) 0;
  border-bottom: .5px solid var(--line2);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
}

.step__cta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.8);
}

.how__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: .5px solid var(--line2);
  padding-top: calc(var(--u) * 26);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  color: var(--mute);
}

.how__tags {
  display: flex;
  gap: calc(var(--u) * 30);
}

/* == 17. Finance — live calculator ===================================== */
.fin {
  gap: calc(var(--u) * 24);
}

.fin__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px calc(var(--u) * 40);
  padding: 0 var(--gut);
}

.fin__title {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 30);
}

.eyebrow--tight .eyebrow__n {
  margin-right: calc(var(--u) * -4);
}

.fin__h2 {
  font-size: max(12px, calc(var(--u) * 64));
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}

.fin__ctrl {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.fin__chips {
  display: flex;
  gap: calc(var(--u) * 8);
}

.fin__lbl {
  margin-right: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.42);
  color: var(--mute);
}

.fchip {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  border: .5px solid var(--chip-line);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.32);
  white-space: nowrap;
  color: var(--ink);
}

.fchip--sm {
  height: calc(var(--u) * 34);
  border-radius: calc(var(--u) * 17);
  font-size: max(12px, calc(var(--u) * 10));
  letter-spacing: calc(var(--u) * 1.2);
}

.fchip:hover {
  border-color: var(--ink);
}

.fchip.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.fchip__sub {
  opacity: .6;
}

.fpill {
  margin: 0 var(--gut);
  height: calc(var(--u) * 170);
  display: flex;
  align-items: stretch;
  border: .5px solid var(--line2);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surf);
}

.fpill__car {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 16);
  min-width: 0;
}

.fpill__img {
  width: calc(var(--u) * 138);
  height: calc(var(--u) * 138);
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--surf2) url("../img/finance-light.webp") center / calc(var(--u) * 230) auto no-repeat;
  border: .5px solid var(--line2);
}

[data-theme="dark"] .fpill__img {
  background-image: url("../img/finance-dark.webp");
}

/* fixed width: the longest car name, so the sliders never shift */
.fpill__who {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
  width: calc(var(--u) * 176);
  min-width: 0;
}

.fpill__k {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2);
  color: var(--acc);
}

.fpill__name {
  font-size: max(12px, calc(var(--u) * 22));
  letter-spacing: -.01em;
  white-space: nowrap;
}

.fpill__price {
  font-variant-numeric: tabular-nums;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.fpill__sliders {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.fsl {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
  padding: 0 calc(var(--u) * 26);
  border-left: .5px solid var(--line2);
}

.fsl--credit {
  flex: none;
  gap: calc(var(--u) * 10);
}

.fsl__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.fsl__lbl {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  white-space: nowrap;
  color: var(--mute);
}

.fsl__lbl .acc {
  margin-right: calc(var(--u) * 6);
}

.fsl__val {
  font-variant-numeric: tabular-nums;
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 18));
  white-space: nowrap;
  color: var(--ink);
}

.fsl__track {
  position: relative;
  height: calc(var(--u) * 26);
  --p: 0%;
}

/* 21 ticks: a tall one every quarter */
.fsl__ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 4);
  height: calc(var(--u) * 14);
  opacity: .6;
  background:
    linear-gradient(var(--mute), var(--mute)) right bottom / .5px calc(var(--u) * 14) no-repeat,
    repeating-linear-gradient(90deg, var(--mute) 0 .5px, transparent .5px 25%) left bottom / 100% calc(var(--u) * 14) no-repeat,
    repeating-linear-gradient(90deg, var(--mute) 0 .5px, transparent .5px 5%) left bottom / 100% calc(var(--u) * 7) no-repeat;
}

.fsl__fill {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 19);
  width: 0;
  height: 2px;
  background: var(--acc);
}

.fsl__needle,
.fsl__knob {
  position: absolute;
  left: 0;
  pointer-events: none;
  background: var(--acc);
}

.fsl__needle {
  top: 0;
  width: 2px;
  height: calc(var(--u) * 26);
  margin-left: -1px;
}

.fsl__knob {
  top: calc(var(--u) * -4);
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  margin-left: calc(var(--u) * -5);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--u) * 4) var(--acc-a18);
}

.fsl__in {
  position: absolute;
  left: calc(var(--u) * -8);
  top: calc(var(--u) * -8);
  width: calc(100% + calc(var(--u) * 16));
  height: calc(var(--u) * 42);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.fsl__track:focus-within .fsl__knob {
  box-shadow: 0 0 0 calc(var(--u) * 6) var(--acc-a30);
}

.fsl__scale {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 9));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.26);
  color: var(--mute);
}

.fsl__tiers {
  display: flex;
  gap: calc(var(--u) * 6);
}

/* orange result block */
.fres {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 40);
  background: var(--acc);
  color: #fff;
  border-radius: 999px;
  overflow: hidden;
}

.fres__ghost {
  position: absolute;
  left: calc(var(--u) * 30);
  top: calc(var(--u) * 10);
  width: calc(var(--u) * 260);
  height: calc(var(--u) * 150);
  pointer-events: none;
}

.fres__ghost text {
  stroke: rgba(255, 255, 255, .18);
}

.donut {
  position: relative;
  width: calc(var(--u) * 84);
  height: calc(var(--u) * 84);
  flex-shrink: 0;
  transform: rotate(-90deg);
  fill: none;
  stroke-width: 14;
}

.donut__base { stroke: rgba(255, 255, 255, .25); }
.donut__s--down { stroke: #fff; }
.donut__s--trade { stroke: #7fe0b0; }
.donut__s--loan { stroke: #111418; }
.donut__s--int { stroke: rgba(17, 20, 24, .4); }

.donut__s {
  stroke-dasharray: 0 400;
  transition: stroke-dasharray .3s, stroke-dashoffset .3s;
}

.fres__txt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.fres__lbl {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  opacity: .85;
}

.fres__dot {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 calc(var(--u) * 4) rgba(255, 255, 255, .25);
}

.fres__amt {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 4);
}

.fres__cur {
  margin-top: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 26));
  opacity: .7;
}

/* tabular digits + room for six characters ($18,450 is the largest payment),
   so the orange block keeps its width while the sliders move */
.fres__num {
  min-width: 2.9em;
  font-size: max(12px, calc(var(--u) * 84));
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  line-height: 1;
}

.fres__apr {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  opacity: .85;
}

.fres__go {
  position: relative;
  width: calc(var(--u) * 138);
  height: calc(var(--u) * 138);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  text-align: center;
  flex-shrink: 0;
}

.fres__go:hover {
  background: var(--ink);
  color: var(--on-ink);
}

.fres__go > span {
  display: flex;
  flex-direction: column;
}

.fin__foot {
  margin: 0 var(--gut);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 30);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

.fin__foot > p:first-child {
  white-space: nowrap;
}

.split {
  flex: 1;
  max-width: calc(var(--u) * 520);
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
  overflow: hidden;
  display: flex;
}

.split__s { width: 0; transition: width .3s; }
.split__s--down { background: var(--ink); }
.split__s--trade { background: var(--ok); }
.split__s--loan { background: var(--acc); }
.split__s--int { background: var(--acc-a30); }

.fin__save {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  white-space: nowrap;
  color: var(--ok);
}

.fin__ok {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* == 18. Reviews — photo wall ========================================== */
.revs {
  gap: calc(var(--u) * 40);
}

.dist {
  display: flex;
  gap: calc(var(--u) * 4);
}

.dist__b {
  position: relative;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  overflow: hidden;
  background: var(--line3);
}

.dist--fluid .dist__b {
  flex: 1;
  width: auto;
  background: var(--line2);
}

.dist__f {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--ink);
}

.dist__f--acc { background: var(--acc); }
.dist__f--92 { width: 92%; }
.dist__f--6 { width: 6%; }
.dist__f--1 { width: 1%; }
.dist__f--0 { width: 0; }

.revs__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 18);
  align-items: start;
}

.rvf,
.rv {
  position: relative;
  border-radius: calc(var(--u) * 32);
  overflow: hidden;
  border: .5px solid var(--line3);
  isolation: isolate;
}

.rvf {
  grid-column: span 2;
  height: calc(var(--u) * 860);
  border-color: var(--acc);
}

.rvf__bg,
.rv__bg {
  position: absolute;
  inset: 0;
  background: var(--stripes);
}

.rvf__bg.has-photo,
.rv__bg--photo {
  background: #1a1612 url("../img/review-daniel.webp") 62% 55% / cover no-repeat;
}

.rvf__bg.has-photo {
  background-position: center 58%;
}

/* owner + car on delivery day — one photo per reviewer (cards and the featured panel) */
.rv__bg--chris,
.rvf__bg.has-photo--chris {
  background-image: url("../img/review-chris.webp");
}

.rv__bg--priya,
.rvf__bg.has-photo--priya {
  background-image: url("../img/review-priya.webp");
}

.rv__bg--chris,
.rv__bg--priya {
  background-position: center 62%;
}

.rvf__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35) 100%);
}

.rvf__shade:not(.is-photo) {
  opacity: 1;
}

.rv__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 22%);
}

.rvf__top,
.rv__top {
  position: absolute;
  left: calc(var(--u) * 18);
  top: calc(var(--u) * 18);
  right: calc(var(--u) * 18);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rchips {
  display: flex;
  gap: calc(var(--u) * 8);
}

.rchip {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 16);
  background: var(--glass9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  color: var(--ink);
}

.rchip--ok {
  color: var(--ok);
}

.rchip--acc {
  padding: 0 calc(var(--u) * 14);
  background: var(--acc);
  color: #fff;
}

.rvf__play {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 120);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 calc(var(--u) * 14) var(--acc-a18), 0 0 0 calc(var(--u) * 32) var(--acc-a07);
  animation: play-pulse 2.6s ease-in-out infinite;
}

.rvf__play:hover {
  background: var(--acc-d);
  color: #fff;
}

@keyframes play-pulse {
  0%, 100% { box-shadow: 0 0 0 calc(var(--u) * 14) var(--acc-a18), 0 0 0 calc(var(--u) * 32) var(--acc-a07); }
  50% { box-shadow: 0 0 0 calc(var(--u) * 20) var(--acc-a12), 0 0 0 calc(var(--u) * 44) var(--acc-a03); }
}

.rvf__story {
  position: absolute;
  left: 50%;
  top: calc(38% + calc(var(--u) * 100));
  transform: translateX(-50%);
  padding: calc(var(--u) * 6) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 12);
  background: var(--glass9);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  white-space: nowrap;
  color: var(--ink);
}

.rvf__panel,
.rv__panel {
  position: absolute;
  left: calc(var(--u) * 14);
  right: calc(var(--u) * 14);
  bottom: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 24);
  background: var(--glass94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: .5px solid var(--line3);
  display: flex;
  flex-direction: column;
}

.rvf__panel {
  padding: calc(var(--u) * 30) calc(var(--u) * 32);
  gap: calc(var(--u) * 18);
}

.rv__panel {
  padding: calc(var(--u) * 22);
  gap: calc(var(--u) * 14);
}

.rvf__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rvf__stars {
  display: flex;
  gap: calc(var(--u) * 3);
}

.rvf__del {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  color: var(--mute);
}

.rvf__q {
  font-size: max(12px, calc(var(--u) * 32));
  letter-spacing: -.02em;
  line-height: 1.35;
  text-wrap: pretty;
  color: var(--ink);
}

.rv__q {
  font-size: max(12px, calc(var(--u) * 19));
  line-height: 1.35;
  text-wrap: pretty;
  color: var(--ink);
}

.rvf__by {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
  border-top: .5px solid var(--line3);
  padding-top: calc(var(--u) * 14);
}

.rvf__who {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  min-width: 0;
}

.rvf__names {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  min-width: 0;
}

.rvf__n {
  font-size: max(12px, calc(var(--u) * 20));
  color: var(--ink);
}

.rv__n {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--ink);
}

.rvf__car {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mute);
}

.rvf__acts {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  flex-shrink: 0;
}

.rvf__thumb {
  width: calc(var(--u) * 92);
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 12);
  background: #fff url("../img/finance-light.webp") center / cover no-repeat;
  border: .5px solid var(--line3);
}

[data-theme="dark"] .rvf__thumb {
  background: #1b1e23 url("../img/finance-dark.webp") center / cover no-repeat;
}

.rvf__go {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rvf__go:hover {
  background: var(--acc-d);
  color: #fff;
}

/* vertical cards */
.rv {
  cursor: pointer;
}

.rv:hover {
  border-color: var(--acc);
}

.rv.is-on {
  outline: 2px solid var(--acc);
  outline-offset: -1px;
}

.rv--h820 { height: calc(var(--u) * 820); }
.rv--h700 { height: calc(var(--u) * 700); align-self: end; }
.rv--h800 { height: calc(var(--u) * 800); }

.rv__mk {
  --mk: calc(var(--u) * 12);
  --mk-in: calc(var(--u) * 5.5);
  top: calc(var(--u) * 60);
}

.rv__mk--l { left: calc(var(--u) * 14); }
.rv__mk--r { right: calc(var(--u) * 14); }

.rv__tag {
  top: 38%;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 8) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 10);
  background: var(--glass9);
  border-color: var(--line3);
  font-size: max(12px, calc(var(--u) * 12));
}

.rv__num {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 28));
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
}

.rv__go {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rv__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

/* quote ticker */
.tick {
  border-top: .5px solid var(--line3);
  border-bottom: .5px solid var(--line3);
  overflow: hidden;
  padding: calc(var(--u) * 26) 0;
}

.tick__track {
  display: flex;
  width: max-content;
  margin-left: calc(var(--u) * -60);
  animation: tick 60s linear infinite;
}

.tick:hover .tick__track {
  animation-play-state: paused;
}

.tick__set {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 34);
  padding-right: calc(var(--u) * 34);
  white-space: nowrap;
}

.tick__q {
  font-size: max(12px, calc(var(--u) * 34));
  letter-spacing: -.02em;
  flex-shrink: 0;
}

@keyframes tick {
  to { transform: translateX(-50%); }
}

.revs__foot,
.jr__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
}

.revs__acts {
  display: flex;
  gap: calc(var(--u) * 14);
}

/* == 19. Journal ======================================================= */
.jr {
  gap: calc(var(--u) * 40);
}

.field--news {
  width: calc(var(--u) * 460);
  padding-left: calc(var(--u) * 22);
  gap: calc(var(--u) * 12);
}

.field--news .field__in {
  font-size: max(12px, calc(var(--u) * 17));
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: .5px solid var(--line2);
  border-left: .5px solid var(--line2);
}

.grid3__cell {
  display: flex;
}

.post {
  flex: 1;
  position: relative;
  padding: calc(var(--u) * 30) calc(var(--u) * 32) 0;
  border-right: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
  overflow: hidden;
  color: var(--ink);
}

.post:hover {
  background: var(--tint2);
}

.post__date {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 2.16);
}

.post__mark {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.post__cover {
  position: relative;
  height: calc(var(--u) * 460);
  border-radius: calc(var(--u) * 24);
  overflow: hidden;
  background: var(--stripes);
}

.post__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--lx-ease);
}

.post:hover .post__img {
  transform: scale(1.03);
}

.post__cover .slot__tag {
  top: 46%;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 8) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 10);
  background: var(--glass9);
  border-color: var(--line2);
  font-size: max(12px, calc(var(--u) * 12));
}

.post__tags {
  position: absolute;
  left: calc(var(--u) * 18);
  bottom: calc(var(--u) * 18);
  display: flex;
  gap: calc(var(--u) * 6);
}

.gchip {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--glass9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  white-space: nowrap;
  color: var(--ink);
}

.ring {
  position: absolute;
  right: calc(var(--u) * 18);
  bottom: calc(var(--u) * 18);
  width: calc(var(--u) * 68);
  height: calc(var(--u) * 68);
  border-radius: 50%;
  background: var(--glass9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ring__svg {
  position: absolute;
  inset: calc(var(--u) * 4);
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  transform: rotate(-90deg);
  fill: none;
}

.ring__b {
  stroke: var(--line2);
  stroke-width: 1.5;
}

.ring__a {
  stroke: var(--acc);
  stroke-width: 2;
  stroke-linecap: round;
}

.ring__a--8 { stroke-dasharray: 130.7 163.4; }
.ring__a--6 { stroke-dasharray: 98 163.4; }
.ring__a--5 { stroke-dasharray: 81.7 163.4; }

.ring__v {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.ring__n {
  font-size: max(12px, calc(var(--u) * 18));
}

.ring__u {
  font-size: max(12px, calc(var(--u) * 8));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.12);
  color: var(--mute);
}

.post__tw {
  position: relative;
  isolation: isolate;
}

.post__ghost {
  position: absolute;
  z-index: -1;
  right: calc(var(--u) * -20);
  top: calc(var(--u) * -30);
  width: calc(var(--u) * 300);
  height: calc(var(--u) * 190);
  pointer-events: none;
}

.post__ghost text {
  stroke: var(--ghost2);
}

.post__ghost--acc text {
  stroke: var(--acc-a35);
}

.post__t {
  max-width: calc(var(--u) * 640);
  font-size: max(12px, calc(var(--u) * 42));
  letter-spacing: -.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.post__p {
  font-size: max(12px, calc(var(--u) * 19));
  line-height: 1.5;
  color: var(--body);
}

.ctx {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  border: .5px solid var(--line2);
}

/* the whole car fits: the photo has plain white / black edges, the box takes the same colour */
.ctx__thumb {
  width: calc(var(--u) * 126);
  height: calc(var(--u) * 46);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 10);
  background: #fefefe url("../img/finance-light.webp") center / contain no-repeat;
  border: .5px solid var(--line2);
}

[data-theme="dark"] .ctx__thumb {
  background: #000 url("../img/finance-dark.webp") center / contain no-repeat;
}

.ctx__box {
  position: relative;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border-radius: calc(var(--u) * 10);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.1);
}

.bat {
  position: relative;
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 12);
  border: 1px solid var(--ink);
  border-radius: 2px;
}

.bat__f {
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  width: 70%;
  background: var(--ok);
}

.ctx__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.ctx__k {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
  color: var(--mute);
}

.ctx__v {
  font-size: max(12px, calc(var(--u) * 17));
  white-space: nowrap;
}

.ctx__go,
.ctx__dl {
  margin-left: auto;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ctx__go {
  background: var(--acc);
  color: #fff;
}

.ctx__dl {
  border: .5px solid var(--ink);
  transform: rotate(90deg);
}

.ctx__pct {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 22));
  color: var(--ok);
}

.post__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  border-top: .5px solid var(--line2);
  padding: calc(var(--u) * 18) 0 calc(var(--u) * 22);
}

.post__by {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.post__names {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.post__n {
  font-size: max(12px, calc(var(--u) * 15));
}

.post__role {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  color: var(--mute);
}

.post__btn {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
}

.post__dot {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.post__btn--acc {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.post__btn--acc .post__dot {
  background: #fff;
  color: var(--acc);
}

.post__prog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--line2);
}

.post__progf {
  display: block;
  height: 3px;
  background: var(--acc);
}

.post__progf--40 { width: 40%; }
.post__progf--0 { width: 0; }

.jr__all {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  color: var(--ink);
}

/* == 20. Stats ========================================================= */
.stats {
  gap: calc(var(--u) * 22);
}

.stats__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.38);
  color: var(--mute);
}

.stats__h {
  font-size: max(12px, calc(var(--u) * 13));
}

.stats__h .acc {
  margin-right: calc(var(--u) * 14);
}

.st {
  position: relative;
  padding: calc(var(--u) * 32) calc(var(--u) * 36);
  border-right: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.st:hover {
  background: var(--tint2);
}

.st__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  color: var(--mute);
}

.st__head .acc {
  margin-right: calc(var(--u) * 10);
}

.delta {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  border: .5px solid var(--ok);
  color: var(--ok);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
}

.delta--acc {
  border-color: var(--acc);
  color: var(--acc);
}

.st__fig {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 12);
}

.st__fig .fig {
  height: calc(var(--u) * 180);
  width: auto;
}

.st__unit {
  padding-bottom: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 22));
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--acc);
}

.st__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.st__t {
  font-size: max(12px, calc(var(--u) * 26));
  letter-spacing: -.02em;
}

.st__s {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.st__viz {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  border-top: .5px solid var(--line2);
  padding-top: calc(var(--u) * 18);
}

.wk {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 6);
  height: calc(var(--u) * 56);
}

.wk__b {
  flex: 1;
  border-radius: 2px;
  background: var(--ink);
}

.wk__b--0 { height: calc(var(--u) * 24); opacity: .25; }
.wk__b--1 { height: calc(var(--u) * 33); opacity: .33; }
.wk__b--2 { height: calc(var(--u) * 27); opacity: .41; }
.wk__b--3 { height: calc(var(--u) * 42); opacity: .49; }
.wk__b--4 { height: calc(var(--u) * 36); opacity: .57; }
.wk__b--5 { height: calc(var(--u) * 48); opacity: .65; }
.wk__b--6 { height: calc(var(--u) * 54); background: var(--acc); }

.st__lbls {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  color: var(--mute);
}

.st__agents {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.agents {
  display: flex;
}

.av--34 {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  margin-left: calc(var(--u) * -10);
  border: 1.5px solid var(--bg);
  background: repeating-linear-gradient(135deg, var(--av1) 0 calc(var(--u) * 5), var(--av2) calc(var(--u) * 5) calc(var(--u) * 10));
}

.av--34:first-child {
  margin-left: 0;
}

.st__on {
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--ok);
}

.st__reply {
  align-self: flex-start;
  height: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 11);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.route {
  width: 100%;
  height: calc(var(--u) * 56);
  overflow: visible;
  fill: none;
}

.route__plan { stroke: var(--ink); stroke-width: .8; stroke-dasharray: 4 5; }
.route__done { stroke: var(--acc); stroke-width: 2; }
.route__a { fill: var(--bg); stroke: var(--ink); }
.route__car { fill: var(--acc); }
.route__b { fill: var(--bg); stroke: var(--acc); }

/* == 21. Footer — spec sheet =========================================== */
.ft {
  position: relative;
  padding: calc(var(--u) * 90) var(--gut) calc(var(--u) * 87);
  background: var(--bg);
  overflow: hidden;
  color: var(--ink);
}

.ft__side {
  position: absolute;
  top: 50%;
  width: calc(var(--u) * 22);
  display: flex;
  justify-content: center;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 4.8);
  color: var(--mute);
}

.ft__side--l {
  left: calc(var(--u) * 14);
  transform: translateY(-50%) rotate(-90deg);
}

.ft__side--r {
  right: calc(var(--u) * 14);
  transform: translateY(-50%) rotate(90deg);
}

.reg {
  position: absolute;
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  fill: none;
  stroke: var(--acc);
  stroke-width: .7;
}

.reg--tl { left: calc(var(--u) * 43); top: calc(var(--u) * 73); }
.reg--tr { right: calc(var(--u) * 43); top: calc(var(--u) * 73); }
.reg--bl { left: calc(var(--u) * 43); bottom: calc(var(--u) * 43); }
.reg--br { right: calc(var(--u) * 43); bottom: calc(var(--u) * 43); }

.ft__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: .5px solid var(--line);
  border-left: .5px solid var(--line);
}

.ft__cell {
  position: relative;
  padding: calc(var(--u) * 30) calc(var(--u) * 34);
  border-right: .5px solid var(--line);
  border-bottom: .5px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 28);
  transition: background .2s;
}

.ft__cell:hover {
  background: var(--tint);
}

.ft__cell--s1 { grid-column: span 1; }
.ft__cell--s2 { grid-column: span 2; }
.ft__cell--s3 { grid-column: span 3; }
.ft__cell--s6 { grid-column: span 6; }

.ft__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.64);
  color: var(--mute);
}

.ft__n {
  margin-right: calc(var(--u) * 14);
  color: var(--acc);
}

.ft__logo {
  height: calc(var(--u) * 64);
  width: auto;
}

.vin {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.vin__bars {
  width: 100%;
  height: calc(var(--u) * 64);
  fill: var(--ink);
}

.vin__row {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 15));
  letter-spacing: calc(var(--u) * 6.3);
  color: var(--mute);
}

.odo {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.odo__d {
  position: relative;
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 70);
  border: .5px solid var(--line);
  border-radius: calc(var(--u) * 8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 38));
  color: var(--mute);
  background: var(--glass80);
}

.odo__d::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: .5px;
  background: var(--line);
}

.odo__d--ink { border-color: var(--ink); color: var(--ink); }
.odo__d--acc { border-color: var(--acc); color: var(--acc); }

.ft__live {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
  color: var(--acc);
}

.seal {
  width: calc(var(--u) * 150);
  height: calc(var(--u) * 150);
  fill: none;
}

.seal__o { stroke: var(--acc); stroke-width: .8; }
.seal__i { stroke: var(--acc); stroke-width: .5; stroke-dasharray: 2 3; }
.seal__c { stroke: var(--acc); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.seal__t {
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 400;
  fill: var(--acc);
}

.ft__links {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 20));
}

.ft__addr {
  display: flex;
  flex-direction: column;
  font-size: max(12px, calc(var(--u) * 22));
  line-height: 1.4;
}

.ft__cell--show {
  gap: calc(var(--u) * 28);
}

.ft__coord {
  margin-top: calc(var(--u) * -14);
  font-size: max(12px, calc(var(--u) * 13));
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.ft__open {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
}

.ft__tel {
  display: flex;
  flex-direction: column;
  font-size: max(12px, calc(var(--u) * 30));
  letter-spacing: -.01em;
}

.ft__note {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
  color: var(--mute);
}

.ft__news {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 30);
}

.ft__newst {
  font-size: max(12px, calc(var(--u) * 30));
  letter-spacing: -.02em;
  white-space: nowrap;
}

.ft__news .field {
  flex: 1;
}

.paint {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.paint li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.paint__sw {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border-radius: 50%;
  border: .5px solid var(--line);
}

.paint__sw--ember { background: var(--acc); }
.paint__sw--graphite { background: #111418; }
.paint__sw--silver { background: #c9ccd1; }

.paint__name {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 18));
}

.paint__code {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
}

.ft__social {
  display: flex;
  gap: calc(var(--u) * 12);
}

.ft__drive {
  justify-content: space-between;
  align-items: stretch;
  gap: calc(var(--u) * 22);
  background: var(--acc);
  color: #fff;
}

.ft__drive:hover {
  background: var(--acc-d);
  color: #fff;
}

.ft__drivel {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.64);
  color: rgba(255, 255, 255, .8);
}

.ft__driverow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.ft__drivet {
  display: flex;
  flex-direction: column;
  font-size: max(12px, calc(var(--u) * 26));
  line-height: 1.15;
}

.ft__mark {
  height: calc(var(--u) * 420);
  padding: 0;
  overflow: hidden;
  display: block;
}

.ft__markl,
.ft__markr {
  position: absolute;
  top: calc(var(--u) * 30);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.64);
  color: var(--mute);
}

.ft__markl { left: calc(var(--u) * 34); }
.ft__markr { right: calc(var(--u) * 34); }

.ft__word {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 66);
  text-align: center;
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  font-size: max(12px, calc(var(--u) * 430));
  line-height: .8;
  white-space: nowrap;
  color: transparent;
  background: #fff url("../img/car-clean.webp") center calc(var(--u) * -452) / calc(var(--u) * 2600) auto no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px var(--ink);
}

[data-theme="dark"] .ft__word {
  background-color: #111317;
  background-image: url("../img/car-dark.webp");
}

.ruler--ft {
  position: absolute;
  left: 0;
  bottom: 0;
  height: calc(var(--u) * 32);
}

.ft__legal {
  padding: calc(var(--u) * 22) calc(var(--u) * 34);
}

/* == 22. Responsive — tablet (768–1199px) ============================= */
@media (max-width: 1199px) {
  :root {
    --u: .6px;
    --gut: 32px;
  }

  /* header: burger + drawer */
  .hd__bar {
    font-size: 13px;
  }

  .hd__info li:nth-child(3),
  .hd__util a:nth-child(-n+3),
  .hd__sep {
    display: none;
  }

  .hd__main {
    height: auto;
    align-items: center;
  }

  .hd__logo,
  .hd__acts {
    position: relative;
    z-index: 2;
  }

  .logo {
    height: 44px;
  }

  .hd__burger {
    display: flex;
  }

  .nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    transform: none;
    padding: 150px var(--gut) 40px;
    overflow-y: auto;
    background: var(--bg);
  }

  .is-menu .nav {
    display: block;
  }

  .is-menu body {
    overflow: hidden;
  }

  .nav__list {
    height: auto;
    flex-direction: column;
    max-width: 560px;
    margin: 0 auto;
  }

  .nav__btn {
    width: 100%;
    height: 60px;
    padding: 0 4px;
    justify-content: space-between;
    border: 0;
    border-bottom: .5px solid var(--line);
    border-radius: 0;
    font-size: 17px;
  }

  .nav__btn.is-current {
    color: var(--acc);
    border-color: var(--line);
  }

  .nav__btn .ico {
    width: 12px;
    height: 12px;
    transition: transform .2s;
  }

  .nav__item.is-open .nav__btn .ico {
    transform: rotate(180deg);
  }

  .dd {
    position: static;
    padding: 0;
  }

  .dd__list {
    width: auto;
    padding: 4px 0 12px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .dd__link {
    padding: 14px 0;
    gap: 16px;
  }

  .dd__t {
    font-size: 14px;
  }

  /* second level becomes a nested accordion */
  .dd__sub,
  .dd__sub--up {
    position: static;
    padding: 0;
  }

  .dd__list--sub {
    width: auto;
    padding: 0 0 8px 28px;
  }

  .dd__list--sub .dd__link,
  .dd__list--tight .dd__link {
    padding: 12px 0;
  }

  .dd__more {
    width: 12px;
    height: 12px;
    transition: transform .2s;
  }

  .dd__grp.is-open .dd__more {
    transform: rotate(90deg);
  }

  .dd__n {
    font-size: 12px;
  }

  /* hero: copy, picture, search stacked */
  .hero {
    height: auto;
    padding: 150px var(--gut) 40px;
    background-image: linear-gradient(90deg, #f5f7fb 0%, #fff 25%, #fdfffe 50%, #fff 80%, #f8fafb 100%);
    background-size: 100% 100%;
  }

  [data-theme="dark"] .hero {
    background-image: linear-gradient(90deg, rgb(7, 8, 12) 0%, rgb(24, 26, 30) 25%, rgb(33, 35, 41) 50%, rgb(19, 21, 24) 75%, rgb(11, 12, 16) 100%);
  }

  .hero__social,
  .range,
  .gauge {
    display: none;
  }

  .hero__copy {
    position: static;
  }

  .hero__copy::after {
    content: "";
    display: block;
    width: calc(100% + 2 * var(--gut));
    height: 46vw;
    margin: 12px calc(-1 * var(--gut)) 0;
    background: url("../img/hero-bg.webp") 50% 72% / 140% auto no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  }

  [data-theme="dark"] .hero__copy::after {
    background-image: url("../img/hero-dark.webp");
  }

  .hero__title {
    font-size: 56px;
    line-height: 1.02;
  }

  .hero__sub {
    font-size: 19px;
    line-height: 1.4;
    white-space: normal;
  }

  .fincard {
    display: none;
  }

  .search {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: auto;
    margin-top: 12px;
    padding: 8px;
    border-radius: 28px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .search__f,
  .search__f.w12 {
    height: 72px;
    padding: 0 18px;
    border-right: 0;
    border-bottom: .5px solid var(--hi25);
  }

  .search__chev {
    right: 18px;
  }

  .search__sel {
    font-size: 16px;
  }

  .search__count {
    padding: 16px 18px;
    justify-content: flex-start;
  }

  .search__go {
    grid-column: 2 / -1;
    height: 56px;
    margin: 8px 0 0;
    justify-content: center;
  }

  /* section heads wrap */
  .shead {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .shead__r {
    flex-wrap: wrap;
    gap: 16px;
    max-width: 100%;
  }

  .chips {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .h2 {
    white-space: normal;
  }

  /* featured */
  .car {
    flex-basis: 340px;
  }

  .car__title {
    white-space: normal;
  }

  .feat__foot {
    flex-wrap: wrap;
    row-gap: 16px;
  }

  .feat__note {
    order: 5;
    width: 100%;
  }

  /* body type bento */
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(300px, auto);
    grid-template-areas:
      "big big"
      "lux ele"
      "suv cla"
      "con mix"
      "quiz quiz";
  }

  .bt__photo {
    min-height: 300px;
  }

  /* car of the week: stacked, the scene keeps its artboard proportions */
  .cw__stage {
    height: auto;
    padding: 40px var(--gut);
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .cw__l,
  .cw__r,
  .cw__week,
  .cw__thumbs,
  .cw__bar-panel {
    position: static;
  }

  .cw__l {
    order: 1;
  }

  .cw__scene {
    --u: calc(100vw / 2560 * 1.25);
    order: 2;
    position: relative;
    inset: auto;
    width: calc(var(--u) * 2560);
    height: calc(var(--u) * 1080);
    margin: -40px calc(50% - calc(var(--u) * 1280)) -20px;
  }

  .spot__lbl {
    display: none;
  }

  .cw__r {
    order: 3;
    align-items: flex-start;
  }

  .cw__price {
    align-items: flex-start;
  }

  .cw__week {
    display: none;
  }

  .cw__thumbs {
    order: 5;
  }

  .cw__thumbs ul {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cw__photos {
    text-align: left;
  }

  .cw__bar-panel {
    order: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 0;
    padding: 24px;
  }

  .cw__spec {
    padding: 0 20px;
  }

  .cw__spec:nth-child(3) {
    border-left: 0;
  }

  .cw__acts {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cw__book {
    flex: 1 1 260px;
  }

  .cw__row {
    flex: 1 1 260px;
  }

  .cw__title {
    white-space: normal;
  }

  .cw__tags {
    flex-wrap: wrap;
  }

  /* why, how, stats */
  .grid4,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps {
    row-gap: 48px;
  }

  .step__track {
    right: 0;
  }

  .step:nth-child(2n) .step__track {
    right: 0;
  }

  .backed {
    flex-wrap: wrap;
  }

  .backed__list {
    flex-wrap: wrap;
    gap: 10px;
  }

  .how__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .how__tags {
    flex-wrap: wrap;
    gap: 16px;
  }

  /* finance */
  .fin__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .fin__ctrl {
    justify-content: flex-start;
    row-gap: 10px;
  }

  .fin__chips {
    flex-wrap: wrap;
  }

  .fpill {
    height: auto;
    flex-direction: column;
    border-radius: 32px;
  }

  .fpill__car {
    padding: 20px;
  }

  .fpill__sliders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 0;
    padding: 4px 0 24px;
  }

  .fsl {
    padding: 0 20px;
  }

  .fsl:nth-child(odd) {
    border-left: 0;
  }

  .fsl--credit {
    grid-column: 1 / -1;
    border-left: 0;
  }

  .fsl__val {
    font-size: 15px;
  }

  .fres {
    padding: 20px 20px 20px 28px;
    border-radius: 28px;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .fin__foot {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .fin__foot > p:first-child {
    white-space: normal;
  }

  .split {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }

  /* reviews */
  .revs__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rvf {
    grid-column: 1 / -1;
    height: 640px;
  }

  .rv--h820,
  .rv--h700,
  .rv--h800 {
    height: 520px;
    align-self: start;
  }

  .revs__foot,
  .jr__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* journal */
  .grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--news {
    width: 100%;
    max-width: 460px;
  }

  .ctx__v {
    white-space: normal;
  }

  /* footer */
  .ft {
    padding: 48px var(--gut) 40px;
  }

  .ft__side,
  .reg {
    display: none;
  }

  .ft__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ft__cell--s2,
  .ft__cell--s3,
  .ft__cell--s6 {
    grid-column: 1 / -1;
  }

  .ft__cell--s1 {
    grid-column: span 1;
  }

  .ft__mark {
    height: 30vw;
  }

  .ft__word {
    top: 64px;
    font-size: 16vw;
    background-size: 97vw auto;
    background-position: center -16.8vw;
  }

  .ft__legal {
    grid-column: 1 / -1;
  }
}

/* == 23. Responsive — phone (≤767px) =================================== */
@media (max-width: 767px) {
  :root {
    --u: .5px;
    --gut: 16px;
  }

  .hd__bar {
    display: none;
  }

  .hd__main {
    margin-top: 16px;
  }

  .logo {
    height: 38px;
  }

  .hd__acts {
    gap: 8px;
  }

  .hd__acc,
  .hd__add {
    display: none;
  }

  .circ {
    width: 44px;
    height: 44px;
  }

  .nav {
    padding-top: 90px;
  }

  .hero {
    padding-top: 92px;
  }

  .hero__kicker {
    font-size: 12px;
    letter-spacing: .3em;
  }

  .hero__title {
    font-size: 38px;
  }

  .hero__sub {
    font-size: 16px;
  }

  .hero__ctas {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .btn {
    width: auto;
    padding: 0 22px;
    height: 48px;
    font-size: 15px;
  }

  .hero__copy::after {
    height: 62vw;
    background-size: 190% auto;
  }

  .search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 24px;
  }

  .search__f,
  .search__f.w12 {
    height: 64px;
    padding: 0 14px;
  }

  .search__chev {
    right: 14px;
  }

  .search__sel {
    font-size: 15px;
  }

  .search__count {
    grid-column: 1 / -1;
    padding: 12px 14px 4px;
  }

  .search__go {
    grid-column: 1 / -1;
  }

  .h2,
  .shead--80 .h2 {
    font-size: 40px;
  }

  .eyebrow {
    flex-wrap: wrap;
    row-gap: 6px;
    font-size: 12px;
    letter-spacing: .2em;
  }

  .shead__r .vsep,
  .shead--why .vsep--60 {
    display: none;
  }

  .car {
    flex-basis: 84vw;
  }

  .car__top {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .car__meta {
    white-space: normal;
  }

  /* tap targets */
  .pill,
  .apill,
  .lpill,
  .qchip,
  .fchip,
  .cw__book,
  .cw__res,
  .quiz__go,
  .post__btn,
  .field,
  .step__cta,
  .why__more,
  .jr__all {
    min-height: 44px;
  }

  .car__save,
  .post__mark {
    width: 40px;
    height: 40px;
  }

  .progress {
    flex-basis: 40%;
  }

  .bento {
    grid-template-areas:
      "big big"
      "lux ele"
      "suv cla"
      "con con"
      "mix mix"
      "quiz quiz";
    grid-auto-rows: minmax(220px, auto);
  }

  .bt {
    padding: 16px;
  }

  .bt__bigname {
    font-size: 48px;
  }

  .bt__specs {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }

  .bt__dl > div {
    padding: 0 10px;
  }

  .bt__specs .bt__go {
    justify-self: end;
  }

  .i-bigsports {
    width: 80px;
    height: 60px;
  }

  .quiz {
    padding: 20px;
  }

  .quiz__t {
    font-size: 30px;
  }

  .quiz__foot {
    flex-wrap: wrap;
    gap: 12px;
  }

  .cw__stage {
    padding: 32px var(--gut);
  }

  .cw__title {
    font-size: 44px;
  }

  .cw__scene {
    --u: calc(100vw / 2560 * 1.6);
    height: calc(var(--u) * 1000);
  }

  .timer {
    flex-wrap: wrap;
  }

  .cw__big {
    font-size: 56px;
  }

  .cw__bar-panel {
    padding: 20px 16px;
    border-radius: 24px;
  }

  .cw__spec {
    padding: 0 12px;
  }

  .cw__num {
    font-size: 36px;
  }

  .grid4,
  .steps,
  .grid3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid4--stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why__cell {
    padding: 24px 18px;
  }

  .why__fig .fig {
    max-width: 100%;
  }

  .vs__row {
    grid-template-columns: 110px 1fr auto;
  }

  .step__track {
    display: none;
  }

  .fin__title {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .fin__h2 {
    font-size: 40px;
  }

  .fin__ctrl .vsep {
    display: none;
  }

  .fpill__sliders {
    grid-template-columns: minmax(0, 1fr);
  }

  .fsl {
    border-left: 0;
  }

  .fsl__tiers {
    flex-wrap: wrap;
  }

  .fres {
    padding: 18px;
    gap: 14px;
  }

  .fres__ghost {
    display: none;
  }

  .fres__num {
    font-size: 52px;
  }

  .fres__go {
    width: 100%;
    height: 52px;
    border-radius: 26px;
    flex-direction: row;
    gap: 10px;
  }

  .fres__go > span {
    flex-direction: row;
    gap: 4px;
  }

  .revs__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rvf {
    height: 600px;
  }

  .rvf__panel {
    padding: 18px;
  }

  .rvf__q {
    font-size: 18px;
  }

  .rvf__thumb {
    display: none;
  }

  .rvf__play {
    top: 30%;
  }

  .rvf__story {
    top: calc(30% + 58px);
  }

  .rv--h820,
  .rv--h700,
  .rv--h800 {
    height: 400px;
  }

  .shead--80 .shead__r {
    gap: 14px;
  }

  .revs__acts {
    flex-wrap: wrap;
  }

  .post {
    padding: 20px 18px 0;
  }

  .post__cover {
    height: 56vw;
  }

  .post__t {
    font-size: 26px;
  }

  .st {
    padding: 20px 16px;
  }

  .st__lbls {
    flex-direction: column;
    gap: 4px;
  }

  .ft__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ft__cell {
    padding: 20px 16px;
    gap: 18px;
  }

  .ft__news {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ft__newst {
    white-space: normal;
  }

  .ft__social {
    flex-wrap: wrap;
  }

  .ft__cell:nth-child(13) {
    grid-column: span 1;
  }

  .ft__drive {
    grid-column: 1 / -1;
    min-height: 120px;
  }

  .ft__mark {
    height: 34vw;
  }

  .ft__word {
    top: 48px;
  }

  .ft__markr {
    display: none;
  }
}

@media (max-width: 420px) {
  .grid4--stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 359px) {
  .search {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* == 24. Reduced motion ================================================ */
@media (prefers-reduced-motion: reduce) {
  .spot,
  .rvf__play,
  .tick__track {
    animation: none;
  }

  .progress__fill,
  .split__s,
  .donut__s {
    transition: none;
  }
}

/* == 25. Sign in / sign up popup ======================================= */
/* calc(var(--m) * 1) = 1px of the 640px card; the card scales with the viewport height */
.auth {
  --m: clamp(.55px, calc(100vh / 1150), 1px);
  --in-bg: #fff;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 40px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow-y: auto;
}

[data-theme="dark"] .auth {
  --in-bg: #181a1f;
}

.auth[open] {
  display: flex;
  animation: auth-fade .2s ease-out;
}

.auth::backdrop {
  background: rgba(17, 20, 24, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: auth-fade .2s ease-out;
}

@keyframes auth-fade {
  from { opacity: 0; }
}

@keyframes auth-rise {
  from { opacity: 0; transform: translateY(16px); }
}

.is-modal,
.is-modal body {
  overflow: hidden;
}

.auth__card {
  width: calc(var(--m) * 640);
  margin: auto;
  padding: calc(var(--m) * 40) calc(var(--m) * 44) calc(var(--m) * 36);
  border-radius: calc(var(--m) * 40);
  background: var(--bg);
  box-shadow: 0 calc(var(--m) * 40) calc(var(--m) * 120) rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
  gap: calc(var(--m) * 24);
  animation: auth-rise .26s cubic-bezier(.2, .8, .2, 1);
}

.auth__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth__logo {
  height: calc(var(--m) * 40);
}

.auth__x {
  width: calc(var(--m) * 55);
  height: calc(var(--m) * 55);
  border-radius: 50%;
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}

.auth__x:hover {
  color: var(--acc);
}

.auth__x .ico {
  width: calc(var(--m) * 18);
  height: calc(var(--m) * 18);
}

.auth__head {
  display: flex;
  flex-direction: column;
  gap: calc(var(--m) * 10);
}

.auth__title {
  font-size: max(12px, calc(var(--m) * 48));
  letter-spacing: -.04em;
  line-height: 1;
}

.auth__sub {
  font-size: max(12px, calc(var(--m) * 17));
  color: var(--body);
}

.auth__tabs {
  display: flex;
  padding: calc(var(--m) * 4);
  border-radius: calc(var(--m) * 30);
  border: .5px solid var(--ink);
}

.auth__tab {
  flex: 1;
  height: calc(var(--m) * 50);
  border-radius: calc(var(--m) * 25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--m) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--m) * 1.82);
  white-space: nowrap;
  color: var(--ink);
}

.auth__tab:hover {
  color: var(--acc);
}

.auth__tab.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.auth__social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--m) * 10);
}

.auth__soc {
  height: calc(var(--m) * 58);
  border-radius: calc(var(--m) * 29);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--m) * 12);
  font-size: max(12px, calc(var(--m) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--m) * 1.68);
  color: var(--ink);
}

.auth__soc:hover {
  color: var(--acc);
}

.auth__soc .i20 {
  width: calc(var(--m) * 20);
  height: calc(var(--m) * 20);
}

.i-apple {
  width: calc(var(--m) * 18);
  height: calc(var(--m) * 20);
}

.auth__or {
  display: flex;
  align-items: center;
  gap: calc(var(--m) * 16);
  font-size: max(12px, calc(var(--m) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--m) * 2.64);
  color: var(--mute);
}

.auth__or span {
  flex: 1;
  height: .5px;
  background: var(--line2);
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--m) * 24);
}

.auth__names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--m) * 14);
}

/* fields */
.afield {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--m) * 8);
}

.afield__lbl {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--m) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--m) * 2.42);
  color: var(--mute);
}

.afield__lbl .acc {
  margin-right: calc(var(--m) * 8);
}

.afield__aside {
  color: var(--acc);
  text-transform: uppercase;
}

.afield__aside:hover {
  color: var(--acc-d);
}

.afield__aside--mute {
  color: var(--mute);
}

.afield__box {
  height: calc(var(--m) * 58);
  padding: 0 calc(var(--m) * 22);
  border-radius: calc(var(--m) * 29);
  border: .5px solid var(--line2);
  background: var(--in-bg);
  display: flex;
  align-items: center;
  gap: calc(var(--m) * 12);
  transition: border-color .15s, box-shadow .15s;
}

.afield.is-filled .afield__box {
  border-color: var(--ink);
}

.afield__box:focus-within,
.afield.is-filled .afield__box:focus-within {
  border: 1px solid var(--acc);
  box-shadow: 0 0 0 calc(var(--m) * 5) var(--acc-a14);
}

.afield.is-error .afield__box {
  border: 1px solid var(--acc);
}

.afield__in {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: max(12px, calc(var(--m) * 19));
  font-weight: 300;
  color: var(--ink);
}

.afield__ok {
  width: calc(var(--m) * 22);
  height: calc(var(--m) * 22);
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.afield__ok .ico {
  width: calc(var(--m) * 10);
  height: calc(var(--m) * 10);
}

.afield.is-valid .afield__ok {
  display: flex;
}

.afield__show {
  font-size: max(12px, calc(var(--m) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--m) * 1.76);
  color: var(--ink);
}

.afield__show:hover {
  color: var(--acc);
}

.afield__msg {
  font-size: max(12px, calc(var(--m) * 11));
  letter-spacing: calc(var(--m) * 0.44);
  color: var(--acc);
}

.afield__msg:empty {
  display: none;
}

.afield__msg.is-note {
  color: var(--ok);
}

/* keep me signed in */
.keep {
  display: flex;
  align-items: center;
  gap: calc(var(--m) * 12);
  font-size: max(12px, calc(var(--m) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--m) * 1.82);
  color: var(--ink);
  cursor: pointer;
}

.keep__in {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.keep__box {
  width: calc(var(--m) * 22);
  height: calc(var(--m) * 22);
  border-radius: calc(var(--m) * 6);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}

.keep__box .ico {
  width: calc(var(--m) * 11);
  height: calc(var(--m) * 11);
}

.keep__in:checked + .keep__box {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.keep__in:focus-visible + .keep__box {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* password strength */
.meter {
  display: flex;
  gap: calc(var(--m) * 6);
  margin-top: calc(var(--m) * -16);
}

.meter__s {
  flex: 1;
  height: calc(var(--m) * 3);
  border-radius: 2px;
  background: var(--line2);
  transition: background .2s;
}

.meter.is-weak .meter__s.is-on { background: var(--acc); }
.meter.is-ok .meter__s.is-on { background: var(--ok); }

/* primary button */
.auth__go {
  height: calc(var(--m) * 62);
  padding: 0 calc(var(--m) * 8) 0 calc(var(--m) * 30);
  border-radius: calc(var(--m) * 31);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: max(12px, calc(var(--m) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--m) * 1.8);
}

.auth__go:hover {
  background: var(--acc-d);
}

.auth__dot {
  position: relative;
  width: calc(var(--m) * 46);
  height: calc(var(--m) * 46);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth__arrow {
  width: calc(var(--m) * 18);
  height: calc(var(--m) * 18);
}

.auth__spin {
  display: none;
  width: calc(var(--m) * 20);
  height: calc(var(--m) * 20);
  border-radius: 50%;
  border: 2px solid var(--acc-a25);
  border-top-color: var(--acc);
  animation: auth-spin .7s linear infinite;
}

.auth__go.is-loading {
  cursor: progress;
}

.auth__go.is-loading .auth__arrow {
  display: none;
}

.auth__go.is-loading .auth__spin {
  display: block;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

.auth__foot {
  text-align: center;
  font-size: max(12px, calc(var(--m) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--m) * 1.92);
  color: var(--mute);
}

.auth__link {
  color: var(--acc);
  text-transform: uppercase;
}

.auth__link:hover {
  color: var(--acc-d);
}

.auth__terms {
  margin-top: calc(var(--m) * -8);
  font-size: max(12px, calc(var(--m) * 12));
  line-height: 1.5;
  color: var(--mute);
}

.auth__terms a {
  color: var(--ink);
  text-decoration: underline;
}

.auth__terms a:hover {
  color: var(--acc);
}

/* header avatar after sign-in */
.hd__me {
  width: calc(var(--u) * 55);
  height: calc(var(--u) * 55);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
  letter-spacing: calc(var(--u) * 1.08);
}

.hd__me:hover {
  background: var(--acc-d);
  color: #fff;
}

[hidden] {
  display: none !important;
}

@media (max-width: 1199px) {
  .hd__me {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }
}

/* phones: a full-screen sheet */
@media (max-width: 767px) {
  .auth {
    --m: .74px;
    padding: 0;
  }

  .auth__card {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 20px 16px 28px;
    border-radius: 0;
    gap: 20px;
  }

  .auth__x {
    width: 44px;
    height: 44px;
  }

  .auth__title {
    font-size: 36px;
  }

  .auth__names {
    grid-template-columns: minmax(0, 1fr);
  }

  .afield__box,
  .auth__soc,
  .auth__tab {
    min-height: 48px;
  }

  .afield__in {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth[open],
  .auth::backdrop,
  .auth__card {
    animation: none;
  }
}

/* == 26b. Skin — Cobalt (account › Preferences) ======================== */
/* <html data-skin="blue">: the accent picked on Preferences; no Home of its own, so only the colour tokens change */
[data-skin="blue"] {
  --acc: #1d5fd1;
  --acc-d: #174baa;
  --acc-s: #dee7fa;
  --acc-s2: #c4d5f5;
  --acc-s3: #eef3fd;
  --acc-a03: rgba(29, 95, 209, .03);
  --acc-a04: rgba(29, 95, 209, .04);
  --acc-a06: rgba(29, 95, 209, .06);
  --acc-a07: rgba(29, 95, 209, .07);
  --acc-a08: rgba(29, 95, 209, .08);
  --acc-a10: rgba(29, 95, 209, .1);
  --acc-a12: rgba(29, 95, 209, .12);
  --acc-a14: rgba(29, 95, 209, .14);
  --acc-a16: rgba(29, 95, 209, .16);
  --acc-a18: rgba(29, 95, 209, .18);
  --acc-a20: rgba(29, 95, 209, .2);
  --acc-a24: rgba(29, 95, 209, .24);
  --acc-a25: rgba(29, 95, 209, .25);
  --acc-a30: rgba(29, 95, 209, .3);
  --acc-a35: rgba(29, 95, 209, .35);
  --acc-a40: rgba(29, 95, 209, .4);
  --acc-a45: rgba(29, 95, 209, .45);
  --acc-a50: rgba(29, 95, 209, .5);
}

/* == 26. Skin — Racing Green (Home V2) ================================= */
/* <html data-skin="green">: the same page with a green accent and its own photos */
[data-skin="green"] {
  --acc: #12844f;
  --acc-d: #0c6a3f;
  --acc-s: #dcefe5;
  --acc-s2: #c2e3d1;
  --acc-s3: #eef7f2;
  --acc-a03: rgba(18, 132, 79, .03);
  --acc-a04: rgba(18, 132, 79, .04);
  --acc-a06: rgba(18, 132, 79, .06);
  --acc-a07: rgba(18, 132, 79, .07);
  --acc-a08: rgba(18, 132, 79, .08);
  --acc-a10: rgba(18, 132, 79, .1);
  --acc-a12: rgba(18, 132, 79, .12);
  --acc-a14: rgba(18, 132, 79, .14);
  --acc-a16: rgba(18, 132, 79, .16);
  --acc-a18: rgba(18, 132, 79, .18);
  --acc-a20: rgba(18, 132, 79, .2);
  --acc-a24: rgba(18, 132, 79, .24);
  --acc-a25: rgba(18, 132, 79, .25);
  --acc-a30: rgba(18, 132, 79, .3);
  --acc-a35: rgba(18, 132, 79, .35);
  --acc-a40: rgba(18, 132, 79, .4);
  --acc-a45: rgba(18, 132, 79, .45);
  --acc-a50: rgba(18, 132, 79, .5);
}

[data-skin="green"] .hero {
  background-image: url("../img/hero-v2-light-2.webp"), linear-gradient(90deg, #f9f9fb 0%, #fff 50%, #fafcfe 100%);
  background-size: calc(var(--u) * 2560) calc(var(--u) * 1108), 100% 100%;
}

[data-skin="green"][data-theme="dark"] .hero {
  background-image: url("../img/hero-v2-dark-3.webp"), linear-gradient(90deg, rgb(8, 10, 13) 0%, rgb(15, 18, 22) 50%, rgb(8, 10, 14) 100%);
}

[data-skin="green"] .fincard__img {
  aspect-ratio: 2065 / 762;
  background: url("../img/merc-profile-light.webp") center / contain no-repeat;
}

[data-skin="green"][data-theme="dark"] .fincard__img {
  background-image: url("../img/merc-profile-dark.webp");
}

/* car of the week: photo stage without floor rings, fading into the page */
[data-skin="green"] .cw__stage {
  background: linear-gradient(90deg, rgb(247, 250, 252) 0%, rgb(254, 254, 253) 50%, rgb(250, 252, 254) 100%);
}

[data-skin="green"][data-theme="dark"] .cw__stage {
  background: linear-gradient(90deg, rgb(6, 7, 10) 0%, rgb(15, 18, 23) 50%, rgb(9, 11, 14) 100%);
}

[data-skin="green"] .cw__rings {
  display: none;
}

[data-skin="green"] .cw__car {
  background: url("../img/car-week-amg-light.webp") center calc(var(--u) * 33) / calc(var(--u) * 2560) auto no-repeat;
}

[data-skin="green"][data-theme="dark"] .cw__car {
  background-image: url("../img/car-week-amg-dark.webp");
}

[data-skin="green"] .cw__fade {
  display: block;
  background: linear-gradient(180deg, rgba(249, 251, 253, 0) 0%, rgb(249, 251, 253) 55%);
}

[data-skin="green"][data-theme="dark"] .cw__fade {
  background: linear-gradient(180deg, rgba(10, 11, 13, 0) 0%, rgb(10, 11, 13) 55%);
}

[data-skin="green"] .spot--h1 { left: calc(var(--u) * 932); top: calc(var(--u) * 710); }
[data-skin="green"] .spot--h2 { left: calc(var(--u) * 1281); top: calc(var(--u) * 844); }
[data-skin="green"] .spot--h3 { left: calc(var(--u) * 1469); top: calc(var(--u) * 582); }
[data-skin="green"] .spot__lbl--h1 { right: calc(var(--u) * 1654); top: calc(var(--u) * 696); }
[data-skin="green"] .spot__lbl--h2 { left: calc(var(--u) * 1323); top: calc(var(--u) * 830); }
[data-skin="green"] .spot__lbl--h3 { left: calc(var(--u) * 1511); top: calc(var(--u) * 568); }

/* footer wordmark filled with the AMG photo */
[data-skin="green"] .ft__word {
  background-image: url("../img/car-week-amg-light.webp");
  background-position: center calc(var(--u) * -470);
}

[data-skin="green"][data-theme="dark"] .ft__word {
  background-image: url("../img/car-week-amg-dark.webp");
}

@media (max-width: 1199px) {
  [data-skin="green"] .hero {
    background-image: linear-gradient(90deg, #f9f9fb 0%, #fff 50%, #fafcfe 100%);
  }

  [data-skin="green"][data-theme="dark"] .hero {
    background-image: linear-gradient(90deg, rgb(8, 10, 13) 0%, rgb(15, 18, 22) 50%, rgb(8, 10, 14) 100%);
  }

  [data-skin="green"] .hero__copy::after {
    background-image: url("../img/hero-v2-light-2.webp");
  }

  [data-skin="green"][data-theme="dark"] .hero__copy::after {
    background-image: url("../img/hero-v2-dark-3.webp");
  }

  [data-skin="green"] .ft__word {
    background-position: center -17.6vw;
  }

  /* the AMG photo is wider than the Serpent cut-out: zoom the scene in more */
  [data-skin="green"] .cw__scene {
    --u: calc(100vw / 2560 * 1.5);
    height: calc(var(--u) * 1060);
    margin-top: -60px;
  }
}

@media (max-width: 767px) {
  [data-skin="green"] .cw__scene {
    --u: calc(100vw / 2560 * 1.9);
    height: calc(var(--u) * 1060);
    margin-top: -60px;
  }
}

/* == 27. Preloader ===================================================== */
/* the AVAVA outline draws itself, then slowly fills with the accent from the bottom up */
.pre {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--bg);
  transition: opacity .5s ease, visibility .5s ease;
  animation: pre-out .5s ease 8s forwards;
}

.pre.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pre__logo {
  width: min(340px, 64vw);
  height: auto;
  overflow: visible;
}

.pre__line {
  fill: none;
  stroke: var(--acc);
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pre-draw 1.1s ease-out forwards;
}

.pre__fill {
  fill: var(--acc);
  transform: translateY(26px);
  animation: pre-fill 1.8s cubic-bezier(.6, 0, .3, 1) .5s forwards;
}

.pre__sub {
  fill: var(--ink);
  opacity: 0;
  animation: pre-in .6s ease .6s forwards;
}

.pre__bar {
  position: relative;
  width: 160px;
  height: 1px;
  overflow: hidden;
  background: var(--line2);
}

.pre__run {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: var(--acc);
  animation: pre-run 1.2s ease-in-out infinite;
}

@keyframes pre-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes pre-fill {
  to { transform: translateY(0); }
}

@keyframes pre-in {
  to { opacity: 1; }
}

@keyframes pre-run {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

@keyframes pre-out {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .pre__line,
  .pre__fill,
  .pre__sub,
  .pre__run {
    animation: none;
  }

  .pre__line { stroke-dashoffset: 0; }
  .pre__fill { transform: none; }
  .pre__sub { opacity: 1; }
}

/* == 28. Inner pages — header, breadcrumbs, page header ================ */
/* Inner pages (<html data-accent="inherit">) wear the accent of the Home seen last */
.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.hatch {
  stroke: var(--acc);
  stroke-width: 1.2;
}

.hatch--30 { opacity: .3; }
.hatch--50 { opacity: .5; }
.hatch--55 { opacity: .55; }
.hatch--60 { opacity: .6; }

/* one inline logo: the word takes the ink, the outline takes the accent */
.logo--sym {
  display: block;
  aspect-ratio: 172 / 51;
  color: var(--ink);
  stroke: var(--acc);
}

/* footer paint label of the current accent */
.sk--v2,
[data-skin="green"] .sk--v1 {
  display: none;
}

[data-skin="green"] .sk--v2 {
  display: inline;
}

.i26 { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }

/* accent crop mark (+) */
.cross {
  position: absolute;
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  pointer-events: none;
  background:
    linear-gradient(var(--acc), var(--acc)) calc(var(--u) * 6.5) 0 / 1px 100% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 0 calc(var(--u) * 6.5) / 100% 1px no-repeat;
}

.cross--12 {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  background-position: calc(var(--u) * 5.5) 0, 0 calc(var(--u) * 5.5);
}

/* header: in the flow, on the page colour, a hairline 20px under the logo */
.hd--inner {
  position: relative;
  padding-bottom: calc(var(--u) * 21);
  background: var(--bg);
}

.hd--inner::after {
  content: "";
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: 0;
  height: 1px;
  background: var(--hair);
}

/* breadcrumbs */
.crumbs {
  position: relative;
  z-index: 2;
  padding: calc(var(--u) * 10) var(--gut) 0;
}

.crumbs__list {
  height: calc(var(--u) * 22);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.08);
  color: var(--mute);
}

.crumbs__list li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  white-space: nowrap;
}

.crumbs__list a {
  color: var(--mute);
}

.crumbs__list a:hover,
.crumbs__list [aria-current] {
  color: var(--acc);
}

/* page header: the page name drawn huge in BBH Bartle, first glyph hatched */
.phead {
  position: relative;
  height: calc(var(--u) * 300);
  margin: calc(var(--u) * -22) var(--gut) 0;
  overflow: hidden;
}

.phead__art {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 2440);
  height: calc(var(--u) * 300);
}

.phead__dash {
  stroke: var(--mute);
  stroke-width: .5;
  stroke-dasharray: 2 8;
}

.phead__fill,
.phead__word {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  font-size: 440px;
}

.phead__fill {
  fill: url("#hatch-50");
}

.phead__word {
  fill: none;
  stroke: var(--acc-a40);
  stroke-width: 1;
}

.phead__dim line {
  stroke: var(--acc);
  stroke-width: .5;
}

.phead__lbg {
  fill: var(--bg);
}

.phead__lbl {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  fill: var(--acc);
}

.phead__art .ruler__min { stroke: var(--mute); }

.phead__cross {
  left: calc(var(--u) * 533);
  top: calc(var(--u) * 55);
}

.phead__txt {
  position: absolute;
  left: 0;
  bottom: calc(var(--u) * 44);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.phead__h1 {
  font-size: max(12px, calc(var(--u) * 130));
  letter-spacing: -.055em;
  line-height: .95;
}

.phead__intro {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
  font-size: max(12px, calc(var(--u) * 24));
  line-height: 1.45;
  color: var(--body);
  white-space: nowrap;
}

.phead__rule {
  width: calc(var(--u) * 60);
  height: .5px;
  flex-shrink: 0;
  background: var(--acc);
}

.phead__meta {
  position: absolute;
  right: 0;
  top: 0;
  height: calc(var(--u) * 22);
  padding-left: calc(var(--u) * 24);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 34);
  background: var(--bg);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  color: var(--mute);
  white-space: nowrap;
}

.phead__v {
  color: var(--ink);
}

.phead__loc {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  color: var(--acc);
}

.phead__dot {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: var(--acc);
}

/* accent pill button with a white arrow dot */
.btn-acc {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 28);
  border-radius: calc(var(--u) * 30);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
  white-space: nowrap;
}

.btn-acc:hover {
  background: var(--acc-d);
  color: #fff;
}

.btn-acc__dot {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* photo slots of inner pages: marks 14px in, the tag a little above the middle */
.slot--ab .slot__mk--tl { left: calc(var(--u) * 14); top: calc(var(--u) * 14); }
.slot--ab .slot__mk--tr { right: calc(var(--u) * 14); top: calc(var(--u) * 14); }
.slot--ab .slot__mk--bl { left: calc(var(--u) * 14); bottom: calc(var(--u) * 14); }
.slot--ab .slot__mk--br { right: calc(var(--u) * 14); bottom: calc(var(--u) * 14); }

.slot--ab .slot__tag {
  top: 44%;
  border-color: var(--line2);
  gap: calc(var(--u) * 4);
  background: var(--glass9);
}

/* tablet */
@media (max-width: 1199px) {
  .hd--inner {
    padding-bottom: 16px;
  }

  .crumbs {
    padding-top: 16px;
  }

  .phead {
    height: auto;
    margin-top: 12px;
    padding: 56px 0 36px;
  }

  .phead__art {
    left: auto;
    right: -40px;
    top: 0;
    width: 1464px;
    height: 180px;
  }

  .phead__cross,
  .phead__meta {
    display: none;
  }

  .phead__txt {
    position: relative;
    bottom: auto;
    gap: 14px;
  }

  .phead__h1 {
    font-size: 64px;
  }

  .phead__intro {
    font-size: 17px;
    white-space: normal;
    max-width: 640px;
  }

  .phead__rule {
    width: 40px;
  }
}

/* phone */
@media (max-width: 767px) {
  .crumbs__list {
    height: auto;
    flex-wrap: wrap;
    row-gap: 6px;
    font-size: 12px;
  }

  .phead {
    padding: 40px 0 28px;
  }

  .phead__art {
    right: -120px;
    height: 150px;
    width: 1220px;
  }

  .phead__h1 {
    font-size: 46px;
  }

  .phead__intro {
    align-items: flex-start;
    font-size: 15px;
  }

  .phead__rule {
    width: 24px;
    margin-top: 11px;
  }
}

/* == 29. About — story ================================================= */
:root {
  --ab-ghost: rgba(17, 20, 24, .18);
  --ab-ghost-line: rgba(17, 20, 24, .12);
  --ab-bar: rgba(17, 20, 24, .14);
  --ab-road: #fff;
  --ab-map1: #eceef1;
  --ab-map2: #f3f4f6;
  --ab-card-dark: #111418;
  --ab-glass95: rgba(255, 255, 255, .95);
}

[data-theme="dark"] {
  --ab-ghost: rgba(242, 243, 245, .2);
  --ab-ghost-line: rgba(242, 243, 245, .2);
  --ab-bar: rgba(242, 243, 245, .14);
  --ab-road: #262a31;
  --ab-map1: #171a1f;
  --ab-map2: #13151a;
  --ab-card-dark: #0b0c0f;
  --ab-glass95: rgba(20, 22, 27, .92);
}

.fig .fig__hatch {
  stroke: none;
}

.fig .fig__hatch--55 {
  fill: url("#hatch-55");
}

.story {
  position: relative;
  height: calc(var(--u) * 1180);
}

.story__pano {
  position: relative;
  height: calc(var(--u) * 860);
  border-radius: calc(var(--u) * 40);
  overflow: hidden;
  background: var(--stripes);
}

.story__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__img--top {
  object-position: 50% 20%;
}

.story__x--tl { left: calc(var(--u) * 14); top: calc(var(--u) * 14); }
.story__x--tr { right: calc(var(--u) * 14); top: calc(var(--u) * 14); }
.story__x--bl { left: calc(var(--u) * 14); bottom: calc(var(--u) * 14); }
.story__x--br { right: calc(var(--u) * 14); bottom: calc(var(--u) * 14); }

/* timeline across the panorama */
.story__tl {
  position: absolute;
  left: calc(var(--u) * 60);
  right: calc(var(--u) * 60);
  top: calc(var(--u) * 40);
  display: flex;
  justify-content: space-between;
}

.story__tl::before,
.story__tl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}

.story__tl::before {
  top: calc(var(--u) * 7.5);
  height: .5px;
  background: var(--ink);
  opacity: .5;
}

.story__tl::after {
  top: calc(var(--u) * 7);
  height: 2px;
  background: var(--acc);
}

.story__yr {
  position: relative;
  z-index: 1;
  width: 0;
  padding-top: calc(var(--u) * 26);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.story__yr:first-child { align-items: flex-start; }
.story__yr:last-child { align-items: flex-end; }

.story__dot {
  position: absolute;
  left: calc(var(--u) * -8);
  top: 0;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border-radius: 50%;
  background: var(--glass9);
  border: .5px solid var(--ink);
}

.story__yr:first-child .story__dot,
.story__yr:last-child .story__dot {
  border: 0;
  background: var(--acc);
}

.story__yl {
  padding: calc(var(--u) * 2) calc(var(--u) * 8);
  border-radius: calc(var(--u) * 8);
  background: var(--glass9);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  white-space: nowrap;
  color: var(--ink);
}

.story__yr:first-child .story__yl,
.story__yr:last-child .story__yl {
  color: var(--acc);
}

.story__year {
  position: absolute;
  right: calc(var(--u) * 60);
  top: calc(var(--u) * 200);
  width: calc(var(--u) * 1100);
  height: calc(var(--u) * 330);
  pointer-events: none;
}

.story__chips {
  position: absolute;
  right: calc(var(--u) * 60);
  top: calc(var(--u) * 560);
  display: flex;
  gap: calc(var(--u) * 8);
}

.story__chip {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 19);
  background: var(--glass9);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  white-space: nowrap;
  color: var(--ink);
}

.story__chip--mono {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: none;
  letter-spacing: 0;
  color: var(--mute);
  font-weight: 400;
}

.story__cdot {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: var(--acc);
}

/* the story card over the panorama */
.story__card {
  position: absolute;
  left: calc(var(--u) * 60);
  bottom: 0;
  width: calc(var(--u) * 1460);
  padding: calc(var(--u) * 50) calc(var(--u) * 56);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  border: .5px solid var(--line2);
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 60) rgba(17, 20, 24, .1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 34) calc(var(--u) * 50);
}

.story__top,
.story__h2,
.story__quote,
.story__foot {
  grid-column: 1 / -1;
}

.story__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.story__code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 0.96);
  color: var(--mute);
  font-weight: 400;
}

.story__h2 {
  font-size: max(12px, calc(var(--u) * 88));
  letter-spacing: -.045em;
  line-height: 1;
}

.story__p {
  font-size: max(12px, calc(var(--u) * 21));
  line-height: 1.55;
  color: var(--body);
}

.story__p--lead {
  color: var(--ink);
}

.story__cap {
  float: left;
  margin: calc(var(--u) * 6) calc(var(--u) * 14) 0 0;
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 92));
  line-height: .8;
  color: var(--acc);
  font-weight: 400;
}

.story__quote {
  position: relative;
  margin: 0;
  padding: calc(var(--u) * 26) 0 calc(var(--u) * 26) calc(var(--u) * 90);
  border-top: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  font-size: max(12px, calc(var(--u) * 34));
  letter-spacing: -.02em;
  line-height: 1.3;
}

.story__qm {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 10);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 110));
  line-height: 1;
  color: var(--acc);
  font-weight: 400;
  letter-spacing: 0;
}

.story__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.story__who {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.story__av {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  flex-shrink: 0;
  border-radius: 50%;
  border: .5px solid var(--line2);
  object-fit: cover;
  object-position: 50% 30%;
}

.story__wn {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.story__name {
  font-size: max(12px, calc(var(--u) * 22));
}

.story__role {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.story__facts {
  display: flex;
}

.story__facts li {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
  padding: 0 calc(var(--u) * 26);
  border-left: .5px solid var(--line2);
}

.story__fn {
  font-size: max(12px, calc(var(--u) * 44));
  letter-spacing: -.03em;
  line-height: 1;
}

.story__fl {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--mute);
}

/* the second photo */
.story__fig {
  position: absolute;
  right: calc(var(--u) * 60);
  bottom: 0;
  width: calc(var(--u) * 780);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.story__photo {
  position: relative;
  background: var(--stripes);
  height: calc(var(--u) * 420);
  border-radius: calc(var(--u) * 30);
  overflow: hidden;
  border: calc(var(--u) * 6) solid var(--bg);
}

.story__cap2 {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
}

.story__fign {
  margin-right: calc(var(--u) * 10);
}

/* == 30. About — by the numbers ======================================== */
.nums {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.nums__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.38);
  color: var(--mute);
}

.nums__title {
  font-size: max(12px, calc(var(--u) * 13));
  letter-spacing: calc(var(--u) * 3.38);
}

.nums__title .acc {
  margin-right: calc(var(--u) * 14);
}

.nums__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: .5px solid var(--line2);
  border-left: .5px solid var(--line2);
}

.nums__cell {
  padding: calc(var(--u) * 32) calc(var(--u) * 36);
  border-right: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  transition: background .2s;
}

.nums__cell:hover {
  background: var(--acc-a03);
}

.nums__cell--first {
  box-shadow: inset 0 2px 0 var(--acc);
}

.nums__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nums__lbl {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  white-space: nowrap;
  color: var(--mute);
}

.nums__lbl .acc {
  margin-right: calc(var(--u) * 10);
}

.nums__chip {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  border: .5px solid currentColor;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
}

.nums__chip--acc { color: var(--acc); }
.nums__chip--ok { color: var(--ok); }

.nums__val {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 10);
}

.nums__fig {
  height: calc(var(--u) * 170);
  width: auto;
}

.nums__unit {
  padding-bottom: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 22));
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--acc);
}

.nums__sub {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  color: var(--mute);
}

.nums__vis {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  padding-top: calc(var(--u) * 18);
  border-top: .5px solid var(--line2);
}

.nums__leg {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  color: var(--mute);
}

/* 01: seven years on a line */
.ntl {
  position: relative;
  height: calc(var(--u) * 30);
  margin: 0 calc(var(--u) * -6);
  padding-top: calc(var(--u) * 3);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.ntl::before,
.ntl::after {
  content: "";
  position: absolute;
  left: calc(var(--u) * 6);
  right: calc(var(--u) * 6);
}

.ntl::before {
  top: calc(var(--u) * 9);
  height: .5px;
  background: var(--line2);
}

.ntl::after {
  top: calc(var(--u) * 8);
  height: 2px;
  background: var(--acc);
}

.ntl__d {
  position: relative;
  z-index: 1;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  margin-top: calc(var(--u) * 3);
  border-radius: 50%;
  background: var(--bg);
  border: .5px solid var(--ink);
}

.ntl__d:first-child,
.ntl__d:last-child {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  margin-top: 0;
  background: var(--acc);
  border-color: var(--acc);
}

/* 02: cars sold per year */
.nbars {
  height: calc(var(--u) * 56);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 6);
}

.nbars__b {
  flex: 1;
  border-radius: calc(var(--u) * 2);
  background: var(--ink);
}

.nbars__b:nth-child(1) { height: calc(var(--u) * 4); opacity: .2; }
.nbars__b:nth-child(2) { height: calc(var(--u) * 9); opacity: .28; }
.nbars__b:nth-child(3) { height: calc(var(--u) * 14); opacity: .36; }
.nbars__b:nth-child(4) { height: calc(var(--u) * 20); opacity: .44; }
.nbars__b:nth-child(5) { height: calc(var(--u) * 28); opacity: .52; }
.nbars__b:nth-child(6) { height: calc(var(--u) * 36); opacity: .6; }
.nbars__b:nth-child(7) { height: calc(var(--u) * 44); opacity: .68; }

.nbars__b:nth-child(8) {
  height: calc(var(--u) * 54);
  background: var(--acc);
}

/* 03: stars and the split of reviews */
.nstars {
  display: flex;
  gap: calc(var(--u) * 3);
  color: var(--acc);
}

.nsplit {
  display: flex;
  gap: calc(var(--u) * 4);
}

.nsplit__b {
  position: relative;
  flex: 1;
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  overflow: hidden;
  background: var(--line2);
}

.nsplit__f {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1%;
  background: var(--ink);
}

.nsplit__b:nth-child(1) .nsplit__f { width: 92%; background: var(--acc); }
.nsplit__b:nth-child(2) .nsplit__f { width: 6%; }
.nsplit__b:nth-child(5) .nsplit__f { width: 0; }

/* 04: the delivery route */
.nroute {
  display: block;
  width: 100%;
  height: calc(var(--u) * 50);
  overflow: visible;
}

.nroute__all {
  fill: none;
  stroke: var(--ink);
  stroke-width: .8;
  stroke-dasharray: 4 5;
}

.nroute__done {
  fill: none;
  stroke: var(--acc);
  stroke-width: 2;
}

.nroute__a {
  fill: var(--bg);
  stroke: var(--ink);
}

.nroute__now {
  fill: var(--acc);
}

.nroute__b {
  fill: var(--bg);
  stroke: var(--acc);
}

.nums__ruler .ruler__min,
.miles__ruler .ruler__min,
.prom__ruler .ruler__min {
  stroke: var(--mute);
}

/* == 31. About — promises ============================================== */
.prom {
  gap: calc(var(--u) * 40);
}

.pips {
  display: flex;
  gap: calc(var(--u) * 8);
}

.pips span {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: var(--line2);
}

.pips .pips__on {
  width: calc(var(--u) * 56);
  background: var(--acc);
}

.prom__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 18);
}

.prom__card {
  position: relative;
  height: calc(var(--u) * 600);
  padding: calc(var(--u) * 34);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s;
}

.prom__card:hover {
  border-color: var(--acc);
}

.prom__ghost {
  position: absolute;
  right: calc(var(--u) * -120);
  top: calc(var(--u) * -30);
  width: calc(var(--u) * 560);
  height: calc(var(--u) * 600);
  pointer-events: none;
}

.prom__ghost text {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: 540px;
  stroke: var(--ab-ghost);
  stroke-width: 1;
  font-weight: 400;
}

.prom__g1 {
  stroke: var(--ab-ghost-line);
  stroke-width: .5;
  stroke-dasharray: 2 7;
}

.prom__g2 {
  stroke: var(--acc);
  stroke-width: .5;
  stroke-dasharray: 5 6;
  opacity: .6;
}

.prom__x {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  background-position: calc(var(--u) * 5.5) 0, 0 calc(var(--u) * 5.5);
}

.prom__x--tl { left: calc(var(--u) * 14); top: calc(var(--u) * 14); }
.prom__x--br { right: calc(var(--u) * 14); bottom: calc(var(--u) * 14); }

.prom__top,
.prom__proof,
.prom__body,
.prom__foot {
  position: relative;
}

.prom__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prom__ico {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border-radius: 50%;
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.prom__num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 4);
}

.prom__of {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  color: var(--mute);
}

.prom__cat {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2);
  color: var(--mute);
}

.prom__proof {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
}

.prom__big {
  font-size: max(12px, calc(var(--u) * 72));
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--acc);
}

.prom__unit {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.prom__body {
  margin-top: calc(var(--u) * 22);
  padding-top: calc(var(--u) * 20);
  border-top: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.prom__name {
  font-size: max(12px, calc(var(--u) * 46));
  letter-spacing: -.035em;
  line-height: 1;
}

.prom__text {
  font-size: max(12px, calc(var(--u) * 19));
  line-height: 1.5;
  color: var(--body);
}

.prom__foot {
  margin-top: calc(var(--u) * 20);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.prom__ruler {
  flex: 0 1 70%;
  min-width: 0;
  height: calc(var(--u) * 10);
}

.prom__ok {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  white-space: nowrap;
  color: var(--ok);
}

/* card 01 is always dark */
.prom__card--dark {
  border-color: var(--acc);
  background: var(--ab-card-dark);
  color: #f2f3f5;
}

.prom__card--dark .prom__ghost text { stroke: var(--acc); }
.prom__card--dark .prom__g1 { stroke: rgba(242, 243, 245, .2); }

.prom__card--dark .prom__ico {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.prom__card--dark .prom__of,
.prom__card--dark .prom__cat,
.prom__card--dark .prom__unit,
.prom__card--dark .ruler__min {
  color: #7d838d;
  stroke: #7d838d;
}

.prom__card--dark .prom__body {
  border-top-color: rgba(242, 243, 245, .16);
}

.prom__card--dark .prom__text {
  color: #a3a9b3;
}

/* == 32. About — team ================================================== */
.team {
  gap: calc(var(--u) * 40);
}

.team__stack {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 30);
}

.team__avs {
  display: flex;
}

.team__av,
.team__more {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  margin-left: calc(var(--u) * -12);
  border: 1.5px solid var(--bg);
  font-weight: 400;
}

.team__av:first-child {
  margin-left: 0;
}

.team__av {
  background: repeating-linear-gradient(135deg, var(--s1) 0 calc(var(--u) * 5), var(--s2) calc(var(--u) * 5) calc(var(--u) * 10));
}

.team__more {
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 12));
}

.team__meta {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
}

.team__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: calc(var(--u) * 500) calc(var(--u) * 500);
  gap: calc(var(--u) * 18);
}

.team__card {
  position: relative;
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--line2);
  overflow: hidden;
  transition: border-color .2s;
}

.team__card:hover {
  border-color: var(--acc);
}

.team__card--lead {
  grid-row: span 2;
  border-radius: calc(var(--u) * 32);
  border-color: var(--acc);
}

.team__photo {
  position: absolute;
  inset: 0;
}

.team__photo .slot__tag {
  top: 38%;
  border-color: var(--line2);
  padding: calc(var(--u) * 8) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 12));
  background: var(--glass94);
}

.team__photo .slot__mk--bl,
.team__photo .slot__mk--br,
.team__card:not(.team__card--lead) .slot__mk--tr {
  display: none;
}

.team__card:not(.team__card--lead) .slot__mk--tl {
  left: calc(var(--u) * 12);
  top: calc(var(--u) * 12);
}

/* founder photo: lifted a little so the face clears the quote panel */
.team__img {
  position: absolute;
  left: 0;
  top: -12%;
  width: 100%;
  height: 112%;
  object-fit: cover;
}

.team__x {
  z-index: 2;
}

.team__img--m {
  top: 0;
  height: 100%;
  object-position: 50% 30%;
}

.team__x--m { left: calc(var(--u) * 12); top: calc(var(--u) * 12); }

/* on a photo the outlined number turns light */
.team__card--photo .team__n text {
  stroke: rgba(255, 255, 255, .85);
}
.team__x--tl { left: calc(var(--u) * 14); top: calc(var(--u) * 14); }
.team__x--tr { right: calc(var(--u) * 14); top: calc(var(--u) * 14); }

.team__ghost {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 30);
  width: calc(var(--u) * 940);
  height: calc(var(--u) * 360);
  pointer-events: none;
}

.team__ghost text {
  stroke: var(--acc);
  stroke-opacity: .5;
}

.team__chips {
  position: absolute;
  left: calc(var(--u) * 22);
  top: calc(var(--u) * 22);
  display: flex;
  gap: calc(var(--u) * 6);
}

.team__card--lead .team__chips {
  left: calc(var(--u) * 24);
  top: calc(var(--u) * 24);
  gap: calc(var(--u) * 8);
}

.tchip {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--glass94);
  border: .5px solid var(--line2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  white-space: nowrap;
  color: var(--ink);
}

.tchip--acc {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.team__n {
  position: absolute;
  right: calc(var(--u) * 22);
  top: calc(var(--u) * 18);
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 60);
}

.team__panel {
  position: absolute;
  left: calc(var(--u) * 14);
  right: calc(var(--u) * 14);
  bottom: calc(var(--u) * 14);
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 20);
  background: var(--glass94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.team__who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.team__name {
  font-size: max(12px, calc(var(--u) * 28));
  letter-spacing: -.02em;
}

.team__fact {
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--body);
}

.team__since {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  white-space: nowrap;
  color: var(--mute);
}

.team__panel--lead {
  left: calc(var(--u) * 18);
  right: calc(var(--u) * 18);
  bottom: calc(var(--u) * 18);
  padding: calc(var(--u) * 34) calc(var(--u) * 36);
  border-radius: calc(var(--u) * 26);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--u) * 22);
}

.team__quote {
  position: relative;
  margin: 0;
  padding-left: calc(var(--u) * 70);
  font-size: max(12px, calc(var(--u) * 32));
  letter-spacing: -.02em;
  line-height: 1.3;
}

.team__qm {
  position: absolute;
  left: 0;
  top: calc(var(--u) * -14);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 90));
  line-height: 1;
  color: var(--acc);
  font-weight: 400;
  letter-spacing: 0;
}

.team__sig {
  padding-top: calc(var(--u) * 20);
  border-top: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.team__lname {
  font-size: max(12px, calc(var(--u) * 40));
  letter-spacing: -.03em;
}

.team__lrole {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
}

.team__ln {
  width: calc(var(--u) * 110);
  height: calc(var(--u) * 70);
}

.team__bottom {
  padding-top: calc(var(--u) * 24);
  border-top: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
  color: var(--mute);
}

.team__hire {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  color: var(--ink);
}

.team__hire:hover {
  color: var(--acc);
}

.team__hdot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--acc);
}

/* == 33. About — milestones ============================================ */
.miles {
  gap: calc(var(--u) * 36);
}

.miles__total {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 14);
}

.miles__tl {
  padding-bottom: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  color: var(--mute);
}

.miles__fig {
  width: calc(var(--u) * 330);
  height: calc(var(--u) * 100);
}

.miles__table {
  display: flex;
  flex-direction: column;
  border-top: .5px solid var(--line2);
  border-left: .5px solid var(--line2);
}

.miles__chart {
  position: relative;
  margin: 0;
}

.miles__trend {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 140);
  width: 100%;
  height: calc(var(--u) * 260);
  overflow: visible;
  pointer-events: none;
}

.miles__guide {
  stroke: var(--mute);
  stroke-width: .5;
  stroke-dasharray: 2 8;
  opacity: .6;
}

.miles__line {
  fill: none;
  stroke: var(--acc);
  stroke-width: 1;
  stroke-dasharray: 6 6;
}

.miles__cols,
.miles__rows {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.miles__col {
  position: relative;
  padding: calc(var(--u) * 26) calc(var(--u) * 30) 0;
  border-right: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
  transition: background .2s;
}

.miles__col:hover {
  background: var(--acc-a03);
}

.miles__head {
  height: calc(var(--u) * 40);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.miles__lbl {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  color: var(--mute);
}

.miles__lbl .acc {
  margin-right: calc(var(--u) * 10);
}

.mchip {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  white-space: nowrap;
  color: var(--mute);
}

.mchip--ok { color: var(--ok); }

.mchip--now {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.mchip__dot {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: #fff;
}

.miles__bar {
  position: relative;
  height: calc(var(--u) * 260);
  margin-top: calc(var(--u) * 60);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.miles__fill {
  position: relative;
  width: 62%;
  border-radius: calc(var(--u) * 14) calc(var(--u) * 14) 0 0;
  border: .5px solid var(--line2);
  border-bottom: 0;
  background: repeating-linear-gradient(135deg, var(--ab-bar) 0 calc(var(--u) * 6), transparent calc(var(--u) * 6) calc(var(--u) * 12));
}

.miles__fill--1,
.miles__fill--2 { height: 4%; }
.miles__fill--3 { height: 29%; }
.miles__fill--4 { height: 53%; }
.miles__fill--5 { height: 85%; }

.miles__fill--6 {
  height: 100%;
  border-color: var(--acc);
  background: var(--acc);
}

.miles__val {
  position: absolute;
  left: 50%;
  bottom: calc(100% + calc(var(--u) * 26));
  transform: translateX(-50%);
  font-size: max(12px, calc(var(--u) * 18));
  white-space: nowrap;
}

.miles__col--now .miles__val {
  color: var(--acc);
}

/* trend points sit on the bar tops, over the dashed line */
.miles__pt {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  border-radius: 50%;
  border: 1px solid var(--acc);
  background: var(--bg);
  transform: translate(-50%, -50%);
}

.miles__col--now .miles__pt {
  width: calc(var(--u) * 19);
  height: calc(var(--u) * 19);
  background: var(--acc);
}

.miles__rows {
  border-top: .5px solid var(--line2);
}

.miles__row {
  padding: calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 30);
  border-right: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.miles__row .fig {
  width: calc(var(--u) * 152);
  height: calc(var(--u) * 64);
}

.miles__name {
  font-size: max(12px, calc(var(--u) * 28));
  letter-spacing: -.02em;
}

.miles__text {
  font-size: max(12px, calc(var(--u) * 17));
  line-height: 1.5;
  color: var(--body);
}

.miles__ruler {
  height: calc(var(--u) * 12);
}

/* == 34. About — visit us ============================================== */
.visit__map {
  position: relative;
  height: calc(var(--u) * 320);
  border-radius: calc(var(--u) * 40);
  border: .5px solid var(--line2);
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--ab-map1) 0 calc(var(--u) * 14), var(--ab-map2) calc(var(--u) * 14) calc(var(--u) * 28));
}

.visit__art {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.vm__road { stroke: var(--ab-road); stroke-width: 14; opacity: .5; }
.vm__road--10 { stroke-width: 10; }
.vm__edge { stroke: var(--ink); stroke-width: .6; opacity: .25; }
.vm__st { stroke: var(--ink); stroke-width: .5; opacity: .18; }
.vm__st--14 { opacity: .14; }

.vm__ring {
  fill: none;
  stroke: var(--acc);
  stroke-width: .6;
}

.vm__ring--1 { opacity: .5; }
.vm__ring--2 { opacity: .38; stroke-dasharray: 3 6; }
.vm__ring--3 { opacity: .26; stroke-dasharray: 3 6; }

.vm__route {
  fill: none;
  stroke: var(--acc);
  stroke-width: 2.4;
  stroke-dasharray: 10 8;
}

.vm__halo { fill: var(--acc-a20); }
.vm__halo--2 { fill: var(--acc-a08); }
.vm__pin { fill: var(--acc); }

.vm__name {
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .28em;
  fill: var(--mute);
}

.vm__mk {
  fill: var(--ab-glass95);
  stroke: var(--ink);
  stroke-width: .6;
}

.vm__mt {
  font-family: Geist, sans-serif;
  font-size: 11px;
  font-weight: 400;
  fill: var(--ink);
}

.vm__mt--12 { font-size: 12px; }

.vm__comp {
  fill: var(--ab-glass95);
  stroke: var(--line2);
  stroke-width: .5;
}

.vm__n { fill: var(--acc); }

.vm__s {
  fill: none;
  stroke: var(--ink);
  stroke-width: .6;
}

.vm__nl {
  font-family: Geist, sans-serif;
  font-size: 10px;
  fill: var(--mute);
  font-weight: 400;
}

.visit__tag {
  position: absolute;
  left: calc(var(--u) * 1590);
  top: calc(var(--u) * 100);
  padding: calc(var(--u) * 10) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 16);
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.visit__tt {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  white-space: nowrap;
}

.visit__geo {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 10));
  opacity: .7;
  font-weight: 400;
}

.visit__route {
  position: absolute;
  left: calc(var(--u) * 1180);
  top: calc(var(--u) * 216);
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
}

.visit__scale {
  position: absolute;
  right: calc(var(--u) * 100);
  top: calc(var(--u) * 24);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 10));
  color: var(--mute);
  font-weight: 400;
}

.visit__bars {
  display: flex;
}

.visit__bars span {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 4);
  background: var(--ink);
}

.visit__bars span + span {
  background: transparent;
  border: .5px solid var(--ink);
}

.visit__note {
  position: absolute;
  left: calc(var(--u) * 24);
  top: calc(var(--u) * 24);
  padding: calc(var(--u) * 6) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 8);
  background: var(--ab-glass95);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 11));
  color: var(--mute);
  font-weight: 400;
}

.visit__card {
  position: absolute;
  left: calc(var(--u) * 24);
  bottom: calc(var(--u) * 24);
  padding: calc(var(--u) * 22) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 28);
  background: var(--ab-glass95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 36);
}

.visit__col {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.visit__lbl {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  white-space: nowrap;
  color: var(--mute);
}

.visit__lbl .acc {
  margin-right: calc(var(--u) * 8);
}

.visit__h2 {
  font-size: max(12px, calc(var(--u) * 42));
  letter-spacing: -.03em;
  white-space: nowrap;
}

.visit__addr {
  font-size: max(12px, calc(var(--u) * 22));
  font-style: normal;
  white-space: nowrap;
}

.visit__small {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  white-space: nowrap;
  color: var(--mute);
}

.visit__open {
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  white-space: nowrap;
  color: var(--ok);
}

.visit__vr {
  width: .5px;
  height: calc(var(--u) * 74);
  background: var(--line2);
}

.visit__acts {
  position: absolute;
  right: calc(var(--u) * 24);
  bottom: calc(var(--u) * 24);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.visit__chip {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 22);
  background: var(--ab-glass95);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
}

.visit__ic {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  border-radius: 50%;
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 12));
}

.visit__ic--sq {
  border-radius: calc(var(--u) * 8);
}

/* live map (Leaflet); the drawn map underneath stays until the tiles load */
.visit__live {
  position: absolute;
  inset: 0;
  background: transparent;
  font-family: Geist, sans-serif;
}

.visit__map .leaflet-container,
.cnv__map .leaflet-container {
  isolation: isolate;
  background: transparent;
}

.is-live .visit__art,
.is-live .visit__scale,
.is-live .visit__note {
  display: none;
}

.is-live .visit__live {
  background: var(--ab-map2);
}

.visit__live .leaflet-tile-pane,
.cnv__live .leaflet-tile-pane {
  filter: grayscale(1) contrast(.92) brightness(1.04);
  opacity: .85;
}

[data-theme="dark"] .visit__live .leaflet-tile-pane,
[data-theme="dark"] .cnv__live .leaflet-tile-pane {
  filter: grayscale(1) invert(1) contrast(.85) brightness(.8);
  opacity: .9;
}

.visit__live .leaflet-top .leaflet-control,
.cnv__live .leaflet-top .leaflet-control {
  margin-top: calc(var(--u) * 24);
}

.visit__live .leaflet-left .leaflet-control,
.cnv__live .leaflet-left .leaflet-control {
  margin-left: calc(var(--u) * 24);
}

.visit__live .leaflet-right .leaflet-control,
.cnv__live .leaflet-right .leaflet-control {
  margin-right: calc(var(--u) * 24);
}

.visit__live .leaflet-control-attribution,
.cnv__live .leaflet-control-attribution {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--ab-glass95);
  font-size: 12px;
  color: var(--mute);
}

.visit__live .leaflet-control-attribution a,
.cnv__live .leaflet-control-attribution a {
  color: var(--ink);
}

.visit__live .leaflet-bar,
.cnv__live .leaflet-bar {
  border: .5px solid var(--line2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
}

.visit__live .leaflet-bar a,
.cnv__live .leaflet-bar a {
  width: 34px;
  height: 34px;
  border-bottom-color: var(--line2);
  background: var(--ab-glass95);
  line-height: 34px;
  font-weight: 300;
  color: var(--ink);
}

.visit__live .leaflet-bar a:hover,
.cnv__live .leaflet-bar a:hover {
  color: var(--acc);
}

.visit__live .leaflet-control-scale-line,
.cnv__live .leaflet-control-scale-line {
  border-color: var(--ink);
  background: var(--ab-glass95);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--mute);
}

/* the showroom pin with its distance rings */
.vpin {
  position: relative;
}

.vpin__dot,
.vpin__r {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.vpin__dot {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  background: var(--acc);
  box-shadow: 0 0 0 calc(var(--u) * 12) var(--acc-a20), 0 0 0 calc(var(--u) * 28) var(--acc-a08);
}

.vpin__r {
  border: 1px solid var(--acc);
}

.vpin__r--1 { width: calc(var(--u) * 120); height: calc(var(--u) * 120); opacity: .5; }
.vpin__r--2 { width: calc(var(--u) * 240); height: calc(var(--u) * 240); opacity: .38; border-style: dashed; }
.vpin__r--3 { width: calc(var(--u) * 380); height: calc(var(--u) * 380); opacity: .26; border-style: dashed; }

/* == 35. About — tablet and phone ====================================== */
@media (max-width: 1199px) {
  /* story: panorama on top, the card and the second photo in the flow */
  .story {
    height: auto;
  }

  .story__pano {
    height: 440px;
    border-radius: 24px;
  }

  .story__tl {
    left: 24px;
    right: 24px;
    top: 24px;
  }

  .story__yr:nth-child(2) .story__yl,
  .story__yr:nth-child(3) .story__yl,
  .story__yr:nth-child(4) .story__yl,
  .story__yr:nth-child(6) .story__yl,
  .story__yr:nth-child(7) .story__yl {
    display: none;
  }

  .story__year {
    right: 24px;
    top: 150px;
    width: 56%;
    height: auto;
  }

  .story__chips {
    display: none;
  }

  .story__card {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    margin: -120px 24px 0;
    padding: 32px;
    border-radius: 24px;
    gap: 24px 32px;
  }

  .story__h2 {
    font-size: 48px;
  }

  .story__p {
    font-size: 16px;
  }

  .story__quote {
    font-size: 22px;
  }

  .story__foot {
    flex-wrap: wrap;
    gap: 20px;
  }

  .story__fig {
    position: static;
    width: auto;
    margin: 24px 24px 0;
  }

  .story__photo {
    height: 340px;
    border-radius: 20px;
    border: 0;
  }

  /* numbers: 2 × 2 */
  .nums__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nums__cell {
    padding: 24px;
  }

  /* promises: 2 × 2 */
  .prom__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prom__card {
    height: 400px;
  }

  .prom__big {
    font-size: 56px;
  }

  .prom__name {
    font-size: 32px;
  }

  .prom__text {
    font-size: 15px;
  }

  /* team: the founder across the top, four people 2 × 2 */
  .team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 560px;
    grid-auto-rows: 330px;
  }

  .team__card--lead {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .team__img {
    top: 0;
    height: 100%;
    object-position: 50% 22%;
  }

  .team__quote {
    font-size: 22px;
  }

  .team__lname {
    font-size: 28px;
  }

  .team__name {
    font-size: 20px;
  }

  .team__bottom {
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  /* milestones: the chips give way, rows 3 × 2 */
  .mchip {
    display: none;
  }

  .miles__col {
    padding: calc(var(--u) * 26) 14px 0;
  }

  .miles__rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .miles__row {
    padding: 20px;
  }

  .miles__name {
    font-size: 20px;
  }

  .miles__text {
    font-size: 14px;
  }

  /* visit: the map on top, the card and the actions under it */
  .visit__map {
    height: auto;
    padding: 256px 16px 16px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .visit__art {
    left: calc(50% - 1170px);
    width: 1830px;
    height: 240px;
  }

  .visit__live {
    inset: 0 0 auto;
    height: 240px;
  }

  .vpin__dot {
    width: 16px;
    height: 16px;
    box-shadow: 0 0 0 8px var(--acc-a20), 0 0 0 18px var(--acc-a08);
  }

  .visit__tag {
    left: calc(50% + 22px);
    top: 75px;
  }

  .visit__route,
  .visit__scale,
  .visit__note {
    display: none;
  }

  .visit__card,
  .visit__acts {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
  }

  .visit__card {
    flex-wrap: wrap;
    gap: 20px 28px;
    padding: 20px 24px;
  }

  .visit__h2 {
    font-size: 32px;
  }

  .visit__addr {
    font-size: 17px;
  }

  .visit__acts {
    flex-wrap: wrap;
  }

  .visit__chip,
  .btn-acc {
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  .story__pano {
    height: 360px;
  }

  .story__yr:nth-child(5) .story__yl {
    display: none;
  }

  .story__year {
    top: 130px;
    width: 70%;
  }

  .story__card {
    margin: -80px 12px 0;
    padding: 24px 20px;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .story__top {
    flex-wrap: wrap;
    gap: 8px;
  }

  .story__h2 {
    font-size: 36px;
  }

  .story__quote {
    padding-left: 56px;
    font-size: 19px;
  }

  .story__qm {
    font-size: 72px;
  }

  .story__facts li {
    padding: 0 16px;
  }

  .story__facts li:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .story__fn {
    font-size: 32px;
  }

  .story__fig {
    margin: 20px 0 0;
  }

  .story__photo {
    height: 220px;
  }

  .story__cap2 {
    flex-direction: column;
    gap: 6px;
  }

  .nums__top {
    flex-wrap: wrap;
    gap: 10px;
  }

  .nums__grid,
  .prom__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nums__cell {
    padding: 22px 18px;
  }

  .nums__head {
    gap: 10px;
  }

  .prom__card {
    height: 360px;
    padding: 24px;
  }

  .team__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 520px;
    grid-auto-rows: 300px;
  }

  .team__panel--lead {
    padding: 22px 20px;
    gap: 16px;
  }

  .team__quote {
    padding-left: 48px;
    font-size: 18px;
  }

  .team__qm {
    font-size: 64px;
  }

  .team__stack {
    gap: 16px;
  }

  .miles__col {
    padding: calc(var(--u) * 26) 6px 0;
  }

  .miles__head {
    justify-content: center;
  }

  .miles__lbl .acc {
    display: none;
  }

  .miles__lbl {
    letter-spacing: .08em;
  }

  .miles__fill {
    width: 70%;
  }

  .miles__val {
    font-size: 12px;
  }

  .miles__rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .miles__row {
    padding: 16px 14px 20px;
  }

  .miles__row .fig {
    width: 110px;
    height: 46px;
  }

  .miles__name {
    font-size: 17px;
  }

  .visit__card {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 16px;
  }

  .visit__vr {
    display: none;
  }

  .visit__h2 {
    font-size: 28px;
  }

  .visit__addr,
  .visit__small {
    white-space: normal;
  }

  .visit__tag {
    left: 50%;
    top: 156px;
    transform: translateX(-50%);
  }
}

/* == 36. Service — shared ============================================== */
:root {
  --sv-ghost: rgba(17, 20, 24, .07);
  --sv-num: rgba(17, 20, 24, .12);
  --sv-surf2: #fbfbfc;
  --sv-soft: rgba(128, 132, 140, .35);
  --sv-dim: rgba(128, 132, 140, .3);
}

[data-theme="dark"] {
  --sv-ghost: rgba(242, 243, 245, .07);
  --sv-num: rgba(242, 243, 245, .14);
  --sv-surf2: #181a1f;
}

/* car thumbnail: follows the theme and the inherited accent; the whole car fits
   (the photos have plain white / black edges, so the box colour matches them) */
.thumb {
  display: block;
  flex-shrink: 0;
  border: .5px solid var(--line2);
  background: #fefefe url("../img/finance-light.webp") center / contain no-repeat;
}

[data-theme="dark"] .thumb {
  background-color: #000;
  background-image: url("../img/finance-dark.webp");
}

[data-skin="green"] .thumb { background-image: url("../img/merc-profile-light.webp"); }
[data-skin="green"][data-theme="dark"] .thumb { background-image: url("../img/merc-profile-dark.webp"); }

.circ--acc {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.circ--acc:hover {
  background: var(--acc-d);
  color: #fff;
}

.i24 { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }

/* == 37. Service — 01 services ========================================= */
.svc {
  gap: calc(var(--u) * 40);
}

.svc__slot {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  white-space: nowrap;
}

.svc__note {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  white-space: nowrap;
  color: var(--mute);
}

.svc .shead__r {
  gap: calc(var(--u) * 24);
}

.sgrid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: calc(var(--u) * 420) calc(var(--u) * 420);
  gap: calc(var(--u) * 18);
}

/* featured: the 150-point inspection, dark in both themes */
.svx {
  grid-row: span 2;
}

.svx__link {
  position: relative;
  height: 100%;
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--acc);
  overflow: hidden;
  background: #111418;
  color: #f2f3f5;
  display: flex;
  flex-direction: column;
}

.svx__link:hover {
  color: #f2f3f5;
}

.svx__media {
  position: relative;
  height: calc(var(--u) * 430);
  flex-shrink: 0;
  overflow: hidden;
}

.svx__photo {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, #1a1d22 0 calc(var(--u) * 14), #15171b calc(var(--u) * 14) calc(var(--u) * 28));
}

.svx__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 45%;
}

.svx__photo .slot__mk--tl { left: calc(var(--u) * 14); top: calc(var(--u) * 14); }
.svx__photo .slot__mk--tr { right: calc(var(--u) * 14); top: calc(var(--u) * 14); }

.svx__photo .slot__mk--bl,
.svx__photo .slot__mk--br {
  display: none;
}

.svx__photo .slot__tag {
  top: 55%;
  padding: calc(var(--u) * 8) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 10);
  border-color: transparent;
  background: rgba(17, 19, 23, .85);
  font-size: max(12px, calc(var(--u) * 12));
  color: #7d838d;
}

.svx__photo .slot__size {
  color: #f2f3f5;
}

.svx__ghost {
  position: absolute;
  right: calc(var(--u) * 30);
  bottom: calc(var(--u) * -30);
  width: calc(var(--u) * 520);
  height: calc(var(--u) * 220);
  pointer-events: none;
}

.svx__ghost text {
  fill: var(--acc-a12);
  stroke: var(--acc);
}

.svx__chips {
  position: absolute;
  left: calc(var(--u) * 28);
  top: calc(var(--u) * 28);
  display: flex;
  gap: calc(var(--u) * 8);
}

.svx__chip {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  border: .5px solid rgba(242, 243, 245, .2);
  background: rgba(17, 19, 23, .85);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
}

.svx__chip--acc {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
  letter-spacing: .16em;
}

.svx__of {
  position: absolute;
  right: calc(var(--u) * 28);
  top: calc(var(--u) * 28);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  color: #7d838d;
}

.svx__body {
  flex: 1;
  padding: calc(var(--u) * 36) calc(var(--u) * 40);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.svx__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.svx__ico {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  flex-shrink: 0;
  border-radius: 50%;
  border: .5px solid var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acc);
}

.svx__name {
  font-size: max(12px, calc(var(--u) * 56));
  letter-spacing: -.04em;
  line-height: 1;
}

.svx__text {
  font-size: max(12px, calc(var(--u) * 21));
  line-height: 1.5;
  color: #a3a9b3;
}

.svx__sys {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.svx__tag {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  border: .5px solid rgba(242, 243, 245, .22);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
}

.svx__tag .ico {
  color: var(--acc);
}

.svx__foot {
  margin-top: auto;
  padding-top: calc(var(--u) * 22);
  border-top: .5px solid rgba(242, 243, 245, .16);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.svx__from,
.scell__from,
.store__from {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
}

.svx__fl,
.scell__fl {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.svx__fl {
  color: #7d838d;
}

.svx__price {
  font-size: max(12px, calc(var(--u) * 64));
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--acc);
}

.svx__cta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
}

.svx__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: #7d838d;
}

.svx__ok {
  color: var(--ok);
}

.svx__book {
  gap: calc(var(--u) * 18);
}

.svx__link:hover .svx__book {
  background: var(--acc-d);
}

/* five service cells */
.scell__link {
  position: relative;
  height: 100%;
  padding: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--line2);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ink);
  transition: border-color .2s;
}

.scell__link:hover,
.store:hover {
  border-color: var(--acc);
  color: var(--ink);
}

.scell__ghost {
  position: absolute;
  right: calc(var(--u) * -60);
  top: calc(var(--u) * -50);
  width: calc(var(--u) * 300);
  height: calc(var(--u) * 300);
  color: var(--sv-ghost);
  stroke-width: .5;
  pointer-events: none;
}

.scell__n {
  position: absolute;
  right: calc(var(--u) * 28);
  bottom: calc(var(--u) * 120);
  width: calc(var(--u) * 150);
  height: calc(var(--u) * 80);
  pointer-events: none;
}

.scell__n text {
  stroke: var(--sv-num);
}

.scell__x {
  left: calc(var(--u) * 12);
  top: calc(var(--u) * 12);
}

.scell__top,
.scell__body {
  position: relative;
}

.scell__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scell__ico,
.store__ico {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  flex-shrink: 0;
  border-radius: 50%;
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scell__dur {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
  color: var(--mute);
}

.scell__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.scell__name {
  font-size: max(12px, calc(var(--u) * 36));
  letter-spacing: -.025em;
}

.scell__text {
  font-size: max(12px, calc(var(--u) * 17));
  line-height: 1.5;
  color: var(--body);
}

.scell__proof {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  color: var(--ok);
}

.scell__foot {
  margin-top: calc(var(--u) * 6);
  padding-top: calc(var(--u) * 16);
  border-top: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scell__price {
  font-size: max(12px, calc(var(--u) * 34));
  letter-spacing: -.035em;
  line-height: 1;
}

.scell__go {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  flex-shrink: 0;
  border-radius: 50%;
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
}

.scell__link:hover .scell__go,
.store:hover .scell__go {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

/* car storage strip */
.store {
  padding: calc(var(--u) * 24) calc(var(--u) * 34);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--line2);
  background: var(--surf);
  display: grid;
  grid-template-columns: auto 1fr calc(var(--u) * 420) auto auto;
  align-items: center;
  gap: calc(var(--u) * 40);
  color: var(--ink);
  transition: border-color .2s;
}

.store__name {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.store__n {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  color: var(--acc);
}

.store__t {
  font-size: max(12px, calc(var(--u) * 34));
  letter-spacing: -.025em;
  white-space: nowrap;
}

.store__text {
  font-size: max(12px, calc(var(--u) * 18));
  color: var(--body);
}

.store__bays {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.store__bl {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--mute);
}

.store__cnt {
  color: var(--ink);
}

.store__row {
  display: flex;
  gap: calc(var(--u) * 3);
}

.store__bay {
  flex: 1;
  height: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 2);
  border: .5px solid var(--line2);
}

.store__bay.is-taken {
  border-color: var(--ink);
  background: var(--ink);
  opacity: .75;
}

.store__go {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.store__per {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
}

/* == 38. Service — 02 order tracker ==================================== */
.how2 {
  gap: calc(var(--u) * 24);
}

.how2__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.how2__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.how2__h2 {
  font-size: max(12px, calc(var(--u) * 64));
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}

.how2__note {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  color: var(--mute);
}

.trk {
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: var(--surf);
  overflow: hidden;
}

.trk__bar {
  padding: calc(var(--u) * 22) calc(var(--u) * 34);
  border-bottom: .5px solid var(--line2);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: calc(var(--u) * 40);
}

.trk__car {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.trk__thumb {
  width: calc(var(--u) * 176);
  height: calc(var(--u) * 64);
  border-radius: calc(var(--u) * 14);
}

.trk__cn,
.tkt__cn {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.trk__cname {
  font-size: max(12px, calc(var(--u) * 24));
  white-space: nowrap;
}

.trk__code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  font-weight: 400;
  color: var(--mute);
}

.trk__all {
  max-width: calc(var(--u) * 640);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.trk__al {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--mute);
}

.trk__meter {
  display: block;
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
  background: var(--line2);
  overflow: hidden;
}

.trk__fill {
  display: block;
  width: 72%;
  height: 100%;
  background: var(--acc);
}

.trk__back {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.trk__bl {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  color: var(--mute);
}

.trk__d {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 4);
}

.trk__dv {
  width: calc(var(--u) * 62);
  height: calc(var(--u) * 62);
  border-radius: calc(var(--u) * 12);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 30));
}

.trk__du {
  font-size: max(12px, calc(var(--u) * 9));
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  color: var(--mute);
}

.trk__tech {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.trk__av {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  flex-shrink: 0;
  border-radius: 50%;
  border: .5px solid var(--line2);
  object-fit: cover;
  object-position: 50% 35%;
}

.trk__tn {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.trk__tname {
  font-size: max(12px, calc(var(--u) * 17));
}

.trk__trole {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  color: var(--mute);
}

.trk__steps {
  padding: calc(var(--u) * 28) calc(var(--u) * 34) calc(var(--u) * 32);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trk__step {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.trk__top {
  padding-right: calc(var(--u) * 36);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.trk__n {
  width: calc(var(--u) * 130);
  height: calc(var(--u) * 78);
}

.trk__when {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 6);
}

.trk__time {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  font-weight: 400;
  color: var(--mute);
}

.tchip2 {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  white-space: nowrap;
  color: var(--mute);
}

.tchip2--done {
  border-color: rgba(47, 163, 107, .5);
  color: var(--ok);
}

.tchip2--live,
.tchip2--acc {
  border-color: var(--acc);
  color: var(--acc);
}

.tchip2--ink {
  color: var(--ink);
}

.tchip2--ink .ico {
  color: var(--acc);
}

.tchip2__dot {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 calc(var(--u) * 4) var(--acc-a20);
}

/* the timeline runs across the four columns */
.trk__rail {
  position: relative;
  height: calc(var(--u) * 40);
  display: flex;
  align-items: center;
}

.trk__rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 19.5);
  height: .5px;
  background: var(--ink);
  opacity: .5;
}

.trk__rail--done::before {
  top: calc(var(--u) * 19);
  height: 2px;
  background: var(--acc);
  opacity: 1;
}

.trk__rail--live::before {
  display: none;
}

.trk__node {
  position: relative;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  border: .5px solid var(--ink);
  background: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.trk__node--done {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.trk__node--live {
  border: 1px solid var(--acc);
  color: var(--acc);
  box-shadow: 0 0 0 calc(var(--u) * 8) var(--acc-a14);
}

.trk__done,
.trk__todo,
.trk__cam,
.trk__pct {
  position: absolute;
}

.trk__done {
  left: 0;
  width: 64%;
  top: calc(var(--u) * 19);
  height: 2px;
  background: var(--acc);
}

.trk__todo {
  left: 64%;
  right: 0;
  top: calc(var(--u) * 19.5);
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--acc) 0 calc(var(--u) * 8), transparent calc(var(--u) * 8) calc(var(--u) * 14));
}

.trk__cam {
  left: 64%;
  top: calc(var(--u) * 4);
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
  margin-left: calc(var(--u) * -16);
  border-radius: 50%;
  background: #111418;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0, 0, 0, .18);
}

.trk__pct {
  left: 64%;
  top: calc(var(--u) * -22);
  transform: translateX(-50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 11));
  font-weight: 400;
  white-space: nowrap;
  color: var(--acc);
}

.trk__txt {
  padding-right: calc(var(--u) * 36);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.trk__name {
  font-size: max(12px, calc(var(--u) * 32));
  letter-spacing: -.025em;
}

.trk__text {
  font-size: max(12px, calc(var(--u) * 17));
  line-height: 1.5;
  color: var(--body);
}

.trk__facts {
  margin-top: calc(var(--u) * 4);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.trk__media {
  margin-top: calc(var(--u) * 4);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.trk__shots {
  display: flex;
  gap: calc(var(--u) * 5);
}

.trk__shot {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 46);
  border-radius: calc(var(--u) * 8);
  border: .5px solid var(--line2);
  background: repeating-linear-gradient(135deg, var(--s1) 0 calc(var(--u) * 5), var(--s2) calc(var(--u) * 5) calc(var(--u) * 10));
}

.trk__shot--more {
  border-color: var(--acc);
  background: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 11));
  color: var(--acc);
}

.trk__quote {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

/* == 39. Service — 03 membership cards ================================= */
.pkg__hint {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.86);
  color: var(--mute);
}

.pkg__cards {
  margin-top: calc(var(--u) * 70);
  padding: 0 calc(var(--u) * 60);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: calc(var(--u) * 70);
}

.pcard {
  --sub: var(--mute);
  --ghost-c: rgba(17, 20, 24, .08);
  --emb: rgba(255, 255, 255, .8);
  position: relative;
  width: 100%;
  height: calc(var(--u) * 500);
  padding: calc(var(--u) * 34) calc(var(--u) * 36);
  border: 0;
  border-radius: calc(var(--u) * 30);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  font: inherit;
  cursor: pointer;
  opacity: .82;
  box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 40) rgba(17, 20, 24, .12);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, opacity .45s;
}

.pcard--0 {
  background: linear-gradient(135deg, #f1f2f4 0%, #d6dae0 45%, #f5f6f8 100%);
  color: #111418;
  --sub: #8a9099;
  transform: rotate(-4deg) scale(.96);
}

.pcard--1 {
  background: linear-gradient(135deg, var(--acc) 0%, var(--acc) 45%, var(--acc-d) 100%);
  color: #fff;
  --sub: rgba(255, 255, 255, .72);
  --ghost-c: rgba(255, 255, 255, .3);
  --emb: rgba(0, 0, 0, .25);
  transform: rotate(4deg) scale(.96);
}

.pcard--2 {
  background: linear-gradient(135deg, #262a31 0%, #111418 55%, #2c3038 100%);
  color: #fff;
  --sub: rgba(255, 255, 255, .6);
  --ghost-c: rgba(255, 255, 255, .22);
  --emb: rgba(0, 0, 0, .5);
  transform: rotate(4deg) scale(.96);
}

/* the middle card leans away from the selected one */
.pkg__cards[data-pk="2"] .pcard--1 {
  transform: rotate(-4deg) scale(.96);
}

.pcard.is-on {
  opacity: 1;
  transform: translateY(calc(var(--u) * -40)) rotate(0deg) scale(1.04);
  box-shadow: 0 calc(var(--u) * 50) calc(var(--u) * 90) rgba(17, 20, 24, .32);
}

.pcard:hover {
  opacity: 1;
}

.pcard:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 6px;
}

.pcard__ghost {
  position: absolute;
  right: calc(var(--u) * -60);
  bottom: calc(var(--u) * -150);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 560));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ghost-c);
  pointer-events: none;
}

.pcard__holo {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 170);
  height: calc(var(--u) * 36);
  opacity: .55;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), rgba(200, 210, 230, .7), transparent);
}

.pcard--1 .pcard__holo {
  background: linear-gradient(90deg, transparent, rgba(255, 220, 190, .6), rgba(255, 255, 255, .5), transparent);
}

.pcard--2 .pcard__holo {
  background: linear-gradient(90deg, transparent, var(--acc-a40), rgba(255, 255, 255, .35), transparent);
}

.pcard__pop {
  position: absolute;
  left: calc(var(--u) * 36);
  top: -1px;
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 14);
  border-radius: 0 0 calc(var(--u) * 12) calc(var(--u) * 12);
  background: #111418;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
}

.pcard__top,
.pcard__chipline,
.pcard__num,
.pcard__foot {
  position: relative;
}

.pcard__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pcard__mark {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 26));
  letter-spacing: .04em;
}

.pcard__tier {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.86);
  color: var(--sub);
}

.pcard__chipline {
  margin-top: calc(var(--u) * 40);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.pcard__chip {
  width: calc(var(--u) * 78);
  height: calc(var(--u) * 58);
  padding: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 12);
  background: linear-gradient(135deg, #ecdcab, #c7a655);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}

.pcard__chip span {
  border: .5px solid rgba(90, 70, 20, .45);
  border-radius: 3px;
}

.pcard__nfc {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  opacity: .7;
}

.pcard__num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 400;
  letter-spacing: .22em;
  text-shadow: 0 1px 0 var(--emb);
}

.pcard__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.pcard__who {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.pcard__name {
  font-size: max(12px, calc(var(--u) * 46));
  letter-spacing: -.035em;
  line-height: 1;
}

.pcard__valid {
  display: flex;
  gap: calc(var(--u) * 24);
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2);
  color: var(--sub);
}

.pcard__price {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 6);
}

.pcard__pv {
  font-size: max(12px, calc(var(--u) * 52));
  letter-spacing: -.04em;
  line-height: 1;
}

.pcard__per {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  color: var(--sub);
}

/* comparison under the cards */
.pkg__cmp {
  margin-top: calc(var(--u) * 70);
  padding-top: calc(var(--u) * 40);
  border-top: .5px solid var(--line2);
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  align-items: center;
  gap: calc(var(--u) * 60);
}

.pkg__sel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.pkg__sl {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  color: var(--mute);
}

.pkg__sl .acc {
  margin-right: calc(var(--u) * 10);
}

.pkg__sn {
  font-size: max(12px, calc(var(--u) * 56));
  letter-spacing: -.04em;
  line-height: 1;
}

.pkg__sd {
  font-size: max(12px, calc(var(--u) * 20));
  line-height: 1.5;
  color: var(--body);
}

.pkg__feats {
  border-top: .5px solid var(--line2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--u) * 30);
}

.pkf {
  padding: calc(var(--u) * 14) 0;
  border-bottom: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 17));
  color: var(--mute);
  text-decoration: line-through;
}

.pkf.is-on {
  color: var(--ink);
  text-decoration: none;
}

.pkf__dot {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}

.pkf.is-on .pkf__dot {
  background: var(--acc);
  color: #fff;
}

.pkg__cta {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  gap: calc(var(--u) * 22);
}

.pkg__cta .btn-acc__dot {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
}

/* == 40. Service — 04 booking form and ticket ========================== */
.bk__card {
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: var(--surf);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
}

.bkf {
  padding: calc(var(--u) * 44);
  border-right: .5px dashed var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.bkf__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.bkf__hl {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.bkf__h2 {
  font-size: max(12px, calc(var(--u) * 64));
  letter-spacing: -.04em;
  line-height: 1;
}

.bkf__steps {
  display: flex;
  gap: calc(var(--u) * 6);
}

.bkf__step {
  width: calc(var(--u) * 110);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  color: var(--mute);
}

.bkf__step::before {
  content: "";
  height: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 2);
  background: var(--sv-dim);
}

.bkf__step.is-on {
  color: var(--acc);
}

.bkf__step.is-on::before {
  background: var(--acc);
}

.bkf__grp {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.bkf__lbl {
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  color: var(--mute);
}

legend.bkf__lbl {
  margin-bottom: calc(var(--u) * 12);
}

.bkf__lbl .acc {
  margin-right: calc(var(--u) * 8);
}

.bkf__vin {
  color: var(--mute);
}

.bkf__vin.is-ok {
  color: var(--ok);
}

.bkf__car {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
  border-bottom: .5px solid var(--ink);
  transition: border-color .2s;
}

.bkf__car:focus-within {
  border-bottom-color: var(--acc);
}

.bkf__carin {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 66);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  color: var(--ink);
}

.bkf__count {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  font-weight: 400;
  white-space: nowrap;
  color: var(--mute);
}

.bkf__tries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.bkf__tl {
  margin-right: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--mute);
}

.bkf__try {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  border: .5px solid var(--line2);
  font-size: max(12px, calc(var(--u) * 13));
  white-space: nowrap;
  color: var(--ink);
}

.bkf__try:hover {
  border-color: var(--acc);
  color: var(--acc);
}

/* radio chips: the native input stays for keyboards and screen readers */
.bkf__svc,
.bkf__day,
.bkf__time,
.bkf__mode {
  position: relative;
  display: block;
}

.bkf__in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.bkf__svcbox,
.bkf__daybox,
.bkf__timebox {
  border: .5px solid var(--sv-soft);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.bkf__in:focus-visible + span {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.bkf__svcs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.bkf__svcbox {
  padding: calc(var(--u) * 14) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 20);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.bkf__svci {
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  flex-shrink: 0;
  border-radius: 50%;
  border: .5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bkf__svct {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.bkf__svcn {
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 17));
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bkf__svcm {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  opacity: .7;
}

.bkf__svcbox:hover,
.bkf__daybox:hover,
.bkf__timebox:hover {
  border-color: var(--acc);
}

.bkf__in:checked + .bkf__svcbox,
.bkf__in:checked + .bkf__daybox {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.bkf__when {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: calc(var(--u) * 40);
}

.bkf__days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 6);
}

.bkf__daybox {
  padding: calc(var(--u) * 12) 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 4);
}

.bkf__dow {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
}

.bkf__num {
  font-size: max(12px, calc(var(--u) * 26));
}

.bkf__dots {
  display: flex;
  gap: calc(var(--u) * 3);
}

.bkf__dot {
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  border-radius: 50%;
  background: var(--sv-dim);
}

.bkf__dot.is-free {
  background: var(--ok);
}

.bkf__in:checked + .bkf__daybox .bkf__dot.is-free {
  background: #fff;
}

.bkf__times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 6);
}

.bkf__timebox {
  position: relative;
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 26);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 17));
}

.bkf__in:checked + .bkf__timebox {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.bkf__in:disabled + .bkf__timebox {
  border-color: rgba(128, 132, 140, .18);
  color: rgba(128, 132, 140, .6);
  text-decoration: line-through;
  cursor: not-allowed;
}

.bkf__pop {
  position: absolute;
  right: calc(var(--u) * 10);
  top: calc(var(--u) * -8);
  height: calc(var(--u) * 18);
  padding: 0 calc(var(--u) * 7);
  border-radius: calc(var(--u) * 9);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 9));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 0.9);
  text-decoration: none;
}

.bkf__in:disabled + .bkf__timebox .bkf__pop {
  display: none;
}

.bkf__hand {
  position: relative;
  margin: 0;
  padding: calc(var(--u) * 24) 0 0;
  border: 0;
  border-top: .5px solid var(--line2);
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.bkf__hand legend {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 50);
  width: auto;
  transform: translateY(-50%);
}

.bkf__modes {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 26);
  border: .5px solid var(--ink);
  display: flex;
}

.bkf__modebox {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
  cursor: pointer;
}

.bkf__in:checked + .bkf__modebox {
  background: var(--ink);
  color: var(--on-ink);
}

/* the ticket */
.tkt {
  position: relative;
  padding: calc(var(--u) * 44);
  background: var(--sv-surf2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.tkt__notch {
  position: absolute;
  left: calc(var(--u) * -15);
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: 50%;
  border: .5px solid var(--line2);
  background: var(--bg);
}

.tkt__notch--t { top: calc(var(--u) * -15); }
.tkt__notch--b { bottom: calc(var(--u) * -15); }

.tkt__top {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.88);
  color: var(--mute);
}

.tkt__code {
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 400;
  letter-spacing: .06em;
}

.tkt__car {
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.tkt__thumb {
  width: calc(var(--u) * 170);
  height: calc(var(--u) * 62);
  border-radius: calc(var(--u) * 12);
}

.tkt__cname {
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 22));
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tkt__csub {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  color: var(--mute);
}

.tkt__rows,
.tkt__lines {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.tkt__rows > div {
  padding: calc(var(--u) * 11) 0;
  border-bottom: .5px dashed var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 20);
}

.tkt__rows dt {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  color: var(--mute);
}

.tkt__rows dd,
.tkt__lines dd {
  margin: 0;
}

.tkt__rows dd {
  font-size: max(12px, calc(var(--u) * 19));
  white-space: nowrap;
}

.tkt__lines > div {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  font-weight: 400;
  color: var(--mute);
}

.tkt__lines .tkt__free {
  color: var(--ok);
}

.tkt__sum {
  margin-top: calc(var(--u) * 6);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.tkt__tot {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.tkt__tl {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  color: var(--mute);
}

.tkt__tv {
  font-size: max(12px, calc(var(--u) * 84));
  letter-spacing: -.05em;
  line-height: 1;
}

.tkt__stamp {
  width: max(calc(var(--u) * 130), 108px);
  height: max(calc(var(--u) * 130), 108px);
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.2px solid var(--ok);
  color: var(--ok);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: .1;
  transform: rotate(-12deg);
  transition: opacity .3s;
}

.tkt__stamp.is-on {
  opacity: 1;
}

.tkt__s1 {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2);
}

.tkt__s2 {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 24));
  line-height: 1.2;
}

.tkt__s3 {
  font-size: max(12px, calc(var(--u) * 9));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
}

.tkt__go {
  margin-top: auto;
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
  transition: background .2s, opacity .2s;
}

.tkt__go:hover {
  background: var(--acc-d);
}

.tkt__go:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.tkt__go:disabled:hover {
  background: var(--acc);
}

.tkt__dot {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tkt__tick {
  display: none;
}

.tkt__go.is-done,
.tkt__go.is-done:hover {
  background: var(--ok);
}

.tkt__go.is-done .tkt__dot {
  color: var(--ok);
}

.tkt__go.is-done .tkt__arrow {
  display: none;
}

.tkt__go.is-done .tkt__tick {
  display: block;
}

.tkt__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tkt__status {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--mute);
}

.tkt__status.is-held { color: var(--acc); }
.tkt__status.is-done { color: var(--ok); }

.tkt__bars {
  height: calc(var(--u) * 26);
  display: flex;
  align-items: stretch;
  gap: 2px;
  opacity: .7;
}

.tkt__bar {
  background: var(--mute);
}

.tkt__bar--gap { background: transparent; }
.tkt__bar--w1 { width: 1px; }
.tkt__bar--w2 { width: 2px; }
.tkt__bar--w3 { width: 3px; }

/* == 41. Service — 05 FAQ ============================================== */
.fqa {
  gap: calc(var(--u) * 40);
}

.fqa .shead__r {
  gap: calc(var(--u) * 14);
}

.fqa__search {
  width: calc(var(--u) * 560);
  height: calc(var(--u) * 55);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  transition: border-color .2s;
}

.fqa__search:focus-within {
  border-color: var(--acc);
}

.fqa__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  color: var(--ink);
}

.fqa__hits {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  font-weight: 400;
  white-space: nowrap;
  color: var(--mute);
}

.fqa__all {
  height: calc(var(--u) * 55);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 28);
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
}

.fqa__all:hover {
  background: var(--acc);
  color: #fff;
}

.fqa__alld {
  width: calc(var(--u) * 37);
  height: calc(var(--u) * 37);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fqa__topics {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.fqa__topic {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--sv-soft);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
  color: var(--ink);
}

.fqa__topic:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.fqa__topic.is-on {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.fqa__box {
  min-height: calc(var(--u) * 640);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: var(--surf);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
}

.fqa__list {
  border-right: .5px solid var(--line2);
}

.fqa__row {
  position: relative;
  width: 100%;
  padding: calc(var(--u) * 26) calc(var(--u) * 34);
  border-bottom: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
  text-align: left;
  color: var(--ink);
  transition: background .15s;
}

.fqa__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--acc);
  opacity: 0;
}

.fqa__row:hover {
  color: var(--acc);
}

.fqa__row.is-on {
  background: var(--acc-a04);
  color: var(--acc);
}

.fqa__row.is-on::before {
  opacity: 1;
}

.fqa__n {
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--acc);
}

.fqa__rq {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.fqa__rt {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2);
  color: var(--mute);
}

.fqa__qt {
  font-size: max(12px, calc(var(--u) * 23));
}

.fqa__ar {
  font-size: max(12px, calc(var(--u) * 18));
  opacity: .25;
}

.fqa__row.is-on .fqa__ar {
  opacity: 1;
}

.fqa__empty {
  padding: calc(var(--u) * 40) calc(var(--u) * 34);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.fqa__empty[hidden] {
  display: none;
}

.fqa__et {
  font-size: max(12px, calc(var(--u) * 24));
}

.fqa__es {
  font-size: max(12px, calc(var(--u) * 17));
  color: var(--body);
}

.fqa__panel {
  position: relative;
  padding: calc(var(--u) * 48) calc(var(--u) * 56);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.fqa__ghost {
  position: absolute;
  right: calc(var(--u) * 30);
  top: calc(var(--u) * -50);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 380));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc-a40);
  pointer-events: none;
}

.fqa__ptop {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fqa__pc {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  color: var(--mute);
}

.fqa__pc .acc {
  margin-right: calc(var(--u) * 10);
}

.fqa__nav {
  display: flex;
  gap: calc(var(--u) * 8);
}

.fqa__nav .circ {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
}

.fqp {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.fqp__q {
  max-width: calc(var(--u) * 920);
  font-size: max(12px, calc(var(--u) * 54));
  letter-spacing: -.035em;
  line-height: 1.1;
}

.fqp__a {
  max-width: calc(var(--u) * 1000);
  font-size: max(12px, calc(var(--u) * 24));
  line-height: 1.55;
  color: var(--body);
}

.fqp__facts {
  display: flex;
  gap: calc(var(--u) * 12);
}

.fqp__fact {
  padding: calc(var(--u) * 16) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 18);
  border: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.fqp__fv {
  font-size: max(12px, calc(var(--u) * 30));
  letter-spacing: -.02em;
  color: var(--acc);
}

.fqp__fk {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
  color: var(--mute);
}

.fqp__related {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.fqp__rl {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.42);
  color: var(--mute);
}

.fqp__rels {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.fqp__rel {
  max-width: calc(var(--u) * 520);
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  border: .5px solid var(--line2);
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
}

.fqp__rel:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.fqp__foot {
  margin-top: auto;
  padding-top: calc(var(--u) * 22);
  border-top: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fqp__vote {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.fqp__vl {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.fqp__v {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 21);
  border: .5px solid var(--sv-soft);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  color: var(--ink);
}

.fqp__v:hover {
  border-color: var(--acc);
}

.fqp__v[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.fqp__cnt {
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.fqp__chat {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  color: var(--ink);
}

.fqp__chat:hover {
  color: var(--acc);
}

/* == 42. Service — tablet and phone ==================================== */
@media (max-width: 1199px) {
  .sgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .svx {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .svx__media {
    height: 320px;
  }

  .svx__name {
    font-size: 36px;
  }

  .svx__foot {
    flex-wrap: wrap;
    gap: 16px;
  }

  .scell__link {
    min-height: 300px;
    gap: 24px;
  }

  .store {
    grid-template-columns: 1fr auto;
    gap: 16px 24px;
  }

  .store__text,
  .store__bays {
    grid-column: 1 / -1;
  }

  .store__text {
    grid-row: 2;
  }

  .how2__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .how2__h2 {
    white-space: normal;
  }

  .trk__bar {
    grid-template-columns: 1fr auto;
    gap: 20px 24px;
  }

  .trk__all {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
  }

  .trk__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }

  .pkg__cards {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .pcard {
    height: 340px;
  }

  .pkg__cmp {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .pkg__cta {
    justify-self: start;
  }

  .bk__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .bkf {
    padding: 28px 24px;
    border-right: 0;
    border-bottom: .5px dashed var(--line2);
  }

  .bkf__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .bkf__steps {
    width: 100%;
  }

  .bkf__step {
    flex: 1;
    width: auto;
  }

  .bkf__when {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .bkf__timebox,
  .bkf__modebox,
  .bkf__try {
    min-height: 44px;
  }

  .tkt {
    padding: 28px 24px;
  }

  .fqa .shead__r {
    width: 100%;
  }

  .fqa__search {
    flex: 1;
    width: auto;
    max-width: 560px;
    min-height: 48px;
  }

  .fqa__all {
    min-height: 48px;
  }

  .fqa__box {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .fqa__list {
    border-right: 0;
    border-bottom: .5px solid var(--line2);
  }

  .fqa__panel {
    padding: 28px 24px;
  }

  .fqa__ghost {
    font-size: 200px;
    top: -20px;
  }

  .fqp__q {
    font-size: 30px;
  }

  .fqp__a {
    font-size: 16px;
  }

  .fqp__foot {
    flex-wrap: wrap;
    gap: 16px;
  }

  .fqa__nav .circ {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 767px) {
  .sgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .svx__media {
    height: 220px;
  }

  .svx__body {
    padding: 22px 20px;
  }

  .svx__name {
    font-size: 28px;
  }

  .svx__cta {
    width: 100%;
    justify-content: space-between;
  }

  .scell__link {
    min-height: 0;
    padding: 22px 20px;
  }

  .store {
    padding: 20px;
  }

  .trk__bar {
    padding: 20px;
    grid-template-columns: minmax(0, 1fr);
  }

  .trk__all {
    grid-row: auto;
  }

  .trk__cname {
    white-space: normal;
  }

  .trk__steps {
    padding: 24px 20px;
    grid-template-columns: minmax(0, 1fr);
  }

  .trk__top,
  .trk__txt {
    padding-right: 0;
  }

  .trk__media {
    flex-wrap: wrap;
  }

  .pkg__cards {
    padding: 0 8px;
  }

  .pcard {
    height: 300px;
    padding: 24px;
  }

  .pcard__num {
    font-size: 16px;
    letter-spacing: .14em;
  }

  .pcard__valid {
    flex-direction: column;
    gap: 4px;
  }

  .pkg__feats {
    grid-template-columns: minmax(0, 1fr);
  }

  .bkf {
    padding: 24px 16px;
  }

  .bkf__lbl {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .bkf__carin {
    font-size: 18px;
  }

  .bkf__svcs {
    grid-template-columns: minmax(0, 1fr);
  }

  .bkf__days {
    gap: 4px;
  }

  .bkf__hand {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
  }

  .bkf__hand legend {
    position: static;
    transform: none;
    margin-bottom: 12px;
  }

  .bkf__modes {
    width: 100%;
  }

  .bkf__mode {
    flex: 1;
  }

  .bkf__modebox {
    justify-content: center;
    padding: 0 10px;
  }

  .tkt {
    padding: 24px 16px;
  }

  .tkt__rows dd {
    white-space: normal;
    text-align: right;
  }

  .tkt__tv {
    font-size: 48px;
  }

  .tkt__stamp {
    width: 96px;
    height: 96px;
  }

  .tkt__go {
    height: auto;
    min-height: 56px;
    padding: 6px 6px 6px 20px;
  }

  .fqa .shead__r {
    flex-wrap: wrap;
  }

  .fqa__search {
    flex: 1 1 100%;
  }

  .fqa__row {
    padding: 18px 16px;
    gap: 14px;
  }

  .fqa__panel {
    padding: 24px 16px;
  }

  .fqp__q {
    font-size: 26px;
  }

  .fqa__ghost {
    right: 12px;
    top: 50px;
    font-size: 120px;
  }

  .fqp__facts {
    flex-wrap: wrap;
  }

  .fqp__vote {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* == 43. Pricing — shared ============================================== */
:root {
  --pr-grp: #fbfbfc;
  --pr-grey: #eef0f3;
  --pr-soft: rgba(128, 132, 140, .35);
  --pr-div: rgba(128, 132, 140, .3);
  --pr-dim: rgba(128, 132, 140, .25);
}

[data-theme="dark"] {
  --pr-grp: #181a1f;
  --pr-grey: #1b1e23;
}

.bartle-o {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
}

/* == 44. Pricing — 01 plans ============================================ */
.pls {
  gap: calc(var(--u) * 40);
}

.pls .shead__r {
  gap: calc(var(--u) * 18);
}

.bill__save {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 4);
}

.bill__sl {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  white-space: nowrap;
  color: var(--mute);
}

.bill__sv {
  font-size: max(12px, calc(var(--u) * 30));
  white-space: nowrap;
  color: var(--mute);
}

.bill__sv.is-ok {
  color: var(--ok);
}

.bill {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--ink);
  display: flex;
}

.bill__opt {
  height: calc(var(--u) * 47);
  padding: 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 24);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
}

.bill__opt.is-on {
  background: var(--acc);
  color: #fff;
}

/* cars-per-month slider */
.carsl {
  padding: calc(var(--u) * 24) calc(var(--u) * 34);
  border-radius: 999px;
  border: .5px solid var(--line2);
  background: var(--surf);
  display: grid;
  grid-template-columns: calc(var(--u) * 420) 1fr calc(var(--u) * 380);
  align-items: center;
  gap: calc(var(--u) * 40);
}

.carsl__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.carsl__lbl {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.42);
  white-space: nowrap;
  color: var(--mute);
}

.carsl__v {
  font-size: max(12px, calc(var(--u) * 40));
  letter-spacing: -.03em;
  white-space: nowrap;
}

.carsl__u {
  font-size: max(12px, calc(var(--u) * 15));
  letter-spacing: 0;
  color: var(--mute);
}

.carsl__track {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.carsl__rail {
  position: relative;
  height: calc(var(--u) * 30);
}

.carsl__rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 14);
  height: 1px;
  background: var(--line2);
}

.carsl__fill {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 13);
  width: 12%;
  height: calc(var(--u) * 3);
  background: var(--acc);
}

.carsl__tick {
  position: absolute;
  top: calc(var(--u) * 8);
  width: 1px;
  height: calc(var(--u) * 14);
  background: var(--mute);
}

.carsl__tick--1 { left: 1.7%; }
.carsl__tick--25 { left: 40.7%; }

.carsl__knob {
  position: absolute;
  left: 12%;
  top: calc(var(--u) * 3);
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  margin-left: calc(var(--u) * -12);
  border-radius: 50%;
  border: 1.5px solid var(--acc);
  background: var(--surf);
  pointer-events: none;
  transition: box-shadow .2s;
}

.carsl__rail:focus-within .carsl__knob {
  box-shadow: 0 0 0 calc(var(--u) * 5) var(--acc-a20);
}

.carsl__in {
  position: absolute;
  left: calc(var(--u) * -12);
  top: 0;
  width: calc(100% + calc(var(--u) * 24));
  height: calc(var(--u) * 30);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.carsl__ticks {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  color: var(--mute);
}

.carsl__mid {
  margin-left: 18%;
}

.carsl__rec {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 14);
}

.carsl__rt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 4);
}

.carsl__rl {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  white-space: nowrap;
  color: var(--acc);
}

.carsl__rn {
  font-size: max(12px, calc(var(--u) * 28));
  white-space: nowrap;
}

.carsl__go {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
}

/* the plan sheet */
.plans {
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: var(--surf);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plan {
  position: relative;
  padding: calc(var(--u) * 40) calc(var(--u) * 44) calc(var(--u) * 36);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
  transition: background .2s;
}

.plan + .plan {
  border-left: .5px solid var(--pr-div);
}

.plan:hover {
  background: var(--acc-a03);
}

.plan.is-on {
  background: var(--acc-a04);
  box-shadow: inset 0 3px 0 var(--acc);
}

.plan__hit,
.adn__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0;
}

.plan__hit:focus-visible,
.adn__hit:focus-visible {
  outline-offset: -4px;
}

.plan__ghost {
  position: absolute;
  right: calc(var(--u) * -30);
  top: calc(var(--u) * 40);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 420));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(128, 132, 140, .14);
  pointer-events: none;
}

.plan.is-on .plan__ghost {
  -webkit-text-stroke-color: var(--acc-a35);
}

.plan__top,
.plan__name,
.plan__price,
.plan__car,
.plan__desc,
.plan__use,
.plan__rows {
  position: relative;
}

.plan__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.plan__who {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.38);
  white-space: nowrap;
  color: var(--mute);
}

.plan__who .acc {
  margin-right: calc(var(--u) * 10);
}

.plan__tags {
  display: flex;
  gap: calc(var(--u) * 6);
}

.plan__pop,
.plan__fit {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
}

.plan__pop {
  background: var(--acc);
  color: #fff;
}

.plan__fit {
  border: .5px solid var(--ok);
  color: var(--ok);
  opacity: 0;
  transition: opacity .2s;
}

.plan__fit.is-on {
  opacity: 1;
}

.plan__name {
  font-size: max(12px, calc(var(--u) * 44));
  letter-spacing: -.03em;
}

.plan__price {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 14);
}

.plan__pv {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 112));
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(128, 132, 140, .85);
}

.plan.is-on .plan__pv {
  color: var(--acc-a10);
  -webkit-text-stroke-color: var(--acc);
}

.plan__pp {
  padding-bottom: calc(var(--u) * 14);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.plan__per {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
  color: var(--acc);
}

.plan__old {
  font-size: max(12px, calc(var(--u) * 12));
  text-decoration: line-through;
  color: var(--mute);
}

.plan__car {
  padding: calc(var(--u) * 14) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 16);
  border: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  white-space: nowrap;
}

.plan__cl {
  color: var(--mute);
}

.plan__cv,
.plan__ut {
  color: var(--ok);
}

.plan__cv.is-over,
.plan__ut.is-over {
  color: var(--acc);
}

.plan__desc {
  font-size: max(12px, calc(var(--u) * 19));
  line-height: 1.5;
  color: var(--body);
}

.plan__use {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.plan__ul {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--mute);
}

.plan__meter {
  display: block;
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: var(--line2);
  overflow: hidden;
}

.plan__mf {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ok);
  transition: width .3s;
}

.plan__mf.is-over {
  background: var(--acc);
}

.plan__rows {
  border-top: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
}

.plan__rows li {
  padding: calc(var(--u) * 12) 0;
  border-bottom: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 16));
}

.plan__v {
  white-space: nowrap;
}

.plan__no {
  color: rgba(128, 132, 140, .6);
}

.plan__yes {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  color: var(--ok);
}

.plan__cta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 28);
  border-radius: calc(var(--u) * 30);
  border: .5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
  color: var(--ink);
  transition: background .2s, border-color .2s, color .2s;
}

.plan__cta:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.plan__dot {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan.is-on .plan__cta,
.cpt[data-sel="0"] tfoot td:nth-child(2) .plan__cta,
.cpt[data-sel="1"] tfoot td:nth-child(3) .plan__cta,
.cpt[data-sel="2"] tfoot td:nth-child(4) .plan__cta {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.plan.is-on .plan__cta:hover,
.cpt[data-sel="0"] tfoot td:nth-child(2) .plan__cta:hover,
.cpt[data-sel="1"] tfoot td:nth-child(3) .plan__cta:hover,
.cpt[data-sel="2"] tfoot td:nth-child(4) .plan__cta:hover {
  border-color: var(--acc-d);
  background: var(--acc-d);
}

.plan.is-on .plan__dot,
.cpt[data-sel="0"] tfoot td:nth-child(2) .plan__dot,
.cpt[data-sel="1"] tfoot td:nth-child(3) .plan__dot,
.cpt[data-sel="2"] tfoot td:nth-child(4) .plan__dot {
  background: #fff;
  color: var(--acc);
}

/* perks strip */
.perks {
  border-top: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.perks__it {
  padding: calc(var(--u) * 22) 0 calc(var(--u) * 22) calc(var(--u) * 30);
  border-left: .5px solid var(--pr-div);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.perks__it:first-child {
  padding-left: 0;
  border-left: 0;
}

.perks__v {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 34));
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
}

.perks__t {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.perks__n {
  font-size: max(12px, calc(var(--u) * 17));
}

.perks__s {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--mute);
}

/* == 45. Pricing — 02 compare table ==================================== */
.cpx {
  gap: calc(var(--u) * 34);
}

.cpx .shead__r {
  gap: calc(var(--u) * 14);
}

.cpt__diff {
  height: calc(var(--u) * 55);
  padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
}

.cpt__sw {
  position: relative;
  width: calc(var(--u) * 62);
  height: calc(var(--u) * 39);
  border-radius: calc(var(--u) * 20);
  background: var(--pr-soft);
  transition: background .2s;
}

.cpt__knob {
  position: absolute;
  left: calc(var(--u) * 4);
  top: calc(var(--u) * 4);
  width: calc(var(--u) * 31);
  height: calc(var(--u) * 31);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, .2);
  transition: left .2s;
}

.cpt__diff[aria-pressed="true"] .cpt__sw {
  background: var(--acc);
}

.cpt__diff[aria-pressed="true"] .cpt__knob {
  left: calc(var(--u) * 27);
}

.cpt__all {
  height: calc(var(--u) * 55);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 28);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
  white-space: nowrap;
}

.cpt__all:hover,
.cpt__diff:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.cpt__alld {
  width: calc(var(--u) * 39);
  height: calc(var(--u) * 39);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s;
}

.cpt__all[aria-pressed="true"] .cpt__alld {
  transform: rotate(180deg);
}

.cpt__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.cpt__chip {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--pr-soft);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
}

.cpt__chip:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.cpt__chip.is-on {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.cpt__wrap {
  position: relative;
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: var(--surf);
  overflow: hidden;
}

.cpt {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cpt__c0 {
  width: 30.23%;
}

.cpt th {
  font-weight: 300;
  text-align: left;
}

.cpt thead tr {
  border-bottom: .5px solid var(--line2);
}

.cpt__vs {
  position: relative;
  padding: calc(var(--u) * 30) calc(var(--u) * 36);
  overflow: hidden;
  vertical-align: bottom;
}

.cpt__vsg {
  position: absolute;
  left: calc(var(--u) * 24);
  top: calc(var(--u) * -20);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 170));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(128, 132, 140, .18);
  pointer-events: none;
}

.cpt__pick {
  position: relative;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.88);
  color: var(--mute);
}

.cpt__h {
  padding: 0;
  border-left: .5px solid var(--line2);
  vertical-align: top;
}

.cpt__hit {
  width: 100%;
  padding: calc(var(--u) * 30) calc(var(--u) * 36);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
  text-align: left;
  color: var(--ink);
}

.cpt__ht,
.cpt__hm,
.cpt__sl {
  display: flex;
  justify-content: space-between;
}

.cpt__ht {
  align-items: center;
}

.cpt__hn {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.42);
  white-space: nowrap;
  color: var(--acc);
}

.cpt__pop {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  white-space: nowrap;
}

.cpt__hm {
  align-items: flex-end;
  gap: calc(var(--u) * 10);
}

.cpt__name {
  font-size: max(12px, calc(var(--u) * 36));
  letter-spacing: -.02em;
  white-space: nowrap;
}

.cpt__price {
  font-size: max(12px, calc(var(--u) * 28));
  white-space: nowrap;
}

.cpt__per {
  margin-left: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.cpt__sc {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.cpt__sl {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  color: var(--mute);
}

.cpt__sv {
  color: rgba(128, 132, 140, .8);
}

.cpt__bar {
  display: block;
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: var(--line2);
  overflow: hidden;
}

.cpt__bf {
  display: block;
  width: 0;
  height: 100%;
  background: rgba(128, 132, 140, .8);
  transition: width .3s;
}

/* the selected column: tint, top bar, accent score */
.cpt[data-sel="0"] tr > :nth-child(2),
.cpt[data-sel="1"] tr > :nth-child(3),
.cpt[data-sel="2"] tr > :nth-child(4) {
  background-color: var(--acc-a04);
}

.cpt[data-sel="0"] thead th:nth-child(2),
.cpt[data-sel="1"] thead th:nth-child(3),
.cpt[data-sel="2"] thead th:nth-child(4) {
  box-shadow: inset 0 3px 0 var(--acc);
}

.cpt[data-sel="0"] thead th:nth-child(2) .cpt__sv,
.cpt[data-sel="1"] thead th:nth-child(3) .cpt__sv,
.cpt[data-sel="2"] thead th:nth-child(4) .cpt__sv {
  color: var(--acc);
}

.cpt[data-sel="0"] thead th:nth-child(2) .cpt__bf,
.cpt[data-sel="1"] thead th:nth-child(3) .cpt__bf,
.cpt[data-sel="2"] thead th:nth-child(4) .cpt__bf,
.cpt[data-sel="0"] .cpt__gr td:nth-child(2) .cpt__seg.is-on,
.cpt[data-sel="1"] .cpt__gr td:nth-child(3) .cpt__seg.is-on,
.cpt[data-sel="2"] .cpt__gr td:nth-child(4) .cpt__seg.is-on {
  background: var(--acc);
}

/* group rows */
.cpt__gr {
  border-bottom: .5px solid var(--line2);
  background: var(--pr-grp);
}

.cpt__gr th {
  padding: 0;
}

.cpt__gt {
  width: 100%;
  padding: calc(var(--u) * 18) calc(var(--u) * 36);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  text-align: left;
  color: var(--ink);
}

.cpt__gt:hover {
  color: var(--acc);
}

.cpt__plus {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border-radius: 50%;
  border: .5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: 0;
  transform: rotate(45deg);
  transition: transform .2s;
}

.cpt__gt[aria-expanded="false"] .cpt__plus {
  transform: none;
}

.cpt__cnt {
  letter-spacing: .1em;
  color: var(--mute);
}

.cpt__gr td {
  padding: calc(var(--u) * 18) calc(var(--u) * 36);
  border-left: .5px solid var(--line2);
}

.cpt__gw {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.cpt__segs {
  flex: 1;
  display: flex;
  gap: calc(var(--u) * 3);
}

.cpt__seg {
  flex: 1;
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: rgba(128, 132, 140, .2);
}

.cpt__seg.is-on {
  background: rgba(128, 132, 140, .7);
}

.cpt__gc {
  font-size: max(12px, calc(var(--u) * 12));
  white-space: nowrap;
  color: var(--mute);
}

/* feature rows */
.cpt__row {
  border-bottom: .5px solid var(--hair);
  transition: background .15s;
}

.cpt__row:hover {
  background: var(--acc-a04);
}

.cpt__row th {
  padding: calc(var(--u) * 20) calc(var(--u) * 36);
}

.cpt__fw {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.cpt__lbl {
  font-size: max(12px, calc(var(--u) * 20));
}

.cpt__i {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  flex-shrink: 0;
  border-radius: 50%;
  border: .5px solid var(--mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 11));
  color: var(--mute);
  cursor: help;
}

.cpt__new {
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 12);
  background: var(--acc-a10);
  color: var(--acc);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.2);
}

.cpt__c {
  padding: calc(var(--u) * 20) calc(var(--u) * 36);
  border-left: .5px solid var(--hair);
  font-size: max(12px, calc(var(--u) * 19));
}

.cpt__cw {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.cpt__c--no {
  color: rgba(128, 132, 140, .55);
}

.cpt__dot {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.cpt__c--inc .cpt__dot,
.cpt__dot--inc {
  background: var(--acc-a14);
  color: var(--acc);
}

.cpt__c--add .cpt__dot,
.cpt__dot--add {
  border: .5px solid var(--mute);
}

.cpt__best {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  color: var(--ok);
}

.cpt tfoot th {
  padding: calc(var(--u) * 22) calc(var(--u) * 36);
}

.cpt__lgw {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

.cpt__lg {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.cpt__lg .cpt__dot {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 10));
}

.cpt tfoot td {
  padding: calc(var(--u) * 18) calc(var(--u) * 36);
  border-left: .5px solid var(--line2);
}

.cpt__cta {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 24);
  font-size: max(12px, calc(var(--u) * 13));
}

.cpt__cta .plan__dot {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
}

/* == 46. Pricing — 03 buyer fees ======================================= */
.fees {
  gap: calc(var(--u) * 40);
}

.fcars {
  display: flex;
  gap: calc(var(--u) * 10);
}

.fcar {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 22) 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--pr-soft);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.fcar:hover {
  border-color: var(--acc);
}

.fcar.is-on {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.fcar__thumb {
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 48);
  border: 0;
  border-radius: calc(var(--u) * 24);
}

.fcar__t {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 2);
}

.fcar__n {
  font-size: max(12px, calc(var(--u) * 16));
  white-space: nowrap;
}

.fcar__p {
  font-size: max(12px, calc(var(--u) * 12));
  opacity: .65;
}

.fgrid {
  display: grid;
  grid-template-columns: 1fr calc(var(--u) * 600) 1fr;
  align-items: stretch;
}

.ftk,
.fdl {
  position: relative;
  padding: calc(var(--u) * 44) calc(var(--u) * 44) calc(var(--u) * 40);
  border-radius: calc(var(--u) * 32) calc(var(--u) * 32) 0 0;
  border-bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ftk {
  border: .5px solid var(--acc);
  border-bottom: 0;
  background: var(--surf);
  gap: calc(var(--u) * 12);
}

.fdl {
  border: .5px solid var(--line3);
  border-bottom: 0;
  background: var(--pr-grey);
  gap: calc(var(--u) * 10);
  color: var(--body);
}

.ftk__ghost {
  position: absolute;
  right: calc(var(--u) * -40);
  top: calc(var(--u) * 130);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 300));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc-a14);
  pointer-events: none;
}

.fdl__ghost {
  -webkit-text-stroke-color: rgba(128, 132, 140, .16);
}

.ftk__top,
.ftk__lines,
.ftk__sum,
.ftk__bars,
.fdl__lines {
  position: relative;
}

.ftk__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ftk__brand {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  color: var(--acc);
}

.ftk__inv {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mute);
}

.ftk__all {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: rgba(47, 163, 107, .12);
  color: var(--ok);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
}

.ftk__ln,
.fdl__ln {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: .5px dashed var(--line3);
}

.ftk__lines {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.fdl__lines {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.ftk__ln {
  padding: calc(var(--u) * 14) 0;
}

.ftk__k {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.ftk__kn {
  font-size: max(12px, calc(var(--u) * 20));
}

.ftk__ks {
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.ftk__v {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 400;
}

.ftk__v.is-ok {
  color: var(--ok);
}

.ftk__sum {
  padding-top: calc(var(--u) * 14);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.ftk__tot {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.ftk__tl {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  color: var(--mute);
}

.fdl .ftk__tl {
  color: var(--body);
}

.ftk__tv {
  font-size: max(12px, calc(var(--u) * 80));
  letter-spacing: -.05em;
  line-height: 1;
}

.fdl__tv {
  color: var(--ink);
}

.ftk__stamp {
  width: max(calc(var(--u) * 120), 104px);
  height: max(calc(var(--u) * 120), 104px);
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.2px solid var(--ok);
  color: var(--ok);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-12deg);
}

.ftk__s1 {
  font-size: max(12px, calc(var(--u) * 9));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
}

.ftk__s2 {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 17));
  line-height: 1.2;
  white-space: nowrap;
}

.ftk__bars {
  margin-top: calc(var(--u) * 6);
  height: calc(var(--u) * 30);
  display: flex;
  gap: 2px;
  opacity: .7;
}

.fbar { background: var(--mute); }
.fbar--gap { background: transparent; }
.fbar--w1 { width: 1px; }
.fbar--w2 { width: 2px; }
.fbar--w3 { width: 3px; }

/* the centre column */
.fmid {
  padding: 0 calc(var(--u) * 30);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 18);
}

.fmid__l {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.88);
  color: var(--mute);
}

.fmid__save {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 58));
  line-height: 1;
  white-space: nowrap;
  color: var(--acc-a10);
  -webkit-text-stroke: 1px var(--acc);
}

.fgau {
  position: relative;
  width: calc(var(--u) * 360);
  height: calc(var(--u) * 180);
  overflow: hidden;
}

.fgau__bg,
.fgau__arc {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 360);
  height: calc(var(--u) * 360);
  border-radius: 50%;
  border: calc(var(--u) * 14) solid var(--line3);
}

.fgau__arc {
  border-color: var(--acc) transparent transparent var(--acc);
  transform: rotate(-225deg);
  transition: transform .5s;
}

.fgau__pct {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 6);
  text-align: center;
  font-size: max(12px, calc(var(--u) * 40));
  letter-spacing: -.03em;
}

.fgau__less {
  font-size: max(12px, calc(var(--u) * 16));
  letter-spacing: 0;
  color: var(--mute);
}

.fbuys {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.fbuys__l {
  text-align: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  color: var(--mute);
}

.fbuys__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.fbuy {
  padding: calc(var(--u) * 10) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 14);
  border: .5px solid var(--line3);
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 15));
}

.frev {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 28);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
  transition: background .2s;
}

.frev:hover {
  background: var(--acc-d);
}

.frev[aria-pressed="true"] {
  background: #111418;
}

.frev__dot {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s;
}

.frev[aria-pressed="true"] .frev__dot {
  color: #111418;
  transform: rotate(180deg);
}

/* the dealer invoice */
.fdl__brand {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
}

.fdl__cnt {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  border: .5px solid var(--line3);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
}

.fdl__ln {
  padding: calc(var(--u) * 10) 0;
  cursor: help;
  transition: filter .3s, opacity .3s;
}

.fdl__ln.is-hidden {
  filter: blur(5px);
  opacity: .6;
}

.fdl__k {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 18));
}

.fdl__tag {
  height: calc(var(--u) * 20);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 10);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 9));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 0.9);
  opacity: 0;
  transition: opacity .3s;
}

.fdl__ln[data-hid="1"]:not(.is-hidden) .fdl__tag {
  opacity: 1;
}

.fdl__v {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 400;
}

.fdl__ln[data-hid="1"] .fdl__v {
  color: var(--acc);
}

.fdl__note {
  max-width: calc(var(--u) * 220);
  text-align: right;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--acc);
}

/* torn bottom edges */
.fedge {
  height: calc(var(--u) * 18);
}

.fedge--av {
  border-left: .5px solid var(--acc);
  border-right: .5px solid var(--acc);
  background: radial-gradient(circle at calc(var(--u) * 9) 0, transparent calc(var(--u) * 8), var(--surf) calc(var(--u) * 8.5)) 0 0 / calc(var(--u) * 18) calc(var(--u) * 18) repeat-x;
}

.fedge--dl {
  background: radial-gradient(circle at calc(var(--u) * 9) 0, transparent calc(var(--u) * 8), var(--pr-grey) calc(var(--u) * 8.5)) 0 0 / calc(var(--u) * 18) calc(var(--u) * 18) repeat-x;
}

.fnote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.fnote a {
  color: var(--ink);
}

.fnote a:hover {
  color: var(--acc);
}

/* == 47. Pricing — 04 add-ons ========================================== */
.adns {
  gap: calc(var(--u) * 30);
}

.adns__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--u) * 40);
}

.adns__h2 {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 30);
  font-size: max(12px, calc(var(--u) * 64));
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}

.adns__eb {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.92);
  white-space: nowrap;
  color: var(--mute);
}

.adns__eb .acc {
  margin-right: calc(var(--u) * 14);
}

.adns__r {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.adn__bundle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 6);
}

.adn__bt {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  white-space: nowrap;
  color: var(--mute);
}

.adn__bt.is-ok {
  color: var(--ok);
}

.adn__segs {
  display: flex;
  gap: calc(var(--u) * 4);
}

.adn__seg {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: var(--pr-dim);
}

.adn__seg.is-on {
  background: var(--acc);
}

.adn__segs.is-ok .adn__seg.is-on {
  background: var(--ok);
}

.adn__svc {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  white-space: nowrap;
  color: var(--ink);
}

.adn__svc:hover {
  border-color: var(--acc);
}

.adns__box {
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: var(--surf);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 440);
}

.adns__cells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.adn {
  position: relative;
  padding: calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 26);
  border-right: .5px solid var(--line2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
  transition: background .2s;
}

.adn:hover {
  background: var(--acc-a04);
}

.adn.is-on {
  background: var(--acc-a04);
  box-shadow: inset 0 3px 0 var(--acc);
}

.adn__ghost {
  position: absolute;
  right: calc(var(--u) * -16);
  top: calc(var(--u) * 70);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 220));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(128, 132, 140, .12);
  pointer-events: none;
}

.adn.is-on .adn__ghost {
  -webkit-text-stroke-color: var(--acc-a30);
}

.adn__top,
.adn__txt,
.adn__roi,
.adn__foot {
  position: relative;
}

.adn__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adn__ico {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: 50%;
  border: .5px solid rgba(128, 132, 140, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
}

.adn.is-on .adn__ico {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.adn__tag {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: var(--acc-a12);
  color: var(--acc);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  white-space: nowrap;
}

.adn__tag--new {
  background: rgba(47, 163, 107, .14);
  color: var(--ok);
}

.adn__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.adn__name {
  font-size: max(12px, calc(var(--u) * 24));
  letter-spacing: -.015em;
}

.adn__desc {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.45;
  color: var(--body);
}

.adn__roi {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--ok);
}

.adn__rd {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: var(--ok);
}

.adn__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.adn__price {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 6);
  white-space: nowrap;
}

.adn__pv {
  font-size: max(12px, calc(var(--u) * 34));
  letter-spacing: -.03em;
}

.adn__unit {
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.adn__step {
  position: relative;
  z-index: 2;
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 4);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--acc);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
}

.adn__step[hidden] {
  display: none;
}

.adn__sb {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: 50%;
  font-size: max(12px, calc(var(--u) * 18));
  color: var(--acc);
}

.adn__sb--inc {
  background: var(--acc);
  color: #fff;
}

.adn__qty {
  min-width: calc(var(--u) * 22);
  text-align: center;
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--acc);
}

.adn__plus {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  flex-shrink: 0;
  border-radius: 50%;
  border: .5px solid rgba(128, 132, 140, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 22));
  transition: transform .2s, background .2s;
}

.adn__plus[hidden] {
  display: none;
}

.adn.is-on .adn__plus {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
  transform: rotate(45deg);
}

/* the receipt: dark in both themes */
.adr {
  position: relative;
  padding: calc(var(--u) * 30) calc(var(--u) * 32);
  background: #111418;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.adr__ghost {
  position: absolute;
  right: calc(var(--u) * -20);
  bottom: calc(var(--u) * 40);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 200));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc-a35);
  pointer-events: none;
}

.adr__top,
.adr__lines,
.adr__empty,
.adr__sum {
  position: relative;
}

.adr__top {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.42);
  color: #8a9099;
}

.adr__cnt {
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 400;
  letter-spacing: .06em;
}

.adr__lines {
  min-height: calc(var(--u) * 150);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.adr__lines li {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  font-weight: 400;
  color: #d7dade;
}

.adr__lines li span:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.adr__lines .is-disc {
  color: var(--ok);
}

.adr__empty {
  margin-top: calc(var(--u) * -162);
  min-height: calc(var(--u) * 150);
  font-size: max(12px, calc(var(--u) * 14));
  color: #a3a9b3;
}

.adr__empty[hidden] {
  display: none;
}

.adr__sum {
  padding-top: calc(var(--u) * 12);
  border-top: .5px dashed rgba(242, 243, 245, .25);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.adr__tl {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  color: #8a9099;
}

.adr__tot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 2);
}

.adr__old {
  font-size: max(12px, calc(var(--u) * 13));
  text-decoration: line-through;
  color: #8a9099;
  opacity: 0;
}

.adr__old.is-on {
  opacity: 1;
}

.adr__tv {
  font-size: max(12px, calc(var(--u) * 56));
  letter-spacing: -.045em;
  line-height: 1;
}

.adr__go {
  position: relative;
  margin-top: auto;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 28);
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
}

.adr__go .btn-acc__dot {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
}

/* == 48. Pricing — 05 flip FAQ ========================================= */
.pfq {
  gap: calc(var(--u) * 40);
}

.pfq .shead__r {
  gap: calc(var(--u) * 14);
}

.pfq__read {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 6);
}

.pfq__rt {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  white-space: nowrap;
  color: var(--mute);
}

.pfq__segs {
  display: flex;
  gap: calc(var(--u) * 4);
}

.pfq__seg {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: var(--pr-dim);
}

.pfq__seg.is-on {
  background: var(--acc);
}

.pfq__all {
  height: calc(var(--u) * 55);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
}

.pfq__all:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.pfq__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 18);
}

.pft {
  position: relative;
  height: calc(var(--u) * 460);
  perspective: 1800px;
  cursor: pointer;
}

/* the keyboard button covers the tile; mouse clicks go to the tile itself */
.pft__hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: calc(var(--u) * 30);
  pointer-events: none;
}

.pft__card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.pft.is-flip .pft__card {
  transform: rotateY(180deg);
}

.pft__front,
.pft__back {
  position: absolute;
  inset: 0;
  padding: calc(var(--u) * 34) calc(var(--u) * 38);
  border-radius: calc(var(--u) * 30);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pft__front {
  border: .5px solid var(--pr-div);
  background: var(--surf);
  gap: calc(var(--u) * 18);
}

.pft.is-seen .pft__front {
  border-color: var(--acc-a40);
}

.pft__ghost {
  position: absolute;
  right: calc(var(--u) * -20);
  bottom: calc(var(--u) * -40);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 320));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(128, 132, 140, .12);
  pointer-events: none;
}

.pft__top,
.pft__q,
.pft__foot,
.pft__bq,
.pft__a,
.pft__fact,
.pft__link {
  position: relative;
}

.pft__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pft__topic {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.88);
  white-space: nowrap;
  color: var(--mute);
}

.pft__topic .acc {
  margin-right: calc(var(--u) * 10);
}

.pft__read {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  white-space: nowrap;
  color: var(--mute);
}

.pft.is-seen .pft__read {
  color: var(--ok);
}

.pft__rd {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: currentColor;
}

.pft__q {
  max-width: calc(var(--u) * 640);
  font-size: max(12px, calc(var(--u) * 32));
  letter-spacing: -.02em;
  line-height: 1.2;
}

.pft__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.pft__short {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 120));
  line-height: 1;
  white-space: nowrap;
  color: var(--acc-a08);
  -webkit-text-stroke: 1px var(--acc);
}

.pft__short--no {
  color: rgba(47, 163, 107, .1);
  -webkit-text-stroke-color: var(--ok);
}

.pft__turn {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  margin-bottom: calc(var(--u) * 14);
  border-radius: 50%;
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
}

.pft__back {
  background: var(--acc);
  color: #fff;
  gap: calc(var(--u) * 16);
  transform: rotateY(180deg);
}

.pft__bghost {
  position: absolute;
  right: calc(var(--u) * -30);
  top: calc(var(--u) * -50);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 260));
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .22);
  pointer-events: none;
}

.pft__btopic {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.88);
  white-space: nowrap;
  opacity: .8;
}

.pft__x {
  font-size: max(12px, calc(var(--u) * 18));
}

.pft__bq {
  font-size: max(12px, calc(var(--u) * 22));
  line-height: 1.3;
}

.pft__a {
  font-size: max(12px, calc(var(--u) * 18));
  line-height: 1.55;
  opacity: .92;
}

.pft__fact {
  margin-top: auto;
  padding-top: calc(var(--u) * 16);
  border-top: .5px solid rgba(255, 255, 255, .35);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--u) * 20);
}

.pft__fw {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.pft__fv {
  font-size: max(12px, calc(var(--u) * 40));
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
}

.pft__fk {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  opacity: .8;
}

.pft__viz {
  height: calc(var(--u) * 44);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 4);
}

.pft__vb {
  width: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 2);
  background: rgba(255, 255, 255, .45);
}

.pft__vb.is-last { background: #fff; }
.pft__vb--1 { height: calc(var(--u) * 4.5); }
.pft__vb--2 { height: calc(var(--u) * 9); }
.pft__vb--3 { height: calc(var(--u) * 13.5); }
.pft__vb--4 { height: calc(var(--u) * 18); }
.pft__vb--5 { height: calc(var(--u) * 22.5); }
.pft__vb--6 { height: calc(var(--u) * 27); }
.pft__vb--7 { height: calc(var(--u) * 31.5); }
.pft__vb--8 { height: calc(var(--u) * 36); }
.pft__vb--9 { height: calc(var(--u) * 40.5); }

.pft__link {
  z-index: 6;
  align-self: flex-start;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: #fff;
  opacity: .9;
}

.pft__link:hover {
  color: #fff;
  opacity: 1;
}

.pfq__foot {
  padding-top: calc(var(--u) * 24);
  border-top: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.pfq__foot a {
  color: var(--ink);
}

.pfq__foot a:hover {
  color: var(--acc);
}

/* == 49. Pricing — tablet and phone ==================================== */
@media (max-width: 1199px) {
  .carsl {
    grid-template-columns: 1fr auto;
    gap: 16px 24px;
    padding: 20px 24px;
    border-radius: 28px;
  }

  .carsl__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan + .plan {
    border-left: 0;
    border-top: .5px solid var(--pr-div);
  }

  .plan {
    padding: 28px 24px;
  }

  .plan__ghost {
    font-size: 260px;
  }

  .plan__name {
    font-size: 32px;
  }

  .plan__pv {
    font-size: 72px;
  }

  .perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .perks__it:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .perks__it:nth-child(n+3) {
    border-top: .5px solid var(--pr-div);
  }

  /* the compare table scrolls sideways with the feature names pinned */
  .cpt__wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cpt {
    min-width: 920px;
  }

  .cpt th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surf);
  }

  .cpt__gr th:first-child {
    background: var(--pr-grp);
  }

  .cpt__hit,
  .cpt__vs,
  .cpt__gt,
  .cpt__row th,
  .cpt__c,
  .cpt__gr td,
  .cpt tfoot th,
  .cpt tfoot td {
    padding-left: 18px;
    padding-right: 18px;
  }

  .cpt__lgw {
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  .fcars {
    flex-wrap: wrap;
  }

  .fgrid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .ftk,
  .fdl {
    padding: 28px 24px 24px;
  }

  .ftk {
    order: 1;
  }

  .fedge--av {
    order: 2;
  }

  .fmid {
    order: 3;
    padding: 32px 0;
  }

  .fdl {
    order: 4;
  }

  .fedge--dl {
    order: 5;
  }

  .fgrid > span:not([class]) {
    display: none;
  }

  .ftk__tv {
    font-size: 48px;
  }

  .fnote {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .adns__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .adns__h2 {
    flex-wrap: wrap;
    white-space: normal;
    font-size: 40px;
    row-gap: 8px;
  }

  .adns__eb {
    flex-basis: 100%;
  }

  .adns__r {
    flex-wrap: wrap;
  }

  .adns__box {
    grid-template-columns: minmax(0, 1fr);
  }

  .adns__cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adn {
    border-bottom: .5px solid var(--line2);
  }

  .adn:nth-child(2n) {
    border-right: 0;
  }

  .adn__step {
    height: 48px;
  }

  .adn__sb {
    width: 40px;
    height: 40px;
  }

  .pfq__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pft {
    height: 380px;
  }

  .pft__q {
    font-size: 24px;
  }

  .pft__short {
    font-size: 48px;
  }

  .pfq__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .bill__sv {
    font-size: 22px;
  }

  .carsl__v {
    font-size: 30px;
  }

  .carsl__rn {
    font-size: 20px;
  }

  .carsl {
    grid-template-columns: minmax(0, 1fr);
  }

  .carsl__track {
    grid-row: auto;
  }

  .carsl__rec {
    justify-content: space-between;
  }

  .carsl__rt {
    align-items: flex-start;
  }

  .carsl__ticks {
    gap: 8px;
    font-size: 12px;
    letter-spacing: .04em;
  }

  .carsl__mid {
    margin-left: 0;
  }

  .plan {
    padding: 24px 18px;
  }

  .plan__top {
    flex-wrap: wrap;
  }

  .plan__pv {
    font-size: 56px;
  }

  .plan__price {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .plan__pp {
    padding-bottom: 6px;
  }

  .plan__car {
    flex-direction: column;
    gap: 4px;
    white-space: normal;
  }

  .plan__cta {
    min-height: 52px;
  }

  .perks {
    grid-template-columns: minmax(0, 1fr);
  }

  .perks__it,
  .perks__it:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .perks__it:nth-child(n+2) {
    border-top: .5px solid var(--pr-div);
  }

  .fcar {
    flex: 1 1 100%;
  }

  .cpt {
    min-width: 760px;
  }

  .cpt__c0 {
    width: 150px;
  }

  .cpt__vsg {
    font-size: 90px;
    left: 12px;
  }

  .cpt__pick {
    display: block;
    letter-spacing: .1em;
  }

  .cpt__lbl {
    font-size: 15px;
  }

  .cpt__gt {
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  .cpt__row th,
  .cpt__vs,
  .cpt__gt,
  .cpt tfoot th {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ftk__sum {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .ftk__lines .ftk__kn,
  .ftk__v {
    font-size: 16px;
  }

  .fgau {
    width: 280px;
    height: 140px;
  }

  .fgau__bg,
  .fgau__arc {
    width: 280px;
    height: 280px;
    border-width: 12px;
  }

  .fmid__save {
    font-size: 44px;
  }

  .adns__cells {
    grid-template-columns: minmax(0, 1fr);
  }

  .adn {
    border-right: 0;
  }

  .adr {
    padding: 24px 18px;
  }

  .pfq__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pft {
    height: 360px;
  }

  .pft__front,
  .pft__back {
    padding: 24px 20px;
  }

  .pft__ghost {
    font-size: 200px;
  }

  .pft__a {
    font-size: 15px;
  }

  .pft__fv {
    font-size: 28px;
  }

  .pft__short {
    font-size: 44px;
  }

  .plan__pv {
    font-size: 50px;
  }
}

@media (max-width: 359px) {
  .pft__short {
    font-size: 36px;
  }
}

/* == 50. FAQ — shared ================================================== */
:root {
  --hf-dim: rgba(17, 20, 24, .12);
  --hf-ring: rgba(17, 20, 24, .3);
  --hf-soft: rgba(128, 132, 140, .45);
  --hf-band: #111418;
}

[data-theme="dark"] {
  --hf-dim: rgba(242, 243, 245, .14);
  --hf-ring: rgba(242, 243, 245, .3);
  --hf-band: #1a1d22;
}

.i28 { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }

.hsr mark,
.hqa mark {
  background: none;
  color: var(--acc);
  box-shadow: inset 0 -2px 0 var(--acc);
}

.hvote {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--hf-soft);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
}

.hvote:hover {
  border-color: var(--acc);
}

.hvote[aria-pressed="true"] {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}

.hvote--no[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
}

/* == 51. FAQ — 01 search =============================================== */
.hsr {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 44);
}

.hsr__ghost {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 10);
  width: calc(var(--u) * 1400);
  height: calc(var(--u) * 760);
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}

.hsr__ghost text {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: 820px;
  fill: none;
  stroke: var(--hair);
  stroke-width: 1;
}

.hsr__status,
.hsr__center,
.htiles,
.hans {
  position: relative;
}

.hsr__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  color: var(--mute);
}

.hsr__status .acc {
  margin-right: calc(var(--u) * 16);
}

.hsr__meta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 30);
}

.hsr__live {
  color: var(--ok);
}

.hsr__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 34);
  text-align: center;
}

.hsr__h2 {
  font-size: max(12px, calc(var(--u) * 170));
  letter-spacing: -.065em;
  line-height: .92;
}

.hsr__box {
  position: relative;
  width: calc(var(--u) * 1560);
  max-width: 100%;
}

.hsr__field {
  height: calc(var(--u) * 112);
  border-bottom: 1.5px solid var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
  transition: border-color .2s;
}

.hsr__field.is-typing {
  border-bottom-color: var(--acc);
}

.hsr__glass {
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  flex-shrink: 0;
  color: var(--acc);
}

.hsr__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 106);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: max(12px, calc(var(--u) * 46));
  font-weight: 300;
  letter-spacing: -.025em;
  text-align: left;
  color: var(--ink);
}

.hsr__kbd {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 8);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  transition: opacity .2s;
}

.is-typing .hsr__kbd {
  opacity: 0;
}

.hsr__hits {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
  color: var(--acc);
}

.hsr__go {
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 76);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  box-shadow: 0 0 0 calc(var(--u) * 10) var(--acc-a14);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hsr__go:hover {
  background: var(--acc-d);
}

.hsr__x,
.is-typing .hsr__arrow {
  display: none;
}

.is-typing .hsr__x {
  display: block;
}

.hsr__drop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 128);
  z-index: 5;
  border-radius: calc(var(--u) * 30);
  border: .5px solid var(--line2);
  background: var(--surf);
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(17, 20, 24, .16);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 560);
  text-align: left;
}

.hsr__drop[hidden] {
  display: none;
}

.hsr__res {
  padding: calc(var(--u) * 10) 0;
  border-right: .5px solid var(--hair);
  display: flex;
  flex-direction: column;
}

.hsr__rl {
  padding: calc(var(--u) * 14) calc(var(--u) * 32) calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.42);
  color: var(--mute);
}

.hsr__rb {
  width: 100%;
  padding: calc(var(--u) * 16) calc(var(--u) * 32);
  display: grid;
  grid-template-columns: calc(var(--u) * 44) minmax(0, 1fr) calc(var(--u) * 190);
  align-items: center;
  gap: calc(var(--u) * 16);
  text-align: left;
  color: var(--ink);
}

.hsr__rb:hover {
  background: var(--acc-a06);
}

.hsr__ri {
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acc);
}

.hsr__ri .ico {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
}

.hsr__rq {
  font-size: max(12px, calc(var(--u) * 23));
}

.hsr__rt {
  text-align: right;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  white-space: nowrap;
  color: var(--mute);
}

.hsr__none {
  padding: calc(var(--u) * 20) calc(var(--u) * 32);
  font-size: max(12px, calc(var(--u) * 21));
  color: var(--body);
}

.hsr__none[hidden] {
  display: none;
}

.hsr__none a {
  color: var(--acc);
}

.hsr__top {
  padding: calc(var(--u) * 30) calc(var(--u) * 32);
  background: var(--acc-a04);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.hsr__tl {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.42);
  color: var(--acc);
}

.hsr__tq {
  font-size: max(12px, calc(var(--u) * 28));
  letter-spacing: -.015em;
  line-height: 1.2;
}

.hsr__ta {
  font-size: max(12px, calc(var(--u) * 18));
  line-height: 1.55;
  color: var(--body);
}

.hsr__open {
  margin-top: auto;
  align-self: flex-start;
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 24);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
}

.hsr__open:hover {
  background: var(--acc-d);
}

.hsr__tries {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.hsr__pl {
  margin-right: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
}

.hsr__try {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 23);
  border: .5px solid var(--line);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 16));
  white-space: nowrap;
}

.hsr__try:hover {
  border-color: var(--acc);
}

.hsr__try[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.hsr__tn {
  height: calc(var(--u) * 30);
  min-width: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 15);
  background: rgba(128, 132, 140, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 12));
}

.hsr__try[aria-pressed="true"] .hsr__tn {
  background: rgba(255, 255, 255, .25);
}

/* topic tiles: the active one spans two columns and lists its questions */
.htiles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(var(--u) * 14);
}

.htile {
  position: relative;
  height: calc(var(--u) * 420);
  padding: calc(var(--u) * 28) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
  transition: background .3s, border-color .3s;
}

.htile:hover {
  border-color: var(--acc);
}

.htile.is-on {
  grid-column: span 2;
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) var(--acc-a24);
}

.htile__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: calc(var(--u) * 32);
}

.htile__hit:focus-visible {
  outline-offset: -4px;
}

.htile__ghost {
  position: absolute;
  right: calc(var(--u) * -6);
  bottom: calc(var(--u) * -30);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 200));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ghost);
  pointer-events: none;
}

.htile.is-on .htile__ghost {
  -webkit-text-stroke-color: rgba(255, 255, 255, .4);
}

.htile__top,
.htile__name,
.htile__qs,
.htile__sample,
.htile__cnt {
  position: relative;
}

.htile__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.htile__ico {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border-radius: 50%;
  border: .5px solid var(--hf-ring);
  display: flex;
  align-items: center;
  justify-content: center;
}

.htile.is-on .htile__ico {
  border-color: rgba(255, 255, 255, .6);
}

.htile__n {
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 1.68);
  opacity: .7;
}

.htile__name {
  margin-top: auto;
  font-size: max(12px, calc(var(--u) * 32));
  letter-spacing: -.02em;
  line-height: 1.1;
}

.htile__qs {
  display: none;
  z-index: 2;
  border-top: .5px solid rgba(255, 255, 255, .4);
  flex-direction: column;
}

.htile.is-on .htile__qs {
  display: flex;
}

.htile__q {
  width: 100%;
  padding: calc(var(--u) * 9) 0;
  border-bottom: .5px solid rgba(255, 255, 255, .25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
  text-align: left;
  font-size: max(12px, calc(var(--u) * 16));
  color: #fff;
  opacity: .85;
}

.htile__q span:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.htile__q:hover,
.htile__q.is-cur {
  opacity: 1;
}

.htile__sample {
  max-width: calc(var(--u) * 260);
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.45;
  opacity: .7;
}

.htile__cnt {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  opacity: .75;
}

.htile.is-on .htile__sample,
.htile.is-on .htile__cnt {
  display: none;
}

/* the open answer under the tiles */
.hans {
  padding: calc(var(--u) * 36) calc(var(--u) * 44);
  border-radius: calc(var(--u) * 32);
  border: 1px solid var(--acc);
  background: var(--surf);
  display: grid;
  grid-template-columns: calc(var(--u) * 300) minmax(0, 1fr) auto;
  align-items: start;
  gap: calc(var(--u) * 40);
}

.hans[hidden] {
  display: none;
}

.hans__meta {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.hans__meta .acc {
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 2.4);
}

.hans__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.hans__q {
  font-size: max(12px, calc(var(--u) * 36));
  letter-spacing: -.02em;
}

.hans__a {
  max-width: calc(var(--u) * 1300);
  font-size: max(12px, calc(var(--u) * 21));
  line-height: 1.6;
  color: var(--body);
}

.hans__acts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 12);
}

.hans__vt {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  white-space: nowrap;
  color: var(--mute);
}

.hans__votes {
  display: flex;
  gap: calc(var(--u) * 8);
}

.hans__next {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--ink);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
}

.hans__next:hover {
  border-color: var(--acc);
  color: var(--acc);
}

/* == 52. FAQ — 02 questions ============================================ */
.hqa {
  gap: calc(var(--u) * 44);
}

.hqa .shead__r {
  gap: calc(var(--u) * 24);
}

.hring {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.hring__c {
  position: relative;
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 76);
}

.hring__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hring__b,
.hring__a {
  fill: none;
  stroke-width: 3;
}

.hring__b {
  stroke: var(--hair);
}

.hring__a {
  stroke: var(--acc);
  stroke-linecap: round;
  stroke-dasharray: 0 999;
  transition: stroke-dasharray .4s;
}

.hring__v {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 20));
}

.hring__t {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.hring__l {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
}

.hring__s {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
}

.hqa__exp {
  height: calc(var(--u) * 55);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--ink);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  white-space: nowrap;
}

.hqa__exp:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.hqa__exp[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.hqa__grid {
  display: grid;
  grid-template-columns: calc(var(--u) * 600) minmax(0, 1fr);
  align-items: start;
  gap: calc(var(--u) * 80);
}

.hqa__side {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.hrail {
  border-top: .5px solid var(--line2);
}

.hrail__it {
  position: relative;
  width: 100%;
  padding: calc(var(--u) * 20) 0;
  border-bottom: .5px solid var(--line2);
  display: grid;
  grid-template-columns: calc(var(--u) * 64) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 18);
  text-align: left;
  color: var(--ink);
  transition: padding .3s, background .3s;
}

.hrail__it::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--acc);
  transition: width .3s;
}

.hrail__it:hover {
  color: var(--acc);
}

.hrail__it.is-on {
  padding-left: calc(var(--u) * 22);
  background: var(--acc-a04);
  color: var(--acc);
}

.hrail__it.is-on::before {
  width: 3px;
}

.hrail__ico {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  border-radius: 50%;
  border: .5px solid var(--hf-ring);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hrail__it.is-on .hrail__ico {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.hrail__t {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.hrail__name {
  font-size: max(12px, calc(var(--u) * 28));
  letter-spacing: -.015em;
  white-space: nowrap;
}

.hrail__prog {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.hrail__dots {
  display: flex;
  gap: calc(var(--u) * 4);
}

.hrail__dot {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: var(--hf-dim);
}

.hrail__dot.is-read {
  background: var(--acc);
}

.hrail__rt {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  color: var(--mute);
}

.hrail__n {
  padding-right: calc(var(--u) * 6);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 34));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
}

.hrail__it.is-on .hrail__n {
  color: var(--acc-a14);
  -webkit-text-stroke-color: var(--acc);
}

/* the dark "ask a human" card */
.hhuman {
  position: relative;
  padding: calc(var(--u) * 32) calc(var(--u) * 34);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: #111418;
  color: #f2f3f5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.hhuman__ghost {
  position: absolute;
  right: calc(var(--u) * -10);
  bottom: calc(var(--u) * -44);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 240));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc-a40);
  pointer-events: none;
}

.hhuman__top,
.hhuman__t,
.hhuman__s,
.hhuman__go {
  position: relative;
}

.hhuman__top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.hhuman__avs {
  display: flex;
}

.hhuman__avs img {
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  margin-left: calc(var(--u) * -10);
  border-radius: 50%;
  border: 1.5px solid #111418;
  object-fit: cover;
  object-position: 50% 30%;
}

.hhuman__avs img:first-child {
  margin-left: 0;
}

.hhuman__on {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--ok);
}

.hhuman__t {
  font-size: max(12px, calc(var(--u) * 34));
  letter-spacing: -.02em;
  line-height: 1.2;
}

.hhuman__s {
  font-size: max(12px, calc(var(--u) * 16));
  color: #a3a9b3;
}

.hhuman__go {
  align-self: flex-start;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 26);
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 13));
}

.hhuman__go .btn-acc__dot {
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
}

/* the accordion */
.hqa__lh {
  padding-bottom: calc(var(--u) * 22);
  border-bottom: 1px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hqa__lt {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.hqa__li {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hqa__ltt {
  font-size: max(12px, calc(var(--u) * 52));
  letter-spacing: -.03em;
}

.hqa__ls {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.hrow {
  position: relative;
  border-bottom: .5px solid var(--line2);
  transition: background .25s;
}

.hrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--acc);
}

.hrow.is-open {
  background: var(--acc-a04);
}

.hrow.is-open::before {
  width: 3px;
}

.hrow__h {
  margin: 0;
  font: inherit;
}

.hrow__btn {
  width: 100%;
  padding: calc(var(--u) * 30) 0 calc(var(--u) * 30) calc(var(--u) * 24);
  display: grid;
  grid-template-columns: calc(var(--u) * 110) minmax(0, 1fr) auto calc(var(--u) * 60);
  align-items: center;
  gap: calc(var(--u) * 22);
  text-align: left;
  color: var(--ink);
}

.hrow__btn:hover,
.hrow.is-open .hrow__btn {
  color: var(--acc);
}

.hrow__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 44));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--hf-ring);
}

.hrow.is-open .hrow__n {
  color: var(--acc-a14);
  -webkit-text-stroke-color: var(--acc);
}

.hrow__qt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.hrow__q {
  font-size: max(12px, calc(var(--u) * 32));
  letter-spacing: -.02em;
  line-height: 1.2;
}

.hrow__meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--mute);
}

.hrow__topic {
  display: none;
  color: var(--acc);
}

.hrows.is-search .hrow__topic {
  display: inline;
}

.hrow__read {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  white-space: nowrap;
  color: var(--ok);
  opacity: 0;
}

.hrow.is-read:not(.is-open) .hrow__read {
  opacity: 1;
}

.hrow__plus {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: 50%;
  border: .5px solid var(--hf-ring);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 26));
  color: var(--ink);
  transition: transform .3s, background .3s, border-color .3s;
}

.hrow.is-open .hrow__plus {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
  transform: rotate(45deg);
}

.hrow__panel {
  padding: 0 calc(var(--u) * 80) calc(var(--u) * 36) calc(var(--u) * 156);
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 380);
  gap: calc(var(--u) * 44);
}

.hrow__panel[hidden] {
  display: none;
}

.hrow__main {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.hrow__a {
  font-size: max(12px, calc(var(--u) * 23));
  line-height: 1.6;
  color: var(--body);
}

.hrow__facts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.hfact {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--acc-a10);
  color: var(--acc);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.hfact::before {
  content: "";
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: var(--acc);
}

.hrow__acts {
  padding-top: calc(var(--u) * 20);
  border-top: .5px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.hrow__acts .hvote {
  height: calc(var(--u) * 42);
  border-radius: calc(var(--u) * 21);
}

.hrow__vt {
  margin-right: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.hrow__copy {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 21);
  border: .5px solid var(--line2);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
}

.hrow__copy:hover,
.hrow__up:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.hrow__copy.is-done {
  border-color: var(--ok);
  color: var(--ok);
}

.hrow__nav {
  margin-left: auto;
  display: flex;
  gap: calc(var(--u) * 8);
}

.hrow__up {
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  border-radius: 50%;
  border: .5px solid var(--line2);
}

.hrow__down {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 21);
  background: var(--ink);
  color: var(--on-ink);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
}

.hrow__down:hover {
  background: var(--acc);
  color: #fff;
}

.hrow__side {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.hrel {
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 26);
  border: .5px solid var(--acc);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  color: var(--ink);
}

.hrel:hover {
  background: var(--acc-a04);
  color: var(--ink);
}

.hrel__l {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--acc);
}

.hrel__p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 28));
}

.hrel__dot {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hrel__s {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.hchat {
  padding: calc(var(--u) * 18) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--ink);
}

.hqa__none {
  padding: calc(var(--u) * 40) 0;
  font-size: max(12px, calc(var(--u) * 24));
  color: var(--body);
}

.hqa__none[hidden] {
  display: none;
}

.hqa__none a {
  color: var(--acc);
}

/* == 53. FAQ — 03 popular ============================================== */
.hpo {
  gap: calc(var(--u) * 40);
}

.hper {
  padding: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: var(--surf);
  display: flex;
}

.hper__b {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 26);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  white-space: nowrap;
}

.hper__b.is-on {
  background: var(--acc);
  color: #fff;
}

.hpo__grid {
  padding-top: calc(var(--u) * 14);
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  align-items: end;
  gap: calc(var(--u) * 16);
}

.hpc__btn {
  position: relative;
  width: 100%;
  height: calc(var(--u) * 440);
  padding: calc(var(--u) * 32) calc(var(--u) * 34) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 34);
  border: .5px solid var(--line2);
  background: var(--surf);
  color: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
  text-align: left;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s;
}

.hpc__btn:hover {
  border-color: var(--acc);
}

.hpc.is-hot .hpc__btn {
  height: calc(var(--u) * 560);
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.hpc.is-sel .hpc__btn {
  transform: translateY(calc(var(--u) * -12));
  box-shadow: 0 calc(var(--u) * 36) calc(var(--u) * 80) var(--acc-a24);
  border: 1px solid var(--acc);
}

.hpc.is-hot.is-sel .hpc__btn {
  border: 2px solid var(--ink);
}

.hpc__ghost {
  position: absolute;
  right: calc(var(--u) * 14);
  top: calc(var(--u) * 4);
  width: calc(var(--u) * 220);
  height: calc(var(--u) * 160);
  overflow: visible;
  pointer-events: none;
}

.hpc.is-hot .hpc__ghost {
  width: calc(var(--u) * 330);
  height: calc(var(--u) * 240);
}

.hpc__ghost text {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: 220px;
  fill: none;
  stroke: rgba(128, 132, 140, .14);
  stroke-width: 1;
}

.hpc.is-hot .hpc__ghost text {
  fill: rgba(255, 255, 255, .12);
  stroke: rgba(255, 255, 255, .5);
}

.hpc__chips,
.hpc__q,
.hpc__short,
.hpc__facts,
.hpc__help,
.hpc__foot {
  position: relative;
}

.hpc__chips {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.hpc__topic,
.hpc__move {
  height: calc(var(--u) * 32);
  border-radius: calc(var(--u) * 16);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  white-space: nowrap;
}

.hpc__topic {
  padding: 0 calc(var(--u) * 14);
  border: .5px solid var(--line2);
  letter-spacing: .16em;
}

.hpc.is-hot .hpc__topic {
  border-color: rgba(255, 255, 255, .5);
}

.hpc__move {
  padding: 0 calc(var(--u) * 12);
  background: rgba(128, 132, 140, .14);
  color: var(--mute);
  letter-spacing: .12em;
}

.hpc__move.is-up {
  background: rgba(47, 163, 107, .16);
  color: var(--ok);
}

.hpc__move.is-down {
  background: var(--acc-a14);
  color: var(--acc);
}

.hpc.is-hot .hpc__move {
  color: #fff;
}

.hpc__q {
  max-width: calc(var(--u) * 820);
  margin-top: auto;
  font-size: max(12px, calc(var(--u) * 36));
  letter-spacing: -.03em;
  line-height: 1.08;
}

.hpc.is-hot .hpc__q {
  font-size: max(12px, calc(var(--u) * 60));
}

.hpc__short {
  font-size: max(12px, calc(var(--u) * 17));
  line-height: 1.5;
  color: var(--body);
}

.hpc.is-hot .hpc__short {
  max-width: calc(var(--u) * 760);
  font-size: max(12px, calc(var(--u) * 21));
  color: #fff;
  opacity: .92;
}

.hpc__facts {
  display: none;
  gap: calc(var(--u) * 8);
}

.hpc.is-hot .hpc__facts {
  display: flex;
}

.hpc__fact {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 19);
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.hpc__fact::before {
  content: "";
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: #fff;
}

.hpc__help {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.hpc__hl {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  opacity: .8;
}

.hpc__bar {
  display: block;
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: var(--hair);
  overflow: hidden;
}

.hpc.is-hot .hpc__bar {
  background: rgba(255, 255, 255, .3);
}

.hpc__bf {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ok);
}

.hpc.is-hot .hpc__bf {
  background: #fff;
}

.hpc__foot {
  padding-top: calc(var(--u) * 18);
  border-top: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--u) * 16);
}

.hpc.is-hot .hpc__foot {
  border-top-color: rgba(255, 255, 255, .5);
}

.hpc__stat {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 16);
}

.hpc__views {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.hpc__vn {
  font-size: max(12px, calc(var(--u) * 30));
  line-height: 1;
}

.hpc__vl {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  opacity: .75;
}

.hpc__spark {
  display: block;
  width: calc(var(--u) * 130);
  height: calc(var(--u) * 40);
  overflow: visible;
}

.hpc__area {
  fill: var(--acc-a12);
  stroke: none;
}

.hpc.is-hot .hpc__area {
  fill: rgba(255, 255, 255, .18);
}

.hpc__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hpc__pt {
  fill: currentColor;
}

.hpc__cta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
}

.hpc__ar {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s;
}

.hpc.is-hot .hpc__ar {
  background: #fff;
  color: var(--acc);
}

.hpc.is-sel .hpc__ar {
  transform: rotate(90deg);
}

.hpc.is-sel:not(.is-hot) .hpc__ar {
  background: var(--acc);
  color: #fff;
}

.hpo__strip {
  padding: calc(var(--u) * 22) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--acc);
  background: var(--surf);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 26);
}

.hpo__sl {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  white-space: nowrap;
  color: var(--acc);
}

.hpo__sd {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 calc(var(--u) * 5) var(--acc-a18);
}

.hpo__st {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.hpo__sq {
  font-size: max(12px, calc(var(--u) * 22));
}

.hpo__ss {
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 16));
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--body);
}

.hpo__stp {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  white-space: nowrap;
  color: var(--mute);
}

/* == 54. FAQ — 04 contact band ========================================= */
.hct__band {
  position: relative;
  border-radius: calc(var(--u) * 44);
  border: .5px solid transparent;
  background: var(--hf-band);
  color: #f2f3f5;
  overflow: hidden;
}

.hct__ghost {
  position: absolute;
  left: calc(var(--u) * 20);
  bottom: calc(var(--u) * -120);
  width: calc(var(--u) * 1700);
  height: calc(var(--u) * 620);
  overflow: visible;
  pointer-events: none;
}

.hct__ghost text {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: 620px;
  fill: none;
  stroke: var(--acc-a30);
  stroke-width: 1;
}

.hct__bar,
.hct__grid,
.hct__foot {
  position: relative;
}

.hct__bar {
  padding: calc(var(--u) * 28) calc(var(--u) * 56);
  border-bottom: .5px solid rgba(242, 243, 245, .12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  color: #7d838d;
}

.hct__eb .acc {
  margin-right: calc(var(--u) * 18);
}

.hct__now {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 26);
}

.hct__time {
  margin-left: calc(var(--u) * 8);
  color: #f2f3f5;
}

.hct__day {
  position: relative;
  width: calc(var(--u) * 320);
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
  background: rgba(242, 243, 245, .1);
}

.hct__open {
  position: absolute;
  left: 33.3333%;
  width: 58.3333%;
  top: 0;
  bottom: 0;
  border-radius: calc(var(--u) * 3);
  background: rgba(47, 163, 107, .55);
}

.hct__mark {
  position: absolute;
  left: 58%;
  top: calc(var(--u) * -6);
  width: 2px;
  height: calc(var(--u) * 18);
  background: var(--acc);
}

.hct__st {
  color: var(--ok);
}

.hct__st.is-closed {
  color: #7d838d;
}

.hct__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
}

.hct__intro {
  padding: calc(var(--u) * 52) calc(var(--u) * 56);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
}

.hct__h2 {
  font-size: max(12px, calc(var(--u) * 96));
  letter-spacing: -.05em;
  line-height: .98;
}

.hct__lead {
  max-width: calc(var(--u) * 600);
  font-size: max(12px, calc(var(--u) * 21));
  line-height: 1.5;
  color: #a3a9b3;
}

.hct__team {
  margin-top: calc(var(--u) * 6);
  border-top: .5px solid rgba(242, 243, 245, .14);
}

.hag {
  width: 100%;
  padding: calc(var(--u) * 14) 0;
  border-bottom: .5px solid rgba(242, 243, 245, .14);
  display: grid;
  grid-template-columns: calc(var(--u) * 56) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 16);
  text-align: left;
  color: #f2f3f5;
}

.hag:hover,
.hag.is-on {
  color: var(--acc);
}

.hag__av {
  position: relative;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
}

.hag__av img {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  border: 2px solid transparent;
  object-fit: cover;
  object-position: 50% 30%;
}

.hag.is-on .hag__av img {
  border-color: var(--acc);
}

.hag__dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  border-radius: 50%;
  border: 2px solid var(--hf-band);
  background: var(--ok);
}

.hag__dot.is-off {
  background: #7d838d;
}

.hag__t {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.hag__n {
  font-size: max(12px, calc(var(--u) * 20));
}

.hag__r {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  color: #7d838d;
}

.hag__s {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
  color: var(--ok);
}

.hag__s.is-off {
  color: #7d838d;
}

.hch {
  position: relative;
  padding: calc(var(--u) * 52) calc(var(--u) * 44);
  border-left: .5px solid rgba(242, 243, 245, .12);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  transition: background .3s;
}

.hch::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  background: var(--acc);
  transition: height .3s;
}

.hch.is-on {
  background: var(--acc-a10);
}

.hch.is-on::before {
  height: 3px;
}

.hch__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hch__hit:focus-visible {
  outline-offset: -4px;
}

.hch__top,
.hch__name,
.hch__main,
.hch__reply,
.hch__rows {
  position: relative;
}

.hch__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hch__ico {
  width: calc(var(--u) * 78);
  height: calc(var(--u) * 78);
  border-radius: 50%;
  border: .5px solid rgba(242, 243, 245, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f2f3f5;
}

.hch.is-on .hch__ico {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
  animation: hch-pulse 2.4s ease-out infinite;
}

@keyframes hch-pulse {
  0% { box-shadow: 0 0 0 0 var(--acc-a24), 0 0 0 0 var(--acc-a08); }
  70% { box-shadow: 0 0 0 calc(var(--u) * 10) var(--acc-a18), 0 0 0 calc(var(--u) * 22) var(--acc-a07); }
  100% { box-shadow: 0 0 0 calc(var(--u) * 14) transparent, 0 0 0 calc(var(--u) * 28) transparent; }
}

.hch__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 44));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 243, 245, .3);
}

.hch.is-on .hch__n {
  -webkit-text-stroke-color: var(--acc);
}

.hch__name {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.88);
  color: #7d838d;
}

.hch__main {
  font-size: max(12px, calc(var(--u) * 34));
  letter-spacing: -.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.hch__main--lg {
  font-size: max(12px, calc(var(--u) * 40));
}

.hch__reply {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.hch__rl {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: #7d838d;
}

.hch__rs {
  color: #a3a9b3;
}

.hch__rs.is-ok {
  color: var(--ok);
}

.hch__bar {
  display: block;
  height: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 3);
  background: rgba(242, 243, 245, .1);
  overflow: hidden;
}

.hch__bf {
  display: block;
  width: 0;
  height: 100%;
  background: #a3a9b3;
}

.hch__bf.is-ok {
  background: var(--ok);
}

.hch__rows {
  border-top: .5px solid rgba(242, 243, 245, .12);
}

.hch__rows li {
  padding: calc(var(--u) * 12) 0;
  border-bottom: .5px solid rgba(242, 243, 245, .12);
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  color: #7d838d;
}

.hch__rv {
  color: #f2f3f5;
}

.hch__cta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  height: calc(var(--u) * 62);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 28);
  border-radius: calc(var(--u) * 31);
  border: .5px solid rgba(242, 243, 245, .4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  color: #f2f3f5;
  transition: background .25s, border-color .25s;
}

.hch__cta:hover {
  border-color: var(--acc);
  color: #f2f3f5;
}

.hch__dot {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hch.is-on .hch__cta {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.hch.is-on .hch__dot {
  background: #fff;
  color: var(--acc);
}

.hct__foot {
  padding: calc(var(--u) * 24) calc(var(--u) * 56);
  border-top: .5px solid rgba(242, 243, 245, .12);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 30);
}

.hct__info {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 28);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  white-space: nowrap;
  color: #7d838d;
}

.hct__v {
  color: #f2f3f5;
}

.hcb {
  width: calc(var(--u) * 620);
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  border: .5px solid rgba(242, 243, 245, .18);
  background: rgba(242, 243, 245, .06);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.hcb:focus-within {
  border-color: var(--acc);
}

.hcb__l {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  white-space: nowrap;
  color: #7d838d;
}

.hcb__l.is-err { color: var(--acc); }
.hcb__l.is-ok { color: var(--ok); }

.hcb__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 56);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  color: #f2f3f5;
}

.hcb__in::placeholder {
  color: #7d838d;
}

.hcb__go {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
}

.hcb__go:hover {
  background: var(--acc-d);
}

.hcb__go.is-done {
  background: var(--ok);
}

/* == 55. FAQ — 05 guides =============================================== */
.hgd {
  gap: calc(var(--u) * 20);
}

.hgd__grid {
  border-top: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: grid;
  grid-template-columns: calc(var(--u) * 560) minmax(0, 1fr);
}

.hgd__intro {
  padding: calc(var(--u) * 36) calc(var(--u) * 44) calc(var(--u) * 36) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.hgd__eb {
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 13));
  letter-spacing: calc(var(--u) * 3.38);
  white-space: nowrap;
}

.hgd__eb .eyebrow__rule {
  width: calc(var(--u) * 40);
}

.hgd__h2 {
  font-size: max(12px, calc(var(--u) * 68));
  letter-spacing: -.045em;
  line-height: 1;
}

.hgd__filters {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.hgf {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 19);
  border: .5px solid var(--line);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
}

.hgf:hover {
  border-color: var(--acc);
}

.hgf.is-on {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.hgf__n {
  opacity: .6;
}

.hgd__all {
  margin-top: auto;
  align-self: flex-start;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 28);
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
}

.hgd__all:hover {
  background: var(--acc);
  color: #fff;
}

.hgd__alld,
.hgc__dot {
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hgd__alld {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
}

/* the guide cells set the row height (the intro stretches to it) */
.hgd__cells {
  align-self: start;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hgc {
  position: relative;
  padding: calc(var(--u) * 32) calc(var(--u) * 34);
  border-left: .5px solid var(--line2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
  transition: background .2s;
}

.hgc[hidden] {
  display: none;
}

.hgc:hover,
.hgc.is-first {
  background: var(--acc-a04);
}

.hgc__ghost {
  position: absolute;
  right: calc(var(--u) * -12);
  bottom: calc(var(--u) * -40);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 200));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(128, 132, 140, .12);
  pointer-events: none;
}

.hgc.is-first .hgc__ghost {
  -webkit-text-stroke-color: var(--acc-a30);
}

.hgc__head,
.hgc__foot {
  position: relative;
}

.hgc__head {
  display: grid;
  grid-template-columns: calc(var(--u) * 260) minmax(0, 1fr);
  align-items: start;
  gap: calc(var(--u) * 24);
}

.hgc__cover {
  position: relative;
  height: calc(var(--u) * 200);
  border-radius: calc(var(--u) * 22);
  background: repeating-linear-gradient(135deg, var(--s1) 0 calc(var(--u) * 10), var(--s2) calc(var(--u) * 10) calc(var(--u) * 20));
  display: flex;
  align-items: center;
  justify-content: center;
}

.hgc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: block;
  object-fit: cover;
}

.hgc__tag {
  position: absolute;
  left: calc(var(--u) * 12);
  top: calc(var(--u) * 12);
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: rgba(255, 255, 255, .92);
  color: #111418;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  white-space: nowrap;
}

.hgc.is-first .hgc__tag {
  background: var(--acc);
  color: #fff;
}

.hgc__ring {
  position: absolute;
  right: calc(var(--u) * 10);
  bottom: calc(var(--u) * 10);
  width: calc(var(--u) * 58);
  height: calc(var(--u) * 58);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
}

.hgc__ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hgc__rb,
.hgc__ra {
  fill: none;
  stroke-width: 2.5;
}

.hgc__rb {
  stroke: rgba(17, 20, 24, .1);
}

.hgc__ra {
  stroke: var(--acc);
  stroke-linecap: round;
  stroke-dasharray: 0 999;
}

.hgc__rv {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #111418;
}

.hgc__rn {
  font-size: max(12px, calc(var(--u) * 17));
}

.hgc__ru {
  font-size: max(12px, calc(var(--u) * 7));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 0.84);
  color: #8a9099;
}

.hgc__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.hgc__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hgc__date {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--mute);
}

.hgc__date .acc {
  margin-right: calc(var(--u) * 10);
}

.hgc__save {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  border: .5px solid var(--line);
  font-size: max(12px, calc(var(--u) * 16));
}

.hgc__save:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.hgc__h2,
.hgc__save[aria-pressed="true"] .hgc__h1 {
  display: none;
}

.hgc__save[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.hgc__save[aria-pressed="true"] .hgc__h2 {
  display: inline;
}

.hgc__t {
  font-size: max(12px, calc(var(--u) * 28));
  letter-spacing: -.02em;
  line-height: 1.225;
}

.hgc__ex {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.5;
  color: var(--body);
}

.hgc__foot {
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.hgc__prog {
  display: block;
  height: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 2);
  background: var(--hair);
  overflow: hidden;
}

.hgc__pf {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--acc);
}

.hgc__fr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hgc__a {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 13));
}

.hgc__av {
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
  border: .5px solid var(--line2);
}

.hgc__cta {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--hf-ring);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.32);
  white-space: nowrap;
  color: var(--ink);
}

.hgc__cta:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.hgc__dot {
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
}

.hgc__cta.is-started {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.hgc__cta.is-started .hgc__dot {
  background: #fff;
  color: var(--acc);
}

.hgd__base {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  color: var(--mute);
}

.hgd__ruler .ruler__min {
  stroke: var(--mute);
}

.hgd__note {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
}

@media (prefers-reduced-motion: reduce) {
  .hch.is-on .hch__ico {
    animation: none;
    box-shadow: 0 0 0 calc(var(--u) * 10) var(--acc-a18), 0 0 0 calc(var(--u) * 22) var(--acc-a07);
  }
}

/* == 56. FAQ — tablet and phone ======================================== */
@media (max-width: 1199px) {
  .hsr__status {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hsr__meta {
    flex-wrap: wrap;
    gap: 8px 20px;
  }

  .hsr__h2 {
    font-size: 72px;
  }

  .hsr__field {
    height: 72px;
    gap: 14px;
  }

  .hsr__in {
    height: 66px;
    font-size: 22px;
  }

  .hsr__kbd {
    display: none;
  }

  .hsr__go {
    width: 52px;
    height: 52px;
  }

  .hsr__drop {
    top: 84px;
    grid-template-columns: minmax(0, 1fr);
  }

  .hsr__res {
    border-right: 0;
    border-bottom: .5px solid var(--hair);
  }

  .hsr__rb {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 12px 18px;
  }

  .hsr__rt {
    grid-column: 2;
    text-align: left;
  }

  .htiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .htile {
    height: 300px;
  }

  .htile.is-on {
    grid-column: 1 / -1;
    height: auto;
    min-height: 300px;
  }

  .htile__name {
    font-size: 24px;
  }

  .hans {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 24px;
  }

  .hans__meta {
    flex-direction: row;
    gap: 16px;
  }

  .hans__q {
    font-size: 26px;
  }

  .hans__acts {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .hqa__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .hrail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }

  .hrail__name {
    font-size: 18px;
    white-space: normal;
  }

  .hhuman {
    display: none;
  }

  .hqa__ltt {
    font-size: 30px;
  }

  .hrow__btn {
    grid-template-columns: 64px minmax(0, 1fr) 44px;
    gap: 14px;
    padding: 20px 0 20px 12px;
  }

  .hrow__read {
    display: none;
  }

  .hrow__plus {
    width: 44px;
    height: 44px;
  }

  .hrow__q {
    font-size: 20px;
  }

  .hrow__n {
    font-size: 30px;
  }

  .hrow__panel {
    padding: 0 12px 24px 12px;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .hrow__a {
    font-size: 17px;
  }

  .hpo__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .hpc.is-hot {
    grid-column: 1 / -1;
  }

  .hpc__btn,
  .hpc.is-hot .hpc__btn {
    height: auto;
    min-height: 320px;
  }

  .hpc.is-hot .hpc__q {
    font-size: 36px;
  }

  .hpc.is-sel .hpc__btn {
    transform: none;
  }

  .hpo__strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .hct__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px;
  }

  .hct__now {
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  .hct__day {
    width: 200px;
  }

  .hct__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hct__intro {
    grid-column: 1 / -1;
    padding: 32px 24px 12px;
  }

  .hct__h2 {
    font-size: 52px;
  }

  .hch {
    padding: 28px 22px;
    border-top: .5px solid rgba(242, 243, 245, .12);
  }

  .hch:nth-child(2) {
    border-left: 0;
  }

  .hch__main,
  .hch__main--lg {
    font-size: 22px;
    white-space: normal;
  }

  .hct__foot {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 24px;
  }

  .hct__info {
    flex-wrap: wrap;
    gap: 6px 14px;
    white-space: normal;
  }

  .hcb {
    width: 100%;
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    padding: 6px 6px 6px 18px;
  }

  .hgd__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hgd__intro {
    padding: 28px 0;
  }

  .hgd__cells {
    grid-template-columns: minmax(0, 1fr);
  }

  .hgc {
    border-left: 0;
    border-top: .5px solid var(--line2);
    padding: 24px 0;
  }

  .hgc:hover,
  .hgc.is-first {
    background: none;
  }

  .hgd__note {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 767px) {
  .hsr__h2 {
    font-size: 46px;
  }

  .hsr__in {
    font-size: 17px;
  }

  .htiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .htile {
    height: 220px;
    padding: 18px;
  }

  .htile__ico {
    width: 48px;
    height: 48px;
  }

  .htile__sample {
    display: none;
  }

  .hrail {
    grid-template-columns: minmax(0, 1fr);
  }

  .hring__t {
    display: none;
  }

  .hrow__btn {
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    gap: 10px;
  }

  .hrow__n {
    font-size: 22px;
  }

  .hrow__plus {
    width: 40px;
    height: 40px;
  }

  .hrow__nav {
    margin-left: 0;
  }

  .hpo__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hper__b {
    padding: 0 14px;
  }

  .hct__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hch {
    border-left: 0;
  }

  .hct__ghost {
    width: 900px;
    height: 330px;
    bottom: -60px;
  }

  .hcb__l {
    flex-basis: 100%;
    padding-top: 6px;
  }

  .hgc__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .hgc__cover {
    height: 180px;
  }

  .hgd__h2 {
    font-size: 44px;
  }
}

/* == 57. Contact — shared ============================================== */
:root {
  --cn-soft: rgba(17, 20, 24, .3);
  --cn-hair: rgba(17, 20, 24, .1);
  --cn-panel: #111418;
  --cn-ghost: rgba(17, 20, 24, .08);
  --cn-glass: rgba(255, 255, 255, .92);
  --cn-field: rgba(128, 132, 140, .4);
  --cn-box: rgba(128, 132, 140, .5);
}

[data-theme="dark"] {
  --cn-soft: rgba(242, 243, 245, .3);
  --cn-hair: rgba(242, 243, 245, .1);
  --cn-panel: #1a1d22;
  --cn-ghost: rgba(242, 243, 245, .08);
  --cn-glass: rgba(20, 22, 27, .9);
}

.cn-open {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--ok);
  white-space: nowrap;
}

.cn-open.is-closed {
  color: var(--mute);
}

.cn-open.is-closed .dot {
  background: var(--mute);
  box-shadow: none;
}

[data-theme="dark"] .cnc__field,
[data-theme="dark"] .cnf__ta {
  background: var(--surf2);
}

/* ghost figures: outlined BBH Bartle behind the content */
.cnc__ghost text,
.cnn__ghost text,
.cnd__ghost text {
  font-weight: 400;
  font-family: "BBH Bartle", Geist, sans-serif;
  fill: none;
  stroke-width: 1;
}

/* == 58. Contact — 01 ways to reach us ================================= */
.cnw {
  gap: calc(var(--u) * 40);
}

.cnw .shead {
  gap: calc(var(--u) * 40);
}

.cnw .shead__r {
  gap: calc(var(--u) * 24);
}

.cnw .cn-open {
  letter-spacing: .2em;
}

.cnw__now {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
  color: var(--mute);
  white-space: nowrap;
}

.cnw__time {
  margin-left: calc(var(--u) * 8);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 24 hours: the open window in green, the accent tick is now */
.cnw__day {
  position: relative;
  width: calc(var(--u) * 320);
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
  background: var(--cn-hair);
}

.cnw__open {
  position: absolute;
  left: 33.3%;
  width: 58.3%;
  top: 0;
  bottom: 0;
  border-radius: calc(var(--u) * 3);
  background: rgba(47, 163, 107, .5);
}

.cnw__mark {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -6);
  width: 2px;
  height: calc(var(--u) * 18);
  background: var(--acc);
}

.cnw .dot--8 {
  box-shadow: 0 0 0 calc(var(--u) * 5) rgba(47, 163, 107, .16);
}

.cnw__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.25fr;
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 36);
  overflow: hidden;
  background: var(--surf);
}

.cnc {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: calc(var(--u) * 40) calc(var(--u) * 38);
  border-left: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.cnc--chat {
  padding: calc(var(--u) * 40);
  border-left: 0;
  background: var(--acc);
  color: #fff;
  gap: calc(var(--u) * 18);
  overflow: hidden;
}

.cnc__ghost {
  position: absolute;
  right: calc(var(--u) * -30);
  bottom: calc(var(--u) * -70);
  width: calc(var(--u) * 520);
  height: calc(var(--u) * 300);
  overflow: visible;
  pointer-events: none;
}

.cnc__ghost text {
  font-size: 300px;
  stroke: rgba(255, 255, 255, .35);
}

.cnc__top,
.cnc__agents,
.cnc__big,
.cnc__chat {
  position: relative;
}

.cnc__top {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  opacity: .9;
}

.cnc__agents {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.1);
}

.cnc__avs {
  display: flex;
}

.cnc__avs img {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border-radius: 50%;
  border: 2px solid var(--acc);
  object-fit: cover;
  background: rgba(255, 255, 255, .4);
}

.cnc__avs img + img {
  margin-left: calc(var(--u) * -12);
}

.cnc__big {
  font-size: max(12px, calc(var(--u) * 48));
  letter-spacing: -.03em;
  line-height: 1.05;
}

.cnc__chat {
  margin-top: auto;
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 30);
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
}

.cnc__chat:hover {
  background: #111418;
  color: #fff;
}

.cnc__cdot,
.cnc__gdot {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cnc__lbl {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  color: var(--mute);
}

.cnc__main {
  margin-top: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 36));
  letter-spacing: -.02em;
  white-space: nowrap;
}

.cnc__main a:hover {
  color: var(--acc);
}

.cnc__main--wrap {
  white-space: normal;
  line-height: 1.15;
}

.cnc__sub {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  color: var(--mute);
}

.cnc__st {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  color: var(--ok);
}

.cnc__sd {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.cnc__st--mute,
.cnc__st.is-closed {
  color: var(--body);
}

.cnc__st--mute .cnc__sd,
.cnc__st.is-closed .cnc__sd {
  background: var(--mute);
}

.cnc__go {
  margin-top: auto;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
}

.cnc__go:hover {
  color: var(--acc);
}

.cnc__gdot {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
}

/* call me back: a field with its own button, three states */
.cnc--cb {
  background: var(--acc-a04);
}

.cnc__field {
  margin-top: auto;
  height: calc(var(--u) * 70);
  padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 35);
  border: .5px solid var(--cn-field);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.cnc__field:focus-within {
  border-color: var(--ink);
}

.cnc__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 60);
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 22));
  color: var(--ink);
}

.cnc__in::placeholder,
.cnf__in::placeholder,
.cnf__ta::placeholder {
  color: var(--mute);
}

.cnc__cbgo {
  height: calc(var(--u) * 58);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 29);
  border: 0;
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
  cursor: pointer;
}

.cnc__cbgo:hover {
  background: var(--acc-d);
}

.cnc__note {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

.cnc--cb.is-err .cnc__field { border-color: var(--acc); }
.cnc--cb.is-err .cnc__note { color: var(--acc); }
.cnc--cb.is-ok .cnc__field { border-color: var(--ok); }
.cnc--cb.is-ok .cnc__cbgo { background: var(--ok); }
.cnc--cb.is-ok .cnc__note { color: var(--ok); }

/* == 59. Contact — 02 message ========================================== */
.cnm__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: calc(var(--u) * 18);
  align-items: stretch;
}

.cnf {
  min-width: 0;
  padding: calc(var(--u) * 44) calc(var(--u) * 48);
  border-radius: calc(var(--u) * 36);
  border: .5px solid var(--line2);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.cnf__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--u) * 30);
}

.cnf__hl {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.cnf .h2 {
  font-size: max(12px, calc(var(--u) * 80));
}

.cnf__reply {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
  white-space: nowrap;
}

.cnf__form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 28);
}

.cnf__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 30);
}

.cnf__f {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.cnf__f:has(.cnf__ta) {
  gap: calc(var(--u) * 8);
}

.cnf__lbl {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 11));
  line-height: calc(var(--u) * 14);
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  color: var(--mute);
}

.cnf__lbl .acc {
  margin-right: calc(var(--u) * 8);
}

.cnf__err {
  color: var(--acc);
}

.cnf__in {
  width: 100%;
  height: calc(var(--u) * 64);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--cn-soft);
  border-radius: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 24));
  color: var(--ink);
}

.cnf__in:focus {
  border-bottom-color: var(--ink);
}

.cnf__in.is-bad,
.cnf__ta.is-bad {
  border-color: var(--acc);
}

.cnf__topics {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.cnf__topics legend {
  float: left;
  width: 100%;
  padding: 0;
}

.cnf__chips {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.cnf__topic {
  position: relative;
  display: flex;
}

.cnf__radio {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cnf__topic span {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--line);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
}

.cnf__topic:hover span {
  border-color: var(--ink);
}

.cnf__radio:checked + span {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.cnf__radio:focus-visible + span {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.cnf__cnt {
  color: var(--mute);
  white-space: nowrap;
}

.cnf__cnt.is-bad {
  color: var(--acc);
}

.cnf__ta {
  width: 100%;
  min-height: calc(var(--u) * 150);
  padding: calc(var(--u) * 18) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--cn-soft);
  outline: 0;
  background: var(--surf);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 22));
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
}

.cnf__ta:focus {
  border-color: var(--ink);
}

.cnf__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.cnf__agree {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
  cursor: pointer;
}

.cnf__cb {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  margin: 0;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
}

.cnf__box {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 7);
  border: 1px solid var(--cn-box);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cnf__box .ico {
  opacity: 0;
}

.cnf__cb:checked + .cnf__box {
  border-color: var(--acc);
  background: var(--acc);
}

.cnf__cb:checked + .cnf__box .ico {
  opacity: 1;
}

.cnf__cb:focus-visible + .cnf__box {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.cnf__send {
  height: calc(var(--u) * 66);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 34);
  border-radius: calc(var(--u) * 33);
  border: 0;
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
  cursor: pointer;
}

.cnf__send:hover {
  background: var(--acc-d);
}

.cnf__sdot {
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 50);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* sent: the form gives way to the receipt */
.cnf__done {
  flex: 1;
  padding: calc(var(--u) * 40) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(var(--u) * 22);
  outline: 0;
}

.cnf__done[hidden] {
  display: none;
}

.cnf__ok {
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 96);
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cnf__ok .ico {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
}

.cnf__thanks {
  font-size: max(12px, calc(var(--u) * 56));
  letter-spacing: -.035em;
}

.cnf__dl {
  max-width: calc(var(--u) * 900);
  font-size: max(12px, calc(var(--u) * 24));
  line-height: 1.5;
  color: var(--body);
  overflow-wrap: anywhere;
}

.cnf__strong {
  color: var(--ink);
}

.cnf__ref {
  color: var(--acc);
  font-family: ui-monospace, Menlo, monospace;
}

.cnf__again {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  cursor: pointer;
}

.cnf__again:hover {
  color: var(--acc);
}

/* dark panel: what happens next */
.cnn {
  position: relative;
  min-width: 0;
  padding: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 36);
  border: .5px solid var(--line2);
  background: var(--cn-panel);
  color: #f2f3f5;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
  overflow: hidden;
}

.cnn__ghost {
  position: absolute;
  right: calc(var(--u) * -40);
  bottom: calc(var(--u) * -80);
  width: calc(var(--u) * 520);
  height: calc(var(--u) * 420);
  overflow: visible;
  pointer-events: none;
}

.cnn__ghost text {
  font-size: 440px;
  stroke: var(--acc-a35);
}

.cnn__l,
.cnn__steps,
.cnn__stats {
  position: relative;
}

.cnn__l {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.88);
  color: #7d838d;
}

.cnn__steps {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.cnn__step {
  display: grid;
  grid-template-columns: calc(var(--u) * 130) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
  padding-bottom: calc(var(--u) * 22);
  border-bottom: .5px solid rgba(242, 243, 245, .12);
}

.cnn__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  font-size: max(12px, calc(var(--u) * 44));
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
}

.cnn__n.is-on {
  color: var(--acc);
}

.cnn__t {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.cnn__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.cnn__name {
  font-size: max(12px, calc(var(--u) * 28));
}

.cnn__when {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  color: var(--acc);
  white-space: nowrap;
}

.cnn__d {
  font-size: max(12px, calc(var(--u) * 17));
  line-height: 1.5;
  color: #a3a9b3;
}

.cnn__stats {
  margin-top: auto;
  display: flex;
  gap: calc(var(--u) * 30);
}

.cnn__s {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.cnn__sv {
  font-size: max(12px, calc(var(--u) * 40));
}

.cnn__sl {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  color: #7d838d;
}

/* == 60. Contact — 03 visit ============================================ */
.cnv {
  gap: calc(var(--u) * 40);
}

.cnv__card {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 36);
  overflow: hidden;
  background: var(--surf);
}

.cnv__map {
  position: relative;
  min-width: 0;
  min-height: calc(var(--u) * 680);
  background: var(--stripes);
  overflow: hidden;
}

.cnv__slot {
  position: absolute;
  left: calc(var(--u) * 24);
  top: calc(var(--u) * 24);
  padding: 8px 12px;
  border-radius: 10px;
  border: .5px solid var(--line2);
  background: var(--cn-glass);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--mute);
}

.cnv__size {
  color: var(--ink);
}

.cnv__pin {
  position: absolute;
  left: 52%;
  top: 48%;
}

.cnv__live {
  position: absolute;
  inset: 0;
  font-family: Geist, sans-serif;
}

.cnv__map.is-live .cnv__slot,
.cnv__map.is-live .cnv__pin {
  display: none;
}

.cnv__map.is-live .cnv__live {
  background: var(--ab-map2, #f3f4f6);
}

/* the labelled pin (same markup drawn and on the live map); the bottom of the dot marks the spot */
.lpin {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lpin__tag {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  white-space: nowrap;
}

.lpin__st {
  color: var(--acc);
}

.lpin__stem {
  width: 1px;
  height: calc(var(--u) * 28);
  background: var(--ink);
}

.lpin__dot {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 calc(var(--u) * 12) var(--acc-a20), 0 0 0 calc(var(--u) * 28) var(--acc-a08);
}

.lpin-wrap {
  position: relative;
}

.cnv__chips {
  position: absolute;
  left: calc(var(--u) * 24);
  right: calc(var(--u) * 24);
  bottom: calc(var(--u) * 24);
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
  pointer-events: none;
}

.cnv__chips li {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  border: .5px solid var(--line2);
  background: var(--cn-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
}

/* the chips sit over the bottom of the map: lift the attribution above them */
.cnv__live .leaflet-bottom {
  bottom: calc(var(--u) * 70);
}

.cnv__info {
  min-width: 0;
  padding: calc(var(--u) * 44) calc(var(--u) * 48);
  border-left: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 28);
}

.cnv__blk {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.cnv__blk + .cnv__blk {
  gap: calc(var(--u) * 6);
}

.cnv__lbl {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  color: var(--mute);
}

.cnv__blk + .cnv__blk .cnv__lbl {
  margin-bottom: calc(var(--u) * 6);
}

.cnv__lbl .acc {
  margin-right: calc(var(--u) * 10);
}

.cnv__addr {
  font-style: normal;
  font-size: max(12px, calc(var(--u) * 44));
  letter-spacing: -.025em;
  line-height: 1.15;
}

.cnv__hours {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.cnv__h {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 10) 0;
  border-bottom: .5px solid var(--cn-hair);
  font-size: max(12px, calc(var(--u) * 18));
}

.cnv__d {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.cnv__hd {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  flex-shrink: 0;
}

.cnv__today {
  display: none;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
}

.cnv__h.is-today {
  color: var(--acc);
}

.cnv__h.is-today .cnv__today {
  display: inline;
}

.cnv__h.is-today .cnv__hd {
  background: var(--acc);
}

.cnv__h.is-today.is-open .cnv__hd {
  background: var(--ok);
}

.cnv__acts {
  margin-top: auto;
  display: flex;
  gap: calc(var(--u) * 10);
}

.cnv__dir {
  flex: 1;
  padding-left: calc(var(--u) * 26);
  font-size: max(12px, calc(var(--u) * 13));
  letter-spacing: calc(var(--u) * 1.56);
  justify-content: space-between;
}

.cnv__book {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 30);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
}

.cnv__book:hover {
  color: var(--acc);
}

/* == 61. Contact — 04 departments ====================================== */
.cnds {
  gap: calc(var(--u) * 40);
}

.cnds__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: .5px solid var(--line2);
  border-left: .5px solid var(--line2);
}

.cnd {
  position: relative;
  min-width: 0;
  padding: calc(var(--u) * 34) calc(var(--u) * 36);
  border-right: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
  overflow: hidden;
}

.cnd:hover {
  background: var(--acc-a04);
}

.cnd__ghost {
  position: absolute;
  right: calc(var(--u) * -10);
  top: calc(var(--u) * -10);
  width: calc(var(--u) * 300);
  height: calc(var(--u) * 190);
  overflow: visible;
  pointer-events: none;
}

.cnd__ghost text {
  font-size: 190px;
  stroke: var(--cn-ghost);
}

.cnd.is-first .cnd__ghost text {
  stroke: var(--acc-a30);
}

.cnd__ico,
.cnd__t,
.cnd__who,
.cnd__lines,
.cnd__foot {
  position: relative;
}

.cnd__ico {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border-radius: 50%;
  border: .5px solid var(--cn-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cnd.is-first .cnd__ico {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.cnd__t {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.cnd__name {
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.02em;
}

.cnd__for {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.cnd__who {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 14) 0;
  border-top: .5px solid var(--cn-hair);
  border-bottom: .5px solid var(--cn-hair);
}

.cnd__av {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  border: .5px solid var(--line2);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--stripes);
}

.cnd__pw {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.cnd__p {
  font-size: max(12px, calc(var(--u) * 18));
}

.cnd__r {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  color: var(--mute);
}

.cnd__lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 18));
}

.cnd__tel {
  color: var(--body);
}

.cnd__lines a:hover {
  color: var(--acc);
}

.cnd__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--mute);
}

.cnd__msg {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.32);
  white-space: nowrap;
  cursor: pointer;
}

.cnd__msg:hover {
  border-color: var(--acc);
  color: var(--acc);
}

/* == 62. Contact — tablet and phone ==================================== */
@media (max-width: 1199px) {
  .cnw .shead,
  .cnv .shead {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .cnw .shead__r {
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  .cnw__day {
    width: 200px;
  }

  .cnw__card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 28px;
  }

  .cnc {
    padding: 32px 30px;
    gap: 14px;
  }

  .cnc:nth-child(3) {
    border-left: 0;
  }

  .cnc:nth-child(n + 3) {
    border-top: .5px solid var(--line);
  }

  .cnc__main {
    margin-top: 10px;
    font-size: 30px;
  }

  .cnc__big {
    font-size: 40px;
  }

  .cnc__ghost {
    width: 400px;
    height: 230px;
  }

  .cnc__ghost text {
    font-size: 230px;
  }

  .cnm__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cnf,
  .cnn {
    padding: 36px 32px;
    border-radius: 28px;
  }

  .cnf .h2 {
    font-size: 64px;
  }

  .cnn__step {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .cnv__card {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 28px;
  }

  .cnv__map {
    min-height: 460px;
  }

  .cnv__info {
    padding: 36px 32px;
    border-left: 0;
    border-top: .5px solid var(--line);
  }

  .cnv__acts {
    margin-top: 10px;
  }

  .cnds__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .cnw__now {
    width: 100%;
    flex-wrap: wrap;
    gap: 14px 24px;
  }

  .cnw__day {
    width: 100%;
  }

  .cnw__card {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
  }

  .cnc {
    padding: 28px 22px;
    border-left: 0;
  }

  .cnc + .cnc {
    border-top: .5px solid var(--line);
  }

  .cnc__main {
    font-size: 28px;
  }

  .cnc__main a {
    overflow-wrap: anywhere;
  }

  .cnc__big {
    font-size: 36px;
  }

  .cnc__ghost {
    right: -20px;
    bottom: -40px;
    width: 300px;
    height: 170px;
  }

  .cnc__ghost text {
    font-size: 170px;
  }

  .cnc__field {
    padding-left: 18px;
  }

  .cnc__in {
    font-size: 18px;
  }

  .cnc__cbgo {
    padding: 0 18px;
  }

  .cnf,
  .cnn {
    padding: 28px 20px;
    border-radius: 24px;
  }

  .cnf__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cnf .h2 {
    font-size: 48px;
  }

  .cnf__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .cnf__in {
    font-size: 20px;
  }

  .cnf__ta {
    font-size: 18px;
  }

  .cnf__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .cnf__send {
    justify-content: space-between;
  }

  .cnf__thanks {
    font-size: 40px;
  }

  .cnf__dl {
    font-size: 18px;
  }

  .cnn__step {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
  }

  .cnn__h {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .cnn__name {
    font-size: 22px;
  }

  .cnv__map {
    min-height: 380px;
  }

  .cnv__slot {
    display: none;
  }

  .cnv__chips {
    left: 14px;
    right: 14px;
    bottom: 14px;
    gap: 6px;
  }

  .cnv__chips li {
    height: 34px;
    padding: 0 12px;
  }

  .cnv__live .leaflet-bottom {
    bottom: 100px;
  }

  .cnv__info {
    padding: 28px 20px;
  }

  .cnv__addr {
    font-size: 30px;
  }

  .cnv__acts {
    flex-direction: column;
  }

  .cnv__book {
    justify-content: center;
  }

  .cnds__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cnd {
    padding: 28px 22px;
  }
}

/* == 63. Terms — shared ================================================ */
:root {
  --tm-hair: rgba(17, 20, 24, .12);
  --tm-num: rgba(17, 20, 24, .28);
  --tm-ver: rgba(17, 20, 24, .3);
  --tm-dot: rgba(128, 132, 140, .5);
  --tm-band: #111418;
}

[data-theme="dark"] {
  --tm-hair: rgba(242, 243, 245, .12);
  --tm-num: rgba(242, 243, 245, .28);
  --tm-ver: rgba(242, 243, 245, .3);
  --tm-band: #1a1d22;
}

.tms__fig,
.tmt__n,
.tmc__num {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  line-height: .9;
  white-space: nowrap;
  color: transparent;
}

/* == 64. Terms — 01 the short version ================================== */
.tms {
  gap: calc(var(--u) * 40);
}

.tms__r {
  gap: calc(var(--u) * 12);
}

.tms__chips {
  display: flex;
  gap: calc(var(--u) * 12);
}

.tms__chip {
  height: calc(var(--u) * 62);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 31);
  border: .5px solid var(--line2);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 2);
}

.tms__ck {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
  color: var(--mute);
}

.tms__cv {
  font-size: max(12px, calc(var(--u) * 18));
  white-space: nowrap;
}

.tms__pdf {
  height: calc(var(--u) * 62);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 31);
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
  cursor: pointer;
}

.tms__pdf:hover {
  background: var(--acc);
  color: #fff;
}

.tms__pdot {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(90deg);
}

.tms__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 14);
}

.tms__card {
  position: relative;
  height: calc(var(--u) * 400);
  padding: calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
  overflow: hidden;
}

.tms__card:hover {
  border-color: var(--acc);
}

.tms__card.is-hot {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.tms__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  opacity: .8;
}

.tms__fig {
  margin-top: calc(var(--u) * 14);
  height: calc(var(--u) * 120);
  display: flex;
  align-items: flex-end;
  font-size: max(12px, calc(var(--u) * 60));
  -webkit-text-stroke: 1px var(--acc);
  pointer-events: none;
}

.is-hot .tms__fig {
  color: rgba(255, 255, 255, .15);
  -webkit-text-stroke: 1px #fff;
}

.tms__t {
  margin-top: auto;
  font-size: max(12px, calc(var(--u) * 28));
  letter-spacing: -.02em;
  line-height: 1.15;
}

.tms__d {
  font-size: max(12px, calc(var(--u) * 16));
  line-height: 1.45;
  opacity: .85;
}

.tms__go {
  padding-top: calc(var(--u) * 14);
  border-top: .5px solid var(--tm-hair);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
}

.is-hot .tms__go {
  border-top-color: rgba(255, 255, 255, .4);
}

/* == 65. Terms — 02 the full agreement ================================= */
/* the rail is sticky: nothing above it may clip (overflow: clip, never hidden) */
.tmt {
  overflow: clip;
}

.tmt__grid {
  display: grid;
  grid-template-columns: calc(var(--u) * 600) minmax(0, 1fr);
  gap: calc(var(--u) * 80);
  align-items: start;
}

.tmt__rail {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 28);
}

.tmt__hl {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.tmt__h2 {
  font-size: max(12px, calc(var(--u) * 72));
  letter-spacing: -.045em;
  line-height: 1.02;
}

.tmt__find {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--ink);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  color: var(--acc);
}

.tmt__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 58);
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 20));
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.tmt__in::placeholder {
  color: var(--mute);
}

.tmt__in::-webkit-search-cancel-button {
  display: none;
}

.tmt__find:focus-within {
  box-shadow: 0 0 0 3px var(--acc-a18);
}

.tmt__hits {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
}

.tmt__prog {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tmt__pl2 {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.tmt__bar {
  display: block;
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: var(--hair);
  overflow: hidden;
}

.tmt__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--acc);
  transition: width .3s;
}

.tmt__list {
  border-top: .5px solid var(--line2);
}

.tmt__row {
  position: relative;
  padding: calc(var(--u) * 16) 0;
  border-bottom: .5px solid var(--line2);
  display: grid;
  grid-template-columns: calc(var(--u) * 52) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 14);
  transition: padding .25s, background-color .25s, color .25s, opacity .25s;
}

.tmt__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--acc);
  transition: width .25s;
}

.tmt__row:hover {
  color: var(--acc);
}

.tmt__row.is-on {
  padding-left: calc(var(--u) * 20);
  background: var(--acc-a04);
  color: var(--acc);
}

.tmt__row.is-on::before {
  width: 3px;
}

.tmt__row.is-dim {
  opacity: .35;
}

.tmt__rn {
  font-size: max(12px, calc(var(--u) * 13));
  font-weight: 400;
  letter-spacing: calc(var(--u) * 1.3);
  color: var(--mute);
}

.tmt__row.is-on .tmt__rn {
  color: var(--acc);
}

.tmt__rt {
  font-size: max(12px, calc(var(--u) * 22));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tmt__tag {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  color: var(--ok);
}

.tmt__tag.is-match {
  color: var(--acc);
}

.tmt__alsob {
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 26);
  border: .5px solid var(--line2);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tmt__alsol {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  color: var(--mute);
}

.tmt__alsos {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.tmt__also {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tmt__also:hover {
  color: var(--acc);
}

/* clauses: rows split by bottom hairlines only; the active one is a rounded card */
.tmt__cls {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tmt__cl {
  position: relative;
  padding: calc(var(--u) * 40) calc(var(--u) * 44) calc(var(--u) * 40) calc(var(--u) * 40);
  border-bottom: .5px solid var(--line2);
  display: grid;
  grid-template-columns: calc(var(--u) * 150) minmax(0, 1fr);
  gap: calc(var(--u) * 34);
  scroll-margin-top: 30px;
  transition: background-color .3s, box-shadow .3s, border-radius .3s, opacity .3s;
}

.tmt__cl.is-on {
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  box-shadow: inset 0 0 0 1px var(--acc);
}

.tmt__cl.is-dim {
  opacity: .3;
}

.tmt__side {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.tmt__n {
  width: calc(var(--u) * 130);
  height: calc(var(--u) * 92);
  font-size: max(12px, calc(var(--u) * 48));
  -webkit-text-stroke: 1px var(--tm-num);
}

.is-on .tmt__n {
  color: var(--acc-a14);
  -webkit-text-stroke-color: var(--acc);
}

.tmt__min {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--mute);
}

.tmt__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.tmt__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.tmt__t {
  font-size: max(12px, calc(var(--u) * 42));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.tmt__copy {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 21);
  border: .5px solid var(--line2);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.32);
  white-space: nowrap;
  cursor: pointer;
}

.tmt__copy:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.tmt__copy.is-done {
  color: var(--ok);
}

.tmt__p {
  max-width: calc(var(--u) * 1320);
  font-size: max(12px, calc(var(--u) * 20));
  line-height: 1.7;
  color: var(--body);
}

.tmt__cls mark {
  border-radius: 4px;
  background: var(--acc-a12);
  color: var(--acc);
}

.tmt__plain {
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 20) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 22);
  background: var(--acc-a07);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 18);
}

.tmt__pl {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
}

.tmt__pt {
  font-size: max(12px, calc(var(--u) * 20));
  line-height: 1.5;
}

.tmt__none {
  padding: calc(var(--u) * 40) 0;
  font-size: max(12px, calc(var(--u) * 24));
  color: var(--body);
}

.tmt__none[hidden] {
  display: none;
}

.tmt__none a {
  color: var(--acc);
}

/* == 66. Terms — 03 what changed ======================================= */
.tmc {
  gap: calc(var(--u) * 40);
}

.tmc__note {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.tmc__line {
  position: relative;
}

.tmc__track {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 44);
  height: 1px;
  background: var(--line2);
}

.tmc__prog {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 43);
  height: 3px;
  width: 0;
  background: var(--acc);
  transition: width .4s;
}

.tmc__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 18);
}

.tmc__v {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
  cursor: pointer;
}

.tmc__dotrow {
  height: calc(var(--u) * 90);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.tmc__dot {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border-radius: 50%;
  border: 1px solid var(--tm-dot);
  background: var(--surf);
  transition: width .3s, height .3s, box-shadow .3s;
}

.tmc__v.is-past .tmc__dot {
  border-color: var(--acc);
  background: var(--acc);
}

.tmc__v.is-on .tmc__dot {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  box-shadow: 0 0 0 calc(var(--u) * 8) var(--acc-a18);
}

.tmc__tag {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  color: var(--acc);
  background: var(--bg); /* the timeline must not run through the label */
}

.js-tm-seltag {
  opacity: 0;
}

.tmc__v.is-on .js-tm-seltag {
  opacity: 1;
}

.tmc__tag--cur {
  background: var(--acc);
  color: #fff;
}

.tmc__card {
  min-height: calc(var(--u) * 300);
  padding: calc(var(--u) * 28) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 30);
  border: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
  transition: border-color .3s, background-color .3s;
}

.tmc__v:hover .tmc__card {
  border-color: var(--ink);
}

.tmc__v.is-on .tmc__card {
  border-color: var(--acc);
  background: var(--surf);
}

.tmc__vh {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.tmc__num {
  font-size: max(12px, calc(var(--u) * 52));
  line-height: 1;
  -webkit-text-stroke: 1px var(--tm-ver);
}

.is-on .tmc__num {
  color: var(--acc-a14);
  -webkit-text-stroke-color: var(--acc);
}

.tmc__date {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.tmc__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.tmc__i {
  display: grid;
  grid-template-columns: calc(var(--u) * 22) minmax(0, 1fr);
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 18));
  line-height: 1.45;
  color: var(--body);
}

.tmc__s {
  color: var(--acc);
}

.tmc__s--add {
  color: var(--ok);
}

/* == 67. Terms — 04 questions ========================================== */
.tmq__band {
  position: relative;
  border-radius: calc(var(--u) * 44);
  border: .5px solid var(--line2);
  background: var(--tm-band);
  color: #f2f3f5;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
}

.tmq__ghost {
  position: absolute;
  left: calc(var(--u) * 24);
  bottom: calc(var(--u) * -90);
  width: calc(var(--u) * 1300);
  height: calc(var(--u) * 420);
  overflow: visible;
  pointer-events: none;
}

.tmq__ghost text {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  font-size: 420px;
  fill: none;
  stroke: var(--acc-a30);
  stroke-width: 1;
}

.tmq__c {
  position: relative;
  min-width: 0;
  padding: calc(var(--u) * 52) calc(var(--u) * 44);
  border-left: .5px solid rgba(242, 243, 245, .12);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.tmq__c--1 {
  padding: calc(var(--u) * 52) calc(var(--u) * 56);
  border-left: 0;
  gap: calc(var(--u) * 20);
}

.tmq__c:last-child {
  gap: calc(var(--u) * 12);
}

.tmq__eb {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.92);
  color: #7d838d;
}

.tmq__eb .acc {
  margin-right: calc(var(--u) * 18);
}

.tmq__h2 {
  font-size: max(12px, calc(var(--u) * 72));
  letter-spacing: -.045em;
  line-height: 1.02;
}

.tmq__txt {
  max-width: calc(var(--u) * 640);
  font-size: max(12px, calc(var(--u) * 20));
  line-height: 1.5;
  color: #a3a9b3;
}

.tmq__l {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.64);
  color: #7d838d;
}

.tmq__mail {
  font-size: max(12px, calc(var(--u) * 40));
  letter-spacing: -.02em;
}

.tmq__mail a:hover,
.tmq__rel:hover {
  color: var(--acc);
}

.tmq__sub {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  color: #7d838d;
}

.tmq__facts {
  margin-top: auto;
  border-top: .5px solid rgba(242, 243, 245, .12);
}

.tmq__facts li {
  padding: calc(var(--u) * 12) 0;
  border-bottom: .5px solid rgba(242, 243, 245, .12);
  font-size: max(12px, calc(var(--u) * 15));
  color: #a3a9b3;
}

.tmq__rels {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.tmq__rel {
  padding: calc(var(--u) * 14) 0;
  border-bottom: .5px solid rgba(242, 243, 245, .12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 22));
}

.tmq__acts {
  margin-top: auto;
  display: flex;
  gap: calc(var(--u) * 10);
}

.tmq__contact {
  flex: 1;
  height: calc(var(--u) * 62);
  padding-left: calc(var(--u) * 26);
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  letter-spacing: calc(var(--u) * 1.56);
}

.tmq__contact .btn-acc__dot {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
}

.tmq__print {
  height: calc(var(--u) * 62);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 31);
  border: .5px solid rgba(242, 243, 245, .35);
  background: transparent;
  color: #f2f3f5;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  cursor: pointer;
}

.tmq__print:hover {
  color: var(--acc);
}

/* == 68. Terms — print ================================================= */
/* "Download PDF" and "Print" open the print dialog: the clauses print as a plain document */
@media print {
  .hd,
  .crumbs,
  .phead,
  .hd-gap,
  .tms,
  .tmc,
  .tmq,
  .sep,
  .ft,
  .tmt__rail > :not(.tmt__hl),
  .tmt__copy,
  .pre,
  .skip {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .tmt__grid {
    display: block;
    margin: 0;
  }

  .tmt__rail {
    position: static;
    margin-bottom: 24px;
  }

  .tmt__cl {
    padding: 16px 0;
    opacity: 1 !important;
    box-shadow: none !important;
    background: none !important;
    break-inside: avoid;
    grid-template-columns: 60px 1fr;
  }
}

/* == 69. Terms — tablet and phone ====================================== */
@media (max-width: 1199px) {
  .tms .shead {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .tms__r {
    flex-wrap: wrap;
  }

  .tms__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tms__card {
    height: 320px;
  }

  /* one column; the table of contents becomes a collapsible bar on top */
  .tmt__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .tmt__rail {
    position: static;
    gap: 20px;
  }

  .tmt__h2 {
    font-size: 56px;
  }

  .tmt__toc {
    border: .5px solid var(--line2);
    border-radius: 24px;
    background: var(--surf);
    overflow: hidden;
  }

  .tmt__tocbtn {
    display: flex;
  }

  .tmt__list {
    border-top: .5px solid var(--line2);
  }

  .tmt__toc:not(.is-open) .tmt__list {
    display: none;
  }

  .tmt__row {
    padding: 14px 20px;
  }

  .tmt__row.is-on {
    padding-left: 26px;
  }

  .tmt__list li:last-child .tmt__row {
    border-bottom: 0;
  }

  .tmt__cl {
    padding: 30px 26px;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 20px;
  }

  .tmt__t {
    font-size: 34px;
  }

  .tmc .shead {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .tmc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 10px;
  }

  .tmc__track,
  .tmc__prog {
    display: none;
  }

  .tmq__band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 32px;
  }

  .tmq__c--1 {
    grid-column: 1 / -1;
    border-bottom: .5px solid rgba(242, 243, 245, .12);
  }

  .tmq__c:nth-child(3) {
    border-left: 0;
  }

  .tmq__h2 {
    font-size: 56px;
  }

  .tmq__ghost {
    width: 900px;
    height: 290px;
    bottom: auto;
    top: 40px;
  }

  .tmq__ghost text {
    font-size: 290px;
  }
}

/* the collapsible bar only exists below the desktop */
.tmt__tocbtn {
  display: none;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.tmt__tocl {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--mute);
}

.tmt__tocbtn .ico {
  transition: transform .25s;
}

.tmt__toc.is-open .tmt__tocbtn .ico {
  transform: rotate(180deg);
}

@media (max-width: 1199px) {
  .tmt__tocbtn {
    display: flex;
  }
}

@media (max-width: 767px) {
  .tms__chips {
    flex-wrap: wrap;
  }

  .tms__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .tms__card {
    height: auto;
    min-height: 280px;
    padding: 18px 16px 16px;
    border-radius: 24px;
  }

  /* four wide Bartle glyphs ($500, 12MO) must fit half a phone screen */
  .tms__fig {
    height: 80px;
    font-size: calc(9vw - 10px);
  }

  .tms__t {
    font-size: 22px;
  }

  .tmt__h2 {
    font-size: 44px;
  }

  .tmt__cl {
    padding: 24px 18px;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .tmt__side {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .tmt__n {
    width: auto;
    height: auto;
    font-size: 40px;
  }

  .tmt__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .tmt__t {
    font-size: 28px;
  }

  .tmt__p,
  .tmt__pt {
    font-size: 17px;
  }

  .tmt__plain {
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
  }

  .tmc__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tmc__dotrow {
    height: 50px;
  }

  .tmq__band {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
  }

  .tmq__c,
  .tmq__c--1 {
    padding: 30px 22px;
    border-left: 0;
    border-top: .5px solid rgba(242, 243, 245, .12);
  }

  .tmq__c--1 {
    border-top: 0;
  }

  .tmq__h2 {
    font-size: 44px;
  }

  .tmq__mail {
    font-size: 28px;
    overflow-wrap: anywhere;
  }

  .tmq__ghost {
    width: 520px;
    height: 170px;
    top: 30px;
  }

  .tmq__ghost text {
    font-size: 170px;
  }
}

/* == 70. Listing v1 — shared =========================================== */
:root {
  --lx-hair: rgba(17, 20, 24, .1);
  --lx-hair12: rgba(17, 20, 24, .12);
  --lx-hair14: rgba(17, 20, 24, .14);
  --lx-hair16: rgba(17, 20, 24, .16);
  --lx-soft: rgba(17, 20, 24, .3);
  --lx-grey: rgba(128, 132, 140, .35);
  --lx-grey25: rgba(128, 132, 140, .25);
  --lx-grey14: rgba(128, 132, 140, .14);
  --lx-glass: rgba(255, 255, 255, .92);
  --lx-shadow: 0 24px 60px rgba(17, 20, 24, .1);
  --lx-pop: 0 30px 70px rgba(17, 20, 24, .16);
  --lx-ease: cubic-bezier(.2, .7, .2, 1);
}

[data-theme="dark"] {
  --lx-hair: rgba(242, 243, 245, .1);
  --lx-hair12: rgba(242, 243, 245, .12);
  --lx-hair14: rgba(242, 243, 245, .14);
  --lx-hair16: rgba(242, 243, 245, .14);
  --lx-soft: rgba(242, 243, 245, .3);
  --lx-glass: rgba(20, 22, 27, .88);
  --lx-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  --lx-pop: 0 30px 70px rgba(0, 0, 0, .5);
}

.i24 { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }

.lx-gap {
  height: calc(var(--u) * 60);
}

/* deal chip with its five-step meter */
.lx-deal {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--acc-a10);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  white-space: nowrap;
}

.lx-deal.is-ok {
  background: rgba(47, 163, 107, .12);
  color: var(--ok);
}

.lx-meter {
  display: flex;
  gap: 2px;
}

.lx-meter span {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 2px;
  background: var(--lx-grey25);
}

.lx-meter .is-acc { background: var(--acc); }
.lx-meter .is-ok { background: var(--ok); }

/* photo rail: one segment per eight photos */
.lx-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  padding: 0 calc(var(--u) * 36);
  display: flex;
  gap: 3px;
  transition: opacity .3s;
}

.lx-dots span {
  flex: 1;
  border-radius: 2px;
  background: var(--lx-grey);
}

.lx-dots .is-on {
  background: var(--acc);
}

.lx-fav .ico {
  fill: none;
}

.lx-fav[aria-pressed="true"] {
  background: var(--acc);
  color: #fff;
}

.lx-fav[aria-pressed="true"] .ico {
  fill: currentColor;
}

/* == 71. Listing v1 — 01 search console ================================ */
.lsc {
  position: relative;
  z-index: 6;
  padding-bottom: calc(var(--u) * 10);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.lsc__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.lsc__conds {
  padding: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 30);
  border: .5px solid var(--line2);
  background: var(--surf);
  display: flex;
}

.lsc__cond {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 22);
  border: 0;
  border-radius: calc(var(--u) * 24);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  cursor: pointer;
}

.lsc__cond:hover {
  color: var(--acc);
}

.lsc__cond.is-on {
  background: var(--acc);
  color: #fff;
}

.lsc__cn {
  opacity: .6;
}

.lsc__live {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
  white-space: nowrap;
}

.lsc__ld {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lsc .dot--8,
.lrq .dot--8 {
  box-shadow: 0 0 0 calc(var(--u) * 5) rgba(47, 163, 107, .18);
}

/* the console pill */
.lsc__pill {
  position: relative;
  z-index: 5;
  height: calc(var(--u) * 124);
  border-radius: calc(var(--u) * 62);
  border: .5px solid var(--line2);
  background: var(--surf);
  box-shadow: var(--lx-shadow);
  display: grid;
  grid-template-columns: 1.7fr 4fr auto;
  align-items: center;
}

.lsc__pill.is-focus {
  border: 1px solid var(--acc);
}

.lsc__kw {
  position: relative;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  padding-right: calc(var(--u) * 26);
}

.lsc__kl {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 46);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  cursor: text;
}

.lsc__ki {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: var(--acc-a10);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lsc__kt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lsc__klb,
.lsc__slb {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  color: var(--mute);
  white-space: nowrap;
}

.lsc__in {
  width: 100%;
  height: calc(var(--u) * 42);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 28));
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.lsc__in::placeholder {
  color: var(--mute);
}

.lsc__in::-webkit-search-cancel-button {
  display: none;
}

.lsc__clear {
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 18));
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.lsc__clear:hover {
  color: var(--acc);
}

.lsc__clear[hidden],
.lsc__drop[hidden],
.lsc__pick[hidden],
.lsc__active[hidden],
.lsc__fn[hidden] {
  display: none;
}

/* keyword suggestions */
.lsc__drop {
  position: absolute;
  left: calc(var(--u) * 20);
  top: calc(var(--u) * 136);
  width: calc(var(--u) * 820);
  padding: calc(var(--u) * 14) 0;
  border-radius: calc(var(--u) * 30);
  border: .5px solid var(--line2);
  background: var(--surf);
  box-shadow: var(--lx-pop);
  display: flex;
  flex-direction: column;
}

.lsc__dt {
  padding: calc(var(--u) * 6) calc(var(--u) * 30) calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.42);
  color: var(--mute);
}

.lsc__sug {
  width: 100%;
  padding: calc(var(--u) * 14) calc(var(--u) * 30);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: calc(var(--u) * 44) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 16);
  cursor: pointer;
}

.lsc__sug:hover,
.lsc__sug.is-act {
  background: var(--acc-a06);
}

.lsc__si {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--acc);
}

.lsc__si--ok {
  color: var(--ok);
}

.lsc__st {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.lsc__sn {
  font-size: max(12px, calc(var(--u) * 22));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lsc__sn mark {
  background: none;
  color: var(--acc);
  box-shadow: inset 0 -2px 0 var(--acc);
}

.lsc__sk {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--mute);
}

.lsc__sr {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.lsc__bar {
  width: calc(var(--u) * 90);
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: var(--lx-hair);
  overflow: hidden;
}

.lsc__bar span,
.lsc__obf {
  display: block;
  height: 100%;
  background: var(--acc);
}

.lsc__sc {
  width: calc(var(--u) * 64);
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
  text-align: right;
  white-space: nowrap;
}

/* segments */
.lsc__filters {
  display: none;
}

.lsc__segs {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lsc__seg {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  border-left: .5px solid var(--lx-hair);
}

.lsc__sb {
  width: calc(100% - calc(var(--u) * 12));
  height: calc(var(--u) * 84);
  margin: 0 calc(var(--u) * 6);
  padding: 0 calc(var(--u) * 20);
  border: 0;
  border-radius: calc(var(--u) * 42);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  cursor: pointer;
}

.lsc__sb:hover {
  background: var(--acc-a04);
}

.lsc__seg.is-open .lsc__sb {
  background: var(--acc-a08);
}

.lsc__sl {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lsc__slb {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.lsc__sv {
  font-size: max(12px, calc(var(--u) * 22));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lsc__seg.is-set .lsc__sv {
  color: var(--acc);
}

.lsc__mark {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
  transition: transform .25s;
}

.lsc__seg.is-open:not(.is-set) .lsc__mark {
  transform: rotate(180deg);
}

.lsc__seg.is-set .lsc__mark {
  background: var(--acc);
  color: #fff;
}

/* a set segment shows × in its dot: one click clears it */
.lsc__seg.is-set .lsc__mark .ico {
  display: none;
}

.lsc__seg.is-set .lsc__mark::after {
  content: "×";
}

.lsc__pick {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 136);
  z-index: 7;
  width: calc(var(--u) * 560);
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 30);
  border: .5px solid var(--line2);
  background: var(--surf);
  box-shadow: var(--lx-pop);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lsc__seg:last-child .lsc__pick {
  left: auto;
  right: 0;
}

.lsc__ph {
  padding: 0 calc(var(--u) * 6);
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.42);
  color: var(--mute);
}

.lsc__opt {
  height: calc(var(--u) * 58);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 18);
  border: .5px solid var(--lx-hair12);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 19));
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 150) calc(var(--u) * 56);
  align-items: center;
  gap: calc(var(--u) * 16);
  cursor: pointer;
}

.lsc__opt:hover {
  border-color: var(--acc);
}

.lsc__opt.is-on {
  border-color: var(--acc);
  background: var(--acc-a10);
  color: var(--acc);
}

.lsc__ot {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  white-space: nowrap;
}

.lsc__rad {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border-radius: 50%;
  border: 1px solid rgba(128, 132, 140, .5);
  flex-shrink: 0;
}

.lsc__opt.is-on .lsc__rad {
  border-color: var(--acc);
  background: radial-gradient(circle, var(--acc) 45%, transparent 50%);
}

.lsc__ob {
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: rgba(128, 132, 140, .16);
  overflow: hidden;
}

.lsc__obf {
  background: rgba(128, 132, 140, .55);
}

.lsc__opt.is-on .lsc__obf {
  background: var(--acc);
}

.lsc__on {
  font-size: max(12px, calc(var(--u) * 14));
  text-align: right;
  opacity: .75;
}

/* the call to action */
.lsc__go {
  height: calc(var(--u) * 100);
  margin-right: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 38);
  border: 0;
  border-radius: calc(var(--u) * 50);
  background: var(--acc);
  color: #fff;
  font: inherit;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
  white-space: nowrap;
  box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) var(--acc-a35);
  cursor: pointer;
}

.lsc__go:hover {
  background: var(--acc-d);
}

.lsc__gt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 2);
}

.lsc__est {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  opacity: .85;
}

.lsc__show {
  font-size: max(12px, calc(var(--u) * 22));
  text-transform: uppercase;
  letter-spacing: .08em;
}

.lsc__gdot,
.lrq__gdot {
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 76);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 24));
  flex-shrink: 0;
}

/* quick chips, save, grid / list */
.lsc__row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.lsc__ql {
  margin-right: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
}

.lsc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.lsc__chip {
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 25);
  border: .5px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  cursor: pointer;
}

.lsc__chip:hover {
  border-color: var(--acc);
}

.lsc__chip[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.lsc__chn {
  height: calc(var(--u) * 30);
  min-width: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 15);
  background: var(--lx-grey14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 12));
}

.lsc__chip[aria-pressed="true"] .lsc__chn {
  background: rgba(255, 255, 255, .25);
}

.lsc__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lsc__save {
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 25);
  border: .5px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  cursor: pointer;
}

.lsc__save:hover {
  border-color: var(--acc);
}

.lsc__save[aria-pressed="true"] {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}

.lsc__views {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--line2);
  display: flex;
}

.lsc__view {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 18);
  border: 0;
  border-radius: calc(var(--u) * 21);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  cursor: pointer;
}

.lsc__view.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

/* active filters */
.lsc__active {
  padding-top: calc(var(--u) * 14);
  border-top: .5px solid var(--lx-hair);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lsc__showing {
  margin-right: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.lsc__acts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.lsc__ac {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 19);
  border: .5px solid var(--acc);
  background: var(--acc-a08);
  color: var(--acc);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  cursor: pointer;
}

.lsc__acx {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 13));
}

.lsc__clearall {
  border: 0;
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  cursor: pointer;
}

.lsc__clearall:hover {
  color: var(--acc);
}

/* == 72. Listing v1 — 02 results: grid cards =========================== */
.lres {
  gap: calc(var(--u) * 40);
  scroll-margin-top: 20px;
}

.lres__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 50) calc(var(--u) * 30);
}

.lres__grid[hidden],
.lres__list[hidden],
.js-ln-item[hidden] {
  display: none;
}

.lcd {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.lcd__ph,
.lrw__ph {
  position: relative;
  height: calc(var(--u) * 540);
  border-radius: calc(var(--u) * 36);
  background: var(--stripes);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow .3s;
}

.lcd__img,
.lrw__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fefefe;
  transition: transform .5s var(--lx-ease);
}

[data-theme="dark"] .lcd__img,
[data-theme="dark"] .lrw__img {
  filter: brightness(.9);
}

.lcd.is-cmp .lcd__ph,
.lrw.is-cmp .lrw__ph {
  box-shadow: inset 0 0 0 1px var(--acc);
}

.lcd.is-cmp .lcd__ph::after,
.lrw.is-cmp .lrw__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--acc);
  pointer-events: none;
}

.lcd__tags {
  position: absolute;
  left: calc(var(--u) * 24);
  top: calc(var(--u) * 24);
  display: flex;
  gap: calc(var(--u) * 6);
}

.lcd__tag {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
}

.lcd__tag--acc { background: var(--acc); }
.lcd__tag--ok { background: var(--ok); }
.lcd__tag--ink { background: #111418; }
.lcd__tag--mute { background: #5f6671; }

.lcd__tag--ver {
  background: var(--lx-glass);
  color: var(--ink);
}

.lcd__vd {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: var(--ok);
}

.lcd__acts {
  position: absolute;
  right: calc(var(--u) * 20);
  top: calc(var(--u) * 20);
  display: flex;
  gap: calc(var(--u) * 8);
}

.lcd__cmp {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border: 0;
  border-radius: calc(var(--u) * 23);
  background: var(--lx-glass);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
  cursor: pointer;
}

.lcd__cmp[aria-pressed="true"],
.lrw__cmp[aria-pressed="true"] {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}

.lcd__cmp.is-full,
.lrw__cmp.is-full {
  opacity: .6;
  cursor: not-allowed;
}

.lcd__fav {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border: 0;
  border-radius: 50%;
  background: var(--lx-glass);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lcd__nav {
  position: absolute;
  top: 50%;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  margin-top: calc(var(--u) * -26);
  border: 0;
  border-radius: 50%;
  background: var(--lx-glass);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 18));
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s;
}

.lcd__nav:hover {
  color: var(--acc);
}

.lcd__nav--prev { left: calc(var(--u) * 18); }
.lcd__nav--next { right: calc(var(--u) * 18); }

.lcd__cnt {
  position: absolute;
  right: calc(var(--u) * 20);
  bottom: calc(var(--u) * 20);
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--lx-glass);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--body);
  opacity: 0;
  transition: opacity .25s;
}

.lcd__n,
.lrw__n {
  position: absolute;
  left: calc(var(--u) * 24);
  bottom: calc(var(--u) * 18);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  font-size: max(12px, calc(var(--u) * 104));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(17, 20, 24, .25);
  pointer-events: none;
  transition: bottom .35s var(--lx-ease), color .35s, -webkit-text-stroke-color .35s;
}

[data-theme="dark"] .lcd__n,
[data-theme="dark"] .lrw__n {
  -webkit-text-stroke-color: rgba(242, 243, 245, .35);
}

.lcd__specs {
  position: absolute;
  left: calc(var(--u) * 14);
  right: calc(var(--u) * 14);
  bottom: calc(var(--u) * 14);
  padding: calc(var(--u) * 18) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  background: var(--lx-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  transform: translateY(130%);
  opacity: 0;
  transition: transform .35s var(--lx-ease), opacity .35s var(--lx-ease);
}

.lcd__sp {
  padding-left: calc(var(--u) * 16);
  border-left: .5px solid var(--lx-hair14);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lcd__sp:first-child {
  padding-left: 0;
  border-left: 0;
}

.lcd__sk,
.lrw__sk {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  color: var(--mute);
}

.lcd__sv {
  font-size: max(12px, calc(var(--u) * 19));
  white-space: nowrap;
}

/* hover: zoom, arrows, the number lifts, specs slide up */
.lcd:hover .lcd__ph {
  box-shadow: 0 calc(var(--u) * 36) calc(var(--u) * 80) rgba(17, 20, 24, .18);
}

.lcd:hover .lcd__img {
  transform: scale(1.04);
}

.lcd:hover .lcd__nav,
.lcd__ph:focus-within .lcd__nav {
  opacity: 1;
}

.lcd:hover .lcd__n {
  bottom: calc(var(--u) * 120);
  color: var(--acc-a20);
  -webkit-text-stroke-color: var(--acc);
}

.lcd:hover .lcd__specs {
  transform: translateY(0);
  opacity: 1;
}

.lcd:hover .lx-dots {
  opacity: 0;
}

.lcd:hover .lcd__name,
.lcd:hover .lcd__go {
  color: var(--acc);
}

.lcd:hover .lcd__gdot {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.lcd__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 8) calc(var(--u) * 20);
  align-items: baseline;
}

.lcd__name {
  font-size: max(12px, calc(var(--u) * 36));
  letter-spacing: -.025em;
  transition: color .25s;
}

.lcd__mo {
  font-size: max(12px, calc(var(--u) * 34));
  white-space: nowrap;
}

.lcd__per {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--acc);
}

.lcd__meta {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lcd__price {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  text-align: right;
}

.lcd__foot {
  padding-top: calc(var(--u) * 16);
  border-top: .5px solid var(--lx-hair12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
}

.lcd__mute {
  color: var(--mute);
}

.lcd__go {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  white-space: nowrap;
  transition: color .25s;
}

.lcd__gdot {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  border: .5px solid var(--lx-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s, border-color .25s, color .25s;
}

/* == 73. Listing v1 — 02 results: list rows ============================ */
.lrw {
  position: relative;
  padding: calc(var(--u) * 40) 0;
  border-bottom: .5px solid var(--lx-hair16);
  display: grid;
  grid-template-columns: calc(var(--u) * 760) minmax(0, 1fr) calc(var(--u) * 460);
  gap: calc(var(--u) * 56);
  align-items: stretch;
  transition: padding .35s var(--lx-ease), border-color .35s;
}

.lrw::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--u) * 40);
  bottom: calc(var(--u) * 40);
  width: 0;
  border-radius: 2px;
  background: var(--acc);
  transition: width .3s;
}

.lrw__ph {
  height: calc(var(--u) * 430);
}

.lrw__fav {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
}

.lrw__n {
  left: calc(var(--u) * 26);
  font-size: max(12px, calc(var(--u) * 112));
}

.lrw__thumbs {
  position: absolute;
  right: calc(var(--u) * 20);
  bottom: calc(var(--u) * 20);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
  transform: translateX(calc(var(--u) * 140));
  opacity: 0;
  transition: transform .35s var(--lx-ease), opacity .35s var(--lx-ease);
}

.lrw__th {
  position: relative;
  width: calc(var(--u) * 110);
  height: calc(var(--u) * 72);
  padding: 0;
  border-radius: calc(var(--u) * 14);
  border: .5px solid rgba(128, 132, 140, .4);
  background: var(--stripes);
  overflow: hidden;
  cursor: pointer;
}

.lrw__th img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fefefe;
}

.lrw__th:hover {
  border-color: var(--acc);
}

.lrw__thn {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--lx-glass);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--body);
}

.lrw__navs {
  position: absolute;
  left: calc(var(--u) * 24);
  bottom: calc(var(--u) * 24);
  display: flex;
  gap: calc(var(--u) * 8);
  opacity: 0;
  transition: opacity .3s;
}

.lrw__navs .lcd__nav {
  position: static;
  margin: 0;
  opacity: 1;
}

.lrw__cnt {
  right: auto;
  left: calc(var(--u) * 160);
  bottom: calc(var(--u) * 38);
}

.lrw .lx-dots {
  left: 0;
  right: calc(var(--u) * 160);
}

/* hover: the row slides, the photo zooms, thumbnails slide in */
.lrw:hover {
  padding-left: calc(var(--u) * 28);
  border-bottom-color: var(--acc);
}

.lrw:hover::before {
  width: 3px;
}

.lrw:hover .lrw__ph {
  box-shadow: 0 calc(var(--u) * 40) calc(var(--u) * 90) rgba(17, 20, 24, .2);
}

.lrw:hover .lrw__img {
  transform: scale(1.05);
  transition-duration: .6s;
}

.lrw:hover .lrw__thumbs,
.lrw__ph:focus-within .lrw__thumbs {
  transform: translateX(0);
  opacity: 1;
}

.lrw:hover .lrw__navs,
.lrw:hover .lrw__cnt,
.lcd:hover .lcd__cnt,
.lrw__ph:focus-within .lrw__navs {
  opacity: 1;
}

.lrw:hover .lrw__n {
  bottom: calc(var(--u) * 100);
  color: var(--acc-a20);
  -webkit-text-stroke-color: var(--acc);
}

.lrw:hover .lx-dots {
  opacity: 0;
}

.lrw:hover .lrw__name a {
  color: var(--acc);
}

.lrw:hover .lrw__view {
  background: var(--acc);
  color: #fff;
}

.lrw:hover .lrw__vdot {
  background: #fff;
  color: var(--acc);
}

.lrw__mid {
  min-width: 0;
  padding-top: calc(var(--u) * 8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.lrw__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
  color: var(--mute);
}

.lrw__live {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  color: var(--acc);
  white-space: nowrap;
}

.lrw__ld {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 calc(var(--u) * 5) var(--acc-a16);
  animation: lx-pulse 2s ease-in-out infinite;
}

@keyframes lx-pulse {
  50% { box-shadow: 0 0 0 calc(var(--u) * 9) var(--acc-a06); }
}

.lrw__name {
  font-size: max(12px, calc(var(--u) * 66));
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1;
}

.lrw__name a {
  transition: color .25s;
}

.lrw__line {
  max-width: calc(var(--u) * 900);
  font-size: max(12px, calc(var(--u) * 21));
  line-height: 1.55;
  color: var(--body);
}

.lrw__specs {
  border-top: .5px solid var(--lx-hair16);
  border-bottom: .5px solid var(--lx-hair16);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lrw__sp {
  padding: calc(var(--u) * 16) 0 calc(var(--u) * 16) calc(var(--u) * 18);
  border-left: .5px solid var(--lx-hair12);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
}

.lrw__sp:first-child {
  padding-left: 0;
  border-left: 0;
}

.lrw__sk {
  letter-spacing: .16em;
}

.lrw__sv {
  font-size: max(12px, calc(var(--u) * 22));
  white-space: nowrap;
}

.lrw__fts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.lrw__ft {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  border: .5px solid var(--lx-hair16);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
}

.lrw__ck {
  color: var(--ok);
}

.lrw__side {
  min-width: 0;
  padding-top: calc(var(--u) * 8);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 14);
  text-align: right;
}

.lrw__deal {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
}

.lrw__mo {
  margin-top: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 64));
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}

.lrw__per {
  font-size: max(12px, calc(var(--u) * 17));
  color: var(--acc);
}

.lrw__price {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lrw__del {
  width: 100%;
  padding-top: calc(var(--u) * 14);
  border-top: .5px solid var(--lx-hair16);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 6);
}

.lrw__dl {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

.lrw__eta {
  font-size: max(12px, calc(var(--u) * 20));
}

.lrw__ctas {
  width: 100%;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.lrw__view {
  height: calc(var(--u) * 62);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 28);
  border-radius: calc(var(--u) * 31);
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  transition: background-color .25s, color .25s;
}

.lrw__vdot {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lrw__two {
  display: flex;
  gap: calc(var(--u) * 8);
}

.lrw__cmp,
.lrw__td {
  flex: 1;
  height: calc(var(--u) * 54);
  border-radius: calc(var(--u) * 27);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lrw__cmp {
  border: .5px solid var(--lx-soft);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.lrw__td {
  border: .5px solid var(--lx-hair16);
}

.lrw__cmp:hover,
.lrw__td:hover {
  color: var(--acc);
}

/* == 74. Listing v1 — pagination ======================================= */
.lpg {
  padding-top: calc(var(--u) * 30);
  border-top: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.lpg__info,
.lpg__per {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
  white-space: nowrap;
}

.lpg__b {
  color: var(--ink);
}

.lpg__nav,
.lpg__nums {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.lpg__prev,
.lpg__next {
  height: calc(var(--u) * 56);
  border-radius: calc(var(--u) * 28);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  cursor: pointer;
}

.lpg__prev {
  padding: 0 calc(var(--u) * 22) 0 calc(var(--u) * 8);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
}

.lpg__next {
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 22);
  border: 0;
  background: var(--acc);
  color: #fff;
}

.lpg__prev:disabled,
.lpg__next:disabled {
  opacity: .35;
  cursor: default;
}

.lpg__pd,
.lpg__nd {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lpg__pd {
  border: .5px solid var(--line2);
}

.lpg__nd {
  background: #fff;
  color: var(--acc);
}

.lpg__num {
  min-width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 6);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--lx-grey);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 17));
  cursor: pointer;
}

.lpg__num:hover {
  border-color: var(--acc);
}

.lpg__num[aria-current="page"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.lpg__gap {
  min-width: calc(var(--u) * 56);
  font-size: max(12px, calc(var(--u) * 17));
  text-align: center;
}

/* == 75. Listing v1 — 04 can't find it ================================= */
.lrq {
  padding: calc(var(--u) * 36) 0;
  border-top: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.lrq__top,
.lrq__bot {
  display: grid;
  grid-template-columns: calc(var(--u) * 860) minmax(0, 1fr);
  gap: calc(var(--u) * 40);
  align-items: center;
}

.lrq__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.lrq__eb {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.88);
  color: var(--mute);
}

.lrq__eb .acc {
  margin-right: calc(var(--u) * 12);
}

.lrq__h2 {
  font-size: max(12px, calc(var(--u) * 44));
  letter-spacing: -.035em;
  line-height: 1.1;
  white-space: nowrap;
}

.lrq__who {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  color: var(--mute);
}

.lrq__ink {
  color: var(--ink);
}

.lrq__avs {
  display: flex;
}

.lrq__avs img {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: 50%;
  border: 1.5px solid var(--bg);
  object-fit: cover;
}

.lrq__avs img + img {
  margin-left: calc(var(--u) * -10);
}

.lrq__pill {
  height: calc(var(--u) * 120);
  border-radius: calc(var(--u) * 60);
  border: .5px solid var(--line2);
  background: var(--surf);
  box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(17, 20, 24, .08);
  display: grid;
  grid-template-columns: 1.3fr 1.1fr 1.2fr auto;
  align-items: center;
}

.lrq__pill.is-err {
  border: 1px solid var(--acc);
}

.lrq__pill[hidden],
.lrq__done[hidden] {
  display: none;
}

.lrq__f {
  min-width: 0;
  padding: 0 calc(var(--u) * 26);
  border-left: .5px solid var(--lx-hair12);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  cursor: text;
}

.lrq__f:first-child {
  padding-left: calc(var(--u) * 36);
  border-left: 0;
}

.lrq__f--b {
  padding: 0 calc(var(--u) * 24);
  cursor: default;
}

.lrq__num {
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 50);
  border-radius: 50%;
  background: var(--acc-a10);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: max(12px, calc(var(--u) * 13));
}

.lrq__ft {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lrq__f--b .lrq__ft {
  gap: calc(var(--u) * 6);
}

.lrq__fl {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  color: var(--mute);
  white-space: nowrap;
}

.lrq__bv {
  font-size: max(12px, calc(var(--u) * 16));
  text-transform: none;
  letter-spacing: calc(var(--u) * 0.32);
  color: var(--ink);
}

.lrq__in {
  width: 100%;
  height: calc(var(--u) * 40);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 24));
  color: var(--ink);
}

.lrq__in::placeholder {
  color: var(--mute);
}

.lrq__range {
  position: relative;
  height: calc(var(--u) * 26);
}

.lrq__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 12);
  height: 2px;
  background: var(--lx-hair12);
}

.lrq__fill {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 11);
  height: calc(var(--u) * 4);
  border-radius: 2px;
  background: var(--acc);
}

.lrq__knob {
  position: absolute;
  left: 40%;
  top: calc(var(--u) * 3);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  margin-left: calc(var(--u) * -10);
  border-radius: 50%;
  border: 1.5px solid var(--acc);
  background: var(--surf);
  pointer-events: none;
}

.lrq__slider {
  position: absolute;
  left: calc(var(--u) * -10);
  top: 0;
  width: calc(100% + calc(var(--u) * 20));
  height: calc(var(--u) * 26);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.lrq__slider:focus-visible + .lrq__knob,
.lrq__range:focus-within .lrq__knob {
  box-shadow: 0 0 0 4px var(--acc-a20);
}

.lrq__go {
  height: calc(var(--u) * 98);
  margin-right: calc(var(--u) * 11);
  padding: 0 calc(var(--u) * 11) 0 calc(var(--u) * 34);
  border: 0;
  border-radius: calc(var(--u) * 49);
  background: var(--acc);
  color: #fff;
  font: inherit;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
  white-space: nowrap;
  box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) var(--acc-a35);
  cursor: pointer;
}

.lrq__go:hover {
  background: var(--acc-d);
}

.lrq__gt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 2);
}

.lrq__gs {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  opacity: .85;
}

.lrq__gm {
  font-size: max(12px, calc(var(--u) * 18));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
}

/* sent */
.lrq__done {
  min-height: calc(var(--u) * 120);
  padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 60);
  border: 1px solid var(--ok);
  background: rgba(47, 163, 107, .08);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 26);
  outline: 0;
}

.lrq__ok {
  width: calc(var(--u) * 92);
  height: calc(var(--u) * 92);
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: max(12px, calc(var(--u) * 34));
}

.lrq__dt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lrq__dh {
  font-size: max(12px, calc(var(--u) * 28));
}

.lrq__dm {
  color: var(--ok);
}

.lrq__dsub {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.lrq__id {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--ink);
}

.lrq__track,
.lrq__new {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.lrq__track {
  background: var(--ink);
  color: var(--on-ink);
}

.lrq__track:hover {
  background: var(--acc);
  color: #fff;
}

.lrq__new {
  padding: 0 calc(var(--u) * 22);
  border: .5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.lrq__new:hover {
  color: var(--acc);
}

.lrq__free {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

.lrq__br {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.lrq__hots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.lrq__hl {
  margin-right: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.lrq__hot {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  cursor: pointer;
}

.lrq__hot:hover {
  border-color: var(--acc);
}

.lrq__hot[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.lrq__prog {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lrq__st {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
  white-space: nowrap;
}

.lrq__sn {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  border-radius: 50%;
  border: 1px solid rgba(128, 132, 140, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 11));
}

.lrq__st.is-on {
  color: var(--ok);
}

.lrq__st.is-on .lrq__sn {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}

.lrq__sline {
  width: calc(var(--u) * 40);
  height: .5px;
  margin-left: calc(var(--u) * 2);
  background: var(--line2);
}

/* touch screens have no hover: keep the gallery controls visible */
@media (hover: none) {
  .lcd__nav,
  .lcd__cnt,
  .lrw__navs {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lrw__ld {
    animation: none;
  }
}

/* == 76. Listing v1 — tablet and phone ================================= */
@media (max-width: 1199px) {
  .lsc__top {
    flex-wrap: wrap;
  }

  .lsc__pill {
    height: auto;
    padding: 10px;
    border-radius: 32px;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .lsc__kw {
    height: 76px;
    padding-right: 12px;
  }

  .lsc__kl {
    padding-left: 12px;
  }

  .lsc__drop {
    left: 0;
    top: calc(100% + 8px);
    width: 100%;
  }

  .lsc__segs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .lsc__seg {
    border-left: 0;
  }

  .lsc__sb {
    width: 100%;
    height: 64px;
    margin: 0;
    border: .5px solid var(--lx-hair12);
    border-radius: 22px;
  }

  .lsc__sv {
    font-size: 17px;
  }

  .lsc__pick {
    top: calc(100% + 8px);
    width: min(560px, calc(200% + 6px));
  }

  .lsc__seg:nth-child(2n) .lsc__pick {
    left: auto;
    right: 0;
  }

  .lsc__go {
    height: 76px;
    margin: 0;
    padding-left: 26px;
    justify-content: space-between;
  }

  .lsc__gdot,
  .lrq__gdot {
    width: 56px;
    height: 56px;
  }

  .lsc__row {
    flex-wrap: wrap;
  }

  .lsc__right {
    margin-left: 0;
  }

  .lres__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 20px;
  }

  .lcd__ph {
    height: auto;
    aspect-ratio: 790 / 540;
  }

  .lcd__n {
    font-size: 64px;
  }

  .lcd:hover .lcd__n {
    bottom: 18px;
  }

  .lcd__specs {
    display: none;
  }

  .lrw,
  .lrw:hover {
    padding: 30px 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .lrw::before {
    display: none;
  }

  .lrw__ph {
    height: auto;
    aspect-ratio: 760 / 430;
  }

  .lrw__n {
    font-size: 72px;
  }

  .lrw:hover .lrw__n {
    bottom: 18px;
  }

  .lrw__thumbs {
    display: none;
  }

  .lrw__side {
    align-items: flex-start;
    text-align: left;
  }

  .lrw__del {
    align-items: flex-start;
  }

  .lrw__ctas {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .lrw__view {
    flex: 1 1 260px;
  }

  .lrw__two {
    flex: 1 1 260px;
  }

  .lpg {
    flex-wrap: wrap;
    justify-content: center;
  }

  .lpg__info,
  .lpg__per {
    width: 100%;
    text-align: center;
  }

  .lpg__nav {
    order: -1;
  }

  .lrq__top,
  .lrq__bot {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .lrq__h2 {
    white-space: normal;
  }

  .lrq__pill {
    height: auto;
    padding: 10px;
    border-radius: 32px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 10px;
  }

  .lrq__f,
  .lrq__f:first-child {
    min-height: 76px;
    padding: 0 16px;
  }

  .lrq__go {
    grid-column: 1 / -1;
    height: 76px;
    margin: 0;
    padding-left: 26px;
    justify-content: space-between;
  }

  .lrq__done {
    flex-wrap: wrap;
    padding: 20px;
    border-radius: 32px;
  }

  .lrq__br {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .lsc__conds {
    width: 100%;
  }

  .lsc__cond {
    flex: 1;
    padding: 0 6px;
    justify-content: center;
    gap: 5px;
    letter-spacing: .06em;
  }

  .lsc__filters {
    height: 56px;
    padding: 0 18px;
    border-radius: 28px;
    border: .5px solid var(--line2);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
  }

  .lsc__filters[aria-expanded="true"] {
    border-color: var(--acc);
    color: var(--acc);
  }

  .lsc__fn {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: var(--acc);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }

  /* the segments fold into a sheet under the Filters button */
  .lsc__segs {
    display: none;
    grid-template-columns: minmax(0, 1fr);
  }

  .lsc__pill.is-sheet .lsc__segs {
    display: grid;
  }

  .lsc__pick,
  .lsc__seg:nth-child(2n) .lsc__pick {
    position: static;
    width: auto;
    margin-top: 6px;
    padding: 12px;
    box-shadow: none;
  }

  .lsc__seg {
    flex-direction: column;
    align-items: stretch;
  }

  .lsc__opt {
    grid-template-columns: minmax(0, 1fr) 70px 40px;
    padding: 0 14px;
    gap: 10px;
  }

  .lsc__in {
    font-size: 20px;
  }

  .lsc__ki {
    width: 40px;
    height: 40px;
  }

  .lsc__sug {
    padding: 12px 16px;
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .lsc__sr {
    display: none;
  }

  .lsc__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
  }

  .lsc__live {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .lres__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lrw__specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lrw__sp:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }

  .lrw__sp:nth-child(n + 4) {
    border-top: .5px solid var(--lx-hair12);
  }

  .lrw__name {
    font-size: 40px;
  }

  .lrw__mo {
    font-size: 44px;
  }

  .lrw__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    letter-spacing: .14em;
  }

  .lpg__prev,
  .lpg__next {
    padding: 0 8px;
    font-size: 0;
    gap: 0;
  }

  .lpg__pd,
  .lpg__nd {
    font-size: 16px;
  }

  .lpg__num {
    min-width: 40px;
    height: 40px;
  }

  .lpg__gap {
    min-width: 16px;
  }

  .lrq__pill {
    grid-template-columns: minmax(0, 1fr);
  }

  .lrq__f,
  .lrq__f:first-child {
    border-left: 0;
    border-top: .5px solid var(--lx-hair12);
  }

  .lrq__f:first-child {
    border-top: 0;
  }

  .lrq__prog {
    flex-wrap: wrap;
  }
}

/* == 77. 404 — shared ================================================== */
:root {
  --nf-hair: rgba(17, 20, 24, .1);
  --nf-hair12: rgba(17, 20, 24, .12);
  --nf-ring: rgba(17, 20, 24, .3);
  --nf-card: rgba(128, 132, 140, .3);
  --nf-glass: rgba(255, 255, 255, .92);
  --nf-pop: 0 30px 70px rgba(17, 20, 24, .16);
}

[data-theme="dark"] {
  --nf-hair: rgba(242, 243, 245, .1);
  --nf-hair12: rgba(242, 243, 245, .12);
  --nf-ring: rgba(242, 243, 245, .3);
  --nf-glass: rgba(20, 22, 27, .9);
  --nf-pop: 0 30px 70px rgba(0, 0, 0, .5);
}

/* == 78. 404 — 01 lost ================================================= */
.nfh {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.nfh__top {
  margin-top: calc(var(--u) * 10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.12);
  color: var(--mute);
}

.nfh__code .acc {
  margin-right: calc(var(--u) * 16);
}

.nfh__req {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.nfh__url {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  border: .5px dashed var(--line2);
  display: flex;
  align-items: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 0.28);
  text-transform: none;
  white-space: nowrap;
  color: var(--ink);
}

.nfh__stage {
  position: relative;
  height: calc(var(--u) * 760);
}

.nfh__404 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.nfh__404 text {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  font-size: 860px;
  fill: var(--acc-a06);
  stroke: var(--acc);
  stroke-width: 1.2;
}

/* the car photo slot, tilted like a car that left the road */
.nfh__car {
  position: absolute;
  left: 50%;
  top: 52%;
  width: calc(var(--u) * 620);
  height: calc(var(--u) * 280);
  border-radius: calc(var(--u) * 140);
  border: .5px solid var(--line2);
  background: var(--stripes);
  box-shadow: var(--nf-pop);
  overflow: hidden;
  transform: translate(-50%, -50%) rotate(-8deg);
}

/* the owner's joke: the car has slid off the road, like the visitor off the site */
.nfh__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 60%;
}

.nfh__road {
  position: absolute;
  left: 50%;
  top: calc(52% + calc(var(--u) * 150));
  width: calc(var(--u) * 900);
  height: calc(var(--u) * 120);
  overflow: visible;
  transform: translateX(-50%);
}

.nfh__road path {
  fill: none;
  stroke: var(--acc);
  stroke-width: 1.2;
  stroke-dasharray: 6 10;
}

.nfh__bot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 1100);
  gap: calc(var(--u) * 80);
  align-items: end;
}

.nfh__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.nfh__h1 {
  font-size: max(12px, calc(var(--u) * 140));
  letter-spacing: -.06em;
  line-height: .92;
}

.nfh__txt {
  max-width: calc(var(--u) * 880);
  font-size: max(12px, calc(var(--u) * 24));
  line-height: 1.5;
  color: var(--body);
}

.nfh__r {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

/* search: the pill; results open above it */
.nfh__search {
  position: relative;
  height: calc(var(--u) * 92);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 32);
  border-radius: calc(var(--u) * 46);
  border: 1px solid var(--ink);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.nfh__search:focus-within {
  box-shadow: 0 0 0 4px var(--acc-a18);
}

.nfh__field {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  color: var(--acc);
  cursor: text;
}

.nfh__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 86);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 28));
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.nfh__in::placeholder {
  color: var(--mute);
}

.nfh__in::-webkit-search-cancel-button {
  display: none;
}

.nfh__hits {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
}

.nfh__go {
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 76);
  border: 0;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 24));
  flex-shrink: 0;
  cursor: pointer;
}

.nfh__go:hover {
  background: var(--acc-d);
}

.nfh__res {
  position: absolute;
  left: calc(var(--u) * 30);
  right: calc(var(--u) * 30);
  bottom: calc(var(--u) * 104);
  z-index: 5;
  padding: calc(var(--u) * 8) 0;
  border-radius: calc(var(--u) * 26);
  border: .5px solid var(--line2);
  background: var(--surf);
  box-shadow: var(--nf-pop);
}

.nfh__res[hidden],
.nfh__none[hidden] {
  display: none;
}

.nfh__hit {
  padding: calc(var(--u) * 16) calc(var(--u) * 28);
  display: grid;
  grid-template-columns: calc(var(--u) * 120) minmax(0, 1fr) calc(var(--u) * 24);
  align-items: center;
  gap: calc(var(--u) * 18);
}

.nfh__hit:hover,
.nfh__hit:focus-visible {
  background: var(--acc-a06);
}

.nfh__kind {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--acc);
}

.nfh__ht {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.nfh__hn {
  font-size: max(12px, calc(var(--u) * 22));
}

.nfh__hn mark {
  background: none;
  color: var(--acc);
  box-shadow: inset 0 -2px 0 var(--acc);
}

.nfh__hs {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.nfh__none {
  padding: calc(var(--u) * 18) calc(var(--u) * 28);
  font-size: max(12px, calc(var(--u) * 20));
  color: var(--body);
}

.nfh__none a {
  color: var(--acc);
}

.nfh__btns {
  display: flex;
  gap: calc(var(--u) * 12);
}

.nfh__home {
  flex: 1;
  height: calc(var(--u) * 66);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 30);
  border-radius: calc(var(--u) * 33);
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 1.68);
}

.nfh__home .btn-acc__dot {
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 50);
}

.nfh__ghost {
  height: calc(var(--u) * 66);
  padding: 0 calc(var(--u) * 30);
  border-radius: calc(var(--u) * 33);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
}

.nfh__ghost:hover {
  color: var(--acc);
}

.nfh__rep {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

.nfh__repbtn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--acc);
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.nfh__repbtn.is-done {
  color: var(--ok);
  cursor: default;
}

/* == 79. 404 — 02 destinations ========================================= */
.nfds {
  gap: calc(var(--u) * 40);
}

.nfds__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: .5px solid var(--line2);
  border-left: .5px solid var(--line2);
}

.nfds__grid > li {
  display: flex;
  border-right: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
}

.nfd {
  width: 100%;
  min-height: calc(var(--u) * 320);
  padding: calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 28);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.nfd:hover {
  background: var(--acc-a04);
}

.nfd.is-hot {
  background: var(--acc);
  color: #fff;
}

.nfd.is-hot:hover {
  background: var(--acc-d);
}

.nfd__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nfd__ic {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border-radius: 50%;
  border: .5px solid var(--nf-ring);
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-hot .nfd__ic {
  border-color: rgba(255, 255, 255, .6);
}

.nfd__n {
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 1.68);
  opacity: .7;
}

.nfd__t {
  margin-top: auto;
  font-size: max(12px, calc(var(--u) * 32));
  letter-spacing: -.02em;
}

.nfd__sub {
  font-size: max(12px, calc(var(--u) * 16));
  line-height: 1.45;
  opacity: .8;
}

.nfd__meta {
  padding-top: calc(var(--u) * 14);
  border-top: .5px solid var(--nf-hair12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  opacity: .85;
}

.is-hot .nfd__meta {
  border-top-color: rgba(255, 255, 255, .4);
}

/* == 80. 404 — 03 you might like ======================================= */
.nfcs {
  gap: calc(var(--u) * 40);
}

.nfcs__all {
  height: calc(var(--u) * 55);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 28);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
}

.nfcs__all:hover {
  color: var(--acc);
}

.nfcs__adot {
  width: calc(var(--u) * 39);
  height: calc(var(--u) * 39);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nfcs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 18);
}

.nfc {
  height: 100%;
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--nf-card);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nfc.is-first,
.nfc:hover {
  border-color: var(--acc);
}

.nfc__ph {
  position: relative;
  height: calc(var(--u) * 300);
  border-bottom: .5px solid var(--nf-hair);
  background: var(--stripes);
  overflow: hidden;
}

.nfc__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fefefe;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.nfc:hover .nfc__img {
  transform: scale(1.04);
}

.nfc__bs {
  position: absolute;
  left: calc(var(--u) * 18);
  top: calc(var(--u) * 18);
  display: flex;
  gap: calc(var(--u) * 6);
}

.nfc__b {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--nf-glass);
  color: var(--ink);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
}

.nfc__b--acc {
  background: var(--acc);
  color: #fff;
}

.nfc__b--ok {
  background: var(--ok);
  color: #fff;
}

.nfc__body {
  padding: calc(var(--u) * 24) calc(var(--u) * 28) calc(var(--u) * 26);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.nfc__meta {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.nfc__name {
  font-size: max(12px, calc(var(--u) * 30));
  letter-spacing: -.02em;
}

.nfc:hover .nfc__name {
  color: var(--acc);
}

.nfc__foot {
  padding-top: calc(var(--u) * 16);
  border-top: .5px solid var(--nf-hair);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.nfc__pr {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.nfc__mo {
  font-size: max(12px, calc(var(--u) * 28));
  white-space: nowrap;
}

.nfc__per {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--acc);
}

.nfc__price {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.nfc__view {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
}

.nfc__vdot {
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* == 81. 404 — tablet and phone ======================================== */
@media (max-width: 1199px) {
  /* the stage keeps the artboard's proportions: the car stays on the 0 */
  .nfh__stage {
    height: auto;
    aspect-ratio: 2440 / 760;
  }

  .nfh__car {
    width: 25.4%;
    height: 36.8%;
    border-radius: 999px;
  }

  .nfh__road {
    top: calc(52% + 19.7%);
    width: 36.9%;
    height: auto;
    aspect-ratio: 900 / 120;
  }

  .nfh__top {
    flex-wrap: wrap;
    gap: 10px 20px;
  }

  .nfh__bot {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .nfh__h1 {
    font-size: 96px;
  }

  .nfh__search {
    height: 76px;
    padding-left: 24px;
  }

  .nfh__in {
    height: 70px;
    font-size: 22px;
  }

  .nfh__go {
    width: 60px;
    height: 60px;
  }

  .nfh__res {
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
  }

  .nfh__btns {
    flex-wrap: wrap;
  }

  .nfh__home {
    flex-basis: 100%;
  }

  .nfh__ghost {
    flex: 1;
    justify-content: center;
  }

  .nfds__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nfd {
    min-height: 260px;
  }

  .nfcs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nfc__ph {
    height: auto;
    aspect-ratio: 2 / 1;
  }
}

@media (max-width: 767px) {
  .nfh__url {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nfh__req {
    max-width: 100%;
    min-width: 0;
  }

  .nfh__h1 {
    font-size: 64px;
  }

  .nfh__txt {
    font-size: 18px;
  }

  .nfh__search {
    padding-left: 18px;
    gap: 10px;
  }

  .nfh__field {
    gap: 10px;
  }

  .nfh__in {
    font-size: 18px;
  }

  .nfh__hit {
    padding: 12px 16px;
    grid-template-columns: 70px minmax(0, 1fr) 16px;
    gap: 10px;
  }

  .nfh__ghost {
    padding: 0 16px;
  }

  .nfh__rep {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .nfds__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nfd {
    min-height: 220px;
    padding: 20px 16px;
  }

  .nfd__t {
    font-size: 22px;
  }

  .nfcs .shead__r {
    width: 100%;
  }

  .nfcs__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* == 82. Listing v2 — shared =========================================== */
/* Builds on 20-listing.css: the pickers, suggestions, chips, pagination and
   the request section are the Listing v1 components. */
:root {
  --l2-line: rgba(17, 20, 24, .18);
  --l2-hair: rgba(17, 20, 24, .12);
  --l2-track: rgba(17, 20, 24, .08);
  --l2-side: #fbfbfc;
  --l2-kwline: rgba(17, 20, 24, .2);
  --l2-shadow: 0 30px 80px rgba(17, 20, 24, .08);
  --l2-lift: 0 40px 90px rgba(17, 20, 24, .16);
}

[data-theme="dark"] {
  --l2-line: rgba(242, 243, 245, .14);
  --l2-hair: rgba(242, 243, 245, .12);
  --l2-track: rgba(242, 243, 245, .1);
  --l2-side: #181a1f;
  --l2-kwline: rgba(242, 243, 245, .2);
  --l2-shadow: 0 30px 80px rgba(0, 0, 0, .3);
  --l2-lift: 0 40px 90px rgba(0, 0, 0, .45);
}

.i40 { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }

/* live dot */
.l2live {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  color: var(--acc);
  white-space: nowrap;
}

.l2live__d {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 calc(var(--u) * 4) var(--acc-a16);
  animation: lx-pulse 2s ease-in-out infinite;
}

.l2live__d--ok {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  background: var(--ok);
  box-shadow: 0 0 0 calc(var(--u) * 5) rgba(47, 163, 107, .16);
  animation: none;
}

/* badges on photos */
.l2bs {
  position: absolute;
  left: calc(var(--u) * 20);
  top: calc(var(--u) * 20);
  display: flex;
  gap: calc(var(--u) * 6);
}

.l2b {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 13);
  border-radius: calc(var(--u) * 16);
  background: var(--lx-glass);
  color: var(--ink);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
}

.l2b--acc { background: var(--acc); color: #fff; }
.l2b--ok { background: var(--ok); color: #fff; }
.l2b--ink { background: #111418; color: #fff; }

/* green price-drop ribbon */
.l2drop {
  position: absolute;
  left: 0;
  bottom: calc(var(--u) * 30);
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 20);
  border-radius: 0 calc(var(--u) * 20) calc(var(--u) * 20) 0;
  background: var(--ok);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
}

.l2old {
  opacity: .7;
}

/* spec bar with the class-average tick */
.l2bar {
  position: relative;
  display: block;
  height: calc(var(--u) * 3);
  border-radius: 2px;
  background: var(--l2-track);
}

.l2bar__f {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: var(--acc);
}

.l2bar__f.is-good {
  background: var(--ok);
}

.l2bar__avg {
  position: absolute;
  top: calc(var(--u) * -3);
  width: 1px;
  height: calc(var(--u) * 9);
  background: var(--ink);
  opacity: .5;
}

/* segmented deal meter with a pin */
.l2m {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.l2m__track {
  position: relative;
  height: calc(var(--u) * 10);
}

.l2m__segs {
  position: absolute;
  inset: calc(var(--u) * 3) 0;
  display: flex;
  gap: 3px;
}

.l2m__segs span {
  flex: 1;
  border-radius: 2px;
}

.l2m__segs span:nth-child(1) { background: var(--acc); }
.l2m__segs span:nth-child(2) { background: var(--acc-a40); }
.l2m__segs span:nth-child(3) { background: rgba(128, 132, 140, .35); }
.l2m__segs span:nth-child(4) { background: rgba(47, 163, 107, .55); }
.l2m__segs span:nth-child(5) { background: var(--ok); }

.l2m__pin {
  position: absolute;
  top: calc(var(--u) * -4);
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  margin-left: calc(var(--u) * -9);
  border-radius: 50%;
  border: 2px solid var(--acc);
  background: var(--surf);
}

.l2m__pin.is-ok {
  border-color: var(--ok);
}

.l2m__row {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  white-space: nowrap;
}

.l2m__deal {
  color: var(--acc);
}

.l2m__deal.is-ok {
  color: var(--ok);
}

.l2m__mkt {
  color: var(--mute);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* == 83. Listing v2 — 01 two-tier console ============================== */
.l2s {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.l2s__card {
  position: relative;
  border-radius: calc(var(--u) * 44);
  border: .5px solid var(--l2-line);
  background: var(--surf);
  box-shadow: var(--l2-shadow);
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 600);
}

.l2s__ghost {
  position: absolute;
  right: calc(var(--u) * 640);
  top: calc(var(--u) * -40);
  width: calc(var(--u) * 1200);
  height: calc(var(--u) * 300);
  overflow: visible;
  opacity: .9;
  pointer-events: none;
}

.l2s__ghost text {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  font-size: 300px;
  fill: none;
  stroke: var(--acc-a12);
  stroke-width: 1;
}

.l2s__l {
  position: relative;
  min-width: 0;
  padding: calc(var(--u) * 40) calc(var(--u) * 48) calc(var(--u) * 36);
  border-right: .5px solid var(--l2-hair);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.l2s__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
}

.l2s__eb {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.l2s__rule {
  width: calc(var(--u) * 40);
  height: .5px;
  background: var(--mute);
}

.l2s__conds {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--l2-hair);
  display: flex;
}

.l2s__cond {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border: 0;
  border-radius: calc(var(--u) * 18);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.32);
  cursor: pointer;
}

.l2s__cond:hover {
  color: var(--acc);
}

.l2s__cond.is-on {
  background: var(--acc);
  color: #fff;
}

.l2s__new {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  white-space: nowrap;
}

/* keyword line with the live count */
.l2s__kw {
  position: relative;
  height: calc(var(--u) * 112);
  border-bottom: 1px solid var(--l2-kwline);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
  transition: border-color .2s;
}

.l2s__kw:has(.l2s__in:not(:placeholder-shown)) {
  border-bottom-color: var(--acc);
}

.l2s__line {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
  color: var(--acc);
  cursor: text;
}

.l2s__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 104);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 48));
  letter-spacing: -.025em;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.l2s__in::placeholder {
  color: var(--mute);
}

.l2s__in::-webkit-search-cancel-button {
  display: none;
}

.l2s__clear {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  border: .5px solid var(--l2-hair);
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 18));
  flex-shrink: 0;
  cursor: pointer;
}

.l2s__clear:hover {
  color: var(--acc);
}

.l2s__clear[hidden] {
  display: none;
}

.l2s__count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 2);
  flex-shrink: 0;
}

.l2s__cn {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  font-size: max(12px, calc(var(--u) * 64));
  line-height: .9;
  color: var(--acc-a10);
  -webkit-text-stroke: 1px var(--acc);
  white-space: nowrap;
}

.l2s__cl {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2);
  color: var(--mute);
}

.l2s__drop {
  left: calc(var(--u) * 60);
  top: calc(var(--u) * 124);
  z-index: 10;
  width: calc(var(--u) * 860);
  padding: calc(var(--u) * 12) 0;
  border-radius: calc(var(--u) * 28);
  border-color: var(--l2-line);
}

.l2s__drop .lsc__dt {
  padding: calc(var(--u) * 6) calc(var(--u) * 28) calc(var(--u) * 10);
  letter-spacing: .2em;
}

.l2s__drop .lsc__sug {
  padding: calc(var(--u) * 14) calc(var(--u) * 28);
  grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr) auto;
}

.l2s__drop .lsc__si {
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  font-size: max(12px, calc(var(--u) * 14));
}

.l2s__drop .lsc__bar {
  display: none;
}

/* second tier: four tiles and the search button */
.l2s__tier {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: calc(var(--u) * 12);
  align-items: stretch;
}

.l2s__tile {
  border-left: 0;
}

.l2s__tb {
  width: 100%;
  height: calc(var(--u) * 92);
  margin: 0;
  padding: 0 calc(var(--u) * 22);
  border: .5px solid var(--line);
  border-radius: calc(var(--u) * 26);
  background: var(--bg);
  transition: border-color .2s, background-color .2s;
}

.l2s__tb:hover {
  border-color: var(--acc);
  background: var(--bg);
}

.l2s__tile.is-open .l2s__tb {
  border-color: var(--acc);
  background: var(--acc-a06);
}

.l2s__tile.is-set .l2s__tb {
  border-color: var(--acc);
}

.l2s__tb .lsc__sl {
  gap: calc(var(--u) * 6);
}

.l2s__tv {
  font-size: max(12px, calc(var(--u) * 23));
}

.l2s__tb .lsc__mark {
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
}

.l2s__pick {
  top: calc(100% + calc(var(--u) * 12));
  z-index: 10;
  width: calc(var(--u) * 540);
  padding: calc(var(--u) * 20);
  border-radius: calc(var(--u) * 28);
  border-color: var(--l2-line);
  gap: calc(var(--u) * 8);
}

.l2s__tile:nth-child(4) .l2s__pick {
  left: auto;
  right: 0;
}

.l2s__pick .lsc__ph {
  padding: 0 calc(var(--u) * 6) calc(var(--u) * 4);
  letter-spacing: .2em;
}

.l2s__pick .lsc__opt {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 18));
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 150) calc(var(--u) * 50);
  gap: calc(var(--u) * 14);
}

.l2s__pick .lsc__on {
  font-size: max(12px, calc(var(--u) * 13));
  opacity: .7;
}

.l2s__go {
  height: calc(var(--u) * 92);
  padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 36);
  border: 0;
  border-radius: calc(var(--u) * 46);
  background: var(--acc);
  color: #fff;
  font: inherit;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
  white-space: nowrap;
  box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) var(--acc-a30);
  cursor: pointer;
}

.l2s__go:hover {
  background: var(--acc-d);
}

.l2s__go .lsc__est {
  letter-spacing: .2em;
}

.l2s__gl {
  font-size: max(12px, calc(var(--u) * 18));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
}

.l2s__gdot {
  width: calc(var(--u) * 68);
  height: calc(var(--u) * 68);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 22));
}

.l2s__quick {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.l2s__quick .lsc__ql {
  margin-right: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 11));
}

.l2s__chip {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 22);
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
}

.l2s__chip .lsc__chn {
  height: calc(var(--u) * 26);
  min-width: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 7);
  border-radius: calc(var(--u) * 13);
  font-size: max(12px, calc(var(--u) * 11));
}

/* right column: recent searches and the price alert */
.l2s__r {
  position: relative;
  min-width: 0;
  padding: calc(var(--u) * 40) calc(var(--u) * 42) calc(var(--u) * 36);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.l2s__rh {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
}

.l2s__recs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.l2s__rec {
  width: 100%;
  padding: calc(var(--u) * 16) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--l2-hair);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 6) calc(var(--u) * 14);
  align-items: center;
  cursor: pointer;
}

.l2s__rec:hover {
  border-color: var(--acc);
}

.l2s__rt {
  font-size: max(12px, calc(var(--u) * 20));
}

.l2s__rn {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--acc);
  white-space: nowrap;
}

.l2s__rw {
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.l2s__rnew {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.32);
  color: var(--ok);
}

.l2s__alert {
  margin-top: auto;
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  border: .5px solid var(--acc-a35);
  background: var(--acc-a04);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.l2s__alert.is-on {
  border-color: var(--ok);
  background: rgba(47, 163, 107, .08);
}

.l2s__on,
.l2s__alert.is-on .l2s__off {
  display: none;
}

.l2s__alert.is-on .l2s__on {
  display: inline;
}

.l2s__at {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.l2s__aic {
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: max(12px, calc(var(--u) * 18));
}

.is-on .l2s__aic {
  background: var(--ok);
}

.l2s__att {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.l2s__atl {
  font-size: max(12px, calc(var(--u) * 19));
}

.l2s__ats {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.l2s__abtn {
  height: calc(var(--u) * 54);
  border-radius: calc(var(--u) * 27);
  border: .5px solid var(--acc);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  cursor: pointer;
}

.l2s__abtn:hover {
  background: var(--acc-d);
}

.is-on .l2s__abtn {
  border-color: rgba(128, 132, 140, .45);
  background: transparent;
  color: var(--ink);
}

/* the row under the card */
.l2s__row {
  padding: 0 calc(var(--u) * 10);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.l2s__row .lsc__showing {
  letter-spacing: .2em;
}

.l2s__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.l2s__active[hidden] {
  display: none;
}

.l2s__active .lsc__ac {
  height: calc(var(--u) * 40);
  font-size: max(12px, calc(var(--u) * 15));
}

.l2s__active .lsc__clearall {
  letter-spacing: .2em;
}

.l2s__views {
  margin-left: auto;
}

.l2s__views .lsc__view {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 20);
}

/* == 84. Listing v2 — 02 spec cards ==================================== */
.l2grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 22);
  align-items: start;
}

.l2grid[hidden],
.l2list[hidden] {
  display: none;
}

.l2c,
.l2r {
  min-width: 0;
  border-radius: calc(var(--u) * 34);
  border: .5px solid var(--l2-line);
  background: var(--surf);
  overflow: hidden;
  transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease), border-color .35s;
}

.l2c {
  display: flex;
  flex-direction: column;
}

.l2c:hover,
.l2r:hover {
  border-color: var(--acc);
  box-shadow: 0 0 0 .5px var(--acc), var(--l2-lift);
  transform: translateY(calc(var(--u) * -8));
}

.l2r:hover {
  transform: translateY(calc(var(--u) * -6));
}

.l2c.is-cmp,
.l2r.is-cmp {
  border-color: var(--acc);
  box-shadow: 0 0 0 .5px var(--acc);
}

.l2c__ph,
.l2r__ph {
  position: relative;
  height: calc(var(--u) * 440);
  background: var(--stripes);
  overflow: hidden;
  isolation: isolate;
}

.l2c__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fefefe;
  transition: transform .6s var(--lx-ease);
}

[data-theme="dark"] .l2c__img {
  filter: brightness(.9);
}

.l2c:hover .l2c__img,
.l2r:hover .l2c__img {
  transform: scale(1.05);
}

.l2c:hover .lcd__nav,
.l2r:hover .lcd__nav {
  opacity: 1;
}

.l2c__acts {
  position: absolute;
  right: calc(var(--u) * 18);
  top: calc(var(--u) * 18);
  display: flex;
  gap: calc(var(--u) * 8);
}

.l2c__acts .lcd__cmp {
  padding: 0 calc(var(--u) * 16);
  letter-spacing: .12em;
}

.l2c__360 {
  position: absolute;
  right: calc(var(--u) * 20);
  bottom: calc(var(--u) * 24);
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 16);
  background: var(--lx-glass);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  white-space: nowrap;
}

.l2c__body {
  padding: calc(var(--u) * 26) calc(var(--u) * 28) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.l2c__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
  white-space: nowrap;
}

.l2c__loc {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
}

.l2c__nm {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.l2c__name {
  font-size: max(12px, calc(var(--u) * 38));
  letter-spacing: -.03em;
  line-height: 1.1;
  transition: color .25s;
}

.l2c:hover .l2c__name,
.l2r:hover .l2c__name {
  color: var(--acc);
}

.l2c__trim {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.l2c__specs {
  border-top: .5px solid var(--l2-hair);
  border-bottom: .5px solid var(--l2-hair);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.l2c__sp {
  padding: calc(var(--u) * 14) 0 calc(var(--u) * 14) calc(var(--u) * 14);
  border-left: .5px solid var(--l2-hair);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.l2c__sp:first-child {
  padding-left: 0;
  border-left: 0;
}

.l2c__sk {
  font-size: max(12px, calc(var(--u) * 10));
  line-height: calc(var(--u) * 13); /* absorbs the 12px floor so the card keeps its height */
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  color: var(--mute);
}

.l2c__sv {
  font-size: max(12px, calc(var(--u) * 20));
  white-space: nowrap;
}

.l2c__price {
  padding: calc(var(--u) * 22) calc(var(--u) * 28) calc(var(--u) * 24);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--u) * 14);
}

.l2c__pr {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.l2c__mo {
  font-size: max(12px, calc(var(--u) * 40));
  letter-spacing: -.03em;
  white-space: nowrap;
}

.l2c__per {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.l2c__full {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.l2c__ctas {
  display: flex;
  gap: calc(var(--u) * 8);
}

.l2c__td {
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 27);
  border: .5px solid var(--l2-hair);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
}

.l2c__td:hover {
  color: var(--acc);
}

.l2c__go {
  width: calc(var(--u) * 54);
  height: calc(var(--u) * 54);
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
  transition: background-color .25s, color .25s;
}

.l2c:hover .l2c__go {
  background: var(--acc);
  color: #fff;
}

.l2c__foot {
  padding: calc(var(--u) * 14) calc(var(--u) * 28);
  border-top: .5px solid var(--l2-hair);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

/* == 85. Listing v2 — 02 spec rows ===================================== */
.l2list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.l2r {
  display: grid;
  grid-template-columns: calc(var(--u) * 680) minmax(0, 1fr) calc(var(--u) * 480);
}

.l2r__ph {
  height: auto;
  min-height: calc(var(--u) * 400);
}

.l2r__mid {
  min-width: 0;
  padding: calc(var(--u) * 32) calc(var(--u) * 40);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.l2r__name {
  font-size: max(12px, calc(var(--u) * 48));
  letter-spacing: -.035em;
  line-height: 1.05;
}

.l2r .l2c__nm {
  gap: calc(var(--u) * 6);
}

.l2r__trim {
  font-size: max(12px, calc(var(--u) * 17));
}

.l2r__specs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.l2r__specs .l2c__sp {
  padding: calc(var(--u) * 16) 0 calc(var(--u) * 16) calc(var(--u) * 16);
  gap: calc(var(--u) * 7);
}

.l2r__specs .l2c__sp:first-child {
  padding-left: 0;
}

.l2r__specs .l2c__sv {
  font-size: max(12px, calc(var(--u) * 22));
}

.l2r__specs .l2bar {
  margin-right: calc(var(--u) * 14);
}

.l2r .lrw__ft {
  border-color: var(--l2-hair);
}

.l2r__note {
  margin-top: auto;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

.l2r__side {
  min-width: 0;
  padding: calc(var(--u) * 32) calc(var(--u) * 36);
  border-left: .5px solid var(--l2-hair);
  background: var(--l2-side);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.l2r__pr {
  margin-top: calc(var(--u) * 6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.l2r__mo {
  font-size: max(12px, calc(var(--u) * 56));
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}

.l2r__per {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--acc);
}

.l2r__full {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.l2r__del {
  padding: calc(var(--u) * 14) 0;
  border-top: .5px solid var(--l2-hair);
  border-bottom: .5px solid var(--l2-hair);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 14));
}

.l2r__dl {
  color: var(--mute);
}

.l2r__ctas .lrw__view {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 26);
}

.l2r__ctas .lrw__vdot {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
}

.l2r__ctas .lrw__cmp,
.l2r__ctas .lrw__td {
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 26);
}

.l2r__ctas .lrw__td {
  border-color: var(--l2-hair);
}

.l2r:hover .lrw__view {
  background: var(--acc);
  color: #fff;
}

.l2r:hover .lrw__vdot {
  background: #fff;
  color: var(--acc);
}

@media (prefers-reduced-motion: reduce) {
  .l2live__d {
    animation: none;
  }

  .l2c:hover,
  .l2r:hover {
    transform: none;
  }
}

/* == 86. Listing v2 — tablet and phone ================================= */
@media (max-width: 1199px) {
  .l2s__card {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 32px;
  }

  .l2s__ghost {
    display: none;
  }

  .l2s__l {
    padding: 26px 24px;
    border-right: 0;
    gap: 20px;
  }

  .l2s__head {
    flex-wrap: wrap;
  }

  .l2s__kw {
    height: 80px;
    gap: 14px;
  }

  .l2s__in {
    height: 74px;
    font-size: 30px;
  }

  .l2s__cn {
    font-size: 44px;
  }

  .l2s__drop {
    left: 0;
    top: calc(100% + 8px);
    width: 100%;
  }

  .l2s__tier {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l2s__tb {
    height: 72px;
  }

  .l2s__tv {
    font-size: 18px;
  }

  .l2s__pick,
  .l2s__tile:nth-child(4) .l2s__pick {
    left: 0;
    right: auto;
    width: min(540px, calc(200% + 12px));
  }

  .l2s__tile:nth-child(2n) .l2s__pick {
    left: auto;
    right: 0;
  }

  .l2s__go {
    grid-column: 1 / -1;
    height: 72px;
    padding-left: 26px;
    justify-content: space-between;
  }

  .l2s__gdot {
    width: 54px;
    height: 54px;
  }

  .l2s__quick {
    flex-wrap: wrap;
  }

  .l2s__r {
    padding: 24px;
    border-top: .5px solid var(--l2-hair);
  }

  .l2grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .l2c__ph {
    height: auto;
    aspect-ratio: 790 / 440;
  }

  .l2r {
    grid-template-columns: minmax(0, 1fr);
  }

  .l2r__ph {
    min-height: 0;
    aspect-ratio: 680 / 400;
  }

  .l2r__mid {
    padding: 24px;
  }

  .l2r__side {
    padding: 24px;
    border-left: 0;
    border-top: .5px solid var(--l2-hair);
  }

  .l2r__ctas {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .l2r__ctas .lrw__view,
  .l2r__ctas .lrw__two {
    flex: 1 1 260px;
  }
}

@media (max-width: 767px) {
  .l2s__card {
    border-radius: 24px;
  }

  .l2s__l,
  .l2s__r {
    padding: 20px 16px;
  }

  .l2s__conds {
    width: 100%;
  }

  .l2s__cond {
    flex: 1;
    padding: 0 6px;
  }

  .l2s__new {
    margin-left: 0;
  }

  .l2s__in {
    font-size: 20px;
  }

  .l2s__cn {
    font-size: 30px;
  }

  .l2s__line {
    gap: 10px;
  }

  .l2s__line .ico {
    width: 24px;
    height: 24px;
  }

  /* the tiles fold into a sheet under the Filters button */
  .l2s__tier {
    display: none;
    grid-template-columns: minmax(0, 1fr);
  }

  .js-ls-pill.is-sheet .l2s__tier {
    display: grid;
  }

  .l2s__pick,
  .l2s__tile:nth-child(2n) .l2s__pick,
  .l2s__tile:nth-child(4) .l2s__pick {
    position: static;
    width: auto;
    margin-top: 6px;
    padding: 12px;
    box-shadow: none;
  }

  .l2s__tile {
    flex-direction: column;
    align-items: stretch;
  }

  .l2s__pick .lsc__opt {
    grid-template-columns: minmax(0, 1fr) 70px 40px;
    padding: 0 14px;
    gap: 10px;
  }

  .l2s__quick .lsc__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
  }

  .l2s__row {
    padding: 0;
  }

  .l2s__views {
    margin-left: 0;
  }

  .l2grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .l2c__name {
    font-size: 28px;
  }

  .l2c__price {
    flex-wrap: wrap;
  }

  .l2r__name {
    font-size: 32px;
  }

  .l2r__specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .l2r__specs .l2c__sp:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }

  .l2r__specs .l2c__sp:nth-child(n + 4) {
    border-top: .5px solid var(--l2-hair);
  }

  .l2r__mo {
    font-size: 40px;
  }

  .l2c__meta {
    flex-wrap: wrap;
    white-space: normal;
  }
}

/* == 87. Listing v3 — shared =========================================== */
/* Builds on 20-listing.css and 22-listing2.css (pickers, chips, keyword line,
   badges, ribbon, live dot, pagination, request). */
:root {
  --l3-console: var(--surf);
  --l3-track: #f2f3f5;
  --l3-tile-line: rgba(128, 132, 140, .2);
  --l3-card-line: rgba(128, 132, 140, .3);
  --l3-photo: #e9ebee;
  --l3-frost: rgba(255, 255, 255, .9);
  --l3-ghost: rgba(17, 20, 24, .14);
  --l3-bar: rgba(17, 20, 24, .1);
}

[data-theme="dark"] {
  --l3-console: #111418;
  --l3-track: rgba(242, 243, 245, .05);
  --l3-photo: #1b1e23;
  --l3-frost: rgba(17, 19, 23, .82);
  --l3-bar: rgba(242, 243, 245, .12);
}

/* ghost model names, sized to fit (min(200, 640 / (letters × 1.3)) on the artboard) */
.l3ghost {
  position: absolute;
  left: calc(var(--u) * 28);
  right: calc(var(--u) * 28);
  top: calc(var(--u) * 90);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--l3-ghost);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .4s;
}

.l3ghost--row {
  left: calc(var(--u) * 34);
  right: auto;
  top: auto;
  bottom: calc(var(--u) * -26);
}

.l3ghost--s61 { font-size: calc(var(--u) * 61); }
.l3ghost--s70 { font-size: calc(var(--u) * 70); }
.l3ghost--s82 { font-size: calc(var(--u) * 82); }
.l3ghost--s98 { font-size: calc(var(--u) * 98); }
.l3ghost--s123 { font-size: calc(var(--u) * 123); }
.l3ghost--s164 { font-size: calc(var(--u) * 164); }

.l3nav {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border: 0;
  border-radius: 50%;
  background: var(--lx-glass);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 19));
  cursor: pointer;
}

.l3nav:hover {
  color: var(--acc);
}

.l3nav--64 {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
}

.l3view {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
}

.l3view:hover {
  background: var(--acc-d);
  color: #fff;
}

.l3view__d {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.l3view--58 {
  height: calc(var(--u) * 58);
  border-radius: calc(var(--u) * 29);
}

.l3view--58 .l3view__d {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
}

/* specs with a bar */
.l3specs {
  border-top: .5px solid var(--l2-hair);
  border-bottom: .5px solid var(--l2-hair);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.l3sp {
  padding: calc(var(--u) * 12) 0 calc(var(--u) * 12) calc(var(--u) * 16);
  border-left: .5px solid var(--l2-hair);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
}

.l3sp:first-child {
  padding-left: 0;
  border-left: 0;
}

.l3sp__k {
  font-size: max(12px, calc(var(--u) * 10));
  line-height: calc(var(--u) * 13);
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.6);
  color: var(--mute);
}

.l3sp__v {
  font-size: max(12px, calc(var(--u) * 19));
  white-space: nowrap;
}

.l3sp__bar {
  height: calc(var(--u) * 3);
  margin-right: calc(var(--u) * 10);
  border-radius: 2px;
  background: var(--l3-bar);
  overflow: hidden;
}

.l3sp__f {
  display: block;
  height: 100%;
  background: var(--acc);
}

.l3sp__f.is-good {
  background: var(--ok);
}

.l3specs--row .l3sp {
  padding: calc(var(--u) * 14) 0 calc(var(--u) * 14) calc(var(--u) * 16);
  gap: calc(var(--u) * 6);
}

.l3specs--row .l3sp:first-child {
  padding-left: 0;
}

.l3specs--row .l3sp__v {
  font-size: max(12px, calc(var(--u) * 21));
}

.l3specs--row .l3sp__bar {
  margin-right: calc(var(--u) * 12);
}

/* deal line with a small five-cell meter */
.l3deal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
}

.l3deal__l {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  color: var(--acc);
  white-space: nowrap;
}

.l3deal__l.is-ok {
  color: var(--ok);
}

.l3deal__m {
  display: flex;
  gap: 2px;
}

.l3deal__m span {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 6);
  border-radius: 2px;
  background: rgba(128, 132, 140, .3);
}

.l3deal__m .is-acc { background: var(--acc); }
.l3deal__m .is-ok { background: var(--ok); }

.l3deal__r {
  color: var(--mute);
  white-space: nowrap;
}

/* == 88. Listing v3 — 01 garage console ================================ */
.l3s {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.l3s__card {
  position: relative;
  border-radius: calc(var(--u) * 44);
  border: .5px solid var(--l2-line);
  background: var(--l3-console);
  box-shadow: var(--l2-shadow);
}

.l3s__bar {
  padding: calc(var(--u) * 22) calc(var(--u) * 26) calc(var(--u) * 22) calc(var(--u) * 48);
  border-bottom: .5px solid var(--l2-hair);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.l3s__eb {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
  white-space: nowrap;
}

.l3s__new {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.l3s__conds {
  padding: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 36);
  background: var(--l3-track);
  display: flex;
}

.l3s__cond {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 26);
  border: 0;
  border-radius: calc(var(--u) * 30);
  background: transparent;
  color: var(--ink);
  font: inherit;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .2s;
}

.l3s__cond:hover {
  color: var(--acc);
}

.l3s__cond.is-on {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 20) var(--acc-a30);
}

.l3s__ct {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 1);
}

.l3s__cn {
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
}

.l3s__cs {
  font-size: max(12px, calc(var(--u) * 11));
  letter-spacing: calc(var(--u) * 0.44);
  opacity: .7;
}

.l3s__cc {
  height: calc(var(--u) * 30);
  min-width: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 15);
  background: rgba(128, 132, 140, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 13));
}

.l3s__cond.is-on .l3s__cc {
  background: rgba(255, 255, 255, .22);
}

.l3s__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 1100);
}

.l3s__l {
  position: relative;
  min-width: 0;
  padding: calc(var(--u) * 40) calc(var(--u) * 48);
  border-right: .5px solid var(--l2-hair);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
}

.l3s__kw {
  height: calc(var(--u) * 110);
  gap: calc(var(--u) * 22);
}

.l3s__kw .l2s__line {
  gap: calc(var(--u) * 22);
}

.l3s__in {
  height: calc(var(--u) * 100);
  font-size: max(12px, calc(var(--u) * 50));
  letter-spacing: -.03em;
}

.l3s__drop {
  top: calc(var(--u) * 122);
  width: calc(var(--u) * 820);
}

.l3s__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.l3s__chip {
  height: calc(var(--u) * 46);
  border-radius: calc(var(--u) * 23);
}

.l3s__foot {
  margin-top: auto;
  padding-top: calc(var(--u) * 10);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--u) * 30);
}

.l3s__count {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 18);
}

.l3s__big {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  font-size: max(12px, calc(var(--u) * 180));
  line-height: .82;
  color: var(--acc-a10);
  -webkit-text-stroke: 1.2px var(--acc);
}

.l3s__cl {
  padding-bottom: calc(var(--u) * 8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.l3s__cln {
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3);
}

.l3s__est {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: none;
  letter-spacing: normal;
  color: var(--mute);
  opacity: 1;
}

.l3s__go {
  height: calc(var(--u) * 100);
  padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 42);
  border: 0;
  border-radius: calc(var(--u) * 50);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
  box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 40) var(--acc-a35);
  cursor: pointer;
}

.l3s__go:hover {
  background: var(--acc-d);
}

/* 2 × 2 filter tiles */
.l3s__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
}

.l3s__tile {
  display: block;
  border-left: .5px solid var(--l3-tile-line);
  border-bottom: .5px solid var(--l2-hair);
}

.l3s__tile:last-child,
.l3s__tile:last-child .l3s__tb {
  border-bottom-right-radius: calc(var(--u) * 44);
}

.l3s__tb {
  width: 100%;
  height: 100%;
  min-height: calc(var(--u) * 236);
  padding: calc(var(--u) * 32) calc(var(--u) * 36);
  border: 0;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  cursor: pointer;
  transition: background-color .2s;
}

.l3s__tb:hover {
  background: var(--acc-a03);
}

.l3s__tile.is-set .l3s__tb {
  background: var(--acc-a03);
}

.l3s__tile.is-open .l3s__tb {
  background: var(--acc-a06);
}

.l3s__th {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--mute);
}

.l3s__tl {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.l3s__mark {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border: .5px solid var(--l2-hair);
}

.l3s__tv {
  font-size: max(12px, calc(var(--u) * 44));
  letter-spacing: -.025em;
}

.l3s__share {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.l3s__sbar {
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: rgba(128, 132, 140, .18);
  overflow: hidden;
}

.l3s__barf {
  display: block;
  height: 100%;
  background: var(--acc);
  transition: width .3s;
}

.l3s__st {
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.l3s__pick {
  top: calc(100% + calc(var(--u) * 10));
}

/* == 89. Listing v3 — 02 full-bleed cards ============================== */
.l3grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 22);
}

.l3list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.l3grid[hidden],
.l3list[hidden] {
  display: none;
}

.l3c,
.l3r {
  position: relative;
  min-width: 0;
  border: .5px solid var(--l3-card-line);
  overflow: hidden;
  transition: transform .4s var(--lx-ease), box-shadow .4s var(--lx-ease), border-color .4s;
}

.l3c {
  height: calc(var(--u) * 780);
  border-radius: calc(var(--u) * 38);
  background: var(--l3-photo);
}

.l3c:hover,
.l3r:hover {
  border-color: var(--acc);
  box-shadow: 0 0 0 .5px var(--acc), var(--l2-lift);
  transform: translateY(calc(var(--u) * -10));
}

.l3r:hover {
  transform: translateY(calc(var(--u) * -6));
}

.l3c.is-cmp,
.l3r.is-cmp {
  border-color: var(--acc);
  box-shadow: 0 0 0 .5px var(--acc);
}

.l3c__ph {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

.l3c__zoom {
  position: absolute;
  inset: 0;
  transition: transform .7s var(--lx-ease);
}

/* the photo fills the top of the card; the frosted panel sits over the rest */
.l3c__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 72%;
  object-fit: cover;
  background: #fefefe;
}

[data-theme="dark"] .l3c__img,
[data-theme="dark"] .l3r__img {
  filter: brightness(.9);
}

.l3c:hover .l3c__zoom {
  transform: scale(1.06);
}

.l3c:hover .l3ghost,
.l3r:hover .l3ghost {
  opacity: .35;
}

.l3c .l2bs,
.l3r .l2bs {
  left: calc(var(--u) * 22);
  top: calc(var(--u) * 22);
}

.l3r .l2bs {
  left: calc(var(--u) * 26);
  top: calc(var(--u) * 26);
}

.l3c .l2b,
.l3r .l2b {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
}

.l3c__acts {
  position: absolute;
  right: calc(var(--u) * 22);
  top: calc(var(--u) * 22);
  display: flex;
  gap: calc(var(--u) * 8);
}

.l3c__cmp {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 18);
  letter-spacing: .12em;
}

.l3c__fav {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
}

.l3drop {
  top: calc(var(--u) * 84);
  bottom: auto;
  padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 22);
}

.l3r .l3drop {
  padding-left: calc(var(--u) * 26);
}

.l3c__navs {
  position: absolute;
  left: calc(var(--u) * 20);
  right: calc(var(--u) * 20);
  top: 42%;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.l3c:hover .l3c__navs,
.l3c__ph:focus-within .l3c__navs {
  opacity: 1;
  pointer-events: auto;
}

.l3c__panel {
  position: absolute;
  left: calc(var(--u) * 16);
  right: calc(var(--u) * 16);
  bottom: calc(var(--u) * 16);
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--l2-hair);
  background: var(--l3-frost);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.l3c__panel .lx-dots {
  position: static;
  margin: calc(var(--u) * -10) 0 calc(var(--u) * 4);
  padding: 0;
}

.l3c__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.l3c__name {
  min-width: 0;
  font-size: max(12px, calc(var(--u) * 36));
  letter-spacing: -.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .25s;
}

.l3c:hover .l3c__name,
.l3r:hover .l3r__name {
  color: var(--acc);
}

.l3c__yl {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
  white-space: nowrap;
}

/* the panel opens on hover: grid rows 0fr → 1fr */
.l3c__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--lx-ease);
}

.l3c:hover .l3c__more,
.l3c:focus-within .l3c__more {
  grid-template-rows: 1fr;
}

.l3c__mi {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.l3c__mi > :last-child {
  margin-bottom: calc(var(--u) * 4);
}

.l3c__trim {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.l3c__pr {
  padding-top: calc(var(--u) * 16);
  border-top: .5px solid var(--l2-hair);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.l3c__price {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.l3c__mo {
  font-size: max(12px, calc(var(--u) * 34));
  white-space: nowrap;
}

.l3c__per {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--acc);
}

.l3c__full {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.l3c__ctas {
  display: flex;
  gap: calc(var(--u) * 8);
}

.l3c__td {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--l2-hair);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s, color .25s;
}

.l3c:hover .l3c__td,
.l3c:focus-within .l3c__td {
  opacity: 1;
}

.l3c__td:hover {
  color: var(--acc);
}

/* == 90. Listing v3 — 02 cinematic rows ================================ */
.l3r {
  height: calc(var(--u) * 470);
  border-radius: calc(var(--u) * 40);
  background: var(--surf);
  display: grid;
  grid-template-columns: calc(var(--u) * 760) minmax(0, 1fr);
}

.l3r__ph {
  position: relative;
  overflow: hidden;
  background: var(--l3-photo);
  isolation: isolate;
}

.l3r__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fefefe;
}

.l3r:hover .l3c__zoom {
  transform: scale(1.05);
}

.l3r__fav {
  position: absolute;
  right: calc(var(--u) * 24);
  top: calc(var(--u) * 24);
}

.l3r__fav .l3c__fav {
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 50);
}

.l3r__navs {
  position: absolute;
  right: calc(var(--u) * 24);
  bottom: calc(var(--u) * 24);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  opacity: 0;
  transform: translateX(calc(var(--u) * 40));
  pointer-events: none;
  transition: opacity .3s, transform .35s var(--lx-ease);
}

.l3r:hover .l3r__navs,
.l3r__ph:focus-within .l3r__navs {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.l3r__th {
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 64);
}

.l3r .lx-dots {
  padding: 0 calc(var(--u) * 40);
  transition: opacity .3s;
}

.l3r:hover .lx-dots {
  opacity: 0;
}

.l3r__info {
  position: relative;
  min-width: 0;
  padding: calc(var(--u) * 34) calc(var(--u) * 40);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.l3r__nm {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.l3r__name {
  font-size: max(12px, calc(var(--u) * 52));
  letter-spacing: -.04em;
  line-height: 1;
  transition: color .25s;
}

.l3r__trim {
  font-size: max(12px, calc(var(--u) * 17));
  color: var(--body);
}

.l3r .l3deal__m span {
  width: calc(var(--u) * 12);
}

.l3r__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--u) * 16);
}

.l3r__mo {
  font-size: max(12px, calc(var(--u) * 50));
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
}

.l3r__per {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--acc);
}

.l3r__full {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.l3r__ctas {
  display: flex;
  gap: calc(var(--u) * 8);
}

.l3r__cmp,
.l3r__td {
  height: calc(var(--u) * 58);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 29);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.l3r__cmp {
  border: .5px solid var(--lx-soft);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.l3r__cmp[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.l3r__cmp.is-full {
  opacity: .6;
  cursor: not-allowed;
}

.l3r__td {
  padding: 0 calc(var(--u) * 18);
  border: .5px solid var(--l2-hair);
}

.l3r__cmp:hover,
.l3r__td:hover {
  color: var(--acc);
}

.l3r__cmp[aria-pressed="true"]:hover {
  color: #fff;
}

/* touch screens: no hover, so the controls and the full panel stay open */
@media (hover: none) {
  .l3c__navs,
  .l3r__navs {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .l3c__more {
    grid-template-rows: 1fr;
  }

  .l3c__td {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l3c:hover,
  .l3r:hover {
    transform: none;
  }
}

/* == 91. Listing v3 — tablet and phone ================================= */
@media (max-width: 1199px) {
  .l3s__card {
    border-radius: 32px;
  }

  .l3s__bar {
    padding: 18px 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .l3s__conds {
    max-width: 100%;
    overflow-x: auto;
  }

  .l3s__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .l3s__l {
    padding: 24px 20px;
    border-right: 0;
  }

  .l3s__kw {
    height: 80px;
  }

  .l3s__in {
    height: 74px;
    font-size: 30px;
  }

  .l3s__drop {
    top: calc(100% + 8px);
    width: 100%;
  }

  .l3s__big {
    font-size: 110px;
  }

  .l3s__tiles {
    border-top: .5px solid var(--l2-hair);
  }

  .l3s__tile:nth-child(odd) {
    border-left: 0;
  }

  .l3s__tile:nth-child(3),
  .l3s__tile:nth-child(3) .l3s__tb {
    border-bottom-left-radius: 32px;
  }

  .l3s__tile:last-child,
  .l3s__tile:last-child .l3s__tb {
    border-bottom-right-radius: 32px;
  }

  .l3s__tb {
    min-height: 150px;
    padding: 20px;
  }

  .l3s__tv {
    font-size: 26px;
  }

  .l3s__tile:nth-child(2n) .l3s__pick {
    left: auto;
    right: 0;
  }

  .l3s__pick {
    width: min(540px, calc(200% + 1px));
  }

  /* cards: the photo on top, the panel below and always open */
  .l3grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .l3c {
    height: auto;
  }

  .l3c__ph {
    position: static;
    display: flex;
    flex-direction: column;
  }

  .l3c__zoom {
    position: relative;
    inset: auto;
    display: block;
    aspect-ratio: 790 / 500;
    overflow: hidden;
  }

  .l3c__img {
    height: 100%;
  }

  .l3c:hover .l3c__zoom {
    transform: none;
  }

  .l3c__panel {
    position: static;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--surf);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .l3c__more {
    grid-template-rows: 1fr;
  }

  .l3c__td {
    opacity: 1;
  }

  .l3c__navs {
    top: 22%;
  }

  .l3ghost {
    top: 70px;
  }

  .l3r {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .l3r__ph {
    aspect-ratio: 760 / 470;
  }

  .l3r__info {
    padding: 24px;
  }

  .l3r__foot {
    flex-wrap: wrap;
  }

  .l3r__ctas {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .l3s__eb {
    flex-wrap: wrap;
    white-space: normal;
  }

  .l3s__conds {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }

  .l3s__cond {
    height: 52px;
    padding: 0 14px;
    justify-content: space-between;
  }

  .l3s__cs {
    display: none;
  }

  .l3s__in {
    font-size: 20px;
  }

  .l3s__kw .l2s__line .ico {
    width: 24px;
    height: 24px;
  }

  .l3s__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .l3s__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .l3s__big {
    font-size: 80px;
  }

  .l3s__go {
    height: 72px;
    padding-left: 26px;
    justify-content: space-between;
  }

  .l3s__go .lsc__gdot {
    width: 54px;
    height: 54px;
  }

  /* the tiles fold into a sheet under the Filters button */
  .l3s__tiles {
    display: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .js-ls-pill.is-sheet .l3s__tiles {
    display: grid;
  }

  .l3s__tile,
  .l3s__tile:nth-child(odd) {
    border-left: 0;
  }

  .l3s__tile:nth-child(3),
  .l3s__tile:nth-child(3) .l3s__tb {
    border-bottom-left-radius: 0;
  }

  .l3s__tile:last-child,
  .l3s__tile:last-child .l3s__tb {
    border-radius: 0 0 24px 24px;
  }

  .l3s__pick,
  .l3s__tile:nth-child(2n) .l3s__pick {
    position: static;
    width: auto;
    margin: 6px 12px 12px;
    padding: 12px;
    box-shadow: none;
  }

  .l3s__pick .lsc__opt {
    grid-template-columns: minmax(0, 1fr) 70px 40px;
    padding: 0 14px;
    gap: 10px;
  }

  .l3grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .l3c__hd {
    flex-direction: column;
    gap: 4px;
  }

  .l3c__name {
    max-width: 100%;
    font-size: 26px;
  }

  .l3specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l3sp:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .l3sp:nth-child(n + 3) {
    border-top: .5px solid var(--l2-hair);
  }

  .l3deal {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .l3c__pr {
    flex-wrap: wrap;
  }

  .l3r__name {
    font-size: 32px;
  }

  .l3r__mo {
    font-size: 36px;
  }

  .l3r__th {
    display: none;
  }
}

/* == 92. Listing v4 — shared =========================================== */
/* Toolbar + sticky filter sidebar + results. The list rows come from
   23-listing3.css, pagination and the request from 20-listing.css. */
:root {
  --l4-line: rgba(17, 20, 24, .14);
  --l4-field: rgba(17, 20, 24, .2);
  --l4-count: rgba(17, 20, 24, .07);
  --l4-pop: var(--surf);
}

[data-theme="dark"] {
  --l4-line: rgba(242, 243, 245, .14);
  --l4-field: rgba(242, 243, 245, .16);
  --l4-count: rgba(242, 243, 245, .08);
  --l4-pop: #1b1e23;
}

body.is-locked {
  overflow: hidden;
}

/* the sidebar is sticky: the section must clip, never hide, its overflow */
.l4 {
  overflow: clip;
}

/* == 93. Listing v4 — toolbar ========================================== */
.l4t {
  padding-bottom: calc(var(--u) * 40);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 24);
}

.l4t__tabs {
  padding: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 40);
  border: .5px solid var(--l2-line);
  background: var(--surf);
  display: flex;
}

.l4t__tab {
  height: calc(var(--u) * 70);
  padding: 0 calc(var(--u) * 26) 0 calc(var(--u) * 30);
  border: 0;
  border-radius: calc(var(--u) * 35);
  background: transparent;
  color: var(--ink);
  font: inherit;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s, color .25s, box-shadow .25s;
}

.l4t__tab:hover {
  color: var(--acc);
}

.l4t__tab.is-on {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 20) var(--acc-a24);
}

.l4t__tt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 2);
}

.l4t__tn {
  font-size: max(12px, calc(var(--u) * 16));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
}

.l4t__ts {
  font-size: max(12px, calc(var(--u) * 11));
  letter-spacing: calc(var(--u) * 0.22);
  opacity: .7;
}

.l4t__tc {
  height: calc(var(--u) * 32);
  min-width: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 16);
  background: var(--l4-count);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.l4t__tab.is-on .l4t__tc {
  background: rgba(255, 255, 255, .22);
}

.l4t__r {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.l4t__range {
  margin-right: calc(var(--u) * 6);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 2);
}

.l4t__rn {
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.1);
  white-space: nowrap;
}

.l4t__up {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  color: var(--mute);
  white-space: nowrap;
}

.l4t__ud {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: var(--ok);
}

.l4t__save,
.l4t__sortbtn,
.l4t__perbtn,
.l4t__filters {
  height: calc(var(--u) * 62);
  border-radius: calc(var(--u) * 31);
  border: .5px solid var(--l2-line);
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  display: flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
}

.l4t__save {
  padding: 0 calc(var(--u) * 20);
  border-color: rgba(128, 132, 140, .4);
  background: transparent;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
}

.l4t__save:hover,
.l4t__sortbtn:hover,
.l4t__perbtn:hover {
  border-color: var(--acc);
}

.l4t__save[aria-pressed="true"] {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}

.l4t__dd {
  position: relative;
}

.l4t__sortbtn {
  padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 22);
  border-color: rgba(128, 132, 140, .35);
  gap: calc(var(--u) * 12);
}

.l4t__sortbtn.is-open {
  border-color: var(--acc);
}

.l4t__sic {
  display: flex;
  color: var(--acc);
}

.l4t__sl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 1);
}

.l4t__slk {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  color: var(--mute);
}

.l4t__slv {
  font-size: max(12px, calc(var(--u) * 17));
}

.l4t__chev {
  margin-left: calc(var(--u) * 6);
  color: var(--mute);
  transition: transform .2s;
}

.is-open .l4t__chev {
  transform: rotate(180deg);
}

.l4t__perbtn {
  padding: 0 calc(var(--u) * 18);
  gap: calc(var(--u) * 10);
}

.l4t__perbtn .l4t__chev {
  margin-left: 0;
}

.l4t__pop {
  position: absolute;
  right: 0;
  top: calc(var(--u) * 74);
  z-index: 8;
  border: .5px solid var(--l2-line);
  background: var(--l4-pop);
  box-shadow: var(--lx-pop);
  display: flex;
  flex-direction: column;
}

.l4t__pop[hidden] {
  display: none;
}

.l4t__pop--sort {
  width: calc(var(--u) * 420);
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 26);
}

.l4t__so {
  width: 100%;
  min-height: calc(var(--u) * 64);
  padding: calc(var(--u) * 8) calc(var(--u) * 14);
  border: 0;
  border-radius: calc(var(--u) * 18);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr) calc(var(--u) * 20);
  align-items: center;
  gap: calc(var(--u) * 12);
  cursor: pointer;
}

.l4t__so:hover {
  background: var(--acc-a06);
}

.l4t__so.is-on {
  background: var(--acc-a08);
}

.l4t__si {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  border: .5px solid var(--l2-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.l4t__so.is-on .l4t__si,
.l4t__so.is-on .l4t__sn {
  color: var(--acc);
}

.l4t__st {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.l4t__sn {
  font-size: max(12px, calc(var(--u) * 17));
}

.l4t__sd {
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.l4t__tick {
  color: var(--acc);
  opacity: 0;
}

.is-on > .l4t__tick {
  opacity: 1;
}

.l4t__pop--per {
  width: calc(var(--u) * 180);
  padding: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 22);
}

.l4t__po {
  width: 100%;
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 16);
  border: 0;
  border-radius: calc(var(--u) * 14);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 17));
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.l4t__po:hover {
  background: var(--acc-a06);
}

.l4t__po.is-on {
  background: var(--acc-a08);
  color: var(--acc);
}

.l4t__views {
  padding: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 36);
  border: .5px solid var(--l2-line);
  background: var(--surf);
  display: flex;
}

.l4t__view {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 18);
  border: 0;
  border-radius: calc(var(--u) * 26);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.l4t__view.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.l4t__filters {
  display: none;
}

/* == 94. Listing v4 — sidebar ========================================== */
.l4__body {
  display: flex;
  gap: calc(var(--u) * 24);
  align-items: flex-start;
}

.l4side {
  position: sticky;
  top: 24px;
  width: calc(var(--u) * 480); /* 600 in the handoffs; narrowed on v4–v6 by the owner (30.09) */
  flex-shrink: 0;
  padding: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 36);
  border: .5px solid var(--l4-line);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.l4side__head {
  padding-bottom: calc(var(--u) * 6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.l4side__h {
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.02em;
}

.l4side__reset {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  border: .5px solid var(--l4-field);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  white-space: nowrap;
  cursor: pointer;
}

.l4side__reset:hover:not(:disabled) {
  border-color: var(--acc);
  color: var(--acc);
}

.l4side__reset:disabled {
  opacity: .35;
  cursor: default;
}

.l4side__close {
  display: none;
}

.l4side__dds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

/* underline dropdowns */
.l4dd {
  position: relative;
  min-width: 0;
}

.l4dd[hidden] {
  display: none;
}

.l4dd--full {
  grid-column: 1 / -1;
}

.l4dd__btn {
  width: 100%;
  height: calc(var(--u) * 70);
  padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 4);
  border: 0;
  border-bottom: 1px solid var(--l4-field);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  cursor: pointer;
}

.l4dd__btn:disabled {
  cursor: not-allowed;
}

.l4dd.is-open .l4dd__btn,
.l4dd.is-set .l4dd__btn,
.l4dd__btn:hover:not(:disabled) {
  border-bottom-color: var(--acc);
}

.l4dd__t {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.l4dd__l {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
  color: var(--mute);
}

.l4dd__v {
  font-size: max(12px, calc(var(--u) * 22));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l4dd.is-set .l4dd__v {
  color: var(--acc);
}

.l4dd.is-dis .l4dd__v {
  color: var(--mute);
}

.l4dd__r {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  flex-shrink: 0;
}

.l4dd__x {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 12));
  opacity: 0;
}

.l4dd.is-set .l4dd__x {
  opacity: 1;
}

.l4dd__chev {
  color: var(--mute);
  transition: transform .2s;
}

.l4dd.is-open .l4dd__chev {
  transform: rotate(180deg);
}

.l4dd__pop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + calc(var(--u) * 8));
  z-index: 10;
  max-height: calc(var(--u) * 420);
  padding: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--l4-field);
  background: var(--l4-pop);
  box-shadow: var(--lx-pop);
  overflow: auto;
}

.l4dd__pop[hidden],
.l4dd__list li[hidden] {
  display: none;
}

.l4dd__q {
  width: calc(100% - calc(var(--u) * 8));
  height: calc(var(--u) * 48);
  margin: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 8);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 14);
  border: .5px solid var(--l4-field);
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--ink);
}

.l4dd__q:focus {
  border-color: var(--acc);
}

.l4dd__opt {
  width: 100%;
  min-height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 16);
  border: 0;
  border-radius: calc(var(--u) * 14);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 17));
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
  cursor: pointer;
}

.l4dd__opt:hover {
  background: var(--acc-a06);
}

.l4dd__opt.is-on {
  background: var(--acc-a08);
  color: var(--acc);
}

.l4dd__on {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.l4dd__tick {
  color: var(--acc);
  opacity: 0;
}

.l4dd__opt.is-on .l4dd__tick {
  opacity: 1;
}

/* checkbox groups */
.l4grp {
  margin: 0;
  padding: calc(var(--u) * 14) 0 0;
  border: 0;
  border-top: .5px solid var(--l4-line);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.l4grp__l {
  float: left;
  width: 100%;
  padding: 0;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--mute);
}

.l4grp__list {
  clear: both;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.l4chk {
  position: relative;
  height: calc(var(--u) * 40);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 17));
  cursor: pointer;
}

.l4chk__in {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  margin: 0;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
}

.l4chk__box {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 6);
  border: 1px solid rgba(128, 132, 140, .5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.l4chk__box .ico {
  opacity: 0;
}

.l4chk__in:checked + .l4chk__box {
  border-color: var(--acc);
  background: var(--acc);
}

.l4chk__in:checked + .l4chk__box .ico {
  opacity: 1;
}

.l4chk__in:focus-visible + .l4chk__box {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.l4chk__t {
  flex: 1;
}

.l4chk__n {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.l4grp--inc {
  padding-top: calc(var(--u) * 6);
  border-top: 0;
  gap: calc(var(--u) * 10);
}

.l4inc__row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.l4inc {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  border: .5px solid var(--l4-field);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  cursor: pointer;
}

.l4inc:hover {
  border-color: var(--acc);
}

.l4inc__tick {
  display: none;
}

.l4inc[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.l4inc[aria-pressed="true"] .l4inc__tick {
  display: inline;
}

.l4side__go {
  height: calc(var(--u) * 68);
  margin-top: calc(var(--u) * 8);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 28);
  border: 0;
  border-radius: calc(var(--u) * 34);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.l4side__go:hover {
  background: var(--acc-d);
}

.l4side__gdot {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
}

.l4side__more {
  padding: calc(var(--u) * 4) 0;
  border: 0;
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  cursor: pointer;
}

.l4side__more:hover {
  color: var(--acc);
}

.l4scrim {
  display: none;
}

/* == 95. Listing v4 — results: price-tag cards ========================= */
.l4__res {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 40);
}

.l4grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 22);
}

.l4grid[hidden],
.l4list[hidden] {
  display: none;
}

.l4c {
  min-width: 0;
  border-radius: calc(var(--u) * 34);
  border: .5px solid var(--l3-card-line);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s;
}

.l4c:hover {
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(17, 20, 24, .12);
}

.l4c.is-cmp {
  border-color: var(--acc);
  box-shadow: 0 0 0 .5px var(--acc);
}

.l4c__ph {
  position: relative;
  height: calc(var(--u) * 460);
  background: var(--stripes);
}

.l4c__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.l4c__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fefefe;
  transition: transform .6s var(--lx-ease);
}

[data-theme="dark"] .l4c__img {
  filter: brightness(.9);
}

.l4c:hover .l4c__img {
  transform: scale(1.04);
}

.l4c__tag {
  position: absolute;
  left: calc(var(--u) * 20);
  top: calc(var(--u) * 20);
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 13);
  border-radius: calc(var(--u) * 16);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
}

.l4c__tag--acc { background: var(--acc); }
.l4c__tag--ok { background: var(--ok); }
.l4c__tag--ink { background: #111418; }
.l4c__tag--mute { background: #5f6671; }

.l4c__fav {
  position: absolute;
  right: calc(var(--u) * 18);
  top: calc(var(--u) * 18);
}

/* the accent price tag hangs over the bottom edge of the photo */
.l4c__price {
  position: absolute;
  right: calc(var(--u) * 22);
  bottom: calc(var(--u) * -30);
  z-index: 1;
  height: calc(var(--u) * 76);
  padding: 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 38);
  background: var(--acc);
  color: #fff;
  box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) var(--acc-a35);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.l4c__mo {
  font-size: max(12px, calc(var(--u) * 30));
  line-height: 1;
  white-space: nowrap;
}

.l4c__per,
.l4c__full {
  font-size: max(12px, calc(var(--u) * 13));
  opacity: .85;
}

.l4c__full {
  font-size: max(12px, calc(var(--u) * 12));
}

.l4c__body {
  padding: calc(var(--u) * 34) calc(var(--u) * 28) calc(var(--u) * 26);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.l4c__nm {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.l4c__meta {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

.l4c__name {
  font-size: max(12px, calc(var(--u) * 36));
  letter-spacing: -.025em;
  transition: color .25s;
}

.l4c:hover .l4c__name {
  color: var(--acc);
}

.l4c__specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.l4c__sp {
  min-width: 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 6);
}

.l4c__si {
  height: calc(var(--u) * 20);
  display: flex;
  align-items: center;
  color: var(--acc);
}

.l4c__sv {
  font-size: max(12px, calc(var(--u) * 17));
  white-space: nowrap;
}

.l4c__sk {
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  color: var(--mute);
}

.l4c__ctas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 8);
}

.l4c__view {
  height: calc(var(--u) * 58);
  border-radius: calc(var(--u) * 29);
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
}

.l4c__view:hover {
  background: var(--acc);
  color: #fff;
}

.l4c__cmp {
  height: calc(var(--u) * 58);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 29);
  border: .5px solid rgba(128, 132, 140, .4);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
  cursor: pointer;
}

.l4c__cmp:hover {
  border-color: var(--acc);
}

.l4c__cmp[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.l4c__cmp.is-full {
  opacity: .6;
  cursor: not-allowed;
}

.l4pg {
  margin: 0;
}

/* == 96. Listing v4 — tablet and phone ================================= */
@media (max-width: 1199px) {
  .l4t {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .l4t__tabs {
    overflow-x: auto;
  }

  .l4t__r {
    flex-wrap: wrap;
    gap: 10px;
  }

  .l4t__range {
    margin-right: auto;
    align-items: flex-start;
  }

  .l4t__filters {
    padding: 0 18px;
    border-color: var(--ink);
    gap: 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    display: flex;
  }

  .l4t__fn {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: var(--acc);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }

  .l4t__fn[hidden] {
    display: none;
  }

  .l4t__pop--sort {
    right: auto;
    left: 0;
    width: min(420px, calc(100vw - 32px));
  }

  /* the sidebar becomes a slide-over sheet */
  .l4__body {
    display: block;
  }

  .l4side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1500;
    width: min(440px, 92vw);
    padding: 24px 20px;
    border-radius: 0 24px 24px 0;
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(-105%);
    transition: transform .35s var(--lx-ease), visibility 0s .35s;
  }

  .l4side.is-open {
    visibility: visible;
    transform: none;
    transition: transform .35s var(--lx-ease), visibility 0s 0s;
  }

  .l4side__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: .5px solid var(--l4-field);
    background: transparent;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .l4side__h {
    margin-right: auto;
    font-size: 28px;
  }

  .l4dd__btn {
    height: 58px;
  }

  .l4dd__v,
  .l4chk,
  .l4dd__opt {
    font-size: 16px;
  }

  .l4dd__pop {
    position: static;
    margin-top: 8px;
    box-shadow: none;
  }

  .l4scrim {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(17, 20, 24, .45);
    display: block;
  }

  .l4scrim[hidden] {
    display: none;
  }

  .l4grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .l4c__ph {
    height: auto;
    aspect-ratio: 790 / 460;
  }
}

@media (max-width: 767px) {
  .l4t__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }

  .l4t__tab {
    height: 56px;
    padding: 0 14px;
    justify-content: space-between;
  }

  .l4t__ts {
    display: none;
  }

  .l4t__save {
    padding: 0 14px;
  }

  .l4t__views .l4t__view {
    padding: 0 12px;
  }

  .l4grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .l4c__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l4c__name {
    font-size: 28px;
  }
}

/* == 97. Listing v5 — dark sidebar ===================================== */
/* The Listing v4 sidebar with local dark tokens: dark in both themes. */
.l4side--dark {
  --ink: #f2f3f5;
  --mute: #7d838d;
  --surf: #111418;
  --bg: #111418;
  --l4-line: rgba(242, 243, 245, .12);
  --l4-field: rgba(242, 243, 245, .16);
  --l4-pop: #1b1e23;
  --lx-pop: 0 24px 60px rgba(0, 0, 0, .6);
  border-radius: calc(var(--u) * 40);
  border-color: rgba(242, 243, 245, .1);
  background: #111418;
  color: var(--ink);
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 80) rgba(0, 0, 0, .4);
  color-scheme: dark;
}

.l4side--dark .l4side__head {
  justify-content: flex-end;
}

.l4side--dark .l4grp {
  padding-top: calc(var(--u) * 16);
}

.l4side--dark .l4grp--inc {
  padding-top: calc(var(--u) * 6);
}

.l4side--dark .l4side__gdot {
  background: #1b1e23;
}

/* == 98. Listing v5 — stat-strip cards ================================= */
.l5c {
  min-width: 0;
  border-radius: calc(var(--u) * 34);
  border: .5px solid var(--l3-card-line);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s;
}

.l5c:hover {
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(17, 20, 24, .12);
}

.l5c.is-cmp {
  border-color: var(--acc);
  box-shadow: 0 0 0 .5px var(--acc);
}

.l5c__ph {
  position: relative;
  height: calc(var(--u) * 420);
  background: var(--stripes);
  overflow: hidden;
}

.l5c__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fefefe;
  transition: transform .6s var(--lx-ease);
}

[data-theme="dark"] .l5c__img {
  filter: brightness(.9);
}

.l5c:hover .l5c__img {
  transform: scale(1.04);
}

.l5c__fav {
  position: absolute;
  right: calc(var(--u) * 16);
  top: calc(var(--u) * 16);
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
}

.l5c__body {
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.l5c__hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--u) * 12);
}

.l5c__nm {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.l5c__meta {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

.l5c__name {
  font-size: max(12px, calc(var(--u) * 32));
  transition: color .25s;
}

.l5c:hover .l5c__name {
  color: var(--acc);
}

/* the monthly price as an outline figure */
.l5c__mo {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  font-size: max(12px, calc(var(--u) * 40));
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
  white-space: nowrap;
}

/* dark stat strip — dark in both themes */
.l5c__stats {
  border-radius: calc(var(--u) * 18);
  background: #111418;
  color: #f2f3f5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

[data-theme="dark"] .l5c__stats {
  background: #0b0d10;
}

.l5c__st {
  min-width: 0;
  padding: calc(var(--u) * 14);
  border-left: .5px solid rgba(242, 243, 245, .12);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.l5c__st:first-child {
  border-left-color: transparent;
}

.l5c__sv {
  font-size: max(12px, calc(var(--u) * 18));
  white-space: nowrap;
}

.l5c__sk {
  font-size: max(12px, calc(var(--u) * 10));
  line-height: calc(var(--u) * 13);
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  color: #7d838d;
}

.l5c__ctas {
  display: flex;
  gap: calc(var(--u) * 8);
}

.l5c__view {
  flex: 1;
  height: calc(var(--u) * 56);
  border-radius: calc(var(--u) * 28);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
}

.l5c__view:hover {
  background: var(--acc-d);
  color: #fff;
}

.l5c__cmp {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 28);
}

/* == 99. Listing v5 — tablet and phone ================================= */
@media (max-width: 1199px) {
  .l4side--dark {
    padding: 24px 20px;
    border-radius: 0 24px 24px 0;
  }

  .l4side--dark .l4side__head {
    justify-content: space-between;
  }

  .l5c__ph {
    height: auto;
    aspect-ratio: 790 / 420;
  }
}

@media (max-width: 767px) {
  .l5c__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l5c__st:nth-child(3) {
    border-left-color: transparent;
  }

  .l5c__st:nth-child(n + 3) {
    border-top: .5px solid rgba(242, 243, 245, .12);
  }

  .l5c__name {
    font-size: 26px;
  }

  .l5c__mo {
    font-size: 30px;
  }
}

/* == 100. Listing v6 — condition tiles and the results controls ======== */
/* Listing v4's sidebar with the condition tiles on top; the toolbar controls
   move into the results column; cards and rows are the Listing v1 ones. */
.l6tiles {
  padding-bottom: calc(var(--u) * 16);
  border-bottom: .5px solid var(--l4-line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.l6tile {
  min-width: 0;
  height: calc(var(--u) * 74);
  padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--l4-line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  cursor: pointer;
  transition: background-color .25s, color .25s, box-shadow .25s, border-color .25s;
}

.l6tile:hover {
  border-color: var(--acc);
}

.l6tile.is-on {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 20) var(--acc-a24);
}

.l6tile__t {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 3);
}

.l6tile__n {
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.1);
  white-space: nowrap;
}

.l6tile__s {
  font-size: max(12px, calc(var(--u) * 11));
  opacity: .7;
  white-space: nowrap;
}

.l6tile__c {
  height: calc(var(--u) * 30);
  min-width: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 15);
  background: var(--l4-count);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: max(12px, calc(var(--u) * 14));
}

.l6tile.is-on .l6tile__c {
  background: rgba(255, 255, 255, .22);
}

/* the controls row: aligned right, 24 net above the cards */
.l6ctl {
  margin-bottom: calc(var(--u) * -16);
  display: flex;
  justify-content: flex-end;
}

.l6ctl .l4t__filters {
  display: none;
}

/* the v1 grid and rows inside the narrower results column */
.l6grid {
  margin: 0;
}

.l6list {
  margin: 0;
}

/* == 101. Listing v6 — tablet and phone ================================ */
@media (max-width: 1199px) {
  .l6ctl {
    margin-bottom: 0;
    justify-content: flex-start;
  }

  .l6ctl .l4t__r {
    width: 100%;
  }

  .l6ctl .l4t__filters {
    display: flex;
  }

  .l6tile {
    height: 64px;
  }

  .l6tile__n {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .l6tile__s {
    display: none;
  }
}

/* == 102. Listing Map v1 — shared ====================================== */
/* Built on Listing v1 (20-listing.css): console, cards, rows. Adds the split
   layout with a sticky price-pin map, the narrowed map rows and Load more. */
:root {
  --lm-map: #e9ecef;
  --lm-grid: rgba(17, 20, 24, .06);
  --lm-water: #d6e1ea;
  --lm-road: #fff;
  --lm-line: rgba(17, 20, 24, .18);
  --lm-hair: rgba(17, 20, 24, .12);
  --lm-hover: rgba(17, 20, 24, .04);
}

[data-theme="dark"] {
  --lm-map: #1a1d22;
  --lm-grid: rgba(242, 243, 245, .05);
  --lm-water: #161b22;
  --lm-road: #262a31;
  --lm-line: rgba(242, 243, 245, .16);
  --lm-hair: rgba(242, 243, 245, .12);
  --lm-hover: rgba(242, 243, 245, .05);
}

/* the two switches at the end of the chip row */
.lm__sw .lsc__view {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lm__ic {
  width: calc(var(--u) * 56);
  padding: 0;
}

/* == 103. Listing Map v1 — layout and map ============================== */
/* the map is sticky: the section clips, never hides, its overflow */
.lm {
  overflow: clip;
}

.lm__body {
  display: flex;
  gap: calc(var(--u) * 30);
  align-items: flex-start;
}

.lm__map {
  display: none;
}

.lm.is-map .lm__map {
  position: sticky;
  top: 20px;
  flex: 0 0 calc(40% - calc(var(--u) * 18));
  height: calc(100vh - 40px);
  border-radius: calc(var(--u) * 36);
  border: .5px solid var(--lm-line);
  background: var(--lm-map);
  overflow: hidden;
  isolation: isolate;
  display: block;
}

/* the drawn map (grid, water, roads) shows until the tiles arrive */
.lm__mock {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--lm-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lm-grid) 1px, transparent 1px);
  background-size: calc(var(--u) * 80) calc(var(--u) * 80);
}

.lm__water {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18%;
  background: var(--lm-water);
}

.lm__road {
  position: absolute;
  background: var(--lm-road);
}

.lm__road--1 { left: 0; right: 0; top: 38%; height: calc(var(--u) * 14); transform: rotate(-8deg); transform-origin: left; }
.lm__road--2 { left: 0; right: 0; top: 66%; height: calc(var(--u) * 10); transform: rotate(5deg); transform-origin: left; }
.lm__road--3 { top: 0; bottom: 0; left: 46%; width: calc(var(--u) * 12); transform: rotate(10deg); }
.lm__road--4 { top: 0; bottom: 0; left: 74%; width: calc(var(--u) * 8); transform: rotate(-6deg); }

.lm.is-live .lm__mock {
  display: none;
}

.lm__live {
  position: absolute;
  inset: 0;
  background: transparent;
  font-family: Geist, sans-serif;
}

.lm__map .leaflet-container {
  isolation: isolate;
  background: transparent;
}

.lm__live .leaflet-tile-pane {
  filter: grayscale(1) contrast(.92) brightness(1.04);
  opacity: .85;
}

[data-theme="dark"] .lm__live .leaflet-tile-pane {
  filter: grayscale(1) invert(1) contrast(.85) brightness(.8);
  opacity: .9;
}

.lm__live .leaflet-control-attribution {
  margin: 0 calc(var(--u) * 24) calc(var(--u) * 24) 0 !important;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--surf);
  font-size: 12px;
  color: var(--mute);
}

.lm__live .leaflet-control-attribution a {
  color: var(--ink);
}

/* price pins: the bottom centre of the pill is the coordinate */
.lmpin-wrap {
  position: relative;
}

.lmpin {
  position: absolute;
  left: 0;
  top: 0;
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--lm-line);
  background: var(--surf);
  color: var(--ink);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(17, 20, 24, .18);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  cursor: pointer;
  transform: translate(-50%, -100%);
  transition: transform .25s, background-color .25s, color .25s, border-color .25s;
}

.lmpin-wrap.is-on .lmpin,
.lmpin:hover {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
  transform: translate(-50%, -100%) scale(1.12);
}

.lm__zoom {
  position: absolute;
  right: calc(var(--u) * 24);
  top: calc(var(--u) * 24);
  z-index: 500;
  border-radius: calc(var(--u) * 26);
  border: .5px solid var(--lm-line);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lm__zb {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 22));
  cursor: pointer;
}

.lm__zb + .lm__zb {
  border-top: .5px solid var(--lm-line);
}

.lm__zb:hover {
  color: var(--acc);
}

.lm__count {
  position: absolute;
  left: calc(var(--u) * 24);
  bottom: calc(var(--u) * 24);
  z-index: 500;
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--lm-line);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
}

.lm__cd {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--acc);
}

.lm__area {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 24);
  z-index: 500;
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 20);
  border: 0;
  border-radius: calc(var(--u) * 22);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) var(--acc-a30);
  transform: translateX(-50%);
  cursor: pointer;
}

.lm__area[hidden],
.lm__btn[hidden] {
  display: none;
}

/* == 104. Listing Map v1 — results ===================================== */
.lm__res {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lm__grid,
.lm__list {
  margin: 0;
}

.lm.is-map .lm__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* the list holds both row styles: v1 rows in the grid layout, 113e rows next to the map */
.lm.is-map .lm__list .lrw,
.lm:not(.is-map) .lm__list .lmr {
  display: none;
}

.lm.is-map .lm__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.lm__list[hidden],
.lm.is-map .lm__list[hidden] {
  display: none;
}

/* a pin hovered on the map lights its card like a hover */
.lcd.is-hot .lcd__ph {
  box-shadow: 0 calc(var(--u) * 36) calc(var(--u) * 80) rgba(17, 20, 24, .18);
}

.lcd.is-hot .lcd__img {
  transform: scale(1.04);
}

.lcd.is-hot .lcd__nav {
  opacity: 1;
}

.lcd.is-hot .lcd__n {
  bottom: calc(var(--u) * 120);
  color: var(--acc-a20);
  -webkit-text-stroke-color: var(--acc);
}

.lcd.is-hot .lcd__specs {
  transform: translateY(0);
  opacity: 1;
}

.lcd.is-hot .lx-dots {
  opacity: 0;
}

.lcd.is-hot .lcd__name,
.lcd.is-hot .lcd__go {
  color: var(--acc);
}

.lcd.is-hot .lcd__gdot {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

/* row 113e */
.lmr {
  min-width: 0;
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--lm-hair);
  background: var(--surf);
  overflow: hidden;
  display: grid;
  grid-template-columns: calc(var(--u) * 440) minmax(0, 1fr) calc(var(--u) * 300);
  transition: border-color .25s;
}

.lmr:hover,
.lmr.is-hot {
  border-color: var(--acc-a40);
}

.lmr.is-cmp {
  border-color: var(--acc);
  box-shadow: inset 0 0 0 .5px var(--acc);
}

.lmr__ph {
  position: relative;
  height: calc(var(--u) * 320);
  background: var(--stripes);
  overflow: hidden;
}

.lmr__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fefefe;
  transition: transform .5s var(--lx-ease);
}

[data-theme="dark"] .lmr__img {
  filter: brightness(.9);
}

.lmr:hover .lmr__img,
.lmr.is-hot .lmr__img {
  transform: scale(1.04);
}

.lmr__tag {
  position: absolute;
  left: calc(var(--u) * 20);
  top: calc(var(--u) * 20);
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  white-space: nowrap;
}

.lmr__tag--acc { background: var(--acc); }
.lmr__tag--ok { background: var(--ok); }
.lmr__tag--ink { background: #111418; }
.lmr__tag--mute { background: #5f6671; }

.lmr__fav {
  position: absolute;
  right: calc(var(--u) * 16);
  top: calc(var(--u) * 16);
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border: .5px solid var(--lm-hair);
}

.lmr__mid {
  position: relative;
  min-width: 0;
  padding: calc(var(--u) * 30) calc(var(--u) * 34);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  overflow: hidden;
}

/* ghost word: the last word of the model, sized min(170, 520 / (letters × 1.3)) */
.lmr__ghost {
  position: absolute;
  right: calc(var(--u) * 10);
  bottom: calc(var(--u) * -24);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc-a40);
  white-space: nowrap;
  pointer-events: none;
}

.lmr__g50 { font-size: calc(var(--u) * 50); }
.lmr__g100 { font-size: calc(var(--u) * 100); }
.lmr__g133 { font-size: calc(var(--u) * 133); }
.lmr__g170 { font-size: calc(var(--u) * 170); }

.lmr__meta,
.lmr__name,
.lmr__line,
.lmr__specs {
  position: relative;
}

.lmr__meta {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.lmr__name {
  font-size: max(12px, calc(var(--u) * 40));
  font-weight: 300;
  letter-spacing: -.03em;
}

.lmr__name a {
  transition: color .25s;
}

.lmr:hover .lmr__name a,
.lmr.is-hot .lmr__name a {
  color: var(--acc);
}

.lmr__line {
  max-width: calc(var(--u) * 560);
  font-size: max(12px, calc(var(--u) * 17));
  line-height: 1.5;
  color: var(--body);
}

.lmr__specs {
  margin-top: auto;
  padding-top: calc(var(--u) * 16);
  border-top: .5px solid var(--lm-hair);
  display: flex;
}

.lmr__sp {
  flex: 1;
  min-width: 0;
  padding-right: calc(var(--u) * 20);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lmr__sk {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--mute);
}

.lmr__sv {
  font-size: max(12px, calc(var(--u) * 22));
  white-space: nowrap;
}

.lmr__side {
  min-width: 0;
  padding: calc(var(--u) * 30);
  border-left: .5px solid var(--lm-hair);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--u) * 14);
}

.lmr__pr {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lmr__mo {
  font-size: max(12px, calc(var(--u) * 40));
  color: var(--acc);
  white-space: nowrap;
}

.lmr__per {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.lmr__full {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lmr__ctas {
  display: flex;
  gap: calc(var(--u) * 8);
}

.lmr__cmp {
  flex: 1;
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 26);
  border: .5px solid var(--lm-hair);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.2);
  white-space: nowrap;
  cursor: pointer;
}

.lmr__cmp:hover {
  border-color: var(--acc);
}

.lmr__cmp[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.lmr__cmp.is-full {
  opacity: .6;
  cursor: not-allowed;
}

.lmr__go {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lmr__go:hover {
  background: var(--acc-d);
  color: #fff;
}

/* Load more */
.lm__more {
  margin-top: calc(var(--u) * 60);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.lm__btn {
  width: 100%;
  height: calc(var(--u) * 96);
  border-radius: calc(var(--u) * 48);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 22);
  cursor: pointer;
  transition: border-color .25s, background-color .25s, color .25s;
}

.lm__btn:hover {
  border-color: var(--acc);
  background: var(--lm-hover);
  color: var(--acc);
}

.lm__bd {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
}

.lm__btn.is-loading .lm__bd {
  animation: lm-spin .8s linear infinite;
}

@keyframes lm-spin {
  to { transform: rotate(360deg); }
}

.lm__shown {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.lm__ink {
  color: var(--ink);
}

.lm__track {
  width: calc(var(--u) * 320);
  height: 3px;
  border-radius: 2px;
  background: var(--line2);
  overflow: hidden;
}

.lm__bar {
  display: block;
  height: 100%;
  background: var(--acc);
  transition: width .4s;
}

.lm__fab {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .lm__btn.is-loading .lm__bd {
    animation: none;
  }
}

/* == 105. Listing Map v1 — smaller screens ============================= */
@media (max-width: 1599px) {
  .lm.is-map .lm__map {
    flex-basis: calc(45% - calc(var(--u) * 18));
  }

  .lm.is-map .lm__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1199px) {
  /* the map becomes a full-screen layer behind a floating Map / List button */
  .lm.is-map .lm__map {
    display: none;
  }

  .lm.is-map.is-full .lm__map {
    position: fixed;
    inset: 0;
    z-index: 1500;
    height: auto;
    border-radius: 0;
    display: block;
  }

  .lm.is-map .lm__fab {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 1600;
    height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 26px;
    background: var(--ink);
    color: var(--on-ink);
    font: inherit;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em;
    box-shadow: 0 12px 30px rgba(17, 20, 24, .3);
    transform: translateX(-50%);
    display: block;
    cursor: pointer;
  }

  .lm__body {
    display: block;
  }

  .lm.is-map .lm__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lmr {
    grid-template-columns: minmax(0, 1fr);
  }

  .lmr__ph {
    height: auto;
    aspect-ratio: 440 / 260;
  }

  .lmr__side {
    border-left: 0;
    border-top: .5px solid var(--lm-hair);
  }

  .lm__more {
    margin-top: 40px;
  }

  .lm__btn {
    height: 72px;
  }

  .lm__track {
    width: min(320px, 80%);
  }
}

@media (max-width: 767px) {
  /* the count chip moves up, clear of the attribution */
  .lm__count {
    top: 16px;
    bottom: auto;
    left: 16px;
  }

  .lm.is-map .lm__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lmr__name {
    font-size: 28px;
  }

  .lmr__specs {
    flex-wrap: wrap;
    gap: 10px 0;
  }

  .lmr__sp {
    flex-basis: 50%;
  }

  .lm__btn {
    font-size: 13px;
    letter-spacing: .14em;
  }
}

/* == 106. Listing Map v2 — command bar ================================= */
/* Map v1 below the bar (27-listing-map.css); the options reuse the v1 picker rows. */
:root {
  --lcb-div: rgba(17, 20, 24, .14);
  --lcb-track: #f2f3f5;
  --lcb-pop-line: rgba(17, 20, 24, .22);
}

[data-theme="dark"] {
  --lcb-div: rgba(242, 243, 245, .2);
  --lcb-track: rgba(242, 243, 245, .08);
  --lcb-pop-line: rgba(242, 243, 245, .16);
}

.lcb-sec {
  position: relative;
  z-index: 6;
  padding-bottom: calc(var(--u) * 10);
}

.lcb-gap {
  height: calc(var(--u) * 20);
}

.lcb {
  position: relative;
  z-index: 5;
  height: calc(var(--u) * 92);
  padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 40);
  border-radius: calc(var(--u) * 46);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 36);
}

.lcb__count {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
  white-space: nowrap;
}

.lcb__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-weight: 400;
  font-size: max(12px, calc(var(--u) * 36));
  color: var(--acc);
}

.lcb__cars {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--body);
}

.lcb__div {
  width: .5px;
  height: calc(var(--u) * 40);
  flex-shrink: 0;
  background: var(--lcb-div);
}

.lcb__conds {
  align-self: stretch;
  display: flex;
  gap: calc(var(--u) * 28);
}

.lcb__cond {
  height: 100%;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  cursor: pointer;
  transition: color .25s, border-color .25s;
}

.lcb__cond:hover {
  color: var(--ink);
}

.lcb__cond.is-on {
  border-bottom-color: var(--acc);
  color: var(--ink);
}

.lcb__dds {
  display: flex;
  gap: calc(var(--u) * 34);
}

.lcb__dd {
  position: relative;
}

.lcb__btn {
  height: calc(var(--u) * 56);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 18));
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  cursor: pointer;
}

.lcb__l {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  color: var(--mute);
}

.lcb__dd.is-set .lcb__v {
  color: var(--acc);
}

.lcb__mark {
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.lcb__chev {
  transition: transform .25s;
}

.lcb__dd.is-open .lcb__chev {
  transform: rotate(180deg);
}

.lcb__dd.is-open .lcb__mark,
.lcb__dd.is-set .lcb__mark {
  color: var(--acc);
}

.lcb__x,
.lcb__dd.is-set .lcb__chev {
  display: none;
}

.lcb__dd.is-set .lcb__x {
  display: inline;
}

.lcb__pop {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 74);
  z-index: 7;
  width: calc(var(--u) * 520);
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 30);
  border: .5px solid var(--lcb-pop-line);
  background: var(--surf);
  box-shadow: var(--lx-pop);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lcb__pop[hidden],
.lcb__list li[hidden],
.lcb__fn[hidden] {
  display: none;
}

.lcb__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lcb__list .lsc__opt {
  width: 100%;
}

/* a chosen make lists only its models, without the brand in front */
.lcb__dd.is-scoped .lcb__brand {
  display: none;
}

.lcb__r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lcb__save {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  cursor: pointer;
}

.lcb__save:hover {
  border-color: var(--acc);
}

.lcb__save[aria-pressed="true"] {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}

.lcb__sw {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 34);
  background: var(--lcb-track);
  display: flex;
}

.lcb__ic,
.lcb__tx {
  height: calc(var(--u) * 56);
  border: 0;
  border-radius: calc(var(--u) * 28);
  background: transparent;
  color: var(--ink);
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lcb__ic {
  width: calc(var(--u) * 60);
  padding: 0;
}

.lcb__ic.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.lcb__tx {
  padding: 0 calc(var(--u) * 22);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
}

.lcb__tx.is-on {
  background: var(--acc);
  color: #fff;
}

.lcb__filters {
  display: none;
}

/* == 107. Listing Map v2 — smaller screens ============================= */
@media (max-width: 1599px) {
  /* the filters drop to a second row of the bar */
  .lcb {
    height: auto;
    min-height: calc(var(--u) * 92);
    padding: 10px 14px 10px 30px;
    border-radius: 34px;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .lcb__conds {
    min-height: 56px;
  }

  .lcb__div--2 {
    display: none;
  }

  .lcb__dds {
    order: 5;
    width: 100%;
    padding-top: 6px;
    border-top: .5px solid var(--lcb-div);
  }
}

@media (max-width: 1199px) {
  .lcb {
    padding: 12px 14px 12px 22px;
    gap: 14px 22px;
  }

  .lcb__filters {
    height: 48px;
    padding: 0 16px;
    border-radius: 24px;
    border: .5px solid var(--line2);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .lcb__filters[aria-expanded="true"] {
    border-color: var(--acc);
    color: var(--acc);
  }

  .lcb__fn {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--acc);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }

  /* filters open as a sheet under the bar */
  .lcb__dds {
    display: none;
    flex-direction: column;
    gap: 0;
  }

  .lcb.is-sheet .lcb__dds {
    display: flex;
  }

  .lcb__btn {
    width: 100%;
    font-size: 17px;
  }

  .lcb__mark {
    margin-left: auto;
  }

  .lcb__pop {
    position: static;
    width: auto;
    margin-bottom: 10px;
    padding: 12px;
    box-shadow: none;
  }

  .lcb__r {
    margin-left: 0;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .lcb {
    border-radius: 24px;
  }

  .lcb__div {
    display: none;
  }

  .lcb__conds {
    width: 100%;
    order: 2;
    min-height: 44px;
  }

  .lcb__filters {
    order: 1;
    margin-left: auto;
  }

  .lcb__r {
    order: 3;
    width: 100%;
  }

  .lcb__save {
    height: 48px;
    padding: 0 16px;
    flex: 1;
    justify-content: center;
  }

  .lcb__pop .lsc__opt {
    grid-template-columns: minmax(0, 1fr) 70px 40px;
    padding: 0 14px;
    gap: 10px;
  }
}

/* == 108. Listing Map v3 — the app page ================================ */
/* No menu, crumbs, page header or footer: 40 → bar → 20 → results (their own bottom space ends the page). */
.lmapp {
  padding-top: calc(var(--u) * 40);
}

.lcb--app {
  border: .5px solid rgba(17, 20, 24, .16);
}

[data-theme="dark"] .lcb--app {
  border-color: rgba(242, 243, 245, .14);
}

.lcb__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.lcb__logo .logo {
  width: auto;
  height: calc(var(--u) * 44);
}

/* the theme switch: the button of the current theme is filled */
.lcb__ic[aria-pressed="true"].js-theme-set {
  background: var(--ink);
  color: var(--on-ink);
}

@media (max-width: 1199px) {
  .lmapp {
    padding-top: 16px;
  }

  .lcb__logo .logo {
    height: 36px;
  }
}

@media (max-width: 767px) {
  .lcb--app .lcb__logo {
    order: 0;
  }
}

/* == 109. Listing Single v1 — shared =================================== */
:root {
  --sg-chip: #f2f3f5;
  --sg-ln: rgba(17, 20, 24, .12);
  --sg-band: #111418;
  --sg-map: #e9ecef;
  --sg-grid: rgba(17, 20, 24, .05);
  --sg-water: #d6e1ea;
  --sg-road: #fff;
  --sg-glass: rgba(17, 20, 24, .78);
  --sg-stk-shadow: 0 14px 40px rgba(17, 20, 24, .08);
  --sg-ok16: rgba(47, 163, 107, .16);
  --sg-on-band: #f2f3f5;
  --sg-band-mute: #7d838d;
  --sg-band-body: #a3a9b3;
  --sg-band-line: rgba(242, 243, 245, .1);
  --sg-band-line18: rgba(242, 243, 245, .18);
  --sg-band-line25: rgba(242, 243, 245, .25);
  --sg-band-line30: rgba(242, 243, 245, .3);
  --sg-band-line40: rgba(242, 243, 245, .4);
  --sg-band-fill05: rgba(242, 243, 245, .05);
  --sg-band-fill08: rgba(242, 243, 245, .08);
  --sg-band-ghost: rgba(242, 243, 245, .06);
  --sg-pin-shadow: 0 14px 30px rgba(17, 20, 24, .25);
  --sg-you: #1d5fd1;
  --sg-you-ring: rgba(29, 95, 209, .18);
  --sg-shade: rgba(17, 20, 24, .62);
  --sg-white18: rgba(255, 255, 255, .18);
  --sg-white40: rgba(255, 255, 255, .4);
  --sg-box: rgba(10, 12, 15, .94);
}

[data-theme="dark"] {
  --sg-chip: rgba(242, 243, 245, .06);
  --sg-ln: rgba(242, 243, 245, .12);
  --sg-band: #1c1f24;
  --sg-map: #1a1d22;
  --sg-grid: rgba(242, 243, 245, .04);
  --sg-water: #161b22;
  --sg-road: #262a31;
  --sg-stk-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

/* two cars in one page: Ember shows the .lsg-e profile, the green skin the .lsg-s one */
[data-skin] .lsg-e,
:root:not([data-skin]) .lsg-s {
  display: none !important;
}

.lsg .acc {
  color: var(--acc);
}

.lsg-sec {
  padding-top: calc(var(--u) * 110);
}

/* section header: number, title, meta on the right */
.lsg-h {
  padding-bottom: calc(var(--u) * 30);
  margin-bottom: calc(var(--u) * 50);
  border-bottom: .5px solid var(--sg-ln);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 40);
}

.lsg-h__l {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 24);
}

.lsg-h__n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 1.4);
  color: var(--acc);
}

.lsg-h__t {
  font-size: max(12px, calc(var(--u) * 72));
  letter-spacing: -.045em;
  line-height: 1;
  white-space: nowrap;
}

.lsg-h__r {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lsg-h__go,
.lsg-more {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  cursor: pointer;
  text-decoration: none;
  transition: color .25s;
}

.lsg-h__go:hover,
.lsg-more:hover {
  color: var(--acc);
}

.lsg-h__dot,
.lsg-more__dot {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsg-more__dot {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border: .5px solid var(--line2);
  background: transparent;
  color: inherit;
}

/* pills, buttons and segmented controls */
.lsg-seg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 26);
  background: var(--sg-chip);
  display: flex;
}

.lsg-seg__b {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 22);
  border: 0;
  border-radius: calc(var(--u) * 22);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  cursor: pointer;
  transition: background .25s, color .25s;
}

.lsg-seg__b.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.lsg-seg--fill {
  border-radius: calc(var(--u) * 30);
}

.lsg-seg--fill .lsg-seg__b {
  flex: 1;
  height: calc(var(--u) * 52);
  padding: 0;
  border-radius: calc(var(--u) * 26);
  font-size: max(12px, calc(var(--u) * 16));
  text-transform: none;
  letter-spacing: 0;
}

.lsg-seg--fill .js-sg-tier {
  font-size: max(12px, calc(var(--u) * 15));
}

.lsg-btn {
  height: calc(var(--u) * 76);
  padding: 0 calc(var(--u) * 44);
  border-radius: calc(var(--u) * 38);
  border: .5px solid transparent;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: filter .25s, border-color .25s, color .25s, background .25s;
}

.lsg-btn--acc {
  background: var(--acc);
  color: #fff;
}

.lsg-btn--acc:hover {
  filter: brightness(1.08);
}

.lsg-btn--out {
  padding: 0 calc(var(--u) * 34);
  border-color: var(--line2);
  background: transparent;
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 1.96);
}

.lsg-btn--out:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.lsg-arw {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border: 0;
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 20));
  cursor: pointer;
  transition: background .25s, color .25s;
}

.lsg-arw:hover {
  background: var(--acc);
  color: #fff;
}

.lsg-ok {
  color: var(--ok);
  display: flex;
}

/* == 110. Listing Single v1 — hero and key specs ======================= */
.lsg-hero {
  margin-top: calc(var(--u) * 30);
  display: grid;
  grid-template-columns: calc(var(--u) * 1500) minmax(0, 1fr);
  gap: calc(var(--u) * 40);
  align-items: stretch;
}

.lsg-gal {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lsg-main {
  position: relative;
  flex: 1;
  min-height: calc(var(--u) * 860);
  border-radius: calc(var(--u) * 36);
  overflow: hidden;
  background: var(--stripes);
}

.lsg-main__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lsg-main__img.is-zoom {
  cursor: zoom-in;
}

.lsg-main__img[hidden],
.lsg-main__slot[hidden],
.lsg-box__img[hidden],
.lsg-box__slot[hidden],
.lsg-eq[hidden],
.lsg-mb__s[hidden],
.lsg-mb__leg li[hidden] {
  display: none;
}

.lsg-main__slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  white-space: nowrap;
}

.lsg-main__tl,
.lsg-main__tr,
.lsg-main__nav {
  position: absolute;
  top: calc(var(--u) * 30);
  display: flex;
  gap: calc(var(--u) * 8);
}

.lsg-main__tl {
  left: calc(var(--u) * 30);
}

.lsg-main__tr {
  right: calc(var(--u) * 30);
}

.lsg-main__nav {
  top: auto;
  right: calc(var(--u) * 30);
  bottom: calc(var(--u) * 30);
  gap: calc(var(--u) * 10);
}

.lsg-pill {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
}

.lsg-pill--ink {
  background: #111418;
}

.lsg-pill--acc {
  background: var(--acc);
}

.lsg-pill__dot {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: var(--ok);
}

.lsg-glass {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 20);
  border: 0;
  border-radius: calc(var(--u) * 24);
  background: var(--sg-glass);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  cursor: pointer;
}

button.lsg-glass:hover,
.lsg-glass[aria-pressed="true"] {
  background: var(--acc);
}

.lsg-main__cnt {
  position: absolute;
  left: calc(var(--u) * 30);
  bottom: calc(var(--u) * 30);
  gap: calc(var(--u) * 14);
  cursor: default;
}

.lsg-main__num {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: .04em;
}

.lsg-main__bar {
  width: .5px;
  height: calc(var(--u) * 18);
  background: var(--sg-white40);
}

.lsg-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.lsg-th {
  position: relative;
  height: calc(var(--u) * 150);
  padding: 0;
  border: 2px solid transparent;
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .25s;
}

.lsg-th img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lsg-th.is-on {
  border-color: var(--acc);
}

.lsg-th__more {
  position: absolute;
  inset: 0;
  background: var(--sg-shade);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 30));
}

/* info panel */
.lsg-info {
  position: relative;
  min-width: 0;
  padding: calc(var(--u) * 46) calc(var(--u) * 50);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 28);
  overflow: hidden;
}

.lsg-info__meta {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lsg-info__name {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lsg-info__make {
  font-size: max(12px, calc(var(--u) * 40));
  letter-spacing: -.03em;
  color: var(--body);
}

.lsg-info__h1 {
  font-size: max(12px, calc(var(--u) * 140));
  letter-spacing: -.06em;
  line-height: .9;
}

.lsg-info__sub {
  margin-top: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 19));
  color: var(--body);
}

.lsg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.lsg-chips li {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 21);
  background: var(--sg-chip);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.lsg-info__rule {
  height: .5px;
  flex-shrink: 0;
  background: var(--sg-ln);
}

.lsg-info__pay {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.lsg-info__cust {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  color: var(--mute);
  text-decoration: none;
  transition: color .25s;
}

.lsg-info__cust:hover {
  color: var(--acc);
}

.lsg-price {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.lsg-price__row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.lsg-price__big {
  font-size: max(12px, calc(var(--u) * 96));
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--acc);
}

.lsg-price.is-cash .lsg-price__big {
  color: var(--ink);
}

.lsg-price__unit {
  font-size: max(12px, calc(var(--u) * 20));
  color: var(--body);
}

.lsg-price__note {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lsg-deal {
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22);
  background: var(--sg-chip);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lsg-deal__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 15));
}

.lsg-deal__k {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lsg-deal__dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--acc);
}

.lsg-deal__v {
  color: var(--body);
}

.lsg-deal__seg {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(var(--u) * 4);
}

.lsg-deal__seg span {
  height: calc(var(--u) * 4);
  border-radius: 2px;
  background: var(--line2);
}

/* the deal meter follows the accent */
.lsg-deal__seg .is-on {
  background: var(--acc);
}

.lsg-acts {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.lsg-res {
  height: calc(var(--u) * 84);
  border: 0;
  border-radius: calc(var(--u) * 42);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.56);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 16);
  cursor: pointer;
  transition: background .25s, filter .25s;
}

.lsg-res:hover {
  filter: brightness(1.08);
}

.lsg-res[aria-pressed="true"],
.lsg-stk .lsg-btn--acc[aria-pressed="true"] {
  background: var(--ok);
}

.lsg-res__dot {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: var(--sg-white18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsg-acts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 72) calc(var(--u) * 72);
  gap: calc(var(--u) * 10);
}

.lsg-out {
  height: calc(var(--u) * 72);
  border-radius: calc(var(--u) * 36);
  border: .5px solid var(--line2);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .25s, color .25s;
}

.lsg-out:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.lsg-rnd {
  height: calc(var(--u) * 72);
  padding: 0;
  border-radius: 50%;
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 22));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}

.lsg-rnd:hover,
.lsg-rnd--fav[aria-pressed="true"] {
  border-color: var(--acc);
  color: var(--acc);
}

.lsg-rnd--cmp[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.lsg-trust {
  padding-top: calc(var(--u) * 8);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--body);
}

.lsg-trust li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  white-space: nowrap;
}

.lsg-adv {
  padding-top: calc(var(--u) * 24);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.lsg-adv__ph {
  position: relative;
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  flex-shrink: 0;
  display: block;
}

.lsg-adv__ph img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.lsg-adv__on {
  position: absolute;
  right: 0;
  bottom: calc(var(--u) * 2);
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border-radius: 50%;
  border: 2px solid var(--surf);
  background: var(--ok);
}

.lsg-adv__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.lsg-adv__n {
  font-size: max(12px, calc(var(--u) * 19));
}

.lsg-adv__r {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.lsg-adv__chat {
  margin-left: auto;
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  background: var(--sg-chip);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color .25s;
}

.lsg-adv__chat:hover {
  color: var(--acc);
}

/* key specs: the hairlines are the gaps of a grid on a hairline fill */
.lsg-specs {
  margin-top: calc(var(--u) * 60);
}

.lsg-specs__dl {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: .5px;
  border-top: .5px solid var(--sg-ln);
  border-bottom: .5px solid var(--sg-ln);
  background: var(--sg-ln);
}

.lsg-spec {
  padding: calc(var(--u) * 38) calc(var(--u) * 30);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.lsg-spec__k {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.lsg-spec__v {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 46));
  letter-spacing: -.03em;
  white-space: nowrap;
}

.lsg-spec__u {
  font-size: max(12px, calc(var(--u) * 16));
  letter-spacing: 0;
  color: var(--body);
}

/* == 111. Listing Single v1 — overview, history, finance =============== */
.lsg-ov__grid {
  display: grid;
  grid-template-columns: calc(var(--u) * 860) minmax(0, 1fr);
  gap: calc(var(--u) * 100);
}

.lsg-ov__l,
.lsg-ov__r {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 44);
}

.lsg-ov__r {
  gap: calc(var(--u) * 34);
}

.lsg-q__t {
  position: relative;
  font-size: max(12px, calc(var(--u) * 36));
  line-height: 1.38;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.lsg-q__mk {
  position: absolute;
  left: calc(var(--u) * -6);
  top: calc(var(--u) * -50);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 120));
  line-height: normal;
  color: var(--acc);
  opacity: .35;
}

.lsg-q__by {
  margin-top: calc(var(--u) * 44);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  color: var(--mute);
}

.lsg-q__rule {
  width: calc(var(--u) * 40);
  height: .5px;
  background: var(--acc);
}

.lsg-hi {
  padding: calc(var(--u) * 28) 0;
  border-top: .5px solid var(--sg-ln);
  display: grid;
  grid-template-columns: calc(var(--u) * 70) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
}

.lsg-hi__n {
  padding-top: calc(var(--u) * 6);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.lsg-hi__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.lsg-hi__t {
  font-size: max(12px, calc(var(--u) * 26));
  letter-spacing: -.02em;
}

.lsg-hi__d {
  font-size: max(12px, calc(var(--u) * 17));
  line-height: 1.5;
  color: var(--body);
}

.lsg-tabs {
  align-self: flex-start;
  padding: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 32);
  background: var(--sg-chip);
  display: flex;
}

.lsg-tab {
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 26);
  border: 0;
  border-radius: calc(var(--u) * 27);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  cursor: pointer;
  transition: background .25s, color .25s;
}

.lsg-tab.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.lsg-tab__n {
  opacity: .55;
}

.lsg-eq__h {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lsg-eq__ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(var(--u) * 40);
}

.lsg-eq__ul li {
  padding: calc(var(--u) * 24) 0;
  border-bottom: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 19));
}

.lsg-eq__ul .acc {
  display: flex;
}

/* "Show all": every list at once, each under its own title */
.lsg-ov__r.is-all .lsg-tabs {
  display: none;
}

.lsg-ov__r.is-all .lsg-eq {
  display: block;
}

.lsg-ov__r.is-all .lsg-eq__h {
  position: static;
  width: auto;
  height: auto;
  margin-bottom: calc(var(--u) * 6);
  clip-path: none;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lsg-more {
  align-self: flex-start;
}

/* history: the ink band */
.lsg-band {
  position: relative;
  padding: calc(var(--u) * 80);
  border-radius: calc(var(--u) * 44);
  background: var(--sg-band);
  color: var(--sg-on-band);
  overflow: hidden;
  display: grid;
  grid-template-columns: calc(var(--u) * 560) minmax(0, 1fr) calc(var(--u) * 680);
  gap: calc(var(--u) * 80);
}

.lsg-band__ghost {
  position: absolute;
  right: calc(var(--u) * -40);
  bottom: calc(var(--u) * -120);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 520));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--sg-band-ghost);
  pointer-events: none;
}

.lsg-band__l {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.lsg-band__lbl {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 24);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--sg-band-mute);
}

.lsg-band__h {
  font-size: max(12px, calc(var(--u) * 72));
  letter-spacing: -.045em;
  line-height: 1.02;
}

.lsg-score {
  margin-top: calc(var(--u) * 20);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
  white-space: nowrap;
}

.lsg-score__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 120));
  line-height: .9;
  color: var(--acc);
}

.lsg-score__of {
  font-size: max(12px, calc(var(--u) * 36));
  color: var(--sg-band-mute);
}

.lsg-band__note {
  font-size: max(12px, calc(var(--u) * 17));
  line-height: 1.5;
  color: var(--sg-band-body);
}

.lsg-band__pdf {
  align-self: flex-start;
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 28);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--sg-band-line30);
  background: transparent;
  color: var(--sg-on-band);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.lsg-band__pdf:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.lsg-tls {
  position: relative;
  padding-top: calc(var(--u) * 8);
  display: flex;
  flex-direction: column;
}

.lsg-tl {
  display: grid;
  grid-template-columns: calc(var(--u) * 110) calc(var(--u) * 30) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
}

.lsg-tl__y {
  font-size: max(12px, calc(var(--u) * 28));
  letter-spacing: -.02em;
}

.lsg-tl__mk {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lsg-tl__dot {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  margin-top: calc(var(--u) * 10);
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--sg-band-line40);
}

.lsg-tl__ln {
  flex: 1;
  width: .5px;
  background: var(--sg-band-line18);
}

.lsg-tl__b {
  padding-bottom: calc(var(--u) * 46);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.lsg-tl__t {
  font-size: max(12px, calc(var(--u) * 24));
}

.lsg-tl__d {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--sg-band-body);
}

.lsg-tl__m {
  align-self: flex-start;
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--sg-band-fill08);
  color: var(--sg-band-body);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  display: flex;
  align-items: center;
}

.lsg-tl.is-now .lsg-tl__y {
  color: var(--acc);
}

.lsg-tl.is-now .lsg-tl__dot {
  border-color: var(--acc);
  background: var(--acc);
}

.lsg-tl.is-now .lsg-tl__ln {
  background: transparent;
}

.lsg-cks {
  position: relative;
  align-self: start;
  padding: calc(var(--u) * 40) calc(var(--u) * 44);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--sg-band-line);
  background: var(--sg-band-fill05);
  display: flex;
  flex-direction: column;
}

.lsg-ck {
  padding: calc(var(--u) * 22) 0;
  border-bottom: .5px solid var(--sg-band-line);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.lsg-ck__ic {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sg-ok16);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsg-ck__k {
  font-size: max(12px, calc(var(--u) * 19));
}

.lsg-ck__v {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 17));
  color: var(--sg-band-body);
  text-align: right;
}

.lsg-vin {
  padding-top: calc(var(--u) * 28);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.lsg-vin__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lsg-vin__k {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--sg-band-mute);
}

.lsg-vin__v {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 21));
  letter-spacing: calc(var(--u) * 1.68);
  overflow-wrap: anywhere;
}

.lsg-vin__copy {
  margin-left: auto;
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 20);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--sg-band-line25);
  background: transparent;
  color: var(--sg-on-band);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  cursor: pointer;
}

.lsg-vin__copy.is-done {
  color: var(--ok);
}

/* finance card */
.lsg-fcard {
  padding: calc(var(--u) * 60) calc(var(--u) * 64);
  border-radius: calc(var(--u) * 40);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 50);
}

.lsg-fcard__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 60);
}

.lsg-mo {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 28);
}

.lsg-mo__k,
.lsg-sums dt,
.lsg-ctl__k {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lsg-sums dt {
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 2.16);
}

.lsg-mo__row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 16);
  white-space: nowrap;
}

.lsg-mo__v {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 190));
  line-height: .85;
  color: var(--acc);
}

.lsg-mo__u {
  font-size: max(12px, calc(var(--u) * 26));
  color: var(--body);
}

.lsg-sums {
  padding-bottom: calc(var(--u) * 10);
  display: flex;
  gap: calc(var(--u) * 50);
}

.lsg-sums div {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
  white-space: nowrap;
}

.lsg-sums dd {
  font-size: max(12px, calc(var(--u) * 40));
  letter-spacing: -.02em;
}

.lsg-mb {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.lsg-mb__bar {
  height: calc(var(--u) * 72);
  border-radius: calc(var(--u) * 36);
  overflow: hidden;
  display: flex;
  gap: calc(var(--u) * 4);
}

.lsg-mb__s {
  width: 0;
  padding: 0 calc(var(--u) * 24);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: width .4s var(--lx-ease);
}

.lsg-mb__s--down {
  background: var(--ink);
  color: var(--on-ink);
}

.lsg-mb__s--trade {
  background: var(--ok);
  color: #fff;
}

.lsg-mb__s--fin {
  background: var(--acc);
  color: #fff;
}

.lsg-mb__s--int {
  background: var(--acc-a30);
  color: var(--ink);
}

.lsg-mb__leg {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10) calc(var(--u) * 40);
}

.lsg-mb__leg li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.lsg-mb__sw {
  display: block;
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  padding: 0;
  border-radius: 4px;
}

.lsg-ctl {
  padding-top: calc(var(--u) * 40);
  border-top: .5px solid var(--sg-ln);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 50);
  align-items: end;
}

.lsg-ctl__f {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.lsg-ctl__k--row {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
}

.lsg-ctl__val {
  font-size: max(12px, calc(var(--u) * 16));
  letter-spacing: calc(var(--u) * 0.64);
  color: var(--ink);
  white-space: nowrap;
}

.lsg-range {
  width: 100%;
  height: calc(var(--u) * 30);
  min-height: 24px;
  margin: 0;
  accent-color: var(--acc);
  cursor: pointer;
}

.lsg-trade {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 30);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  cursor: pointer;
}

.lsg-trade__sw {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 34);
  padding: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 17);
  background: var(--line2);
  display: flex;
  justify-content: flex-start;
  transition: background .25s;
}

.lsg-trade__sw span {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  border-radius: 50%;
  background: #fff;
  transition: transform .25s;
}

.lsg-trade[aria-pressed="true"] {
  border-color: var(--acc);
}

.lsg-trade[aria-pressed="true"] .lsg-trade__sw {
  background: var(--acc);
}

.lsg-trade[aria-pressed="true"] .lsg-trade__sw span {
  transform: translateX(calc(var(--u) * 22));
}

.lsg-fcard__acts {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.lsg-fcard__est {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 112. Listing Single v1 — visit, similar cars, sticky bar ========== */
.lsg-td__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 860);
  gap: calc(var(--u) * 40);
}

.lsg-map {
  position: relative;
  min-width: 0;
  height: calc(var(--u) * 720);
  border-radius: calc(var(--u) * 36);
  overflow: hidden;
  background: var(--sg-map);
}

.lsg-map__art,
.lsg-map__live {
  position: absolute;
  inset: 0;
}

.lsg-map__art {
  background-image: linear-gradient(var(--sg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sg-grid) 1px, transparent 1px);
  background-size: calc(var(--u) * 80) calc(var(--u) * 80);
}

.lsg-map__live {
  font-family: Geist, sans-serif;
}

.lsg-map .leaflet-container {
  isolation: isolate;
  background: transparent;
}

.lsg-map.is-live .lsg-map__art {
  display: none;
}

.lsg-map.is-live .lsg-map__live {
  background: var(--sg-map);
}

.lsg-map__live .leaflet-tile-pane {
  filter: grayscale(1) contrast(.92) brightness(1.04);
  opacity: .85;
}

[data-theme="dark"] .lsg-map__live .leaflet-tile-pane {
  filter: grayscale(1) invert(1) contrast(.85) brightness(.8);
  opacity: .9;
}

.lsg-map__live .leaflet-top .leaflet-control {
  margin-top: calc(var(--u) * 24);
}

.lsg-map__live .leaflet-left .leaflet-control {
  margin-left: calc(var(--u) * 24);
}

.lsg-map__live .leaflet-right .leaflet-control {
  margin-right: calc(var(--u) * 24);
}

.lsg-map__live .leaflet-bottom {
  bottom: calc(var(--u) * 84);
}

.lsg-map__live .leaflet-control-attribution {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--surf);
  font-size: 12px;
  color: var(--mute);
}

.lsg-map__live .leaflet-control-attribution a {
  color: var(--ink);
}

.lsg-map__live .leaflet-bar a {
  background: var(--surf);
  color: var(--ink);
  border-color: var(--sg-ln);
}

.lsg-map__water {
  position: absolute;
  left: -5%;
  right: -5%;
  top: 62%;
  height: calc(var(--u) * 150);
  background: var(--sg-water);
  transform: rotate(-6deg);
}

.lsg-map__road {
  position: absolute;
  background: var(--sg-road);
}

.lsg-map__road--h {
  left: 0;
  right: 0;
  top: 38%;
  height: calc(var(--u) * 22);
  transform: rotate(4deg);
}

.lsg-map__road--v {
  top: 0;
  bottom: 0;
  left: 46%;
  width: calc(var(--u) * 18);
  transform: rotate(12deg);
}

.lsg-map__you {
  position: absolute;
  left: 22%;
  top: 20%;
}

.lsg-map__you,
.lsg-you {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--sg-you);
  box-shadow: 0 0 0 calc(var(--u) * 10) var(--sg-you-ring);
  display: block;
}

.lsg-map__youtag,
.lsg-you__tag {
  position: absolute;
  left: calc(22% + calc(var(--u) * 26));
  top: calc(20% - calc(var(--u) * 6));
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.lsg-you-wrap {
  position: relative;
}

.lsg-you {
  position: absolute;
  left: calc(var(--u) * -7);
  top: calc(var(--u) * -7);
}

.lsg-you__tag {
  left: calc(var(--u) * 19);
  top: calc(var(--u) * -15);
}

.lsg-map__pin {
  position: absolute;
  left: 47%;
  top: 41%;
}

.lsg-pin__tag {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--acc);
  color: #fff;
  box-shadow: var(--sg-pin-shadow);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.lsg-pin__stem {
  width: 2px;
  height: calc(var(--u) * 22);
  background: var(--acc);
}

.lsg-pin__dot {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 calc(var(--u) * 12) var(--acc-a18);
}

.lsg-map__chip {
  position: absolute;
  right: calc(var(--u) * 24);
  bottom: calc(var(--u) * 24);
  z-index: 500;
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.lsg-store {
  min-width: 0;
  padding: calc(var(--u) * 54) calc(var(--u) * 56);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 34);
}

.lsg-store__name {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.lsg-store__n {
  font-size: max(12px, calc(var(--u) * 48));
  letter-spacing: -.03em;
}

.lsg-store__a {
  font-size: max(12px, calc(var(--u) * 18));
  color: var(--body);
}

.lsg-hr {
  padding: calc(var(--u) * 18) 0;
  border-top: .5px solid var(--sg-ln);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 18));
  color: var(--body);
}

.lsg-hr__d {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lsg-hr__today {
  display: none;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  color: var(--acc);
}

.lsg-hr.is-today {
  color: var(--ink);
}

.lsg-hr.is-today .lsg-hr__today {
  display: inline;
}

.lsg-store__acts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 10);
}

.lsg-store__acts .lsg-btn {
  height: calc(var(--u) * 68);
  padding: 0 calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 13));
  letter-spacing: calc(var(--u) * 1.82);
}

.lsg-store__acts .lsg-btn--wide {
  grid-column: 1 / 3;
  height: calc(var(--u) * 80);
  font-size: max(12px, calc(var(--u) * 15));
  letter-spacing: calc(var(--u) * 2.4);
}

.lsg-dlv {
  margin-top: auto;
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 24);
  background: var(--sg-chip);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.lsg-dlv__ic {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surf);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsg-dlv__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lsg-dlv__t {
  font-size: max(12px, calc(var(--u) * 19));
}

.lsg-dlv__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

/* similar cars */
.lsg-sims {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 30);
}

.lsg-sc__a {
  height: 100%;
  border-radius: calc(var(--u) * 36);
  border: .5px solid var(--sg-ln);
  background: var(--surf);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s;
}

.lsg-sc__a:hover {
  border-color: var(--acc);
}

.lsg-sc__ph {
  position: relative;
  height: calc(var(--u) * 340);
  background: var(--stripes);
  display: block;
}

.lsg-sc__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lsg-sc__m {
  position: absolute;
  left: calc(var(--u) * 20);
  top: calc(var(--u) * 20);
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  display: flex;
  align-items: center;
}

.lsg-sc__b {
  padding: calc(var(--u) * 30) calc(var(--u) * 32) calc(var(--u) * 32);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lsg-sc__meta {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.lsg-sc__n {
  font-size: max(12px, calc(var(--u) * 32));
  letter-spacing: -.02em;
}

.lsg-sc__p {
  margin-top: calc(var(--u) * 10);
  padding-top: calc(var(--u) * 20);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
}

.lsg-sc__mo {
  font-size: max(12px, calc(var(--u) * 32));
  color: var(--acc);
}

.lsg-sc__per {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.lsg-sc__c {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

/* sticky bar: slides in once the hero has left the screen */
.lsg-stk {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 60;
  transform: translateY(-110%);
  transition: transform .35s var(--lx-ease);
}

.lsg-stk.is-on {
  transform: translateY(0);
}

.lsg-stk__in {
  height: calc(var(--u) * 104);
  padding: 0 var(--gut);
  border-bottom: .5px solid var(--sg-ln);
  background: var(--surf);
  box-shadow: var(--sg-stk-shadow);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 30);
}

.lsg-stk__th {
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 68);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 14);
  object-fit: cover;
}

.lsg-stk__t {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lsg-stk__n {
  font-size: max(12px, calc(var(--u) * 28));
  letter-spacing: -.02em;
}

.lsg-stk__m {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.lsg-stk__p {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 14);
  white-space: nowrap;
}

.lsg-stk__mo {
  font-size: max(12px, calc(var(--u) * 40));
  color: var(--acc);
}

.lsg-stk__per {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.lsg-stk__c {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lsg-stk .lsg-stk__b {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 30);
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 1.96);
}

.lsg-stk .lsg-btn--acc {
  padding: 0 calc(var(--u) * 34);
}

/* lightbox */
.lsg-box {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--sg-box);
  color: #fff;
}

.lsg-box::backdrop {
  background: var(--sg-box);
}

.lsg-box[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsg-box__img {
  width: min(92vw, 138vh);
  height: auto;
  max-height: 86vh;
  object-fit: contain;
}

.lsg-box__slot {
  width: min(92vw, 138vh);
  aspect-ratio: 3 / 2;
  max-height: 86vh;
  border-radius: 20px;
  background: repeating-linear-gradient(135deg, #20242a 0 14px, #181b20 14px 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px;
  color: var(--sg-band-mute);
}

.lsg-box__cnt {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  white-space: nowrap;
}

.lsg-box__x {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sg-white18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lsg-box__x .ico {
  width: 24px;
  height: 24px;
}

.lsg-box .lsg-arw {
  position: absolute;
  top: 50%;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  font-size: 20px;
}

.lsg-box__prev {
  left: 20px;
}

.lsg-box__next {
  right: 20px;
}

/* the prototype leaves these at the browser's regular weight */
.lsg-pill,
.lsg-glass,
.lsg-arw,
.lsg-info__cust,
.lsg-price__unit,
.lsg-rnd,
.lsg-adv__r,
.lsg-adv__chat,
.lsg-spec__u,
.lsg-h__n,
.lsg-h__go,
.lsg-q__by,
.lsg-hi__n,
.lsg-more,
.lsg-band__ghost,
.lsg-band__lbl,
.lsg-score__n,
.lsg-band__pdf,
.lsg-tl__m,
.lsg-vin,
.lsg-fcard,
.lsg-map__youtag,
.lsg-you__tag,
.lsg-map__chip,
.lsg-store__acts .lsg-btn--out,
.lsg-sc__m {
  font-weight: 400;
}

.lsg-fcard .lsg-seg__b,
.lsg-fcard .lsg-trade,
.lsg-sums dd {
  font-weight: 300;
}

/* == 113. Listing Single v1 — smaller screens ========================== */
@media (max-width: 1599px) and (min-width: 1200px) {
  /* the panel's small type sits on the 12px floor: let the trust row wrap */
  .lsg-trust {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 16px;
  }

  .lsg-ctl {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px 40px;
  }

  .lsg-trade {
    justify-self: start;
  }
}

@media (max-width: 1199px) {
  .lsg-sec {
    padding-top: 72px;
  }

  .lsg-h {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 24px;
  }

  .lsg-h__t {
    font-size: 44px;
    white-space: normal;
  }

  .lsg-hero {
    margin-top: 20px;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .lsg-main {
    flex: none;
    min-height: 0;
    aspect-ratio: 3 / 2;
    border-radius: 24px;
  }

  .lsg-thumbs {
    gap: 8px;
  }

  .lsg-th {
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
  }

  .lsg-info {
    padding: 32px;
    border-radius: 24px;
    gap: 22px;
  }

  .lsg-info__h1 {
    font-size: 96px;
  }

  .lsg-price__big {
    font-size: 64px;
  }

  .lsg-trust {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 20px;
  }

  .lsg-specs {
    margin-top: 36px;
  }

  .lsg-specs__dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lsg-spec {
    padding: 22px 18px;
  }

  .lsg-spec__v {
    font-size: 32px;
  }

  .lsg-ov__grid,
  .lsg-td__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .lsg-td__grid {
    gap: 20px;
  }

  .lsg-q__t {
    font-size: 26px;
  }

  .lsg-q__mk {
    top: -34px;
    font-size: 80px;
  }

  .lsg-band {
    padding: 40px;
    border-radius: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px 40px;
  }

  .lsg-band__h {
    font-size: 44px;
  }

  .lsg-cks {
    grid-column: 1 / -1;
  }

  .lsg-fcard {
    padding: 32px;
    border-radius: 28px;
    gap: 32px;
  }

  .lsg-fcard__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .lsg-mo {
    max-width: 100%;
  }

  .lsg-mo__row {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .lsg-mo__v {
    font-size: 96px;
  }

  .lsg-sums {
    flex-wrap: wrap;
    gap: 16px 36px;
  }

  .lsg-sums dd {
    font-size: 28px;
  }

  .lsg-mb__s {
    padding: 0 12px;
  }

  .lsg-ctl {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px 32px;
  }

  .lsg-trade {
    justify-self: start;
  }

  .lsg-fcard__acts {
    flex-wrap: wrap;
  }

  .lsg-fcard__est {
    width: 100%;
    margin-left: 0;
  }

  .lsg-map {
    height: 440px;
    border-radius: 24px;
  }

  .lsg-store {
    padding: 32px;
    border-radius: 24px;
  }

  .lsg-sims {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .lsg-sc__a {
    border-radius: 24px;
  }

  .lsg-sc__ph {
    height: auto;
    aspect-ratio: 1376 / 864;
  }

  /* the sticky bar becomes a bottom CTA bar; the footer ends above it */
  .lsg ~ .ft {
    margin-bottom: 72px;
  }

  .lsg-stk {
    top: auto;
    bottom: 0;
    transform: translateY(110%);
  }

  .lsg-stk__in {
    height: auto;
    padding: 12px var(--gut);
    border-top: .5px solid var(--sg-ln);
    border-bottom: 0;
    gap: 16px;
  }

  .lsg-stk__th,
  .lsg-stk__t,
  .lsg-stk .lsg-btn--out {
    display: none;
  }

  .lsg-stk__p {
    margin-left: 0;
  }

  .lsg-stk__mo {
    font-size: 26px;
  }

  .lsg-stk .lsg-btn--acc {
    height: 48px;
    margin-left: auto;
    padding: 0 22px;
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .lsg-sec {
    padding-top: 56px;
  }

  .lsg-h__t {
    font-size: 34px;
  }

  .lsg-main__tl {
    display: none;
  }

  .lsg-main__tr {
    top: 12px;
    right: 12px;
  }

  .lsg-main__cnt {
    left: 12px;
    bottom: 12px;
  }

  .lsg-main__nav {
    right: 12px;
    bottom: 12px;
  }

  .lsg-glass {
    height: 36px;
    padding: 0 12px;
    gap: 6px;
  }

  .lsg-main__tr .lsg-glass .ico {
    display: none;
  }

  .lsg-arw {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .lsg-th {
    border-radius: 8px;
  }

  .lsg-th__more {
    font-size: 18px;
  }

  .lsg-info {
    padding: 24px 20px;
  }

  .lsg-info__meta {
    flex-wrap: wrap;
  }

  .lsg-info__make {
    font-size: 26px;
  }

  .lsg-info__h1 {
    font-size: 72px;
  }

  .lsg-price__big {
    font-size: 52px;
  }

  .lsg-res {
    height: 64px;
    gap: 12px;
  }

  .lsg-res__dot {
    width: 36px;
    height: 36px;
  }

  .lsg-acts__row {
    grid-template-columns: minmax(0, 1fr) 56px 56px;
  }

  .lsg-out,
  .lsg-rnd {
    height: 56px;
  }

  .lsg-trust {
    flex-direction: column;
  }

  .lsg-specs__dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lsg-spec__v {
    font-size: 28px;
  }

  .lsg-q__t {
    font-size: 22px;
  }

  .lsg-tabs {
    align-self: stretch;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lsg-tab {
    height: 44px;
    padding: 0 14px;
    flex-shrink: 0;
  }

  .lsg-eq__ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsg-eq__ul li {
    padding: 16px 0;
    font-size: 16px;
  }

  .lsg-band {
    padding: 28px 20px;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .lsg-band__h {
    font-size: 36px;
  }

  .lsg-band__ghost {
    font-size: 260px;
    bottom: -60px;
  }

  .lsg-tl {
    grid-template-columns: 56px 20px minmax(0, 1fr);
    gap: 12px;
  }

  .lsg-tl__y {
    font-size: 18px;
  }

  .lsg-tl__t {
    font-size: 18px;
  }

  .lsg-tl__b {
    padding-bottom: 28px;
  }

  .lsg-cks {
    padding: 20px;
  }

  .lsg-ck__k {
    font-size: 16px;
  }

  .lsg-ck__v {
    font-size: 14px;
  }

  .lsg-vin {
    flex-wrap: wrap;
  }

  .lsg-vin__v {
    font-size: 15px;
  }

  .lsg-fcard {
    padding: 24px 20px;
  }

  .lsg-mo__row {
    flex-wrap: wrap;
    white-space: normal;
  }

  /* BBH Bartle is wide: six glyphs take about 6.3em */
  .lsg-mo__v {
    font-size: min(56px, 12vw);
  }

  .lsg-stk__c {
    display: none;
  }

  .lsg-stk .lsg-btn--acc {
    min-width: 0;
    padding: 0 16px;
    font-size: 12px;
    letter-spacing: .08em;
  }

  .lsg-mo__u {
    font-size: 16px;
  }

  .lsg-sums dd {
    font-size: 22px;
  }

  .lsg-mb__bar {
    height: 40px;
  }

  .lsg-mb__s span {
    display: none;
  }

  .lsg-mb__leg {
    flex-direction: column;
  }

  .lsg-ctl {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsg-fcard__acts .lsg-btn {
    width: 100%;
    height: 56px;
  }

  .lsg-map {
    height: 340px;
  }

  .lsg-store {
    padding: 24px 20px;
  }

  .lsg-store__n {
    font-size: 30px;
  }

  .lsg-dlv {
    padding: 16px;
  }

  .lsg-sims {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* == 114. Listing Single v2 — shared =================================== */
/* Tokens, the section header, .lsg-e / .lsg-s and the lightbox come from 30-listing-single.css. */
:root {
  --sv-glass: rgba(17, 20, 24, .6);
  --sv-glass80: rgba(17, 20, 24, .8);
  --sv-card: rgba(14, 15, 18, .62);
  --sv-w14: rgba(255, 255, 255, .14);
  --sv-w18: rgba(255, 255, 255, .18);
  --sv-w20: rgba(255, 255, 255, .2);
  --sv-w40: rgba(255, 255, 255, .4);
  --sv-w55: rgba(255, 255, 255, .55);
  --sv-w60: rgba(255, 255, 255, .6);
  --sv-w70: rgba(255, 255, 255, .7);
  --sv-w85: rgba(255, 255, 255, .85);
  --sv-shade: linear-gradient(180deg, rgba(9, 10, 12, .35) 0%, rgba(9, 10, 12, 0) 22%, rgba(9, 10, 12, 0) 45%, rgba(9, 10, 12, .88) 100%);
  --sv-more: rgba(17, 20, 24, .66);
  --sv-ok12: rgba(47, 163, 107, .12);
  --sv-ok25: rgba(47, 163, 107, .25);
  --sv-c10: rgba(242, 243, 245, .1);
  --sv-c12: rgba(242, 243, 245, .12);
  --sv-c22: rgba(242, 243, 245, .22);
  --sv-trade1: #262a31;
  --sv-trade2: #1f2228;
  --sv-acc55: rgba(216, 71, 14, .55);
  /* the Serpent is shot on white: a deeper shade keeps the white title readable */
  --sv-shade-light: linear-gradient(180deg, rgba(9, 10, 12, .35) 0%, rgba(9, 10, 12, 0) 18%, rgba(9, 10, 12, .2) 40%, rgba(9, 10, 12, .78) 68%, rgba(9, 10, 12, .92) 100%);
}

[data-skin="green"] {
  --sv-acc55: rgba(18, 132, 79, .55);
}

.lsv-hero,
.lsv-nav,
.lsv-sec {
  font-weight: 400;
}

.lsv .lsg-h__r {
  font-weight: 300;
}

.lsv-sec {
  padding-top: calc(var(--u) * 110);
  scroll-margin-top: calc(var(--u) * 100);
}

/* == 115. Listing Single v2 — hero and section nav ===================== */
.lsv-hero {
  position: relative;
  height: calc(var(--u) * 1240);
  margin: calc(var(--u) * 20) calc(var(--u) * 20) 0;
  border-radius: calc(var(--u) * 44);
  overflow: hidden;
  background: #111317;
  color: #fff;
}

.lsv-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.lsv-hero__shade {
  position: absolute;
  inset: 0;
  background: var(--sv-shade);
}

:root:not([data-skin]) .lsv-hero__shade {
  background: var(--sv-shade-light);
}

.lsv-hero__tl,
.lsv-hero__tr {
  position: absolute;
  top: calc(var(--u) * 50);
  display: flex;
  gap: calc(var(--u) * 8);
}

.lsv-hero__tl {
  left: calc(var(--u) * 60);
}

.lsv-hero__tr {
  right: calc(var(--u) * 60);
}

.lsv-pill {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--sv-glass);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
}

.lsv-pill--acc {
  background: var(--acc);
}

.lsv-pill__dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--ok);
}

.lsv-glass {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 22);
  border: 0;
  border-radius: calc(var(--u) * 26);
  background: var(--sv-glass);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  cursor: pointer;
  transition: background .25s;
}

.lsv-glass:hover {
  background: var(--sv-glass80);
}

.lsv-glass[aria-pressed="true"] {
  background: var(--acc);
}

.lsv-hero__row {
  position: absolute;
  left: calc(var(--u) * 60);
  right: calc(var(--u) * 60);
  bottom: calc(var(--u) * 200);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 60);
}

.lsv-hero__title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.lsv-hero__meta {
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.3);
  color: var(--sv-w70);
}

.lsv-hero__make {
  margin-bottom: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 56));
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--sv-w85);
}

.lsv-hero__h1 {
  font-size: max(12px, calc(var(--u) * 300));
  letter-spacing: -.065em;
  line-height: .8;
  white-space: nowrap;
}

.lsv-hero__h1 .acc {
  display: inline-block;
  line-height: .8;
  color: var(--acc);
}

/* the glass price card */
.lsv-card {
  width: calc(var(--u) * 640);
  flex-shrink: 0;
  padding: calc(var(--u) * 40) calc(var(--u) * 44);
  border-radius: calc(var(--u) * 36);
  border: .5px solid var(--sv-w14);
  background: var(--sv-card);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.lsv-card__top {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--sv-w60);
}

.lsv-card__row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
  white-space: nowrap;
}

.lsv-card__mo {
  font-size: max(12px, calc(var(--u) * 96));
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: .9;
}

.lsv-card__per {
  font-size: max(12px, calc(var(--u) * 22));
  color: var(--sv-w70);
}

.lsv-card__note {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--sv-w60);
}

.lsv-card__acts {
  margin-top: calc(var(--u) * 6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 10);
}

.lsv-card__res,
.lsv-card__td {
  height: calc(var(--u) * 72);
  border-radius: calc(var(--u) * 36);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s;
}

.lsv-card__res {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.lsv-card__td {
  border: .5px solid var(--sv-w40);
  color: #fff;
}

.lsv-card__td:hover {
  background: #fff;
  color: #111418;
}

.lsv-card__res[aria-pressed="true"],
.lsv-nav__res[aria-pressed="true"] {
  background: var(--ok);
}

/* stat strip */
.lsv-stats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 150);
  border-top: .5px solid var(--sv-w18);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lsv-stat {
  padding: 0 calc(var(--u) * 60);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 8);
}

.lsv-stat + .lsv-stat {
  border-left: .5px solid var(--sv-w18);
}

.lsv-stat__k {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  color: var(--sv-w55);
}

.lsv-stat__v {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 40));
  font-weight: 300;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.lsv-stat__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  background: var(--ok);
}

/* sticky section nav */
.lsv-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  margin-top: calc(var(--u) * 30);
  border-bottom: .5px solid var(--sg-ln);
  background: var(--bg);
}

.lsv-nav__in {
  height: calc(var(--u) * 100);
  margin: 0 var(--gut);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 40);
}

.lsv-nav__car {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 14);
  font-weight: 300;
  white-space: nowrap;
}

.lsv-nav__n {
  font-size: max(12px, calc(var(--u) * 28));
  letter-spacing: -.02em;
}

.lsv-nav__mo {
  font-size: max(12px, calc(var(--u) * 20));
  color: var(--acc);
}

.lsv-nav__per {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.lsv-nav__div {
  width: .5px;
  height: calc(var(--u) * 40);
  background: var(--line2);
}

.lsv-nav__links {
  align-self: stretch;
  display: flex;
  gap: calc(var(--u) * 36);
}

.lsv-nav__a {
  border-bottom: 2px solid transparent;
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color .25s;
}

.lsv-nav__a:hover {
  color: var(--acc);
}

.lsv-nav__a.is-on {
  border-bottom-color: var(--acc);
  color: var(--ink);
}

.lsv-nav__r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lsv-nav__bmo {
  display: none;
}

.lsv-nav__fav {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  padding: 0;
  border-radius: 50%;
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 20));
  cursor: pointer;
}

.lsv-nav__fav[aria-pressed="true"] {
  border-color: var(--acc);
  color: var(--acc);
}

.lsv-nav__res {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 30);
  border: 0;
  border-radius: calc(var(--u) * 30);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s;
}

/* == 116. Listing Single v2 — gallery, stories, specs ================== */
.lsv-cats {
  padding: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 32);
  background: var(--sg-chip);
  display: flex;
}

.lsv-cat {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 24);
  border: 0;
  border-radius: calc(var(--u) * 26);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  cursor: pointer;
  transition: background .25s, color .25s;
}

.lsv-cat.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.lsv-cat__n {
  opacity: .55;
}

.lsv-mos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: calc(var(--u) * 380);
  gap: calc(var(--u) * 14);
}

.lsv-mos__li--big {
  grid-column: span 2;
  grid-row: span 2;
}

.lsv-tile {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: calc(var(--u) * 28);
  overflow: hidden;
  background: var(--stripes);
  color: var(--mute);
  font: inherit;
  cursor: zoom-in;
  display: block;
  transition: transform .4s;
}

.lsv-tile:hover {
  transform: scale(.99);
}

.lsv-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lsv-tile__slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  white-space: nowrap;
}

.lsv-tile__l {
  position: absolute;
  left: calc(var(--u) * 18);
  bottom: calc(var(--u) * 18);
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  background: var(--sv-glass);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  display: flex;
  align-items: center;
}

.lsv-tile__more {
  position: absolute;
  inset: 0;
  background: var(--sv-more);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
}

.lsv-tile__mn {
  font-size: max(12px, calc(var(--u) * 56));
  font-weight: 300;
  letter-spacing: -.03em;
}

.lsv-tile__mv {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  opacity: .8;
}

.lsv-box .lsg-box__img,
.lsv-box .lsg-box__slot {
  width: min(86vw, 150vh);
  max-height: 90vh;
}

/* why this car */
.lsv-whys {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.lsv-why {
  display: grid;
  grid-template-columns: calc(var(--u) * 1400) minmax(0, 1fr);
  gap: calc(var(--u) * 30);
  align-items: stretch;
}

.lsv-why--flip {
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 1400);
}

.lsv-why__img {
  width: 100%;
  height: calc(var(--u) * 760);
  border-radius: calc(var(--u) * 40);
  object-fit: cover;
}

.lsv-why--flip .lsv-why__img {
  order: 2;
}

.lsv-why__card {
  position: relative;
  min-width: 0;
  padding: calc(var(--u) * 70) calc(var(--u) * 70) calc(var(--u) * 64);
  border-radius: calc(var(--u) * 40);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.lsv-why__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 160));
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1px var(--sv-acc55);
}

.lsv-why__t {
  font-size: max(12px, calc(var(--u) * 64));
  letter-spacing: -.04em;
  line-height: 1.02;
  text-wrap: pretty;
}

.lsv-why__d {
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 300;
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

.lsv-why__xs {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.lsv-why__x {
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 24);
  background: var(--sg-chip);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lsv-why__xk {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--mute);
}

.lsv-why__xv {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* specs & equipment: two equal columns */
.lsv-specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 60);
}

.lsv-specs__l,
.lsv-specs__r {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.lsv-big {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: calc(var(--u) * 14);
}

.lsv-big__t {
  padding: calc(var(--u) * 40) calc(var(--u) * 44);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--u) * 14);
}

.lsv-big__k {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.lsv-big__v {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 120));
  font-weight: 300;
  letter-spacing: -.06em;
  line-height: .9;
  white-space: nowrap;
}

.lsv-big__u {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 400;
  letter-spacing: 0;
  color: var(--body);
}

.lsv-small {
  padding: calc(var(--u) * 20) calc(var(--u) * 44);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--u) * 50);
  font-weight: 300;
}

.lsv-small__r {
  padding: calc(var(--u) * 22) 0;
  border-bottom: .5px solid var(--sg-ln);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 18));
}

.lsv-small__r dt {
  color: var(--mute);
}

.lsv-small__r dd {
  text-align: right;
}

.lsv-acc {
  border-radius: calc(var(--u) * 32);
  border: .5px solid transparent;
  background: var(--surf);
  overflow: hidden;
  transition: border-color .25s;
}

.lsv-acc.is-open {
  border-color: var(--acc);
}

.lsv-acc__b {
  width: 100%;
  height: calc(var(--u) * 110);
  padding: 0 calc(var(--u) * 44);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
  cursor: pointer;
}

.lsv-acc__n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--acc);
}

.lsv-acc__t {
  font-size: max(12px, calc(var(--u) * 36));
  font-weight: 300;
  letter-spacing: -.02em;
}

.lsv-acc__c {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lsv-acc__m {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sg-chip);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 22));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, color .25s;
}

.lsv-acc__minus,
.lsv-acc.is-open .lsv-acc__plus {
  display: none;
}

.lsv-acc.is-open .lsv-acc__minus {
  display: inline;
}

.lsv-acc.is-open .lsv-acc__m {
  background: var(--acc);
  color: #fff;
}

.lsv-acc__ul {
  padding: 0 calc(var(--u) * 44) calc(var(--u) * 34);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--u) * 40);
}

.lsv-acc__ul li {
  padding: calc(var(--u) * 20) 0;
  border-top: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
}

.lsv-acc__ul .acc {
  display: flex;
}

/* == 117. Listing Single v2 — condition, history ======================= */
.lsv-cond {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 760);
  gap: calc(var(--u) * 30);
}

.lsv-map {
  position: relative;
  min-width: 0;
  height: calc(var(--u) * 940);
  border-radius: calc(var(--u) * 40);
  overflow: hidden;
  background: #111317;
}

.lsv-map__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lsv-spot {
  position: absolute;
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  box-shadow: 0 0 0 calc(var(--u) * 14) var(--acc-a25);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .25s;
}

.lsv-spot--ok {
  background: var(--ok);
  box-shadow: 0 0 0 calc(var(--u) * 14) var(--sv-ok25);
}

.lsv-spot.is-on {
  border: 3px solid #fff;
  transform: translate(-50%, -50%) scale(1.18);
}

/* point positions, measured on each side photo */
.lsv-spot--e0 { left: 18%; top: 42%; }
.lsv-spot--e1 { left: 63%; top: 37%; }
.lsv-spot--e2 { left: 21%; top: 62%; }
.lsv-spot--e3 { left: 58%; top: 52%; }
.lsv-spot--s0 { left: 17%; top: 47%; }
.lsv-spot--s1 { left: 57%; top: 41%; }
.lsv-spot--s2 { left: 21%; top: 68%; }
.lsv-spot--s3 { left: 52%; top: 58%; }

.lsv-map__leg {
  position: absolute;
  left: calc(var(--u) * 30);
  bottom: calc(var(--u) * 30);
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  background: var(--sv-more);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
}

.lsv-map__k {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.lsv-map__d {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  background: var(--acc);
}

.lsv-map__d--ok {
  background: var(--ok);
}

.lsv-map__p {
  opacity: .7;
}

.lsv-det {
  min-width: 0;
  padding: calc(var(--u) * 50);
  border-radius: calc(var(--u) * 40);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.lsv-det__score {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
  white-space: nowrap;
}

.lsv-det__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 96));
  line-height: .9;
  color: var(--acc);
}

.lsv-det__of {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  color: var(--mute);
}

.lsv-det__d {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.lsv-det__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.lsv-pts {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.lsv-pt {
  width: 100%;
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  border: .5px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  cursor: pointer;
}

.lsv-pt.is-on {
  border-color: var(--acc);
  background: var(--sg-chip);
}

.lsv-pt--ok.is-on {
  border-color: var(--ok);
}

.lsv-pt__n {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsv-pt--ok .lsv-pt__n {
  background: var(--ok);
}

.lsv-pt__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.lsv-pt__t {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.lsv-pt__l {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lsv-pt__sev {
  height: calc(var(--u) * 30);
  margin-left: auto;
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--acc-a12);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  display: flex;
  align-items: center;
}

.lsv-pt--ok .lsv-pt__sev {
  background: var(--sv-ok12);
  color: var(--ok);
}

.lsv-note {
  padding-top: calc(var(--u) * 24);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.lsv-note__img {
  width: 100%;
  height: calc(var(--u) * 250);
  border-radius: calc(var(--u) * 24);
  background: var(--stripes);
  object-fit: cover;
}

.lsv-note__d {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  line-height: 1.5;
  color: var(--body);
}

.lsv-note__fix {
  font-size: max(12px, calc(var(--u) * 15));
}

/* history */
.lsv-pdf {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 28);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.lsv-pdf:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.lsv-hist {
  padding: calc(var(--u) * 60) calc(var(--u) * 64);
  border-radius: calc(var(--u) * 40);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 50);
}

.lsv-tl {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 30);
}

.lsv-tl::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 78);
  height: .5px;
  background: var(--line2);
}

.lsv-tl__i {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  font-weight: 300;
}

.lsv-tl__y {
  font-size: max(12px, calc(var(--u) * 44));
  letter-spacing: -.03em;
  line-height: 1;
}

.lsv-tl__dot {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  margin: calc(var(--u) * 6) 0 calc(var(--u) * 8);
  border-radius: 50%;
  border: 1.5px solid var(--line2);
  background: var(--surf);
  box-shadow: 0 0 0 calc(var(--u) * 6) var(--surf);
}

.lsv-tl__t {
  font-size: max(12px, calc(var(--u) * 24));
}

.lsv-tl__d {
  font-size: max(12px, calc(var(--u) * 16));
  line-height: 1.5;
  color: var(--body);
}

.lsv-tl__m {
  align-self: flex-start;
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--sg-chip);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 12));
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  display: flex;
  align-items: center;
}

.lsv-tl__i.is-now .lsv-tl__y {
  color: var(--acc);
}

.lsv-tl__i.is-now .lsv-tl__dot {
  border-color: var(--acc);
  background: var(--acc);
}

.lsv-hist__foot {
  padding-top: calc(var(--u) * 40);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lsv-cks {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.lsv-ck {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 26);
  background: var(--sg-chip);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  white-space: nowrap;
}

.lsv-ck__ic {
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  background: var(--sg-ok16);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsv-ck__v {
  margin-left: calc(var(--u) * -6);
  color: var(--mute);
}

.lsv-vin {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  flex-shrink: 0;
}

.lsv-vin__k {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.lsv-vin__v {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 20));
  letter-spacing: calc(var(--u) * 1.6);
}

.lsv-vin__copy {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  cursor: pointer;
}

.lsv-vin__copy.is-done {
  color: var(--ok);
}

/* == 118. Listing Single v2 — finance 122e ============================= */
.lsv-fin {
  border-radius: calc(var(--u) * 44);
  background: var(--surf);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 740);
}

.lsv-fin__l {
  min-width: 0;
  padding: calc(var(--u) * 60) calc(var(--u) * 64);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 46);
}

.lsv-fin__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.lsv-fin__k,
.lsv-curve__k,
.lsv-con__k {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lsv-below {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--sv-ok12);
  color: var(--ok);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lsv-below__dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--ok);
}

.lsv-fin__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 40);
}

.lsv-fin__mo {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 18);
  white-space: nowrap;
}

.lsv-fin__v {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 170));
  line-height: .8;
  color: var(--acc);
}

.lsv-fin__per {
  font-size: max(12px, calc(var(--u) * 28));
  color: var(--body);
}

.lsv-fin__off {
  padding-bottom: calc(var(--u) * 8);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 8);
  white-space: nowrap;
}

.lsv-fin__off .lsv-fin__k {
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 2.16);
}

.lsv-fin__date {
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 300;
  letter-spacing: -.02em;
}

.lsv-fin__pay {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lsv-mb {
  height: calc(var(--u) * 132);
  display: flex;
  gap: calc(var(--u) * 6);
}

.lsv-mb__s {
  min-width: calc(var(--u) * 190);
  flex: 1 1 0;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lsv-mb__s[hidden] {
  display: none;
}

.lsv-mb__s--down {
  background: var(--ink);
  color: var(--on-ink);
}

.lsv-mb__s--trade {
  background: var(--ok);
  color: #fff;
}

.lsv-mb__s--fin {
  background: var(--acc);
  color: #fff;
}

.lsv-mb__s--int {
  background: var(--acc-a30);
  color: var(--ink);
}

.lsv-mb__top {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  opacity: .8;
  white-space: nowrap;
}

.lsv-mb__v {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.lsv-curve {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.lsv-curve__k {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 2.16);
}

.lsv-curve__box {
  position: relative;
  height: calc(var(--u) * 230);
  border-bottom: .5px solid var(--line2);
}

.lsv-curve__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lsv-curve__area {
  fill: var(--acc-a12);
}

.lsv-curve__line {
  fill: none;
  stroke: var(--acc);
  stroke-width: 2.5;
}

.lsv-curve__dot {
  position: absolute;
  left: 0;
  top: calc(var(--u) * -4);
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  margin-left: calc(var(--u) * -7);
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 calc(var(--u) * 8) var(--acc-a18);
}

.lsv-curve__today {
  position: absolute;
  left: calc(var(--u) * 20);
  top: calc(var(--u) * -14);
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--ink);
  color: var(--on-ink);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  display: flex;
  align-items: center;
}

.lsv-curve__years {
  position: relative;
  height: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.lsv-curve__years span {
  position: absolute;
  top: 0;
}

/* the ink console */
.lsv-con {
  padding: calc(var(--u) * 56) calc(var(--u) * 54);
  background: var(--sg-band);
  color: var(--sg-on-band);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 38);
}

.lsv-con__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lsv-con .lsv-con__k {
  color: var(--sg-band-mute);
}

.lsv-con__f .lsv-con__k {
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 2.16);
}

.lsv-con__reset {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sg-band-mute);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  cursor: pointer;
}

.lsv-con__reset:hover {
  color: var(--sg-on-band);
}

.lsv-con__f {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.lsv-dp {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.lsv-dp__b {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  border: .5px solid var(--sg-band-line25);
  background: transparent;
  color: var(--sg-on-band);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 22));
  cursor: pointer;
}

.lsv-dp__b:hover {
  border-color: var(--acc);
}

.lsv-dp__v {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(var(--u) * 12);
  white-space: nowrap;
}

.lsv-dp__amt {
  font-size: max(12px, calc(var(--u) * 58));
  font-weight: 300;
  letter-spacing: -.03em;
}

.lsv-dp__pc {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 16);
  background: var(--sv-c10);
  color: var(--sg-band-body);
  font-size: max(12px, calc(var(--u) * 14));
  display: flex;
  align-items: center;
}

.lsv-range {
  width: 100%;
  height: calc(var(--u) * 30);
  min-height: 24px;
  margin: 2px 0;
  accent-color: var(--acc);
  cursor: pointer;
}

.lsv-terms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * 8);
}

.lsv-term {
  height: calc(var(--u) * 96);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--sg-band-line18);
  background: transparent;
  color: var(--sg-on-band);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 4);
  cursor: pointer;
  transition: background .25s, border-color .25s;
}

.lsv-term.is-on {
  border-color: var(--acc);
  background: var(--acc);
}

.lsv-term__n {
  font-size: max(12px, calc(var(--u) * 38));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.lsv-term__u {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  opacity: .7;
}

.lsv-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 8);
}

.lsv-tier {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--sg-band-line18);
  background: transparent;
  color: var(--sg-on-band);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 8);
  cursor: pointer;
  transition: background .25s, color .25s;
}

.lsv-tier.is-on {
  border-color: var(--sg-on-band);
  background: var(--sg-on-band);
  color: #111418;
}

.lsv-tier__r {
  font-size: max(12px, calc(var(--u) * 13));
  opacity: .6;
}

.lsv-trade {
  padding: calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 16) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 26);
  border: .5px solid var(--sv-c12);
  background: var(--sg-band-fill05);
  color: var(--sg-on-band);
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  cursor: pointer;
}

.lsv-trade[aria-pressed="true"] {
  border-color: var(--acc);
}

.lsv-trade__ph {
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 64);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 16);
  background: repeating-linear-gradient(135deg, var(--sv-trade1) 0 calc(var(--u) * 10), var(--sv-trade2) calc(var(--u) * 10) calc(var(--u) * 20));
  color: var(--sg-band-mute);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
}

.lsv-trade__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lsv-trade__t {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.lsv-trade__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--sg-band-body);
  white-space: nowrap;
}

.lsv-trade__sw {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 34);
  margin-left: auto;
  padding: calc(var(--u) * 3);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 17);
  background: var(--sv-c22);
  display: flex;
  transition: background .25s;
}

.lsv-trade__sw span {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  border-radius: 50%;
  background: #fff;
  transition: transform .25s;
}

.lsv-trade[aria-pressed="true"] .lsv-trade__sw {
  background: var(--acc);
}

.lsv-trade[aria-pressed="true"] .lsv-trade__sw span {
  transform: translateX(calc(var(--u) * 26));
}

.lsv-con__go {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lsv-con__cta {
  height: calc(var(--u) * 84);
  border-radius: calc(var(--u) * 42);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 16);
  transition: filter .25s;
}

.lsv-con__cta:hover {
  filter: brightness(1.08);
}

.lsv-con__dot {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: var(--sv-w20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsv-con__note {
  text-align: center;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--sg-band-mute);
}

/* == 119. Listing Single v2 — showroom, ribbon ========================= */
.lsv-show {
  padding: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 40);
  background: var(--surf);
  display: grid;
  grid-template-columns: calc(var(--u) * 820) minmax(0, 1fr) calc(var(--u) * 560);
  gap: calc(var(--u) * 50);
  align-items: stretch;
}

.lsv-smap {
  position: relative;
  height: calc(var(--u) * 380);
  border-radius: calc(var(--u) * 28);
  overflow: hidden;
  background: var(--sg-map);
}

.lsv-smap__art,
.lsv-smap__live {
  position: absolute;
  inset: 0;
}

.lsv-smap__art {
  background-image: linear-gradient(var(--sg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sg-grid) 1px, transparent 1px);
  background-size: calc(var(--u) * 60) calc(var(--u) * 60);
}

.lsv-smap__water {
  position: absolute;
  left: -5%;
  right: -5%;
  top: 66%;
  height: calc(var(--u) * 90);
  background: var(--sg-water);
  transform: rotate(-6deg);
}

.lsv-smap__road {
  position: absolute;
  background: var(--sg-road);
}

.lsv-smap__road--h {
  left: 0;
  right: 0;
  top: 36%;
  height: calc(var(--u) * 16);
  transform: rotate(4deg);
}

.lsv-smap__road--v {
  top: 0;
  bottom: 0;
  left: 52%;
  width: calc(var(--u) * 14);
  transform: rotate(12deg);
}

.lsv-smap__pin {
  position: absolute;
  left: 50%;
  top: 44%;
}

.lsv-smap .lsg-pin__tag {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 14));
}

.lsv-smap .leaflet-container {
  isolation: isolate;
  background: transparent;
  font-family: Geist, sans-serif;
}

.lsv-smap.is-live .lsv-smap__art {
  display: none;
}

.lsv-smap.is-live .lsv-smap__live {
  background: var(--sg-map);
}

.lsv-smap__live .leaflet-tile-pane {
  filter: grayscale(1) contrast(.92) brightness(1.04);
  opacity: .85;
}

[data-theme="dark"] .lsv-smap__live .leaflet-tile-pane {
  filter: grayscale(1) invert(1) contrast(.85) brightness(.8);
  opacity: .9;
}

.lsv-smap__live .leaflet-control-attribution {
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--surf);
  font-size: 12px;
  color: var(--mute);
}

.lsv-smap__live .leaflet-control-attribution a {
  color: var(--ink);
}

.lsv-smap__live .leaflet-bar a {
  border-color: var(--sg-ln);
  background: var(--surf);
  color: var(--ink);
}

.lsv-show__info {
  min-width: 0;
  padding: calc(var(--u) * 20) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 22);
  font-weight: 300;
}

.lsv-show__n {
  font-size: max(12px, calc(var(--u) * 48));
  letter-spacing: -.03em;
}

.lsv-show__a {
  font-size: max(12px, calc(var(--u) * 19));
  color: var(--body);
}

.lsv-hrs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.lsv-hr {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--sg-chip);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lsv-hr__today {
  display: none;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  color: var(--acc);
}

.lsv-hr.is-today {
  color: var(--ink);
}

.lsv-hr.is-today .lsv-hr__today {
  display: inline;
}

.lsv-show__d {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.lsv-show__acts {
  padding: calc(var(--u) * 20) calc(var(--u) * 26) calc(var(--u) * 20) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: calc(var(--u) * 10);
}

.lsv-show__book,
.lsv-show__out {
  height: calc(var(--u) * 68);
  border-radius: calc(var(--u) * 34);
  border: .5px solid var(--line2);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .25s, color .25s, filter .25s;
}

.lsv-show__out:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.lsv-show__book {
  grid-column: 1 / 3;
  height: calc(var(--u) * 84);
  border: 0;
  border-radius: calc(var(--u) * 42);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  letter-spacing: calc(var(--u) * 2.4);
}

.lsv-show__book:hover {
  filter: brightness(1.08);
}

/* ribbon of similar cars */
.lsv-arws {
  display: flex;
  gap: calc(var(--u) * 10);
}

.lsv-arw {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  padding: 0;
  border-radius: 50%;
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 20));
  cursor: pointer;
}

.lsv-arw--acc {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.lsv-rib {
  padding: 0 var(--gut) calc(var(--u) * 10);
  scroll-padding: 0 var(--gut);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  display: flex;
  gap: calc(var(--u) * 24);
}

.lsv-rib::-webkit-scrollbar {
  display: none;
}

.lsv-rc {
  flex: 0 0 calc(var(--u) * 620);
  scroll-snap-align: start;
}

.lsv-rc__a {
  height: 100%;
  border-radius: calc(var(--u) * 36);
  border: .5px solid var(--sg-ln);
  background: var(--surf);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s;
}

.lsv-rc__a:hover {
  border-color: var(--acc);
}

.lsv-rc__ph {
  position: relative;
  height: calc(var(--u) * 380);
  display: block;
}

.lsv-rc__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lsv-rc__m {
  position: absolute;
  left: calc(var(--u) * 20);
  top: calc(var(--u) * 20);
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  display: flex;
  align-items: center;
}

.lsv-rc__b {
  padding: calc(var(--u) * 30) calc(var(--u) * 34) calc(var(--u) * 34);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lsv-rc__meta {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.lsv-rc__n {
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.02em;
}

.lsv-rc__p {
  margin-top: calc(var(--u) * 10);
  padding-top: calc(var(--u) * 20);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.lsv-rc__mo {
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  color: var(--acc);
}

.lsv-rc__per {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.lsv-rc__c {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

/* == 120. Listing Single v2 — smaller screens ========================== */
@media (max-width: 1599px) and (min-width: 1200px) {
  .lsv-nav__links {
    gap: calc(var(--u) * 22);
  }

  /* small type sits on the 12px floor here: let the score line wrap */
  .lsv-det__score {
    flex-wrap: wrap;
  }

  .lsv-det__d {
    width: 100%;
    margin-left: 0;
  }

  .lsv-hist__foot {
    flex-wrap: wrap;
  }

  .lsv-vin {
    margin-left: 0;
  }
}

@media (max-width: 1199px) {
  .lsv-sec {
    padding-top: 72px;
    scroll-margin-top: 64px;
  }

  /* the photo becomes a 3:2 block on top, the title and price sit on the dark band under it */
  .lsv-hero {
    height: auto;
    margin: 12px 12px 0;
    border-radius: 24px;
  }

  .lsv-hero__bg {
    position: relative;
    height: auto;
    aspect-ratio: 3 / 2;
    display: block;
  }

  .lsv-hero__shade {
    display: none;
  }

  .lsv-hero__tl {
    left: 24px;
    top: 20px;
  }

  .lsv-hero__tr {
    right: 24px;
    top: 20px;
  }

  .lsv-hero__row {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 28px 24px 0;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .lsv-hero__h1 {
    font-size: 120px;
    white-space: normal;
  }

  .lsv-hero__make {
    margin-bottom: 8px;
    font-size: 32px;
  }

  .lsv-card {
    width: auto;
    padding: 24px;
    border-radius: 24px;
  }

  .lsv-card__mo {
    font-size: 64px;
  }

  .lsv-stats {
    position: relative;
    height: auto;
    margin: 24px 0 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lsv-stat {
    padding: 18px 24px;
    border-top: .5px solid var(--sv-w18);
  }

  .lsv-stat + .lsv-stat {
    border-left: 0;
  }

  .lsv-stat:nth-child(3n + 2),
  .lsv-stat:nth-child(3n + 3) {
    border-left: .5px solid var(--sv-w18);
  }

  .lsv-stat__v {
    font-size: 26px;
  }

  /* the section nav: a scroll of chips; ♡ and Reserve go to a bottom bar */
  .lsv-nav__in {
    height: 56px;
    gap: 16px;
  }

  .lsv-nav__car,
  .lsv-nav__div {
    display: none;
  }

  .lsv-nav__links {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 22px;
  }

  .lsv-nav__links::-webkit-scrollbar {
    display: none;
  }

  .lsv-nav__r {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    margin: 0;
    padding: 12px var(--gut);
    border-top: .5px solid var(--sg-ln);
    background: var(--surf);
    box-shadow: var(--sg-stk-shadow);
  }

  .lsv-nav__bmo {
    margin-right: auto;
    display: block;
    white-space: nowrap;
    font-size: 22px;
    font-weight: 300;
    color: var(--acc);
  }

  .lsv-nav__fav {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .lsv-nav__res {
    height: 48px;
    padding: 0 20px;
    font-size: 12px;
  }

  .lsv ~ .ft {
    margin-bottom: 72px;
  }

  .lsg-h .lsv-cats {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lsv-cat {
    height: 44px;
    padding: 0 14px;
    flex-shrink: 0;
  }

  .lsv-mos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 160px;
    gap: 10px;
  }

  .lsv-mos__li--big {
    grid-row: span 2;
  }

  .lsv-tile {
    border-radius: 16px;
  }

  .lsv-tile__mn {
    font-size: 36px;
  }

  .lsv-why,
  .lsv-why--flip,
  .lsv-specs,
  .lsv-cond,
  .lsv-fin,
  .lsv-show {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsv-why--flip .lsv-why__img {
    order: 0;
  }

  .lsv-why__img {
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 24px;
  }

  .lsv-why__card {
    padding: 32px;
    border-radius: 24px;
  }

  .lsv-why__n {
    font-size: 96px;
  }

  .lsv-why__t {
    font-size: 40px;
  }

  .lsv-specs {
    gap: 24px;
  }

  .lsv-big__v {
    font-size: 72px;
  }

  .lsv-map {
    height: auto;
    aspect-ratio: 1650 / 940;
    border-radius: 24px;
  }

  .lsv-det,
  .lsv-hist {
    padding: 32px;
    border-radius: 24px;
  }

  .lsv-note__img {
    height: auto;
    aspect-ratio: 1320 / 500;
    border-radius: 16px;
  }

  .lsv-tl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 32px;
  }

  .lsv-tl::before {
    display: none;
  }

  .lsv-hist__foot {
    flex-wrap: wrap;
  }

  .lsv-vin {
    margin-left: 0;
  }

  .lsv-fin {
    border-radius: 24px;
  }

  .lsv-fin__l,
  .lsv-con {
    padding: 32px;
  }

  .lsv-fin__v {
    font-size: 96px;
  }

  .lsv-show {
    gap: 20px;
  }

  .lsv-smap {
    height: 320px;
  }

  .lsv-show__info {
    padding: 0;
  }

  .lsv-show__acts {
    padding: 0;
  }

  .lsv-rc {
    flex-basis: 420px;
  }
}

@media (max-width: 767px) {
  .lsv-sec {
    padding-top: 56px;
  }

  .lsv-hero__tl {
    left: 12px;
    top: 12px;
  }

  .lsv-pill {
    height: 30px;
    padding: 0 10px;
  }

  .lsv-hero__tr {
    display: none;
  }

  .lsv-hero__row {
    padding: 20px 16px 0;
  }

  .lsv-hero__h1 {
    font-size: min(80px, 21vw);
  }

  .lsv-card__mo {
    font-size: 52px;
  }

  .lsv-card__acts {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsv-stats {
    margin: 20px 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lsv-stat {
    padding: 14px 16px;
  }

  .lsv-stat:nth-child(n) {
    border-left: 0;
  }

  .lsv-stat:nth-child(2n) {
    border-left: .5px solid var(--sv-w18);
  }

  .lsv-stat__v {
    font-size: 22px;
  }

  .lsv-mos {
    grid-auto-rows: 110px;
  }

  .lsv-why__card {
    padding: 24px 20px;
  }

  .lsv-why__n {
    font-size: 72px;
  }

  .lsv-why__t {
    font-size: 30px;
  }

  .lsv-big__t {
    padding: 20px;
    border-radius: 20px;
  }

  .lsv-big__v {
    font-size: 48px;
  }

  .lsv-small {
    padding: 8px 20px;
    grid-template-columns: minmax(0, 1fr);
  }

  .lsv-acc__b {
    height: 72px;
    padding: 0 20px;
    gap: 12px;
  }

  .lsv-acc__t {
    font-size: 22px;
  }

  .lsv-acc__c {
    display: none;
  }

  .lsv-acc__ul {
    padding: 0 20px 20px;
    grid-template-columns: minmax(0, 1fr);
  }

  .lsv-acc__ul li {
    font-size: 16px;
  }

  .lsv-spot {
    width: 32px;
    height: 32px;
    font-size: 14px;
    box-shadow: 0 0 0 6px var(--acc-a25);
  }

  .lsv-spot--ok {
    box-shadow: 0 0 0 6px var(--sv-ok25);
  }

  .lsv-spot.is-on {
    border-width: 2px;
  }

  .lsv-map__leg {
    left: 10px;
    bottom: 10px;
    height: 36px;
    padding: 0 12px;
    gap: 12px;
  }

  .lsv-map__p {
    display: none;
  }

  .lsv-det,
  .lsv-hist {
    padding: 24px 20px;
  }

  .lsv-det__d {
    display: none;
  }

  .lsv-tl {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .lsv-tl__y {
    font-size: 30px;
  }

  .lsv-ck {
    white-space: normal;
    height: auto;
    min-height: 44px;
    padding: 6px 16px 6px 6px;
  }

  .lsv-vin {
    flex-wrap: wrap;
  }

  .lsv-fin__l,
  .lsv-con {
    padding: 24px 20px;
  }

  .lsv-fin__head,
  .lsv-fin__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .lsv-below {
    height: auto;
    min-height: 36px;
    white-space: normal;
  }

  /* BBH Bartle is wide: six glyphs take about 6.3em */
  .lsv-fin__v {
    font-size: min(56px, 12vw);
  }

  .lsv-fin__off {
    align-items: flex-start;
  }

  .lsv-mb {
    height: auto;
    flex-direction: column;
  }

  .lsv-mb__s {
    min-width: 0;
    min-height: 64px;
  }

  .lsv-dp__amt {
    font-size: 36px;
  }

  .lsv-term__n {
    font-size: 26px;
  }

  .lsv-term {
    height: 72px;
  }

  .lsv-tier {
    flex-direction: column;
    gap: 0;
    font-size: 14px;
  }

  .lsv-trade__d {
    white-space: normal;
  }

  .lsv-con__cta {
    height: 64px;
  }

  .lsv-show {
    padding: 16px;
  }

  .lsv-show__n {
    font-size: 30px;
  }

  .lsv-hr {
    white-space: normal;
  }

  .lsv-rc {
    flex-basis: 82%;
  }
}

/* == 121. Listing Single v3 — split and stage ========================== */
/* Shared pieces: tokens and .lsg-e / .lsg-s (30), the condition rows, range, ribbon and lightbox (31). */
:root {
  --st-l14: rgba(17, 20, 24, .14);
  --st-l30: rgba(17, 20, 24, .3);
  --st-bar-shadow: 0 -14px 40px rgba(17, 20, 24, .08);
  --st-w25: rgba(255, 255, 255, .25);
  --st-w35: rgba(255, 255, 255, .35);
  --st-glass: rgba(17, 20, 24, .66);
}

[data-theme="dark"] {
  --st-l14: rgba(242, 243, 245, .14);
  --st-l30: rgba(242, 243, 245, .3);
  --st-bar-shadow: 0 -14px 40px rgba(0, 0, 0, .35);
}

.lst-stage,
.lst-col,
.lst-bar {
  font-weight: 400;
}

.lst {
  margin-top: calc(var(--u) * 24);
  display: grid;
  grid-template-columns: calc(var(--u) * 1400) minmax(0, 1fr);
  gap: calc(var(--u) * 80);
  align-items: start;
}

/* the stage ends just above the fixed bar: viewport − 40 − 112 on the artboard */
.lst-stage {
  position: sticky;
  top: calc(var(--u) * 20);
  height: calc(100vh - calc(var(--u) * 152));
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lst-media {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: calc(var(--u) * 40);
  overflow: hidden;
  background: #111317;
}

.lst-layers {
  position: absolute;
  inset: 0;
}

.lst-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s ease, transform 1.2s var(--lx-ease);
}

.lst-layer.is-on {
  opacity: 1;
  transform: scale(1);
}

/* the condition map: the side photo in a 3:2 box on dark, points by % */
.lst-cmap {
  position: absolute;
  inset: 0;
  background: #111317;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s;
}

.lst-cmap.is-on {
  opacity: 1;
  pointer-events: auto;
}

.lst-cmap__box {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  aspect-ratio: 3 / 2;
  transform: translateY(-50%);
  display: block;
}

.lst-cmap__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lst-spot {
  position: absolute;
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
  box-shadow: 0 0 0 calc(var(--u) * 12) var(--acc-a25);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .25s;
}

.lst-spot--ok {
  background: var(--ok);
  box-shadow: 0 0 0 calc(var(--u) * 12) var(--sv-ok25);
}

.lst-spot.is-on {
  border: 3px solid #fff;
  transform: translate(-50%, -50%) scale(1.18);
}

/* point positions on the whole side photo (3:2) */
.lst-spot--e0 { left: 18%; top: 40%; }
.lst-spot--e1 { left: 63%; top: 38%; }
.lst-spot--e2 { left: 21%; top: 60%; }
.lst-spot--e3 { left: 58%; top: 51%; }
.lst-spot--s0 { left: 17%; top: 47%; }
.lst-spot--s1 { left: 57%; top: 42%; }
.lst-spot--s2 { left: 21%; top: 65%; }
.lst-spot--s3 { left: 52%; top: 57%; }

.lst-tag {
  position: absolute;
  left: calc(var(--u) * 30);
  top: calc(var(--u) * 30);
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  background: var(--st-glass);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.lst-tag__n {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--acc);
}

.lst-tag__bar {
  width: .5px;
  height: calc(var(--u) * 16);
  background: var(--st-w35);
}

.lst-tag__l {
  opacity: .75;
}

.lst-tr {
  position: absolute;
  right: calc(var(--u) * 30);
  top: calc(var(--u) * 30);
  display: flex;
  gap: calc(var(--u) * 8);
}

.lst-glass {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 20);
  border: 0;
  border-radius: calc(var(--u) * 24);
  background: var(--st-glass);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  cursor: pointer;
  transition: background .25s;
}

.lst-glass:hover,
.lst-glass[aria-pressed="true"] {
  background: var(--acc);
}

.lst-prog {
  position: absolute;
  left: calc(var(--u) * 30);
  right: calc(var(--u) * 30);
  bottom: calc(var(--u) * 30);
  display: flex;
  gap: calc(var(--u) * 6);
}

.lst-prog__s {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--st-w25);
  transition: background .4s;
}

.lst-prog__s.is-on {
  background: var(--acc);
}

.lst-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.lst-th {
  width: 100%;
  height: calc(var(--u) * 110);
  padding: 0;
  border: 2px solid transparent;
  border-radius: calc(var(--u) * 18);
  overflow: hidden;
  background: #111317;
  cursor: pointer;
  display: block;
  transition: border-color .25s;
}

.lst-th.is-on,
.lst-mini.is-on {
  border-color: var(--acc);
}

.lst-th__img,
.lst-mini__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* == 122. Listing Single v3 — the reading column ======================= */
.lst-col {
  min-width: 0;
  padding-top: calc(var(--u) * 20);
}

.lst-sec {
  padding-bottom: calc(var(--u) * 120);
  scroll-margin-top: calc(var(--u) * 20);
}

.lst-sec[data-last] {
  padding-bottom: calc(var(--u) * 60);
}

.lst-lbl {
  margin-bottom: calc(var(--u) * 26);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-weight: 400;
}

.lst-lbl__n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.lst-lbl__t {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
  color: var(--mute);
}

.lst-lbl__ln {
  flex: 1;
  height: .5px;
  background: var(--sg-ln);
}

/* overview */
.lst-meta {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lst-make {
  margin-top: calc(var(--u) * 30);
  font-size: max(12px, calc(var(--u) * 40));
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--body);
}

.lst-h1 {
  margin-top: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 200));
  letter-spacing: -.065em;
  line-height: .85;
}

.lst-h1 .acc {
  display: inline-block;
  line-height: .8;
}

.lst-sub {
  margin-top: calc(var(--u) * 24);
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  color: var(--body);
}

.lst-pcard {
  margin-top: calc(var(--u) * 44);
  padding: calc(var(--u) * 36) calc(var(--u) * 40);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.lst-pcard__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
}

.lst-pcard__mo {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
  white-space: nowrap;
}

.lst-pcard__v {
  font-size: max(12px, calc(var(--u) * 96));
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .9;
  color: var(--acc);
}

.lst-pcard__per {
  font-size: max(12px, calc(var(--u) * 20));
  color: var(--body);
}

.lst-pcard__cash {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 6);
  white-space: nowrap;
}

.lst-pcard__c {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
}

.lst-pcard__below {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--ok);
}

.lst-pcard__dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--ok);
}

.lst-pcard__acts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) calc(var(--u) * 72);
  gap: calc(var(--u) * 10);
}

.lst-res,
.lst-out,
.lst-fav {
  height: calc(var(--u) * 76);
  border-radius: calc(var(--u) * 38);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}

.lst-res {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.lst-res[aria-pressed="true"],
.lst-bar__res[aria-pressed="true"] {
  background: var(--ok);
}

.lst-out {
  border: .5px solid var(--line2);
  color: var(--ink);
}

.lst-out:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.lst-fav {
  padding: 0;
  border: .5px solid var(--line2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 22));
  letter-spacing: 0;
}

.lst-fav[aria-pressed="true"] {
  border-color: var(--acc);
  color: var(--acc);
}

.lst-trust {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
  font-weight: 300;
  color: var(--body);
}

.lst-trust li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  white-space: nowrap;
}

/* highlights */
.lst-hi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.lst-hi__t {
  padding: calc(var(--u) * 28) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.lst-hi__ic {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--acc-a12);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lst-hi__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lst-hi__k {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.lst-hi__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

/* exterior / interior stories and the spec rows */
.lst-h2 {
  margin-bottom: calc(var(--u) * 22);
  font-size: max(12px, calc(var(--u) * 56));
  letter-spacing: -.04em;
  line-height: 1.05;
  text-wrap: pretty;
}

.lst-p {
  margin-bottom: calc(var(--u) * 30);
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

.lst-row {
  padding: calc(var(--u) * 20) 0;
  border-bottom: .5px solid var(--sg-ln);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 30);
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.lst-row__k {
  color: var(--mute);
}

.lst-row__v {
  text-align: right;
}

.lst-minis {
  margin-top: calc(var(--u) * 30);
  display: flex;
  gap: calc(var(--u) * 10);
}

.lst-mini {
  position: relative;
  width: calc(var(--u) * 180);
  height: calc(var(--u) * 120);
  padding: 0;
  border: 2px solid transparent;
  border-radius: calc(var(--u) * 20);
  overflow: hidden;
  background: #111317;
  font: inherit;
  cursor: pointer;
  display: block;
  transition: border-color .25s;
}

.lst-mini__l {
  position: absolute;
  left: calc(var(--u) * 10);
  bottom: calc(var(--u) * 8);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: var(--sv-glass);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.4);
  display: flex;
  align-items: center;
}

/* specs */
.lst-big {
  margin-bottom: calc(var(--u) * 20);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.lst-big__t {
  padding: calc(var(--u) * 28) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.lst-big__k {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.lst-big__v {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 76));
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: .9;
  white-space: nowrap;
}

.lst-big__u {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 400;
  letter-spacing: 0;
  color: var(--body);
}

.lst-opts {
  width: 100%;
  height: calc(var(--u) * 68);
  margin-top: calc(var(--u) * 26);
  border-radius: calc(var(--u) * 34);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.lst-opts:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.lst-ogs {
  margin-top: calc(var(--u) * 26);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.lst-og {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lst-og__h {
  font-size: max(12px, calc(var(--u) * 13));
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lst-og__ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--u) * 30);
}

.lst-og__ul li {
  padding: calc(var(--u) * 14) 0;
  border-bottom: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.lst-og__ul .acc {
  display: flex;
}

/* condition (the rows are v2's .lsv-pt) */
.lst-score {
  margin-bottom: calc(var(--u) * 26);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
  white-space: nowrap;
}

.lst-score__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 96));
  line-height: .9;
  color: var(--acc);
}

.lst-score__of {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  color: var(--mute);
}

.lst-note {
  margin-top: calc(var(--u) * 20);
  padding: calc(var(--u) * 26) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.lst-note__d {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  line-height: 1.5;
  color: var(--body);
}

.lst-note__fix {
  font-size: max(12px, calc(var(--u) * 15));
}

/* history */
.lst-tl {
  display: flex;
  flex-direction: column;
  font-weight: 300;
}

.lst-tl__i {
  display: grid;
  grid-template-columns: calc(var(--u) * 90) calc(var(--u) * 24) minmax(0, 1fr);
  gap: calc(var(--u) * 18);
}

.lst-tl__y {
  font-size: max(12px, calc(var(--u) * 24));
}

.lst-tl__mk {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lst-tl__dot {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  margin-top: calc(var(--u) * 8);
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line2);
}

.lst-tl__ln {
  flex: 1;
  width: .5px;
  background: var(--line2);
}

.lst-tl__b {
  padding-bottom: calc(var(--u) * 30);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lst-tl__t {
  font-size: max(12px, calc(var(--u) * 21));
}

.lst-tl__m {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lst-tl__d {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.lst-tl__i.is-now .lst-tl__y {
  color: var(--acc);
}

.lst-tl__i.is-now .lst-tl__dot {
  border-color: var(--acc);
  background: var(--acc);
}

.lst-cks {
  margin-top: calc(var(--u) * 10);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.lst-ck {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 6);
  border-radius: calc(var(--u) * 23);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  white-space: nowrap;
}

.lst-ck__ic {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: 50%;
  background: var(--sg-ok16);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lst-vin {
  margin-top: calc(var(--u) * 26);
  padding-top: calc(var(--u) * 26);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.lst-vin__k {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.lst-vin__v {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 19));
  letter-spacing: calc(var(--u) * 1.52);
  overflow-wrap: anywhere;
}

.lst-vin__copy {
  height: calc(var(--u) * 46);
  margin-left: auto;
  padding: 0 calc(var(--u) * 20);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 23);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  cursor: pointer;
}

.lst-vin__copy.is-done {
  color: var(--ok);
}

/* finance */
.lst-fin {
  padding: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.lst-fin__mo {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 14);
  white-space: nowrap;
}

.lst-fin__v {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 120));
  line-height: .85;
  color: var(--acc);
}

.lst-fin__per {
  font-size: max(12px, calc(var(--u) * 22));
  color: var(--body);
}

.lst-fin__note {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lst-fin__f {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lst-fin__k {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lst-fin__k--row {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
}

.lst-fin__val {
  font-size: max(12px, calc(var(--u) * 17));
  letter-spacing: calc(var(--u) * 0.34);
  color: var(--ink);
  white-space: nowrap;
}

.lst-fin .lsv-range {
  margin: 2px 0;
}

.lst-seg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 30);
  background: var(--sg-chip);
  display: flex;
}

.lst-seg__b {
  height: calc(var(--u) * 52);
  flex: 1;
  border: 0;
  border-radius: calc(var(--u) * 26);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  cursor: pointer;
  transition: background .25s, color .25s;
}

.js-s3-tier {
  font-size: max(12px, calc(var(--u) * 15));
}

.lst-seg__b.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.lst-trade {
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--line2);
  background: var(--sg-chip);
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  cursor: pointer;
}

.lst-trade[aria-pressed="true"] {
  border-color: var(--acc);
}

.lst-trade__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lst-trade__t {
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
}

.lst-trade__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.lst-trade__sw {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 34);
  margin-left: auto;
  padding: calc(var(--u) * 3);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 17);
  background: var(--line2);
  display: flex;
  transition: background .25s;
}

.lst-trade__sw span {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  border-radius: 50%;
  background: #fff;
  transition: transform .25s;
}

.lst-trade[aria-pressed="true"] .lst-trade__sw {
  background: var(--acc);
}

.lst-trade[aria-pressed="true"] .lst-trade__sw span {
  transform: translateX(calc(var(--u) * 26));
}

.lst-cta {
  height: calc(var(--u) * 80);
  border-radius: calc(var(--u) * 40);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter .25s;
}

.lst-cta:hover {
  filter: brightness(1.08);
}

/* pickup or delivery: real radios, the card is the label */
.lst-dels {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lst-dels li {
  position: relative;
}

.lst-del__in {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lst-del {
  padding: calc(var(--u) * 30) calc(var(--u) * 32);
  border-radius: calc(var(--u) * 30);
  border: .5px solid var(--st-l14);
  background: var(--surf);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 22);
  cursor: pointer;
  transition: border-color .25s;
}

.lst-del__in:checked + .lst-del {
  border: 1.5px solid var(--acc);
}

.lst-del__in:focus-visible + .lst-del {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

.lst-del__r {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  margin-top: calc(var(--u) * 4);
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--st-l30);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lst-del__r span {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border-radius: 50%;
}

.lst-del__in:checked + .lst-del .lst-del__r {
  border-color: var(--acc);
}

.lst-del__in:checked + .lst-del .lst-del__r span {
  background: var(--acc);
}

.lst-del__b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.lst-del__top {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
  font-weight: 300;
}

.lst-del__t {
  font-size: max(12px, calc(var(--u) * 26));
}

.lst-del__p {
  font-size: max(12px, calc(var(--u) * 22));
}

.lst-del__p--ok {
  color: var(--ok);
}

.lst-del__d {
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  line-height: 1.5;
  color: var(--body);
}

.lst-del__w {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  color: var(--mute);
}

/* == 123. Listing Single v3 — the fixed bar ============================ */
.lst-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  transform: translateY(110%);
  transition: transform .35s var(--lx-ease);
}

.lst-bar.is-on {
  transform: translateY(0);
}

.lst-bar__in {
  height: calc(var(--u) * 112);
  padding: 0 var(--gut);
  border-top: .5px solid var(--sg-ln);
  background: var(--surf);
  box-shadow: var(--st-bar-shadow);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 30);
}

.lst-bar__th {
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 72);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 14);
  object-fit: cover;
}

.lst-bar__t {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lst-bar__n {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  letter-spacing: -.02em;
}

.lst-bar__m {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.lst-bar__div {
  width: .5px;
  height: calc(var(--u) * 50);
  flex-shrink: 0;
  background: var(--line2);
}

.lst-bar__p {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
  white-space: nowrap;
}

.lst-bar__mo {
  font-size: max(12px, calc(var(--u) * 40));
  font-weight: 300;
  color: var(--acc);
}

.lst-bar__per {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.lst-bar__chip {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--sg-chip);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lst-bar__acts {
  margin-left: auto;
  display: flex;
  gap: calc(var(--u) * 10);
}

.lst-bar__td,
.lst-bar__res {
  height: calc(var(--u) * 68);
  border-radius: calc(var(--u) * 34);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}

.lst-bar__td {
  padding: 0 calc(var(--u) * 30);
  border: .5px solid var(--line2);
  color: var(--ink);
}

.lst-bar__td:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.lst-bar__res {
  padding: 0 calc(var(--u) * 40);
  border: 0;
  background: var(--acc);
  color: #fff;
}

/* == 124. Listing Single v3 — smaller screens ========================== */
@media (max-width: 1599px) and (min-width: 1200px) {
  /* the stage takes half the width; the thumbnails go (the mini-shots stay) */
  .lst {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(var(--u) * 60);
  }

  .lst-thumbs {
    display: none;
  }

  .lst-trust {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 16px;
  }

  .lst-bar__chip,
  .lst-bar__div {
    display: none;
  }
}

@media (max-width: 1199px) {
  /* no split: the stage sticks to the top as a 3:2 strip and still follows the reading */
  .lst {
    margin-top: 16px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .lst-stage {
    top: 0;
    z-index: 5;
    height: auto;
    margin: 0 calc(-1 * var(--gut));
    padding: 8px var(--gut);
    background: var(--bg);
  }

  .lst-media {
    flex: none;
    height: min(62vw, 42vh);
    border-radius: 20px;
  }

  .lst-thumbs {
    display: none;
  }

  .lst-tag {
    left: 12px;
    top: 12px;
    height: 32px;
    padding: 0 12px;
    gap: 8px;
  }

  .lst-tr {
    right: 12px;
    top: 12px;
  }

  .lst-glass {
    height: 32px;
    padding: 0 12px;
  }

  .js-s3-spin {
    display: none;
  }

  .lst-prog {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .lst-spot {
    width: 30px;
    height: 30px;
    font-size: 13px;
    box-shadow: 0 0 0 5px var(--acc-a25);
  }

  .lst-spot--ok {
    box-shadow: 0 0 0 5px var(--sv-ok25);
  }

  .lst-spot.is-on {
    border-width: 2px;
  }

  .lst-col {
    padding-top: 24px;
  }

  .lst-sec {
    padding-bottom: 64px;
    scroll-margin-top: calc(min(62vw, 42vh) + 24px);
  }

  .lst-h1 {
    font-size: 110px;
  }

  .lst-pcard,
  .lst-fin {
    padding: 28px;
    border-radius: 24px;
  }

  .lst-pcard__v {
    font-size: 64px;
  }

  .lst-trust {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 20px;
  }

  .lst-h2 {
    font-size: 40px;
  }

  .lst-big__v {
    font-size: 56px;
  }

  .lst-fin__v {
    font-size: 80px;
  }

  /* the bar keeps price and Reserve */
  .lst-bar__in {
    height: auto;
    padding: 12px var(--gut);
    gap: 16px;
  }

  .lst-bar__th,
  .lst-bar__t,
  .lst-bar__div,
  .lst-bar__chip,
  .lst-bar__td {
    display: none;
  }

  .lst-bar__mo {
    font-size: 24px;
  }

  .lst-bar__res {
    height: 48px;
    padding: 0 20px;
    font-size: 12px;
  }

  .lst-page ~ .ft {
    margin-bottom: 72px;
  }
}

@media (max-width: 767px) {
  .lst-media {
    border-radius: 16px;
  }

  .lst-tag__bar,
  .lst-tag__l {
    display: none;
  }

  .lst-h1 {
    font-size: min(72px, 19vw);
  }

  .lst-make {
    margin-top: 20px;
    font-size: 26px;
  }

  .lst-pcard,
  .lst-fin {
    padding: 22px 18px;
  }

  .lst-pcard__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .lst-pcard__cash {
    align-items: flex-start;
  }

  .lst-pcard__v {
    font-size: 52px;
  }

  .lst-pcard__acts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
  }

  .lst-res,
  .lst-out,
  .lst-fav {
    height: 56px;
    font-size: 12px;
  }

  .lst-fav {
    font-size: 18px;
  }

  .lst-trust {
    flex-direction: column;
  }

  .lst-hi {
    grid-template-columns: minmax(0, 1fr);
  }

  .lst-hi__t {
    padding: 18px;
  }

  .lst-h2 {
    font-size: 30px;
  }

  .lst-p {
    font-size: 17px;
  }

  .lst-row {
    font-size: 16px;
  }

  .lst-minis {
    flex-wrap: wrap;
  }

  .lst-mini {
    width: 120px;
    height: 80px;
  }

  .lst-big__t {
    padding: 18px;
  }

  .lst-big__v {
    font-size: 40px;
  }

  .lst-og__ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .lst-tl__i {
    grid-template-columns: 56px 20px minmax(0, 1fr);
    gap: 12px;
  }

  .lst-tl__y {
    font-size: 18px;
  }

  .lst-tl__t {
    font-size: 18px;
  }

  .lst-ck {
    white-space: normal;
  }

  .lst-vin {
    flex-wrap: wrap;
  }

  .lst-vin__v {
    font-size: 15px;
  }

  /* BBH Bartle is wide: six glyphs take about 6.3em */
  .lst-fin__v {
    font-size: min(56px, 12vw);
  }

  .lst-seg__b {
    height: 44px;
    font-size: 13px;
  }

  .lst-del {
    padding: 20px;
    gap: 14px;
  }

  .lst-del__t {
    font-size: 20px;
  }

  .lst-del__p {
    font-size: 18px;
  }
}

/* == 125. Listing Single v4 — title and bento ========================== */
/* Shared: tokens, .lsg-h, .lsg-e / .lsg-s (30), range, pdf button and lightbox (31). */
:root {
  --sx-glass: rgba(17, 20, 24, .66);
  --sx-w50: rgba(255, 255, 255, .5);
  --sx-ok14: rgba(47, 163, 107, .14);
  --sx-deal: linear-gradient(90deg, #2fa36b 0%, #9cc94a 35%, #e0b23a 60%, #d8573a 100%);
  --sx-slot1: #eceef1;
  --sx-slot2: #f5f6f8;
}

[data-theme="dark"] {
  --sx-slot1: #1c1f24;
  --sx-slot2: #16181c;
}

.lsx-title,
.lsx-bento,
.lsx-sec,
.lsx-mbar {
  font-weight: 400;
}

.lsx .lsg-h__r {
  font-weight: 300;
}

.lsx-sec {
  padding-top: calc(var(--u) * 100);
  scroll-margin-top: calc(var(--u) * 20);
}

.lsx-h {
  padding-bottom: calc(var(--u) * 28);
  margin-bottom: calc(var(--u) * 40);
}

.lsx-h .lsg-h__t {
  font-size: max(12px, calc(var(--u) * 64));
}

.lsx-tile {
  min-width: 0;
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
}

.lsx-k {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.lsx-link {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
  text-decoration: none;
  transition: color .25s;
}

.lsx-link:hover {
  color: var(--acc);
}

.lsx-ink {
  color: var(--ink);
}

.lsx-ok {
  color: var(--ok);
}

/* title strip */
.lsx-title {
  margin-top: calc(var(--u) * 24);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 40);
}

.lsx-title__l {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lsx-title__meta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lsx-avail {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--sx-ok14);
  color: var(--ok);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  letter-spacing: .14em;
}

.lsx-avail__dot {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: var(--ok);
}

.lsx-h1 {
  font-size: max(12px, calc(var(--u) * 84));
  letter-spacing: -.05em;
  line-height: 1;
  white-space: nowrap;
}

.lsx-title__r {
  padding-bottom: calc(var(--u) * 6);
  display: flex;
  gap: calc(var(--u) * 10);
}

.lsx-pill,
.lsx-fav {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 30);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}

.lsx-pill:hover {
  border-color: var(--acc);
}

.lsx-pill--cmp[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.lsx-fav {
  width: calc(var(--u) * 60);
  padding: 0;
  border-radius: 50%;
  font-size: max(12px, calc(var(--u) * 20));
  letter-spacing: 0;
}

.lsx-fav[aria-pressed="true"] {
  border-color: var(--acc);
  color: var(--acc);
}

/* the bento: 12 columns, 7 rows of 150 */
.lsx-bento {
  margin-top: calc(var(--u) * 30);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: calc(var(--u) * 150);
  gap: calc(var(--u) * 16);
}

.lsx-photo {
  position: relative;
  grid-column: 1 / 8;
  grid-row: 1 / 7;
  border-radius: calc(var(--u) * 36);
  overflow: hidden;
  background: var(--stripes);
}

.lsx-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.lsx-photo__img[hidden],
.lsx-photo__slot[hidden],
.lsx-eq__ul li.lsx-eq__more {
  display: none;
}

.lsx-eq.is-open .lsx-eq__ul li.lsx-eq__more {
  display: flex;
}

.lsx-photo__slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  white-space: nowrap;
}

.lsx-glass {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border: 0;
  border-radius: calc(var(--u) * 22);
  background: var(--sx-glass);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  cursor: pointer;
}

button.lsx-glass:hover,
.lsx-glass[aria-pressed="true"] {
  background: var(--acc);
}

.lsx-photo__cnt {
  position: absolute;
  left: calc(var(--u) * 28);
  top: calc(var(--u) * 28);
  cursor: default;
}

.lsx-photo__num {
  font-family: ui-monospace, Menlo, monospace;
}

.lsx-photo__sep {
  opacity: .5;
}

.lsx-photo__tr {
  position: absolute;
  right: calc(var(--u) * 28);
  top: calc(var(--u) * 28);
  display: flex;
  gap: calc(var(--u) * 8);
}

.lsx-photo__foot {
  position: absolute;
  left: calc(var(--u) * 28);
  right: calc(var(--u) * 28);
  bottom: calc(var(--u) * 28);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.lsx-dots {
  display: flex;
  gap: calc(var(--u) * 8);
}

/* the Serpent is shot on white: the white dots sit on a dark glass pill */
:root:not([data-skin]) .lsx-dots {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--sx-glass);
}

.lsx-dot {
  width: calc(var(--u) * 8);
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--sx-w50);
  cursor: pointer;
  transition: width .3s, background .3s;
}

.lsx-dot.is-on {
  width: calc(var(--u) * 34);
  background: #fff;
}

.lsx-photo__nav {
  margin-left: auto;
  display: flex;
  gap: calc(var(--u) * 10);
}

.lsx-arw {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 20));
  cursor: pointer;
  transition: background .25s, color .25s;
}

.lsx-arw:hover {
  background: var(--acc);
  color: #fff;
}

/* price tile */
.lsx-price {
  grid-column: 8 / 13;
  grid-row: 1 / 4;
  padding: calc(var(--u) * 40) calc(var(--u) * 44);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.lsx-price__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lsx-price__row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 14);
  white-space: nowrap;
}

.lsx-price__v {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 104));
  line-height: .85;
  color: var(--acc);
}

.lsx-price__per {
  font-size: max(12px, calc(var(--u) * 20));
  color: var(--body);
}

.lsx-price__note {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lsx-price__acts {
  margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(var(--u) * 10);
}

.lsx-res,
.lsx-out {
  height: calc(var(--u) * 76);
  border-radius: calc(var(--u) * 38);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}

.lsx-res {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.lsx-out {
  border: .5px solid var(--line2);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 13));
  letter-spacing: calc(var(--u) * 1.82);
}

.lsx-out:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.lsx-res[aria-pressed="true"],
.lsx-card__cta[aria-pressed="true"],
.lsx-mbar__res[aria-pressed="true"] {
  background: var(--ok);
}

/* deal rating */
.lsx-deal {
  grid-column: 8 / 11;
  grid-row: 4 / 6;
  padding: calc(var(--u) * 30) calc(var(--u) * 34);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.lsx-deal__v {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.02em;
}

.lsx-deal__dot {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  border-radius: 50%;
  background: var(--ok);
}

.lsx-deal__bar {
  position: relative;
  height: calc(var(--u) * 12);
  margin-top: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 6);
  background: var(--sx-deal);
}

.lsx-deal__knob {
  position: absolute;
  left: 38%;
  top: 50%;
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border-radius: 50%;
  border: calc(var(--u) * 4) solid var(--ink);
  background: var(--surf);
  transform: translate(-50%, -50%);
}

.lsx-deal__tag {
  position: absolute;
  left: 38%;
  bottom: calc(var(--u) * 22);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: var(--ink);
  color: var(--on-ink);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.32);
  white-space: nowrap;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
}

.lsx-deal__avg {
  position: absolute;
  left: 56%;
  top: calc(var(--u) * -6);
  width: 2px;
  height: calc(var(--u) * 24);
  background: var(--ink);
  opacity: .5;
}

.lsx-deal__scale {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.lsx-deal__note {
  margin-top: auto;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

/* inspection ring */
.lsx-insp {
  grid-column: 11 / 13;
  grid-row: 4 / 6;
  padding: calc(var(--u) * 30);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
}

.lsx-ring {
  position: relative;
  width: calc(var(--u) * 150);
  height: calc(var(--u) * 150);
  border-radius: 50%;
  background: conic-gradient(var(--acc) 0 98.6%, var(--sg-chip) 98.6% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsx-ring__in {
  width: calc(var(--u) * 124);
  height: calc(var(--u) * 124);
  border-radius: 50%;
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lsx-ring__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 28));
  line-height: 1;
  white-space: nowrap;
  color: var(--acc);
}

.lsx-ring__of {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.lsx-insp__t {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

/* advisor */
.lsx-adv {
  grid-column: 8 / 13;
  grid-row: 6 / 7;
  padding: 0 calc(var(--u) * 30);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.lsx-adv__ph {
  position: relative;
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  flex-shrink: 0;
  display: block;
}

.lsx-adv__ph img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.lsx-adv__on {
  position: absolute;
  right: 0;
  bottom: calc(var(--u) * 2);
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border-radius: 50%;
  border: 2px solid var(--surf);
  background: var(--ok);
}

.lsx-adv__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lsx-adv__n {
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 300;
}

.lsx-adv__r {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lsx-adv__ask {
  height: calc(var(--u) * 56);
  margin-left: auto;
  padding: 0 calc(var(--u) * 24);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 28);
  background: var(--sg-chip);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color .25s;
}

.lsx-adv__ask:hover {
  color: var(--acc);
}

/* the six stat tiles of row 7 */
.lsx-stat {
  grid-column: span 2;
  grid-row: 7;
  padding: calc(var(--u) * 26) calc(var(--u) * 30);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lsx-stat__v {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 52));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}

.lsx-stat__u {
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 400;
  letter-spacing: 0;
  color: var(--body);
}

/* == 126. Listing Single v4 — price history, comps, cost =============== */
.lsx-ph {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 620);
  gap: calc(var(--u) * 16);
}

.lsx-chart {
  padding: calc(var(--u) * 44) calc(var(--u) * 50) calc(var(--u) * 36);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.lsx-leg {
  display: flex;
  gap: calc(var(--u) * 30);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.lsx-leg__i {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lsx-leg__car {
  width: calc(var(--u) * 26);
  height: 3px;
  border-radius: 2px;
  background: var(--acc);
}

.lsx-leg__mkt {
  width: calc(var(--u) * 26);
  height: 0;
  border-top: 2px dashed var(--mute);
}

.lsx-ch {
  position: relative;
  height: calc(var(--u) * 400);
}

.lsx-ch__g {
  position: absolute;
  left: 0;
  right: 0;
  border-top: .5px solid var(--sg-ln);
}

.lsx-ch__g--0 { top: 16.667%; }
.lsx-ch__g--1 { top: 44.444%; }
.lsx-ch__g--2 { top: 72.222%; }
.lsx-ch__g--3 { top: 100%; }

.lsx-ch__gl {
  position: absolute;
  left: 0;
  top: 0;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
  transform: translateY(-120%);
}

.lsx-ch__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lsx-ch__area {
  fill: var(--acc-a10);
}

.lsx-ch__mkt {
  fill: none;
  stroke: var(--mute);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.lsx-ch__car {
  fill: none;
  stroke: var(--acc);
  stroke-width: 3;
}

/* drop pins: x = month / 6, y from the same scale as the line */
.lsx-ch__pin {
  position: absolute;
  width: 0;
  height: 0;
}

.lsx-ch__pin--e0 { left: 33.333%; top: 50%; }
.lsx-ch__pin--e1 { left: 83.333%; top: 77.778%; }
.lsx-ch__pin--s0 { left: 33.333%; top: 56.111%; }
.lsx-ch__pin--s1 { left: 83.333%; top: 72.778%; }

.lsx-ch__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  border-radius: 50%;
  border: calc(var(--u) * 3) solid var(--surf);
  background: var(--acc);
  transform: translate(-50%, -50%);
}

.lsx-ch__lab {
  position: absolute;
  left: 0;
  top: 0;
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  background: var(--ink);
  color: var(--on-ink);
  font-size: max(12px, calc(var(--u) * 13));
  white-space: nowrap;
  display: flex;
  align-items: center;
  transform: translate(-50%, calc(var(--u) * 24));
}

.lsx-months {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  color: var(--mute);
}

.lsx-dem {
  padding: calc(var(--u) * 44);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lsx-dem__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lsx-dem__head {
  margin-bottom: calc(var(--u) * 18);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.lsx-hot {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--acc-a12);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.lsx-hot__dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--acc);
}

.lsx-dem__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lsx-dem__r {
  padding: calc(var(--u) * 20) 0;
  border-bottom: .5px solid var(--sg-ln);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 300;
}

.lsx-dem__k {
  font-size: max(12px, calc(var(--u) * 17));
  color: var(--body);
}

.lsx-dem__v {
  font-size: max(12px, calc(var(--u) * 34));
  letter-spacing: -.02em;
  white-space: nowrap;
}

.lsx-alert {
  height: calc(var(--u) * 68);
  margin-top: auto;
  border-radius: calc(var(--u) * 34);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}

.lsx-alert[aria-pressed="true"] {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}

/* comps: a grid with the label column; "this car" is tinted through */
.lsx-cmpwrap {
  min-width: 0;
}

.lsx-cmp {
  padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 10);
  display: grid;
  grid-template-columns: calc(var(--u) * 300) repeat(4, minmax(0, 1fr));
  column-gap: calc(var(--u) * 12);
}

.lsx-cmp__col {
  padding: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 24) calc(var(--u) * 24) 0 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.lsx-cmp__col.is-me,
.lsx-cmp__c.is-me {
  background: var(--acc-a08);
}

.lsx-cmp__img,
.lsx-cmp__slot {
  width: 100%;
  height: calc(var(--u) * 170);
  border-radius: calc(var(--u) * 18);
  object-fit: cover;
}

.lsx-cmp__slot {
  background: repeating-linear-gradient(135deg, var(--sx-slot1) 0 calc(var(--u) * 14), var(--sx-slot2) calc(var(--u) * 14) calc(var(--u) * 28));
  color: var(--mute);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsx-cmp__who {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lsx-cmp__tag {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--mute);
}

.is-me .lsx-cmp__tag {
  color: var(--acc);
}

.lsx-cmp__n {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.lsx-cmp__l {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lsx-cmp__k,
.lsx-cmp__c {
  height: calc(var(--u) * 72);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
}

.lsx-cmp__k {
  padding: 0 calc(var(--u) * 24);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.lsx-cmp__c {
  padding: 0 calc(var(--u) * 22);
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 300;
  color: var(--body);
}

.lsx-cmp__dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ok);
}

.lsx-cmp__c .lsx-cmp__dot {
  display: none;
}

.lsx-cmp__c.is-best {
  color: var(--ink);
}

.lsx-cmp__c.is-best .lsx-cmp__dot {
  display: block;
}

.lsx-cmp__note {
  margin-top: calc(var(--u) * 22);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  color: var(--body);
}

/* cost to own */
.lsx-cost {
  display: grid;
  grid-template-columns: calc(var(--u) * 620) minmax(0, 1fr);
  gap: calc(var(--u) * 16);
}

.lsx-run {
  padding: calc(var(--u) * 44);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.lsx-mis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * 8);
}

.lsx-mi {
  height: calc(var(--u) * 64);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.lsx-mi.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.lsx-run__blk {
  margin-top: calc(var(--u) * 20);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lsx-run__row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
  white-space: nowrap;
}

.lsx-run__v {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 72));
  line-height: .9;
  color: var(--acc);
}

.lsx-run__per {
  font-size: max(12px, calc(var(--u) * 20));
  color: var(--body);
}

.lsx-run__yr {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lsx-allin {
  margin-top: auto;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 24);
  background: var(--sg-chip);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 20);
}

.lsx-allin__k {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.lsx-allin__v {
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
  white-space: nowrap;
}

.lsx-allin__per {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lsx-lines {
  padding: calc(var(--u) * 44) calc(var(--u) * 50);
}

.lsx-cost__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lsx-cost__r {
  padding: calc(var(--u) * 24) 0;
  border-bottom: .5px solid var(--sg-ln);
  display: grid;
  grid-template-columns: calc(var(--u) * 240) minmax(0, 1fr) calc(var(--u) * 160);
  gap: calc(var(--u) * 30);
  align-items: center;
}

.lsx-cost__name {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lsx-cost__k {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.lsx-cost__d {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.lsx-cost__bar {
  height: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 7);
  background: var(--sg-chip);
  overflow: hidden;
  display: block;
}

.lsx-cost__fill {
  width: 0;
  height: 100%;
  border-radius: calc(var(--u) * 7);
  background: var(--ink);
  display: block;
  transition: width .45s var(--lx-ease);
}

.lsx-cost__fill--acc {
  background: var(--acc);
}

.lsx-cost__v {
  text-align: right;
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  white-space: nowrap;
}

.lsx-cost__yr {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.lsx-cost__note {
  margin-top: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 127. Listing Single v4 — finance, equipment, history, next ======== */
.lsx-fin {
  padding: calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 50);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr) auto auto;
  gap: calc(var(--u) * 40);
  align-items: center;
}

.lsx-fin__dp {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.lsx-fin__k {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.lsx-fin__val {
  font-size: max(12px, calc(var(--u) * 16));
  letter-spacing: calc(var(--u) * 0.32);
  color: var(--ink);
  white-space: nowrap;
}

.lsx-fin .lsv-range {
  margin: 2px 0;
}

.lsx-seg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 30);
  background: var(--sg-chip);
  display: flex;
}

.lsx-seg__b {
  height: calc(var(--u) * 52);
  flex: 1;
  border: 0;
  border-radius: calc(var(--u) * 26);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  cursor: pointer;
  transition: background .25s, color .25s;
}

.lsx-seg__b--tier {
  font-size: max(12px, calc(var(--u) * 14));
}

.lsx-seg__b.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.lsx-fin__mo {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
  white-space: nowrap;
}

.lsx-fin__v {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 64));
  line-height: .9;
  color: var(--acc);
}

.lsx-fin__per {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.lsx-fin__go {
  height: calc(var(--u) * 76);
  padding: 0 calc(var(--u) * 36);
  border-radius: calc(var(--u) * 38);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: filter .25s;
}

.lsx-fin__go:hover {
  filter: brightness(1.08);
}

/* equipment: a tile opens to the full width */
.lsx-eqs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.lsx-eq {
  position: relative;
  padding: calc(var(--u) * 36) calc(var(--u) * 40);
  border: .5px solid transparent;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
  transition: border-color .25s;
}

.lsx-eq.is-open {
  grid-column: 1 / -1;
  border-color: var(--acc);
}

.lsx-eq__b {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  cursor: pointer;
}

/* the whole tile is the toggle */
.lsx-eq__b::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.lsx-eq__n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--acc);
}

.lsx-eq__t {
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
  letter-spacing: -.02em;
}

.lsx-eq__c {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lsx-eq__m {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sg-chip);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 20));
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsx-eq__minus,
.lsx-eq.is-open .lsx-eq__plus {
  display: none;
}

.lsx-eq.is-open .lsx-eq__minus {
  display: inline;
}

.lsx-eq.is-open .lsx-eq__m {
  background: var(--acc);
  color: #fff;
}

.lsx-eq__ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: calc(var(--u) * 30);
}

.lsx-eq.is-open .lsx-eq__ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lsx-eq__ul li {
  padding: calc(var(--u) * 14) 0;
  border-top: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.lsx-eq__ul .acc {
  display: flex;
}

.lsx-specwrap {
  grid-column: 1 / -1;
  padding: calc(var(--u) * 14) calc(var(--u) * 44);
}

.lsx-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: calc(var(--u) * 50);
}

.lsx-specs__r {
  padding: calc(var(--u) * 20) 0;
  border-bottom: .5px solid var(--sg-ln);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.lsx-specs__r dt {
  color: var(--mute);
}

.lsx-specs__r dd {
  text-align: right;
}

/* history */
.lsx-hist {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: calc(var(--u) * 16);
}

.lsx-tlwrap {
  padding: calc(var(--u) * 44) calc(var(--u) * 50);
}

.lsx-tl {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 24);
}

.lsx-tl::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 60);
  height: .5px;
  background: var(--line2);
}

.lsx-tl__i {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.lsx-tl__y {
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.lsx-tl__dot {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  margin: calc(var(--u) * 8) 0;
  border-radius: 50%;
  border: 1.5px solid var(--line2);
  background: var(--surf);
  box-shadow: 0 0 0 calc(var(--u) * 6) var(--surf);
}

.lsx-tl__t {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.lsx-tl__d {
  font-size: max(12px, calc(var(--u) * 14));
  line-height: 1.5;
  color: var(--body);
}

.lsx-tl__m {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  color: var(--mute);
}

.lsx-tl__i.is-now .lsx-tl__y {
  color: var(--acc);
}

.lsx-tl__i.is-now .lsx-tl__dot {
  border-color: var(--acc);
  background: var(--acc);
}

.lsx-ckwrap {
  padding: calc(var(--u) * 30) calc(var(--u) * 40);
  display: flex;
  flex-direction: column;
}

.lsx-ck {
  padding: calc(var(--u) * 14) 0;
  border-bottom: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.lsx-ck__k {
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.lsx-ck__v {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lsx-vin {
  padding-top: calc(var(--u) * 18);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.lsx-vin__v {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 17));
  letter-spacing: calc(var(--u) * 1.02);
  overflow-wrap: anywhere;
}

.lsx-vin__copy {
  height: calc(var(--u) * 44);
  margin-left: auto;
  padding: 0 calc(var(--u) * 18);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  cursor: pointer;
}

.lsx-vin__copy.is-done {
  color: var(--ok);
}

/* your next step */
.lsx-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.lsx-card {
  min-width: 0;
  padding: calc(var(--u) * 50);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.lsx-card--ink {
  border-radius: calc(var(--u) * 36);
  background: var(--sg-band);
  color: var(--sg-on-band);
}

.lsx-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lsx-card__eb {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lsx-card--ink .lsx-card__eb {
  color: var(--sg-band-mute);
}

.lsx-card__l {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 44));
  color: var(--acc);
}

.lsx-card__t {
  font-size: max(12px, calc(var(--u) * 48));
  letter-spacing: -.03em;
  line-height: 1.05;
}

.lsx-card__d {
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  line-height: 1.5;
  color: var(--body);
}

.lsx-card--ink .lsx-card__d {
  color: var(--sg-band-body);
}

.lsx-a {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lsx-a li {
  display: flex;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  color: #d9dce1;
}

.lsx-a__n {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--acc);
}

.lsx-card__cta {
  height: calc(var(--u) * 80);
  margin-top: auto;
  border: 0;
  border-radius: calc(var(--u) * 40);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s, filter .25s;
}

a.lsx-card__cta:hover {
  filter: brightness(1.08);
}

.lsx-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.lsx-slot {
  height: calc(var(--u) * 66);
  border-radius: calc(var(--u) * 20);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}

.lsx-slot.is-on {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.lsx-slot__d {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  opacity: .75;
}

.lsx-slot__h {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.lsx-qs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.lsx-q {
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 25);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}

.lsx-q.is-on {
  border-color: var(--acc);
  background: var(--acc-a10);
  color: var(--acc);
}

.lsx-ask {
  height: calc(var(--u) * 80);
  margin-top: auto;
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 28);
  border-radius: calc(var(--u) * 40);
  background: var(--sg-chip);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lsx-ask__in {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  outline: 0;
}

.lsx-ask__in::placeholder {
  color: var(--mute);
}

.lsx-ask:focus-within {
  box-shadow: 0 0 0 2px var(--acc);
}

.lsx-ask__go {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  padding: 0;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 20));
  cursor: pointer;
}

/* the bottom bar exists below 1200 px only */
.lsx-mbar {
  display: none;
}

/* == 128. Listing Single v4 — smaller screens ========================== */
@media (max-width: 1599px) and (min-width: 1200px) {
  /* the bento turns into 6 columns: photo, price + deal, inspection + advisor, stats 3 × 2 */
  .lsx-bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lsx-photo {
    grid-column: 1 / -1;
    grid-row: 1 / 6;
  }

  .lsx-price {
    grid-column: 1 / 4;
    grid-row: 6 / 9;
  }

  .lsx-deal {
    grid-column: 4 / 7;
    grid-row: 6 / 9;
  }

  .lsx-insp {
    grid-column: 1 / 3;
    grid-row: 9 / 11;
  }

  .lsx-adv {
    grid-column: 3 / 7;
    grid-row: 9 / 11;
  }

  .lsx-stat {
    grid-row: auto;
  }

  .lsx-ph,
  .lsx-cost {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsx-cmpwrap {
    overflow-x: auto;
  }

  .lsx-cmp {
    min-width: 1100px;
  }

  .lsx-cmp__k {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surf);
  }

  .lsx-fin {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lsx-eqs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lsx-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1199px) {
  .lsx-sec {
    padding-top: 64px;
  }

  .lsx-h .lsg-h__t {
    font-size: 40px;
  }

  .lsx-title {
    margin-top: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .lsx-title__meta {
    flex-wrap: wrap;
  }

  .lsx-h1 {
    font-size: 48px;
    white-space: normal;
  }

  .lsx-tile,
  .lsx-card {
    border-radius: 24px;
  }

  .lsx-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 12px;
  }

  .lsx-photo,
  .lsx-price,
  .lsx-adv {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .lsx-photo {
    aspect-ratio: 3 / 2;
    border-radius: 24px;
  }

  .lsx-price {
    padding: 28px;
  }

  .lsx-price__v {
    font-size: 72px;
  }

  .lsx-deal,
  .lsx-insp {
    grid-column: auto;
    grid-row: auto;
    padding: 24px;
  }

  .lsx-adv {
    padding: 18px 24px;
    flex-wrap: wrap;
  }

  .lsx-stat {
    grid-column: auto;
    grid-row: auto;
    padding: 18px 20px;
    gap: 10px;
  }

  .lsx-stat__v {
    font-size: 32px;
  }

  .lsx-ph,
  .lsx-cost,
  .lsx-hist,
  .lsx-next {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsx-chart,
  .lsx-dem,
  .lsx-run,
  .lsx-lines,
  .lsx-tlwrap,
  .lsx-card {
    padding: 28px;
  }

  .lsx-ch {
    height: 260px;
  }

  .lsx-cmpwrap {
    overflow-x: auto;
  }

  .lsx-cmp {
    min-width: 900px;
    grid-template-columns: 150px repeat(4, minmax(0, 1fr));
  }

  .lsx-cmp__k {
    position: sticky;
    left: 0;
    z-index: 1;
    padding: 0 12px;
    background: var(--surf);
  }

  .lsx-cmp__img,
  .lsx-cmp__slot {
    height: 110px;
  }

  .lsx-fin {
    padding: 24px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
  }

  .lsx-fin__dp {
    grid-column: 1 / -1;
  }

  .lsx-eqs {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .lsx-eq {
    padding: 22px 24px;
  }

  .lsx-eq.is-open .lsx-eq__ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lsx-specwrap {
    padding: 8px 24px;
  }

  .lsx-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
  }

  .lsx-tl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 28px;
  }

  .lsx-tl::before {
    display: none;
  }

  .lsx-card__t {
    font-size: 36px;
  }

  /* bottom bar: price + Reserve */
  .lsx-mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 12px var(--gut);
    border-top: .5px solid var(--sg-ln);
    background: var(--surf);
    box-shadow: var(--st-bar-shadow);
    display: flex;
    align-items: center;
    gap: 16px;
    transform: translateY(110%);
    transition: transform .35s var(--lx-ease);
  }

  .lsx-mbar.is-on {
    transform: translateY(0);
  }

  .lsx-mbar__p {
    margin-right: auto;
    white-space: nowrap;
  }

  .lsx-mbar__mo {
    font-size: 24px;
    font-weight: 300;
    color: var(--acc);
  }

  .lsx-mbar__per {
    font-size: 14px;
    color: var(--body);
  }

  .lsx-mbar__res {
    height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 24px;
    background: var(--acc);
    color: #fff;
    font: inherit;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    cursor: pointer;
  }

  .lsx ~ .ft {
    margin-bottom: 72px;
  }
}

@media (max-width: 767px) {
  .lsx-h1 {
    font-size: 36px;
  }

  .lsx-title__r {
    width: 100%;
  }

  .lsx-pill {
    height: 48px;
    padding: 0 16px;
    flex: 1;
  }

  .lsx-fav {
    width: 48px;
    height: 48px;
  }

  .lsx-photo__tr .js-s4-spin,
  .lsx-photo__sep,
  .lsx-photo__cnt .js-s4-lbl {
    display: none;
  }

  .lsx-photo__cnt,
  .lsx-photo__tr {
    top: 12px;
  }

  .lsx-photo__cnt {
    left: 12px;
  }

  .lsx-photo__tr {
    right: 12px;
  }

  .lsx-glass {
    height: 32px;
    padding: 0 12px;
  }

  .lsx-photo__foot {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .lsx-arw {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  /* BBH Bartle is wide: six glyphs take about 6.3em */
  .lsx-price__v {
    font-size: min(56px, 12vw);
  }

  .lsx-price__acts {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsx-res,
  .lsx-out {
    height: 56px;
  }

  .lsx-deal,
  .lsx-insp {
    grid-column: 1 / -1;
  }

  .lsx-deal__v {
    font-size: 26px;
  }

  .lsx-adv__ask {
    margin-left: 0;
  }

  .lsx-chart,
  .lsx-dem,
  .lsx-run,
  .lsx-lines,
  .lsx-tlwrap,
  .lsx-ckwrap,
  .lsx-card {
    padding: 22px 18px;
  }

  .lsx-leg {
    flex-direction: column;
    gap: 8px;
  }

  .lsx-ch {
    height: 200px;
  }

  .lsx-ch__lab {
    font-size: 12px;
    padding: 0 8px;
  }

  .lsx-dem__v {
    font-size: 24px;
  }

  .lsx-cost__r {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
  }

  .lsx-cost__bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .lsx-cost__v {
    font-size: 20px;
  }

  .lsx-run__v {
    font-size: min(56px, 12vw);
  }

  .lsx-fin {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsx-fin__v {
    font-size: min(48px, 11vw);
  }

  .lsx-fin__go {
    justify-content: center;
  }

  .lsx-eq__t {
    font-size: 24px;
  }

  .lsx-eq.is-open .lsx-eq__ul,
  .lsx-specs {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsx-tl {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 22px;
  }

  .lsx-vin {
    flex-wrap: wrap;
  }

  .lsx-card__t {
    font-size: 30px;
  }

  .lsx-card__cta {
    height: 60px;
  }

  .lsx-slot__h {
    font-size: 16px;
  }

  .lsx-ask {
    height: 60px;
    padding-left: 18px;
  }

  .lsx-ask__go {
    width: 44px;
    height: 44px;
  }
}

/* == 129. Listing Single v5 — bands and chapters ======================= */
/* Shared: tokens, .lsg-e / .lsg-s (30), lightbox (31). Photo bands stay dark in both themes. */
:root {
  --sw-band: #0b0c0e;
  --sw-glass: rgba(12, 13, 16, .6);
  --sw-w10: rgba(255, 255, 255, .1);
  --sw-w16: rgba(255, 255, 255, .16);
  --sw-w20: rgba(255, 255, 255, .2);
  --sw-w40: rgba(255, 255, 255, .4);
  --sw-w45: rgba(255, 255, 255, .45);
  --sw-w60: rgba(255, 255, 255, .6);
  --sw-w65: rgba(255, 255, 255, .65);
  --sw-w70: rgba(255, 255, 255, .7);
  --sw-w75: rgba(255, 255, 255, .75);
  --sw-w85: rgba(255, 255, 255, .85);
  --sw-w90: rgba(255, 255, 255, .9);
  --sw-mint: #5fd49a;
  --sw-l12: rgba(17, 20, 24, .12);
  --sw-l30: rgba(17, 20, 24, .3);
  --sw-hero: linear-gradient(180deg, rgba(8, 9, 11, .55) 0%, rgba(8, 9, 11, 0) 34%, rgba(8, 9, 11, 0) 62%, rgba(8, 9, 11, .75) 100%);
  --sw-inside: linear-gradient(90deg, rgba(8, 9, 11, .88) 0%, rgba(8, 9, 11, .55) 38%, rgba(8, 9, 11, 0) 70%);
  --sw-drive: radial-gradient(ellipse at center, rgba(8, 9, 11, .35) 0%, rgba(8, 9, 11, .85) 75%);
  /* the Serpent is shot on white: deeper shades keep the white type readable */
  --sw-hero-e: linear-gradient(180deg, rgba(8, 9, 11, .82) 0%, rgba(8, 9, 11, .3) 34%, rgba(8, 9, 11, .1) 58%, rgba(8, 9, 11, .85) 100%);
  --sw-inside-e: linear-gradient(90deg, rgba(8, 9, 11, .94) 0%, rgba(8, 9, 11, .72) 42%, rgba(8, 9, 11, .1) 75%);
  --sw-drive-e: radial-gradient(ellipse at center, rgba(8, 9, 11, .66) 0%, rgba(8, 9, 11, .9) 75%);
  --sw-acc70: rgba(216, 71, 14, .7);
}

[data-skin="green"] {
  --sw-acc70: rgba(18, 132, 79, .7);
}

[data-theme="dark"] {
  --sw-l12: rgba(242, 243, 245, .12);
  --sw-l30: rgba(242, 243, 245, .3);
}

.lsw-band,
.lsw-ch,
.lsw-filmsec,
.lsw-yours,
.lsw-mbar {
  font-weight: 400;
}

.lsw .acc {
  color: var(--acc);
}

.lsw-mute {
  color: var(--mute);
}

.lsw-eb {
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 4.5);
  color: var(--mute);
}

.lsw-eb--light {
  color: var(--sw-w60);
}

/* near full-bleed photo bands */
.lsw-band {
  position: relative;
  margin: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 44);
  overflow: hidden;
  background: var(--sw-band);
  color: #fff;
}

.lsw-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lsw-band__shade {
  position: absolute;
  inset: 0;
}

.lsw-ghost,
.lsw-acc {
  height: calc(var(--u) * 76);
  padding: 0 calc(var(--u) * 40);
  border-radius: calc(var(--u) * 38);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s, color .25s, filter .25s;
}

.lsw-ghost {
  border: .5px solid var(--sw-w40);
  color: #fff;
}

.lsw-ghost:hover {
  background: #fff;
  color: #111418;
}

.lsw-acc {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.lsw-acc[aria-pressed="true"],
.lsw-sum__res[aria-pressed="true"],
.lsw-mbar__res[aria-pressed="true"] {
  background: var(--ok);
}

.lsw-ghost--lg,
.lsw-acc--lg {
  height: calc(var(--u) * 84);
}

.lsw-acc--lg {
  padding: 0 calc(var(--u) * 50);
}

.lsw-ghost--lg {
  border-color: var(--sw-w45);
}

/* 1 · hero */
.lsw-hero {
  height: calc(var(--u) * 1320);
  margin-top: calc(var(--u) * 20);
}

.lsw-hero__shade {
  background: var(--sw-hero);
}

:root:not([data-skin]) .lsw-hero__shade {
  background: var(--sw-hero-e);
}

/* keep the sky of the white studio shot above the car, under the outline title */
.lsw-hero .lsg-e.lsw-band__img {
  object-position: center 0;
}

.lsw-hero__top {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 90);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.lsw-hero__top .lsw-eb {
  letter-spacing: .34em;
  color: var(--sw-w70);
}

.lsw-hero__make {
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--sw-w85);
}

.lsw-hero__h1 {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 300));
  font-weight: 400;
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--sw-w90);
  white-space: nowrap;
}

.lsw-pill {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 70);
  padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 44);
  border-radius: calc(var(--u) * 60);
  border: .5px solid var(--sw-w16);
  background: var(--sw-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 30);
  transform: translateX(-50%);
}

.lsw-pill__p {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
  white-space: nowrap;
}

.lsw-pill__c {
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.02em;
}

.lsw-pill__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--sw-w60);
}

.lsw-pill__ok {
  color: var(--sw-mint);
}

.lsw-pill__div {
  width: .5px;
  height: calc(var(--u) * 56);
  background: var(--sw-w20);
}

/* centred text chapters */
.lsw-ch {
  padding-left: var(--gut);
  padding-right: var(--gut);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 2 · the power statement */
.lsw-power {
  padding-top: calc(var(--u) * 220);
  padding-bottom: calc(var(--u) * 200);
}

.lsw-power__n {
  margin-top: calc(var(--u) * 40);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 480));
  line-height: .8;
  color: var(--acc);
}

.lsw-power__t {
  max-width: calc(var(--u) * 1500);
  margin-top: calc(var(--u) * 50);
  font-size: max(12px, calc(var(--u) * 56));
  letter-spacing: -.035em;
  line-height: 1.2;
  text-wrap: pretty;
}

.lsw-stats {
  width: 100%;
  max-width: calc(var(--u) * 2000);
  margin-top: calc(var(--u) * 120);
  border-top: .5px solid var(--line2);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lsw-stat {
  padding: calc(var(--u) * 44) calc(var(--u) * 20) 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.lsw-stat + .lsw-stat {
  border-left: .5px solid var(--line2);
}

.lsw-stat__v {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 96));
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
}

.lsw-stat__u {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 400;
  letter-spacing: 0;
  color: var(--body);
}

.lsw-stat__k {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.08);
  color: var(--mute);
}

/* 3 · film strip */
.lsw-filmhead {
  margin-bottom: calc(var(--u) * 50);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 30);
}

.lsw-filmhead__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.lsw-filmhead__t {
  font-size: max(12px, calc(var(--u) * 96));
  letter-spacing: -.05em;
  line-height: 1;
}

.lsw-filmhead__r {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.lsw-filmhead__n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lsw-arw {
  width: calc(var(--u) * 72);
  height: calc(var(--u) * 72);
  padding: 0;
  border-radius: 50%;
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 22));
  cursor: pointer;
}

.lsw-arw--acc {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.lsw-film {
  padding: 0 var(--gut);
  scroll-padding: 0 var(--gut);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  display: flex;
  gap: calc(var(--u) * 24);
}

.lsw-film::-webkit-scrollbar {
  display: none;
}

.lsw-frame {
  flex: 0 0 calc(var(--u) * 1640);
  scroll-snap-align: start;
}

.lsw-frame__fig {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.lsw-frame__b {
  height: calc(var(--u) * 1093);
  padding: 0;
  border: 0;
  border-radius: calc(var(--u) * 36);
  overflow: hidden;
  background: var(--sw-band);
  cursor: zoom-in;
  display: block;
}

.lsw-frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lsw-frame__cap {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  color: var(--body);
}

.lsw-frame__n {
  margin-right: calc(var(--u) * 16);
  font-family: ui-monospace, Menlo, monospace;
  color: var(--acc);
}

.lsw-frame__c {
  color: var(--mute);
}

/* 4 · three things */
.lsw-threesec {
  padding-top: calc(var(--u) * 240);
  padding-bottom: calc(var(--u) * 160);
}

.lsw-three {
  width: 100%;
  max-width: calc(var(--u) * 1800);
  margin-top: calc(var(--u) * 110);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 150);
}

.lsw-three__r {
  display: grid;
  grid-template-columns: calc(var(--u) * 340) minmax(0, 1fr);
  gap: calc(var(--u) * 60);
  align-items: start;
}

.lsw-three__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 120));
  line-height: .9;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--sw-acc70);
}

.lsw-three__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.lsw-three__t {
  font-size: max(12px, calc(var(--u) * 110));
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
}

.lsw-three__d {
  max-width: calc(var(--u) * 1200);
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  line-height: 1.5;
  color: var(--body);
  text-wrap: pretty;
}

.lsw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.lsw-tag {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
}

/* 5 · inside */
.lsw-inside {
  height: calc(var(--u) * 1240);
}

.lsw-inside__shade {
  background: var(--sw-inside);
}

:root:not([data-skin]) .lsw-inside__shade {
  background: var(--sw-inside-e);
}

.lsw-inside__txt {
  position: absolute;
  left: calc(var(--u) * 100);
  top: 50%;
  width: calc(var(--u) * 980);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 34);
  transform: translateY(-50%);
}

.lsw-inside__t {
  font-size: max(12px, calc(var(--u) * 120));
  letter-spacing: -.055em;
  line-height: .95;
}

.lsw-inside__d {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  line-height: 1.55;
  color: var(--sw-w75);
}

.lsw-gchips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.lsw-gchips li {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  border: .5px solid var(--sw-w20);
  background: var(--sw-w10);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

/* == 130. Listing Single v5 — add-ons, inspection, closing band ======== */
.lsw-yours {
  padding-top: calc(var(--u) * 240);
}

.lsw-yours__head {
  margin-bottom: calc(var(--u) * 90);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 22);
}

.lsw-yours__t {
  font-size: max(12px, calc(var(--u) * 120));
  letter-spacing: -.055em;
  line-height: 1;
}

.lsw-yours__s {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
  color: var(--body);
}

.lsw-yours__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 760);
  gap: calc(var(--u) * 40);
  align-items: stretch;
}

.lsw-adds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.lsw-adds li {
  position: relative;
  display: flex;
}

/* real checkboxes; the card is the label */
.lsw-add__in {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lsw-add {
  width: 100%;
  min-height: calc(var(--u) * 300);
  padding: calc(var(--u) * 40) calc(var(--u) * 44);
  border-radius: calc(var(--u) * 36);
  border: .5px solid var(--sw-l12);
  background: transparent;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
  cursor: pointer;
  transition: border-color .25s, background .25s;
}

.lsw-add__in:checked + .lsw-add {
  border: 1.5px solid var(--acc);
  background: var(--surf);
}

.lsw-add__in:focus-visible + .lsw-add {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

.lsw-add__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lsw-add__ic {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: 50%;
  background: var(--sg-chip);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, color .25s;
}

.lsw-add__in:checked + .lsw-add .lsw-add__ic {
  background: var(--acc);
  color: #fff;
}

.lsw-add__cb {
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: calc(var(--u) * 10);
  border: 1.5px solid var(--sw-l30);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsw-add__in:checked + .lsw-add .lsw-add__cb {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.lsw-add__t {
  margin-top: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
  letter-spacing: -.02em;
}

.lsw-add__d {
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  line-height: 1.5;
  color: var(--body);
}

.lsw-add__p {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.lsw-add__v {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
}

.lsw-add__pm {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

/* the ink summary: the total block sits at the bottom */
.lsw-sum {
  min-width: 0;
  padding: calc(var(--u) * 50);
  border-radius: calc(var(--u) * 36);
  background: var(--sg-band);
  color: var(--sg-on-band);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.lsw-sum__k {
  margin-bottom: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
  color: var(--sg-band-mute);
}

.lsw-sum__lines {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.lsw-sum__l {
  padding: calc(var(--u) * 16) 0;
  border-bottom: .5px solid var(--sv-c12);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.lsw-sum__lk {
  color: var(--sg-band-body);
}

.lsw-sum__tot {
  margin-top: auto;
  padding-top: calc(var(--u) * 26);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.lsw-sum__tk {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.52);
  color: var(--sg-band-mute);
}

.lsw-sum__tv {
  font-size: max(12px, calc(var(--u) * 52));
  font-weight: 300;
  letter-spacing: -.03em;
}

.lsw-sum__mo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 20);
}

.lsw-sum__note {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--sg-band-mute);
}

.lsw-sum__mv {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 56));
  color: var(--acc);
  white-space: nowrap;
}

.lsw-sum__res {
  height: calc(var(--u) * 84);
  margin-top: calc(var(--u) * 30);
  border: 0;
  border-radius: calc(var(--u) * 42);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  cursor: pointer;
  transition: background .25s;
}

.lsw-sum__small {
  margin-top: calc(var(--u) * 8);
  text-align: center;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--sg-band-mute);
}

/* 7 · inspection */
.lsw-insp {
  padding-top: calc(var(--u) * 260);
  padding-bottom: calc(var(--u) * 220);
}

.lsw-insp__score {
  margin-top: calc(var(--u) * 40);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 20);
}

.lsw-insp__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 340));
  font-weight: 400;
  line-height: .8;
  color: var(--acc);
}

.lsw-insp__of {
  font-size: max(12px, calc(var(--u) * 90));
  font-weight: 300;
  color: var(--mute);
}

.lsw-insp__s {
  max-width: calc(var(--u) * 1300);
  margin-top: calc(var(--u) * 50);
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 300;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.lsw-notes {
  width: 100%;
  max-width: calc(var(--u) * 2000);
  margin-top: calc(var(--u) * 90);
  text-align: left;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.lsw-note {
  padding: calc(var(--u) * 40) calc(var(--u) * 44);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.lsw-note__tag {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--acc);
}

.lsw-note__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  background: var(--acc);
}

.lsw-note--ok .lsw-note__tag {
  color: var(--ok);
}

.lsw-note--ok .lsw-note__dot {
  background: var(--ok);
}

.lsw-note__t {
  font-size: max(12px, calc(var(--u) * 30));
  letter-spacing: -.02em;
}

.lsw-note__d {
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  line-height: 1.5;
  color: var(--body);
}

.lsw-out {
  height: calc(var(--u) * 68);
  margin-top: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 34);
  border-radius: calc(var(--u) * 34);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.lsw-out:hover {
  border-color: var(--acc);
  color: var(--acc);
}

/* 8 · make it yours */
.lsw-drive {
  height: calc(var(--u) * 1180);
}

.lsw-drive__shade {
  background: var(--sw-drive);
}

:root:not([data-skin]) .lsw-drive__shade {
  background: var(--sw-drive-e);
}

.lsw-drive__in {
  position: absolute;
  inset: 0;
  padding: 0 var(--gut);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 36);
}

.lsw-drive__in .lsw-eb {
  letter-spacing: .34em;
  color: var(--sw-w70);
}

.lsw-drive__t {
  font-size: max(12px, calc(var(--u) * 180));
  letter-spacing: -.06em;
  line-height: .95;
}

.lsw-drive__s {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  color: var(--sw-w75);
}

.lsw-drive__acts {
  margin-top: calc(var(--u) * 20);
  display: flex;
  gap: calc(var(--u) * 12);
}

.lsw-drive__trust {
  margin-top: calc(var(--u) * 20);
  display: flex;
  gap: calc(var(--u) * 40);
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--sw-w65);
}

/* the bottom bar exists below 1200 px only */
.lsw-mbar {
  display: none;
}

/* == 131. Listing Single v5 — smaller screens ========================== */
@media (max-width: 1599px) and (min-width: 1200px) {
  .lsw-yours__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsw-frame {
    flex-basis: 80vw;
  }

  .lsw-frame__b {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 1199px) {
  .lsw-band {
    margin: 0 12px;
    border-radius: 24px;
  }

  .lsw-hero {
    height: min(100svh, 760px);
    margin-top: 12px;
  }

  .lsw-hero__top {
    top: 40px;
    padding: 0 20px;
  }

  .lsw-hero__make {
    font-size: 28px;
  }

  .lsw-hero__h1 {
    font-size: min(150px, 22vw);
  }

  /* the price pill becomes the bottom bar */
  .lsw-pill {
    display: none;
  }

  .lsw-power {
    padding-top: 96px;
    padding-bottom: 80px;
  }

  /* BBH Bartle digits are ~1.2em wide */
  .lsw-power__n {
    font-size: min(220px, 22vw);
  }

  .lsw-power__t {
    font-size: 30px;
  }

  .lsw-stats {
    margin-top: 56px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lsw-stat {
    padding: 24px 12px;
  }

  .lsw-stat + .lsw-stat {
    border-left: 0;
  }

  .lsw-stat:nth-child(2n) {
    border-left: .5px solid var(--line2);
  }

  .lsw-stat:nth-child(n + 3) {
    border-top: .5px solid var(--line2);
  }

  .lsw-stat__v {
    font-size: 48px;
  }

  .lsw-filmhead {
    flex-wrap: wrap;
  }

  .lsw-filmhead__t {
    font-size: 52px;
  }

  .lsw-arw {
    width: 52px;
    height: 52px;
  }

  .lsw-frame {
    flex-basis: 84vw;
  }

  .lsw-frame__b {
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 20px;
  }

  .lsw-threesec {
    padding-top: 96px;
    padding-bottom: 64px;
  }

  .lsw-three {
    margin-top: 48px;
    gap: 56px;
  }

  .lsw-three__r {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .lsw-three__n {
    font-size: 64px;
  }

  .lsw-three__t {
    font-size: 48px;
  }

  .lsw-three__d {
    font-size: 19px;
  }

  .lsw-inside {
    height: auto;
    min-height: min(100svh, 760px);
  }

  .lsw-inside__shade {
    background: rgba(8, 9, 11, .7);
  }

  :root:not([data-skin]) .lsw-inside__shade {
    background: rgba(8, 9, 11, .8);
  }

  .lsw-inside__txt {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 72px 28px;
    transform: none;
    gap: 22px;
  }

  .lsw-inside__t {
    font-size: 52px;
  }

  .lsw-inside__d {
    font-size: 18px;
  }

  .lsw-yours {
    padding-top: 96px;
  }

  .lsw-yours__head {
    margin-bottom: 40px;
  }

  .lsw-yours__t {
    font-size: 52px;
  }

  .lsw-yours__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .lsw-add {
    min-height: 0;
    padding: 24px;
    border-radius: 24px;
  }

  .lsw-add__ic {
    width: 44px;
    height: 44px;
  }

  .lsw-add__ic .ico {
    width: 20px;
    height: 20px;
  }

  .lsw-add__cb {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .lsw-add__cb .ico {
    width: 16px;
    height: 16px;
  }

  .lsw-sum {
    padding: 28px;
    border-radius: 24px;
  }

  .lsw-insp {
    padding-top: 96px;
    padding-bottom: 80px;
  }

  .lsw-insp__score {
    gap: 10px;
  }

  .lsw-insp__n {
    font-size: min(180px, 17vw);
  }

  .lsw-insp__of {
    font-size: min(44px, 8vw);
  }

  .lsw-insp__s {
    font-size: 26px;
  }

  .lsw-notes {
    margin-top: 40px;
    grid-template-columns: minmax(0, 1fr);
  }

  .lsw-note {
    padding: 24px;
    border-radius: 24px;
  }

  .lsw-drive {
    height: auto;
    min-height: min(100svh, 760px);
  }

  .lsw-drive__in {
    position: relative;
    inset: auto;
    min-height: min(100svh, 760px);
    padding: 72px 24px;
    gap: 22px;
  }

  .lsw-drive__t {
    font-size: 64px;
  }

  .lsw-drive__s {
    font-size: 18px;
  }

  .lsw-drive__acts {
    flex-wrap: wrap;
    justify-content: center;
  }

  .lsw-drive__trust {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
  }

  .lsw-mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 12px var(--gut);
    border-top: .5px solid var(--sg-ln);
    background: var(--surf);
    box-shadow: var(--st-bar-shadow);
    display: flex;
    align-items: center;
    gap: 16px;
    transform: translateY(110%);
    transition: transform .35s var(--lx-ease);
  }

  .lsw-mbar.is-on {
    transform: translateY(0);
  }

  .lsw-mbar__p {
    margin-right: auto;
    white-space: nowrap;
  }

  .lsw-mbar__mo {
    font-size: 24px;
    font-weight: 300;
    color: var(--acc);
  }

  .lsw-mbar__per {
    font-size: 14px;
    color: var(--body);
  }

  .lsw-mbar__res {
    height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 24px;
    background: var(--acc);
    color: #fff;
    font: inherit;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    cursor: pointer;
  }

  .lsw ~ .ft {
    margin-bottom: 72px;
  }
}

@media (max-width: 767px) {
  .lsw-hero {
    height: min(80svh, 620px);
  }

  .lsw-power__t {
    font-size: 24px;
  }

  .lsw-stat__v {
    font-size: 36px;
  }

  .lsw-filmhead__t,
  .lsw-inside__t,
  .lsw-yours__t {
    font-size: 40px;
  }

  .lsw-three__t {
    font-size: 36px;
  }

  .lsw-three__d {
    font-size: 17px;
  }

  .lsw-adds {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsw-add__t {
    font-size: 24px;
  }

  .lsw-sum {
    padding: 22px 18px;
  }

  .lsw-sum__tv {
    font-size: 36px;
  }

  /* BBH Bartle is wide: six glyphs take about 6.3em */
  .lsw-sum__mv {
    font-size: min(40px, 9vw);
  }

  .lsw-insp__s {
    font-size: 21px;
  }

  .lsw-drive__t {
    font-size: 44px;
  }

  .lsw-ghost--lg,
  .lsw-acc--lg {
    width: 100%;
    height: 56px;
  }
}

/* == 132. Listing Single v6 — hero and ask bar ========================= */
/* Shared: tokens, .lsg-e / .lsg-s (30), range / lightbox / ribbon arrows (31), chart and deal bar (33). */
:root {
  --sy-hero: linear-gradient(90deg, rgba(8, 9, 11, .8) 0%, rgba(8, 9, 11, .35) 45%, rgba(8, 9, 11, .1) 100%);
  /* the Serpent is shot on white: dark on both sides so the price at the right reads too */
  --sy-hero-e: linear-gradient(180deg, rgba(8, 9, 11, .45) 0%, rgba(8, 9, 11, 0) 45%), linear-gradient(90deg, rgba(8, 9, 11, .88) 0%, rgba(8, 9, 11, .45) 45%, rgba(8, 9, 11, .8) 100%);
  --sy-ask-shadow: 0 24px 60px rgba(17, 20, 24, .14);
  --sy-ok10: rgba(47, 163, 107, .1);
  --sy-video: rgba(8, 9, 11, .35);
  --sy-busy: #c4c8ce;
}

[data-theme="dark"] {
  --sy-ask-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  --sy-busy: #3a3e45;
}

.lsy-hero,
.lsy-askwrap,
.lsy-cols,
.lsy-more,
.lsy-fab {
  font-weight: 400;
}

.lsy .acc {
  color: var(--acc);
}

.lsy-mute {
  color: var(--mute);
}

.lsy-k {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lsy-tile {
  min-width: 0;
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
}

.lsy-hero {
  position: relative;
  height: calc(var(--u) * 1100);
  margin: calc(var(--u) * 20) calc(var(--u) * 20) 0;
  border-radius: calc(var(--u) * 44);
  overflow: hidden;
  background: #0b0c0e;
  color: #fff;
}

.lsy-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

.lsy-hero__shade {
  position: absolute;
  inset: 0;
  background: var(--sy-hero);
}

:root:not([data-skin]) .lsy-hero__shade {
  background: var(--sy-hero-e);
}

.lsy-hero__l {
  position: absolute;
  left: calc(var(--u) * 80);
  top: calc(var(--u) * 90);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.lsy-hero__eb {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.36);
  color: var(--sw-w70);
}

.lsy-hero__dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--ok);
}

.lsy-hero__h1 {
  font-size: max(12px, calc(var(--u) * 150));
  letter-spacing: -.06em;
  line-height: .92;
}

.lsy-hero__stats {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  color: var(--sw-w75);
}

.lsy-hero__r {
  position: absolute;
  right: calc(var(--u) * 80);
  top: calc(var(--u) * 90);
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 12);
}

.lsy-hero__price {
  font-size: max(12px, calc(var(--u) * 72));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}

.lsy-hero__sub {
  font-size: max(12px, calc(var(--u) * 20));
  color: var(--sw-w75);
}

.lsy-hero__mo {
  color: #fff;
}

.lsy-hero__ok {
  color: var(--sw-mint);
}

.lsy-hero__acts {
  margin-top: calc(var(--u) * 14);
  display: flex;
  gap: calc(var(--u) * 10);
}

.lsy-hero__fav,
.lsy-hero__res {
  height: calc(var(--u) * 72);
  border-radius: calc(var(--u) * 36);
  font: inherit;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}

.lsy-hero__fav {
  width: calc(var(--u) * 72);
  padding: 0;
  border: .5px solid var(--sw-w40);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: max(12px, calc(var(--u) * 22));
}

.lsy-hero__fav[aria-pressed="true"] {
  border-color: var(--acc);
  color: var(--acc);
}

.lsy-hero__res {
  padding: 0 calc(var(--u) * 38);
  border: 0;
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
}

.lsy-hero__res[aria-pressed="true"],
.lsy-chat__res[aria-pressed="true"] {
  background: var(--ok);
}

/* the ask bar overlaps the hero */
.lsy-askwrap {
  position: relative;
  z-index: 2;
  width: calc(var(--u) * 1600);
  max-width: calc(100% - 2 * var(--gut));
  margin: calc(var(--u) * -62) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 22);
}

.lsy-ask {
  width: 100%;
  height: calc(var(--u) * 124);
  padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 44);
  border-radius: calc(var(--u) * 62);
  background: var(--surf);
  box-shadow: var(--sy-ask-shadow);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.lsy-ask__ic {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  flex-shrink: 0;
  color: var(--acc);
}

.lsy-ask__in {
  min-width: 0;
  height: calc(var(--u) * 96);
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  outline: 0;
}

.lsy-ask__in::placeholder,
.lsy-send__in::placeholder {
  color: var(--mute);
}

.lsy-ask:focus-within {
  box-shadow: var(--sy-ask-shadow), 0 0 0 2px var(--acc);
}

.lsy-ask__go {
  height: calc(var(--u) * 96);
  padding: 0 calc(var(--u) * 40);
  border: 0;
  border-radius: calc(var(--u) * 48);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  white-space: nowrap;
  cursor: pointer;
}

.lsy-askwrap nav {
  width: 100%;
  min-width: 0;
}

.lsy-jumps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 10);
}

.lsy-jump {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  border: .5px solid var(--line2);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: border-color .25s, color .25s;
}

.lsy-jump:hover {
  border-color: var(--acc);
  color: var(--acc);
}

/* == 133. Listing Single v6 — the questions ============================ */
.lsy-cols {
  margin-top: calc(var(--u) * 60);
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 820);
  gap: calc(var(--u) * 70);
  align-items: start;
}

.lsy-qs {
  min-width: 0;
}

.lsy-q {
  padding: calc(var(--u) * 80) 0;
  border-top: .5px solid var(--line2);
  scroll-margin-top: calc(var(--u) * 30);
}

.lsy-q__n {
  height: calc(var(--u) * 20.5);
  padding-top: calc(var(--u) * 3);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--acc);
}

.lsy-q__t {
  margin-top: calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 76));
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.lsy-q__short {
  margin: calc(var(--u) * 26) 0 calc(var(--u) * 44);
  display: flex;
  gap: calc(var(--u) * 16);
  align-items: baseline;
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  line-height: 1.4;
  text-wrap: pretty;
}

.lsy-q__k {
  flex-shrink: 0;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

/* Q1 finance */
.lsy-fin {
  padding: calc(var(--u) * 44) calc(var(--u) * 50);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 50);
  align-items: center;
}

.lsy-fin__l {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 28);
}

.lsy-fin__dp {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lsy-fin__k {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lsy-fin__val {
  font-size: max(12px, calc(var(--u) * 17));
  letter-spacing: calc(var(--u) * 0.34);
  color: var(--ink);
  white-space: nowrap;
}

.lsy-fin .lsv-range {
  margin: 2px 0;
}

.lsy-fin__segs {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: calc(var(--u) * 14);
}

.lsy-seg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 30);
  background: var(--sg-chip);
  display: flex;
}

.lsy-seg__b {
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 18);
  flex: 1;
  border: 0;
  border-radius: calc(var(--u) * 27);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s, color .25s;
}

.lsy-seg__b.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.lsy-fin__r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 6);
  white-space: nowrap;
}

.lsy-fin__v {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 96));
  line-height: .9;
  color: var(--acc);
}

.lsy-fin__off {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--mute);
}

/* Q2 accidents */
.lsy-q2 {
  display: grid;
  grid-template-columns: calc(var(--u) * 420) minmax(0, 1fr);
  gap: calc(var(--u) * 16);
}

.lsy-zero {
  padding: calc(var(--u) * 44);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
}

.lsy-zero__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 160));
  line-height: .85;
  color: var(--ok);
}

.lsy-zero__t {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
}

.lsy-zero__s {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.lsy-q2__r {
  padding: calc(var(--u) * 36) calc(var(--u) * 44);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.lsy-cks {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.lsy-ck {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 6);
  border-radius: calc(var(--u) * 23);
  background: var(--sg-chip);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  white-space: nowrap;
}

.lsy-ck__ic {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: 50%;
  background: var(--sg-ok16);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsy-hist {
  display: flex;
  flex-direction: column;
}

.lsy-hist__r {
  padding: calc(var(--u) * 14) 0;
  border-top: .5px solid var(--sg-ln);
  display: grid;
  grid-template-columns: calc(var(--u) * 90) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.lsy-hist__r.is-now .lsy-hist__y {
  color: var(--acc);
}

.lsy-hist__m {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lsy-vin {
  padding-top: calc(var(--u) * 6);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.lsy-vin__v {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 17));
  letter-spacing: calc(var(--u) * 1.02);
  overflow-wrap: anywhere;
}

.lsy-vin__copy {
  height: calc(var(--u) * 44);
  margin-left: auto;
  padding: 0 calc(var(--u) * 18);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  cursor: pointer;
}

.lsy-vin__copy.is-done {
  color: var(--ok);
}

/* Q3 notes */
.lsy-q3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.lsy-note {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lsy-note__img {
  width: 100%;
  height: calc(var(--u) * 300);
  object-fit: cover;
  background: var(--stripes);
}

.lsy-note__b {
  padding: calc(var(--u) * 30) calc(var(--u) * 36) calc(var(--u) * 34);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.lsy-note__loc {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--acc);
}

.lsy-note__dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--acc);
}

.lsy-note__t {
  font-size: max(12px, calc(var(--u) * 30));
  letter-spacing: -.02em;
}

.lsy-note__d {
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  line-height: 1.5;
  color: var(--body);
}

.lsy-note__fix {
  font-size: max(12px, calc(var(--u) * 15));
}

.lsy-fine {
  margin-top: calc(var(--u) * 16);
  padding: calc(var(--u) * 30) calc(var(--u) * 36);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  flex-wrap: wrap;
}

.lsy-fine__k {
  margin-right: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lsy-fine__ul {
  display: contents;
}

.lsy-fine__c {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  background: var(--sy-ok10);
  color: var(--ok);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

/* Q4 drive */
.lsy-q4 {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(var(--u) * 16);
}

.lsy-video {
  position: relative;
  height: calc(var(--u) * 620);
  border-radius: calc(var(--u) * 32);
  overflow: hidden;
  background: #0b0c0e;
}

.lsy-video__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lsy-video__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0b0c0e;
}

.lsy-video__v[hidden] {
  display: none;
}

/* once a clip plays, the poster layers step aside */
.lsy-video.is-playing .lsy-video__shade,
.lsy-video.is-playing .lsy-video__play,
.lsy-video.is-playing .lsy-video__cap {
  display: none;
}

.lsy-video__shade {
  position: absolute;
  inset: 0;
  background: var(--sy-video);
}

.lsy-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 120);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 36));
  box-shadow: 0 0 0 calc(var(--u) * 18) var(--acc-a25);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.lsy-video__cap {
  position: absolute;
  left: calc(var(--u) * 30);
  bottom: calc(var(--u) * 30);
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--sx-glass);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  display: flex;
  align-items: center;
}

.lsy-quotes {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.lsy-quote {
  flex: 1;
  padding: calc(var(--u) * 30) calc(var(--u) * 34);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lsy-quote__q {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  line-height: 1.45;
}

.lsy-quote__w {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

/* Q5 price */
.lsy-q5 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: calc(var(--u) * 16);
}

.lsy-deal {
  padding: calc(var(--u) * 40) calc(var(--u) * 44);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.lsy-deal .lsx-deal__v {
  letter-spacing: 0;
}

.lsy-deal__bar {
  margin-top: calc(var(--u) * 30);
}

.lsy-deal__scale {
  font-size: max(12px, calc(var(--u) * 14));
}

.lsy-deal__note {
  margin-top: auto;
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.lsy-chart {
  padding: calc(var(--u) * 36) calc(var(--u) * 44) calc(var(--u) * 30);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.lsy-leg {
  gap: calc(var(--u) * 28);
}

.lsy-chart .lsx-ch {
  height: calc(var(--u) * 260);
}

.lsy-chart .lsx-ch__g {
  display: none;
}

.lsy-chart .lsx-ch__dot {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
}

.lsy-chart .lsx-ch__lab {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  font-size: max(12px, calc(var(--u) * 12));
  transform: translate(-50%, calc(var(--u) * 20));
}

.lsy-months {
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 1.68);
}

/* Q6 options */
.lsy-tops {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.lsy-top {
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.lsy-top .acc {
  display: flex;
}

.lsy-top__t {
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 300;
}

.lsy-top__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lsy-opts {
  width: 100%;
  height: calc(var(--u) * 68);
  margin-top: calc(var(--u) * 20);
  border-radius: calc(var(--u) * 34);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.lsy-opts:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.lsy-ogs {
  margin-top: calc(var(--u) * 20);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 30);
}

.lsy-og__h {
  padding-bottom: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 13));
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.lsy-og__ul li {
  padding: calc(var(--u) * 12) 0;
  border-top: .5px solid var(--sg-ln);
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
}

/* Q7 see it */
.lsy-q7 {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: calc(var(--u) * 16);
}

.lsy-slots,
.lsy-shop {
  padding: calc(var(--u) * 40) calc(var(--u) * 44);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.lsy-slots__g {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.lsy-slot {
  height: calc(var(--u) * 80);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}

.lsy-slot.is-on {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.lsy-slot__d {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  opacity: .75;
}

.lsy-slot__h {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.lsy-cta {
  height: calc(var(--u) * 80);
  border-radius: calc(var(--u) * 40);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter .25s;
}

.lsy-cta:hover {
  filter: brightness(1.08);
}

.lsy-shop {
  gap: calc(var(--u) * 14);
}

.lsy-shop__n {
  font-size: max(12px, calc(var(--u) * 40));
  font-weight: 300;
  letter-spacing: -.03em;
}

.lsy-shop__a {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  color: var(--body);
}

.lsy-hrs {
  margin-top: calc(var(--u) * 10);
  display: flex;
  flex-direction: column;
}

.lsy-hr {
  padding: calc(var(--u) * 14) 0;
  border-top: .5px solid var(--sg-ln);
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  color: var(--body);
}

.lsy-hr__today {
  display: none;
  margin-left: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  color: var(--acc);
}

.lsy-hr.is-today {
  color: var(--ink);
}

.lsy-hr.is-today .lsy-hr__today {
  display: inline;
}

.lsy-shop__d {
  margin-top: auto;
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

/* Q8 */
.lsy-back {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.lsy-back__c {
  padding: calc(var(--u) * 40) calc(var(--u) * 44);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.lsy-back__n {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 72));
  line-height: .9;
  color: var(--acc);
}

.lsy-back__t {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  letter-spacing: -.02em;
}

.lsy-back__d {
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  line-height: 1.5;
  color: var(--body);
}

/* == 134. Listing Single v6 — the advisor chat ========================= */
.lsy-chat {
  position: sticky;
  top: calc(var(--u) * 20);
  height: calc(100vh - calc(var(--u) * 40));
  min-width: 0;
  border-radius: calc(var(--u) * 36);
  border: .5px solid var(--sg-ln);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lsy-chat__head {
  padding: calc(var(--u) * 26) calc(var(--u) * 30);
  border-bottom: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.lsy-chat__ph {
  position: relative;
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  flex-shrink: 0;
  display: block;
}

.lsy-chat__ph img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.lsy-chat__on {
  position: absolute;
  right: 0;
  bottom: calc(var(--u) * 2);
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border-radius: 50%;
  border: 2px solid var(--surf);
  background: var(--ok);
}

.lsy-chat__who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
  white-space: nowrap;
}

.lsy-chat__n {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.lsy-chat__r {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lsy-chat__new {
  height: calc(var(--u) * 40);
  margin-left: auto;
  padding: 0 calc(var(--u) * 16);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 20);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.54);
  white-space: nowrap;
  cursor: pointer;
}

.lsy-chat__new:hover {
  border-color: var(--acc);
  color: var(--acc);
}

/* the close button belongs to the phone bottom sheet */
.lsy-chat__x {
  display: none;
}

.lsy-msgs {
  min-height: 0;
  flex: 1;
  padding: calc(var(--u) * 26) calc(var(--u) * 30);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.lsy-msg {
  display: flex;
}

.lsy-msg--me {
  justify-content: flex-end;
}

.lsy-msg__b {
  max-width: 86%;
  padding: calc(var(--u) * 18) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 6);
  background: var(--sg-chip);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  line-height: 1.5;
  white-space: pre-wrap;
  text-wrap: pretty;
}

.lsy-msg--me .lsy-msg__b {
  border-radius: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 6) calc(var(--u) * 22);
  background: var(--acc);
  color: #fff;
}

.lsy-typing {
  display: flex;
  gap: calc(var(--u) * 6);
  align-items: center;
}

.lsy-typing span {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--mute);
  animation: lsy-dot 1s infinite ease-in-out;
}

.lsy-typing span:nth-child(2) {
  animation-delay: .15s;
}

.lsy-typing span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes lsy-dot {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}

.lsy-chips {
  padding: calc(var(--u) * 16) calc(var(--u) * 30) 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.lsy-chip {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 21);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  font-weight: 300;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.lsy-chip:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.lsy-send {
  padding: calc(var(--u) * 16) calc(var(--u) * 30) calc(var(--u) * 20);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lsy-send__in {
  min-width: 0;
  height: calc(var(--u) * 64);
  flex: 1;
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--line2);
  background: var(--sg-chip);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  outline: 0;
}

.lsy-send__in:focus {
  border-color: var(--acc);
}

.lsy-send__go {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  padding: 0;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 22));
  cursor: pointer;
}

.lsy-send__go:disabled {
  background: var(--sy-busy);
  cursor: default;
}

.lsy-chat__foot {
  padding: calc(var(--u) * 20) calc(var(--u) * 30);
  border-top: .5px solid var(--sg-ln);
  background: var(--sg-chip);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.lsy-chat__price {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  white-space: nowrap;
}

.lsy-chat__mo {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  color: var(--acc);
}

.lsy-chat__per {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lsy-chat__cash {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.lsy-chat__res {
  height: calc(var(--u) * 64);
  margin-left: auto;
  padding: 0 calc(var(--u) * 30);
  border: 0;
  border-radius: calc(var(--u) * 32);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s;
}

/* not quite it? */
.lsy-more {
  padding-top: calc(var(--u) * 80);
}

.lsy-more__head {
  margin-bottom: calc(var(--u) * 40);
  padding-top: calc(var(--u) * 80);
  border-top: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--u) * 24);
}

.lsy-more__t {
  font-size: max(12px, calc(var(--u) * 64));
  letter-spacing: -.045em;
}

.lsy-more__r {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
}

.lsy-more__cmp {
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  text-decoration: none;
  transition: color .25s;
}

.lsy-more__cmp:hover {
  color: var(--acc);
}

.lsy-rib {
  padding: 0 var(--gut) calc(var(--u) * 10);
  scroll-padding: 0 var(--gut);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  display: flex;
  gap: calc(var(--u) * 20);
}

.lsy-rib::-webkit-scrollbar {
  display: none;
}

.lsy-rc {
  flex: 0 0 calc(var(--u) * 600);
  scroll-snap-align: start;
}

.lsy-rc__a {
  height: 100%;
  border-radius: calc(var(--u) * 32);
  border: .5px solid var(--sg-ln);
  background: var(--surf);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s;
}

.lsy-rc__a:hover {
  border-color: var(--acc);
}

.lsy-rc__ph {
  height: calc(var(--u) * 300);
  display: block;
}

.lsy-rc__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lsy-rc__b {
  padding: calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 30);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.lsy-rc__meta {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

.lsy-rc__n {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
}

.lsy-rc__p {
  padding-top: calc(var(--u) * 14);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.lsy-rc__mo {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  color: var(--acc);
}

.lsy-rc__per {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--body);
}

.lsy-rc__c {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* the floating "Ask Jordan" button exists below 1200 px only */
.lsy-fab {
  display: none;
}

/* == 135. Listing Single v6 — smaller screens ========================== */
@media (max-width: 1599px) and (min-width: 1200px) {
  /* the chat never gets narrower than 400 px */
  .lsy-cols {
    grid-template-columns: minmax(0, 1fr) minmax(400px, calc(var(--u) * 560));
    gap: calc(var(--u) * 50);
  }

  .lsy-q2,
  .lsy-q4,
  .lsy-q5,
  .lsy-q7 {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsy-fin {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsy-fin__r {
    align-items: flex-start;
  }

  .lsy-tops,
  .lsy-ogs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lsy-chat__r {
    white-space: normal;
  }
}

@media (max-width: 1199px) {
  .lsy-hero {
    height: auto;
    min-height: 560px;
    margin: 12px 12px 0;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .lsy-hero__shade {
    background: rgba(8, 9, 11, .55);
  }

  :root:not([data-skin]) .lsy-hero__shade {
    background: rgba(8, 9, 11, .68);
  }

  .lsy-hero__l,
  .lsy-hero__r {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    padding: 36px 28px 0;
  }

  .lsy-hero__r {
    padding: 28px 28px 96px;
    align-items: flex-start;
    text-align: left;
  }

  .lsy-hero__h1 {
    font-size: 64px;
  }

  .lsy-hero__price {
    font-size: 44px;
  }

  .lsy-askwrap {
    margin-top: -40px;
  }

  .lsy-ask {
    height: 72px;
    padding: 0 8px 0 20px;
    gap: 12px;
  }

  .lsy-ask__in {
    height: 56px;
    font-size: 17px;
  }

  .lsy-ask__go {
    height: 56px;
    padding: 0 20px;
  }

  .lsy-jumps {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lsy-jumps::-webkit-scrollbar {
    display: none;
  }

  .lsy-cols {
    margin-top: 32px;
    grid-template-columns: minmax(0, 1fr);
  }

  .lsy-q {
    padding: 56px 0;
  }

  .lsy-q__t {
    font-size: 40px;
  }

  .lsy-q__short {
    flex-direction: column;
    gap: 8px;
    font-size: 20px;
  }

  .lsy-tile {
    border-radius: 24px;
  }

  .lsy-fin,
  .lsy-q2,
  .lsy-q3,
  .lsy-q4,
  .lsy-q5,
  .lsy-q7,
  .lsy-back {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsy-fin {
    padding: 28px;
    gap: 24px;
  }

  .lsy-fin__r {
    align-items: flex-start;
  }

  .lsy-fin__v {
    font-size: 64px;
  }

  .lsy-zero,
  .lsy-q2__r,
  .lsy-slots,
  .lsy-shop,
  .lsy-deal,
  .lsy-chart,
  .lsy-back__c {
    padding: 28px;
  }

  .lsy-zero__n {
    font-size: 96px;
  }

  .lsy-video {
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 24px;
  }

  .lsy-video__play {
    width: 80px;
    height: 80px;
    font-size: 26px;
  }

  .lsy-tops,
  .lsy-ogs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* the chat becomes a bottom sheet behind the "Ask Jordan" button */
  .lsy-chat {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    z-index: 70;
    height: min(86svh, 720px);
    border-radius: 24px 24px 0 0;
    box-shadow: var(--st-bar-shadow);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .35s var(--lx-ease), visibility 0s .35s;
  }

  .lsy-chat.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .35s var(--lx-ease);
  }

  .lsy-chat__x {
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    border: .5px solid var(--line2);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .lsy-chat__x .ico {
    width: 18px;
    height: 18px;
  }

  .lsy-chat__r {
    white-space: normal;
  }

  .lsy-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lsy-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 65;
    height: 56px;
    padding: 0 20px 0 8px;
    border: 0;
    border-radius: 28px;
    background: var(--acc);
    color: #fff;
    font: inherit;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em;
    box-shadow: var(--st-bar-shadow);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }

  .lsy-fab__ph img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .lsy-more__head {
    flex-wrap: wrap;
  }

  .lsy-more__t {
    font-size: 40px;
  }

  .lsy-rc {
    flex-basis: 420px;
  }

  .lsy-rc__ph {
    height: auto;
    aspect-ratio: 1376 / 864;
  }
}

@media (max-width: 767px) {
  .lsy-hero__h1 {
    font-size: 44px;
  }

  .lsy-hero__l,
  .lsy-hero__r {
    padding-left: 18px;
    padding-right: 18px;
  }

  .lsy-ask__go {
    padding: 0 14px;
    font-size: 12px;
  }

  .lsy-q__t {
    font-size: 32px;
  }

  .lsy-fin__segs {
    grid-template-columns: minmax(0, 1fr);
  }

  /* BBH Bartle is wide: six glyphs take about 6.3em */
  .lsy-fin__v {
    font-size: min(56px, 12vw);
  }

  .lsy-ck,
  .lsy-fine__c {
    white-space: normal;
    height: auto;
    min-height: 40px;
  }

  .lsy-hist__r {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .lsy-hist__m {
    grid-column: 2;
  }

  .lsy-vin {
    flex-wrap: wrap;
  }

  .lsy-tops,
  .lsy-ogs {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsy-chart .lsx-ch__lab {
    font-size: 12px;
    padding: 0 8px;
  }

  .lsy-rc {
    flex-basis: 82%;
  }

  .lsy-more__r {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* == 136. Shop v1 — search, car, categories ============================ */
:root {
  --shp-ok12: rgba(47, 163, 107, .12);
  --shp-grey: #5f6671;
  --shp-fab: #111418;
  --shp-scrim: rgba(8, 9, 11, .5);
  --shp-drawer-shadow: -30px 0 80px rgba(8, 9, 11, .3);
}

.shp-page .acc {
  color: var(--acc);
}

.shp-top,
.shp-cats,
.shp-cat-sec,
.shp-kits-sec,
.shp-why,
.shp-fab,
.shp-drawer {
  font-weight: 400;
}

.shp-k {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.shp-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  cursor: pointer;
}

.shp-link:hover {
  color: var(--acc);
}

/* search + my car */
.shp-search {
  padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 40);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
}

.shp-search__ic {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  flex-shrink: 0;
  color: var(--acc);
}

.shp-search__in {
  min-width: 0;
  height: calc(var(--u) * 72);
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
  outline: 0;
}

.shp-search__in::placeholder {
  color: var(--mute);
}

.shp-search:focus-within {
  box-shadow: 0 0 0 2px var(--acc);
}

.shp-search__div {
  width: .5px;
  height: calc(var(--u) * 56);
  flex-shrink: 0;
  background: var(--line2);
}

.shp-car {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.shp-car__k {
  margin-right: calc(var(--u) * 6);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
  white-space: nowrap;
}

.shp-car__k .ico {
  color: var(--acc);
}

.shp-sel {
  position: relative;
  display: flex;
  align-items: center;
}

.shp-sel__s {
  height: calc(var(--u) * 72);
  padding: 0 calc(var(--u) * 54) 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 36);
  border: .5px solid var(--line2);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.shp-sel__s:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.shp-sel__c {
  position: absolute;
  right: calc(var(--u) * 22);
  color: var(--mute);
  pointer-events: none;
}

.shp-status {
  min-height: calc(var(--u) * 40);
  margin-top: calc(var(--u) * 18);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.shp-chip {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--acc-a10);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.shp-chip.is-ok {
  background: var(--shp-ok12);
  color: var(--ok);
}

.shp-chip.is-none {
  background: var(--sg-chip);
  color: var(--mute);
}

.shp-chip__dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: currentColor;
}

.shp-status__s {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

/* categories */
.shp-cats {
  margin-top: calc(var(--u) * 60);
}

.shp-cats__ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.shp-cat {
  position: relative;
  width: 100%;
  height: calc(var(--u) * 380);
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: calc(var(--u) * 32);
  overflow: hidden;
  background: var(--stripes);
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: block;
  cursor: pointer;
  transition: border-color .25s;
}

.shp-cat[aria-pressed="true"] {
  border-color: var(--acc);
}

.shp-cat__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--lx-ease);
}

.shp-cat:hover .shp-cat__img {
  transform: scale(1.03);
}

.shp-card__slot {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
  white-space: nowrap;
}

.shp-cat__lab {
  position: absolute;
  left: calc(var(--u) * 16);
  right: calc(var(--u) * 16);
  bottom: calc(var(--u) * 16);
  padding: calc(var(--u) * 22) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 22);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.shp-cat__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.shp-cat__t {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  letter-spacing: -.02em;
}

.shp-cat__n {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.shp-cat__go {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sg-chip);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 20));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, color .25s;
}

.shp-cat__tick,
.shp-cat[aria-pressed="true"] .shp-cat__arrow {
  display: none;
}

.shp-cat[aria-pressed="true"] .shp-cat__tick {
  display: inline;
}

.shp-cat[aria-pressed="true"] .shp-cat__go {
  background: var(--acc);
  color: #fff;
}

/* == 137. Shop v1 — filters and results ================================ */
.shp-cat-sec {
  margin-top: calc(var(--u) * 60);
  display: grid;
  grid-template-columns: calc(var(--u) * 400) minmax(0, 1fr);
  gap: calc(var(--u) * 40);
  align-items: start;
  scroll-margin-top: calc(var(--u) * 20);
}

.shp-filters {
  position: sticky;
  top: calc(var(--u) * 20);
  padding: calc(var(--u) * 34) calc(var(--u) * 34) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.shp-filters__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shp-filters__t {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

/* the close button belongs to the phone sheet */
.shp-filters__x,
.shp-fopen {
  display: none;
}

.shp-fgroup {
  min-width: 0;
  margin: 0;
  padding: calc(var(--u) * 24) 0 0;
  border: 0;
  border-top: .5px solid var(--sg-ln);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.shp-fgroup--tog {
  padding-top: 0;
  border-top: 0;
  gap: calc(var(--u) * 14);
}

.shp-fgroup legend {
  float: left;
  width: 100%;
  padding: 0;
}

.shp-tog {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  cursor: pointer;
}

.shp-tog__txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.shp-tog__t {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.shp-tog__d {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.shp-tog__sw {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 32);
  padding: calc(var(--u) * 3);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 16);
  background: var(--line2);
  display: flex;
  transition: background .25s;
}

.shp-tog__sw span {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border-radius: 50%;
  background: #fff;
  transition: transform .25s;
}

.shp-tog[aria-pressed="true"] .shp-tog__sw {
  background: var(--acc);
}

.shp-tog[aria-pressed="true"] .shp-tog__sw span {
  transform: translateX(calc(var(--u) * 24));
}

.shp-cbs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.shp-cbs li {
  position: relative;
}

/* real checkboxes; the row is the label */
.shp-cb__in {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.shp-cb {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  cursor: pointer;
}

.shp-cb__box {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 7);
  border: 1.5px solid var(--line2);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shp-cb__in:checked + .shp-cb .shp-cb__box {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.shp-cb__in:focus-visible + .shp-cb .shp-cb__box {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.shp-cb__n {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
  font-weight: 300;
  color: var(--mute);
}

.shp-prs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.shp-pr {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.shp-pr.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

/* results */
.shp-results {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
}

.shp-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  flex-wrap: wrap;
}

.shp-count {
  margin-right: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.shp-active {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.shp-active__b {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 18);
  border: 0;
  border-radius: calc(var(--u) * 22);
  background: var(--sg-chip);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  cursor: pointer;
}

.shp-active__x {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border-radius: 50%;
  background: var(--surf);
  font-size: max(12px, calc(var(--u) * 13));
  display: flex;
  align-items: center;
  justify-content: center;
}

.shp-sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.shp-sort__seg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
}

.shp-sort__b {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border: 0;
  border-radius: calc(var(--u) * 23);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  font-weight: 300;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s, color .25s;
}

.shp-sort__b.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.shp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.shp-card {
  border-radius: calc(var(--u) * 32);
  border: .5px solid transparent;
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s;
}

.shp-card.is-in {
  border-color: var(--ok);
}

.shp-card__ph {
  position: relative;
  height: calc(var(--u) * 320);
  background: var(--stripes);
  display: block;
}

.shp-card__slot {
  top: 50%;
}

.shp-badges {
  position: absolute;
  left: calc(var(--u) * 16);
  top: calc(var(--u) * 16);
  display: flex;
  gap: calc(var(--u) * 6);
}

.shp-badge {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--shp-grey);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.32);
  display: flex;
  align-items: center;
}

.shp-badge--sale {
  background: var(--acc);
}

.shp-badge--new {
  background: #111418;
}

.shp-card__b {
  padding: calc(var(--u) * 22) calc(var(--u) * 26) calc(var(--u) * 26);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.shp-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

.shp-card__rn {
  opacity: .7;
}

.shp-card__n {
  min-height: calc(var(--u) * 56);
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  line-height: 1.25;
  text-wrap: pretty;
}

.shp-card__fit {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.shp-card__fit.is-ok {
  color: var(--ok);
}

.shp-card__foot {
  margin-top: auto;
  padding-top: calc(var(--u) * 14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
}

.shp-card__price {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
  white-space: nowrap;
}

.shp-card__v {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  letter-spacing: -.02em;
}

.shp-card__v.is-sale {
  color: var(--acc);
}

.shp-card__was {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.shp-add {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 20);
  border: 0;
  border-radius: calc(var(--u) * 26);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s;
}

.shp-add.is-in,
.shp-kit__add.is-in {
  background: var(--ok);
}

.shp-empty {
  padding: calc(var(--u) * 60);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.shp-empty[hidden],
.shp-more[hidden] {
  display: none;
}

.shp-empty__t {
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
}

.shp-empty__b {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 26);
  border: 0;
  border-radius: calc(var(--u) * 28);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  cursor: pointer;
}

.shp-more {
  height: calc(var(--u) * 88);
  margin-top: calc(var(--u) * 20);
  border-radius: calc(var(--u) * 44);
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 18);
  cursor: pointer;
  transition: border-color .25s;
}

.shp-more:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.shp-more__dot {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shp-shown {
  text-align: center;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  color: var(--mute);
}

/* == 138. Shop v1 — kits, why, cart ==================================== */
.shp-kits-sec {
  padding-top: calc(var(--u) * 110);
}

.shp-h {
  padding-bottom: calc(var(--u) * 28);
  margin-bottom: calc(var(--u) * 40);
}

.shp-h .lsg-h__t {
  font-size: max(12px, calc(var(--u) * 68));
}

.shp-kits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.shp-kit {
  padding: calc(var(--u) * 46) calc(var(--u) * 50);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
  --shp-kit-line: var(--sg-ln);
}

.shp-kit--ink {
  background: var(--sg-band);
  color: var(--sg-on-band);
  --shp-kit-line: rgba(242, 243, 245, .14);
}

.shp-kit__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.shp-kit__tag {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  opacity: .7;
}

.shp-kit__save {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.shp-kit__t {
  font-size: max(12px, calc(var(--u) * 46));
  letter-spacing: -.03em;
  line-height: 1.05;
}

.shp-kit__ul li {
  padding: calc(var(--u) * 14) 0;
  border-top: .5px solid var(--shp-kit-line);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.shp-kit__i {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.shp-kit__i .acc {
  display: flex;
}

.shp-kit__ip {
  opacity: .6;
}

.shp-kit__foot {
  margin-top: auto;
  padding-top: calc(var(--u) * 10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
}

.shp-kit__price {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
  white-space: nowrap;
}

.shp-kit__v {
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 300;
  letter-spacing: -.03em;
}

.shp-kit__was {
  font-size: max(12px, calc(var(--u) * 17));
  opacity: .5;
}

.shp-kit__add {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 28);
  border: 0;
  border-radius: calc(var(--u) * 32);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s;
}

.shp-why {
  margin-top: calc(var(--u) * 110);
}

.shp-why__ul {
  border-top: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shp-why__i {
  padding: calc(var(--u) * 44) calc(var(--u) * 40);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
}

.shp-why__i + .shp-why__i {
  border-left: .5px solid var(--line2);
}

.shp-why__ic {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--acc-a12);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shp-why__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.shp-why__t {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.shp-why__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

/* the floating cart button */
.shp-fab {
  position: fixed;
  right: calc(var(--u) * 60);
  bottom: calc(var(--u) * 50);
  z-index: 70;
  height: calc(var(--u) * 96);
  padding: 0 calc(var(--u) * 34) 0 calc(var(--u) * 30);
  border: 0;
  border-radius: calc(var(--u) * 48);
  background: var(--shp-fab);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.1);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  cursor: pointer;
  transition: transform .3s;
}

.shp-fab.is-bump {
  transform: scale(1.06);
}

.shp-fab__n {
  min-width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 20);
  background: var(--acc);
  font-size: max(12px, calc(var(--u) * 16));
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shp-fab__sub {
  letter-spacing: .02em;
  opacity: .75;
}

.shp-fab__sub:empty {
  display: none;
}

/* the drawer is a modal dialog sliding in from the right */
.shp-drawer {
  width: calc(var(--u) * 760);
  max-width: 100vw;
  height: 100vh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--surf);
  color: var(--ink);
  box-shadow: var(--shp-drawer-shadow);
}

.shp-drawer::backdrop {
  background: var(--shp-scrim);
}

.shp-drawer[open] {
  animation: shp-in .35s var(--lx-ease);
}

@keyframes shp-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.shp-drawer__in {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.shp-drawer__head {
  padding: calc(var(--u) * 40) calc(var(--u) * 44) calc(var(--u) * 26);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shp-drawer__t {
  font-size: max(12px, calc(var(--u) * 48));
  letter-spacing: -.03em;
}

.shp-drawer__n {
  font-size: max(12px, calc(var(--u) * 20));
  letter-spacing: 0;
  color: var(--mute);
}

.shp-drawer__x {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  padding: 0;
  border-radius: 50%;
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.shp-ship {
  padding: 0 calc(var(--u) * 44) calc(var(--u) * 26);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.shp-ship__t {
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
}

.shp-ship__bar {
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--sg-chip);
  overflow: hidden;
  display: block;
}

.shp-ship__fill {
  width: 0;
  height: 100%;
  background: var(--acc);
  display: block;
  transition: width .4s;
}

.shp-ship__fill.is-ok {
  background: var(--ok);
}

.shp-lines {
  min-height: 0;
  flex: 1;
  padding: 0 calc(var(--u) * 44);
  overflow-y: auto;
}

.shp-line {
  padding: calc(var(--u) * 22) 0;
  border-top: .5px solid var(--sg-ln);
  display: grid;
  grid-template-columns: calc(var(--u) * 110) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 20);
  align-items: center;
}

.shp-line__ph {
  height: calc(var(--u) * 110);
  border-radius: calc(var(--u) * 18);
  background: var(--stripes);
  color: var(--mute);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 11));
  display: flex;
  align-items: center;
  justify-content: center;
}

.shp-line__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.shp-line__brand {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
}

.shp-line__n {
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
  line-height: 1.3;
}

.shp-qty {
  margin-top: calc(var(--u) * 4);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
}

.shp-qty__b {
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  padding: 0;
  border-radius: 50%;
  border: .5px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.shp-qty__n {
  min-width: calc(var(--u) * 30);
  text-align: center;
  font-size: max(12px, calc(var(--u) * 17));
}

.shp-line__t {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  white-space: nowrap;
}

.shp-lines__empty {
  padding: calc(var(--u) * 80) 0;
  text-align: center;
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  color: var(--mute);
}

.shp-lines__empty[hidden] {
  display: none;
}

.shp-drawer__foot {
  padding: calc(var(--u) * 28) calc(var(--u) * 44) calc(var(--u) * 40);
  border-top: .5px solid var(--sg-ln);
  background: var(--sg-chip);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.shp-totals {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.shp-totals div {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  color: var(--body);
}

.shp-checkout {
  height: calc(var(--u) * 84);
  margin-top: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 42);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.4);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  transition: filter .25s;
}

.shp-checkout:hover {
  color: #fff;
  filter: brightness(1.08);
}

/* the ring sits inside the pill, not as a second outline around it */
.shp-checkout:focus-visible {
  outline: 2px solid #fff;
  outline-offset: calc(var(--u) * -6);
}

.shp-drawer__note {
  text-align: center;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

/* == 139. Shop v1 — smaller screens ==================================== */
@media (max-width: 1599px) and (min-width: 1200px) {
  .shp-search {
    flex-wrap: wrap;
  }

  .shp-search__div {
    display: none;
  }

  .shp-car {
    width: 100%;
    padding-bottom: 6px;
  }

  .shp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shp-cats__ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shp-kits {
    grid-template-columns: minmax(0, 1fr);
  }

  .shp-why__ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shp-why__i:nth-child(3) {
    border-left: 0;
    border-top: .5px solid var(--line2);
  }

  .shp-why__i:nth-child(4) {
    border-top: .5px solid var(--line2);
  }
}

@media (max-width: 1199px) {
  .shp-search {
    padding: 12px;
    border-radius: 24px;
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  .shp-search__in {
    height: 48px;
    font-size: 17px;
  }

  .shp-search__div {
    display: none;
  }

  .shp-car {
    width: 100%;
    flex-wrap: wrap;
  }

  .shp-car__k {
    width: 100%;
  }

  .shp-sel {
    min-width: 0;
    flex: 1;
  }

  .shp-sel__s {
    width: 100%;
    height: 48px;
    padding: 0 36px 0 16px;
    font-size: 15px;
  }

  .shp-status {
    flex-wrap: wrap;
  }

  .shp-cats {
    margin-top: 32px;
  }

  .shp-cats__ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .shp-cat {
    height: 220px;
    border-radius: 20px;
  }

  .shp-cat__lab {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 14px 16px;
    border-radius: 16px;
  }

  .shp-cat__t {
    font-size: 20px;
  }

  .shp-cat__go {
    width: 40px;
    height: 40px;
  }

  .shp-cat-sec {
    margin-top: 40px;
    grid-template-columns: minmax(0, 1fr);
  }

  /* filters become a bottom sheet behind the "Filters (n)" button */
  .shp-filters {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    z-index: 75;
    max-height: 86svh;
    padding: 24px 24px 32px;
    border-radius: 24px 24px 0 0;
    overflow-y: auto;
    box-shadow: var(--st-bar-shadow);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .35s var(--lx-ease), visibility 0s .35s;
  }

  .shp-filters.is-open {
    transform: translateY(0);
    visibility: visible;
    box-shadow: var(--st-bar-shadow), 0 0 0 100vmax rgba(10, 12, 15, .45);
    transition: transform .35s var(--lx-ease);
  }

  .shp-filters__head {
    gap: 16px;
  }

  .shp-filters__head .shp-link {
    margin-left: auto;
  }

  .shp-filters__x {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: .5px solid var(--line2);
    background: transparent;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .shp-fopen {
    height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    border: .5px solid var(--line2);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .shp-fopen__n {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--acc);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .shp-fopen__n[hidden] {
    display: none;
  }

  .shp-sort {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
  }

  .shp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .shp-card {
    border-radius: 20px;
  }

  .shp-card__ph {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .shp-card__b {
    padding: 16px;
  }

  .shp-card__n {
    min-height: 0;
    font-size: 17px;
  }

  .shp-card__foot {
    flex-wrap: wrap;
  }

  .shp-card__v {
    font-size: 22px;
  }

  .shp-kits-sec {
    padding-top: 64px;
  }

  .shp-h .lsg-h__t {
    font-size: 40px;
  }

  .shp-kits {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .shp-kit {
    padding: 28px;
    border-radius: 24px;
  }

  .shp-kit__t {
    font-size: 32px;
  }

  .shp-why {
    margin-top: 64px;
  }

  .shp-why__ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shp-why__i {
    padding: 24px 18px;
  }

  .shp-why__i:nth-child(3) {
    border-left: 0;
  }

  .shp-why__i:nth-child(n + 3) {
    border-top: .5px solid var(--line2);
  }

  .shp-fab {
    right: 16px;
    bottom: 16px;
    height: 56px;
    padding: 0 18px;
    font-size: 13px;
    gap: 10px;
  }

  .shp-drawer {
    width: 100vw;
  }

  .shp-drawer__head,
  .shp-ship,
  .shp-lines,
  .shp-drawer__foot {
    padding-left: 20px;
    padding-right: 20px;
  }

  .shp-drawer__t {
    font-size: 32px;
  }

  .shp-page ~ .ft {
    margin-bottom: 72px;
  }
}

@media (max-width: 767px) {
  .shp-cats__ul,
  .shp-why__ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .shp-why__i:nth-child(n) {
    border-left: 0;
  }

  .shp-why__i + .shp-why__i {
    border-top: .5px solid var(--line2);
  }

  .shp-cat {
    height: 180px;
  }

  .shp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shp-kit__foot {
    flex-wrap: wrap;
  }

  /* the make gets its own row, model and year share the next */
  .shp-car__k + .shp-sel {
    flex-basis: 100%;
  }

  .shp-line {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .shp-line__ph {
    height: 72px;
  }

  .shp-line__t {
    grid-column: 2;
  }
}

/* == 140. Shop v3 — hero slider, category ribbon ======================= */
:root {
  --ts-night: #0e1013;
  --ts-inv: #fff;
  --ts-ease: cubic-bezier(.2, .7, .2, 1);
  --ts-stripes-night: repeating-linear-gradient(135deg, #1a1d22 0 calc(var(--u) * 14), #14161a calc(var(--u) * 14) calc(var(--u) * 28));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ts-inv: #111418;
  }
}

:root[data-theme="dark"] {
  --ts-inv: #111418;
}

.ts {
  font-weight: 400;
}

.ts-sec {
  padding-top: calc(var(--u) * 110);
}

/* hero: three stacked slides crossfade */
.ts-hero {
  position: relative;
  height: calc(var(--u) * 900);
  margin: 0 var(--gut);
  border-radius: calc(var(--u) * 44);
  overflow: hidden;
  background: var(--ts-night);
  color: #fff;
  touch-action: pan-y;
}

.ts-sl {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 1240);
  opacity: 0;
  transform: translateX(calc(var(--u) * 40));
  pointer-events: none;
  transition: opacity .7s ease, transform .9s var(--ts-ease);
}

.ts-sl.is-past {
  transform: translateX(calc(var(--u) * -40));
}

.ts-sl.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ts-sl__txt {
  padding: calc(var(--u) * 110) calc(var(--u) * 90) calc(var(--u) * 150);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 28);
}

.ts-sl__eb {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.64);
  color: rgba(255, 255, 255, .6);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.ts-sl__rule {
  width: calc(var(--u) * 40);
  height: 1px;
  background: var(--acc);
}

.ts-sl__t {
  font-size: max(12px, calc(var(--u) * 124));
  font-weight: 300;
  letter-spacing: -.06em;
  line-height: .94;
  text-wrap: balance;
}

.ts-sl__d {
  max-width: calc(var(--u) * 760);
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, .7);
}

.ts-sl__go {
  margin-top: calc(var(--u) * 14);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 26);
}

.ts-sl__cta {
  height: calc(var(--u) * 80);
  padding: 0 calc(var(--u) * 40);
  border: 0;
  border-radius: calc(var(--u) * 40);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  white-space: nowrap;
  cursor: pointer;
  transition: filter .25s;
}

.ts-sl__cta:hover {
  filter: brightness(1.08);
}

.ts-sl__note {
  font-size: max(12px, calc(var(--u) * 18));
  color: rgba(255, 255, 255, .6);
}

.ts-sl__pic {
  position: relative;
  background: var(--ts-stripes-night);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ts-sl__slot {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  color: rgba(255, 255, 255, .45);
}

.ts-sl__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ts-sl__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ts-night) 0%, rgba(14, 16, 19, 0) 30%);
}

.ts-sl__big {
  position: absolute;
  right: calc(var(--u) * 50);
  top: calc(var(--u) * 50);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 150));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
  opacity: .6;
}

.ts-hero__ctl {
  position: absolute;
  left: calc(var(--u) * 90);
  right: calc(var(--u) * 50);
  bottom: calc(var(--u) * 50);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.ts-hero__num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 15));
  color: rgba(255, 255, 255, .7);
}

.ts-dots {
  display: flex;
  gap: calc(var(--u) * 8);
}

.ts-dot {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 6);
  padding: 0;
  border: 0;
  border-radius: calc(var(--u) * 3);
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: all .4s;
}

.ts-dot.is-on {
  width: calc(var(--u) * 60);
  background: #fff;
}

.ts-arrows {
  display: flex;
  gap: calc(var(--u) * 10);
}

.ts-hero .ts-arrows {
  margin-left: calc(var(--u) * 14);
}

.ts-arr {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 20));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ts-arr--ghost {
  border: .5px solid rgba(255, 255, 255, .35);
  color: #fff;
}

.ts-arr--light {
  background: #fff;
  color: #111418;
}

.ts-arr--line {
  border: .5px solid var(--line2);
  color: var(--ink);
}

.ts-arr--acc {
  background: var(--acc);
  color: #fff;
}

/* 01 — the category ribbon scrolls sideways and snaps */
.ts-ribbon {
  display: flex;
  gap: calc(var(--u) * 16);
  padding: 0 var(--gut) calc(var(--u) * 10);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gut);
  scrollbar-width: none;
}

.ts-ribbon::-webkit-scrollbar {
  display: none;
}

.ts-ribbon li {
  flex: 0 0 calc(var(--u) * 560);
  scroll-snap-align: start;
}

.ts-cat {
  position: relative;
  width: 100%;
  height: calc(var(--u) * 640);
  padding: 0;
  border: 0;
  border-radius: calc(var(--u) * 32);
  overflow: hidden;
  background: var(--stripes);
  color: #fff;
  font: inherit;
  text-align: left;
  display: block;
  cursor: pointer;
  transition: transform .35s var(--ts-ease);
}

.ts-cat:hover {
  transform: scale(.985);
}

.ts-cat__slot {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
  white-space: nowrap;
}

.ts-cat__img,
.ts-brand__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ts-cat__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0) 50%, rgba(8, 9, 11, .82) 100%);
}

.ts-cat__lab {
  position: absolute;
  left: calc(var(--u) * 34);
  right: calc(var(--u) * 34);
  bottom: calc(var(--u) * 32);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
}

.ts-cat__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.ts-cat__t {
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.ts-cat__n {
  font-size: max(12px, calc(var(--u) * 15));
  color: rgba(255, 255, 255, .7);
}

.ts-cat__go {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--acc);
  font-size: max(12px, calc(var(--u) * 22));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* == 141. Shop v3 — tabs, product cards, featured brand ================ */
.ts-seg {
  padding: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
}

.ts-seg__b {
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 26);
  border: 0;
  border-radius: calc(var(--u) * 27);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  cursor: pointer;
}

.ts-seg__b--s {
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 14));
}

.ts-seg__b.is-on {
  background: var(--ink);
  color: var(--ts-inv);
}

.ts-seg__n {
  opacity: .55;
}

.ts-trend,
.ts-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.ts-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ts-card {
  border: .5px solid transparent;
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ts-ease), border-color .25s;
}

.ts-card:hover {
  transform: translateY(calc(var(--u) * -6));
}

.ts-card.is-in {
  border-color: var(--ok);
}

.ts-card__ph {
  position: relative;
  height: calc(var(--u) * 440);
  background: var(--stripes);
  display: block;
}

.ts-card__ph--t {
  height: calc(var(--u) * 420);
}

.ts-card__slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
  white-space: nowrap;
}

.ts-badges {
  position: absolute;
  left: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  display: flex;
  gap: calc(var(--u) * 6);
}

.ts-badge {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 11);
  border-radius: calc(var(--u) * 14);
  background: var(--shp-grey);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.32);
  display: flex;
  align-items: center;
}

.ts-badge--sale {
  background: var(--acc);
}

.ts-badge--new {
  background: #111418;
}

.ts-fav {
  position: absolute;
  right: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 18));
  cursor: pointer;
}

.ts-fav[aria-pressed="true"] {
  color: var(--acc);
}

.ts-card__b {
  flex: 1;
  padding: calc(var(--u) * 20) calc(var(--u) * 22) calc(var(--u) * 22);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.ts-card__meta {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
  display: flex;
  justify-content: space-between;
}

.ts-card__n {
  min-height: calc(var(--u) * 52);
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 300;
  line-height: 1.25;
  text-wrap: pretty;
}

.ts-card__foot {
  margin-top: auto;
  padding-top: calc(var(--u) * 12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
}

.ts-card__price {
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
}

.ts-card__v {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
}

.ts-card__v.is-sale {
  color: var(--acc);
}

.ts-card__was {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ts-add {
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 18);
  border: 0;
  border-radius: calc(var(--u) * 25);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s;
}

.ts-add--br {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 20);
}

.ts-add.is-in {
  background: var(--ok);
}

/* the featured brand band stays dark in both themes */
.ts-brand {
  position: relative;
  margin: calc(var(--u) * 110) calc(var(--u) * 20) 0;
  border-radius: calc(var(--u) * 44);
  overflow: hidden;
  background: var(--ts-night);
  color: #f2f3f5;
  display: grid;
  grid-template-columns: calc(var(--u) * 1260) minmax(0, 1fr);
}

.ts-brand__pic {
  position: relative;
  overflow: hidden;
  min-height: calc(var(--u) * 980);
  background: var(--ts-stripes-night);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-brand__slot {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  color: #7d838d;
}

.ts-brand__chip {
  position: absolute;
  left: calc(var(--u) * 50);
  top: calc(var(--u) * 50);
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: rgba(255, 255, 255, .1);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  display: flex;
  align-items: center;
}

.ts-brand__txt {
  padding: calc(var(--u) * 90) calc(var(--u) * 90) calc(var(--u) * 80);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 28);
}

.ts-brand__mark {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 64));
  line-height: 1;
  color: var(--acc);
}

.ts-brand__t {
  font-size: max(12px, calc(var(--u) * 76));
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
}

.ts-brand__d {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  line-height: 1.55;
  color: #a3a9b3;
}

.ts-br {
  margin-top: calc(var(--u) * 10);
  display: flex;
  flex-direction: column;
}

.ts-br__row {
  padding: calc(var(--u) * 20) 0;
  border-top: .5px solid rgba(242, 243, 245, .14);
  display: grid;
  grid-template-columns: calc(var(--u) * 96) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(var(--u) * 22);
}

.ts-br__th {
  height: calc(var(--u) * 96);
  border-radius: calc(var(--u) * 18);
  background: repeating-linear-gradient(135deg, #1f2228 0 calc(var(--u) * 14), #181a1f calc(var(--u) * 14) calc(var(--u) * 28));
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 10));
  color: #7d838d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-br__nm {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.ts-br__n {
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 300;
}

.ts-br__r {
  font-size: max(12px, calc(var(--u) * 14));
  color: #7d838d;
}

.ts-br__p {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.ts-brand__all {
  margin-top: auto;
  align-self: flex-start;
  height: calc(var(--u) * 68);
  padding: 0 calc(var(--u) * 30);
  border: .5px solid rgba(242, 243, 245, .3);
  border-radius: calc(var(--u) * 34);
  background: transparent;
  color: #f2f3f5;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.ts-brand__all:hover {
  border-color: var(--acc);
  color: var(--acc);
}

/* == 142. Shop v3 — catalog, reviews, club, toast ====================== */
#ts-catalog {
  scroll-margin-top: 0;
}

.ts-chips {
  margin-bottom: calc(var(--u) * 30);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.ts-chip {
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 22);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 27);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  white-space: nowrap;
  cursor: pointer;
}

.ts-chip.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ts-inv);
}

.ts-chip__n {
  margin-left: calc(var(--u) * 8);
  opacity: .55;
}

.ts-more {
  width: 100%;
  height: calc(var(--u) * 96);
  margin-top: calc(var(--u) * 40);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 48);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 18);
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.ts-more:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.ts-more__dot {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-shown {
  margin-top: calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  color: var(--mute);
  text-align: center;
}

/* 04 — reviews */
.ts-score {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 14);
}

.ts-score__v {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 44));
  color: var(--acc);
}

.ts-score__s {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.ts-rvs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.ts-rv {
  padding: calc(var(--u) * 44) calc(var(--u) * 46);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
}

.ts-rv__stars {
  font-size: max(12px, calc(var(--u) * 22));
  letter-spacing: calc(var(--u) * 4);
  color: var(--acc);
}

.ts-rv__q {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  line-height: 1.45;
  text-wrap: pretty;
}

.ts-rv__foot {
  margin-top: auto;
  padding-top: calc(var(--u) * 24);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.ts-rv__th {
  width: calc(var(--u) * 72);
  height: calc(var(--u) * 72);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 16);
  background: var(--stripes);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 10));
  color: var(--mute);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-rv__who {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.ts-rv__n {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.ts-rv__p {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ts-rv__ok {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  color: var(--ok);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
}

/* Avava Club + benefits */
.ts-club-sec {
  margin-top: calc(var(--u) * 110);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: calc(var(--u) * 16);
}

.ts-club {
  position: relative;
  padding: calc(var(--u) * 70) calc(var(--u) * 70) calc(var(--u) * 64);
  border-radius: calc(var(--u) * 36);
  overflow: hidden;
  background: var(--acc);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
}

.ts-club > * {
  position: relative;
}

.ts-club .ts-club__big {
  position: absolute;
  right: calc(var(--u) * -30);
  bottom: calc(var(--u) * -110);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 420));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .28);
}

.ts-club__eb {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.36);
  opacity: .85;
}

.ts-club__t {
  font-size: max(12px, calc(var(--u) * 84));
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: .98;
}

.ts-club__dot {
  opacity: .6;
}

.ts-club__d {
  max-width: calc(var(--u) * 760);
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 300;
  opacity: .85;
}

.ts-club__form {
  max-width: calc(var(--u) * 900);
  height: calc(var(--u) * 84);
  margin-top: calc(var(--u) * 16);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 32);
  border-radius: calc(var(--u) * 42);
  background: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.ts-club__form:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}

.ts-club__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111418;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 300;
}

.ts-club__b {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 30);
  border: 0;
  border-radius: calc(var(--u) * 32);
  background: #111418;
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  white-space: nowrap;
  cursor: pointer;
}

.ts-club__err {
  min-height: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 14));
  opacity: .8;
}

.ts-club__ok {
  height: calc(var(--u) * 84);
  margin-top: calc(var(--u) * 16);
  padding: 0 calc(var(--u) * 34);
  align-self: flex-start;
  border-radius: calc(var(--u) * 42);
  background: rgba(255, 255, 255, .18);
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.ts-club__code {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: .1em;
}

.ts-bens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.ts-ben {
  padding: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.ts-ben__ic {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border-radius: 50%;
  background: var(--acc-a12);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-ben__t {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  letter-spacing: -.02em;
}

.ts-ben__d {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--mute);
}

/* the "Added to cart" toast */
.ts-toast {
  position: fixed;
  right: calc(var(--u) * 60);
  top: calc(var(--u) * 40);
  z-index: 80;
  width: calc(var(--u) * 560);
  max-width: calc(100vw - 32px);
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 24);
  background: #111418;
  color: #f2f3f5;
  box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 60) rgba(8, 9, 11, .35);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--u) * -30));
  pointer-events: none;
  transition: opacity .35s var(--ts-ease), transform .35s var(--ts-ease), visibility 0s .35s;
}

.ts-toast.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .35s var(--ts-ease), transform .35s var(--ts-ease);
}

.ts-toast__ic {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ok);
  font-size: max(12px, calc(var(--u) * 20));
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-toast__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.ts-toast__k {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: #7d838d;
}

.ts-toast__n {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the floating cart waits until the cart has items */
.ts-fab {
  transition: opacity .35s var(--ts-ease), transform .35s var(--ts-ease), visibility 0s;
}

.ts-fab.is-empty {
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--u) * 40));
  transition: opacity .35s var(--ts-ease), transform .35s var(--ts-ease), visibility 0s .35s;
}

.shp-totals .shp-totals__disc {
  color: var(--ok);
}

/* the owner's product photos fill the image boxes (all shop pages) */
.shp-card__img,
.shp-line__img,
.g2-card__img,
.g2-row__img,
.ts-card__img,
.ts-br__img,
.ts-rv__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shp-line__ph,
.g2-row__ph,
.ts-br__th,
.ts-rv__th {
  position: relative;
  overflow: hidden;
}

/* == 143. Shop v3 — smaller screens ==================================== */
@media (max-width: 1199px) {
  .ts-sec {
    padding-top: 64px;
  }

  .ts-hero {
    height: auto;
    border-radius: 28px;
    display: grid;
  }

  .ts-sl {
    position: relative;
    grid-area: 1 / 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 340px auto;
  }

  .ts-sl__pic {
    grid-row: 1;
  }

  .ts-sl__txt {
    grid-row: 2;
    padding: 28px 28px 108px;
    justify-content: flex-start;
    gap: 16px;
  }

  .ts-sl__fade {
    background: linear-gradient(0deg, var(--ts-night) 0%, rgba(14, 16, 19, 0) 40%);
  }

  .ts-sl__big {
    right: 24px;
    top: 24px;
    font-size: 96px;
  }

  .ts-sl__eb {
    font-size: 12px;
  }

  .ts-sl__t {
    font-size: 56px;
  }

  .ts-sl__d {
    font-size: 17px;
  }

  .ts-sl__go {
    margin-top: 6px;
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .ts-sl__cta {
    height: 56px;
    padding: 0 28px;
    font-size: 13px;
  }

  .ts-sl__note {
    font-size: 15px;
  }

  .ts-hero__ctl {
    left: 28px;
    right: 28px;
    bottom: 28px;
    gap: 14px;
  }

  .ts-hero__num {
    font-size: 13px;
  }

  .ts-dot {
    width: 18px;
    height: 5px;
  }

  .ts-dot.is-on {
    width: 40px;
  }

  .ts-hero .ts-arrows {
    margin-left: auto;
  }

  .ts-arr {
    width: 48px;
    height: 48px;
    font-size: 17px;
  }

  .ts-sec .shp-h {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
  }

  .ts-ribbon {
    gap: 12px;
  }

  .ts-ribbon li {
    flex-basis: min(80vw, 420px);
  }

  .ts-cat {
    height: min(96vw, 480px);
    border-radius: 24px;
  }

  .ts-cat__lab {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }

  .ts-cat__t {
    font-size: 30px;
  }

  .ts-cat__n {
    font-size: 14px;
  }

  .ts-cat__go {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .ts-seg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ts-seg__b {
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }

  /* trending scrolls sideways */
  .ts-trend {
    margin: 0 calc(var(--gut) * -1);
    padding: 0 var(--gut) 8px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 320px);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gut);
    scrollbar-width: none;
  }

  .ts-trend > li {
    scroll-snap-align: start;
  }

  .ts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .ts-card {
    border-radius: 22px;
  }

  .ts-card__ph,
  .ts-card__ph--t {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .ts-card__b {
    padding: 16px 16px 18px;
  }

  .ts-card__meta {
    font-size: 12px;
    letter-spacing: .1em;
  }

  .ts-card__n {
    min-height: 2.5em;
    font-size: 17px;
  }

  .ts-card__v {
    font-size: 22px;
  }

  .ts-card__was {
    font-size: 13px;
  }

  .ts-add {
    height: 42px;
    padding: 0 16px;
    font-size: 12px;
  }

  .ts-badges {
    right: 62px;
    flex-wrap: wrap;
  }

  .ts-badge {
    height: 24px;
    padding: 0 9px;
    font-size: 12px;
    letter-spacing: .08em;
  }

  .ts-fav {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .ts-brand {
    margin: 64px 12px 0;
    border-radius: 28px;
    grid-template-columns: minmax(0, 1fr);
  }

  .ts-brand__pic {
    min-height: 0;
    aspect-ratio: 9 / 7;
  }

  .ts-brand__chip {
    left: 20px;
    top: 20px;
    height: 36px;
  }

  .ts-brand__txt {
    padding: 32px 24px 36px;
    gap: 18px;
  }

  .ts-brand__mark {
    font-size: 40px;
  }

  .ts-brand__t {
    font-size: 44px;
  }

  .ts-brand__d {
    font-size: 17px;
  }

  .ts-br__row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 8px 14px;
  }

  .ts-br__th {
    height: 64px;
    grid-row: span 2;
    border-radius: 14px;
  }

  .ts-br__n {
    font-size: 17px;
  }

  .ts-br__p {
    font-size: 19px;
    grid-column: 2;
  }

  .ts-add--br {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .ts-brand__all {
    margin-top: 6px;
    height: 56px;
  }

  .ts-chips {
    margin: 0 calc(var(--gut) * -1) 20px;
    padding: 0 var(--gut);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ts-chip {
    height: 44px;
    padding: 0 18px;
    font-size: 15px;
  }

  .ts-more {
    height: 64px;
    margin-top: 28px;
    font-size: 13px;
  }

  .ts-more__dot {
    width: 36px;
    height: 36px;
  }

  .ts-score__v {
    font-size: 32px;
  }

  .ts-rvs {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .ts-rv {
    padding: 28px 26px;
    border-radius: 22px;
    gap: 18px;
  }

  .ts-rv__q {
    font-size: 19px;
  }

  .ts-rv__foot {
    flex-wrap: wrap;
  }

  .ts-rv__th {
    width: 56px;
    height: 56px;
  }

  .ts-rv__n {
    font-size: 16px;
  }

  .ts-club-sec {
    margin-top: 64px;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .ts-club {
    padding: 36px 28px 32px;
    border-radius: 28px;
    gap: 16px;
  }

  .ts-club .ts-club__big {
    right: -20px;
    bottom: -60px;
    font-size: 240px;
  }

  .ts-club__t {
    font-size: 44px;
  }

  .ts-club__d {
    font-size: 17px;
  }

  .ts-club__form {
    height: 64px;
    padding: 0 6px 0 20px;
  }

  .ts-club__in {
    font-size: 17px;
  }

  .ts-club__b {
    height: 52px;
    padding: 0 18px;
    font-size: 12px;
  }

  .ts-club__ok {
    height: auto;
    min-height: 64px;
    padding: 14px 22px;
    font-size: 16px;
    flex-wrap: wrap;
  }

  .ts-bens {
    gap: 12px;
  }

  .ts-ben {
    padding: 26px 22px;
    border-radius: 22px;
    gap: 12px;
  }

  .ts-ben__ic {
    width: 52px;
    height: 52px;
  }

  .ts-ben__ic .ico {
    width: 24px;
    height: 24px;
  }

  .ts-ben__t {
    font-size: 21px;
  }

  .ts-ben__d {
    font-size: 14px;
  }

  .ts-toast {
    right: 16px;
    top: 16px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .ts-toast__ic {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .ts-toast__n {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .ts-sl {
    grid-template-rows: 240px auto;
  }

  .ts-sl__txt {
    padding: 22px 20px 96px;
  }

  .ts-sl__t {
    font-size: 40px;
  }

  .ts-sl__big {
    font-size: 72px;
  }

  .ts-hero__ctl {
    left: 20px;
    right: 20px;
    bottom: 22px;
  }

  .ts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ts-card__b {
    padding: 12px 12px 14px;
  }

  .ts-card__meta {
    flex-direction: column;
    gap: 2px;
  }

  .ts-card__n {
    font-size: 15px;
  }

  .ts-card__foot {
    flex-wrap: wrap;
  }

  .ts-grid .ts-add {
    width: 100%;
  }

  .ts-card__slot {
    font-size: 12px;
    white-space: normal;
    width: 80%;
    text-align: center;
  }

  .ts-brand__t,
  .ts-club__t {
    font-size: 36px;
  }

  .ts-bens {
    grid-template-columns: minmax(0, 1fr);
  }

  .ts-club__form {
    flex-wrap: wrap;
    height: auto;
    padding: 8px;
    border-radius: 28px;
  }

  .ts-club__in {
    height: 48px;
    padding: 0 12px;
    flex-basis: 100%;
  }

  .ts-club__b {
    width: 100%;
  }
}

/* == 144. Shop v2 — category tiles, sticky toolbar ===================== */
:root {
  --g2-inv: #fff;
  --g2-band: #111418;
  --g2-panel-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(17, 20, 24, .18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --g2-inv: #111418;
    --g2-band: #1c1f24;
  }
}

:root[data-theme="dark"] {
  --g2-inv: #111418;
  --g2-band: #1c1f24;
}

.g2 {
  font-weight: 400;
}

.g2-tiles {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.g2-tile {
  width: 100%;
  height: calc(var(--u) * 190);
  padding: calc(var(--u) * 24) calc(var(--u) * 22);
  border: .5px solid transparent;
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all .25s;
}

.g2-tile.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--g2-inv);
}

.g2-tile__ic {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: 50%;
  background: var(--acc-a10);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.g2-tile.is-on .g2-tile__ic {
  background: var(--acc);
  color: #fff;
}

.g2-tile__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.g2-tile__t {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  line-height: 1.15;
}

.g2-tile__n {
  font-size: max(12px, calc(var(--u) * 13));
  opacity: .6;
}

/* the toolbar sticks to the top of the viewport */
.g2-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-top: calc(var(--u) * 30);
  border-bottom: .5px solid var(--sg-ln);
  background: var(--bg);
}

.g2-bar__in {
  height: calc(var(--u) * 104);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.g2-search {
  width: calc(var(--u) * 520);
  height: calc(var(--u) * 64);
  flex-shrink: 0;
  padding: 0 calc(var(--u) * 22);
  border: .5px solid var(--sg-ln);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.g2-search:focus-within {
  border-color: var(--acc);
}

.g2-search__ic {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  flex-shrink: 0;
  color: var(--mute);
}

.g2-search__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.g2-bar__div {
  width: .5px;
  height: calc(var(--u) * 44);
  margin: 0 calc(var(--u) * 8);
  background: var(--line2);
}

.g2-fl,
.g2-togs {
  display: contents;
}

.g2-fl__head,
.g2-fl__foot,
.g2-bar .g2-fopen {
  display: none;
}

.g2-pill {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 20);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 28);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  cursor: pointer;
}

.g2-pill.is-on,
.g2-pill[aria-pressed="true"],
.g2-pill[aria-expanded="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--g2-inv);
}

.g2-dd {
  position: relative;
}

.g2-dd__c {
  font-size: max(12px, calc(var(--u) * 13));
  transition: transform .2s;
}

.g2-dd__b[aria-expanded="true"] .g2-dd__c {
  transform: rotate(180deg);
}

.g2-dd__p {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 68);
  z-index: 50;
  width: calc(var(--u) * 380);
  margin: 0;
  padding: calc(var(--u) * 16);
  border: .5px solid var(--sg-ln);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  box-shadow: var(--g2-panel-shadow);
}

.g2-opts {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.g2-opts li {
  position: relative;
}

/* real checkboxes / radios; the row is the label */
.g2-opt__in {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.g2-opt {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  cursor: pointer;
}

.g2-opt__box {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  flex-shrink: 0;
  border: 1.5px solid var(--line2);
  border-radius: calc(var(--u) * 6);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 12));
  display: flex;
  align-items: center;
  justify-content: center;
}

.g2-opt--price .g2-opt__box {
  border-radius: 50%;
}

.g2-opt__in:checked + .g2-opt {
  background: var(--acc-a06);
}

.g2-opt__in:checked + .g2-opt .g2-opt__box {
  border-color: var(--acc);
  background: var(--acc);
}

.g2-opt__in:checked + .g2-opt--brand .g2-opt__box::before {
  content: "✓";
}

.g2-opt__in:checked + .g2-opt--price .g2-opt__box::before {
  content: "●";
}

.g2-opt__in:focus-visible + .g2-opt {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

.g2-opt__n {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.g2-bar__r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.g2-seg {
  padding: calc(var(--u) * 4);
  border: .5px solid var(--sg-ln);
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  display: flex;
}

.g2-seg__b {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 18);
  border: 0;
  border-radius: calc(var(--u) * 24);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  font-weight: 300;
  white-space: nowrap;
  cursor: pointer;
}

.g2-seg__v {
  width: calc(var(--u) * 56);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g2-seg__b.is-on {
  background: var(--ink);
  color: var(--g2-inv);
}

.g2-cart {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 24) 0 calc(var(--u) * 22);
  border: 0;
  border-radius: calc(var(--u) * 32);
  background: var(--ink);
  color: var(--g2-inv);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  cursor: pointer;
  transition: transform .3s;
}

.g2-cart.is-bump {
  transform: scale(1.06);
}

.g2-cart__n {
  min-width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 16);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* == 145. Shop v2 — results, cards, list, pages ======================== */
.g2-res {
  margin-top: calc(var(--u) * 44);
  scroll-margin-top: calc(var(--u) * 120);
}

.g2-res__head {
  margin-bottom: calc(var(--u) * 30);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 30);
}

.g2-res__l {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 20);
}

.g2-res__t {
  font-size: max(12px, calc(var(--u) * 84));
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
}

.g2-res__n {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  color: var(--mute);
}

.g2-res__r {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.g2-active {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--u) * 8);
}

.g2-active__b {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 18);
  border: 0;
  border-radius: calc(var(--u) * 22);
  background: var(--sg-chip);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  cursor: pointer;
}

.g2-active__x {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border-radius: 50%;
  background: var(--surf);
  font-size: max(12px, calc(var(--u) * 13));
  display: flex;
  align-items: center;
  justify-content: center;
}

.g2-clear {
  padding: 0 calc(var(--u) * 10);
  border: 0;
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  cursor: pointer;
}

.g2-clear:hover {
  color: var(--acc);
}

.g2-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.g2-card {
  border: .5px solid transparent;
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s;
}

.g2-card.is-in {
  border-color: var(--ok);
}

.g2-card.is-out,
.g2-row.is-out {
  opacity: .7;
}

.g2-card__ph {
  position: relative;
  height: calc(var(--u) * 360);
  background: var(--stripes);
  display: block;
}

.g2-card__slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
  white-space: nowrap;
}

.g2-badges {
  position: absolute;
  left: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  display: flex;
  gap: calc(var(--u) * 6);
}

.g2-badges--row {
  position: static;
  margin-top: calc(var(--u) * 4);
}

.g2-badges--row:empty {
  display: none;
}

.g2-badge {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 11);
  border-radius: calc(var(--u) * 14);
  background: var(--shp-grey);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.32);
  display: flex;
  align-items: center;
}

.g2-badge--sale {
  background: var(--acc);
}

.g2-badge--new {
  background: #111418;
}

.g2-fav {
  position: absolute;
  right: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 18));
  cursor: pointer;
}

.g2-fav[aria-pressed="true"] {
  color: var(--acc);
}

.g2-card__b {
  flex: 1;
  padding: calc(var(--u) * 20) calc(var(--u) * 22) calc(var(--u) * 22);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.g2-card__meta {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
  display: flex;
  justify-content: space-between;
}

.g2-card__n {
  min-height: calc(var(--u) * 52);
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 300;
  line-height: 1.25;
  text-wrap: pretty;
}

.g2-st {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 7);
}

.g2-st.is-ok {
  color: var(--ok);
}

.g2-st .ico {
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 15);
  flex-shrink: 0;
}

.g2-card__foot {
  margin-top: auto;
  padding-top: calc(var(--u) * 12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
}

.g2-price {
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
}

.g2-price__v {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
}

.g2-price__v.is-sale {
  color: var(--acc);
}

.g2-price__was {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.g2-add {
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 18);
  border: 0;
  border-radius: calc(var(--u) * 25);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s;
}

.g2-add.is-in {
  background: var(--ok);
}

.g2-add.is-out {
  background: var(--sg-chip);
  color: var(--ink);
}

.g2-add.is-out[aria-pressed="true"] {
  color: var(--ok);
}

/* the promo tile spans two columns */
.g2-promo {
  position: relative;
  grid-column: span 2;
  padding: calc(var(--u) * 50);
  border-radius: calc(var(--u) * 28);
  overflow: hidden;
  background: var(--g2-band);
  color: #f2f3f5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
}

.g2-promo > * {
  position: relative;
}

.g2-promo .g2-promo__big {
  position: absolute;
  right: calc(var(--u) * -40);
  bottom: calc(var(--u) * -80);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 360));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
  opacity: .45;
}

.g2-promo__eb {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.6);
  color: #7d838d;
}

.g2-promo__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.g2-promo__t {
  max-width: calc(var(--u) * 640);
  font-size: max(12px, calc(var(--u) * 56));
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.02;
}

.g2-promo__d {
  max-width: calc(var(--u) * 560);
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  color: #a3a9b3;
}

.g2-promo__cta {
  align-self: flex-start;
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 28);
  border: 0;
  border-radius: calc(var(--u) * 32);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  cursor: pointer;
}

/* list view: one surface card with rows */
.g2-list {
  padding: calc(var(--u) * 6) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
}

.g2-row {
  padding: calc(var(--u) * 22) 0;
  border-bottom: .5px solid var(--sg-ln);
  display: grid;
  grid-template-columns: calc(var(--u) * 240) minmax(0, 1fr) calc(var(--u) * 260) calc(var(--u) * 220);
  align-items: center;
  gap: calc(var(--u) * 36);
}

.g2-row.is-last {
  border-bottom: 0;
}

.g2-row__ph {
  height: calc(var(--u) * 180);
  border-radius: calc(var(--u) * 20);
  background: var(--stripes);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 11));
  color: var(--mute);
  display: flex;
  align-items: center;
  justify-content: center;
}

.g2-row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.g2-row__meta {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--u) * 14);
}

.g2-row__n {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  letter-spacing: -.02em;
}

.g2-row__d {
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  color: var(--body);
}

.g2-row__st {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.g2-row__st .g2-st {
  font-size: max(12px, calc(var(--u) * 15));
}

.g2-row__ship {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.g2-row__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 12);
}

.g2-price--row .g2-price__v {
  font-size: max(12px, calc(var(--u) * 32));
}

.g2-price--row .g2-price__was {
  font-size: max(12px, calc(var(--u) * 15));
}

.g2-add--row {
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 24);
}

.g2-empty {
  padding: calc(var(--u) * 80);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.g2-empty__t {
  font-size: max(12px, calc(var(--u) * 36));
  font-weight: 300;
}

.g2-empty__b {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 28);
  border: 0;
  border-radius: calc(var(--u) * 30);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  cursor: pointer;
}

.g2-pg {
  margin-top: calc(var(--u) * 50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
}

.g2-pg__range,
.g2-pg__per {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.g2-pg__nav,
.g2-pg__nums {
  display: flex;
  gap: calc(var(--u) * 8);
}

.g2-pg__prev,
.g2-pg__next {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 22);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 30);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  cursor: pointer;
}

.g2-pg__next {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.g2-pg__prev:disabled,
.g2-pg__next:disabled {
  opacity: .35;
  cursor: default;
}

.g2-pg__n {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  border: .5px solid var(--line2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  cursor: pointer;
}

.g2-pg__n.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--g2-inv);
}

/* == 146. Shop v2 — smaller screens ==================================== */
@media (max-width: 1199px) {
  .g2-tiles-nav {
    margin: 0;
  }

  .g2-tiles {
    padding: 0 var(--gut) 4px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 150px;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gut);
    scrollbar-width: none;
  }

  .g2-tiles > li {
    scroll-snap-align: start;
  }

  .g2-tile {
    height: 140px;
    padding: 16px;
    border-radius: 20px;
  }

  .g2-tile__ic {
    width: 44px;
    height: 44px;
  }

  .g2-tile__ic .ico {
    width: 22px;
    height: 22px;
  }

  .g2-tile__t {
    font-size: 16px;
  }

  .g2-tile__n {
    font-size: 12px;
  }

  .g2-bar {
    margin-top: 16px;
  }

  .g2-bar__in {
    height: auto;
    padding: 12px 0;
    flex-wrap: wrap;
    gap: 10px;
  }

  .g2-search {
    width: 100%;
    height: 52px;
    padding: 0 18px;
  }

  .g2-search__ic {
    width: 20px;
    height: 20px;
  }

  .g2-search__in {
    font-size: 16px;
  }

  .g2-bar__div {
    display: none;
  }

  .g2-pill {
    height: 46px;
    padding: 0 16px;
    font-size: 15px;
  }

  .g2-bar .g2-fopen {
    display: flex;
  }

  .g2-fopen__n {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: var(--acc);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* filters live in a bottom sheet */
  .g2-fl {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 75;
    max-height: 86svh;
    padding: 22px 22px 26px;
    border-radius: 24px 24px 0 0;
    overflow-y: auto;
    background: var(--surf);
    box-shadow: var(--st-bar-shadow);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .35s var(--lx-ease), visibility 0s .35s;
  }

  .g2-fl.is-open {
    transform: none;
    visibility: visible;
    box-shadow: var(--st-bar-shadow), 0 0 0 100vmax rgba(10, 12, 15, .45);
    transition: transform .35s var(--lx-ease);
  }

  .g2-fl__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .g2-fl__t {
    font-size: 26px;
    font-weight: 300;
  }

  .g2-fl__x {
    width: 40px;
    height: 40px;
    padding: 0;
    border: .5px solid var(--line2);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .g2-fl__foot {
    display: block;
  }

  .g2-fl__done {
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 27px;
    background: var(--acc);
    color: #fff;
    font: inherit;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em;
    cursor: pointer;
  }

  .g2-togs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* inside the sheet the dropdown panels are always open lists */
  .g2-dd__b {
    pointer-events: none;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mute);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .18em;
  }

  .g2-dd__b[aria-expanded="true"] {
    background: transparent;
    color: var(--mute);
  }

  .g2-dd__c {
    display: none;
  }

  .g2-fl .g2-dd__p[hidden] {
    display: block !important;
  }

  .g2-dd__p {
    position: static;
    width: auto;
    margin-top: 8px;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .g2-opt {
    height: 44px;
    padding: 0 8px;
    font-size: 16px;
  }

  .g2-opt__box {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .g2-opt__n {
    font-size: 13px;
  }

  .g2-bar__r {
    margin-left: auto;
  }

  .g2-seg--sort {
    display: none;
  }

  .g2-seg__v {
    width: 44px;
    height: 40px;
  }

  .g2-cart {
    height: 46px;
    padding: 0 16px;
    font-size: 13px;
    gap: 8px;
  }

  .g2-cart__n {
    min-width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .g2-res {
    margin-top: 28px;
    scroll-margin-top: 140px;
  }

  .g2-res__head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
  }

  .g2-res__l {
    flex-wrap: wrap;
    gap: 6px 14px;
  }

  .g2-res__t {
    font-size: 44px;
  }

  .g2-res__n {
    font-size: 16px;
  }

  .g2-res__r,
  .g2-active {
    justify-content: flex-start;
  }

  .g2-active__b {
    height: 38px;
    font-size: 14px;
  }

  .g2-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .g2-card {
    border-radius: 22px;
  }

  .g2-card__ph {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .g2-badges {
    right: 62px;
    flex-wrap: wrap;
  }

  .g2-badge {
    height: 24px;
    padding: 0 9px;
    font-size: 12px;
    letter-spacing: .08em;
  }

  .g2-fav {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .g2-card__b {
    padding: 16px 16px 18px;
  }

  .g2-card__meta {
    font-size: 12px;
    letter-spacing: .1em;
  }

  .g2-card__n {
    min-height: 2.5em;
    font-size: 17px;
  }

  .g2-st {
    font-size: 13px;
  }

  .g2-price__v {
    font-size: 22px;
  }

  .g2-price__was {
    font-size: 13px;
  }

  .g2-add {
    height: 42px;
    padding: 0 16px;
    font-size: 12px;
  }

  .g2-promo {
    grid-column: 1 / -1;
    padding: 32px 28px;
    border-radius: 22px;
  }

  .g2-promo .g2-promo__big {
    right: -20px;
    bottom: -40px;
    font-size: 200px;
  }

  .g2-promo__t {
    font-size: 34px;
  }

  .g2-promo__d {
    font-size: 16px;
  }

  .g2-promo__cta {
    height: 52px;
    padding: 0 22px;
    font-size: 12px;
  }

  .g2-list {
    padding: 4px 18px;
    border-radius: 22px;
  }

  .g2-row {
    padding: 16px 0;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px 16px;
  }

  .g2-row__ph {
    height: 90px;
    grid-row: span 2;
    border-radius: 14px;
    font-size: 12px;
    text-align: center;
  }

  .g2-row__st {
    grid-column: 2;
  }

  .g2-row__buy {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .g2-row__meta {
    font-size: 12px;
    letter-spacing: .08em;
  }

  .g2-row__n {
    font-size: 19px;
  }

  .g2-row__d {
    font-size: 14px;
  }

  .g2-price--row .g2-price__v {
    font-size: 24px;
  }

  .g2-add--row {
    height: 46px;
  }

  .g2-empty {
    padding: 48px 24px;
  }

  .g2-empty__t {
    font-size: 26px;
  }

  .g2-pg {
    margin-top: 32px;
    flex-direction: column;
    gap: 14px;
  }

  .g2-pg__range,
  .g2-pg__per {
    font-size: 14px;
  }

  .g2-pg__prev,
  .g2-pg__next {
    height: 48px;
    padding: 0 16px;
  }

  .g2-pg__n {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .g2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .g2-card__b {
    padding: 12px 12px 14px;
  }

  .g2-card__meta {
    flex-direction: column;
    gap: 2px;
  }

  .g2-card__n {
    font-size: 15px;
  }

  .g2-card__foot {
    flex-wrap: wrap;
  }

  .g2-grid .g2-add {
    width: 100%;
  }

  .g2-card__slot {
    width: 80%;
    font-size: 12px;
    white-space: normal;
    text-align: center;
  }

  .g2-seg--view {
    display: none;
  }

  .g2-row {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .g2-row__ph {
    height: 72px;
  }

  .g2-pg__per {
    display: none;
  }
}

/* == 147. Shop single v1 — hero: gallery and buy column ================= */
:root {
  --pd-night: #0e1013;
  --pd-inv: #fff;
  --pd-ok: #2fa36b;
  --pd-ok14: rgba(47, 163, 107, .14);
  --pd-ok40: rgba(47, 163, 107, .4);
  --pd-ease: cubic-bezier(.2, .7, .2, 1);
  --pd-stripes-night: repeating-linear-gradient(135deg, #1a1d22 0 calc(var(--u) * 14), #14161a calc(var(--u) * 14) calc(var(--u) * 28));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pd-inv: #111418;
  }
}

:root[data-theme="dark"] {
  --pd-inv: #111418;
}

.pd {
  font-weight: 400;
}

/* variant swaps: the root carries data-axle / data-comp */
.pd[data-axle="0"] .pd-ax1,
.pd[data-axle="1"] .pd-ax0,
.pd[data-comp="0"] .pd-c1,
.pd[data-comp="1"] .pd-c0 {
  display: none !important;
}

.pd-sec {
  padding-top: calc(var(--u) * 110);
}

.pd-h__r {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  color: var(--mute);
}

.pd-h__ctl {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 26);
}

.pd-h__link {
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  text-decoration: none;
}

.pd-h__link:hover {
  color: var(--acc);
}

.pd-h__pill {
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 22);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 25);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  cursor: pointer;
}

.pd-hero {
  padding-top: calc(var(--u) * 50);
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 980);
  align-items: start;
  gap: calc(var(--u) * 80);
}

.pd-gal {
  display: grid;
  grid-template-columns: calc(var(--u) * 150) minmax(0, 1fr);
  gap: calc(var(--u) * 16);
}

.pd-thumbs {
  height: calc(var(--u) * 1180);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.pd-thumbs li {
  flex: 1;
  min-height: 0;
}

.pd-th {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: calc(var(--u) * 22);
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--s1) 0 calc(var(--u) * 10), var(--s2) calc(var(--u) * 10) calc(var(--u) * 20));
  color: var(--mute);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
  cursor: pointer;
  transition: border-color .2s;
}

.pd-th.is-on {
  border-color: var(--acc);
}

.pd-th__img,
.pd-frame__img,
.pd-bti__img,
.pd-rc__img,
.pd-wr__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-th__slot {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 10));
}

.pd-th__n {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.32);
}

.pd-main {
  position: relative;
  height: calc(var(--u) * 1180);
  border-radius: calc(var(--u) * 36);
  overflow: hidden;
  background: var(--surf);
  cursor: zoom-in;
}

.pd-main__zoom {
  position: absolute;
  inset: 0;
  transition: transform .3s ease;
}

.pd-main.is-zoom .pd-main__zoom {
  transform: scale(1.9);
}

.pd-frame {
  position: absolute;
  inset: 0;
  display: none;
}

.pd-frame.is-on {
  display: block;
}

.pd-frame__slot {
  position: absolute;
  inset: 0;
  background: var(--stripes);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
}

.pd-frame__l {
  font-family: Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.8);
}

.pd-badges {
  position: absolute;
  left: calc(var(--u) * 30);
  top: calc(var(--u) * 30);
  display: flex;
  gap: calc(var(--u) * 8);
}

.pd-badge {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 19);
  background: #111418;
  color: #fff;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  display: flex;
  align-items: center;
}

.pd-badge--acc {
  background: var(--acc);
}

.pd-fav {
  position: absolute;
  right: calc(var(--u) * 30);
  top: calc(var(--u) * 30);
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 22));
  cursor: pointer;
}

.pd-fav[aria-pressed="true"] {
  color: var(--acc);
}

.pd-hint {
  position: absolute;
  left: calc(var(--u) * 30);
  bottom: calc(var(--u) * 34);
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--surf);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.pd-nav {
  position: absolute;
  right: calc(var(--u) * 30);
  bottom: calc(var(--u) * 30);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.pd-nav__n {
  padding: calc(var(--u) * 8) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.pd-nav__b {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 20));
  cursor: pointer;
}

.pd-nav__b--acc {
  background: var(--acc);
  color: #fff;
}

/* buy column */
.pd-buy {
  position: sticky;
  top: calc(var(--u) * 40);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.pd-meta {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.pd-oem {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  background: var(--acc-a12);
  color: var(--acc);
  display: flex;
  align-items: center;
}

.pd-rate {
  margin-left: auto;
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 17));
  letter-spacing: calc(var(--u) * 0.34);
  text-transform: none;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.pd-rate:hover {
  color: var(--acc);
}

.pd-rate__s {
  color: var(--acc);
  letter-spacing: calc(var(--u) * 3);
}

.pd-title {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.pd-title__h {
  font-size: max(12px, calc(var(--u) * 84));
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
}

.pd-title__p {
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 300;
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

.pd-price {
  padding: calc(var(--u) * 26) 0;
  border-top: .5px solid var(--sg-ln);
  border-bottom: .5px solid var(--sg-ln);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 18);
}

.pd-price__v {
  font-size: max(12px, calc(var(--u) * 76));
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1;
}

.pd-price__u {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--mute);
}

.pd-price__pay {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 17));
  color: var(--body);
}

.pd-price__q {
  color: var(--ink);
}

.pd-fit {
  padding: calc(var(--u) * 22) calc(var(--u) * 24) calc(var(--u) * 22) calc(var(--u) * 22);
  border: 1px solid var(--pd-ok40);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.pd-fit__ic {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pd-ok14);
  color: var(--pd-ok);
  font-size: max(12px, calc(var(--u) * 22));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-fit__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.pd-fit__k {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--pd-ok);
}

.pd-fit__t {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.pd-fit.is-no {
  border-color: var(--acc);
}

.pd-fit.is-no .pd-fit__ic {
  background: var(--acc-a12);
  color: var(--acc);
}

.pd-fit.is-no .pd-fit__k {
  color: var(--acc);
}

.pd-fit__sel {
  max-width: calc(var(--u) * 260);
  height: calc(var(--u) * 52);
  margin-left: auto;
  padding: 0 calc(var(--u) * 18);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  cursor: pointer;
}

.pd-opt {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.pd-opt__k {
  float: left;
  width: 100%;
  padding: 0;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
  display: flex;
  justify-content: space-between;
}

.pd-opt__v {
  color: var(--ink);
}

.pd-opt__grid {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.pd-opt__grid li {
  position: relative;
}

/* real radios; the tile is the label */
.pd-opt__in,
.pd-inst__in,
.pd-bti__in,
.pd-wr__si {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pd-tile {
  height: calc(var(--u) * 96);
  padding: 0 calc(var(--u) * 26);
  border: 1.5px solid var(--sg-ln);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
  cursor: pointer;
  transition: border-color .2s;
}

.pd-opt__in:checked + .pd-tile {
  border-color: var(--acc);
}

.pd-opt__in:focus-visible + .pd-tile,
.pd-inst__in:focus-visible + .pd-inst,
.pd-bti__in:focus-visible + .pd-bti__ck {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.pd-tile__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.pd-tile__t {
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 300;
}

.pd-tile__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.pd-tile__p {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  white-space: nowrap;
}

.pd-qtyrow {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 26);
}

.pd-qty {
  height: calc(var(--u) * 84);
  padding: 0 calc(var(--u) * 10);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 42);
  background: var(--surf);
  display: flex;
  align-items: center;
}

.pd-qty__b {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 24));
  cursor: pointer;
}

.pd-qty__b:hover {
  background: var(--sg-chip);
}

.pd-qty__b:disabled {
  opacity: .35;
  cursor: default;
}

.pd-qty__n {
  min-width: calc(var(--u) * 56);
  text-align: center;
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.pd-stock {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
}

.pd-stock__t {
  font-size: max(12px, calc(var(--u) * 18));
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.pd-stock__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  background: var(--pd-ok);
}

.pd-stock__s {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.pd-ctas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.pd-cta {
  height: calc(var(--u) * 88);
  border: 0;
  border-radius: calc(var(--u) * 44);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.1);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .2s;
}

.pd-cta:hover {
  opacity: .88;
}

.pd-cta--ink {
  background: var(--ink);
  color: var(--pd-inv);
}

.pd-cta--acc {
  background: var(--acc);
  color: #fff;
}

.pd-instw {
  position: relative;
}

.pd-inst {
  padding: calc(var(--u) * 24) calc(var(--u) * 28);
  border: 1.5px solid var(--sg-ln);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  color: var(--ink);
  display: grid;
  grid-template-columns: calc(var(--u) * 36) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 20);
  cursor: pointer;
  transition: border-color .2s;
}

.pd-inst__box {
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
  border: 1.5px solid var(--line2);
  border-radius: calc(var(--u) * 9);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-inst__in:checked + .pd-inst {
  border-color: var(--acc);
}

.pd-inst__in:checked + .pd-inst .pd-inst__box {
  border-color: var(--acc);
  background: var(--acc);
}

.pd-inst__in:checked + .pd-inst .pd-inst__box::before {
  content: "✓";
}

.pd-inst__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.pd-inst__t {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.pd-inst__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.pd-inst__free {
  font-size: max(12px, calc(var(--u) * 18));
  color: var(--pd-ok);
  white-space: nowrap;
}

.pd-perks {
  padding-top: calc(var(--u) * 26);
  border-top: .5px solid var(--sg-ln);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 20);
}

.pd-perk {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.pd-perk .ico {
  flex-shrink: 0;
  color: var(--acc);
}

.pd-perk__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.pd-perk__t {
  font-size: max(12px, calc(var(--u) * 16));
}

.pd-perk__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 148. Shop single v1 — bundle and details bento ===================== */
.pd-bt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 640);
  gap: calc(var(--u) * 16);
}

.pd-bt__items {
  padding: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  align-items: stretch;
  gap: calc(var(--u) * 24);
}

.pd-bt__plus {
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 200;
  color: var(--mute);
  display: flex;
  align-items: center;
}

.pd-bti {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
  transition: opacity .2s;
}

.pd-bti.is-off {
  opacity: .45;
}

.pd-bti__ph {
  position: relative;
  height: calc(var(--u) * 360);
  border-radius: calc(var(--u) * 24);
  overflow: hidden;
  background: var(--stripes);
  display: block;
}

.pd-bti__slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
  white-space: nowrap;
}

.pd-bti__ck {
  position: absolute;
  left: calc(var(--u) * 18);
  top: calc(var(--u) * 18);
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border: 1.5px solid var(--line2);
  border-radius: calc(var(--u) * 11);
  background: var(--surf);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 18));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pd-bti__in:checked + .pd-bti__ck {
  border-color: var(--acc);
  background: var(--acc);
}

.pd-bti__in:checked + .pd-bti__ck::before {
  content: "✓";
}

.pd-bti__tag {
  position: absolute;
  right: calc(var(--u) * 18);
  top: calc(var(--u) * 18);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
}

.pd-bti__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.pd-bti__brand {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
}

.pd-bti__n {
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 300;
  line-height: 1.25;
}

.pd-bti__p {
  margin-top: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

.pd-bt__sum {
  position: relative;
  padding: calc(var(--u) * 56) calc(var(--u) * 56) calc(var(--u) * 50);
  border-radius: calc(var(--u) * 32);
  overflow: hidden;
  background: var(--pd-night);
  color: #f2f3f5;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.pd-bt__sum > * {
  position: relative;
}

.pd-bt__sum .pd-bt__big {
  position: absolute;
  right: calc(var(--u) * -20);
  bottom: calc(var(--u) * -90);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 360));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--acc);
  opacity: .35;
}

.pd-bt__k {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.08);
  color: #7d838d;
}

.pd-bt__v {
  font-size: max(12px, calc(var(--u) * 96));
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
}

.pd-bt__d {
  max-width: calc(var(--u) * 440);
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  line-height: 1.5;
  color: #a3a9b3;
}

.pd-bt__add {
  height: calc(var(--u) * 84);
  margin-top: auto;
  border: 0;
  border-radius: calc(var(--u) * 42);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.1);
  cursor: pointer;
}

.pd-bt__add:disabled {
  opacity: .5;
  cursor: default;
}

/* details: switch */
.pd-sw {
  padding: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
}

.pd-sw__b {
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 26);
  border: 0;
  border-radius: calc(var(--u) * 27);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  cursor: pointer;
  transition: all .25s;
}

.pd-sw__dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--line2);
}

.pd-sw__b.is-on {
  background: var(--ink);
  color: var(--pd-inv);
}

.pd-sw__b.is-on .pd-sw__dot {
  background: var(--acc);
}

.pd-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.pd-tile12 {
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
}

.pd-dh {
  position: relative;
  grid-column: span 8;
  height: calc(var(--u) * 780);
  border-radius: calc(var(--u) * 36);
  overflow: hidden;
  background: var(--pd-night);
  color: #f2f3f5;
}

.pd-dh__slot {
  position: absolute;
  inset: 0;
  background: var(--pd-stripes-night);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  color: #7d838d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-dh__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 16, 19, .94) 0%, rgba(14, 16, 19, .7) 40%, rgba(14, 16, 19, 0) 72%);
}

.pd-dh__c {
  position: absolute;
  inset: 0;
}

.pd-dh__ghost {
  position: absolute;
  right: calc(var(--u) * -30);
  top: calc(var(--u) * -40);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 330));
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--acc);
  opacity: .45;
}

.pd-dh__txt {
  position: absolute;
  left: calc(var(--u) * 64);
  top: calc(var(--u) * 60);
  bottom: calc(var(--u) * 60);
  width: calc(var(--u) * 820);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.pd-dh__eb {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.86);
  color: #a3a9b3;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.pd-dh__rule {
  width: calc(var(--u) * 40);
  height: 1px;
  background: var(--acc);
}

.pd-dh__hl {
  font-size: max(12px, calc(var(--u) * 58));
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1.05;
  text-wrap: balance;
}

.pd-dh__body {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  line-height: 1.6;
  color: #a3a9b3;
  text-wrap: pretty;
}

.pd-dh__tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.pd-dh__tags li {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border: .5px solid rgba(242, 243, 245, .28);
  border-radius: calc(var(--u) * 23);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* fitment tile */
.pd-ft {
  position: relative;
  grid-column: span 4;
  padding: calc(var(--u) * 52) calc(var(--u) * 52) calc(var(--u) * 46);
  border-radius: calc(var(--u) * 36);
  overflow: hidden;
  background: var(--acc);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
  transition: background .35s;
}

.pd-ft.is-no {
  background: #2a2e35;
}

.pd-ft > * {
  position: relative;
}

.pd-ft .pd-ft__big {
  position: absolute;
  right: calc(var(--u) * -10);
  bottom: calc(var(--u) * -60);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 340));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .3);
}

.pd-ft__k {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  opacity: .9;
  display: flex;
  justify-content: space-between;
}

.pd-ft__hl {
  font-size: max(12px, calc(var(--u) * 50));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1.02;
}

.pd-ft__sub {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  line-height: 1.5;
  opacity: .85;
}

.pd-ft__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.pd-ft__chip {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border: .5px solid rgba(255, 255, 255, .5);
  border-radius: calc(var(--u) * 23);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  cursor: pointer;
}

.pd-ft__chip.is-on {
  background: #fff;
  color: var(--acc);
}

.pd-ft.is-no .pd-ft__chip.is-on {
  color: #2a2e35;
}

.pd-ft__vin {
  height: calc(var(--u) * 72);
  margin-top: auto;
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 36);
  background: rgba(255, 255, 255, .16);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.pd-ft__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 16));
  letter-spacing: calc(var(--u) * 1.28);
  text-transform: uppercase;
}

.pd-ft__in::placeholder {
  color: rgba(255, 255, 255, .7);
  text-transform: none;
  letter-spacing: .02em;
}

.pd-ft__vin:focus-within {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .6);
}

.pd-ft__n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  opacity: .75;
}

.pd-ft__go {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 22);
  border: 0;
  border-radius: calc(var(--u) * 28);
  background: #fff;
  color: #111418;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  white-space: nowrap;
  cursor: pointer;
}

/* gauges */
.pd-g {
  grid-column: span 3;
  padding: calc(var(--u) * 42) calc(var(--u) * 44);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.pd-g__k {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
  display: flex;
  justify-content: space-between;
}

.pd-g__vv {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.pd-g__v {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 88));
  line-height: .9;
  letter-spacing: -.02em;
}

.pd-g__u {
  font-size: max(12px, calc(var(--u) * 20));
  color: var(--mute);
}

.pd-g__bar {
  position: relative;
  height: calc(var(--u) * 12);
  margin-top: auto;
  border-radius: calc(var(--u) * 6);
  background: var(--sg-chip);
  display: block;
}

.pd-g__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: calc(var(--u) * 6);
  background: var(--acc);
  transition: width .6s var(--pd-ease);
}

.pd-g__ref {
  position: absolute;
  top: calc(var(--u) * -6);
  bottom: calc(var(--u) * -6);
  width: 2px;
  background: var(--ink);
  opacity: .4;
  transition: left .6s var(--pd-ease);
}

/* fill = this compound, tick = the other one */
.pd-g__fill--0 { width: 75%; }
.pd-g__ref--0 { left: 100%; }
.pd-g__fill--1 { width: 77%; }
.pd-g__ref--1 { left: 87%; }
.pd-g__fill--2 { width: 100%; }
.pd-g__ref--2 { left: 40%; }
.pd[data-comp="1"] .pd-g__fill--0 { width: 100%; }
.pd[data-comp="1"] .pd-g__ref--0 { left: 75%; }
.pd[data-comp="1"] .pd-g__fill--1 { width: 87%; }
.pd[data-comp="1"] .pd-g__ref--1 { left: 77%; }
.pd[data-comp="1"] .pd-g__fill--2 { width: 40%; }
.pd[data-comp="1"] .pd-g__ref--2 { left: 100%; }

.pd-g__lh {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  display: flex;
  justify-content: space-between;
}

/* in the box */
.pd-box {
  grid-column: span 3;
  padding: calc(var(--u) * 42) calc(var(--u) * 44);
  background: var(--pd-night);
  color: #f2f3f5;
}

.pd-box ul {
  margin-top: calc(var(--u) * 6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.pd-box__k {
  padding-bottom: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: #7d838d;
  display: flex;
  justify-content: space-between;
}

.pd-box__row {
  padding: calc(var(--u) * 10) 0;
  border-top: .5px solid rgba(242, 243, 245, .12);
  display: grid;
  grid-template-columns: calc(var(--u) * 64) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.pd-box__th {
  height: calc(var(--u) * 64);
  border-radius: calc(var(--u) * 14);
  background: repeating-linear-gradient(135deg, #1f2228 0 calc(var(--u) * 8), #181a1f calc(var(--u) * 8) calc(var(--u) * 16));
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 9));
  color: #7d838d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-box__t {
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  line-height: 1.3;
}

.pd-box__n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

/* specifications */
.pd-sp {
  grid-column: span 7;
  padding: calc(var(--u) * 46) calc(var(--u) * 56) calc(var(--u) * 34);
  scroll-margin-top: calc(var(--u) * 20);
}

.pd-sp dl {
  margin: 0;
}

.pd-sp__row {
  padding: calc(var(--u) * 17) calc(var(--u) * 20);
  border-top: .5px solid var(--sg-ln);
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 1fr 1fr;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.pd-sp__row:hover {
  background: var(--sg-chip);
}

.pd-sp__row--h {
  padding: 0 calc(var(--u) * 20) calc(var(--u) * 18);
  border-top: 0;
  font-size: max(12px, calc(var(--u) * 13));
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
}

.pd-sp__row--h:hover {
  background: none;
}

.pd-sp dt {
  color: var(--mute);
}

.pd-sp dd {
  margin: 0;
  transition: opacity .25s, color .25s;
}

.pd[data-comp="0"] .pd-sp__t,
.pd[data-comp="1"] .pd-sp__s {
  opacity: .4;
}

.pd-sp__row--h dd {
  color: var(--mute);
}

.pd[data-comp="0"] .pd-sp__row--h .pd-sp__s,
.pd[data-comp="1"] .pd-sp__row--h .pd-sp__t {
  color: var(--acc);
  opacity: 1;
}

.pd-sp__row--h dt {
  color: var(--mute);
}

/* compatible models */
.pd-tl {
  grid-column: span 5;
  padding: calc(var(--u) * 46) calc(var(--u) * 52);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.pd-tl__k {
  padding-bottom: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
  display: flex;
  justify-content: space-between;
}

.pd-tl__years {
  margin-left: calc(var(--u) * 250);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.pd-tl__years span {
  padding-left: calc(var(--u) * 6);
  border-left: .5px solid var(--sg-ln);
}

.pd-tl ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.pd-tl__row {
  min-height: calc(var(--u) * 62);
  margin: 0 calc(var(--u) * -10) 0 calc(var(--u) * -14);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 14);
  display: grid;
  grid-template-columns: calc(var(--u) * 250) minmax(0, 1fr);
  align-items: center;
}

.pd-tl__row.is-me {
  background: var(--acc-a08);
}

.pd-tl__m {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.pd-tl__n {
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.pd-tl__tag {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  color: var(--mute);
}

.pd-tl__me {
  display: none;
  color: var(--acc);
}

.pd-tl__row.is-me .pd-tl__me {
  display: inline;
}

.pd-tl__row.is-me .pd-tl__note {
  display: none;
}

.pd-tl__track {
  position: relative;
  height: calc(var(--u) * 30);
  background-image: linear-gradient(90deg, var(--sg-ln) .5px, transparent .5px);
  background-size: 12.5% 100%;
  display: block;
}

.pd-tl__bar {
  position: absolute;
  top: calc(var(--u) * 6);
  bottom: calc(var(--u) * 6);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 9);
  overflow: hidden;
  background: var(--ink);
  color: var(--pd-inv);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.1);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.pd-tl__row.is-me .pd-tl__bar {
  background: var(--acc);
  color: #fff;
}

/* bars by model years: 2017 = 0 %, one year = 12.5 % */
.pd-tl__bar--0 { left: 0; width: 62.5%; }
.pd-tl__bar--1 { left: 25%; width: 37.5%; }
.pd-tl__bar--2 { left: 37.5%; width: 37.5%; }
.pd-tl__bar--3 { left: 0; width: 62.5%; }
.pd-tl__bar--4 { left: 25%; width: 75%; }

/* ships today · returns · warranty */
.pd-info {
  grid-column: span 4;
  padding: calc(var(--u) * 44) calc(var(--u) * 50);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.pd-info__k {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.pd-info__vv {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.pd-info__v {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 76));
  line-height: 1;
}

.pd-info__u {
  font-size: max(12px, calc(var(--u) * 20));
  color: var(--mute);
}

.pd-info__d {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  line-height: 1.55;
  color: var(--body);
}

.pd-info__em {
  color: var(--ink);
}

.pd-ship__k {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--pd-ok);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.pd-ship__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  background: var(--pd-ok);
  box-shadow: 0 0 0 calc(var(--u) * 6) rgba(47, 163, 107, .15);
  animation: pd-pulse 2s ease-in-out infinite;
}

@keyframes pd-pulse {
  50% { box-shadow: 0 0 0 calc(var(--u) * 10) rgba(47, 163, 107, .05); }
}

.pd-ship__cd {
  letter-spacing: -.01em;
}

.pd-war {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 150);
  align-items: center;
  gap: calc(var(--u) * 24);
}

.pd-war__txt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.pd-war__ring {
  width: calc(var(--u) * 150);
  height: calc(var(--u) * 150);
  border-radius: 50%;
  background: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-war__in {
  width: calc(var(--u) * 126);
  height: calc(var(--u) * 126);
  border-radius: 50%;
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
}

.pd-war__k {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  color: var(--mute);
}

.pd-war__v {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

/* == 149. Shop single v1 — reviews, similar, recent, review dialog ======= */
.pd-rvband {
  position: relative;
  padding: calc(var(--u) * 80) 0 calc(var(--u) * 70);
  border-radius: calc(var(--u) * 44);
  overflow: hidden;
  background: var(--pd-night);
  color: #f2f3f5;
}

.pd-rvband__head {
  padding: 0 calc(var(--u) * 80);
  display: grid;
  grid-template-columns: calc(var(--u) * 600) minmax(0, 1fr);
  align-items: end;
  gap: calc(var(--u) * 80);
}

.pd-rvband__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.pd-rvband__t {
  font-size: max(12px, calc(var(--u) * 68));
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 24);
}

.pd-rvband__n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  font-weight: 400;
  letter-spacing: calc(var(--u) * 1.4);
  color: var(--acc);
}

.pd-rvband__score {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 22);
}

.pd-rvband__big {
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 180));
  line-height: .78;
  color: var(--acc);
}

.pd-rvband__meta {
  font-size: max(12px, calc(var(--u) * 17));
  color: #a3a9b3;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.pd-rvband__stars {
  font-size: max(12px, calc(var(--u) * 22));
  letter-spacing: calc(var(--u) * 4);
  color: var(--acc);
}

.pd-rvband__r {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 20);
}

.pd-rvband__write {
  height: calc(var(--u) * 72);
  margin-right: calc(var(--u) * 20);
  padding: 0 calc(var(--u) * 30);
  border: .5px solid rgba(242, 243, 245, .3);
  border-radius: calc(var(--u) * 36);
  background: transparent;
  color: #f2f3f5;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.pd-rvband__write:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.pd-rvband__num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 15));
  color: #7d838d;
}

.pd-rvband__prog {
  width: calc(var(--u) * 280);
  height: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 2);
  overflow: hidden;
  background: rgba(242, 243, 245, .14);
  display: block;
}

.pd-rvband__progf {
  display: block;
  width: 0;
  height: 100%;
  background: var(--acc);
  transition: width .5s;
}

.pd-rvband__b {
  width: calc(var(--u) * 72);
  height: calc(var(--u) * 72);
  flex-shrink: 0;
  padding: 0;
  border: .5px solid rgba(242, 243, 245, .3);
  border-radius: 50%;
  background: transparent;
  color: #f2f3f5;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 22));
  cursor: pointer;
}

.pd-rvband__b--acc {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.pd-rvband__view {
  position: relative;
  margin-top: calc(var(--u) * 60);
  padding-left: calc(var(--u) * 80);
  overflow: hidden;
}

.pd-rvband__track {
  display: flex;
  gap: calc(var(--u) * 20);
  transition: transform .6s var(--pd-ease);
}

.pd-rv {
  flex: 0 0 calc(var(--u) * 780);
  min-height: calc(var(--u) * 560);
  padding: calc(var(--u) * 54) calc(var(--u) * 56);
  border-radius: calc(var(--u) * 32);
  background: #15171b;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
  transition: background .4s, opacity .4s;
}

.pd-rv.is-on {
  background: #1c1f24;
}

.pd-rv.is-past {
  opacity: .3;
}

.pd-rv__mark {
  height: calc(var(--u) * 50);
  font-family: "BBH Bartle", Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 120));
  line-height: .6;
  color: var(--acc);
}

.pd-rv__q {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.35;
  text-wrap: pretty;
}

.pd-rv__foot {
  margin-top: auto;
  padding-top: calc(var(--u) * 26);
  border-top: .5px solid rgba(242, 243, 245, .14);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.pd-rv__av {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(242, 243, 245, .1);
  font-size: max(12px, calc(var(--u) * 20));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-rv__av {
  overflow: hidden;
}

.pd-rv__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-rv__who {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.pd-rv__n {
  font-size: max(12px, calc(var(--u) * 19));
}

.pd-rv__car {
  font-size: max(12px, calc(var(--u) * 15));
  color: #7d838d;
}

.pd-rv__stars {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 18));
  letter-spacing: calc(var(--u) * 3);
  color: var(--acc);
}

.pd-photos {
  margin-top: calc(var(--u) * 16);
  display: grid;
  grid-template-columns: calc(var(--u) * 420) minmax(0, 1fr);
  gap: calc(var(--u) * 12);
}

.pd-photos__card {
  padding: calc(var(--u) * 34) calc(var(--u) * 36);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.pd-photos__t {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.pd-photos__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.pd-photos__b {
  height: calc(var(--u) * 52);
  margin-top: auto;
  align-self: flex-start;
  padding: 0 calc(var(--u) * 22);
  border: 0;
  border-radius: calc(var(--u) * 26);
  background: var(--ink);
  color: var(--pd-inv);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  cursor: pointer;
}

.pd-photos__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.pd-ph {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(var(--u) * 24);
  background: repeating-linear-gradient(135deg, var(--s1) 0 calc(var(--u) * 12), var(--s2) calc(var(--u) * 12) calc(var(--u) * 24));
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 11));
  color: var(--mute);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-ph {
  overflow: hidden;
}

.pd-ph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-ph__n {
  position: absolute;
  left: calc(var(--u) * 12);
  bottom: calc(var(--u) * 12);
  padding: calc(var(--u) * 5) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 12);
  background: var(--surf);
  font-family: Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--ink);
}

/* you may also like */
.pd-sim {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

/* recently viewed */
.pd-recent {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.pd-rc {
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.pd-rc:hover {
  color: var(--acc);
}

.pd-rc__th {
  position: relative;
  width: calc(var(--u) * 110);
  height: calc(var(--u) * 110);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 16);
  overflow: hidden;
  background: var(--stripes);
}

.pd-rc__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.pd-rc__n {
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  line-height: 1.3;
}

.pd-rc__p {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  color: var(--ink);
}

.pd-recent__empty {
  padding: calc(var(--u) * 40) 0;
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  color: var(--mute);
}

.shp-totals .shp-totals__inst {
  color: var(--pd-ok);
}

/* write-a-review dialog */
.pd-wr {
  width: calc(var(--u) * 980);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  padding: calc(var(--u) * 56) calc(var(--u) * 60);
  border: 0;
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  color: var(--ink);
  box-shadow: 0 calc(var(--u) * 40) calc(var(--u) * 100) rgba(8, 9, 11, .35);
  overflow-y: auto;
}

.pd-wr::backdrop {
  background: rgba(8, 9, 11, .55);
}

.pd-wr__x {
  position: absolute;
  right: calc(var(--u) * 30);
  top: calc(var(--u) * 30);
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  padding: 0;
  border: .5px solid var(--line2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pd-wr__form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 28);
}

.pd-wr__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
}

.pd-wr__th {
  position: relative;
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 96);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 20);
  overflow: hidden;
  background: var(--stripes);
}

.pd-wr__ht {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.pd-wr__k,
.pd-wr__lab {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.pd-wr__t {
  font-size: max(12px, calc(var(--u) * 48));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}

.pd-wr__rate {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 12) calc(var(--u) * 6);
}

.pd-wr__rate legend {
  width: 100%;
  margin-bottom: calc(var(--u) * 12);
  padding: 0;
}

.pd-wr__stars {
  display: flex;
  gap: calc(var(--u) * 6);
}

.pd-wr__s {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  color: var(--line2);
  font-size: max(12px, calc(var(--u) * 44));
  line-height: calc(var(--u) * 60);
  text-align: center;
  cursor: pointer;
  transition: color .15s;
}

.pd-wr__s.is-lit {
  color: var(--acc);
}

.pd-wr__si:focus-visible + .pd-wr__s {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: calc(var(--u) * 8);
}

.pd-wr__ratet {
  margin-left: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  color: var(--body);
}

.pd-wr__f {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.pd-wr__lab--row {
  display: flex;
  justify-content: space-between;
}

.pd-wr__in {
  height: calc(var(--u) * 72);
  padding: 0 calc(var(--u) * 26);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 20);
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
}

.pd-wr__in:focus {
  border-color: var(--acc);
}

select.pd-wr__in {
  padding: 0 calc(var(--u) * 22);
  background: var(--surf);
  font-size: max(12px, calc(var(--u) * 17));
  cursor: pointer;
}

.pd-wr__ta {
  height: auto;
  padding: calc(var(--u) * 22) calc(var(--u) * 26);
  resize: none;
  line-height: 1.55;
}

.pd-wr__two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.pd-wr__foot {
  padding-top: calc(var(--u) * 8);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
}

.pd-wr__msg {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.pd-wr__msg.is-err {
  color: var(--acc);
}

.pd-wr__cancel,
.pd-wr__pub,
.pd-wr__back {
  height: calc(var(--u) * 76);
  padding: 0 calc(var(--u) * 32);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 38);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  cursor: pointer;
}

.pd-wr__pub {
  padding: 0 calc(var(--u) * 36);
  border: 0;
  background: var(--acc);
  color: #fff;
}

.pd-wr__pub.is-dim {
  opacity: .55;
}

.pd-wr__done {
  padding: calc(var(--u) * 40) 0 calc(var(--u) * 20);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 22);
}

.pd-wr__ok {
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 96);
  border-radius: 50%;
  background: var(--pd-ok);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 40));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-wr__dt {
  font-size: max(12px, calc(var(--u) * 56));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}

.pd-wr__dd {
  max-width: calc(var(--u) * 620);
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
  line-height: 1.55;
  color: var(--body);
}

.pd-wr__back {
  margin-top: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 40);
  border: 0;
  background: var(--ink);
  color: var(--pd-inv);
}

/* == 150. Shop single v1 — smaller screens ============================== */
@media (max-width: 1199px) {
  .pd-sec {
    padding-top: 64px;
  }

  .pd-hero {
    padding-top: 24px;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .pd-gal {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .pd-thumbs {
    order: 2;
    height: auto;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pd-thumbs li {
    flex: 0 0 72px;
  }

  .pd-th {
    height: 90px;
    border-radius: 14px;
  }

  .pd-th__slot {
    font-size: 12px;
  }

  .pd-th__n {
    display: none;
  }

  .pd-main {
    height: auto;
    aspect-ratio: 1214 / 1180;
    border-radius: 24px;
  }

  .pd-main.is-zoom .pd-main__zoom {
    transform: none;
  }

  .pd-frame__slot {
    font-size: 12px;
  }

  .pd-frame__l {
    font-size: 12px;
  }

  .pd-badges {
    left: 16px;
    top: 16px;
  }

  .pd-badge {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    letter-spacing: .1em;
  }

  .pd-fav {
    right: 16px;
    top: 16px;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .pd-hint {
    display: none;
  }

  .pd-nav {
    right: 16px;
    bottom: 16px;
    gap: 10px;
  }

  .pd-nav__n {
    font-size: 13px;
  }

  .pd-nav__b {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }

  .pd-buy {
    position: static;
    gap: 22px;
  }

  .pd-meta {
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 12px;
  }

  .pd-oem {
    height: 28px;
  }

  .pd-rate {
    font-size: 15px;
  }

  .pd-title__h {
    font-size: 44px;
  }

  .pd-title__p {
    font-size: 17px;
  }

  .pd-price {
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 18px 0;
  }

  .pd-price__v {
    font-size: 48px;
  }

  .pd-price__u {
    font-size: 14px;
  }

  .pd-price__pay {
    width: 100%;
    margin-left: 0;
    font-size: 15px;
  }

  .pd-fit {
    flex-wrap: wrap;
    padding: 16px;
    border-radius: 20px;
    gap: 12px 14px;
  }

  .pd-fit__ic {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .pd-fit__k {
    font-size: 12px;
  }

  .pd-fit__t {
    font-size: 16px;
  }

  .pd-fit__sel {
    width: 100%;
    max-width: none;
    height: 46px;
    margin-left: 0;
    font-size: 15px;
  }

  .pd-opt__k {
    font-size: 12px;
  }

  .pd-opt__grid {
    gap: 8px;
  }

  .pd-tile {
    height: auto;
    min-height: 76px;
    padding: 12px 14px;
    border-radius: 18px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
  }

  .pd-tile__t {
    font-size: 17px;
  }

  .pd-tile__d {
    font-size: 13px;
  }

  .pd-tile__p {
    font-size: 15px;
  }

  .pd-qtyrow {
    flex-wrap: wrap;
    gap: 14px 18px;
  }

  .pd-qty {
    height: 60px;
    padding: 0 6px;
  }

  .pd-qty__b {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .pd-qty__n {
    min-width: 40px;
    font-size: 20px;
  }

  .pd-stock__t {
    font-size: 16px;
  }

  .pd-stock__s {
    font-size: 14px;
  }

  .pd-ctas {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .pd-cta {
    height: 60px;
    font-size: 13px;
  }

  .pd-inst {
    padding: 16px;
    border-radius: 20px;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .pd-inst__box {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .pd-inst__t {
    font-size: 17px;
  }

  .pd-inst__d,
  .pd-inst__free {
    font-size: 14px;
  }

  .pd-perks {
    padding-top: 18px;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .pd-perk .ico {
    width: 22px;
    height: 22px;
  }

  .pd-perk__t {
    font-size: 15px;
  }

  .pd-perk__d {
    font-size: 13px;
  }

  .pd-sec .shp-h {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
  }

  .pd-h__r,
  .pd-h__link {
    font-size: 13px;
  }

  .pd-h__ctl {
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .pd-h__pill {
    height: 40px;
    font-size: 12px;
  }

  .pd-bt {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .pd-bt__items {
    padding: 16px;
    border-radius: 22px;
    flex-direction: column;
    gap: 10px;
  }

  .pd-bt__plus {
    justify-content: center;
    font-size: 26px;
  }

  .pd-bti {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }

  .pd-bti__ph {
    height: 90px;
    border-radius: 14px;
  }

  .pd-bti__slot {
    font-size: 12px;
    white-space: normal;
    width: 90%;
    text-align: center;
  }

  .pd-bti__ck {
    left: 8px;
    top: 8px;
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .pd-bti__tag {
    display: none;
  }

  .pd-bti__brand {
    font-size: 12px;
  }

  .pd-bti__n {
    font-size: 16px;
  }

  .pd-bti__p {
    font-size: 19px;
  }

  .pd-bt__sum {
    padding: 28px 24px;
    border-radius: 22px;
    gap: 12px;
  }

  .pd-bt__sum .pd-bt__big {
    font-size: 200px;
    bottom: -50px;
  }

  .pd-bt__k {
    font-size: 12px;
  }

  .pd-bt__v {
    font-size: 52px;
  }

  .pd-bt__d {
    font-size: 15px;
  }

  .pd-bt__add {
    height: 58px;
    margin-top: 8px;
    font-size: 13px;
  }

  .pd-sw__b {
    height: 42px;
    padding: 0 18px;
    font-size: 14px;
  }

  .pd-bento {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .pd-bento > li {
    grid-column: auto;
    border-radius: 22px;
  }

  .pd-dh {
    height: auto;
    min-height: 520px;
  }

  .pd-dh__c {
    position: relative;
    min-height: 520px;
  }

  .pd-dh__shade {
    background: linear-gradient(180deg, rgba(14, 16, 19, .55) 0%, rgba(14, 16, 19, .92) 60%);
  }

  .pd-dh__ghost {
    font-size: 140px;
    top: -10px;
  }

  .pd-dh__txt {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    min-height: 520px;
    padding: 32px 24px 28px;
    gap: 16px;
  }

  .pd-dh__eb {
    font-size: 12px;
  }

  .pd-dh__hl {
    font-size: 32px;
  }

  .pd-dh__body {
    font-size: 16px;
  }

  .pd-dh__tags li {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }

  .pd-ft {
    padding: 28px 24px;
    gap: 14px;
  }

  .pd-ft .pd-ft__big {
    font-size: 200px;
    bottom: -30px;
  }

  .pd-ft__k {
    font-size: 12px;
  }

  .pd-ft__hl {
    font-size: 34px;
  }

  .pd-ft__sub {
    font-size: 15px;
  }

  .pd-ft__chip {
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }

  .pd-ft__vin {
    height: 58px;
    padding: 0 6px 0 16px;
    margin-top: 6px;
  }

  .pd-ft__in {
    font-size: 15px;
  }

  .pd-ft__n {
    font-size: 12px;
  }

  .pd-ft__go {
    height: 46px;
    padding: 0 16px;
    font-size: 12px;
  }

  .pd-g,
  .pd-box,
  .pd-sp,
  .pd-tl,
  .pd-info {
    padding: 26px 22px;
    gap: 12px;
  }

  .pd-g__k,
  .pd-box__k,
  .pd-tl__k,
  .pd-info__k,
  .pd-ship__k {
    font-size: 12px;
  }

  .pd-g__v {
    font-size: 54px;
  }

  .pd-g__u {
    font-size: 16px;
  }

  .pd-g__lh {
    font-size: 13px;
  }

  .pd-box__th {
    height: 48px;
    font-size: 12px;
  }

  .pd-box__row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .pd-box__t {
    font-size: 15px;
  }

  .pd-sp__row {
    padding: 12px 6px;
    font-size: 15px;
    gap: 10px;
  }

  .pd-sp__row--h {
    padding: 0 6px 12px;
    font-size: 12px;
    letter-spacing: .1em;
  }

  .pd-tl__years {
    margin-left: 110px;
    font-size: 12px;
  }

  .pd-tl__years span {
    padding-left: 2px;
    overflow: hidden;
  }

  .pd-tl__row {
    grid-template-columns: 110px minmax(0, 1fr);
    margin: 0 -6px;
    padding: 6px;
  }

  .pd-tl__n {
    font-size: 15px;
  }

  .pd-tl__tag {
    font-size: 12px;
    letter-spacing: .06em;
  }

  .pd-tl__bar {
    padding: 0 6px;
    font-size: 12px;
    letter-spacing: 0;
  }

  .pd-info__v {
    font-size: 48px;
  }

  /* the Bartle countdown is wide: it scales with the screen */
  .pd-ship__cd {
    font-size: min(48px, 9vw);
  }

  .pd-info__u {
    font-size: 16px;
  }

  .pd-info__d {
    font-size: 15px;
  }

  .pd-war {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .pd-war__ring {
    width: 96px;
    height: 96px;
  }

  .pd-war__in {
    width: 80px;
    height: 80px;
  }

  .pd-war__k {
    font-size: 12px;
  }

  .pd-war__v {
    font-size: 18px;
  }

  .pd-rvband {
    padding: 32px 0 28px;
    border-radius: 24px;
  }

  .pd-rvband__head {
    padding: 0 22px;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .pd-rvband__t {
    font-size: 40px;
    gap: 14px;
  }

  .pd-rvband__big {
    font-size: 96px;
  }

  .pd-rvband__meta {
    font-size: 14px;
    white-space: normal;
  }

  .pd-rvband__r {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
  }

  .pd-rvband__write {
    width: 100%;
    height: 52px;
    margin-right: 0;
    font-size: 12px;
  }

  .pd-rvband__num {
    font-size: 13px;
  }

  .pd-rvband__prog {
    flex: 1;
    width: auto;
  }

  .pd-rvband__b {
    width: 48px;
    height: 48px;
    font-size: 17px;
  }

  .pd-rvband__view {
    margin-top: 26px;
    padding-left: 22px;
  }

  .pd-rvband__track {
    gap: 12px;
  }

  .pd-rv {
    flex-basis: min(82vw, 420px);
    min-height: 0;
    padding: 26px 22px;
    border-radius: 20px;
    gap: 16px;
  }

  .pd-rv__mark {
    height: 30px;
    font-size: 72px;
  }

  .pd-rv__q {
    font-size: 19px;
  }

  .pd-rv__foot {
    flex-wrap: wrap;
    padding-top: 16px;
    gap: 12px;
  }

  .pd-rv__av {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }

  .pd-rv__n {
    font-size: 16px;
  }

  .pd-rv__car {
    font-size: 13px;
  }

  .pd-rv__stars {
    font-size: 15px;
  }

  .pd-photos {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-photos__card {
    padding: 22px;
    border-radius: 20px;
  }

  .pd-photos__t {
    font-size: 22px;
  }

  .pd-photos__d {
    font-size: 14px;
  }

  .pd-photos__b {
    height: 44px;
    margin-top: 8px;
    font-size: 12px;
  }

  .pd-photos__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .pd-ph {
    border-radius: 14px;
    font-size: 12px;
  }

  .pd-ph__n {
    left: 8px;
    bottom: 6px;
    font-size: 12px;
  }

  .pd-sim {
    margin: 0 calc(var(--gut) * -1);
    padding: 0 var(--gut) 8px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 300px);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gut);
    scrollbar-width: none;
  }

  .pd-sim > li {
    scroll-snap-align: start;
  }

  .pd-recent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .pd-rc {
    padding: 10px;
    border-radius: 18px;
    gap: 12px;
  }

  .pd-rc__th {
    width: 64px;
    height: 64px;
    border-radius: 12px;
  }

  .pd-rc__n {
    font-size: 14px;
  }

  .pd-rc__p {
    font-size: 16px;
  }

  .pd-recent__empty {
    font-size: 16px;
  }

  .pd-wr {
    padding: 28px 22px;
    border-radius: 24px;
  }

  .pd-wr__x {
    right: 16px;
    top: 16px;
    width: 40px;
    height: 40px;
  }

  .pd-wr__form {
    gap: 18px;
  }

  .pd-wr__th {
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }

  .pd-wr__t {
    font-size: 26px;
  }

  .pd-wr__k,
  .pd-wr__lab {
    font-size: 12px;
  }

  .pd-wr__s {
    width: 44px;
    height: 44px;
    font-size: 32px;
    line-height: 44px;
  }

  .pd-wr__ratet {
    margin-left: 6px;
    font-size: 15px;
  }

  .pd-wr__in {
    height: 52px;
    padding: 0 16px;
    font-size: 16px;
  }

  .pd-wr__ta {
    height: auto;
    padding: 14px 16px;
  }

  .pd-wr__two {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-wr__foot {
    flex-wrap: wrap;
    gap: 10px;
  }

  .pd-wr__msg {
    flex-basis: 100%;
    font-size: 14px;
  }

  .pd-wr__cancel,
  .pd-wr__pub,
  .pd-wr__back {
    height: 52px;
    padding: 0 20px;
    font-size: 12px;
  }

  .pd-wr__ok {
    width: 64px;
    height: 64px;
    font-size: 28px;
  }

  .pd-wr__dt {
    font-size: 32px;
  }

  .pd-wr__dd {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pd-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pd-dh,
  .pd-sp,
  .pd-tl {
    grid-column: 1 / -1 !important;
  }

  .pd-recent {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pd-photos__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* == 151. Shop single v2 — showroom hero ================================ */
:root {
  --p2-P: #fff;
  --p2-K: #f5f6f8;
  --p2-C: #f2f3f5;
  --p2-I: #f2f3f5;
  --p2-L: rgba(17, 20, 24, .1);
  --p2-L2: rgba(17, 20, 24, .2);
  --p2-sh: 0 calc(var(--u) * 40) calc(var(--u) * 100) rgba(17, 20, 24, .08);
  --p2-warn: #e0a03a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p2-P: #0e1013;
    --p2-K: #15171b;
    --p2-C: rgba(242, 243, 245, .06);
    --p2-I: #14161a;
    --p2-L: rgba(242, 243, 245, .12);
    --p2-L2: rgba(242, 243, 245, .22);
    --p2-sh: none;
  }
}

:root[data-theme="dark"] {
  --p2-P: #0e1013;
  --p2-K: #15171b;
  --p2-C: rgba(242, 243, 245, .06);
  --p2-I: #14161a;
  --p2-L: rgba(242, 243, 245, .12);
  --p2-L2: rgba(242, 243, 245, .22);
  --p2-sh: none;
}

.p2-ok {
  color: var(--pd-ok);
}

.p2-n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 1.4);
  color: var(--acc);
  margin-right: calc(var(--u) * 24);
  vertical-align: .9em;
}

.p2-k {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
  text-align: left;
}

.p2-heroWrap {
  padding-top: calc(var(--u) * 50);
}

.p2-hero {
  min-height: calc(var(--u) * 1220);
  padding: calc(var(--u) * 20);
  border-radius: calc(var(--u) * 44);
  background: var(--p2-P);
  color: var(--ink);
  box-shadow: var(--p2-sh);
  display: grid;
  grid-template-columns: calc(var(--u) * 124) minmax(0, 1fr) calc(var(--u) * 940);
  gap: calc(var(--u) * 16);
}

/* thumb rail */
.p2-rail {
  margin: 0;
  padding: calc(var(--u) * 20) 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.p2-rail > li {
  flex: 1;
  display: flex;
}

.p2-th {
  position: relative;
  flex: 1;
  min-height: calc(var(--u) * 80);
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: calc(var(--u) * 22);
  background: var(--p2-I);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s;
}

.p2-th__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p2-th__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: calc(var(--u) * 4);
  width: 0;
  background: var(--acc);
  transition: width .4s;
}

.p2[data-mode="photos"] .p2-th.is-on {
  border-color: var(--acc);
}

.p2[data-mode="photos"] .p2-th.is-on .p2-th__bar {
  width: 100%;
}

/* stage */
.p2-stage {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--u) * 34);
  background: var(--p2-I);
}

.p2-stage__photos,
.p2-stage__spin,
.p2-stage__video {
  position: absolute;
  inset: 0;
}

.p2[data-mode="photos"] .p2-stage__spin,
.p2[data-mode="photos"] .p2-stage__video,
.p2[data-mode="photos"] .p2-spin,
.p2[data-mode="spin"] .p2-stage__photos,
.p2[data-mode="spin"] .p2-stage__video,
.p2[data-mode="spin"] .p2-nav,
.p2[data-mode="video"] .p2-stage__photos,
.p2[data-mode="video"] .p2-stage__spin,
.p2[data-mode="video"] .p2-spin,
.p2[data-mode="video"] .p2-nav {
  display: none;
}

.p2-frame {
  position: absolute;
  inset: 0;
  display: none;
}

.p2-frame.is-on {
  display: block;
}

.p2-frame__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p2-stage__slot {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, var(--s1) 0 calc(var(--u) * 14), var(--s2) calc(var(--u) * 14) calc(var(--u) * 28));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.p2-stage__l {
  font-family: Geist, Helvetica, Arial, sans-serif;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 3.3);
  color: var(--body);
}

.p2-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 110);
  height: calc(var(--u) * 110);
  padding-left: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 34));
  transform: translate(-50%, -50%) translateY(calc(var(--u) * -90));
  box-shadow: 0 0 0 calc(var(--u) * 18) var(--acc-a18);
}

.p2-ghost {
  position: absolute;
  left: calc(var(--u) * 44);
  bottom: calc(var(--u) * 6);
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 190));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--acc-a40);
  white-space: nowrap;
  pointer-events: none;
}

.p2-mode {
  position: absolute;
  left: calc(var(--u) * 30);
  top: calc(var(--u) * 30);
  margin: 0;
  padding: calc(var(--u) * 5);
  border: 0;
  border-radius: calc(var(--u) * 30);
  background: var(--p2-P);
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(8, 9, 11, .12);
}

.p2-mode__ul,
.p2-comp__ul,
.p2-ax__ul,
.p2-cars,
.p2-slots__ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.p2-mode__in,
.p2-comp__in,
.p2-ax__in,
.p2-slot__in,
.p2-ki__in {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.p2-mode__b {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 23);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.p2-mode__in:checked + .p2-mode__b {
  background: var(--acc);
  color: #fff;
}

.p2-mode__in:focus-visible + .p2-mode__b,
.p2-ax__in:focus-visible + .p2-ax__b,
.p2-slot__in:focus-visible + .p2-slot__b,
.p2-ki__in:focus-visible + .p2-ki__lab {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.p2-tr {
  position: absolute;
  right: calc(var(--u) * 30);
  top: calc(var(--u) * 30);
  margin: 0;
  display: flex;
  gap: calc(var(--u) * 8);
}

.p2-oem {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 23);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
}

.p2-fav {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--p2-P);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 18));
  cursor: pointer;
}

.p2-fav[aria-pressed="true"] {
  color: var(--acc);
}

.p2-nav {
  position: absolute;
  right: calc(var(--u) * 30);
  bottom: calc(var(--u) * 30);
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.p2-nav__n {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 28);
  background: var(--p2-P);
  display: flex;
  align-items: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 15));
}

.p2-nav__b {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--p2-P);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 20));
  cursor: pointer;
}

.p2-nav__b--acc {
  background: var(--acc);
  color: #fff;
}

.p2-spin {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 40);
  width: calc(var(--u) * 640);
  max-width: calc(100% - 40px);
  margin: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.p2-spin__v {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--p2-P);
  display: flex;
  align-items: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
}

.p2-spin__in {
  width: 100%;
  accent-color: var(--acc);
  cursor: ew-resize;
}

/* buy column */
.p2-buy {
  min-width: 0;
  padding: calc(var(--u) * 46) calc(var(--u) * 48) calc(var(--u) * 40);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 28);
}

.p2-meta {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
  white-space: nowrap;
}

.p2-rate {
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 16));
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
}

.p2-rate .acc {
  letter-spacing: calc(var(--u) * 3);
}

.p2-title {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 80));
  font-weight: 300;
  letter-spacing: -.06em;
  line-height: .98;
}

.p2-price {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--u) * 14) calc(var(--u) * 18);
}

.p2-price__v {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 128));
  line-height: .8;
  color: var(--acc);
  white-space: nowrap;
}

.p2-price__s {
  padding-bottom: calc(var(--u) * 4);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.p2-price__q {
  color: var(--ink);
}

.p2-cmp {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.p2-comp {
  position: relative;
  margin: 0;
  padding: calc(var(--u) * 6);
  border: 0;
  border-radius: calc(var(--u) * 42);
  background: var(--p2-C);
}

.p2-comp__ind {
  position: absolute;
  top: calc(var(--u) * 6);
  bottom: calc(var(--u) * 6);
  left: calc(var(--u) * 6);
  width: calc(50% - calc(var(--u) * 6));
  border-radius: calc(var(--u) * 36);
  background: var(--acc);
  transition: left .35s var(--pd-ease);
}

.p2[data-comp="1"] .p2-comp__ind {
  left: 50%;
}

.p2-comp__ul > li {
  flex: 1;
}

.p2-comp__b {
  position: relative;
  height: calc(var(--u) * 76);
  border-radius: calc(var(--u) * 36);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  cursor: pointer;
  transition: color .25s;
}

.p2-comp__in:checked + .p2-comp__b {
  color: #fff;
}

.p2-comp__in:focus-visible + .p2-comp__b {
  outline: 2px solid currentColor;
  outline-offset: calc(var(--u) * -8);
}

.p2-comp__t {
  font-size: max(12px, calc(var(--u) * 20));
}

.p2-comp__d {
  font-size: max(12px, calc(var(--u) * 13));
  opacity: .75;
}

.p2-gauges {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.p2-g {
  padding: calc(var(--u) * 18) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 22);
  background: var(--p2-C);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.p2-g__k {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
  white-space: nowrap;
}

.p2-g__v {
  color: var(--ink);
}

.p2-g__segs {
  display: flex;
  gap: calc(var(--u) * 4);
}

.p2-g__s {
  flex: 1;
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--p2-L);
}

.p2-g__segs--a .is-on {
  background: var(--acc);
}

.p2-g__segs--g .is-on {
  background: var(--pd-ok);
}

.p2-g__segs--w .is-on {
  background: var(--p2-warn);
}

.p2-ax__ul {
  gap: calc(var(--u) * 10);
}

.p2-ax__ul > li {
  flex: 1;
}

.p2-ax__b {
  height: calc(var(--u) * 68);
  border: 1.5px solid var(--p2-L2);
  border-radius: calc(var(--u) * 34);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .28em;
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s;
}

.p2-ax__in:checked + .p2-ax__b {
  border-color: var(--acc);
}

.p2-fit {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.p2-fit__line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 16));
}

.p2-fit__ic {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border-radius: 50%;
  background: var(--pd-ok);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 13));
}

.p2-fit.is-no .p2-fit__ic {
  background: var(--acc);
}

.p2-cars {
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.p2-car,
.p2-bf__chip {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border: .5px solid var(--p2-L2);
  border-radius: calc(var(--u) * 23);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  cursor: pointer;
}

.p2-car.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--p2-P);
}

.p2-inst {
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border: .5px solid var(--p2-L2);
  border-radius: calc(var(--u) * 26);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.p2-inst__row {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.p2-inst__lab {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
  cursor: pointer;
}

.p2-inst__t {
  font-size: max(12px, calc(var(--u) * 19));
}

.p2-inst__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.p2-sw {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 62);
  height: calc(var(--u) * 36);
  margin: 0;
  border-radius: calc(var(--u) * 18);
  background: var(--p2-L2);
  appearance: none;
  cursor: pointer;
  transition: background .2s;
}

.p2-sw::after {
  content: "";
  position: absolute;
  top: calc(var(--u) * 4);
  left: calc(var(--u) * 4);
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, .2);
  transition: left .25s var(--pd-ease);
}

.p2-sw:checked {
  background: var(--acc);
}

.p2-sw:checked::after {
  left: calc(var(--u) * 30);
}

.p2-sw:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.p2.is-noinst .p2-slots {
  display: none;
}

.p2-ax,
.p2-slots {
  margin: 0;
  padding: 0;
  border: 0;
}

.p2-slots__ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.p2-slot__b {
  height: calc(var(--u) * 64);
  border: 1.5px solid transparent;
  border-radius: calc(var(--u) * 18);
  background: var(--p2-C);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  cursor: pointer;
}

.p2-slot__in:checked + .p2-slot__b {
  border-color: var(--acc);
  background: var(--acc-a08);
}

.p2-slot__d {
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.p2-slot__t {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--body);
}

.p2-ctas {
  margin: auto 0 0;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: calc(var(--u) * 10);
}

.p2-qty {
  height: calc(var(--u) * 88);
  padding: 0 calc(var(--u) * 8);
  border: .5px solid var(--p2-L2);
  border-radius: calc(var(--u) * 44);
  display: flex;
  align-items: center;
}

.p2-qty__b {
  width: calc(var(--u) * 62);
  height: calc(var(--u) * 62);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 22));
  cursor: pointer;
}

.p2-qty__b:disabled {
  opacity: .35;
  cursor: default;
}

.p2-qty__n {
  min-width: calc(var(--u) * 40);
  text-align: center;
  font-size: max(12px, calc(var(--u) * 22));
}

.p2-add,
.p2-buyb,
.p2-ks__add {
  height: calc(var(--u) * 88);
  padding: 0 calc(var(--u) * 20);
  border: 0;
  border-radius: calc(var(--u) * 44);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s, color .3s;
}

.p2-add {
  background: var(--ink);
  color: var(--p2-P);
}

.p2-add.is-done,
.p2-ks__add.is-done {
  background: var(--pd-ok);
  color: #fff;
}

.p2-buyb {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) var(--acc-a30);
}

.p2-foot {
  margin: 0;
  padding-top: calc(var(--u) * 20);
  border-top: .5px solid var(--p2-L);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
  white-space: nowrap;
}

.p2-foot__l {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.p2-dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--pd-ok);
  box-shadow: 0 0 0 calc(var(--u) * 5) var(--sg-ok16, rgba(47, 163, 107, .16));
}

/* == 152. Shop single v2 — make it a kit ================================ */
.p2-kitWrap {
  padding-top: calc(var(--u) * 110);
}

.p2-kit {
  padding: calc(var(--u) * 64);
  border-radius: calc(var(--u) * 44);
  background: var(--p2-P);
  box-shadow: var(--p2-sh);
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 660);
  gap: calc(var(--u) * 64);
}

.p2-kit__l {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 36);
}

.p2-kit__h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 30);
}

.p2-kit__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 72));
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
}

.p2-kit__t .p2-n,
.p2-ym__t .p2-n {
  letter-spacing: .1em;
}

.p2-kit__r {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  color: var(--body);
}

.p2-pres,
.p2-kis {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(var(--u) * 14);
}

.p2-pres {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.p2-kis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.p2-pres > li,
.p2-kis > li {
  display: flex;
}

.p2-pre {
  position: relative;
  flex: 1;
  padding: calc(var(--u) * 30) calc(var(--u) * 32);
  border: 1.5px solid var(--p2-L);
  border-radius: calc(var(--u) * 30);
  background: var(--p2-K);
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
  cursor: pointer;
  transition: border-color .25s, background .25s;
}

.p2-pre[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc-a07);
}

.p2-pre__pop {
  position: absolute;
  right: calc(var(--u) * 24);
  top: calc(var(--u) * -15);
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 15);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
}

.p2-pre__top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.p2-pre__dot {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border-radius: 50%;
  background: var(--p2-L2);
  transition: background .25s;
}

.p2-pre[aria-pressed="true"] .p2-pre__dot {
  background: var(--acc);
}

.p2-pre__t {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  letter-spacing: -.02em;
}

.p2-pre__n {
  margin-left: auto;
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 40));
  line-height: 1;
  color: var(--mute);
}

.p2-pre__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.p2-pre__foot {
  padding-top: calc(var(--u) * 16);
  border-top: .5px solid var(--p2-L);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
}

.p2-pre__p {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
}

.p2-pre__save {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.p2-ki {
  flex: 1;
  display: flex;
}

.p2-ki__lab {
  flex: 1;
  padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 24);
  border: 1.5px solid transparent;
  border-radius: calc(var(--u) * 28);
  background: var(--p2-K);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
  opacity: .55;
  cursor: pointer;
  transition: border-color .25s, opacity .25s;
}

.p2-ki.is-on .p2-ki__lab {
  border-color: var(--acc);
  opacity: 1;
}

.p2-ki__in:disabled + .p2-ki__lab {
  cursor: default;
}

.p2-ki__ph {
  position: relative;
  height: calc(var(--u) * 280);
  border-radius: calc(var(--u) * 20);
  overflow: hidden;
  background: var(--p2-C);
}

.p2-ki__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p2-ki__ck {
  position: absolute;
  left: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  border: 1.5px solid var(--p2-L2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
  transition: background .2s, border-color .2s;
}

.p2-ki.is-on .p2-ki__ck {
  border-color: var(--acc);
  background: var(--acc);
}

.p2-ki.is-on .p2-ki__ck::before {
  content: "✓";
}

.p2-ki__tag {
  position: absolute;
  right: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--p2-P);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--body);
  white-space: nowrap;
}

.p2-ki__b {
  padding: 0 calc(var(--u) * 10);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.p2-ki__brand {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
}

.p2-ki__n {
  min-height: calc(var(--u) * 50);
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  line-height: 1.25;
}

.p2-ki__why {
  min-height: calc(var(--u) * 40);
  font-size: max(12px, calc(var(--u) * 14));
  line-height: 1.4;
  color: var(--body);
}

.p2-ki__p {
  padding-top: calc(var(--u) * 6);
  line-height: 1.3;
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

/* kit summary */
.p2-ks {
  padding: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 34);
  background: var(--p2-K);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.p2-ks__k {
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  color: var(--mute);
}

.p2-ks__nn {
  color: var(--ink);
}

.p2-ks__segs {
  display: flex;
  gap: calc(var(--u) * 6);
  margin-bottom: calc(var(--u) * -10);
}

.p2-ks__seg {
  flex: 1;
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 5);
  background: var(--p2-L);
  transition: background .3s;
}

.p2[data-kit="1"] .p2-ks__seg:nth-child(-n+1),
.p2[data-kit="2"] .p2-ks__seg:nth-child(-n+2),
.p2[data-kit="3"] .p2-ks__seg:nth-child(-n+3),
.p2[data-kit="4"] .p2-ks__seg {
  background: var(--acc);
}

.p2-tiers {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.p2-tier {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.p2-tier__l {
  font-size: max(12px, calc(var(--u) * 16));
}

.p2[data-kit="3"] .p2-tier[data-n="3"],
.p2[data-kit="4"] .p2-tier[data-n="3"],
.p2[data-kit="4"] .p2-tier[data-n="4"] {
  color: var(--acc);
}

.p2-ks__lines {
  margin: 0;
  padding: calc(var(--u) * 6) 0 0;
  list-style: none;
}

.p2-ks__line {
  padding: calc(var(--u) * 14) 0;
  border-top: .5px solid var(--p2-L);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.p2-ks__ln {
  color: var(--body);
}

.p2-ks__row {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.p2-ks__row.p2-ok {
  color: var(--pd-ok);
}

.p2-ks__total {
  margin: auto 0 0;
  padding-top: calc(var(--u) * 22);
  border-top: .5px solid var(--p2-L2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 17));
  color: var(--body);
}

.p2-ks__v {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 100));
  line-height: .9;
  color: var(--acc);
}

.p2-ks__add {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) var(--acc-a25);
}

/* == 153. Shop single v2 — details bento ================================ */
.p2-bento {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.p2-tile {
  min-width: 0;
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
}

.p2-ab {
  grid-column: span 7;
  padding: calc(var(--u) * 60) calc(var(--u) * 64);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.p2-ab__lead {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 40));
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.25;
  text-wrap: pretty;
}

.p2-ab__body {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
  line-height: 1.65;
  color: var(--body);
}

.p2-box {
  grid-column: span 5;
  overflow: hidden;
  background: var(--pd-night);
  color: #f2f3f5;
  display: flex;
  flex-direction: column;
}

.p2-box__ph {
  position: relative;
  flex: 1;
  min-height: calc(var(--u) * 320);
}

.p2-box__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p2-box__list {
  margin: 0;
  padding: calc(var(--u) * 36) calc(var(--u) * 44) calc(var(--u) * 40);
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 14) calc(var(--u) * 30);
}

.p2-box__list li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.p2-bf {
  position: relative;
  grid-column: span 4;
  padding: calc(var(--u) * 50) calc(var(--u) * 52);
  overflow: hidden;
  background: var(--acc);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.p2-bf.is-no {
  background: #2a2e35;
}

.p2-bf__big {
  position: absolute;
  right: calc(var(--u) * -20);
  bottom: calc(var(--u) * -70);
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 300));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .3);
  pointer-events: none;
}

.p2-bf__k {
  position: relative;
  margin: 0;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.34);
  opacity: .85;
}

.p2-bf__t {
  position: relative;
  margin: 0;
  font-size: max(12px, calc(var(--u) * 46));
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.p2-bf__chips {
  position: relative;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.p2-bf__chip {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

.p2-bf__chip.is-on {
  background: #fff;
  color: var(--acc);
}

.p2-bf.is-no .p2-bf__chip.is-on {
  color: #2a2e35;
}

.p2-sp {
  grid-column: span 8;
  padding: calc(var(--u) * 50) calc(var(--u) * 60);
}

.p2-sp .p2-k {
  padding-bottom: calc(var(--u) * 20);
}

.p2-sp__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 34) calc(var(--u) * 30);
}

.p2-sp__c {
  padding-top: calc(var(--u) * 18);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.p2-sp__c dt {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.56);
  color: var(--mute);
}

.p2-sp__c dd {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.p2-sv {
  display: none;
}

.p2[data-axle="0"][data-comp="0"] .p2-sv--00,
.p2[data-axle="0"][data-comp="1"] .p2-sv--01,
.p2[data-axle="1"][data-comp="0"] .p2-sv--10,
.p2[data-axle="1"][data-comp="1"] .p2-sv--11 {
  display: inline;
}

.p2-fm {
  grid-column: span 12;
  padding: calc(var(--u) * 44) calc(var(--u) * 60) calc(var(--u) * 30);
}

.p2-fm__t {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
}

.p2-fm__t caption {
  padding-bottom: calc(var(--u) * 12);
}

.p2-fm__t th,
.p2-fm__t td {
  padding: calc(var(--u) * 20) calc(var(--u) * 10);
  border-top: .5px solid var(--sg-ln);
  font-weight: 300;
  text-align: left;
}

.p2-fm__t th {
  padding-left: calc(var(--u) * 22);
  width: 30%;
}

.p2-fm__t td:nth-child(2),
.p2-fm__t td:nth-child(3) {
  width: 19%;
}

.p2-fm__note {
  color: var(--mute);
}

.p2-fm__t .p2-fm__tag {
  width: calc(var(--u) * 150);
  padding-right: calc(var(--u) * 22);
  text-align: right;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
}

.p2-fm__me,
.p2-fm__row.is-me .p2-fm__ok {
  display: none;
}

.p2-fm__ok {
  color: var(--pd-ok);
}

.p2-fm__row.is-me .p2-fm__me {
  display: inline;
  color: var(--acc);
}

.p2-fm__row.is-me th,
.p2-fm__row.is-me td {
  background: var(--acc-a07);
}

.p2-fm__row.is-me th {
  border-radius: calc(var(--u) * 16) 0 0 calc(var(--u) * 16);
}

.p2-fm__row.is-me td:last-child {
  border-radius: 0 calc(var(--u) * 16) calc(var(--u) * 16) 0;
}

.p2-info {
  grid-column: span 4;
  padding: calc(var(--u) * 44) calc(var(--u) * 50);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.p2-info__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  letter-spacing: -.02em;
}

.p2-info__d {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  line-height: 1.6;
  color: var(--body);
}

/* == 154. Shop single v2 — how they hold up ============================= */
.p2-rv__r {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.p2-rv__score {
  font-size: max(12px, calc(var(--u) * 18));
  white-space: nowrap;
}

.p2-rv__score .acc {
  letter-spacing: calc(var(--u) * 3);
}

.p2-rv__write {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 26);
  border: 0;
  border-radius: calc(var(--u) * 28);
  background: var(--ink);
  color: var(--pd-inv);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  white-space: nowrap;
  cursor: pointer;
}

.p2-stages {
  position: relative;
}

.p2-stages__track {
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: calc(var(--u) * 46);
  height: 2px;
  background: var(--sg-ln);
}

.p2-stages__fill {
  display: block;
  width: 0;
  height: 2px;
  background: var(--acc);
  transition: width .5s;
}

.p2[data-stage="1"] .p2-stages__fill {
  width: 50%;
}

.p2[data-stage="2"] .p2-stages__fill {
  width: 100%;
}

.p2-stages__ul,
.p2-lts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.p2-stages__ul > li {
  display: flex;
}

.p2-st {
  position: relative;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 20);
  cursor: pointer;
}

.p2-st__n {
  width: calc(var(--u) * 92);
  height: calc(var(--u) * 92);
  border: 2px solid var(--sg-ln);
  border-radius: 50%;
  background: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 34));
  transition: border-color .3s, background .3s;
}

.p2-st.is-on .p2-st__n {
  border-color: var(--acc);
  background: linear-gradient(var(--acc-a07), var(--acc-a07)), var(--surf);
}

.p2-st__t {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
}

.p2-st__d {
  margin-top: calc(var(--u) * -16);
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.p2-lts {
  margin-top: calc(var(--u) * 50);
}

.p2-lt {
  padding: calc(var(--u) * 40) calc(var(--u) * 44);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.p2-lt__m {
  align-self: flex-start;
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--acc-a10);
  color: var(--acc);
  display: flex;
  align-items: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
}

.p2-lt__q {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  line-height: 1.45;
}

.p2-lt__q p {
  margin: 0;
}

.p2-lt__foot {
  margin: auto 0 0;
  padding-top: calc(var(--u) * 18);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.p2-lt__av {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  overflow: hidden;
  background: var(--sg-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 17));
}

.p2-lt__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p2-lt__who {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.p2-lt__n {
  font-size: max(12px, calc(var(--u) * 17));
}

.p2-lt__car {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 155. Shop single v2 — you may also like ============================ */
.p2-ym__h {
  margin-bottom: calc(var(--u) * 22);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
}

.p2-ym__t {
  flex-shrink: 0;
  margin: 0;
  font-size: max(12px, calc(var(--u) * 36));
  font-weight: 300;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.p2-ym__t .p2-n {
  margin-right: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 13));
  vertical-align: .3em;
}

.p2-yfs {
  margin: 0 0 0 calc(var(--u) * 20);
  padding: 0;
  list-style: none;
  display: flex;
  gap: calc(var(--u) * 8);
}

.p2-yf {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 22);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.p2-yf.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--pd-inv);
}

.p2-yf__n {
  opacity: .5;
}

.p2-ym__r {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.p2-ym__cart {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.p2-ym__cn {
  min-width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 14);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 13));
}

.p2-ym__b {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  padding: 0;
  border: .5px solid var(--line2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 18));
  cursor: pointer;
}

.p2-ym__b--acc {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.p2-strip {
  margin: 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 4) calc(var(--u) * 14) calc(var(--u) * 24);
  list-style: none;
  display: flex;
  gap: calc(var(--u) * 14);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--u) * 24), #000 calc(100% - calc(var(--u) * 120)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--u) * 24), #000 calc(100% - calc(var(--u) * 120)), transparent 100%);
}

.p2-strip::-webkit-scrollbar {
  display: none;
}

.p2-pill {
  flex: 0 0 auto;
  height: calc(var(--u) * 124);
  padding: 0 calc(var(--u) * 12);
  border: 1.5px solid transparent;
  border-radius: calc(var(--u) * 62);
  background: var(--surf);
  box-shadow: 0 1px 0 var(--sg-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  transition: transform .25s var(--pd-ease), border-color .2s, box-shadow .25s;
}

.p2-pill:hover {
  transform: translateY(calc(var(--u) * -4));
  border-color: var(--acc);
  box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 36) var(--acc-a16);
}

.p2-pill__th {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 100);
  border-radius: 50%;
  background: var(--stripes);
}

.p2-pill__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.p2-pill__slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.p2-pill__badge {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -6);
  transform: translateX(-50%);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: #111418;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 10));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 0.8);
  white-space: nowrap;
}

.p2-pill__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
}

.p2-pill__meta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.44);
  color: var(--mute);
}

.p2-pill__sep {
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  border-radius: 50%;
  background: var(--line2);
}

.p2-pill__n {
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
  white-space: nowrap;
}

.p2-pill__row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.p2-pill__p {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  white-space: nowrap;
}

.p2-pill__rt {
  flex-shrink: 0;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
  white-space: nowrap;
}

.p2-pill__act {
  margin-left: calc(var(--u) * 10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 4);
}

.p2-pill__add {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 26));
  cursor: pointer;
  transition: background .2s, transform .15s;
}

.p2-pill__add:active {
  transform: scale(.9);
}

.p2-pill.is-in .p2-pill__add {
  background: var(--pd-ok);
}

.p2-pill__cnt {
  min-height: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--pd-ok);
}

/* == 156. Shop single v2 — tablet and phone ============================= */
@media (max-width: 1199px) {
  .p2-heroWrap {
    padding-top: 24px;
  }

  .p2-hero {
    min-height: 0;
    padding: 12px;
    border-radius: 28px;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .p2-rail {
    order: 2;
    padding: 0;
    flex-direction: row;
    gap: 8px;
  }

  .p2-th {
    min-height: 0;
    aspect-ratio: 1;
    border-radius: 14px;
  }

  .p2-stage {
    aspect-ratio: 1340 / 1180;
    border-radius: 22px;
  }

  .p2-buy {
    order: 3;
    padding: 24px 12px 12px;
    gap: 24px;
  }

  .p2-kitWrap {
    padding-top: 64px;
  }

  .p2-kit {
    padding: 32px;
    border-radius: 28px;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .p2-kis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p2-ks__v {
    font-size: 64px;
  }

  .p2-ab,
  .p2-box,
  .p2-bf,
  .p2-sp {
    grid-column: span 12;
  }

  .p2-info {
    grid-column: span 12;
  }

  .p2-sp__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .p2-ym__h {
    flex-wrap: wrap;
  }

  .p2-yfs {
    order: 3;
    width: 100%;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .p2-yfs::-webkit-scrollbar {
    display: none;
  }

  .p2-strip {
    padding-left: 4px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .p2-ab {
    grid-column: span 7;
  }

  .p2-box {
    grid-column: span 5;
  }

  .p2-bf {
    grid-column: span 5;
  }

  .p2-sp {
    grid-column: span 7;
  }

  .p2-info {
    grid-column: span 4;
  }

  .p2-sp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .p2-mode {
    left: 12px;
    top: 12px;
  }

  .p2-mode__b {
    height: 36px;
    padding: 0 12px;
  }

  .p2-tr {
    right: 12px;
    top: 12px;
  }

  .p2-oem {
    display: none;
  }

  .p2-fav {
    width: 46px;
    height: 46px;
  }

  .p2-nav {
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }

  .p2-nav__n {
    height: 44px;
  }

  .p2-nav__b {
    width: 44px;
    height: 44px;
  }

  .p2-ghost {
    left: 16px;
    font-size: 64px;
  }

  .p2-spin {
    bottom: 16px;
  }

  .p2-play {
    width: 72px;
    height: 72px;
    font-size: 24px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 12px var(--acc-a18);
  }

  .p2-meta {
    flex-wrap: wrap;
    white-space: normal;
  }

  .p2-title {
    font-size: 40px;
  }

  .p2-price {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .p2-price__v {
    font-size: min(64px, 16vw);
  }

  .p2-comp__b {
    height: 64px;
  }

  .p2-comp__t {
    font-size: 16px;
  }

  .p2-gauges {
    grid-template-columns: minmax(0, 1fr);
  }

  .p2-ax__ul {
    flex-direction: column;
  }

  .p2-inst__row {
    align-items: flex-start;
  }

  .p2-slot__d {
    white-space: normal;
    text-align: center;
  }

  .p2-ctas {
    grid-template-columns: 1fr 1fr;
  }

  .p2-qty {
    grid-column: 1 / -1;
    justify-content: space-between;
    height: 64px;
  }

  .p2-add,
  .p2-buyb,
  .p2-ks__add {
    height: 64px;
    padding: 0 12px;
    white-space: normal;
    line-height: 1.2;
  }

  .p2-foot {
    flex-direction: column;
    gap: 8px;
    white-space: normal;
  }

  .p2-kit {
    padding: 20px 16px;
  }

  .p2-kit__h {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .p2-kit__t {
    font-size: 40px;
  }

  .p2-pres,
  .p2-kis {
    grid-template-columns: minmax(0, 1fr);
  }

  .p2-pres {
    gap: 22px;
  }

  .p2-ki__ph {
    height: 200px;
  }

  .p2-ki__n,
  .p2-ki__why {
    min-height: 0;
  }

  .p2-ks {
    padding: 24px 20px;
  }

  .p2-tiers {
    gap: 8px;
  }

  .p2-ks__v {
    font-size: min(52px, 13vw);
  }

  .p2-ab,
  .p2-sp,
  .p2-fm,
  .p2-info,
  .p2-bf {
    padding: 28px 22px;
  }

  .p2-ab__lead {
    font-size: 26px;
  }

  .p2-bf__t {
    font-size: 32px;
  }

  .p2-box__list {
    padding: 24px 22px;
    grid-template-columns: minmax(0, 1fr);
  }

  .p2-box__ph {
    min-height: 200px;
  }

  .p2-sp__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 16px;
  }

  .p2-sp__c dd {
    font-size: 19px;
  }

  .p2-fm__t thead {
    display: none;
  }

  .p2-fm__t,
  .p2-fm__t tbody,
  .p2-fm__t tr,
  .p2-fm__t th,
  .p2-fm__t td {
    display: block;
    width: auto;
  }

  .p2-fm__t caption {
    display: block;
  }

  .p2-fm__t .p2-fm__row {
    padding: 14px 12px;
    border-top: .5px solid var(--sg-ln);
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    font-size: 16px;
  }

  .p2-fm__t .p2-fm__row > th,
  .p2-fm__t .p2-fm__row > td {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    white-space: nowrap;
    border: 0;
    text-align: left;
  }

  .p2-fm__t .p2-fm__row > th {
    width: 100%;
    font-size: 17px;
  }

  .p2-fm__t .p2-fm__row.is-me {
    border-radius: 14px;
    background: var(--acc-a07);
  }

  .p2-fm__row.is-me th,
  .p2-fm__row.is-me td {
    background: none;
  }

  .p2-rv__r {
    flex-wrap: wrap;
    gap: 12px;
  }

  .p2-stages__track {
    top: 30px;
  }

  .p2-stages__ul {
    gap: 8px;
  }

  .p2-st {
    gap: 10px;
  }

  .p2-st__n {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .p2-st__t {
    font-size: 17px;
    text-align: center;
  }

  .p2-st__d {
    display: none;
  }

  .p2-lts {
    margin-top: 28px;
    grid-template-columns: minmax(0, 1fr);
  }

  .p2-lt {
    padding: 26px 22px;
  }

  .p2-lt__q {
    font-size: 21px;
  }

  .p2-ym__t {
    font-size: 30px;
    white-space: normal;
  }

  .p2-ym__r {
    margin: 0;
    width: 100%;
  }

  .p2-ym__cart {
    margin-right: auto;
  }

  .p2-pill {
    width: calc(100vw - 72px);
    height: 112px;
    gap: 12px;
  }

  .p2-pill__b {
    flex: 1;
    min-width: 0;
  }

  .p2-pill__meta {
    letter-spacing: .06em;
  }

  .p2-pill__th {
    width: 80px;
    height: 80px;
  }

  .p2-pill__n {
    font-size: 16px;
    line-height: 1.25;
    white-space: normal;
  }

  .p2-pill__act {
    margin-left: 0;
  }

  .p2-pill__add {
    width: 52px;
    height: 52px;
  }
}

/* == 157. Checkout — title row and step cards ========================== */
.ck,
.ck-done {
  font-weight: 400;
}

.ck-ok {
  color: var(--pd-ok);
}

.ck-head {
  padding-top: calc(var(--u) * 40);
  padding-bottom: calc(var(--u) * 34);
  border-bottom: .5px solid var(--sg-ln);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 40);
}

.ck-head__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.ck-sec {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.8);
  color: var(--pd-ok);
}

.ck-lock {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 18);
  flex-shrink: 0;
}

.ck-title {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 110));
  font-weight: 300;
  letter-spacing: -.06em;
  line-height: .95;
}

.ck-pgs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.ck-pg {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 17));
  color: var(--mute);
  white-space: nowrap;
}

.ck-pg:not(:last-child)::after {
  content: "";
  width: calc(var(--u) * 60);
  height: 1.5px;
  margin-left: calc(var(--u) * 2);
  background: var(--line2);
}

.ck-pg.is-ok:not(:last-child)::after {
  background: var(--pd-ok);
}

.ck-pg__n {
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  border-radius: 50%;
  background: var(--sg-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.ck-pg.is-ok .ck-pg__n {
  background: var(--pd-ok);
  color: #fff;
}

.ck-pg.is-cur {
  color: var(--ink);
}

.ck-pg.is-cur .ck-pg__n {
  background: var(--acc);
  color: #fff;
}

.ck-body {
  padding-top: calc(var(--u) * 50);
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 860);
  gap: calc(var(--u) * 60);
  align-items: start;
}

.ck-steps {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.ck-step {
  border: 1.5px solid transparent;
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  transition: border-color .25s;
}

.ck-step__h {
  padding: calc(var(--u) * 34) calc(var(--u) * 40);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
}

.ck-step__n {
  flex-shrink: 0;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: var(--sg-chip);
  color: var(--mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 16));
  transition: background .25s, color .25s;
}

.ck-step.is-ok .ck-step__n {
  background: var(--pd-ok);
  color: #fff;
}

.ck-step__ht {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.ck-step__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.ck-step__sum {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-step__b {
  padding: 0 calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 114);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

/* fields */
.ck-row {
  display: grid;
  gap: calc(var(--u) * 18);
}

.ck-row--2 {
  grid-template-columns: 1fr 1fr;
}

.ck-row--3 {
  grid-template-columns: 1.4fr 1fr 1fr;
}

.ck-row--card {
  grid-template-columns: 1fr 1fr 1.6fr;
}

.ck-ship,
.ck-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.ck-f {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.ck-f__l,
.ck-k {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  color: var(--mute);
}

.ck-in {
  width: 100%;
  height: calc(var(--u) * 72);
  padding: 0 calc(var(--u) * 22);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
  outline: none;
  transition: border-color .2s;
}

.ck-in::placeholder {
  color: var(--mute);
}

.ck-in:focus-visible {
  border-color: var(--ink);
}

.ck-in.is-err {
  border-color: var(--acc);
}

.ck-sel {
  cursor: pointer;
}

.ck-f__e {
  min-height: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.ck-fs {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ck-fs .ck-k {
  display: block;
  padding: calc(var(--u) * 6) 0 0;
  line-height: 1.3;
  float: left;
  width: 100%;
}

.ck-fs .ck-k + ul {
  clear: both;
}

.ck-r {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ck-r:focus-visible + label,
.ck-ck__in:focus-visible + .ck-ck__l .ck-ck__box {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* checkbox */
.ck-ck {
  position: relative;
  margin: 0;
  align-self: flex-start;
}

.ck-ck__in {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ck-ck__l {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  cursor: pointer;
}

.ck-ck__box {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  border: 1.5px solid var(--line2);
  border-radius: calc(var(--u) * 8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  transition: background .2s, border-color .2s;
}

.ck-ck__in:checked + .ck-ck__l .ck-ck__box {
  border-color: var(--acc);
  background: var(--acc);
}

.ck-ck__in:checked + .ck-ck__l .ck-ck__box::before {
  content: "✓";
}

.ck-ck__l a {
  color: var(--acc);
}

/* 1 contact */
.ck-acct {
  margin: 0;
  padding: calc(var(--u) * 18) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 18);
  background: var(--sg-chip);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.ck-acct__a {
  flex-shrink: 0;
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  text-decoration: none;
}

/* 2 your car */
.ck-lead {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  color: var(--body);
}

.ck-cars,
.ck-ms,
.ck-sps,
.ck-days,
.ck-times,
.ck-pays,
.ck-plan {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(var(--u) * 12);
}

.ck-cars,
.ck-pays,
.ck-plan {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ck-ms {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ck-sps {
  grid-template-columns: 1fr 1fr;
}

.ck-days {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.ck-cars > li,
.ck-ms > li,
.ck-sps > li,
.ck-days > li,
.ck-pays > li {
  display: flex;
}

.ck-car,
.ck-m,
.ck-sp,
.ck-day,
.ck-pay {
  flex: 1;
  border: 1.5px solid var(--sg-ln);
  background: transparent;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.ck-r:checked + .ck-car,
.ck-r:checked + .ck-m,
.ck-r:checked + .ck-day,
.ck-r:checked + .ck-pay {
  border-color: var(--acc);
  background: var(--acc-a06);
}

.ck-r:checked + .ck-sp {
  border-color: var(--acc);
}

.ck-car {
  min-height: calc(var(--u) * 96);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 4);
}

.ck-car__t {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.ck-car__f {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--pd-ok);
}

.ck-car__f.is-no {
  color: var(--acc);
}

/* == 158. Checkout — delivery and payment =============================== */
.ck-m {
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 24);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.ck-m__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ck-m__t {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.ck-dot {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  border: 1.5px solid var(--line2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ck-dot::before {
  content: "";
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  border-radius: 50%;
}

.ck-r:checked + .ck-m .ck-dot {
  border-color: var(--acc);
}

.ck-r:checked + .ck-m .ck-dot::before {
  background: var(--acc);
}

.ck-m__d {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.4;
  color: var(--mute);
}

.ck-m__p {
  font-size: max(12px, calc(var(--u) * 17));
}

.ck-sp {
  height: calc(var(--u) * 90);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
}

.ck-sp__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.ck-sp__t {
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
}

.ck-sp__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ck-sp__p {
  font-size: max(12px, calc(var(--u) * 18));
  white-space: nowrap;
}

.ck-pick {
  padding: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 24);
  background: var(--sg-chip);
  display: grid;
  grid-template-columns: calc(var(--u) * 320) minmax(0, 1fr);
  gap: calc(var(--u) * 24);
  align-items: center;
}

.ck-pick[hidden],
.ck-inst[hidden],
.ck-ship[hidden],
.ck-card[hidden] {
  display: none;
}

.ck-pick__map {
  display: block;
  height: calc(var(--u) * 200);
  border-radius: calc(var(--u) * 18);
  overflow: hidden;
}

.ck-map {
  display: block;
  width: 100%;
  height: 100%;
}

.ck-map__bg {
  fill: var(--s2);
}

.ck-map__park {
  fill: rgba(47, 163, 107, .14);
}

.ck-map__rd {
  stroke: var(--surf);
  stroke-width: 9;
}

.ck-map__main {
  stroke: var(--acc-a35);
  stroke-width: 9;
}

.ck-map__st {
  stroke: var(--surf);
  stroke-width: 3;
}

.ck-map__lb {
  fill: var(--mute);
  font-family: Geist, Helvetica, Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .14em;
}

.ck-map__halo {
  fill: var(--acc-a20);
}

.ck-map__pin {
  fill: var(--acc);
  stroke: #fff;
  stroke-width: 2;
}

.ck-pick__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.ck-pick__t {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.ck-pick__a {
  font-size: max(12px, calc(var(--u) * 17));
  color: var(--body);
}

.ck-pick__h {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--mute);
}

.ck-inst {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.ck-day {
  height: calc(var(--u) * 96);
  border-radius: calc(var(--u) * 20);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 4);
}

.ck-day__w {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  color: var(--mute);
}

.ck-day__n {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 30));
  line-height: 1.1;
}

.ck-times {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.ck-time {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 24);
  border: 1.5px solid var(--line2);
  border-radius: calc(var(--u) * 28);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 16));
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}

.ck-r:checked + .ck-time {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.ck-slot-e {
  font-size: max(12px, calc(var(--u) * 15));
}

.ck-pay {
  height: calc(var(--u) * 110);
  border-radius: calc(var(--u) * 22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
  text-align: center;
}

.ck-pay__t {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 400;
}

.ck-pay__d {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.ck-bill {
  padding-top: calc(var(--u) * 14);
}

.ck-note {
  margin: 0;
  padding: calc(var(--u) * 26);
  border-radius: calc(var(--u) * 22);
  background: var(--sg-chip);
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  color: var(--body);
}

.ck-plan {
  gap: calc(var(--u) * 10);
}

.ck-plan__c {
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 20);
  background: var(--sg-chip);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.ck-plan__d {
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  color: var(--mute);
}

.ck-plan__v {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

.ck-plan__n {
  margin: calc(var(--u) * 22) 0 0;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

/* == 159. Checkout — order summary ===================================== */
.ck-side {
  position: sticky;
  top: calc(var(--u) * 40);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.ck-sum {
  padding: calc(var(--u) * 44) calc(var(--u) * 46);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.ck-sum__h {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 16);
}

.ck-sum__t {
  font-size: max(12px, calc(var(--u) * 36));
  font-weight: 300;
  letter-spacing: -.02em;
}

.ck-sum__n {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--mute);
}

.ck-empty {
  padding: calc(var(--u) * 50) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.ck-empty[hidden] {
  display: none;
}

.ck-empty__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  color: var(--mute);
}

.ck-empty__a {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  background: var(--ink);
  color: var(--pd-inv);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  text-decoration: none;
}

.ck-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-line {
  padding: calc(var(--u) * 18) 0;
  border-top: .5px solid var(--sg-ln);
  display: grid;
  grid-template-columns: calc(var(--u) * 110) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 20);
  align-items: center;
}

.ck-line__ph {
  position: relative;
  height: calc(var(--u) * 110);
  border-radius: calc(var(--u) * 18);
  overflow: hidden;
  background: var(--stripes);
}

.ck-line__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ck-line__slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.ck-line__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.ck-line__brand {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  color: var(--mute);
}

.ck-line__n {
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
  line-height: 1.3;
}

.ck-line__ctl {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
}

.ck-q {
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  padding: 0;
  border: .5px solid var(--line2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.ck-line__q {
  min-width: calc(var(--u) * 28);
  text-align: center;
  font-size: max(12px, calc(var(--u) * 16));
}

.ck-line__rm {
  margin-left: calc(var(--u) * 10);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  text-decoration: underline;
  cursor: pointer;
}

.ck-line__t {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  white-space: nowrap;
}

.ck-promo {
  display: flex;
  gap: calc(var(--u) * 10);
}

.ck-promo__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 20);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 32);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 17));
  text-transform: uppercase;
  outline: none;
}

.ck-promo__in::placeholder {
  color: var(--mute);
  text-transform: none;
}

.ck-promo__in:focus-visible {
  border-color: var(--ink);
}

.ck-promo__b {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 26);
  border: .5px solid var(--ink);
  border-radius: calc(var(--u) * 32);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  cursor: pointer;
}

.ck-promo__m {
  min-height: calc(var(--u) * 16);
  margin: calc(var(--u) * -14) 0 0;
  font-size: max(12px, calc(var(--u) * 14));
}

.ck-promo__m.is-err,
.ck-hint.is-err {
  color: var(--acc);
}

.ck-tot {
  margin: 0;
  padding-top: calc(var(--u) * 18);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.ck-tot > div {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  color: var(--body);
}

.ck-tot > div[hidden] {
  display: none;
}

.ck-tot > .ck-ok {
  color: var(--pd-ok);
}

.ck-tot dd {
  margin: 0;
}

.ck-total {
  margin: 0 0 calc(var(--u) * -10);
  padding-top: calc(var(--u) * 10);
  border-top: .5px solid var(--line2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
}

.ck-total__k {
  font-size: max(12px, calc(var(--u) * 18));
  color: var(--mute);
}

.ck-total__v {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 62));
  line-height: 1.2;
  color: var(--acc);
  white-space: nowrap;
}

.ck-paybtn {
  height: calc(var(--u) * 96);
  border: 0;
  border-radius: calc(var(--u) * 48);
  background: var(--sg-chip);
  color: var(--mute);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.56);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 14);
  cursor: not-allowed;
  transition: background .3s, color .3s, box-shadow .3s, opacity .3s;
}

.ck-paybtn .ck-lock {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 20);
}

.ck-paybtn.is-on {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 40) var(--acc-a30);
  cursor: pointer;
}

.ck-paybtn.is-busy {
  opacity: .7;
}

.ck-hint {
  margin: calc(var(--u) * -6) 0 0;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
  text-align: center;
}

.ck-free {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.ck-free__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 15));
}

.ck-free__bar {
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--sg-chip);
  overflow: hidden;
}

.ck-free__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--acc);
  transition: width .4s;
}

.ck-free__fill.is-ok {
  background: var(--pd-ok);
}

.ck-trust {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.ck-tr {
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.ck-tr__t {
  font-size: max(12px, calc(var(--u) * 16));
}

.ck-tr__d {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

/* confirmation */
.ck-done {
  width: min(calc(var(--u) * 1100), calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: calc(var(--u) * 70) calc(var(--u) * 76);
  border: 0;
  border-radius: calc(var(--u) * 40);
  background: var(--surf);
  color: var(--ink);
  box-shadow: 0 calc(var(--u) * 40) calc(var(--u) * 100) rgba(8, 9, 11, .35);
}

.ck-done[open] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.ck-done::backdrop {
  background: rgba(8, 9, 11, .6);
}

.ck-done__ok {
  width: calc(var(--u) * 110);
  height: calc(var(--u) * 110);
  border-radius: 50%;
  background: var(--pd-ok);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 46));
}

.ck-done__h {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.ck-done__k {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.8);
  color: var(--mute);
}

.ck-done__t {
  font-size: max(12px, calc(var(--u) * 80));
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
}

.ck-done__d {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  color: var(--body);
}

.ck-nxs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.ck-nx {
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 24);
  background: var(--sg-chip);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.ck-nx__n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--acc);
}

.ck-nx__t {
  font-size: max(12px, calc(var(--u) * 20));
}

.ck-nx__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.ck-done__ctas {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.ck-done__cal,
.ck-done__go {
  height: calc(var(--u) * 76);
  padding: 0 calc(var(--u) * 32);
  border-radius: calc(var(--u) * 38);
  display: flex;
  align-items: center;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
  text-decoration: none;
  cursor: pointer;
}

.ck-done__cal {
  border: .5px solid var(--sg-ln);
  background: transparent;
  color: var(--ink);
}

.ck-done__cal[hidden] {
  display: none;
}

.ck-done__go {
  padding: 0 calc(var(--u) * 36);
  background: var(--ink);
  color: var(--pd-inv);
}

.ck-done__go:hover,
.ck-empty__a:hover {
  background: var(--ink-h);
  color: var(--pd-inv);
}

/* == 160. Checkout — tablet and phone ================================== */
@media (max-width: 1199px) {
  .ck-head {
    padding-top: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ck-body {
    padding-top: 24px;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .ck-side {
    position: static;
  }

  .ck-step__b {
    padding: 0 24px 28px;
  }

  .ck-step__h {
    padding: 24px;
  }
}

@media (max-width: 767px) {
  .ck-title {
    font-size: 56px;
  }

  .ck-pgs {
    width: 100%;
    gap: 8px;
  }

  .ck-pg {
    gap: 6px;
    font-size: 13px;
  }

  .ck-pg:not(:last-child)::after {
    width: 12px;
  }

  .ck-pg__n {
    width: 28px;
    height: 28px;
  }

  /* phone: only the current step keeps its label */
  .ck-pg:not(.is-cur) .ck-pg__t {
    display: none;
  }

  .ck-step {
    border-radius: 24px;
  }

  .ck-step__h {
    padding: 20px 18px;
    gap: 14px;
  }

  .ck-step__n {
    width: 40px;
    height: 40px;
  }

  .ck-step__t {
    font-size: 24px;
  }

  .ck-step__b {
    padding: 0 18px 22px;
  }

  .ck-row--2,
  .ck-row--3,
  .ck-row--card {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .ck-acct {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ck-cars,
  .ck-pays,
  .ck-plan,
  .ck-sps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .ck-ms {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .ck-sps {
    grid-template-columns: minmax(0, 1fr);
  }

  .ck-days {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .ck-day {
    height: 76px;
    border-radius: 14px;
  }

  .ck-day__w {
    letter-spacing: .04em;
  }

  .ck-day__n {
    font-size: 20px;
  }

  .ck-pick {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }

  .ck-pick__map {
    height: 160px;
  }

  .ck-sum {
    padding: 24px 18px;
    border-radius: 24px;
  }

  .ck-line {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }

  .ck-line__ph {
    height: 72px;
  }

  .ck-line__t {
    grid-column: 2;
  }

  .ck-total {
    flex-wrap: wrap;
  }

  .ck-total__v {
    font-size: min(40px, 8.4vw);
  }

  .ck-trust {
    grid-template-columns: minmax(0, 1fr);
  }

  .ck-done {
    padding: 28px 20px;
    border-radius: 24px;
    overflow-y: auto;
  }

  .ck-done__t {
    font-size: 40px;
  }

  .ck-nxs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* == 161. Listing v7 — compact inventory, 4-up grid ==================== */
/* Listing v6 without the page header: breadcrumbs → 40 px → results. The v1 card
   four to a row, the v1 row tighter (620 px photo, one-line copy, two buttons). */
.l7gap {
  height: calc(var(--u) * 40);
}

.l7grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 44) calc(var(--u) * 24);
}

.l7grid .lcd__ph {
  height: calc(var(--u) * 430);
  border-radius: calc(var(--u) * 32);
}

.l7grid .lcd__name {
  min-width: 0;
  font-size: max(12px, calc(var(--u) * 27));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l7grid .lcd__mo {
  font-size: max(12px, calc(var(--u) * 28));
}

.l7grid .lcd__meta {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* below the artboard the 12 px floor makes the photo pills wider than a quarter card:
   the Verified pill steps aside so the tag and Compare / ♡ never overlap */
@media (max-width: 2199px) {
  .l7grid .lcd__tag--ver {
    display: none;
  }
}

.l7list .lrw {
  grid-template-columns: calc(var(--u) * 620) minmax(0, 1fr) calc(var(--u) * 460);
}

.l7list .lrw__ph {
  height: calc(var(--u) * 350);
  border-radius: calc(var(--u) * 32);
}

.l7list .lrw__line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the delivery hairline sits on the spec table's top hairline */
.l7list .lrw__del {
  margin-top: calc(var(--u) * 10);
}

.l7ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.l7ctas .lrw__cmp {
  min-width: 0;
  height: calc(var(--u) * 62);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 31);
  letter-spacing: .12em;
  white-space: nowrap;
}

.l7ctas .lrw__view {
  min-width: 0;
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 26);
  gap: calc(var(--u) * 16);
}

/* == 162. Listing v7 — tablet and phone ================================ */
@media (max-width: 1199px) {
  .l7gap {
    height: 24px;
  }

  .l7grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 16px;
  }

  .l7grid .lcd__ph {
    height: auto;
    aspect-ratio: 790 / 540;
  }

  .l7grid .lcd__name {
    font-size: 20px;
  }

  .l7grid .lcd__mo {
    font-size: 20px;
  }

  .l7list .lrw {
    grid-template-columns: minmax(0, 1fr);
  }

  .l7list .lrw__ph {
    height: auto;
    aspect-ratio: 760 / 430;
  }
}

@media (max-width: 899px) {
  .l7grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .l7grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .l7grid .lcd__name,
  .l7grid .lcd__mo {
    font-size: 22px;
  }
}

/* == 163. Shop v4 — filters and car pickers ============================= */
.s4 {
  font-weight: 400;
}

.s4gap {
  height: calc(var(--u) * 30);
}

.s4cat {
  display: grid;
  grid-template-columns: calc(var(--u) * 400) minmax(0, 1fr);
  gap: calc(var(--u) * 40);
  align-items: start;
  scroll-margin-top: 20px;
}

.s4side {
  position: sticky;
  top: 20px;
  padding: calc(var(--u) * 34) calc(var(--u) * 34) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.s4side__h {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.s4side__t {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

.s4side__reset {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
}

.s4side__reset:hover {
  color: var(--acc);
}

.s4tg {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.s4tg__l {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  cursor: pointer;
}

.s4tg__t {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.s4tg__d {
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.s4tg__sw {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 32);
  margin: 0;
  border-radius: calc(var(--u) * 16);
  background: var(--line2);
  appearance: none;
  cursor: pointer;
  transition: background .25s;
}

.s4tg__sw::after {
  content: "";
  position: absolute;
  top: calc(var(--u) * 3);
  left: calc(var(--u) * 3);
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border-radius: 50%;
  background: #fff;
  transition: left .25s;
}

.s4tg__sw:checked {
  background: var(--acc);
}

.s4tg__sw:checked::after {
  left: calc(var(--u) * 27);
}

.s4tg__sw:focus-visible,
.s4ck__in:focus-visible + .s4ck .s4ck__box {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.s4grp {
  min-width: 0;
  margin: 0;
  padding: calc(var(--u) * 24) 0 0;
  border: 0;
  border-top: .5px solid var(--sg-ln);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.s4grp__k {
  margin: 0;
  padding: 0;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

fieldset.s4grp > .s4grp__k {
  float: left;
  width: 100%;
}

fieldset.s4grp > .s4grp__k + * {
  clear: both;
}

/* car pickers */
.s4dd {
  position: relative;
}

.s4dd.is-open {
  z-index: 20;
}

.s4dd__b {
  width: 100%;
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 22);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 20);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  text-align: left;
  transition: border-color .2s;
}

.s4dd__b:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.s4dd.is-open .s4dd__b {
  border-color: var(--acc);
}

.s4dd.is-set .s4dd__v {
  color: var(--acc);
}

.s4dd__v {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s4dd__chev {
  flex-shrink: 0;
  color: var(--mute);
  transition: transform .2s;
}

.s4dd.is-open .s4dd__chev {
  transform: rotate(180deg);
}

.s4dd__m {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 72);
  max-height: calc(var(--u) * 380);
  margin: 0;
  padding: calc(var(--u) * 8);
  list-style: none;
  overflow: auto;
  border: .5px solid var(--sg-ln);
  border-radius: calc(var(--u) * 22);
  background: var(--surf);
  box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 60) rgba(0, 0, 0, .14);
}

.s4dd__m[hidden] {
  display: none;
}

.s4dd__o {
  width: 100%;
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 14);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  text-align: left;
}

.s4dd__o > span:first-child {
  flex: 1;
}

.s4dd__o:hover {
  background: var(--sg-chip);
}

.s4dd__o.is-on {
  background: var(--acc-a08);
  color: var(--acc);
}

.s4dd__tick {
  width: calc(var(--u) * 16);
  color: var(--acc);
}

/* checkboxes and price chips */
.s4cks,
.s4chips {
  margin: 0;
  padding: 0;
  list-style: none;
}

.s4cks {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.s4ck__in {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.s4ck {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  cursor: pointer;
}

.s4ck__box {
  flex-shrink: 0;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  border: 1.5px solid var(--line2);
  border-radius: calc(var(--u) * 7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: max(12px, calc(var(--u) * 13));
}

.s4ck__in:checked + .s4ck .s4ck__box {
  border-color: var(--acc);
  background: var(--acc);
}

.s4ck__in:checked + .s4ck .s4ck__box::before {
  content: "✓";
}

.s4ck__n {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.s4chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.s4chip {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 16);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 22);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
}

.s4chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--pd-inv);
}

/* == 164. Shop v4 — results bar, spec-sheet cards, pages =============== */
.s4res {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
}

.s4bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.s4bar__f {
  display: none;
}

.s4bar__n {
  margin: 0 calc(var(--u) * 10) 0 0;
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.s4act {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.s4act__b {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--sg-chip);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  white-space: nowrap;
}

.s4act__x {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border-radius: 50%;
  background: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 13));
}

.s4bar__sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.s4bar__k {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.s4sort {
  margin: 0;
  padding: calc(var(--u) * 4);
  list-style: none;
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
}

.s4sort__b {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 23);
  font-size: max(12px, calc(var(--u) * 14));
  font-weight: 300;
  white-space: nowrap;
}

.s4sort__b[aria-pressed="true"] {
  background: var(--ink);
  color: var(--pd-inv);
}

/* the spec-sheet grid: hairlines top / left on the grid, right / bottom on each cell */
.s4grid {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: .5px solid var(--line2);
  border-left: .5px solid var(--line2);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.s4grid[hidden] {
  display: none;
}

.s4c {
  position: relative;
  min-width: 0;
  padding: calc(var(--u) * 28);
  border-right: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
  transition: background .3s;
}

.s4c:hover {
  background: var(--surf);
}

.s4c__top {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.s4c__n {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 44));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
  transition: color .3s;
}

.s4c:hover .s4c__n {
  color: var(--acc);
}

.s4c__sku {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 0.72);
  color: var(--mute);
}

.s4c__ph {
  position: relative;
  display: block;
  height: calc(var(--u) * 300);
  background: var(--stripes);
}

.s4c__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s4c__slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.s4c__bdgs {
  position: absolute;
  left: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  display: flex;
  gap: calc(var(--u) * 6);
}

.s4c__bdg {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: #5f6671;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.32);
  white-space: nowrap;
}

.s4c__bdg--sale {
  background: var(--acc);
}

.s4c__bdg--new {
  background: #111418;
}

/* accent corner ticks */
.s4c__tk {
  position: absolute;
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border: 0 solid var(--acc);
}

.s4c__tk--a {
  left: -1px;
  top: -1px;
  border-left-width: 1px;
  border-top-width: 1px;
}

.s4c__tk--b {
  right: -1px;
  bottom: -1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.s4c__tt {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.s4c__ey {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--mute);
}

.s4c__name {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .25s;
}

.s4c:hover .s4c__name {
  color: var(--acc);
}

.s4c__tb {
  margin: 0;
  border-top: .5px solid var(--sg-ln);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.s4c__cell {
  min-width: 0;
  padding: calc(var(--u) * 12) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.s4c__cell:first-child {
  border-right: .5px solid var(--sg-ln);
}

.s4c__cell + .s4c__cell {
  padding-left: calc(var(--u) * 16);
}

.s4c__cell dt {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--mute);
}

.s4c__cell dd {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 17));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s4c__fit {
  color: var(--mute);
}

.s4c__fit.is-ok {
  color: var(--pd-ok);
}

.s4c__foot {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
}

.s4c__price {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
  white-space: nowrap;
}

.s4c__v {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
}

.s4c__v.is-sale {
  color: var(--acc);
}

.s4c__was {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.s4c__add {
  flex-shrink: 0;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  white-space: nowrap;
  transition: background .25s;
}

.s4c__add.is-in {
  background: var(--pd-ok);
}

.s4c__disc {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
  letter-spacing: 0;
}

.s4c__add.is-in .s4c__disc {
  color: var(--pd-ok);
}

.s4empty {
  padding: calc(var(--u) * 60);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 16);
  text-align: center;
}

.s4empty[hidden] {
  display: none;
}

.s4empty__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
}

.s4empty__b {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 28);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
}

/* pagination */
.s4pg {
  margin-top: calc(var(--u) * 20);
  padding-top: calc(var(--u) * 30);
  border-top: .5px solid var(--sg-ln);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
}

.s4pg[hidden] {
  display: none;
}

.s4pg__k {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  color: var(--mute);
  white-space: nowrap;
}

.s4pg__nav {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.s4pg__nums {
  display: flex;
  gap: calc(var(--u) * 8);
}

.s4pg__prev,
.s4pg__next {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 30);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
}

.s4pg__prev {
  border: .5px solid var(--line2);
}

.s4pg__prev:disabled {
  opacity: .35;
  cursor: default;
}

.s4pg__next {
  background: var(--acc);
  color: #fff;
}

.s4pg__next:disabled {
  background: var(--sg-chip);
  color: var(--mute);
  cursor: default;
}

.s4pg__num {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  border: .5px solid var(--line2);
  border-radius: 50%;
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.s4pg__num[aria-current="page"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--pd-inv);
}

/* == 165. Shop v4 — tablet and phone =================================== */
@media (max-width: 1599px) and (min-width: 1200px) {
  .s4grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1199px) {
  .s4gap {
    height: 20px;
  }

  .s4cat {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* the filters fold behind a Filters button above the results */
  .s4side {
    position: static;
    order: 2;
    padding: 24px;
    border-radius: 24px;
  }

  .s4side:not(.is-open) {
    display: none;
  }

  .s4res {
    display: contents;
  }

  .s4bar {
    order: 1;
  }

  .s4grid,
  .s4empty,
  .s4pg {
    order: 3;
  }

  .s4bar__f {
    height: 48px;
    padding: 0 20px;
    border: .5px solid var(--line2);
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em;
  }

  .s4bar__f[aria-expanded="true"] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--pd-inv);
  }

  .s4grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .s4bar__sort {
    margin-left: 0;
    width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 899px) {
  .s4grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s4c {
    padding: 16px;
    gap: 14px;
  }

  .s4c__ph {
    height: auto;
    aspect-ratio: 420 / 300;
  }
}

@media (max-width: 767px) {
  .s4pg {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* phone: Prev · Page N of M · Next */
  .s4pg__k:first-child,
  .s4pg__nums {
    display: none;
  }

  .s4pg__k:last-child {
    order: -1;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 559px) {
  .s4grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .s4c__ph {
    aspect-ratio: 840 / 600;
  }

  .s4c__name {
    font-size: 20px;
  }
}

/* == 166. Blog — feed with the ruler rail ================================ */
.bl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 420);
  gap: calc(var(--u) * 60);
  align-items: start;
  font-weight: 400;
  scroll-margin-top: 20px;
}

.blfeed {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.blfeed__clear {
  margin: 0;
  padding-bottom: calc(var(--u) * 28);
  display: flex;
  justify-content: flex-end;
}

.blfeed__clear[hidden],
.blempty[hidden],
.blpg[hidden] {
  display: none;
}

.blfeed__x {
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
}

.blempty {
  margin-bottom: calc(var(--u) * 70);
  padding: calc(var(--u) * 80);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 18);
}

.blempty__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
}

.blempty__b {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 30);
  border-radius: calc(var(--u) * 30);
  background: var(--ink);
  color: var(--pd-inv);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.82);
}

.blp {
  margin-bottom: calc(var(--u) * 70);
  padding-bottom: calc(var(--u) * 70);
  border-bottom: .5px solid var(--sg-ln);
  display: grid;
  grid-template-columns: calc(var(--u) * 240) minmax(0, 1fr);
  gap: calc(var(--u) * 48);
}

.blp[hidden] {
  display: none;
}

/* rail: a tick ruler, an accent line that grows on hover, the numeral, specs, the read-time gauge */
.blp__rail {
  position: relative;
  padding-left: calc(var(--u) * 22);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.blp__ticks {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--u) * 10);
  background: repeating-linear-gradient(180deg, rgba(17, 20, 24, .28) 0 1px, transparent 1px calc(var(--u) * 20));
}

[data-theme="dark"] .blp__ticks {
  background: repeating-linear-gradient(180deg, rgba(242, 243, 245, .3) 0 1px, transparent 1px calc(var(--u) * 20));
}

.blp__grow {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--acc);
  transition: height .8s var(--pd-ease);
}

.blp:hover .blp__grow {
  height: 100%;
}

.blp__n {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 94));
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
  transition: color .35s;
}

.blp:hover .blp__n {
  color: var(--acc);
}

.blp__spec {
  margin: 0;
  border-top: .5px solid var(--line2);
}

.blp__row {
  padding: calc(var(--u) * 14) 0;
  border-bottom: .5px solid var(--sg-ln);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.blp__row dt,
.blp__rk {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--mute);
}

.blp__sv {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 17));
}

.blp__sv--acc {
  color: var(--acc);
}

.blp__sv--tags {
  color: var(--body);
  white-space: pre-wrap;
}

.blp__read {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.blp__gauge {
  display: flex;
  gap: calc(var(--u) * 3);
}

.blp__seg {
  flex: 1;
  height: calc(var(--u) * 14);
  border-radius: 2px;
  background: rgba(17, 20, 24, .08);
  transition: background .3s;
}

.blp__seg.is-on {
  background: rgba(17, 20, 24, .28);
}

[data-theme="dark"] .blp__seg {
  background: rgba(242, 243, 245, .08);
}

[data-theme="dark"] .blp__seg.is-on {
  background: rgba(242, 243, 245, .3);
}

.blp:hover .blp__seg.is-on {
  background: var(--acc);
}

.blp__seg:nth-child(2) { transition-delay: .04s; }
.blp__seg:nth-child(3) { transition-delay: .08s; }
.blp__seg:nth-child(4) { transition-delay: .12s; }
.blp__seg:nth-child(5) { transition-delay: .16s; }
.blp__seg:nth-child(6) { transition-delay: .2s; }
.blp__seg:nth-child(7) { transition-delay: .24s; }
.blp__seg:nth-child(8) { transition-delay: .28s; }
.blp__seg:nth-child(9) { transition-delay: .32s; }
.blp__seg:nth-child(10) { transition-delay: .36s; }
.blp__seg:nth-child(11) { transition-delay: .4s; }
.blp__seg:nth-child(12) { transition-delay: .44s; }

/* content: cover, title, excerpt, Read story */
.blp__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 28);
}

.blp__cover {
  position: relative;
  display: block;
  height: calc(var(--u) * 760);
  border-radius: calc(var(--u) * 32);
  overflow: hidden;
  isolation: isolate;
  background: var(--stripes);
}

.blp__img,
.blp__slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .9s var(--pd-ease);
}

.blp__img {
  object-fit: cover;
  object-position: 50% 62%;
}

.blp__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.blp:hover .blp__img,
.blp:hover .blp__slot {
  transform: scale(1.04);
}

.blp__cap {
  position: absolute;
  left: calc(var(--u) * 26);
  bottom: calc(var(--u) * 24);
  padding: calc(var(--u) * 8) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 10);
  background: var(--surf);
  color: var(--body);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 0.72);
}

.blp__go {
  position: absolute;
  right: calc(var(--u) * 24);
  top: calc(var(--u) * 24);
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 76);
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 26));
  opacity: 0;
  transform: scale(.6) rotate(-45deg);
  transition: transform .4s var(--pd-ease), opacity .4s var(--pd-ease);
}

.blp:hover .blp__go {
  opacity: 1;
  transform: none;
}

.blp__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 64));
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.blp__t a {
  transition: color .25s;
}

.blp:hover .blp__t a {
  color: var(--acc);
}

.blp__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 48);
  align-items: end;
}

.blp__x {
  max-width: calc(var(--u) * 900);
  margin: 0;
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

.blp__more {
  height: calc(var(--u) * 68);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 30);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 34);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}

.blp:hover .blp__more,
.blp__more:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--pd-inv);
}

.blp__mdisc {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blpg {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* == 167. Blog — spec-sheet sidebar ===================================== */
.blside {
  position: sticky;
  top: 20px;
  align-self: start;
  min-width: 0;
  border: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
}

.blside__tk {
  position: absolute;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border: 0 solid var(--acc);
}

.blside__tk--a {
  left: -1px;
  top: -1px;
  border-left-width: 1px;
  border-top-width: 1px;
}

.blside__tk--b {
  right: -1px;
  bottom: -1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.blsearch {
  height: calc(var(--u) * 68);
  padding: 0 calc(var(--u) * 22);
  border-bottom: .5px solid var(--line2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.blsearch__k {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--acc);
}

.blsearch__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.blsearch__in::placeholder {
  color: var(--mute);
}

.blsearch:focus-within {
  box-shadow: inset 0 -2px 0 var(--acc);
}

.blside__h {
  margin: 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 22);
  border-bottom: .5px solid var(--line2);
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.2);
  color: var(--mute);
}

.blside__h--last {
  border-bottom: 0;
}

.blcats,
.bltags,
.blpops,
.blarcs,
.blfols {
  margin: 0;
  padding: 0;
  list-style: none;
}

.blcats {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.blcats > li:nth-child(odd) {
  border-right: .5px solid var(--line2);
}

.blcat {
  width: 100%;
  height: calc(var(--u) * 92);
  padding: calc(var(--u) * 16) calc(var(--u) * 20);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  transition: background .2s;
}

.blcat__n {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 24));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
  transition: color .2s;
}

.blcat__t {
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
}

.blcat:hover,
.blcat[aria-pressed="true"] {
  background: var(--surf);
}

.blcat[aria-pressed="true"] {
  color: var(--acc);
}

.blcat[aria-pressed="true"] .blcat__n {
  color: var(--acc);
}

.bltags {
  padding: calc(var(--u) * 18) calc(var(--u) * 22);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.bltag {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border: .5px solid var(--line2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
}

.bltag:hover {
  border-color: var(--acc);
}

.bltag[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.blpop {
  padding: calc(var(--u) * 16) calc(var(--u) * 22);
  border-bottom: .5px solid var(--sg-ln);
  display: grid;
  grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr);
  gap: calc(var(--u) * 12);
}

.blpop__n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--acc);
}

.blpop__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.blpop__t {
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  line-height: 1.3;
}

.blpop__m {
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.blarcs {
  border-bottom: .5px solid var(--line2);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.blarcs > li:nth-child(odd) {
  border-right: .5px solid var(--line2);
}

.blarcs > li:nth-child(-n+2) {
  border-bottom: .5px solid var(--line2);
}

.blarcs > li:only-child {
  grid-column: 1 / -1;
  border: 0;
}

.blarc {
  height: calc(var(--u) * 70);
  padding: 0 calc(var(--u) * 20);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 4);
}

.blarc__t {
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
}

.blarc__n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 11));
  color: var(--mute);
}

.blnews {
  padding: calc(var(--u) * 22);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.blnews__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  line-height: 1.2;
}

.blnews__f {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.blnews__f[hidden],
.blnews__ok[hidden] {
  display: none;
}

.blnews__row {
  border: .5px solid rgba(128, 132, 140, .5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.blnews__row.is-err {
  border-color: var(--acc);
}

.blnews__in {
  min-width: 0;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 16);
  border: 0;
  outline: none;
  background: transparent;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
}

.blnews__in::placeholder {
  color: var(--mute);
}

.blnews__b {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 20);
  background: var(--ink);
  color: var(--pd-inv);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
}

.blnews__e {
  min-height: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--acc);
}

.blnews__ok {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--pd-ok);
}

.blfols {
  border-top: .5px solid var(--line2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.blfols > li:not(:last-child) {
  border-right: .5px solid var(--line2);
}

.blfol {
  height: calc(var(--u) * 60);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
}

/* == 168. Blog — tablet and phone ======================================= */
@media (max-width: 1599px) {
  .bl {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .blside {
    position: relative;
    top: auto !important;
    order: -1;
  }

  .blside .blpops,
  .blside .blarcs,
  .blside .blnews,
  .blside .blfols,
  .blside .blside__h:nth-of-type(n+3) {
    display: none;
  }

  .blcats {
    grid-template-columns: repeat(4, 1fr);
  }

  .blcats > li {
    border-right: .5px solid var(--line2);
  }

  .blcats > li:nth-child(4n) {
    border-right: 0;
  }

  .blp {
    grid-template-columns: minmax(0, 1fr);
  }

  .blp__rail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 16px 28px;
  }

  .blp__spec {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 20px;
  }

  .blp__read {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .blcats {
    grid-template-columns: 1fr 1fr;
  }

  .blcats > li:nth-child(odd) {
    border-right: .5px solid var(--line2);
  }

  .blcats > li:nth-child(even) {
    border-right: 0;
  }

  .blcat {
    height: 72px;
    padding: 12px 16px;
  }

  .blp {
    margin-bottom: 40px;
    padding-bottom: 40px;
    gap: 22px;
  }

  .blp__cover {
    height: auto;
    aspect-ratio: 1712 / 760;
    border-radius: 20px;
  }

  .blp__cap {
    display: none;
  }

  .blp__rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .blp__n {
    font-size: 56px;
  }

  .blp__spec {
    grid-template-columns: 1fr 1fr;
  }

  .blp__t {
    font-size: 32px;
  }

  .blp__foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .blp__x {
    font-size: 17px;
  }

  .blp__more {
    justify-self: start;
  }
}

/* == 169. Blog post — hero, fact strip, rail, text ====================== */
:root {
  --bp-body: #2a2e35;
  --bp-tick: rgba(17, 20, 24, .28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bp-body: #d6d9de;
    --bp-tick: rgba(242, 243, 245, .3);
  }
}

:root[data-theme="dark"] {
  --bp-body: #d6d9de;
  --bp-tick: rgba(242, 243, 245, .3);
}

.bpa {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.bpa__ms {
  margin: 0;
  height: calc(var(--u) * 30);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 0.96);
  color: var(--acc);
  white-space: nowrap;
}

.bpa__mt {
  width: 1px;
  height: calc(var(--u) * 16);
  background: var(--acc);
}

.bpa__ml {
  flex: 1;
  height: 1px;
  background: var(--acc);
}

.bpa__hero {
  position: relative;
  height: calc(var(--u) * 860);
  margin-top: calc(var(--u) * 14);
  background: var(--stripes);
}

.bpa__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

.bpa__tk,
.bpx__tk {
  position: absolute;
  z-index: 1;
  border: 0 solid var(--acc);
}

.bpa__tk {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
}

.bpa__tk--tl,
.bpx__tk--a {
  left: -1px;
  top: -1px;
  border-left-width: 1px;
  border-top-width: 1px;
}

.bpa__tk--tr {
  right: -1px;
  top: -1px;
  border-right-width: 1px;
  border-top-width: 1px;
}

.bpa__tk--bl {
  left: -1px;
  bottom: -1px;
  border-left-width: 1px;
  border-bottom-width: 1px;
}

.bpa__tk--br,
.bpx__tk--b {
  right: -1px;
  bottom: -1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.bpa__n {
  position: absolute;
  left: calc(var(--u) * 40);
  bottom: calc(var(--u) * 30);
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 220));
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
}

.bpa__strip {
  margin: 0;
  border-left: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bpa__fc {
  padding: calc(var(--u) * 20) calc(var(--u) * 24);
  border-right: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.bpa__fc dt {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--mute);
}

.bpa__fc dd {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
}

.bpa__cols {
  padding-top: calc(var(--u) * 80);
  display: grid;
  grid-template-columns: calc(var(--u) * 300) minmax(0, 1fr) calc(var(--u) * 260);
  gap: calc(var(--u) * 60);
  align-items: start;
}

/* the rail: tick ruler, progress line, contents, gauge, share */
.bprail {
  position: sticky;
  top: 20px;
  padding-left: calc(var(--u) * 22);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.bprail__ticks {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--u) * 10);
  background: repeating-linear-gradient(180deg, var(--bp-tick) 0 1px, transparent 1px calc(var(--u) * 20));
}

.bprail__prog {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 25%;
  background: var(--acc);
  transition: height .6s var(--pd-ease);
}

.bprail__k {
  margin: 0;
  padding-bottom: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--mute);
}

.bprail__k--row {
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.bprail__toc {
  display: flex;
  flex-direction: column;
}

.bptocs,
.bpshs,
.bpnotes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bptocs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.bptoc {
  margin-left: calc(var(--u) * -14);
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 14);
  display: grid;
  grid-template-columns: calc(var(--u) * 34) minmax(0, 1fr);
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
  transition: background .25s, color .25s;
}

.bptoc__n {
  padding-top: calc(var(--u) * 4);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--acc);
}

.bptoc.is-on {
  background: var(--acc-a08);
  color: var(--acc);
}

.bprail__g {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.bpg {
  display: flex;
  gap: calc(var(--u) * 3);
}

.bpg__s {
  flex: 1;
  height: calc(var(--u) * 16);
  border-radius: 2px;
  background: rgba(128, 132, 140, .22);
  transition: background .3s;
}

.bpg__s.is-on {
  background: var(--acc);
}

.bprail__left {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.bpshs {
  display: flex;
  gap: calc(var(--u) * 8);
}

.bpshs > li {
  flex: 1;
  display: flex;
}

.bpsh {
  flex: 1;
  height: calc(var(--u) * 46);
  border: .5px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
}

.bpsh:hover,
.bpsh[aria-pressed="true"] {
  border-color: var(--acc);
  color: var(--acc);
}

.bprail__toast {
  min-height: calc(var(--u) * 16);
  margin: calc(var(--u) * -16) 0 0;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--pd-ok);
}

/* the text */
.bpx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 34);
  scroll-margin-top: 20px;
}

.bpx__ey {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.52);
  color: var(--acc);
}

.bpx__eyl {
  width: calc(var(--u) * 40);
  height: 1px;
  background: var(--acc);
}

.bpx__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 92));
  font-weight: 300;
  letter-spacing: -.052em;
  line-height: .98;
  text-wrap: balance;
}

.bpx__dek {
  margin: 0;
  padding-bottom: calc(var(--u) * 30);
  border-bottom: .5px solid var(--line2);
  font-size: max(12px, calc(var(--u) * 27));
  font-weight: 300;
  line-height: 1.5;
  color: var(--body);
}

.bpx__lead {
  margin: 0;
  display: flex;
  gap: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  line-height: 1.65;
}

.bpx__cap {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 112));
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
}

.bpx__p {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
  line-height: 1.72;
  color: var(--bp-body);
  text-wrap: pretty;
}

.bpx__h {
  margin: calc(var(--u) * 30) 0 0;
  padding-top: calc(var(--u) * 26);
  border-top: .5px solid var(--line2);
  font-weight: 300;
  scroll-margin-top: 20px;
}

.bpx__ha {
  display: grid;
  /* §01 in BBH Bartle is wider than the handoff's 120 px column — let it size itself */
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--u) * 20);
  align-items: baseline;
}

.bpx__hn {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 56));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
  transition: color .3s;
}

.bpx__ht {
  font-size: max(12px, calc(var(--u) * 48));
  letter-spacing: -.035em;
  line-height: 1.1;
}

.bpx__h.is-on .bpx__ha,
.bpx__ha:hover {
  color: var(--acc);
}

.bpx__h.is-on .bpx__hn {
  color: var(--acc);
}

.bpx__q {
  position: relative;
  margin: calc(var(--u) * 20) 0;
  padding: calc(var(--u) * 48) calc(var(--u) * 52);
  border: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.bpx__q .bpx__tk {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
}

.bpx__qk,
.bpx__mk {
  margin: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 0.96);
  color: var(--acc);
}

.bpx__qt {
  margin: 0;
}

.bpx__qt p {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.22;
}

.bpx__qb {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  color: var(--mute);
}

.bpx__spec {
  margin: calc(var(--u) * 20) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.bpx__sg {
  margin: 0;
  border-top: .5px solid var(--line2);
  border-left: .5px solid var(--line2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bpx__sc {
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-right: .5px solid var(--line2);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.bpx__sc dt {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.98);
  color: var(--mute);
}

.bpx__sc dd {
  margin: 0;
}

.bpx__sv {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 34));
  line-height: 1;
}

.bpx__su {
  margin-left: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.bpx__fig {
  margin: calc(var(--u) * 20) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.bpx__fph {
  position: relative;
  display: block;
  height: calc(var(--u) * 640);
  background: var(--stripes);
}

.bpx__fph .bpx__tk {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
}

.bpx__fimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bpx__fc {
  display: flex;
  gap: calc(var(--u) * 16);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 13));
  color: var(--mute);
}

.bpx__pn {
  margin-top: calc(var(--u) * 40);
  border: .5px solid var(--line2);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.bpx__pv,
.bpx__nx {
  padding: calc(var(--u) * 28) calc(var(--u) * 30);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.bpx__pv {
  border-right: .5px solid var(--line2);
}

.bpx__nx {
  text-align: right;
}

.bpx__pk {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--acc);
}

.bpx__pt {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  line-height: 1.3;
  transition: color .25s;
}

.bpx__pv:hover .bpx__pt,
.bpx__nx:hover .bpx__pt {
  color: var(--acc);
}

/* sidenotes, spaced to sit next to their paragraphs */
.bpnotes {
  padding-top: calc(var(--u) * 300);
  display: flex;
  flex-direction: column;
}

.bpn {
  padding: calc(var(--u) * 18) 0;
  border-top: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.bpn:nth-child(1) {
  margin-bottom: calc(var(--u) * 420);
}

.bpn:nth-child(2) {
  margin-bottom: calc(var(--u) * 520);
}

.bpn__k {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--acc);
}

.bpn__t {
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  line-height: 1.5;
  color: var(--body);
}

/* == 170. Blog post — comments ========================================= */
.cm {
  padding-top: calc(var(--u) * 120);
  font-weight: 400;
}

.cm__in {
  padding-top: calc(var(--u) * 44);
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: calc(var(--u) * 560) minmax(0, 1fr);
  gap: calc(var(--u) * 90);
  align-items: start;
}

.cm__side {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 30);
}

.cm__t {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 18);
  font-weight: 300;
}

.cm__n {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 150));
  font-weight: 400;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--acc);
}

.cm__w {
  padding-bottom: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 56));
  letter-spacing: -.045em;
  line-height: 1;
}

.cm__sub {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  line-height: 1.5;
  color: var(--body);
}

.cm__ppl {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.cm__faces {
  display: flex;
  padding-left: calc(var(--u) * 10);
}

.cmav {
  flex-shrink: 0;
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 17));
}

.cmav--f {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  margin-left: calc(var(--u) * -10);
  border: 2px solid var(--page);
  font-size: max(12px, calc(var(--u) * 13));
}

.cmav--s {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  font-size: max(12px, calc(var(--u) * 13));
}

.av-ink {
  background: #111418;
}

.av-ok {
  background: #2fa36b;
}

.av-blue {
  background: #1d5fd1;
}

.av-acc {
  background: var(--acc);
}

.av-grey {
  background: #5f6671;
}

[data-theme="dark"] .av-ink {
  background: #2a2e35;
}

.cm__sorts {
  padding-top: calc(var(--u) * 22);
  border-top: .5px solid var(--line2);
}

.cmsorts,
.cmroles,
.cml,
.cmr {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmsorts {
  display: flex;
  gap: calc(var(--u) * 24);
}

.cmsort {
  padding: 0 0 calc(var(--u) * 8);
  border-bottom: 1.5px solid transparent;
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.1);
  color: var(--mute);
}

.cmsort[aria-pressed="true"] {
  border-bottom-color: var(--acc);
  color: var(--ink);
}

.cm__pin {
  padding: calc(var(--u) * 26);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.cm__pk {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.16);
  color: var(--acc);
}

.cm__pd {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--acc);
}

.cm__pt {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  line-height: 1.55;
}

.cm__pb,
.cm__rules {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 14));
  line-height: 1.55;
  color: var(--mute);
}

.cm__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* composer */
.cmf {
  padding-bottom: calc(var(--u) * 34);
  border-bottom: .5px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.cmf__reply {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--acc);
}

.cmf__reply[hidden],
.cmf__more[hidden] {
  display: none;
}

.cmf__cancel {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 15));
  text-decoration: underline;
}

.cmf__row {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 22);
}

.cmf__me {
  flex-shrink: 0;
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  border: .5px solid var(--line2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.cmf__ta {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 64);
  padding: calc(var(--u) * 16) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: none;
  background: transparent;
  font: inherit;
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
  line-height: 1.5;
  resize: none;
  transition: height .3s, border-color .3s;
}

.cmf__ta::placeholder,
.cmf__in::placeholder {
  color: var(--mute);
}

.cmf.is-open .cmf__ta,
.cmf__ta:focus {
  height: calc(var(--u) * 140);
}

.cmf__ta:focus {
  border-bottom-color: var(--acc);
}

.cmf__more {
  padding-left: calc(var(--u) * 82);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.cmf__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8) calc(var(--u) * 20);
}

.cmf__k {
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.92);
  color: var(--mute);
}

.cmroles {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.cmrole {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 14));
}

.cmrole[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.cmf__cnt {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--mute);
}

.cmf__bar {
  position: relative;
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 3);
  background: var(--line2);
}

.cmf__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: currentColor;
}

.cmf__cnt.is-ok {
  color: var(--pd-ok);
}

.cmf__cnt.is-max {
  color: var(--acc);
}

.cmf__in {
  width: calc(var(--u) * 280);
  height: calc(var(--u) * 54);
  border: 0;
  border-bottom: .5px solid var(--line2);
  outline: none;
  background: transparent;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.cmf__in:not(.cmf__in--name) {
  width: calc(var(--u) * 340);
}

.cmf__in:focus {
  border-bottom-color: var(--acc);
}

.cmf__err {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.cmf__post {
  margin-left: auto;
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 28);
  border-radius: calc(var(--u) * 32);
  background: var(--mute);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 13));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.08);
  transition: background .25s;
}

.cmf__post.is-on {
  background: var(--acc);
}

.cmf__disc {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  background: #fff;
  color: #111418;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* list */
.cmc {
  padding: calc(var(--u) * 38) 0;
  border-bottom: .5px solid var(--sg-ln);
  display: grid;
  grid-template-columns: calc(var(--u) * 70) minmax(0, 1fr);
  gap: calc(var(--u) * 24);
  transition: background .6s;
}

.cmc.is-flash {
  background: var(--acc-a06);
}

.cmc__g {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.cmc__no {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--acc);
}

.cmc__thread {
  flex: 1;
  width: 1px;
  min-height: calc(var(--u) * 40);
  background: var(--line2);
}

.cmc__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.cmc__h,
.cmr__h {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 4) calc(var(--u) * 14);
}

.cmc__n {
  font-size: max(12px, calc(var(--u) * 20));
}

.cmc__role {
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border: .5px solid var(--line2);
  border-radius: calc(var(--u) * 13);
  display: inline-flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--body);
}

.cm__ago {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.cmc__t {
  max-width: calc(var(--u) * 1340);
  margin: 0;
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
  line-height: 1.6;
  color: var(--bp-body);
  text-wrap: pretty;
}

.cmc__acts {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10) calc(var(--u) * 26);
}

.cmc__like,
.cmc__reply,
.cmc__fold {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  color: var(--mute);
}

.cmc__like {
  color: var(--body);
}

.cmc__like[aria-pressed="true"],
.cmc__fold {
  color: var(--acc);
}

.cmc__heart {
  font-size: max(12px, calc(var(--u) * 17));
  letter-spacing: 0;
}

.cmr {
  margin-top: calc(var(--u) * 12);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 26);
}

.cmr__i {
  padding: calc(var(--u) * 22) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 22);
  background: var(--surf);
  display: grid;
  grid-template-columns: calc(var(--u) * 44) minmax(0, 1fr);
  gap: calc(var(--u) * 16);
}

.cmr__i.is-staff {
  background: var(--acc-a08);
}

.cmr__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.cmr__n {
  font-size: max(12px, calc(var(--u) * 17));
}

.cmr__staff {
  font-size: max(12px, calc(var(--u) * 11));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.76);
  color: var(--acc);
}

.cmr__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  line-height: 1.6;
  color: var(--bp-body);
}

/* == 171. Blog post — tablet and phone ================================= */
@media (max-width: 1599px) {
  /* on the article the sidebar follows the text */
  .bp .blside {
    order: 2;
  }

  .bpa__cols {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .bpnotes {
    grid-column: 2;
    padding-top: 0;
  }

  .bpn:nth-child(n) {
    margin-bottom: 0;
  }

  .cm__in {
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 48px;
  }
}

@media (max-width: 1199px) {
  .bpa__hero {
    height: auto;
    aspect-ratio: 1960 / 860;
  }

  .bpa__strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bpa__cols {
    padding-top: 40px;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .bprail {
    position: static;
  }

  .bprail__toc,
  .bprail__g {
    display: none;
  }

  .bpnotes {
    grid-column: auto;
  }

  .bpx__fph {
    height: auto;
    aspect-ratio: 1240 / 640;
  }

  .cm__in {
    grid-template-columns: minmax(0, 1fr);
  }

  .cm__side {
    position: static;
  }
}

@media (max-width: 767px) {
  .bpa__ms {
    font-size: 12px;
    white-space: normal;
  }

  .bpa__ml,
  .bpa__mt {
    display: none;
  }

  .bpa__n {
    left: 16px;
    bottom: 12px;
    font-size: 72px;
  }

  .bpa__strip {
    grid-template-columns: 1fr 1fr;
  }

  .bpx {
    gap: 22px;
  }

  .bpx__t {
    font-size: 40px;
  }

  .bpx__dek {
    font-size: 19px;
  }

  .bpx__lead {
    font-size: 19px;
    gap: 12px;
  }

  .bpx__cap {
    font-size: 64px;
  }

  .bpx__p {
    font-size: 18px;
  }

  .bpx__ha {
    gap: 12px;
  }

  .bpx__hn {
    font-size: 32px;
  }

  .bpx__ht {
    font-size: 28px;
  }

  .bpx__q {
    padding: 26px 22px;
  }

  .bpx__qt p {
    font-size: 26px;
  }

  .bpx__sg {
    grid-template-columns: 1fr 1fr;
  }

  .bpx__pn {
    grid-template-columns: minmax(0, 1fr);
  }

  .bpx__pv {
    border-right: 0;
    border-bottom: .5px solid var(--line2);
  }

  .cm__n {
    font-size: 88px;
  }

  .cm__w {
    font-size: 36px;
  }

  .cmf__more {
    padding-left: 0;
  }

  .cmf__in,
  .cmf__in:not(.cmf__in--name) {
    width: 100%;
  }

  .cmf__cnt,
  .cmf__post {
    margin-left: 0;
  }

  .cmc {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
  }

  .cmc .cmav {
    width: 40px;
    height: 40px;
  }

  .cmc__t {
    font-size: 18px;
  }

  .cmr__i {
    padding: 16px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
  }

  .cmav--s {
    width: 36px;
    height: 36px;
  }

  .cmr__t {
    font-size: 16px;
  }
}

/* == 172. Account · Profile — spec-sheet sidebar ======================== */
:root {
  --up-ln: rgba(17, 20, 24, .1);
  --up-ln2: rgba(17, 20, 24, .22);
  --up-off: rgba(17, 20, 24, .1);
  --up-tile: #f2f3f5;
  --up-plus: #111418;
  --up-plus-bd: rgba(17, 20, 24, .16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --up-ln: rgba(242, 243, 245, .08);
    --up-ln2: rgba(242, 243, 245, .2);
    --up-off: rgba(242, 243, 245, .1);
    --up-tile: #25292f;
    --up-plus: #22262c;
    --up-plus-bd: rgba(242, 243, 245, .14);
  }
}

:root[data-theme="dark"] {
  --up-ln: rgba(242, 243, 245, .08);
  --up-ln2: rgba(242, 243, 245, .2);
  --up-off: rgba(242, 243, 245, .1);
  --up-tile: #25292f;
  --up-plus: #22262c;
  --up-plus-bd: rgba(242, 243, 245, .14);
}

.upgap {
  height: calc(var(--u) * 30);
}

.up {
  display: grid;
  grid-template-columns: calc(var(--u) * 440) minmax(0, 1fr);
  gap: calc(var(--u) * 60);
  align-items: start;
  font-weight: 400;
  line-height: normal;
}

.uptk {
  position: absolute;
  z-index: 1;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border: 0 solid var(--acc);
}

.uptk--s {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
}

.uptk--tl {
  left: -1px;
  top: -1px;
  border-left-width: 1px;
  border-top-width: 1px;
}

.uptk--tr {
  right: -1px;
  top: -1px;
  border-right-width: 1px;
  border-top-width: 1px;
}

.uptk--bl {
  left: -1px;
  bottom: -1px;
  border-left-width: 1px;
  border-bottom-width: 1px;
}

.uptk--br {
  right: -1px;
  bottom: -1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.upside {
  position: sticky;
  top: 20px;
  align-self: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.upcard {
  padding: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.upid {
  padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 20);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.upid__av {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 68);
  height: calc(var(--u) * 68);
  border-radius: 50%;
  background: var(--ink) center / cover no-repeat;
  color: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 22));
}

.upid__dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  border: 3px solid var(--surf);
  border-radius: 50%;
  background: var(--pd-ok);
}

.upid__b {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.upid__n {
  font-size: max(12px, calc(var(--u) * 21));
}

.upid__m {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.upsell {
  height: calc(var(--u) * 64);
  margin: 0 0 calc(var(--u) * 10);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 32);
  background: var(--acc);
  box-shadow: 0 12px 30px var(--acc-a30);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.1);
}

.upsell:hover {
  color: #fff;
}

.upsell__plus {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
  letter-spacing: 0;
}

.upsell__t {
  flex: 1;
}

.upsell__ar {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  transition: transform .25s;
}

.upsell:hover .upsell__ar {
  transform: translateX(3px);
}

.upnav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.upm {
  width: 100%;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 17));
  text-align: left;
  transition: background .2s, color .2s;
}

.upm__i {
  flex-shrink: 0;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
}

.upm__t {
  flex: 1;
  min-width: 0;
}

.upm__c {
  min-width: calc(var(--u) * 28);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 13);
  background: var(--up-tile);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.upm__c--hot {
  background: var(--acc);
  color: #fff;
}

.upm:hover {
  background: var(--up-tile);
}

.upm.is-on {
  background: var(--acc-a10);
  color: var(--acc);
}

.upm.is-on .upm__c:not(.upm__c--hot) {
  color: var(--acc);
}

.upplus {
  padding: calc(var(--u) * 26);
  border: .5px solid var(--up-plus-bd);
  border-radius: calc(var(--u) * 28);
  background: var(--up-plus);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.upplus__k,
.upplus__t {
  margin: 0;
}

.upplus__k {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.52);
  color: var(--acc);
}

.upplus__t {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  line-height: 1.25;
}

.upplus__go {
  align-self: flex-start;
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 24);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
}

.upplus__go:hover {
  color: #fff;
  filter: brightness(1.08);
}

/* owner: Log out stands out — an accent tint and accent text, filled on hover */
.upside__out {
  height: calc(var(--u) * 56);
  border: 1px solid var(--acc);
  border-radius: calc(var(--u) * 28);
  background: var(--acc-a08);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.1);
  transition: background .2s, color .2s;
}

.upside__out:hover {
  background: var(--acc);
  color: #fff;
}

/* == 173. Account · Profile — the form ================================== */
.upmain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
}

.uphd {
  padding-bottom: calc(var(--u) * 24);
  border-bottom: .5px solid var(--up-ln2);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 20);
}

.uphd__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 64));
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: normal;
}

.uphd__st {
  margin: 0 0 0 auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 12));
  color: var(--pd-ok);
}

.uphd__st.is-dirty {
  color: var(--acc);
}

.uphd__x {
  margin-left: auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.uphd__x:empty {
  display: none;
}

.uphd__x[hidden] {
  display: none;
}

.uphd__x .uphd__st {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 14));
}

.uphd__sv {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 30);
  border-radius: calc(var(--u) * 28);
  background: var(--mute);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
  transition: background .3s;
}

.uphd__sv.is-dirty {
  background: var(--acc);
}

.uphd__sv.is-saved {
  background: var(--pd-ok);
}

.upform {
  display: grid;
  grid-template-columns: calc(var(--u) * 520) minmax(0, 1fr);
  gap: calc(var(--u) * 24);
  align-items: start;
}

.upform__side {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.upform__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

/* photo card: the label covers the card, a dragged file draws a dashed outline */
.upphc {
  position: relative;
  padding: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  outline: 2px dashed transparent;
  outline-offset: -10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 20);
  transition: outline-color .2s;
}

.upphc.is-drag {
  outline-color: var(--acc);
}

.upphc:focus-within {
  outline: 2px solid var(--acc);
}

.upphc__l {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 20);
  text-align: center;
  cursor: pointer;
}

.upphc__av {
  position: relative;
  width: calc(var(--u) * 220);
  height: calc(var(--u) * 220);
  border-radius: 50%;
  background: var(--ink) center / cover no-repeat;
  color: var(--pd-inv);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 64));
}

.upphc__plus {
  position: absolute;
  right: calc(var(--u) * 8);
  bottom: calc(var(--u) * 8);
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border: 4px solid var(--surf);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 24));
  transition: transform .25s;
}

.upphc__l:hover .upphc__plus {
  transform: scale(1.08);
}

.upphc__n {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

.upphc__h {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.upphc__f {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.upphc__e {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.upphc__e:empty {
  display: none;
}

.upphc__rm {
  margin-top: calc(var(--u) * -6);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  text-decoration: underline;
}

.upphc__rm:hover {
  color: var(--acc);
}

.upphc__rm[hidden] {
  display: none;
}

.upstr {
  padding: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.upstr__h {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: max(12px, calc(var(--u) * 20));
}

.upstr__v {
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 28));
  color: var(--acc);
}

.upstr__bar {
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--up-off);
  overflow: hidden;
}

.upstr__f {
  display: block;
  width: 0;
  height: 100%;
  background: var(--acc);
  transition: width .4s;
}

.upcks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.upck {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 16));
}

.upck__m {
  flex-shrink: 0;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  border-radius: 50%;
  background: var(--up-tile);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.upck.is-ok {
  color: var(--mute);
}

.upck.is-ok .upck__m {
  background: var(--pd-ok);
}

.upck.is-ok .upck__m::after {
  content: "✓";
}

.upsec {
  min-width: 0;
  padding: calc(var(--u) * 34) calc(var(--u) * 36);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 22);
}

.upsec__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
}

.upsec__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  letter-spacing: -.02em;
}

.upsec__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.upsec__d.is-ok {
  color: var(--pd-ok);
}

.upgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 14);
}

.upf {
  position: relative;
  min-width: 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 20);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
  cursor: text;
  transition: border-color .2s;
}

.upf--1 {
  grid-column: span 1;
}

.upf--2 {
  grid-column: span 2;
}

.upf--4 {
  grid-column: span 4;
}

.upf__l {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  transition: color .2s;
}

.upf__tag {
  position: absolute;
  right: calc(var(--u) * 16);
  top: calc(var(--u) * 14);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.upf__in {
  width: 100%;
  height: calc(var(--u) * 32);
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
}

.upf__in::placeholder {
  color: var(--mute);
}

.upf__in--area {
  height: calc(var(--u) * 100);
  font-size: max(12px, calc(var(--u) * 18));
  line-height: 1.5;
  resize: none;
}

.upf__e {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.upf:focus-within,
.upf.is-err {
  border-color: var(--acc);
}

.upf:focus-within .upf__l,
.upf.is-err .upf__l {
  color: var(--acc);
}

/* sticky save bar */
.upbar {
  position: sticky;
  bottom: 20px;
  z-index: 2;
  padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 28);
  border: .5px solid var(--up-ln2);
  border-radius: calc(var(--u) * 40);
  background: var(--surf);
  box-shadow: 0 20px 50px rgba(17, 20, 24, .12);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  transition: background .35s, color .35s;
}

.upbar.is-dirty {
  background: var(--ink);
  color: var(--pd-inv);
}

.upbar__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 16));
}

.upbar__x,
.upbar__s {
  height: calc(var(--u) * 56);
  border-radius: calc(var(--u) * 28);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
}

.upbar__x {
  margin-left: auto;
  padding: 0 calc(var(--u) * 24);
  border: .5px solid rgba(128, 132, 140, .5);
  color: inherit;
}

.upbar__x:disabled {
  opacity: .4;
  cursor: default;
}

.upbar__s {
  padding: 0 calc(var(--u) * 30);
  background: var(--mute);
  color: #fff;
  transition: background .3s;
}

.upbar.is-dirty .upbar__s {
  background: var(--acc);
}

.upbar.is-saved .upbar__s {
  background: var(--pd-ok);
}

/* == 174. Account · Profile — tablet and phone ========================= */
@media (max-width: 1599px) {
  .upform {
    grid-template-columns: minmax(0, 1fr);
  }

  .upform__side {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 1199px) {
  .upgap {
    height: 20px;
  }

  .up {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .upside {
    position: relative;
    top: auto;
  }

  .upnav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 28 px menu rows; the sidebar and the form get a finger-sized scale */
  .upside,
  .upform {
    --u: .8px;
  }

  .uphd {
    flex-wrap: wrap;
  }

  .uphd__t {
    font-size: 40px;
  }

  .uphd__x {
    width: 100%;
    margin: 0;
    justify-content: space-between;
  }

  .upcard,
  .upsec {
    padding: 18px 16px;
  }

  .upform__side {
    grid-template-columns: minmax(0, 1fr);
  }

  .upphc {
    padding: 28px 18px;
  }

  .upgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .upf--1,
  .upf--2,
  .upf--4 {
    grid-column: auto;
  }

  .upf__in {
    font-size: 16px;
  }

  .upbar {
    flex-wrap: wrap;
    padding: 12px;
    border-radius: 24px;
  }

  .upbar__t {
    width: 100%;
    padding: 0 8px;
  }

  .upbar__x {
    margin-left: 0;
  }

  .upbar__s {
    flex: 1;
  }

}

/* == 175. Account · My garage — car pills, the car card ================= */
/* amber for SOON / pending — shared by orders, test drives and trade-in */
:root {
  --gr-amber: #c98a12;
}

.gradd {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 26);
  border: 1px dashed var(--up-ln2);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 17));
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}

.gradd:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.gradd__plus {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.gr {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.grtabs,
.grchips,
.grrs,
.grps__ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.grtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.grtab {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 24) 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 17));
  white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
}

.grtab.is-on {
  background: var(--ink);
  color: var(--pd-inv);
  box-shadow: 0 10px 30px rgba(17, 20, 24, .15);
}

.grtab__th {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  overflow: hidden;
  background: var(--stripes);
}

.grtab__img,
.grcar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grsheet {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.grsheet[hidden] {
  display: none;
}

.grmain {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
}

.grcar {
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.grcar__ph {
  position: relative;
  height: calc(var(--u) * 500);
  background: var(--stripes);
}

.grcar__pri {
  position: absolute;
  left: calc(var(--u) * 24);
  top: calc(var(--u) * 24);
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 19);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
}

.grcar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pd-ok);
}

.grcar__b {
  padding: calc(var(--u) * 30) calc(var(--u) * 34);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
}

.grcar__hd {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.grcar__k,
.grcar__t,
.grcar__vin {
  margin: 0;
}

.grcar__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.grcar__t {
  font-size: max(12px, calc(var(--u) * 48));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}

.grcar__vin {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.grchips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--u) * 8);
}

.grchip {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  background: var(--up-tile);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

/* == 176. Account · My garage — value, service, reminders, parts ======= */
.grside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.grv {
  padding: calc(var(--u) * 34);
  border-radius: calc(var(--u) * 36);
  background: var(--up-plus);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.grv__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.grv__k {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 15));
  color: #a3a9b3;
}

.grv__ts {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 20);
  background: rgba(255, 255, 255, .08);
  display: flex;
}

.grv__t {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  transition: background .2s;
}

.grv__t[aria-pressed="true"] {
  background: var(--acc);
}

.grv__r {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.grv__r[hidden] {
  display: none;
}

.grv__v {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 14);
}

.grv__n {
  font-size: max(12px, calc(var(--u) * 64));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}

.grv__d {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--acc);
}

.grv__d.is-up {
  color: var(--pd-ok);
}

.grv__svg {
  display: block;
  width: 100%;
  height: calc(var(--u) * 110);
}

.grv__line {
  fill: none;
  stroke: var(--acc);
  stroke-width: 2.5;
}

.grv__ctas {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 10);
}

.grv__sell,
.grv__trade {
  height: calc(var(--u) * 56);
  border-radius: calc(var(--u) * 28);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}

.grv__sell {
  background: var(--acc);
}

.grv__sell:hover {
  color: #fff;
  filter: brightness(1.08);
}

.grv__trade {
  border: .5px solid rgba(255, 255, 255, .3);
}

.grv__trade:hover {
  border-color: #fff;
  color: #fff;
}

.grsv {
  padding: calc(var(--u) * 30) calc(var(--u) * 34);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  display: grid;
  grid-template-columns: calc(var(--u) * 130) minmax(0, 1fr);
  gap: calc(var(--u) * 26);
  align-items: center;
}

.grsv__ring {
  --p: 0%;
  width: calc(var(--u) * 130);
  height: calc(var(--u) * 130);
  border-radius: 50%;
  background: conic-gradient(var(--acc) 0 var(--p), var(--up-tile) var(--p) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.grsv__in {
  width: calc(var(--u) * 104);
  height: calc(var(--u) * 104);
  border-radius: 50%;
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
}

.grsv__n {
  font-size: max(12px, calc(var(--u) * 22));
  white-space: nowrap;
}

.grsv__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.grsv__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.grsv__w,
.grsv__l {
  margin: 0;
}

.grsv__w {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.grsv__l {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.grsv__book {
  align-self: flex-start;
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 25);
  background: var(--ink);
  color: var(--pd-inv);
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
  transition: background .2s;
}

.grsv__book:hover {
  background: var(--ink-h);
}

.grsv__book[aria-pressed="true"] {
  background: var(--pd-ok);
  color: #fff;
}

.grrs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 20);
}

.grr {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.grr--soon {
  --t: var(--gr-amber);
  --tb: rgba(201, 138, 18, .12);
}

.grr--due {
  --t: var(--acc);
  --tb: var(--acc-a10);
}

.grr__s {
  align-self: flex-start;
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.grr__t {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.grr__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.grps {
  padding: calc(var(--u) * 30) calc(var(--u) * 34);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.grps__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 16);
}

.grps__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
}

.grps__all {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.96);
  color: var(--acc);
  white-space: nowrap;
}

.grps__all:hover {
  color: var(--ink);
}

.grps__ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 14);
}

.grp {
  height: 100%;
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  transition: transform .25s;
}

.grp:hover {
  color: var(--ink);
  transform: translateY(-3px);
}

.grp__th {
  position: relative;
  height: calc(var(--u) * 150);
  border-radius: calc(var(--u) * 16);
  overflow: hidden;
  background: var(--stripes);
}

.grp__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grp__t {
  padding: 0 calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 16));
  line-height: 1.3;
}

.grp__p {
  padding: 0 calc(var(--u) * 6) calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 18));
  color: var(--acc);
}

.gr__toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 60;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 14px 20px;
  background: #111418;
  color: #f2f3f5;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: opacity .3s, transform .3s;
}

.gr__toast.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* == 177. Account · My garage — tablet and phone ======================= */
@media (max-width: 1599px) {
  .grmain {
    grid-template-columns: minmax(0, 1fr);
  }

  .grside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .grrs,
  .grps__ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1199px) {
  .grside {
    grid-template-columns: minmax(0, 1fr);
  }

  .grcar__b {
    flex-direction: column;
    align-items: flex-start;
  }

  .grchips {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 32 px pills; the garage gets a finger-sized scale */
  .gr,
  .gradd {
    --u: .8px;
  }

  .grcar__ph {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .grcar__b,
  .grv,
  .grsv,
  .grps {
    padding: 20px 18px;
  }

  .grcar__t {
    font-size: 30px;
  }

  .grv__n {
    font-size: 40px;
  }

  .grsv {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
  }

  .grsv__ring {
    width: 104px;
    height: 104px;
  }

  .grsv__in {
    width: 84px;
    height: 84px;
  }

  .grsv__n {
    font-size: 16px;
  }

  .grrs {
    grid-template-columns: minmax(0, 1fr);
  }

  .grps__ul {
    grid-template-columns: 1fr 1fr;
  }

  .grps__h {
    flex-direction: column;
    gap: 6px;
  }

  .grps__t {
    font-size: 22px;
  }

  .grtab {
    font-size: 15px;
  }
}

/* == 178. Account · Saved cars — KPIs, price-drop banner, toolbar ====== */
:root {
  --sd-drop: #1f7a4f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sd-drop: #5fd39b;
  }
}

:root[data-theme="dark"] {
  --sd-drop: #5fd39b;
}

.sd {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.sdks,
.sdfs,
.sdgrid,
.sdqs__ul,
.sdtray__ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sdks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 20);
}

.sdk {
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.sdk__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.sdk__v {
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.sdk__v--ok {
  color: var(--pd-ok);
}

.sdk__v--acc {
  color: var(--acc);
}

.sdk__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.sdalert {
  padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 32);
  background: rgba(47, 163, 107, .12);
  color: var(--sd-drop);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.sdalert[hidden] {
  display: none;
}

.sdalert__i {
  flex-shrink: 0;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  background: var(--pd-ok);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 16));
}

.sdalert__t {
  flex: 1;
  margin: 0;
  font-size: max(12px, calc(var(--u) * 17));
}

.sdalert__go {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 24);
  background: var(--pd-ok);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: filter .2s;
}

.sdalert__go:hover {
  filter: brightness(1.08);
}

.sdbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.sdfs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.sdf {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.sdf__n {
  opacity: .6;
}

.sdf[aria-pressed="true"] {
  background: var(--ink);
  color: var(--pd-inv);
}

.sdss {
  margin-left: auto;
  padding: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
}

.sds {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.sds[aria-pressed="true"] {
  background: var(--acc);
  color: #fff;
}

/* == 179. Account · Saved cars — the card grid ========================= */
.sdgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 20);
}

.sdc {
  --t: var(--mute);
  min-width: 0;
  padding: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, opacity .2s;
}

.sdc[hidden] {
  display: none;
}

.sdc--down {
  --t: var(--pd-ok);
}

.sdc--up {
  --t: var(--acc);
}

.sdc.is-sold {
  opacity: .55;
}

.sdc.is-cmp {
  box-shadow: 0 0 0 1.5px var(--acc);
}

.sdc__ph {
  position: relative;
  height: calc(var(--u) * 300);
  border-radius: calc(var(--u) * 24);
  overflow: hidden;
  background: var(--stripes);
}

.sdc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sdc__st {
  position: absolute;
  left: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--mute);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.sdc__st--available {
  background: var(--pd-ok);
}

.sdc__st--reserved {
  background: var(--gr-amber);
}

.sdc__fav {
  position: absolute;
  right: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(17, 20, 24, .12);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 20));
  transition: transform .2s;
}

.sdc__fav:hover {
  transform: scale(1.08);
}

.sdc__d {
  position: absolute;
  left: calc(var(--u) * 14);
  bottom: calc(var(--u) * 14);
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  background: #fff;
  color: var(--t);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.sdc--flat .sdc__d {
  color: #8a9099;
}

.sdc__b {
  padding: calc(var(--u) * 20) calc(var(--u) * 12) calc(var(--u) * 6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.sdc__top,
.sdc__name,
.sdc__meta,
.sdc__pr {
  margin: 0;
}

.sdc__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.sdc__n {
  font-family: ui-monospace, Menlo, monospace;
}

.sdc__name {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.sdc__meta {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.sdc__pr {
  padding-top: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.02em;
}

.sdc__note {
  height: calc(var(--u) * 50);
  margin: calc(var(--u) * 8) 0 calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 18);
  border: 0;
  border-radius: calc(var(--u) * 16);
  outline: none;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
}

.sdc__note::placeholder {
  color: var(--mute);
}

.sdc__note:focus {
  box-shadow: 0 0 0 1px var(--acc);
}

.sdc__acts {
  margin: auto 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 8);
}

.sdc__cmp,
.sdc__view {
  height: calc(var(--u) * 54);
  border-radius: calc(var(--u) * 27);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.sdc__cmp {
  border: 1px solid var(--up-ln2);
  color: var(--ink);
  transition: background .2s, border-color .2s, color .2s;
}

.sdc__cmp:hover:not(:disabled) {
  border-color: var(--acc);
  color: var(--acc);
}

.sdc__cmp[aria-pressed="true"],
.sdc__cmp[aria-pressed="true"]:hover {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.sdc__cmp:disabled {
  opacity: .45;
  cursor: default;
}

.sdc__view {
  background: var(--ink);
  color: var(--pd-inv);
}

.sdc__view:hover {
  background: var(--ink-h);
  color: var(--pd-inv);
}

.sdempty {
  padding: calc(var(--u) * 60);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.sdempty[hidden] {
  display: none;
}

.sdempty__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
}

.sdempty__a {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 22);
  background: var(--ink);
  color: var(--pd-inv);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
}

.sdempty__a:hover {
  background: var(--ink-h);
  color: var(--pd-inv);
}

/* == 180. Account · Saved cars — saved searches, compare tray, dialog == */
.sdqs {
  padding: calc(var(--u) * 30) calc(var(--u) * 34);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.sdqs__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 16);
}

.sdqs__t,
.sdqs__s {
  margin: 0;
}

.sdqs__t {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
}

.sdqs__s {
  margin-top: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.sdqs__new {
  flex-shrink: 0;
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 22);
  border: 1px dashed var(--up-ln2);
  border-radius: calc(var(--u) * 24);
  color: var(--ink);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  transition: border-color .2s, color .2s;
}

.sdqs__new:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.sdqs__ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 14);
}

.sdq {
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.sdq__t {
  font-size: max(12px, calc(var(--u) * 17));
  line-height: 1.35;
}

.sdq__f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
}

.sdq__n {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.sdq__n.is-new {
  color: var(--acc);
}

.sdq__n:hover {
  color: var(--ink);
}

.sdq__al {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}

.sdq__al[aria-pressed="true"] {
  border-color: var(--pd-ok);
  color: var(--pd-ok);
}

.sdq__sw {
  position: relative;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 26);
  border-radius: calc(var(--u) * 13);
  background: var(--up-tile);
  transition: background .2s;
}

.sdq__sw::after {
  content: "";
  position: absolute;
  top: calc(var(--u) * 3);
  left: calc(var(--u) * 3);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.sdq__al[aria-pressed="true"] .sdq__sw {
  background: var(--pd-ok);
}

.sdq__al[aria-pressed="true"] .sdq__sw::after {
  left: calc(var(--u) * 21);
}

.sdtray {
  position: sticky;
  bottom: 20px;
  z-index: 3;
  align-self: center;
  padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 40);
  background: #111418;
  box-shadow: 0 20px 50px rgba(17, 20, 24, .25);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.sdtray[hidden] {
  display: none;
}

.sdtray__k {
  font-size: max(12px, calc(var(--u) * 16));
  white-space: nowrap;
}

.sdtray__ul {
  display: flex;
  gap: calc(var(--u) * 8);
}

.sdtray__chip {
  position: relative;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  overflow: hidden;
  background: #2a2e35;
}

.sdtray__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sdtray__x {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(17, 20, 24, .6);
  color: #fff;
  font-size: 18px;
  opacity: 0;
  transition: opacity .2s;
}

.sdtray__x:hover,
.sdtray__x:focus-visible {
  opacity: 1;
}

.sdtray__go {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 28);
  border-radius: calc(var(--u) * 28);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 1.68);
  white-space: nowrap;
}

.sdtray__go:hover {
  filter: brightness(1.08);
}

.sdcmp {
  width: min(1400px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 36px 40px;
  border: 0;
  border-radius: 32px;
  background: var(--surf);
  color: var(--ink);
  box-shadow: 0 40px 100px rgba(8, 9, 11, .35);
}

.sdcmp::backdrop {
  background: rgba(8, 9, 11, .55);
}

.sdcmp__h {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sdcmp__t {
  margin: 0;
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -.03em;
}

.sdcmp__x {
  width: 44px;
  height: 44px;
  border: .5px solid var(--up-ln2);
  border-radius: 50%;
  font-size: 20px;
}

.sdcmp__b {
  overflow-x: auto;
}

.sdcmp__tb {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.sdcmp__tb th,
.sdcmp__tb td {
  padding: 12px 14px;
  border-top: .5px solid var(--up-ln2);
  text-align: left;
  vertical-align: top;
}

.sdcmp__tb th {
  width: 140px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 400;
  color: var(--mute);
}

.sdcmp__img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin-bottom: 8px;
}

.sdcmp__n {
  font-size: 18px;
}

.sd__toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 60;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 14px 20px;
  background: #111418;
  color: #f2f3f5;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: opacity .3s, transform .3s;
}

.sd__toast.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.sd__undo {
  color: var(--acc);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  text-decoration: underline;
}

/* == 181. Account · Saved cars — tablet and phone ====================== */
@media (max-width: 1599px) {
  .sdks,
  .sdgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sdqs__ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .sdss {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 26 px pills; the page gets a finger-sized scale */
  .sd {
    --u: .8px;
  }

  .sdks {
    gap: 10px;
  }

  .sdk {
    padding: 16px;
  }

  .sdk__v {
    font-size: 32px;
  }

  .sdgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sdalert {
    flex-wrap: wrap;
    padding: 14px 16px;
  }

  .sdalert__t {
    flex-basis: calc(100% - 52px);
  }

  .sdalert__go {
    width: 100%;
  }

  .sdss {
    max-width: 100%;
    overflow-x: auto;
  }

  .sdqs {
    padding: 20px 18px;
  }

  .sdqs__h {
    flex-direction: column;
    gap: 12px;
  }

  .sdcmp {
    padding: 22px 16px;
  }
}

/* == 182. Account · My listings — KPIs, tabs ============================ */
/* blue for counters / review / tips — shared by orders, trade-in and test drives */
:root {
  --ml-blue: #1d5fd1;
  --ml-tip: #1d5fd1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ml-tip: #7fa6ee;
  }
}

:root[data-theme="dark"] {
  --ml-tip: #7fa6ee;
}

.mlw {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.mlks,
.mltabs__ul,
.mlos,
.mltds {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mlks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 20);
}

.mlk {
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.mlk__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mlk__r {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 4) calc(var(--u) * 10);
}

.mlk__v {
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.mlk__v.is-hot {
  color: var(--acc);
}

.mlk__t {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mlk__t--ok {
  color: var(--pd-ok);
}

.mltabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.mltabs__ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.mltab {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.mltab__n {
  opacity: .6;
}

.mltab.is-on {
  background: var(--ink);
  color: var(--pd-inv);
}

.mlsell {
  flex-shrink: 0;
  margin-left: auto;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 28);
  background: var(--acc);
  box-shadow: 0 12px 30px var(--acc-a25);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 16));
  white-space: nowrap;
}

.mlsell:hover {
  color: #fff;
  filter: brightness(1.08);
}

.mlsell__plus {
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 22));
}

.mlempty {
  padding: calc(var(--u) * 60);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 10);
  text-align: center;
}

.mlempty[hidden] {
  display: none;
}

.mlempty__t,
.mlempty__d {
  margin: 0;
}

.mlempty__t {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

.mlempty__d {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--mute);
}

/* == 183. Account · My listings — the listing card ===================== */
.ml {
  --st: var(--pd-ok);
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.ml[hidden] {
  display: none;
}

.ml[data-status="Draft"] {
  --st: #5f6671;
}

.ml[data-status="Paused"] {
  --st: var(--gr-amber);
}

.ml[data-status="Review"] {
  --st: var(--ml-blue);
}

.ml[data-status="Sold"] {
  --st: #111418;
  opacity: .85;
}

.mlg3 {
  display: grid;
  grid-template-columns: calc(var(--u) * 400) minmax(0, 1fr) calc(var(--u) * 560);
  gap: calc(var(--u) * 28);
  align-items: stretch;
}

.mlt__ph {
  position: relative;
  min-height: calc(var(--u) * 300);
  border-radius: calc(var(--u) * 24);
  overflow: hidden;
  background: var(--stripes);
}

.mlt__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mlt__st {
  position: absolute;
  left: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--st);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
}

.mlt__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.mlt__pn {
  position: absolute;
  left: calc(var(--u) * 14);
  bottom: calc(var(--u) * 14);
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  color: var(--body);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.mlt__b {
  min-width: 0;
  padding: calc(var(--u) * 10) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.mlt__hd {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.mlt__id,
.mlt__t,
.mlt__m {
  margin: 0;
}

.mlt__id {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mlt__t {
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.mlt__m {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.mlp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.mlp__v {
  font-size: max(12px, calc(var(--u) * 40));
  font-weight: 300;
  letter-spacing: -.03em;
}

.mlp__v[hidden],
.mlp__ed[hidden] {
  display: none;
}

.mlp__ed {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  transition: border-color .2s, color .2s;
}

.mlp__ed:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.mlp__f {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 18);
  border: 1.5px solid var(--acc);
  border-radius: calc(var(--u) * 28);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.mlp__f[hidden] {
  display: none;
}

.mlp__cur {
  font-size: max(12px, calc(var(--u) * 22));
  color: var(--mute);
}

.mlp__in {
  width: calc(var(--u) * 180);
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.mlp__ok {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
}

.mlg {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.mlg__track {
  position: relative;
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 5);
  background: var(--up-tile);
}

.mlg__band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: calc(var(--u) * 5);
  background: rgba(47, 163, 107, .35);
}

.mlg__mk {
  position: absolute;
  top: calc(var(--u) * -5);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  margin-left: calc(var(--u) * -10);
  border: 3px solid var(--surf);
  border-radius: 50%;
  background: var(--pd-ok);
  box-shadow: 0 2px 6px rgba(17, 20, 24, .2);
  transition: left .35s var(--pd-ease);
}

.mlg__mk--out {
  background: var(--gr-amber);
}

.mlg__mk--sold {
  background: var(--mute);
}

.mlg__lh {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mlg__s--ok {
  color: var(--pd-ok);
}

.mlg__s--out {
  color: var(--gr-amber);
}

.mls {
  margin: auto 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.mls__c {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column-reverse;
  gap: calc(var(--u) * 4);
}

.mls__c dt {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mls__c dd {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 24));
}

/* == 184. Account · My listings — right panel, strip =================== */
.mlr {
  min-width: 0;
  padding: calc(var(--u) * 20);
  border-radius: calc(var(--u) * 26);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.mlr__h {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
}

.mlr__t {
  font-size: max(12px, calc(var(--u) * 20));
}

.mlr__s {
  color: var(--acc);
}

.mlr__pc {
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 15));
}

.mlr__bar {
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 5);
  background: var(--up-tile);
  overflow: hidden;
}

.mlr__f {
  display: block;
  height: 100%;
  background: var(--acc);
}

.mltds {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.mltd {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 16));
}

.mltd__m {
  flex-shrink: 0;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  border-radius: 50%;
  background: #d6d9de;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.mltd.is-ok {
  color: var(--mute);
}

.mltd.is-ok .mltd__m {
  background: var(--pd-ok);
}

.mltd.is-ok .mltd__m::after {
  content: "✓";
}

.mlr__sold,
.mlr__p {
  margin: 0;
}

.mlr__sold {
  font-size: max(12px, calc(var(--u) * 40));
  font-weight: 300;
}

.mlr__p {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.mlos {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.mlo {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  transition: box-shadow .2s;
}

.mlo.is-new {
  box-shadow: 0 0 0 1.5px var(--acc);
}

.mlo__top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.mlo__av {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  background: var(--ink);
  color: var(--pd-inv);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.mlo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mlo__who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.mlo__n {
  font-size: max(12px, calc(var(--u) * 16));
}

.mlo__m {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mlo__amt {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mlo__v {
  font-size: max(12px, calc(var(--u) * 22));
}

.mlo__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mlo__d.is-ok {
  color: var(--pd-ok);
}

.mlo__acts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 6);
}

.mlo__acts[hidden] {
  display: none;
}

.mlo__b {
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 22);
  font-size: max(12px, calc(var(--u) * 14));
  transition: filter .2s, border-color .2s, color .2s;
}

.mlo__b--ok {
  background: var(--pd-ok);
  color: #fff;
}

.mlo__b--ink {
  background: var(--ink);
  color: var(--pd-inv);
}

.mlo__b--ok:hover,
.mlo__b--ink:hover {
  filter: brightness(1.12);
}

.mlo__b--line {
  border: 1px solid var(--up-ln2);
  color: var(--body);
}

.mlo__b--line:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.mlo__res {
  align-self: flex-start;
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--mute);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.mlo__res[hidden] {
  display: none;
}

.mlo__res--a {
  background: var(--pd-ok);
}

.mlo__res--c {
  background: #111418;
}

.mlstrip {
  padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 30);
  background: rgba(29, 95, 209, .1);
  color: var(--ml-tip);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.mlstrip--draft {
  background: var(--acc-a08);
  color: var(--acc);
}

.mlstrip--sold {
  background: var(--bg);
  color: var(--body);
}

.mlstrip__t {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: max(12px, calc(var(--u) * 16));
}

.mlstrip__a {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--u) * 6);
}

.mla {
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 20);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 25);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: border-color .2s, color .2s, filter .2s;
}

.mla:hover:not(:disabled) {
  border-color: var(--acc);
  color: var(--acc);
}

.mla--ink {
  border-color: transparent;
  background: var(--ink);
  color: var(--pd-inv);
}

.mla--acc {
  border-color: transparent;
  background: var(--acc);
  color: #fff;
}

.mla--ink:hover:not(:disabled),
.mla--acc:hover:not(:disabled) {
  border-color: transparent;
  color: var(--pd-inv);
  filter: brightness(1.1);
}

.mla--acc:hover:not(:disabled) {
  color: #fff;
}

.mla--mute {
  border-color: transparent;
  color: var(--mute);
}

.mla[aria-pressed="true"] {
  border-color: var(--pd-ok);
  color: var(--pd-ok);
}

.mla--acc[aria-pressed="true"] {
  background: var(--pd-ok);
  color: #fff;
}

.mla:disabled {
  opacity: .4;
  cursor: default;
}

.ml__toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 60;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 14px 20px;
  background: #111418;
  color: #f2f3f5;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: opacity .3s, transform .3s;
}

.ml__toast.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.ml__undo {
  color: var(--acc);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  text-decoration: underline;
}

/* == 185. Account · My listings — tablet and phone ===================== */
@media (max-width: 1999px) {
  .mlg3 {
    grid-template-columns: calc(var(--u) * 340) minmax(0, 1fr);
  }

  .mlr {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1599px) {
  .mlks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mlstrip {
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--u) * 14);
    border-radius: calc(var(--u) * 24);
  }

  .mlstrip__a {
    justify-content: flex-start;
  }
}

@media (max-width: 1199px) {
  .mlg3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .mlt__ph {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 25 px buttons; the page gets a finger-sized scale */
  .mlw {
    --u: .8px;
  }

  .mlks {
    gap: 10px;
  }

  .mlk {
    padding: 16px;
  }

  .mlk__v {
    font-size: 32px;
  }

  .mlsell {
    margin-left: 0;
  }

  .ml {
    padding: 10px;
  }

  .mlt__b {
    padding: 4px 6px;
  }

  .mlt__t {
    font-size: 24px;
  }

  .mls {
    grid-template-columns: 1fr 1fr;
  }

  .mlo__top {
    flex-wrap: wrap;
  }

  .mlo__amt {
    width: 100%;
    margin-left: 52px;
    align-items: flex-start;
  }

  .mlstrip__a .mla {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* == 186. Account · Orders — filters and the active order ============== */
.uo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.uopills,
.uosps,
.uors,
.uois,
.uorm__ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uobar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.uopills {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.uopill {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.uopill__n {
  opacity: .6;
}

.uopill.is-on {
  background: var(--ink);
  color: var(--pd-inv);
}

.uobar__div {
  width: 1px;
  height: calc(var(--u) * 28);
  margin: 0 calc(var(--u) * 6);
  background: var(--up-ln2);
}

.uoseg {
  padding: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
}

.uoseg__b {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.uoseg__b[aria-pressed="true"] {
  background: var(--acc);
  color: #fff;
}

.uobar__q {
  flex: 1;
  min-width: calc(var(--u) * 260);
  max-width: calc(var(--u) * 460);
  height: calc(var(--u) * 54);
  margin-left: auto;
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 27);
  background: var(--surf);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.uobar__q:focus-within {
  box-shadow: 0 0 0 1px var(--acc);
}

.uobar__i {
  flex-shrink: 0;
}

.uobar__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 52);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
}

.uobar__in::placeholder {
  color: var(--mute);
}

.uoact {
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.uoact[hidden] {
  display: none;
}

.uoact__g {
  display: grid;
  grid-template-columns: calc(var(--u) * 340) minmax(0, 1fr) calc(var(--u) * 380);
  gap: calc(var(--u) * 28);
  align-items: stretch;
}

.uoact__ph {
  position: relative;
  min-height: calc(var(--u) * 240);
  border-radius: calc(var(--u) * 24);
  overflow: hidden;
  background: var(--stripes);
}

.uoact__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uoact__b {
  min-width: 0;
  padding: calc(var(--u) * 10) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.uoact__m,
.uoact__t,
.uoact__s,
.uoact__tot,
.uoact__k,
.uoact__date,
.uoact__es,
.uoact__btns {
  margin: 0;
}

.uoact__m {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.uoact__st {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--acc-a12);
  color: var(--acc);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.uost__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.uoact__t {
  font-size: max(12px, calc(var(--u) * 36));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.08;
}

.uoact__s {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.uoact__tot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.uoact__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.uoact__v {
  font-size: max(12px, calc(var(--u) * 38));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.uoact__eta {
  min-width: 0;
  padding: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 26);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.uoact__date {
  font-size: max(12px, calc(var(--u) * 38));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.05;
  white-space: nowrap;
}

.uoact__es {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.uoact__btns {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 8);
}

.uoact__track,
.uoact__re {
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 26);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.uoact__track {
  background: var(--acc);
  color: #fff;
}

.uoact__track:hover {
  color: #fff;
  filter: brightness(1.08);
}

.uoact__re {
  border: 1px solid var(--up-ln2);
  color: var(--ink);
  transition: border-color .2s, color .2s, background .2s;
}

.uoact__re:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.uoact__re[aria-pressed="true"] {
  border-color: var(--pd-ok);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.uosps {
  padding: calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 14);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.uosp {
  --t: var(--mute);
  --ln: var(--uo-trk);
  padding-right: calc(var(--u) * 12);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.uosp__h {
  display: flex;
  align-items: center;
}

.uosp__n {
  flex-shrink: 0;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  background: var(--uo-trk);
  color: var(--mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.uosp__ln {
  flex: 1;
  height: calc(var(--u) * 4);
  margin-left: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 2);
  background: var(--ln);
}

.uosp:last-child .uosp__ln {
  visibility: hidden;
}

.uosp--done {
  --ln: var(--pd-ok);
}

.uosp--done .uosp__n {
  background: var(--pd-ok);
  color: #fff;
}

.uosp--cur .uosp__n {
  background: var(--acc);
  box-shadow: 0 0 0 6px var(--acc-a20);
  color: #fff;
}

.uosp__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.uosp--next .uosp__t {
  color: var(--mute);
}

.uosp__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

:root {
  --uo-trk: #e6e8eb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --uo-trk: rgba(242, 243, 245, .12);
  }
}

:root[data-theme="dark"] {
  --uo-trk: rgba(242, 243, 245, .12);
}

/* == 187. Account · Orders — order cards ================================ */
.uoempty {
  padding: calc(var(--u) * 60);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 8);
  text-align: center;
}

.uoempty[hidden] {
  display: none;
}

.uoempty__t,
.uoempty__d {
  margin: 0;
}

.uoempty__t {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.uoempty__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.uors {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.uor {
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  transition: box-shadow .2s;
}

.uor[hidden] {
  display: none;
}

.uor.is-open {
  box-shadow: 0 0 0 1.5px var(--acc);
}

.uor__h {
  width: 100%;
  padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 14) calc(var(--u) * 14);
  display: grid;
  grid-template-columns: calc(var(--u) * 230) minmax(0, 1fr) calc(var(--u) * 170) calc(var(--u) * 200) calc(var(--u) * 48);
  gap: calc(var(--u) * 24);
  align-items: center;
  text-align: left;
}

.uor__th {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.uot {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 68);
  height: calc(var(--u) * 68);
  border-radius: calc(var(--u) * 18);
  overflow: hidden;
  background: var(--stripes);
}

.uot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uot__txt {
  position: absolute;
  inset: 0;
  background: var(--ink);
  color: var(--pd-inv);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 18));
}

.uot__more {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.uor__tt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.uor__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.uor__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.uost {
  --t: var(--mute);
  --tb: rgba(138, 144, 153, .14);
  justify-self: start;
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.uost--progress {
  --t: var(--acc);
  --tb: var(--acc-a12);
}

.uost--transit {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .12);
}

.uost--delivered {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.uost--return {
  --t: var(--gr-amber);
  --tb: rgba(201, 138, 18, .12);
}

.uor__tot {
  text-align: right;
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  white-space: nowrap;
}

.uor__chev {
  justify-self: end;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: var(--bg);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
  transition: transform .25s;
}

.uor.is-open .uor__chev {
  transform: rotate(90deg);
}

.uor__w {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--pd-ease);
}

.uor.is-open .uor__w {
  grid-template-rows: 1fr;
}

.uor__in {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility .35s;
}

.uor.is-open .uor__in {
  visibility: visible;
}

.uor__cols {
  padding: 0 calc(var(--u) * 16);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 12);
}

.uoc {
  min-width: 0;
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.uoc--ship {
  gap: calc(var(--u) * 16);
}

.uoc--ship > div {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.uok {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.uoc > .uok {
  padding-bottom: calc(var(--u) * 6);
}

.uoc__v {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  line-height: 1.45;
}

.uoi {
  padding: calc(var(--u) * 8) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 50) calc(var(--u) * 110);
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
}

.uoi__q {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.uoi__p {
  text-align: right;
}

.uos {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.uos__r {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.uos__r dd {
  margin: 0;
}

.uos__r--ok dd {
  color: var(--pd-ok);
}

.uos__r--total {
  font-size: max(12px, calc(var(--u) * 20));
  color: var(--ink);
}

.uoacts {
  margin: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 16);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.uoa {
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 22);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 25);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}

.uoa:hover:not(:disabled) {
  border-color: var(--acc);
  color: var(--acc);
}

.uoa--acc,
.uoa--acc:hover:not(:disabled) {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.uoa.is-done {
  border-color: transparent;
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.uoa.is-amber {
  border-color: transparent;
  background: rgba(201, 138, 18, .12);
  color: var(--gr-amber);
}

.uoa:disabled {
  cursor: default;
}

/* == 188. Account · Orders — returns =================================== */
.uoret {
  padding: calc(var(--u) * 26) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.uoret[hidden] {
  display: none;
}

.uoret__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.uoret__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

.uoret__a {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--acc);
}

.uoret__a:hover {
  color: var(--ink);
}

.uorm {
  padding: calc(var(--u) * 18) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: calc(var(--u) * 30);
  align-items: center;
}

.uorm__b {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.uorm__t {
  font-size: max(12px, calc(var(--u) * 18));
}

.uorm__m {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.uorm__ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.uorm__s {
  --t: var(--uo-trk);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.uorm__s--done {
  --t: var(--pd-ok);
  color: var(--ink);
}

.uorm__s--cur {
  --t: var(--gr-amber);
  color: var(--ink);
}

.uorm__bar {
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--t);
}

.uo__toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 60;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 14px 20px;
  background: #111418;
  color: #f2f3f5;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: opacity .3s, transform .3s;
}

.uo__toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* == 189. Account · Orders — tablet and phone ========================== */
@media (max-width: 1999px) {
  .uoact__g {
    grid-template-columns: calc(var(--u) * 300) minmax(0, 1fr);
  }

  .uoact__eta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1599px) {
  .uobar__q {
    max-width: none;
    margin-left: 0;
  }

  .uor__h {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px 16px;
  }

  .uor__th {
    display: none;
  }

  .uor__tt {
    grid-column: 1 / -1;
    order: 3;
  }

  .uost {
    order: 2;
  }

  .uor__tot {
    order: 4;
    text-align: left;
  }

  .uor__chev {
    order: 5;
  }

  .uor__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .uorm {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

@media (max-width: 1199px) {
  .uoact__g {
    grid-template-columns: minmax(0, 1fr);
  }

  .uoact__ph {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .uobar__div {
    display: none;
  }

  .uoseg {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 25 px pills; the page gets a finger-sized scale */
  .uo {
    --u: .8px;
  }

  .uoact,
  .uoret {
    padding: 12px;
  }

  .uoact__t {
    font-size: 26px;
  }

  .uoact__date {
    font-size: 30px;
  }

  .uosps {
    padding: 4px 0 8px;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .uosp {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .uosp__ln {
    display: none;
  }

  .uor__h {
    padding: 14px;
  }

  .uor__cols {
    padding: 0 12px;
  }

  .uoc {
    padding: 16px;
  }

  .uoi {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .uoacts {
    padding: 12px;
  }

  .uoa {
    flex: 1 1 auto;
    justify-content: center;
  }

  .uorm__ul {
    grid-template-columns: 1fr 1fr;
    gap: 10px 8px;
  }
}

/* == 190. Account · Test drives — the next drive ======================= */
.td {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.tdchips,
.tdws,
.tdbrs,
.tdrows,
.tdtabs,
.tdq__ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tdk {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.tdn {
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.tdn[hidden] {
  display: none;
}

.tdn__g {
  display: grid;
  grid-template-columns: calc(var(--u) * 340) minmax(0, 1fr) calc(var(--u) * 400);
  gap: calc(var(--u) * 28);
  align-items: stretch;
}

.tdn__r {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: calc(var(--u) * 12);
}

.tdn__l {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 12);
}

.tdn__ph {
  position: relative;
  min-height: calc(var(--u) * 260);
  border-radius: calc(var(--u) * 24);
  overflow: hidden;
  background: var(--stripes);
}

.tdn__img,
.tdr__img,
.tdq__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tdn__up {
  position: absolute;
  left: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  color: var(--acc);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.tdn__car {
  min-width: 0;
  padding: calc(var(--u) * 10) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tdn__m,
.tdn__meta,
.tdn__t,
.tdn__pr,
.tdn__date,
.tdn__time,
.tdcd,
.tdn__cnt,
.tdn__rt,
.tdrss,
.tdc__note,
.tdn__wh,
.tdn__ad,
.tdacts {
  margin: 0;
}

.tdn__m {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tdst {
  --t: var(--mute);
  --tb: rgba(138, 144, 153, .14);
  justify-self: start;
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tdn__m .tdst {
  height: calc(var(--u) * 32);
}

.tdst__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.tdst--confirmed {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.tdst--pending {
  --t: var(--gr-amber);
  --tb: rgba(201, 138, 18, .12);
}

.tdst--completed {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .12);
}

.tdn__meta {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.tdn__t {
  font-size: max(12px, calc(var(--u) * 40));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.tdn__pr {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.tdsp {
  margin-top: auto;
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.tdsp__av {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
}

.tdsp__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tdsp__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.tdsp__n {
  font-size: max(12px, calc(var(--u) * 17));
}

.tdsp__r {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tdsp__go,
.tdr__pre {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--surf);
  color: var(--acc);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.tdsp__go {
  margin-left: auto;
}

.tdsp__go:hover,
.tdr__pre:hover {
  background: var(--acc);
  color: #fff;
}

.tdn__when {
  min-width: 0;
  padding: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 26);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.tdn__date {
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.05;
  white-space: nowrap;
}

.tdn__time {
  font-size: max(12px, calc(var(--u) * 56));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--acc);
}

.tdcd {
  margin-top: calc(var(--u) * 8);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.tdcd__c {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.tdcd__v {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  line-height: 1;
}

.tdcd__k,
.tdrs__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tdn__cnt {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

/* == 191. Account · Test drives — route, logistics, actions ============ */
.tdc {
  min-width: 0;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.tdc--acts {
  gap: calc(var(--u) * 10);
}

.tdc__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tdc__note {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.tdn__rt {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.tdrss {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 22);
}

.tdrs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.tdrs__v {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  line-height: 1;
}

.tdseg {
  flex-shrink: 0;
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  display: flex;
}

.tdseg--route {
  align-self: flex-start;
  margin-top: calc(var(--u) * 4);
}

.tdseg__b {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 19);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.tdc__h .tdseg__b {
  height: calc(var(--u) * 36);
  border-radius: calc(var(--u) * 18);
}

.tdseg__b[aria-pressed="true"] {
  background: var(--acc);
  color: #fff;
}

.tdws {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tdw {
  padding-right: calc(var(--u) * 12);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.tdw__l {
  display: flex;
  align-items: center;
}

.tdw__dot {
  flex-shrink: 0;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border: 2px solid var(--acc);
  border-radius: 50%;
}

.tdw--first .tdw__dot {
  background: var(--acc);
}

.tdw__ln {
  flex: 1;
  height: 3px;
  margin-left: calc(var(--u) * 8);
  border-radius: 2px;
  background: var(--up-ln2);
}

.tdw:last-child .tdw__ln {
  background: none;
}

.tdw__t {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.tdw__d {
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
  line-height: 1.35;
}

.tdchips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.tdchip {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 19);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.tdchip--slot {
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 20);
}

.tdchip:hover {
  border-color: var(--acc);
}

.tdchip[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.tdn__wh {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.tdn__ad {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.tdmap {
  position: relative;
  height: calc(var(--u) * 120);
  border-radius: calc(var(--u) * 18);
  background: var(--stripes);
}

.tdmap__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 7px var(--acc-a20);
  transform: translate(-50%, -50%);
}

.tdbrs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.tdbr {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
}

.tdbr__m {
  flex-shrink: 0;
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border: 1px solid var(--up-ln2);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.tdbr.is-ok .tdbr__m {
  border-color: var(--pd-ok);
  background: var(--pd-ok);
}

.tdbr__t {
  flex: 1;
  min-width: 0;
}

.tdbr__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
  white-space: nowrap;
}

.tdbr.is-ok .tdbr__s {
  color: var(--pd-ok);
}

.tdbr__up:hover {
  color: var(--ink);
}

.tdacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 8);
}

.tda {
  min-width: 0;
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 24);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.tda:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.tda--ink,
.tda--ink:hover {
  border-color: transparent;
  background: var(--ink);
  color: var(--surf);
}

.tda.is-done {
  border-color: var(--pd-ok);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.tda[aria-expanded="true"],
.tda.is-warn {
  border-color: var(--acc);
  color: var(--acc);
}

.tda[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.tdslots {
  padding-top: calc(var(--u) * 4);
}

.tdslots[hidden] {
  display: none;
}

/* == 192. Account · Test drives — tabs, drive cards, quick book ======== */
.tdbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.tdtabs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.tdtab {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.tdtab__n {
  opacity: .6;
}

.tdtab.is-on {
  background: var(--ink);
  color: var(--pd-inv);
}

.tdbar__go {
  flex-shrink: 0;
  margin-left: auto;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 28);
  background: var(--acc);
  box-shadow: 0 12px 30px var(--acc-a25);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 16));
  white-space: nowrap;
}

.tdbar__go:hover {
  color: #fff;
  filter: brightness(1.08);
}

.tdbar__plus {
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  border-radius: 50%;
  background: #fff;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 22));
}

.tdempty {
  padding: calc(var(--u) * 60);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 8);
  text-align: center;
}

.tdempty[hidden] {
  display: none;
}

.tdempty__t,
.tdempty__d {
  margin: 0;
}

.tdempty__t {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.tdempty__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.tdrows {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.tdr {
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  transition: box-shadow .2s;
}

.tdr[hidden] {
  display: none;
}

.tdr.is-open {
  box-shadow: 0 0 0 1.5px var(--acc);
}

.tdr__h {
  width: 100%;
  padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 14) calc(var(--u) * 14);
  display: grid;
  grid-template-columns: calc(var(--u) * 96) calc(var(--u) * 130) minmax(0, 1fr) calc(var(--u) * 300) calc(var(--u) * 170) calc(var(--u) * 48);
  gap: calc(var(--u) * 22);
  align-items: center;
  text-align: left;
}

.tdr__day {
  height: calc(var(--u) * 84);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
}

.tdr__d {
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
  line-height: 1;
}

.tdr__m,
.tdr__k,
.tdr__terms {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tdr__ph {
  position: relative;
  width: calc(var(--u) * 130);
  height: calc(var(--u) * 84);
  border-radius: calc(var(--u) * 20);
  overflow: hidden;
  background: var(--stripes);
}

.tdr__tt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.tdr__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.tdr__wh {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.tdr__chev {
  justify-self: end;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: var(--bg);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
  opacity: 0;
  transition: transform .25s;
}

.tdr--past .tdr__chev {
  opacity: 1;
}

.tdr.is-open .tdr__chev {
  transform: rotate(90deg);
}

.tdr__w {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--pd-ease);
}

.tdr.is-open .tdr__w {
  grid-template-rows: 1fr;
}

.tdr__in {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility .35s;
}

.tdr.is-open .tdr__in {
  visibility: visible;
}

.tdr__cols {
  padding: 0 calc(var(--u) * 16) calc(var(--u) * 16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: calc(var(--u) * 12);
}

.tdr__cols > .tdc {
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22);
}

.tdr__cols > .tdc:last-child {
  gap: calc(var(--u) * 8);
}

.tdstars {
  margin: 0;
  display: flex;
  gap: calc(var(--u) * 6);
}

.tdstar {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border: 1px solid var(--up-ln2);
  border-radius: 50%;
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 18));
  transition: background .2s, border-color .2s, color .2s;
}

.tdstar[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.tdr__note {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 16);
  border: 0;
  border-radius: calc(var(--u) * 16);
  outline: none;
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
}

.tdr__note:focus {
  box-shadow: 0 0 0 1px var(--acc);
}

.tdr__note::placeholder {
  color: var(--mute);
}

.tdr__thx {
  min-height: 1.2em;
  margin: 0;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.tdr__mo {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
}

.tdr__mov {
  font-size: max(12px, calc(var(--u) * 36));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1;
}

.tdr__terms {
  margin: 0;
}

.tdr__pre {
  height: calc(var(--u) * 46);
  margin-top: auto;
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 23);
  align-self: flex-start;
}

.tdq {
  padding: calc(var(--u) * 26) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.tdq__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.tdq__tt,
.tdq__sub {
  margin: 0;
}

.tdq__tt {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

.tdq__sub {
  margin-top: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.tdq__all {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--acc);
  white-space: nowrap;
}

.tdq__all:hover {
  color: var(--ink);
}

.tdq__ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 12);
}

.tdq__c {
  min-width: 0;
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 130) minmax(0, 1fr);
  gap: calc(var(--u) * 18);
}

.tdq__ph {
  position: relative;
  height: calc(var(--u) * 96);
  border-radius: calc(var(--u) * 18);
  overflow: hidden;
  background: var(--stripes);
}

.tdq__b {
  min-width: 0;
  padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 4) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tdq__h {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
}

.tdq__t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.tdq__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  white-space: nowrap;
}

.tdq__s.is-ok {
  color: var(--pd-ok);
}

.tdq__c .tdchip {
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 20);
}

/* == 193. Account · Test drives — tablet and phone ===================== */
@media (max-width: 1999px) {
  .tdn__g {
    grid-template-columns: calc(var(--u) * 300) minmax(0, 1fr);
  }

  .tdn__when {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1599px) {
  .tdn__r,
  .tdn__l {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .tdn__r > .tdc:nth-child(3),
  .tdn__l > .tdc:nth-child(3) {
    grid-column: 1 / -1;
  }

  .tdr__h {
    grid-template-columns: auto 120px minmax(0, 1fr) auto;
    gap: 10px 16px;
  }

  .tdr__wh {
    grid-column: 3 / -1;
    grid-row: 2;
  }

  .tdst {
    grid-column: 2;
    grid-row: 2;
  }

  .tdr__chev {
    grid-column: 4;
    grid-row: 1;
  }

  .tdr__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .tdq__ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1199px) {
  .tdn__g {
    grid-template-columns: minmax(0, 1fr);
  }

  .tdn__ph {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 20 px buttons here; controls need a finger-sized scale */
  .td {
    --u: .8px;
  }

  .tdn {
    padding: 10px;
  }

  .tdn__r,
  .tdn__l {
    grid-template-columns: minmax(0, 1fr);
  }

  .tdn__r > .tdc,
  .tdn__l > .tdc {
    grid-column: auto;
  }

  .tdc,
  .tdn__when {
    padding: 18px 16px;
  }

  .tdn__t {
    font-size: 28px;
  }

  .tdsp {
    flex-wrap: wrap;
  }

  .tdsp__go {
    margin-left: 66px;
  }

  .tdws {
    grid-template-columns: 1fr 1fr;
    gap: 16px 0;
  }

  .tdw:nth-child(2) .tdw__ln {
    background: none;
  }

  .tdc__h {
    flex-wrap: wrap;
  }

  .tdbar__go {
    margin-left: 0;
  }

  .tdr__h {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 12px;
  }

  .tdr__ph {
    display: none;
  }

  .tdr__tt {
    grid-column: 2;
  }

  .tdr__chev {
    grid-column: 3;
  }

  .tdr__wh {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .tdst {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .tdr__cols {
    padding: 0 12px 12px;
  }

  .tdq {
    padding: 18px 16px;
  }

  .tdq__c {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 14px;
  }

  .tdq__h {
    flex-direction: column;
    gap: 4px;
  }

  .tdq__hd {
    flex-direction: column;
    gap: 8px;
  }
}

/* == 194. Account · Trade-in — the instant offer ======================= */
.tx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.txcms,
.txcas,
.txsps,
.txchips,
.txrs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.txk {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.txo {
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.txo__g {
  display: grid;
  grid-template-columns: calc(var(--u) * 300) minmax(0, 1fr) calc(var(--u) * 480);
  gap: calc(var(--u) * 28);
  align-items: stretch;
}

.txo__ph {
  position: relative;
  min-height: calc(var(--u) * 280);
  border-radius: calc(var(--u) * 24);
  overflow: hidden;
  background: var(--stripes);
}

.txo__img,
.txr__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.txo__chip {
  position: absolute;
  left: calc(var(--u) * 14);
  bottom: calc(var(--u) * 14);
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  color: var(--body);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.txo__chip:hover {
  color: var(--acc);
}

.txo__car {
  min-width: 0;
  padding: calc(var(--u) * 10) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.txo__m,
.txo__vin,
.txo__t,
.txo__s,
.txo__v,
.txcd,
.txo__lock,
.txo__btns {
  margin: 0;
}

.txo__m {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.txo__st {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.txo.is-dec .txo__st {
  background: rgba(138, 144, 153, .14);
  color: var(--mute);
}

.txo__dot,
.txst__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.txo__valid {
  margin-left: auto;
  color: var(--acc);
}

.txo__vin {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.txo__t {
  font-size: max(12px, calc(var(--u) * 40));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.txo__s {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.txo__cmp {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.txcms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.txcm {
  min-width: 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.txcm--us {
  background: var(--acc-a08);
  box-shadow: 0 0 0 1.5px var(--acc);
}

.txcm__k,
.txcm__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.txcm__v {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
  line-height: 1.1;
  white-space: nowrap;
}

.txcm--us .txcm__v {
  color: var(--acc);
}

.txo__of {
  min-width: 0;
  padding: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 26);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.txo__v {
  font-size: max(12px, calc(var(--u) * 56));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--acc);
  white-space: nowrap;
}

.txcd {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.txcd__c {
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.txcd__v {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
  line-height: 1;
}

.txcd__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.txo.is-dec .txcd {
  opacity: .4;
}

.txo__lock {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.txo__btns {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: calc(var(--u) * 8);
}

.txb {
  min-width: 0;
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 27);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.txb:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.txb--acc,
.txb--acc:hover {
  border-color: transparent;
  background: var(--acc);
  color: #fff;
}

.txb--acc[aria-pressed="true"] {
  background: var(--pd-ok);
}

.txb--acc:disabled {
  background: var(--mute);
  cursor: default;
}

.txb[aria-expanded="true"] {
  border-color: var(--acc);
  color: var(--acc);
}

.txb.is-done {
  border-color: var(--pd-ok);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.txo__dec {
  align-self: center;
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.txo__dec:hover {
  color: var(--acc);
}

.txslots {
  padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--acc-a08);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8) calc(var(--u) * 16);
}

.txslots[hidden] {
  display: none;
}

.txslots__k {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--acc);
}

.txchips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.txchip {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 21);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.txchip:hover {
  border-color: var(--acc);
}

.txchip[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

/* == 195. Account · Trade-in — breakdown, payout, tracker ============== */
.txo__r {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(var(--u) * 12);
}

.txc {
  min-width: 0;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.txc--po {
  gap: calc(var(--u) * 12);
}

.txk--pad {
  padding-bottom: calc(var(--u) * 8);
}

.txca {
  --t: var(--ink);
  padding: calc(var(--u) * 9) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 220) calc(var(--u) * 120);
  gap: calc(var(--u) * 16);
  align-items: center;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  line-height: 1.5;
}

.txca--pos {
  --t: var(--pd-ok);
}

.txca--neg {
  --t: var(--gr-amber);
}

.txca--tot {
  --t: var(--acc);
  font-weight: 400;
}

.txca__k {
  min-width: 0;
}

.txca__bar {
  position: relative;
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 5);
  background: var(--up-tile);
}

.txca__f {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: calc(var(--u) * 5);
  background: var(--t);
}

.txca__v {
  text-align: right;
  color: var(--t);
  white-space: nowrap;
}

.txpo {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border: 1.5px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  display: grid;
  grid-template-columns: calc(var(--u) * 26) minmax(0, 1fr);
  gap: calc(var(--u) * 14);
  align-items: start;
  cursor: pointer;
  transition: border-color .2s;
}

.txpo.is-on {
  border-color: var(--acc);
}

.txpo__in {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.txpo__r {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  border: 2px solid var(--up-ln2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.txpo__r::after {
  content: "";
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  border-radius: 50%;
}

.txpo.is-on .txpo__r {
  border-color: var(--acc);
}

.txpo.is-on .txpo__r::after {
  background: var(--acc);
}

.txpo__in:focus-visible + .txpo__r {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.txpo__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.txpo__t {
  font-size: max(12px, calc(var(--u) * 18));
}

.txpo__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.txap {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.txap[hidden] {
  display: none;
}

.txap__h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.txap__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.txseg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
}

.txseg__b {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.txseg__b[aria-pressed="true"] {
  background: var(--acc);
  color: #fff;
}

.txap__eq {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.txap__op {
  color: var(--mute);
}

.txap__mo {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.txap__mov {
  font-size: max(12px, calc(var(--u) * 36));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1;
}

.txap__save {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.txsps {
  padding: calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 14);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.txsp {
  --ln: var(--uo-trk);
  min-width: 0;
  padding-right: calc(var(--u) * 12);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.txsp__h {
  display: flex;
  align-items: center;
}

.txsp__n {
  flex-shrink: 0;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  background: var(--uo-trk);
  color: var(--mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.txsp__ln {
  flex: 1;
  height: calc(var(--u) * 4);
  margin-left: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 2);
  background: var(--ln);
}

.txsp:last-child .txsp__ln {
  visibility: hidden;
}

.txsp--done {
  --ln: var(--pd-ok);
}

.txsp--done .txsp__n {
  background: var(--pd-ok);
  color: #fff;
}

.txsp--cur .txsp__n {
  background: var(--acc);
  box-shadow: 0 0 0 6px var(--acc-a20);
  color: #fff;
}

.txsp__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.txsp--next .txsp__t {
  color: var(--mute);
}

.txsp__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 196. Account · Trade-in — my offers on other cars ================= */
.txof {
  padding: calc(var(--u) * 26) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.txof__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.txof__t,
.txof__s {
  margin: 0;
}

.txof__t {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

.txof__s {
  margin-top: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.txof__n {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
  white-space: nowrap;
}

.txrs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.txr {
  padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 120) minmax(0, 1fr) calc(var(--u) * 230) calc(var(--u) * 200) calc(var(--u) * 170) auto;
  gap: calc(var(--u) * 22);
  align-items: center;
  transition: background .25s;
}

.txr.is-counter {
  background: rgba(29, 95, 209, .07);
}

.txr__ph {
  position: relative;
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 80);
  border-radius: calc(var(--u) * 18);
  overflow: hidden;
  background: var(--stripes);
}

.txr__tt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.txr__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 19));
  font-weight: 300;
}

.txr__k,
.txr__mk,
.txr__ctr {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  white-space: nowrap;
}

.txr.is-counter .txr__ctr {
  color: var(--ml-blue);
}

.txr__mine {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.txr__mt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 8);
}

.txr__mv {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  white-space: nowrap;
}

.txr__pb {
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--up-tile);
}

.txr__pf {
  display: block;
  height: 100%;
  border-radius: calc(var(--u) * 4);
  background: var(--acc);
  transition: width .35s var(--pd-ease);
}

.txr__ask {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.txr__av {
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.txst {
  --t: var(--mute);
  --tb: rgba(138, 144, 153, .14);
  justify-self: start;
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.txst--pending,
.txst--raised {
  --t: var(--gr-amber);
  --tb: rgba(201, 138, 18, .12);
}

.txst--countered {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .12);
}

.txst--accepted {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.txr__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--u) * 8);
}

.txa {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 23);
  background: var(--surf);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: border-color .2s, color .2s, filter .2s;
}

.txa:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.txa--ok,
.txa--ok:hover {
  border-color: var(--pd-ok);
  background: var(--pd-ok);
  color: #fff;
}

.txa--ok:hover {
  filter: brightness(1.08);
}

/* == 197. Account · Trade-in — tablet and phone ======================== */
@media (max-width: 1999px) {
  .txo__g {
    grid-template-columns: calc(var(--u) * 280) minmax(0, 1fr);
  }

  .txo__of {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1599px) {
  .txo__r {
    grid-template-columns: minmax(0, 1fr);
  }

  .txr {
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 12px 18px;
  }

  .txr__ph {
    grid-row: span 2;
  }

  .txr__tt {
    grid-column: 2 / -1;
  }

  .txr__mine {
    grid-column: 2;
  }

  .txst {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
  }

  .txr__ask {
    grid-column: 2 / -1;
  }

  .txr__acts {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 1199px) {
  .txo__g {
    grid-template-columns: minmax(0, 1fr);
  }

  .txo__ph {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .txsps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 18px;
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 27 px buttons here; controls need a finger-sized scale */
  .tx {
    --u: .8px;
  }

  .txo {
    padding: 10px;
  }

  .txo__of,
  .txc {
    padding: 18px 16px;
  }

  .txo__t {
    font-size: 28px;
  }

  .txo__v {
    font-size: 44px;
  }

  .txcms {
    grid-template-columns: minmax(0, 1fr);
  }

  .txo__btns {
    grid-template-columns: minmax(0, 1fr);
  }

  .txca {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }

  .txca__bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .txsps {
    padding: 4px 0 8px;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .txsp {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .txsp__ln {
    display: none;
  }

  .txslots {
    padding: 14px 16px;
    border-radius: 22px;
  }

  .txof {
    padding: 18px 16px;
  }

  .txof__hd {
    flex-direction: column;
    gap: 6px;
  }

  .txr {
    padding: 12px;
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .txr__ph {
    width: 90px;
    height: 60px;
    grid-row: auto;
  }

  .txr__tt {
    grid-column: 2;
  }

  .txr__mine,
  .txr__ask {
    grid-column: 1 / -1;
  }

  .txst {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .txr__acts .txa {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* == 198. Account · Messages — the conversation list =================== */
:root {
  --ms-tile: #f2f3f5;
  --ms-off: #c5c9cf;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ms-tile: #22262c;
    --ms-off: #3a3f47;
  }
}

:root[data-theme="dark"] {
  --ms-tile: #22262c;
  --ms-off: #3a3f47;
}

.ms {
  min-width: 0;
  display: grid;
  grid-template-columns: calc(var(--u) * 560) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
}

.msfs,
.msrows,
.mst__msgs,
.mscomp__q,
.msdl__ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mslist {
  min-width: 0;
  height: calc(var(--u) * 1180);
  padding: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.mslist__q {
  flex-shrink: 0;
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 26);
  background: var(--bg);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.mslist__q:focus-within {
  box-shadow: 0 0 0 1px var(--acc);
}

.mslist__i {
  flex-shrink: 0;
}

.mslist__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 50);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
}

.mslist__in::placeholder {
  color: var(--mute);
}

.msfs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.msf {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.msf__n {
  opacity: .6;
}

.msf.is-on {
  background: var(--ink);
  color: var(--surf);
}

.msrows {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.msrows > li[hidden] {
  display: none;
}

.msr {
  width: 100%;
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 24);
  color: var(--ink);
  display: grid;
  grid-template-columns: calc(var(--u) * 56) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 14);
  align-items: center;
  text-align: left;
  transition: background .2s;
}

.msr:hover {
  background: var(--bg);
}

.msr.is-on {
  background: var(--acc-a10);
}

.msav {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: 50%;
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 19));
}

.msav--team {
  background: var(--acc);
  color: #fff;
}

.msav__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.msav__on {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border: 3px solid var(--surf);
  border-radius: 50%;
  background: var(--pd-ok);
}

.msr__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.msr__n {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.msr__nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 17));
}

.msr.is-unread .msr__nm {
  font-weight: 500;
}

.msr__pin {
  flex-shrink: 0;
  color: var(--mute);
}

.msr__car,
.msr__last {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msr__car {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.msr__last {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.msr.is-unread .msr__last {
  color: var(--ink);
}

.msr__r {
  align-self: flex-start;
  padding-top: calc(var(--u) * 2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 8);
}

.msr__t {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  white-space: nowrap;
}

.msr__un {
  min-width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 7);
  border-radius: calc(var(--u) * 12);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.msempty {
  margin: 0;
  padding: calc(var(--u) * 40) 0;
  text-align: center;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.msempty[hidden] {
  display: none;
}

/* == 199. Account · Messages — the thread ============================== */
.mspane {
  min-width: 0;
  height: calc(var(--u) * 1180);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  overflow: hidden;
}

.mst {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mst[hidden] {
  display: none;
}

.mst__h {
  flex-shrink: 0;
  padding: calc(var(--u) * 18) calc(var(--u) * 22);
  border-bottom: 1px solid var(--up-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.mst__av {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  font-size: max(12px, calc(var(--u) * 17));
}

.mst__who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.mst__n,
.mst__s,
.mst__acts {
  margin: 0;
}

.mst__n {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 21));
  font-weight: 400;
}

.mst__ver {
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.mst__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mst__acts {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--u) * 8);
}

.msact {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 23);
  background: var(--ms-tile);
  color: var(--ink);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: filter .2s, color .2s;
}

.msact:hover {
  color: var(--acc);
}

.msact--ink,
.msact--ink:hover {
  background: var(--ink);
  color: var(--surf);
}

.msact--acc,
.msact--acc:hover {
  background: var(--acc);
  color: #fff;
}

.msact--ink:hover,
.msact--acc:hover {
  filter: brightness(1.1);
}

.mst__car {
  flex-shrink: 0;
  margin: calc(var(--u) * 14) calc(var(--u) * 22) 0;
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 96) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 16);
  align-items: center;
}

.mst__ph {
  position: relative;
  height: calc(var(--u) * 64);
  border-radius: calc(var(--u) * 16);
  overflow: hidden;
  background: var(--stripes);
}

.mst__img,
.mstd__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mst__cb {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.mst__ct {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 17));
}

.mst__cs {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mst__pr {
  padding-right: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  white-space: nowrap;
}

.mst__msgs {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.msm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 4);
}

.msm--me {
  align-items: flex-end;
}

.msm--day {
  align-items: center;
}

.msday {
  height: calc(var(--u) * 30);
  margin: calc(var(--u) * 8) 0;
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 15);
  background: var(--ms-tile);
  color: var(--mute);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.msb {
  max-width: 68%;
  margin: 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 6);
  background: var(--ms-tile);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 16));
  line-height: 1.45;
  text-wrap: pretty;
}

.msm--me .msb {
  border-radius: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 6) calc(var(--u) * 22);
  background: var(--ink);
  color: var(--surf);
}

.msm__meta {
  padding: 0 calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 200. Account · Messages — chat cards, typing, composer ============ */
.mscard {
  max-width: 100%;
  border: 1px solid var(--up-ln);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  box-shadow: 0 10px 30px rgba(17, 20, 24, .06);
}

.msof {
  width: calc(var(--u) * 440);
  padding: calc(var(--u) * 18);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.msof__h,
.msof__v,
.msof__n,
.msof__acts {
  margin: 0;
}

.msof__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.msof__k {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: var(--acc-a10);
  color: var(--acc);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.msof__by {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.msof__v {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.msof__amt {
  font-size: max(12px, calc(var(--u) * 38));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.msof__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.msof__d.is-ok {
  color: var(--pd-ok);
}

.msof__n {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.msof__acts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 6);
}

.msof__acts[hidden] {
  display: none;
}

.msof__b {
  height: calc(var(--u) * 46);
  border-radius: calc(var(--u) * 23);
  font-size: max(12px, calc(var(--u) * 15));
  transition: filter .2s, border-color .2s, color .2s;
}

.msof__b--ok {
  background: var(--pd-ok);
  color: #fff;
}

.msof__b--ink {
  background: var(--ink);
  color: var(--surf);
}

.msof__b--ok:hover,
.msof__b--ink:hover {
  filter: brightness(1.1);
}

.msof__b--line {
  border: 1px solid var(--up-ln2);
  color: var(--body);
}

.msof__b--line:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.msof__res {
  align-self: flex-start;
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  background: var(--ms-tile);
  color: var(--mute);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.msof__res[hidden] {
  display: none;
}

.msof__res--a {
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
}

.msof__res--c {
  color: var(--ink);
}

.mstd {
  width: calc(var(--u) * 440);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mstd__ph {
  position: relative;
  height: calc(var(--u) * 120);
  background: var(--stripes);
}

.mstd__b {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.mstd__k,
.mstd__w,
.mstd__p {
  margin: 0;
}

.mstd__k {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.mstd__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.mstd__w {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.mstd__p {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.mstd__cal {
  align-self: flex-start;
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 22);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  transition: background .2s, border-color .2s, color .2s;
}

.mstd__cal:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.mstd__cal[aria-pressed="true"] {
  border-color: var(--pd-ok);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.msdl {
  width: calc(var(--u) * 460);
  padding: calc(var(--u) * 18);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.msdl__h {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.msdl__h .acc {
  font-size: max(12px, calc(var(--u) * 14));
}

.msdl__ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 6);
}

.msdl__s {
  --t: var(--ms-tile);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--ink);
}

.msdl__s--done {
  --t: var(--pd-ok);
}

.msdl__s--cur {
  --t: var(--acc);
}

.msdl__s--next {
  color: var(--mute);
}

.msdl__bar {
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--t);
}

.mstyping {
  align-self: flex-start;
  height: calc(var(--u) * 44);
  margin: 0 calc(var(--u) * 22) calc(var(--u) * 10);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--ms-tile);
  color: var(--mute);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.mstyping[hidden] {
  display: none;
}

.mscomp {
  flex-shrink: 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 22) calc(var(--u) * 20);
  border-top: 1px solid var(--up-ln);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.mscomp__q {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.msq {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--acc-a35);
  border-radius: calc(var(--u) * 20);
  background: var(--acc-a04);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s;
}

.msq:hover {
  background: var(--acc-a10);
}

.mscomp__bar {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 30);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.mscomp__bar:focus-within {
  box-shadow: 0 0 0 1px var(--acc);
}

.mscomp__att {
  flex-shrink: 0;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: var(--surf);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 20));
}

.mscomp__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 56);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
}

.mscomp__in::placeholder {
  color: var(--mute);
}

.mscomp__send {
  flex-shrink: 0;
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 23);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  transition: background .2s;
}

.mscomp__send:disabled {
  background: var(--ms-off);
  cursor: default;
}

.mscomp__safe {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 201. Account · Messages — tablet and phone ======================== */
@media (max-width: 1999px) {
  .ms {
    grid-template-columns: calc(var(--u) * 440) minmax(0, 1fr);
  }

  .mst__h {
    flex-wrap: wrap;
  }

  .mst__acts {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 1199px) {
  .ms {
    grid-template-columns: minmax(0, 1fr);
  }

  .mslist {
    height: auto;
    max-height: 560px;
  }

  .mspane {
    height: 760px;
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 24 px pills; the inbox gets a finger-sized scale */
  .ms {
    --u: .8px;
  }

  .mslist {
    padding: 12px;
  }

  .mspane {
    height: 90vh;
    min-height: 640px;
  }

  .mst__car {
    padding: 8px;
  }

  .mst__ph {
    height: 48px;
  }

  .mst__h,
  .mst__msgs,
  .mscomp {
    padding-left: 14px;
    padding-right: 14px;
  }

  .mst__car {
    margin: 10px 14px 0;
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .mst__pr {
    grid-column: 2;
    padding: 0;
    font-size: 17px;
  }

  .msb {
    max-width: 86%;
  }

  .msof,
  .mstd,
  .msdl {
    width: 100%;
  }

  .msdl__ul {
    grid-template-columns: 1fr 1fr;
    gap: 10px 6px;
  }

  .mscomp__q {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .mstyping {
    margin: 0 14px 10px;
  }
}

/* == 202. Account · Payment methods — the wallet ======================= */
.pm {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.pmms,
.pmsubs,
.pmhs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pmms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) calc(var(--u) * 260);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.pmm {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.pmm[hidden] {
  display: none;
}

.pmc {
  height: calc(var(--u) * 250);
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 28);
  background: #111418;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow .2s;
}

.pmc--slate {
  background: #2a2e35;
}

.pmc--line {
  border: 1px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
}

.pmc--tile {
  background: var(--ms-tile);
  color: var(--ink);
}

.pmc--acc {
  background: var(--acc);
}

.pmm.is-def .pmc {
  box-shadow: 0 0 0 2px var(--acc);
}

.pmc__top,
.pmc__f,
.pmm__s,
.pmm__acts,
.pmm__cfm {
  margin: 0;
}

.pmc__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.pmc__b {
  font-size: max(12px, calc(var(--u) * 22));
  letter-spacing: -.01em;
}

.pmc__pill {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pmc__pill--def {
  display: none;
  background: var(--acc);
}

.pmm.is-def .pmc__pill--def {
  display: flex;
}

.pmc--acc .pmc__pill--def {
  background: #111418;
}

.pmc__pill--exp {
  background: var(--gr-amber);
}

.pmc__pill--exp[hidden] {
  display: none;
}

.pmc__chip {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 38);
  border-radius: calc(var(--u) * 10);
  background: rgba(255, 255, 255, .25);
}

.pmc--line .pmc__chip {
  background: var(--ms-tile);
}

.pmc--tile .pmc__chip {
  background: var(--up-ln2);
}

.pmc__f {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.pmc__n {
  min-height: 1.2em;
  font-size: max(12px, calc(var(--u) * 26));
  letter-spacing: .08em;
  white-space: nowrap;
}

.pmc__h {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
  opacity: .75;
}

.pmm__s {
  padding: 0 calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.pmm__acts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.pma {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 22);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}

.pma:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.pma--amber {
  color: var(--gr-amber);
}

.pma--mute {
  border-color: transparent;
  color: var(--mute);
}

.pmm__def {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--acc-a10);
  color: var(--acc);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.pmm__cfm {
  padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  background: var(--acc-a08);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.pmm__cfm[hidden] {
  display: none;
}

.pmm__q {
  flex: 1;
  min-width: 0;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.pmm__keep,
.pmm__yes {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pmm__keep {
  background: var(--surf);
  color: var(--ink);
}

.pmm__yes {
  background: var(--acc);
  color: #fff;
}

.pmnew {
  width: 100%;
  height: calc(var(--u) * 250);
  border: 1.5px dashed var(--up-ln2);
  border-radius: calc(var(--u) * 28);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 12);
  transition: border-color .2s;
}

.pmnew:hover,
.pmnew[aria-expanded="true"] {
  border-color: var(--acc);
}

.pmnew__plus {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
}

.pmnew__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.pmnew__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 203. Account · Payment methods — the add form ===================== */
.pmadd {
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  box-shadow: 0 0 0 1.5px var(--acc);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.pmadd[hidden],
.pmadd__p[hidden] {
  display: none;
}

.pmadd__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.pmadd__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.pmseg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: flex;
}

.pmseg__b {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 20);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.pmseg__b[aria-pressed="true"] {
  background: var(--surf);
  color: var(--acc);
}

.pmadd .pmseg__b[aria-pressed="true"] {
  background: var(--acc);
  color: #fff;
}

.pmfs {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: calc(var(--u) * 12);
}

.pmf {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
  cursor: text;
  transition: border-color .2s;
}

.pmf:focus-within {
  border-color: var(--acc);
}

.pmf__l {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.pmf__in {
  min-width: 0;
  height: calc(var(--u) * 30);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.pmf__in::placeholder {
  color: var(--mute);
}

.pmbank {
  padding: calc(var(--u) * 18) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.pmbank__i,
.pmbankrow__i {
  flex-shrink: 0;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: calc(var(--u) * 14);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.pmbank__b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.pmbank__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.pmbank__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.pmwal {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.pmwal__b {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 26);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 28);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 16));
}

.pmwal__b--ink {
  border-color: transparent;
  background: var(--ink);
  color: var(--surf);
}

.pmadd__ft {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.pmadd__note {
  flex: 1;
  min-width: 200px;
  margin: 0;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.pmadd__x,
.pmadd__go {
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 25);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.pmadd__x {
  border: 1px solid var(--up-ln2);
  color: var(--ink);
}

.pmadd__go {
  background: var(--acc);
  color: #fff;
  transition: background .2s;
}

.pmadd__go:disabled {
  background: var(--ms-off);
  cursor: default;
}

/* == 204. Account · Payment methods — finance, payouts, history ======== */
.pmmid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.pmfin {
  padding: calc(var(--u) * 28) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  background: var(--up-plus);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.pmfin__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.pmfin__t,
.pmfin__amt,
.pmfin__fs,
.pmfin__next {
  margin: 0;
}

.pmfin__t {
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 400;
  color: #a3a9b3;
}

.pmfin__amt {
  margin-top: calc(var(--u) * 4);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 16));
}

.pmfin__n {
  font-size: max(12px, calc(var(--u) * 48));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.pmfin__ring {
  --p: 3.33%;
  flex-shrink: 0;
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 96);
  border-radius: 50%;
  background: conic-gradient(var(--acc) 0 var(--p), rgba(255, 255, 255, .12) var(--p) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pmfin__in {
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 76);
  border-radius: 50%;
  background: var(--up-plus);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pmfin__pn {
  font-size: max(12px, calc(var(--u) * 20));
}

.pmfin__of,
.pmfin__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: #a3a9b3;
}

.pmfin__fs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.pmfin__f {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: rgba(255, 255, 255, .07);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.pmfin__v {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.pmfin__ft {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.pmfin__next {
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.pmfin__nv {
  font-size: max(12px, calc(var(--u) * 18));
}

.pmfin__auto {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 23);
  background: rgba(255, 255, 255, .08);
  color: inherit;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.pmfin__sw {
  position: relative;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 28);
  border-radius: calc(var(--u) * 14);
  background: var(--ms-off);
  transition: background .2s;
}

.pmfin__sw::after {
  content: "";
  position: absolute;
  top: calc(var(--u) * 4);
  left: calc(var(--u) * 4);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.pmfin__auto[aria-pressed="true"] .pmfin__sw {
  background: var(--pd-ok);
}

.pmfin__auto[aria-pressed="true"] .pmfin__sw::after {
  left: calc(var(--u) * 22);
}

.pmfin__pay {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 23);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s;
}

.pmfin__pay.is-done {
  background: var(--pd-ok);
  cursor: default;
}

.pmcard {
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.pmcard--subs {
  gap: calc(var(--u) * 12);
}

.pmcard__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.pmcard__t,
.pmcard__d,
.pmcard__kv {
  margin: 0;
}

.pmcard__t {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.pmcard__ok {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pmcard__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.pmbankrow {
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.pmbankrow__i {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 16);
}

.pmbankrow__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.pmbankrow__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.pmbankrow__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.pmbankrow__a {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.pmbankrow__a:hover {
  color: var(--acc);
}

.pmcard__kv {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.pmcard__kv > span:first-child {
  color: var(--mute);
}

.pmcard__ok2 {
  color: var(--pd-ok);
}

.pmsubs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.pmsub {
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 52) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 14);
  align-items: center;
}

.pmsub__i {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 16);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
}

.pmsub__i--amber {
  background: var(--gr-amber);
}

.pmsub__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.pmsub__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.pmsub__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.pmsub__r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 6);
}

.pmsub__amt {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  white-space: nowrap;
}

.pmsub__a {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.pmsub__a:hover {
  color: var(--ink);
}

.pmhist {
  padding: calc(var(--u) * 26) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.pmhist__h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.pmhist__t {
  margin: 0 auto 0 0;
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

.pmhs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.pmh {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 120) calc(var(--u) * 56) minmax(0, 1fr) calc(var(--u) * 220) calc(var(--u) * 160) calc(var(--u) * 150) calc(var(--u) * 150);
  gap: calc(var(--u) * 18);
  align-items: center;
}

.pmh[hidden] {
  display: none;
}

.pmh__d,
.pmh__via {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.pmh__i {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
}

.pmh__i--in {
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
}

.pmh__tt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.pmh__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 17));
}

.pmh__id {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.pmst {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .14);
  justify-self: start;
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 16);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pmst--amber {
  --t: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.pmst--blue {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .12);
}

.pmst__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.pmh__amt {
  text-align: right;
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  white-space: nowrap;
}

.pmh__amt.is-in {
  color: var(--pd-ok);
}

.pmh__rc {
  justify-self: end;
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}

.pmh__rc:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.pmh__rc.is-done {
  border-color: var(--pd-ok);
  color: var(--pd-ok);
}

/* == 205. Account · Payment methods — tablet and phone ================= */
@media (max-width: 1999px) {
  .pmms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pmmid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pmfin {
    grid-column: 1 / -1;
  }

  .pmh {
    grid-template-columns: calc(var(--u) * 110) calc(var(--u) * 56) minmax(0, 1fr) auto auto;
  }

  .pmh__via {
    display: none;
  }

  .pmh__rc {
    grid-column: 5;
  }
}

@media (max-width: 1599px) {
  .pmms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pmfs {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pmh {
    grid-template-columns: calc(var(--u) * 56) minmax(0, 1fr) auto;
    gap: 8px 14px;
  }

  .pmh__d {
    grid-column: 2;
    grid-row: 2;
    font-size: max(12px, calc(var(--u) * 14));
  }

  .pmh__i {
    grid-row: span 2;
  }

  .pmst {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }

  .pmh__amt {
    grid-column: 3;
    grid-row: 1;
  }

  .pmh__rc {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 1199px) {
  .pmmid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 22 px buttons; the wallet gets a finger-sized scale */
  .pm {
    --u: .8px;
  }

  .pmms {
    grid-template-columns: minmax(0, 1fr);
  }

  .pmc,
  .pmnew {
    height: 200px;
  }

  .pmfs {
    grid-template-columns: minmax(0, 1fr);
  }

  .pmadd,
  .pmfin,
  .pmcard,
  .pmhist {
    padding: 18px 16px;
  }

  .pmfin__n {
    font-size: 36px;
  }

  .pmfin__fs {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pmhist .pmseg {
    max-width: 100%;
    overflow-x: auto;
  }

  .pmh {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .pmh__i {
    width: 44px;
    height: 44px;
  }

  .pmh__amt,
  .pmst {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }
}

/* == 206. Account · Notifications — mode switch and the activity feed == */
:root {
  --nx-off: #d6d9de;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nx-off: #3a3f47;
  }
}

:root[data-theme="dark"] {
  --nx-off: #3a3f47;
}

.nx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.nxfs,
.nxg__ul,
.nxmx__ul,
.nxqs,
.nxcts,
.nxdevs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nxtop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 14);
}

.nxmode {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 28);
  background: var(--ms-tile);
  display: flex;
}

.nxmode__b {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 24);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.nxmode__b[aria-pressed="true"] {
  background: var(--surf);
  color: var(--acc);
}

.nxtop__un {
  margin: 0 0 0 auto;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.nxfeed {
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.nxfeed[hidden],
.nxset[hidden] {
  display: none;
}

.nxfeed__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.nxfs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.nxf {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 23);
  background: var(--bg);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.nxf__n {
  opacity: .6;
}

.nxf.is-on {
  background: var(--ink);
  color: var(--surf);
}

.nxfeed__all {
  margin-left: auto;
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 23);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}

.nxfeed__all:hover:not(:disabled) {
  border-color: var(--acc);
  color: var(--acc);
}

.nxfeed__all:disabled {
  border-color: var(--pd-ok);
  color: var(--pd-ok);
  cursor: default;
}

.nxundo {
  margin: 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.nxundo[hidden] {
  display: none;
}

.nxundo__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 15));
}

.nxundo__b {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
}

.nxg {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.nxg[hidden] {
  display: none;
}

.nxg__d {
  margin: 0;
  padding: calc(var(--u) * 6) calc(var(--u) * 8) 0;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.nxg__ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.nxa {
  --t: var(--ink);
  --tb: var(--ms-tile);
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 56) minmax(0, 1fr) calc(var(--u) * 120) auto calc(var(--u) * 44);
  gap: calc(var(--u) * 18);
  align-items: center;
  cursor: pointer;
  transition: background .2s;
}

.nxa[hidden] {
  display: none;
}

.nxa.is-unread {
  background: var(--acc-a04);
}

.nxa--offer {
  --t: var(--acc);
  --tb: var(--acc-a10);
}

.nxa--price {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .14);
}

.nxa--td {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .12);
}

.nxa--msg {
  --t: #7a4fd1;
  --tb: rgba(122, 79, 209, .12);
}

.nxa--search {
  --t: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.nxa__i {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: calc(var(--u) * 18);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nxa__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.nxa__t {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 17));
}

.nxa.is-unread .nxa__t {
  font-weight: 500;
}

.nxa__dot {
  display: none;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc);
}

.nxa.is-unread .nxa__dot {
  display: block;
}

.nxa__d {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.4;
  color: var(--body);
}

.nxa__ph {
  position: relative;
  height: calc(var(--u) * 72);
  border-radius: calc(var(--u) * 16);
  overflow: hidden;
  background: var(--stripes);
}

.nxa__ph--tile {
  background: var(--ms-tile);
}

.nxa__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nxa__r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 8);
}

.nxa__time {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.nxa__cta {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 21);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: filter .2s;
}

.nxa__cta:hover {
  color: var(--surf);
  filter: brightness(1.12);
}

.nxa.is-unread .nxa__cta {
  background: var(--acc);
  color: #fff;
}

.nxa__cta.is-done,
.nxa.is-unread .nxa__cta.is-done {
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
}

.nxa__x {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  background: var(--bg);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 20));
  transition: color .2s;
}

.nxa.is-unread .nxa__x {
  background: var(--surf);
}

.nxa__x:hover {
  color: var(--acc);
}

.nxempty {
  padding: calc(var(--u) * 50);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 6);
  text-align: center;
}

.nxempty[hidden] {
  display: none;
}

.nxempty__t,
.nxempty__d {
  margin: 0;
}

.nxempty__t {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.nxempty__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

/* == 207. Account · Notifications — settings ============================ */
.nxset {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.nxside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.nxcard {
  min-width: 0;
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.nxcard__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.nxcard__s {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.nxmx {
  gap: calc(var(--u) * 6);
}

.nxmx__h,
.nxmx__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, calc(var(--u) * 110));
  gap: calc(var(--u) * 12);
}

.nxmx__h {
  padding: 0 calc(var(--u) * 4) calc(var(--u) * 10);
  align-items: end;
}

.nxmx__hb {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.nxmx__c {
  text-align: center;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.nxmx__ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.nxmx__r {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  align-items: center;
}

.nxmx__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.nxmx__t {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 17));
}

.nxmx__req {
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: var(--surf);
  color: var(--mute);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.nxmx__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.nxmx__cell {
  display: flex;
  justify-content: center;
}

.nxsw {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 28);
  border-radius: calc(var(--u) * 14);
  background: var(--nx-off);
  transition: background .2s;
}

.nxsw__k {
  position: absolute;
  top: calc(var(--u) * 4);
  left: calc(var(--u) * 4);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: var(--surf);
  transition: left .2s;
}

.nxsw[aria-checked="true"] {
  background: var(--pd-ok);
}

.nxsw[aria-checked="true"] .nxsw__k {
  left: calc(var(--u) * 24);
}

.nxsw:disabled {
  opacity: .55;
  cursor: default;
}

.nxqs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.nxq {
  padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.nxq__b,
.nxqhh__b,
.nxpause__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.nxq__t,
.nxpause__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.nxq__d,
.nxpause__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.nxseg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 23);
  background: var(--ms-tile);
  display: flex;
}

.nxseg__b {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 19);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.nxseg__b[aria-pressed="true"] {
  background: var(--surf);
  color: var(--acc);
}

.nxqhh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 14);
}

.nxqhh__b {
  gap: calc(var(--u) * 4);
}

.nxqhs {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
  transition: opacity .2s;
}

.nxqhs.is-off {
  opacity: .4;
}

.nxqh {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 22);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.nxqh[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc-a08);
  color: var(--acc);
}

.nxpause {
  padding-top: calc(var(--u) * 16);
  border-top: 1px solid var(--up-ln);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.nxpause__b {
  flex: 1;
}

.nxcts,
.nxdevs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.nxct {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.nxct__b,
.nxdev__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.nxct__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.nxct__v {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 17));
}

.nxct__ok {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.nxdevs__k {
  margin: 0;
  padding: calc(var(--u) * 6) calc(var(--u) * 4) 0;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.nxdev {
  padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.nxdev[hidden] {
  display: none;
}

.nxdev__i {
  flex-shrink: 0;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 14);
  background: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nxdev__t {
  font-size: max(12px, calc(var(--u) * 16));
}

.nxdev__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.nxdev__rm {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 19);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.nxdev__rm:hover {
  color: var(--acc);
}

.nxtest {
  align-self: flex-start;
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 23);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.nxtest:hover:not(:disabled) {
  border-color: var(--acc);
  color: var(--acc);
}

.nxtest:disabled {
  border-color: var(--pd-ok);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  cursor: default;
}

/* == 208. Account · Notifications — tablet and phone =================== */
@media (max-width: 1999px) {
  .nxset {
    grid-template-columns: minmax(0, 1fr);
  }

  .nxside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .nxside > .nxcard:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1599px) {
  .nxa {
    grid-template-columns: calc(var(--u) * 56) minmax(0, 1fr) auto calc(var(--u) * 44);
  }

  .nxa__ph {
    display: none;
  }

  .nxside {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 23 px pills; the page gets a finger-sized scale */
  .nx {
    --u: .8px;
  }

  .nxfeed,
  .nxcard {
    padding: 16px 14px;
  }

  .nxfeed__all {
    margin-left: 0;
  }

  .nxa {
    padding: 12px;
    grid-template-columns: 44px minmax(0, 1fr) 36px;
    gap: 10px 12px;
  }

  .nxa__i {
    width: 44px;
    height: 44px;
  }

  .nxa__r {
    grid-column: 2 / -1;
    grid-row: 2;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
  }

  .nxa__x {
    grid-column: 3;
    grid-row: 1;
    width: 36px;
    height: 36px;
  }

  .nxmx__h {
    grid-template-columns: minmax(0, 1fr) repeat(3, 52px);
    gap: 6px;
  }

  .nxmx__r {
    padding: 12px;
    grid-template-columns: minmax(0, 1fr) repeat(3, 52px);
    gap: 6px;
  }

  .nxmx__c {
    font-size: 14px;
  }

  .nxq,
  .nxpause {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* == 209. Account · Security — score ==================================== */
.sx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.sxchks,
.sxpks,
.sxdevs,
.sxlist,
.sxevs,
.sxcodes__ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sxscore {
  --lv: var(--gr-amber);
  --lvt: #f0b54a;
  padding: calc(var(--u) * 28) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  background: var(--up-plus);
  color: #fff;
  display: grid;
  grid-template-columns: calc(var(--u) * 150) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 30);
  align-items: center;
}

.sxscore.is-strong {
  --lv: var(--pd-ok);
  --lvt: #5fd39b;
}

.sxscore.is-weak {
  --lv: var(--acc);
  --lvt: #ff8a5c;
}

.sxring {
  --p: 60%;
  width: calc(var(--u) * 150);
  height: calc(var(--u) * 150);
  border-radius: 50%;
  background: conic-gradient(var(--lv) 0 var(--p), rgba(128, 132, 140, .25) var(--p) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sxring__in {
  width: calc(var(--u) * 122);
  height: calc(var(--u) * 122);
  border-radius: 50%;
  background: var(--up-plus);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
}

.sxring__n {
  font-size: max(12px, calc(var(--u) * 40));
  font-weight: 300;
  line-height: 1;
}

.sxring__of {
  font-size: max(12px, calc(var(--u) * 20));
  color: #a3a9b3;
}

.sxring__l {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--lvt);
}

.sxscore__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.sxscore__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
}

.sxchks {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.sxchk {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 19);
  background: rgba(216, 71, 14, .18);
  color: #ffb08f;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.sxchk__m {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.sxchk__m::after {
  content: "!";
}

.sxchk.is-ok {
  background: rgba(255, 255, 255, .08);
  color: #d6d9de;
}

.sxchk.is-ok .sxchk__m {
  background: var(--pd-ok);
}

.sxchk.is-ok .sxchk__m::after {
  content: "✓";
}

.sxscore__go {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 28);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
  white-space: nowrap;
}

.sxscore__go:hover {
  filter: brightness(1.08);
}

.sxscore__go[hidden] {
  display: none;
}

/* == 210. Account · Security — cards, rows, controls =================== */
.sxgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.sxcol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.sxcard {
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.sxcard--danger {
  box-shadow: 0 0 0 1px var(--acc-a25) inset;
}

.sxcard__h {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.sxcard__t,
.sxcard__s {
  margin: 0;
}

.sxcard__t {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.sxcard--danger .sxcard__t {
  color: var(--acc);
}

.sxcard__s {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.sxlist,
.sxdevs,
.sxevs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.sxrow,
.sxdev {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.sxdev {
  padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 16);
}

.sxdev[hidden] {
  display: none;
}

.sxrow--col {
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--u) * 12);
}

.sxrow__top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.sxrow__i {
  flex-shrink: 0;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border-radius: calc(var(--u) * 15);
  background: var(--surf);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sxrow__i--ok {
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
}

.sxrow__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.sxrow__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.sxrow__v,
.sxdev__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.sxdev__t {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.sxpill {
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.sxpill--ok {
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
}

.sxbtn {
  flex-shrink: 0;
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 20);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, filter .2s;
}

.sxbtn--sf {
  background: var(--surf);
}

.sxbtn--line {
  border: 1px solid var(--up-ln2);
}

.sxbtn--44 {
  align-self: flex-start;
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 22);
}

.sxbtn--sm {
  padding: 0 calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 14));
}

.sxbtn--sf:hover,
.sxbtn--line:hover:not(:disabled) {
  color: var(--acc);
}

.sxbtn--acc {
  background: var(--acc);
  color: #fff;
}

.sxbtn--acc:hover:not(:disabled) {
  color: #fff;
  filter: brightness(1.08);
}

.sxbtn--acc:disabled {
  background: var(--ms-off);
  cursor: default;
}

.sxbtn--ink {
  background: var(--ink);
  color: var(--surf);
}

.sxbtn--warn {
  align-self: flex-start;
  height: calc(var(--u) * 46);
  border: 1px solid var(--acc);
  border-radius: calc(var(--u) * 23);
  color: var(--acc);
}

.sxrow__top .sxbtn--warn {
  align-self: center;
  height: calc(var(--u) * 42);
}

.sxbtn--warn:hover:not(:disabled) {
  background: var(--acc);
  color: #fff;
}

.sxbtn.is-done,
.sxbtn.is-done:hover {
  border-color: var(--pd-ok);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  filter: none;
  cursor: default;
}

.sxbtn--line:disabled {
  color: var(--mute);
  opacity: .6;
  cursor: not-allowed;
}

.sxbtn[hidden] {
  display: none;
}

.sxsw {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 28);
  border-radius: calc(var(--u) * 14);
  background: var(--nx-off);
  transition: background .2s;
}

.sxsw__k {
  position: absolute;
  top: calc(var(--u) * 4);
  left: calc(var(--u) * 4);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: var(--surf);
  transition: left .2s;
}

.sxsw[aria-checked="true"] {
  background: var(--pd-ok);
}

.sxsw[aria-checked="true"] .sxsw__k {
  left: calc(var(--u) * 24);
}

/* password form + strength */
.sxpw {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.sxpw[hidden] {
  display: none;
}

.sxpfs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.sxpf {
  min-width: 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
  cursor: text;
  transition: border-color .2s;
}

.sxpf.is-ok {
  border-color: var(--pd-ok);
}

.sxpf.is-bad {
  border-color: var(--acc);
}

.sxpf__l {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.sxpf__in {
  min-width: 0;
  height: calc(var(--u) * 28);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 17));
}

.sxstr {
  --s: var(--acc);
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.sxstr__bar {
  width: calc(var(--u) * 200);
  display: flex;
  gap: calc(var(--u) * 4);
}

.sxstr__s {
  flex: 1;
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--ms-tile);
}

.sxstr__s.is-on {
  background: var(--s);
}

.sxstr__t {
  flex: 1;
  min-width: 160px;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.sxstr.is-typed .sxstr__t {
  color: var(--s);
}

.sxstr .sxbtn {
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 22);
}

/* passkeys, codes, activity, danger */
.sxpks {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.sxpks:empty {
  display: none;
}

.sxpk {
  padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 10) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.sxpk__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 15));
}

.sxpk__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.sxpk__rm {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 17);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.sxpk__rm:hover {
  color: var(--acc);
}

.sxcodes {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.sxcodes[hidden] {
  display: none;
}

.sxcodes__ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.sxcodes__ul li {
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 12);
  background: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 15));
}

.sxcodes__ft {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.sxev {
  --t: var(--pd-ok);
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 12) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 16);
  align-items: center;
}

.sxev--info {
  --t: var(--ml-blue);
}

.sxev--bad {
  --t: var(--acc);
  background: var(--acc-a06);
}

.sxev--bad.is-done {
  background: var(--bg);
}

.sxev__dot {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  border-radius: 50%;
  background: var(--t);
}

.sxev__t {
  font-size: max(12px, calc(var(--u) * 16));
}

.sxev .sxrow__k {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sxask {
  margin: 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  background: var(--acc-a08);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.sxask[hidden],
.sxdone[hidden] {
  display: none;
}

.sxask__q {
  flex: 1;
  min-width: 160px;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.sxask .sxbtn {
  height: calc(var(--u) * 38);
  border-radius: calc(var(--u) * 19);
  font-size: max(12px, calc(var(--u) * 14));
}

.sxdone {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

/* == 211. Account · Security — tablet and phone ======================== */
@media (max-width: 1599px) {
  .sxgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sxscore {
    grid-template-columns: calc(var(--u) * 150) minmax(0, 1fr);
  }

  .sxscore__go {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 20 px buttons; the page gets a finger-sized scale */
  .sx {
    --u: .8px;
  }

  .sxscore {
    padding: 20px 16px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .sxscore__t {
    font-size: 22px;
  }

  .sxcard {
    padding: 18px 14px;
  }

  .sxrow__top,
  .sxrow,
  .sxdev {
    flex-wrap: wrap;
  }

  .sxpfs {
    grid-template-columns: minmax(0, 1fr);
  }

  .sxcodes__ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sxev {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .sxev .sxbtn {
    grid-column: 2;
    justify-self: start;
  }
}

/* == 212. Account · Preferences — save bar, cards, controls ============ */
.pq {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.pqbar {
  padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  color: var(--body);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  transition: background .3s, color .3s;
}

.pqbar.is-saved {
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
}

.pqbar__t {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: max(12px, calc(var(--u) * 16));
}

.pqbtn {
  flex-shrink: 0;
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}

.pqbtn:hover:not(:disabled) {
  border-color: var(--acc);
  color: var(--acc);
}

.pqbtn--bar {
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 22);
  border-color: rgba(128, 132, 140, .45);
  color: inherit;
}

.pqbtn:disabled {
  border-color: var(--pd-ok);
  color: var(--pd-ok);
  cursor: default;
}

.pqgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.pqcol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.pqcard {
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.pqcard__h {
  padding-bottom: calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.pqcard__t,
.pqcard__s {
  margin: 0;
}

.pqcard__t {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.pqcard__s {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.pqrow {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.pqrow--col {
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--u) * 10);
}

.pqrow--bud {
  gap: calc(var(--u) * 12);
}

.pqrow__top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.pqrow__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.pqrow__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.pqrow__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.pqrow__v {
  padding-right: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 16));
  white-space: nowrap;
}

.pqseg {
  flex-shrink: 0;
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 24);
  background: var(--ms-tile);
  display: flex;
}

.pqseg--s {
  border-radius: calc(var(--u) * 22);
}

.pqseg__b {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.pqseg--s .pqseg__b {
  height: calc(var(--u) * 36);
  border-radius: calc(var(--u) * 18);
}

.pqseg__b[aria-pressed="true"] {
  background: var(--surf);
  color: var(--acc);
}

.pqsegs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--u) * 8);
}

.pqchips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.pqchip {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.pqchip:hover {
  border-color: var(--acc);
}

.pqchip[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc-a08);
  color: var(--acc);
}

.pqchip[aria-pressed="true"]::before {
  content: "✓ ";
}

.pqsw {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 28);
  border-radius: calc(var(--u) * 14);
  background: var(--nx-off);
  transition: background .2s;
}

.pqsw__k {
  position: absolute;
  top: calc(var(--u) * 4);
  left: calc(var(--u) * 4);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: var(--surf);
  transition: left .2s;
}

.pqsw[aria-checked="true"] {
  background: var(--pd-ok);
}

.pqsw[aria-checked="true"] .pqsw__k {
  left: calc(var(--u) * 24);
}

.pqsw:disabled {
  opacity: .55;
  cursor: default;
}

/* == 213. Account · Preferences — preview, theme, accent, budget ======= */
.pqprev {
  margin: 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--acc-a07);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 17));
}

.pqprev__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.pqthemes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.pqtheme {
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
  transition: box-shadow .2s;
}

.pqtheme[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--acc);
}

.pqtheme__pv {
  height: calc(var(--u) * 96);
  padding: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.pqtheme--dark .pqtheme__pv {
  background: #15171b;
}

.pqtheme--system .pqtheme__pv {
  background: linear-gradient(90deg, #fff 50%, #15171b 50%);
}

.pqtheme__l1,
.pqtheme__l2 {
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 5);
  background: #d6d9de;
}

.pqtheme__l1 {
  width: 60%;
}

.pqtheme__l2 {
  width: 85%;
  background: #e9ebee;
}

.pqtheme--dark .pqtheme__l1 {
  background: #3a3f47;
}

.pqtheme--dark .pqtheme__l2 {
  background: #2a2e35;
}

.pqtheme--system .pqtheme__l2 {
  background: linear-gradient(90deg, #e9ebee 58%, #2a2e35 58%);
}

.pqtheme__acc {
  width: 40%;
  height: calc(var(--u) * 18);
  margin-top: auto;
  border-radius: calc(var(--u) * 9);
  background: var(--acc);
}

.pqaccs {
  display: flex;
  gap: calc(var(--u) * 10);
}

.pqacc {
  --c: #d8470e;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  background: var(--c);
  transition: box-shadow .2s;
}

.pqacc--v2 {
  --c: #12844f;
}

.pqacc--v3 {
  --c: #1d5fd1;
}

.pqacc[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c);
}

.pqsteps {
  display: flex;
  gap: calc(var(--u) * 10);
}

.pqstep {
  flex: 1;
  min-width: 0;
  padding: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.pqstep__b {
  flex-shrink: 0;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  background: var(--ms-tile);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 20));
  transition: color .2s;
}

.pqstep__b:hover:not(:disabled) {
  color: var(--acc);
}

.pqstep__b:disabled {
  opacity: .4;
  cursor: default;
}

.pqstep__v {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pqstep__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.pqstep__n {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
  white-space: nowrap;
}

/* == 214. Account · Preferences — tablet and phone ===================== */
@media (max-width: 1999px) {
  .pqrow {
    flex-wrap: wrap;
  }

  .pqrow__b {
    flex-basis: 220px;
  }
}

@media (max-width: 1599px) {
  .pqgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 20 px pills; the page gets a finger-sized scale */
  .pq {
    --u: .8px;
  }

  .pqcard {
    padding: 18px 14px;
  }

  .pqbar {
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 22px;
  }

  .pqseg {
    max-width: 100%;
    overflow-x: auto;
  }

  .pqsegs {
    justify-content: flex-start;
  }

  .pqthemes {
    gap: 6px;
  }

  .pqtheme__pv {
    height: 64px;
    padding: 8px;
  }

  .pqsteps {
    flex-direction: column;
  }
}

/* == 215. Sell my car — step bar, form card, shared controls =========== */
.wz {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.wzbar,
.wzspec,
.wzslots,
.wzshots,
.wzsums,
.wzpv__chips {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wzbar {
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.wzst {
  width: 100%;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 6);
  border-radius: calc(var(--u) * 28);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.wzst:disabled {
  cursor: default;
}

.wzst__n {
  flex-shrink: 0;
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  border-radius: 50%;
  background: var(--ms-tile);
  color: var(--mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.wzst.is-done {
  color: var(--ink);
}

.wzst.is-done .wzst__n {
  background: var(--pd-ok);
  color: #fff;
  font-size: 0;
}

.wzst.is-done .wzst__n::after {
  content: "✓";
  font-size: max(12px, calc(var(--u) * 15));
}

.wzst.is-cur {
  background: var(--acc-a08);
  color: var(--acc);
}

.wzst.is-cur .wzst__n {
  background: var(--acc);
  color: #fff;
}

.wzst__t {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wzgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 440);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.wzform {
  min-width: 0;
  padding: calc(var(--u) * 28) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.wzform__h {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.wzform__no,
.wzform__q,
.wzform__s {
  margin: 0;
}

.wzform__no {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.wzform__q {
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
  letter-spacing: -.02em;
}

.wzform__s {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--mute);
}

.wzpane {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.wzpane[hidden],
.wzpane [hidden] {
  display: none;
}

.wzpane[data-s="0"] {
  gap: calc(var(--u) * 16);
}

.wzpane[data-s="2"],
.wzpane[data-s="5"],
.wzpane[data-s="6"],
.js-wz-review {
  gap: calc(var(--u) * 12);
}

.js-wz-review,
.js-wz-which {
  display: flex;
  flex-direction: column;
}

.js-wz-which {
  gap: calc(var(--u) * 16);
}

.wzpair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 12);
}

.wzpane[data-s="1"] .wzpair {
  display: flex;
  gap: calc(var(--u) * 10);
}

.wzbox {
  min-width: 0;
  padding: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.wzbox--row {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  flex-direction: row;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.wzbox--area {
  padding: calc(var(--u) * 14) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  gap: calc(var(--u) * 6);
}

.wzbox__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.wzbox__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.wzbox__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.wzbox--area .wzbox__d {
  font-size: max(12px, calc(var(--u) * 15));
}

.wzarea {
  height: calc(var(--u) * 80);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  font-weight: 300;
  line-height: 1.5;
  resize: none;
}

.wzlabel {
  margin: 0;
  padding-top: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 17));
}

.wznote {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.wzseg {
  align-self: flex-start;
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 24);
  background: var(--ms-tile);
  display: flex;
}

.wzseg--s {
  border-radius: calc(var(--u) * 23);
}

.wzseg__b {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 20);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.wzseg--s .wzseg__b {
  height: calc(var(--u) * 38);
  border-radius: calc(var(--u) * 19);
}

.wzseg__b[aria-pressed="true"] {
  background: var(--surf);
  color: var(--acc);
}

.wzsw {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 28);
  border-radius: calc(var(--u) * 14);
  background: var(--nx-off);
  transition: background .2s;
}

.wzsw__k {
  position: absolute;
  top: calc(var(--u) * 4);
  left: calc(var(--u) * 4);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: var(--surf);
  transition: left .2s;
}

.wzsw[aria-checked="true"] {
  background: var(--pd-ok);
}

.wzsw[aria-checked="true"] .wzsw__k {
  left: calc(var(--u) * 24);
}

.wzchips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.wzchip {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.wzchip[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc-a08);
  color: var(--acc);
}

.wzchip[aria-pressed="true"]::before {
  content: "✓ ";
}

.wzf {
  flex: 1;
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
  cursor: text;
  transition: border-color .2s;
}

.wzf.is-ok {
  border-color: rgba(47, 163, 107, .5);
}

.wzf:focus-within {
  border-color: var(--acc);
}

.wzf__l {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.wzf__in {
  min-width: 0;
  height: calc(var(--u) * 30);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.wzf__in--mono {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: .04em;
}

.wzf__in--area {
  height: calc(var(--u) * 120);
  font-size: max(12px, calc(var(--u) * 16));
  line-height: 1.5;
  resize: none;
}

.wzf__in::placeholder {
  color: var(--mute);
}

.wzbtn {
  flex-shrink: 0;
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 25);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, filter .2s, opacity .2s;
}

.wzbtn--acc {
  background: var(--acc);
  color: #fff;
}

.wzbtn--acc:hover:not(:disabled) {
  color: #fff;
  filter: brightness(1.08);
}

.wzbtn--acc:disabled {
  background: var(--ms-off);
  cursor: default;
}

.wzbtn--acc.is-pub {
  background: var(--pd-ok);
}

.wzbtn--line {
  border: 1px solid var(--up-ln2);
}

.wzbtn--line:hover:not(:disabled) {
  border-color: var(--acc);
  color: var(--acc);
}

.wzbtn--line:disabled {
  opacity: .35;
  cursor: default;
}

.wzbtn--sf {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 19);
  background: var(--surf);
  font-size: max(12px, calc(var(--u) * 14));
}

.wzbtn--sf:hover {
  color: var(--acc);
}

.wzbtn--ink {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 26);
  background: var(--ink);
  color: var(--surf);
}

.wzbtn--ink:hover {
  color: var(--surf);
  filter: brightness(1.1);
}

.wzdone__a .wzbtn--line {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 26);
}

.wzbtn--nav {
  height: calc(var(--u) * 54);
  border-radius: calc(var(--u) * 27);
}

.wzbtn--nav.wzbtn--acc {
  font-size: max(12px, calc(var(--u) * 16));
}

.wzbtn[hidden] {
  display: none;
}

.wznav {
  padding-top: calc(var(--u) * 6);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.wznav__hint {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 216. Sell my car — step panes ===================================== */
.wzpaths {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 12);
}

.wzpath {
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  text-align: left;
  transition: background .2s, box-shadow .2s;
}

.wzpath[aria-pressed="true"],
.wzcar[aria-pressed="true"] {
  background: var(--acc-a06);
  box-shadow: 0 0 0 2px var(--acc);
}

.wzpath__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wzpath__t {
  font-size: max(12px, calc(var(--u) * 22));
}

.wzradio {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border: 2px solid var(--up-ln2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wzradio::after {
  content: "";
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  border-radius: 50%;
}

.wzpath[aria-pressed="true"] .wzradio {
  border-color: var(--acc);
}

.wzpath[aria-pressed="true"] .wzradio::after {
  background: var(--acc);
}

.wzpath__d {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.45;
  color: var(--body);
}

.wzpath__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.wzpath__tag {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--surf);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.wzinstant {
  margin: 0;
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: rgba(29, 95, 209, .08);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.wzinstant__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--ml-tip);
}

.wzinstant__a {
  flex-shrink: 0;
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 23);
  background: var(--ml-blue);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.wzinstant__a:hover {
  color: #fff;
  filter: brightness(1.1);
}

.wzcars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.wzcar {
  padding: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  text-align: left;
  transition: background .2s, box-shadow .2s;
}

.wzcar__ph {
  position: relative;
  height: calc(var(--u) * 110);
  border-radius: calc(var(--u) * 18);
  overflow: hidden;
  background: var(--stripes);
}

.wzcar__ph--add {
  background: var(--surf);
  color: var(--mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 28));
}

.wzcar__img,
.wzslot__img,
.wzpv__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wzcar__b {
  padding: 0 calc(var(--u) * 6) calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.wzcar__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.wzcar__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.wzvin {
  display: flex;
  align-items: stretch;
  gap: calc(var(--u) * 10);
}

.wzdec {
  flex-shrink: 0;
  height: calc(var(--u) * 70);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 35);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
  white-space: nowrap;
  transition: background .2s;
}

.wzdec:disabled {
  background: var(--ms-off);
  cursor: default;
}

.wzdec.is-done {
  background: var(--pd-ok);
}

.wzspec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.wzspec__c {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.wzspec__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.wzspec__v {
  font-size: max(12px, calc(var(--u) * 18));
}

.wzph {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.wzph__b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.wzph__h {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.wzph__s {
  color: var(--t, var(--acc));
}

.wzph__bar {
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 5);
  background: var(--ms-tile);
  overflow: hidden;
}

.wzph__f {
  display: block;
  width: 0;
  height: 100%;
  background: var(--t, var(--acc));
  transition: width .3s;
}

.wzslots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.wzslot {
  position: relative;
  width: 100%;
  height: calc(var(--u) * 110);
  border: 1.5px dashed var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  overflow: hidden;
  background: var(--bg);
  color: var(--mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 22));
}

.wzslot.has-ph {
  border: 0;
}

.wzslot.is-cover {
  box-shadow: 0 0 0 2px var(--acc);
}

.wzslot__plus::after {
  content: "";
}

.wzslot.is-next .wzslot__plus::after {
  content: "+";
}

.wzslot__cover {
  position: absolute;
  left: calc(var(--u) * 8);
  top: calc(var(--u) * 8);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: var(--acc);
  color: #fff;
  display: none;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.wzslot.is-cover .wzslot__cover {
  display: flex;
}

.wzshots {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.wzshot {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 19);
  background: var(--surf);
  color: var(--body);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
}

.wzshot::before {
  content: "○";
}

.wzshot.is-ok {
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
}

.wzshot.is-ok::before {
  content: "✓";
}

.wzmkt__h,
.wzmkt__lh {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.wzmkt__s {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.wzmkt__track {
  position: relative;
  height: calc(var(--u) * 12);
  margin: calc(var(--u) * 10) 0 calc(var(--u) * 4);
  border-radius: calc(var(--u) * 6);
  background: var(--ms-tile);
}

.wzmkt__band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: calc(var(--u) * 6);
  background: rgba(47, 163, 107, .4);
}

.wzmkt__mk {
  --v: var(--pd-ok);
  position: absolute;
  top: calc(var(--u) * -6);
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  margin-left: calc(var(--u) * -12);
  border: 4px solid var(--surf);
  border-radius: 50%;
  background: var(--v);
  box-shadow: 0 2px 8px rgba(17, 20, 24, .2);
  transition: left .3s;
}

.wzmkt.is-out .wzmkt__mk {
  --v: var(--gr-amber);
}

.wzmkt__lh {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.wzmkt__v {
  color: var(--pd-ok);
}

.wzmkt.is-out .wzmkt__v {
  color: var(--gr-amber);
}

.wzsteps {
  display: flex;
  gap: calc(var(--u) * 12);
}

.wzstep {
  flex: 1;
  min-width: 0;
  padding: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  box-shadow: 0 0 0 1px var(--up-ln) inset;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.wzstep__b {
  flex-shrink: 0;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: var(--ms-tile);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 20));
}

.wzstep__b:hover {
  color: var(--acc);
}

.wzstep__v {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wzstep__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  text-align: center;
}

.wzstep__n {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  white-space: nowrap;
}

.wztile {
  margin: 0;
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.wztile__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.wztile__v {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.wzsums {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.wzsum {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.wzsum__m {
  flex-shrink: 0;
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.wzsum__m::after {
  content: "!";
}

.wzsum.is-ok .wzsum__m {
  background: var(--pd-ok);
}

.wzsum.is-ok .wzsum__m::after {
  content: "✓";
}

.wzsum__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.wzsum__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.wzsum__v {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 17));
}

.wzagree {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 15));
  text-align: left;
}

.wzagree__m {
  flex-shrink: 0;
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border: 2px solid var(--up-ln2);
  border-radius: calc(var(--u) * 8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.wzagree[aria-pressed="true"] .wzagree__m {
  border-color: var(--acc);
  background: var(--acc);
}

.wzagree[aria-pressed="true"] .wzagree__m::after {
  content: "✓";
}

.wzdone {
  padding: calc(var(--u) * 40) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 26);
  background: rgba(47, 163, 107, .08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 14);
  text-align: center;
}

.wzdone__i {
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 76);
  border-radius: 50%;
  background: var(--pd-ok);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 36));
}

.wzdone__t,
.wzdone__d,
.wzdone__a {
  margin: 0;
}

.wzdone__t {
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
}

.wzdone__d {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--body);
}

.wzdone__a {
  padding-top: calc(var(--u) * 6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 10);
}

/* == 217. Sell my car — live preview =================================== */
.wzside {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.wzpv {
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.wzpv__h {
  margin: 0;
  padding: calc(var(--u) * 4) calc(var(--u) * 6) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.wzpv__bar {
  height: calc(var(--u) * 8);
  margin: 0 calc(var(--u) * 6);
  border-radius: calc(var(--u) * 4);
  background: var(--ms-tile);
  overflow: hidden;
}

.wzpv__f {
  display: block;
  width: 0;
  height: 100%;
  background: var(--acc);
  transition: width .3s;
}

.wzpv__ph {
  position: relative;
  height: calc(var(--u) * 230);
  border-radius: calc(var(--u) * 22);
  overflow: hidden;
  background: var(--ms-tile);
}

.wzpv__st,
.wzpv__boost,
.wzpv__n {
  position: absolute;
  z-index: 1;
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.wzpv__st {
  left: calc(var(--u) * 12);
  top: calc(var(--u) * 12);
  background: var(--mute);
  color: #fff;
}

.wzpv__st.is-live {
  background: var(--pd-ok);
}

.wzpv__boost {
  right: calc(var(--u) * 12);
  top: calc(var(--u) * 12);
  background: var(--acc);
  color: #fff;
}

.wzpv__boost[hidden] {
  display: none;
}

.wzpv__n {
  left: calc(var(--u) * 12);
  bottom: calc(var(--u) * 12);
  background: var(--surf);
  color: var(--body);
}

.wzpv__b {
  padding: 0 calc(var(--u) * 6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.wzpv__m,
.wzpv__t,
.wzpv__p {
  margin: 0;
}

.wzpv__m {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.wzpv__t {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  line-height: 1.2;
}

.wzpv__p {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  letter-spacing: -.02em;
}

.wzpv__chips {
  padding: 0 calc(var(--u) * 6) calc(var(--u) * 6);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.wzpv__chips li {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 16);
  background: var(--ms-tile);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.wzbtn--draft {
  height: calc(var(--u) * 52);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
}

.wzbtn--draft:hover:not(:disabled) {
  border-color: var(--acc);
  color: var(--acc);
}

.wzbtn--draft:disabled {
  border-color: var(--pd-ok);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  cursor: default;
}

/* == 218. Sell my car — tablet and phone =============================== */
@media (max-width: 1999px) {
  .wzbar {
    grid-template-columns: repeat(7, minmax(0, auto));
    overflow-x: auto;
  }

  .wzst {
    padding-right: calc(var(--u) * 14);
  }

  .wzgrid {
    grid-template-columns: minmax(0, 1fr) calc(var(--u) * 360);
  }

  .wzslots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1599px) {
  .wzgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .wzside {
    position: static;
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 25 px buttons; the wizard gets a finger-sized scale */
  .wz {
    --u: .8px;
  }

  .wzform {
    padding: 18px 14px;
  }

  .wzform__q {
    font-size: 24px;
  }

  .wzst__t {
    display: none;
  }

  .wzst.is-cur .wzst__t {
    display: inline;
  }

  .wzpaths,
  .wzcars,
  .wzpair,
  .wzspec {
    grid-template-columns: minmax(0, 1fr);
  }

  .wzpane[data-s="1"] .wzpair,
  .wzvin,
  .wzsteps,
  .wzph,
  .wzinstant {
    flex-direction: column;
    align-items: stretch;
  }

  .wzdec {
    height: 54px;
  }

  .wzslots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wzslot {
    height: 80px;
  }

  .wzbox--row {
    padding: 14px;
  }

  .wznav {
    flex-wrap: wrap;
  }

  .wznav__hint {
    order: 3;
    width: 100%;
  }

  .wznav .wzbtn--acc {
    margin-left: auto;
  }
}

/* == 219. Dealer — shell: grid and sidebar ============================== */
:root {
  --db-purple: #7a4fd1;
  --db-gold: #f0b54a;
}

.dl {
  display: grid;
  grid-template-columns: calc(var(--u) * 440) minmax(0, 1fr);
  gap: calc(var(--u) * 60);
  align-items: start;
  font-weight: 400;
  line-height: normal;
}

.dlmain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
}

.dlmain .uphd[hidden],
.dlmain .js-dl-pane[hidden] {
  display: none;
}

.dlsts,
.dlg__ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dlside {
  position: sticky;
  top: 20px;
  align-self: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.dlcard {
  padding: calc(var(--u) * 20);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.dlid {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.dlid__logo {
  flex-shrink: 0;
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: calc(var(--u) * 17);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'BBH Bartle', Geist, sans-serif;
  font-size: max(12px, calc(var(--u) * 18));
}

.dlid__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.dlid__n {
  font-size: max(12px, calc(var(--u) * 20));
}

.dlid__m {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.dlid__bell {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: var(--ms-tile);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dlid__bell:hover {
  color: var(--acc);
}

.dlid__dot {
  position: absolute;
  right: calc(var(--u) * 8);
  top: calc(var(--u) * 8);
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border: 2px solid var(--ms-tile);
  border-radius: 50%;
  background: var(--acc);
}

.dlsts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.dlst {
  width: 100%;
  height: calc(var(--u) * 84);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(var(--u) * 4);
  transition: background .2s;
}

.dlst.is-on,
.dlst:hover {
  background: var(--acc-a10);
  color: var(--ink);
}

.dlst__v {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  line-height: 1;
}

.dlst__v--acc {
  color: var(--acc);
}

.dlst__v--ok {
  color: var(--pd-ok);
}

.dlst__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.dltgt {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.dltgt__h {
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 15));
}

.dltgt__bar {
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--ms-tile);
  overflow: hidden;
}

.dltgt__f {
  display: block;
  width: 64%;
  height: 100%;
  background: var(--acc);
}

.dladd {
  height: calc(var(--u) * 56);
  border-radius: calc(var(--u) * 28);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 16));
}

.dladd:hover {
  color: var(--surf);
  filter: brightness(1.12);
}

.dladd__plus {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
}

.dlnav {
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.dlg {
  display: flex;
  flex-direction: column;
}

.dlg__h {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 14);
  color: var(--mute);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
}

.dlg__r {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.dlg__sum {
  display: none;
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 9);
  border-radius: calc(var(--u) * 12);
  background: var(--acc);
  color: #fff;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: 0;
}

.dlg.is-shut .dlg__sum {
  display: flex;
}

.dlg__chev {
  transition: transform .3s;
}

.dlg.is-shut .dlg__chev {
  transform: rotate(180deg);
}

.dlg__w {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .35s var(--pd-ease);
}

.dlg.is-shut .dlg__w {
  grid-template-rows: 0fr;
}

.dlg__ul {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.dlm {
  width: 100%;
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 20);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 16));
  text-align: left;
  transition: background .2s, color .2s;
}

.dlm:hover {
  background: var(--bg);
  color: var(--ink);
}

.dlm__i {
  flex-shrink: 0;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 14);
  background: var(--ms-tile);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}

.dlm__t {
  flex: 1;
  min-width: 0;
}

.dlm__c {
  min-width: calc(var(--u) * 30);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 9);
  border-radius: calc(var(--u) * 13);
  background: var(--ms-tile);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.dlm__c--hot {
  background: var(--acc);
  color: #fff;
}

.dlm.is-on,
.dlm.is-on:hover {
  background: var(--acc-a10);
  color: var(--acc);
}

.dlm.is-on .dlm__i {
  background: var(--acc);
  color: #fff;
}

.dlm.is-on .dlm__c:not(.dlm__c--hot) {
  color: var(--acc);
}

.dlft {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 8);
}

.dlft__store,
.dlft__out {
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 26);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 8);
}

.dlft__store {
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
}

.dlft__store:hover {
  color: var(--acc);
}

.dlft__out {
  border: 1px solid var(--acc);
  background: var(--acc-a08);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 15));
  transition: background .2s, color .2s;
}

.dlft__out:hover {
  background: var(--acc);
  color: #fff;
}

.dlsoon {
  min-height: calc(var(--u) * 480);
  padding: calc(var(--u) * 60);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 16);
  text-align: center;
}

.dlsoon__t,
.dlsoon__d,
.dlsoon__a {
  margin: 0;
}

.dlsoon__t {
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
}

.dlsoon__d {
  max-width: calc(var(--u) * 560);
  font-size: max(12px, calc(var(--u) * 17));
  line-height: 1.55;
  color: var(--body);
}

.dlsoon__a {
  margin-top: calc(var(--u) * 8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(var(--u) * 22);
}

.dlsoon__go {
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 28);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.dlsoon__go:hover {
  color: var(--surf);
  filter: brightness(1.12);
}

.dlsoon__link {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--acc);
}

/* == 220. Dealer dashboard — greeting and KPIs ========================= */
.db {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.dbchips,
.dbts,
.dbfs,
.dbtl,
.dblbs,
.dbdists,
.dbls,
.dbage__ls,
.dbsts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dbhi {
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 36);
  background: var(--surf);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 30);
  align-items: center;
}

.dbhi__l {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 26);
}

.dbring {
  flex-shrink: 0;
  width: calc(var(--u) * 118);
  height: calc(var(--u) * 118);
  border-radius: 50%;
  background: conic-gradient(var(--acc) 0 64%, var(--ms-tile) 64% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dbring__in {
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 96);
  border-radius: 50%;
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dbring__n {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  line-height: 1;
}

.dbring__of {
  font-size: max(12px, calc(var(--u) * 17));
  color: var(--mute);
}

.dbring__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.dbhi__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.dbhi__date,
.dbhi__t {
  margin: 0;
}

.dbhi__date {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.dbhi__t {
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.dbchips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.dbchip {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  transition: background .2s, color .2s;
}

.dbchip--acc {
  --t: var(--acc);
  --tb: var(--acc-a10);
}

.dbchip--blue {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.dbchip.is-ok {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.dbchip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.dbhi__r {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.dbseg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 23);
  background: var(--ms-tile);
  display: flex;
}

.dbseg--ink {
  border-radius: calc(var(--u) * 25);
}

.dbseg__b {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 19);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.dbseg--ink .dbseg__b {
  height: calc(var(--u) * 42);
  border-radius: calc(var(--u) * 21);
}

.dbseg__b[aria-pressed="true"] {
  background: var(--surf);
  color: var(--acc);
}

.dbseg--ink .dbseg__b[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.dbbtn {
  flex-shrink: 0;
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 25);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, filter .2s;
}

.dbbtn--line {
  border: 1px solid var(--up-ln2);
  background: var(--surf);
}

.dbbtn--line:hover:not(:disabled) {
  border-color: var(--acc);
  color: var(--acc);
}

.dbbtn--acc {
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 20);
  background: var(--acc);
  box-shadow: 0 10px 24px var(--acc-a25);
  color: #fff;
}

.dbbtn--acc:hover {
  color: #fff;
  filter: brightness(1.08);
}

.dbbtn__plus {
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  background: var(--surf);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 20));
}

.dbbtn--ink {
  background: var(--up-plus);
  color: #fff;
}

.dbbtn--ink:hover:not(:disabled) {
  color: #fff;
  filter: brightness(1.15);
}

.dbbtn--pg {
  background: var(--bg);
}

.dbbtn--pg:hover {
  color: var(--acc);
}

.dbbtn--sm {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 14));
}

.dbcard__x .dbbtn--sm {
  height: calc(var(--u) * 46);
  border-radius: calc(var(--u) * 23);
  border: 1px solid var(--up-ln2);
}

.dbbtn[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc-a08);
  color: var(--acc);
}

.dbbtn.is-done,
.dbbtn.is-done:hover {
  border-color: rgba(47, 163, 107, .4);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  filter: none;
  cursor: default;
}

.dbbtn--ink.is-done,
.dbbtn--ink.is-done:hover {
  background: var(--pd-ok);
  color: #fff;
}

.dbkpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 20);
}

.dbhero {
  grid-column: span 2;
  min-width: 0;
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 32);
  background: var(--up-plus);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.dbhero__h,
.dbhero__v,
.dbhero__s,
.dbk__h,
.dbk__b,
.dbk__s {
  margin: 0;
}

.dbhero__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  color: #a3a9b3;
}

.dbhero__d {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: rgba(255, 255, 255, .08);
  color: #5fd39b;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.dbhero__d.is-down {
  color: var(--acc);
}

.dbhero__v {
  font-size: max(12px, calc(var(--u) * 60));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}

.dbhero__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: #a3a9b3;
}

.dbspark {
  --c: var(--acc);
  height: calc(var(--u) * 30);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 3);
}

.dbspark span {
  flex: 1;
  border-radius: calc(var(--u) * 3);
  background: var(--ms-tile);
}

.dbspark span:last-child {
  background: var(--c);
}

.dbspark--hero {
  height: calc(var(--u) * 56);
  gap: calc(var(--u) * 4);
}

.dbspark--hero span {
  border-radius: calc(var(--u) * 4);
  background: rgba(255, 255, 255, .16);
}

.dbspark--hero span:last-child {
  background: var(--acc);
}

.dbk {
  --c: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
  min-width: 0;
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.dbk--acc {
  --c: var(--acc);
  --tb: var(--acc-a10);
}

.dbk--blue {
  --c: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.dbk--purple {
  --c: var(--db-purple);
  --tb: rgba(122, 79, 209, .12);
}

.dbk .dbspark {
  --c: inherit;
}

.dbk .dbspark span:last-child {
  background: var(--c);
}

.dbk__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dbk__i {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 14);
  background: var(--tb);
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dbk__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.dbk__d.is-down {
  color: var(--acc);
}

.dbk__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.dbk__v {
  font-size: max(12px, calc(var(--u) * 38));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.dbk__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.dbk__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

/* == 221. Dealer dashboard — cards: tasks, sales, funnel =============== */
.dbgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.dbgrid--eq {
  align-items: stretch;
}

.dbcol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}

.dbcard {
  min-width: 0;
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.dbcard__h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
}

.dbcard__h > div:first-child {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.dbcard__t,
.dbcard__s {
  margin: 0;
}

.dbcard__t {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.dbcard__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.dbcard__x {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.dbprog {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.dbprog__bar {
  width: calc(var(--u) * 160);
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--ms-tile);
  overflow: hidden;
}

.dbprog__f {
  display: block;
  width: 0;
  height: 100%;
  background: var(--pd-ok);
  transition: width .4s;
}

.dbprog__t {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--pd-ok);
  white-space: nowrap;
}

.dbundo {
  margin: 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.dbundo[hidden],
.dbzero[hidden],
.dbt[hidden] {
  display: none;
}

.dbundo__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 15));
}

.dbundo__b {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 19);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
}

.dbts {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.dbt {
  --c: var(--up-plus);
  --tb: var(--ms-tile);
  --tc: var(--ink);
  position: relative;
  padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  overflow: hidden;
  display: grid;
  grid-template-columns: calc(var(--u) * 56) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 16);
  align-items: center;
}

.dbt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--c);
}

.dbt--acc {
  --c: var(--acc);
  --tb: var(--acc-a10);
  --tc: var(--acc);
}

.dbt--blue {
  --c: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
  --tc: var(--ml-blue);
}

.dbt--amber {
  --c: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
  --tc: var(--gr-amber);
}

.dbt__i {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: calc(var(--u) * 18);
  background: var(--tb);
  color: var(--tc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dbt__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.dbt__h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.dbt__t {
  font-size: max(12px, calc(var(--u) * 18));
  line-height: 1.3;
}

.dbpr {
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: var(--ms-tile);
  color: var(--body);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.dbpr--urgent {
  background: var(--acc-a12);
  color: var(--acc);
}

.dbpr--today {
  background: rgba(29, 95, 209, .1);
  color: var(--ml-blue);
}

.dbt__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.dbt__a {
  display: flex;
  gap: calc(var(--u) * 6);
}

.dbt__later,
.dbt__go {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 22);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.dbt__later {
  color: var(--mute);
}

.dbt__later:hover {
  color: var(--ink);
}

.dbt__go {
  padding: 0 calc(var(--u) * 18);
  background: var(--c);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
}

.dbt__go:hover {
  filter: brightness(1.1);
}

.dbzero {
  margin: 0;
  padding: calc(var(--u) * 34);
  border-radius: calc(var(--u) * 24);
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 19));
}

.dbzero__i {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: 50%;
  background: var(--pd-ok);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 26));
}

.dbsel {
  margin: 0;
  padding: calc(var(--u) * 4) 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 14);
}

.dbsel__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.dbsel__v {
  font-size: max(12px, calc(var(--u) * 32));
  font-weight: 300;
  letter-spacing: -.02em;
}

.dbsel__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--pd-ok);
}

.dbsel__d.is-down {
  color: var(--acc);
}

.dbsel__d[hidden] {
  display: none;
}

.dbchart {
  --gap: calc(var(--u) * 6);
  position: relative;
  height: calc(var(--u) * 240);
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
}

.dbchart.is-few {
  --gap: calc(var(--u) * 12);
}

.dbchart__g {
  position: absolute;
  left: 0;
  right: 0;
  top: 25%;
  border-top: 1px dashed var(--up-ln);
  pointer-events: none;
}

.dbchart__g--2 {
  top: 50%;
}

.dbchart__g--3 {
  top: 75%;
}

.dbbar {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--u) * 3);
}

.dbbar[hidden] {
  display: none;
}

.dbbar__p {
  display: none;
  flex: 1;
  border-radius: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 3) calc(var(--u) * 3);
  background: rgba(128, 132, 140, .3);
  transition: height .4s;
}

.dbchart.is-cmp .dbbar__p {
  display: block;
}

.dbbar__v {
  flex: 1;
  border-radius: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 4) calc(var(--u) * 4);
  background: var(--ink);
  transition: height .4s, background .2s;
}

.dbchart.is-units .dbbar__v {
  background: var(--ml-blue);
}

.dbbar.is-sel .dbbar__v,
.dbchart.is-units .dbbar.is-sel .dbbar__v {
  background: var(--acc);
  box-shadow: 0 8px 18px var(--acc-a30);
}

.dbticks {
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.dbfs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.dbf {
  min-width: 0;
  padding: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.dbf--ink {
  background: var(--up-plus);
  color: #fff;
}

.dbf--ok {
  background: var(--pd-ok);
  color: #fff;
}

.dbf__h,
.dbf__v {
  margin: 0;
}

.dbf__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.dbf__k {
  font-size: max(12px, calc(var(--u) * 14));
  opacity: .7;
}

.dbf__p {
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 9);
  border-radius: calc(var(--u) * 13);
  background: var(--surf);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.dbf--ok .dbf__p {
  background: rgba(255, 255, 255, .2);
}

.dbf__v {
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1;
}

.dbf__bar {
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
  background: var(--ms-tile);
  overflow: hidden;
}

.dbf--ink .dbf__bar,
.dbf--ok .dbf__bar {
  background: rgba(255, 255, 255, .2);
}

.dbf__f {
  display: block;
  height: 100%;
  background: var(--acc);
}

.dbf--ink .dbf__f,
.dbf--ok .dbf__f {
  background: #fff;
}

/* == 222. Dealer dashboard — today, leaderboard, reputation =========== */
.dbtl {
  position: relative;
  padding-left: calc(var(--u) * 22);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.dbtl::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * 5);
  top: calc(var(--u) * 10);
  bottom: calc(var(--u) * 10);
  width: 2px;
  background: var(--ms-tile);
}

.dbnow {
  position: relative;
  margin-left: calc(var(--u) * -22);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.dbnow__dot {
  flex-shrink: 0;
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 5px var(--acc-a18);
}

.dbnow__ln {
  flex: 1;
  height: 2px;
  background: var(--acc);
}

.dbnow__t {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.dbev {
  --c: var(--ml-blue);
  position: relative;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 60) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 12);
  align-items: center;
}

.dbev--ok {
  --c: var(--pd-ok);
}

.dbev--amber {
  --c: var(--gr-amber);
}

.dbev.is-past {
  opacity: .6;
}

.dbev__dot {
  position: absolute;
  left: calc(var(--u) * -22);
  top: 50%;
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  margin-top: calc(var(--u) * -6);
  border: 2px solid var(--surf);
  border-radius: 50%;
  background: var(--c);
}

.dbev__time {
  font-size: max(12px, calc(var(--u) * 17));
}

.dbev__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.dbev__t,
.dbev__d {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dbev__t {
  font-size: max(12px, calc(var(--u) * 16));
}

.dbev__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.dbev__cf {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 12);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.dbev__cf[aria-pressed="true"] {
  border-color: rgba(47, 163, 107, .4);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.dblbs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.dblb {
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 34) calc(var(--u) * 48) minmax(0, 1fr) calc(var(--u) * 60);
  gap: calc(var(--u) * 12);
  align-items: center;
}

.dblb.is-top {
  background: rgba(240, 181, 74, .12);
}

.dblb__r {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: 50%;
  background: var(--ms-tile);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.dblb__r--0 {
  background: var(--db-gold);
  color: #fff;
}

.dblb__r--1 {
  background: #c5c9cf;
  color: #fff;
}

.dblb__r--2 {
  background: #d9a07a;
  color: #fff;
}

.dblb__av,
.dbl__img,
.dbrev__av {
  border-radius: 50%;
  object-fit: cover;
}

.dblb__av {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
}

.dblb__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.dblb__h {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
}

.dblb__s {
  color: var(--mute);
  white-space: nowrap;
}

.dblb__bar,
.dbdist__bar {
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--ms-tile);
  overflow: hidden;
}

.dblb__f,
.dbdist__f {
  display: block;
  height: 100%;
  background: var(--acc);
}

.dblb__f--acc,
.dbdist__f--acc {
  background: var(--acc);
}

.dblb__f--blue {
  background: var(--ml-blue);
}

.dblb__f--ok,
.dbdist__f--ok {
  background: var(--pd-ok);
}

.dblb__f--purple {
  background: var(--db-purple);
}

.dbdist__f--ok2 {
  background: #7fc79d;
}

.dbdist__f--amber {
  background: var(--gr-amber);
}

.dblb__v {
  text-align: right;
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.dbrate {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 6);
}

.dbrate__v {
  font-size: max(12px, calc(var(--u) * 40));
  font-weight: 300;
  line-height: 1;
}

.dbrate__s {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--gr-amber);
}

.dbdists {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.dbdist {
  display: grid;
  grid-template-columns: calc(var(--u) * 34) minmax(0, 1fr) calc(var(--u) * 44);
  gap: calc(var(--u) * 10);
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.dbdist__k {
  color: var(--body);
}

.dbdist__v {
  text-align: right;
  color: var(--mute);
}

.dbrev {
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.dbrev__h,
.dbrev__q {
  margin: 0;
}

.dbrev__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.dbrev__who {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 16));
}

.dbrev__av {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
}

.dbrev__st {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--gr-amber);
}

.dbrev__q {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.45;
  color: var(--body);
}

.dbrev__in {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 14);
  outline: none;
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
}

.dbrev__in:focus {
  border-color: var(--acc);
}

.dbrev__in[hidden] {
  display: none;
}

.dbrev .dbbtn {
  align-self: flex-start;
}

.dbrev .dbbtn.is-step {
  background: var(--acc);
}

/* == 223. Dealer dashboard — leads, inventory ========================== */
.dbls {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.dbl {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 52) minmax(0, 1fr) calc(var(--u) * 170) calc(var(--u) * 120) calc(var(--u) * 110) auto;
  gap: calc(var(--u) * 14);
  align-items: center;
}

.dbl__av {
  position: relative;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
}

.dbl__img {
  width: 100%;
  height: 100%;
}

.dbl__hot {
  position: absolute;
  right: -2px;
  top: -2px;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--acc);
}

.dbl__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.dbl__n {
  font-size: max(12px, calc(var(--u) * 17));
}

.dbl__c {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.dbl__src {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.dbpill {
  --t: var(--body);
  --tb: var(--ms-tile);
  justify-self: start;
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.dbpill--hot,
.dbpill--new {
  --t: var(--acc);
  --tb: var(--acc-a10);
}

.dbpill--cold {
  --t: var(--body);
}

.dbpill--warm {
  --t: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.dbpill--offer {
  --t: var(--db-purple);
  --tb: rgba(122, 79, 209, .12);
}

.dbpill--booked {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.dbpill--contacted {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.dbl__a {
  display: flex;
  gap: calc(var(--u) * 6);
}

.dbl__call {
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  border-radius: 50%;
  background: var(--surf);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dbl__call:hover {
  color: var(--acc);
}

.dbl .dbbtn--sm {
  height: calc(var(--u) * 42);
  border-radius: calc(var(--u) * 21);
}

.dbage {
  height: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 8);
  overflow: hidden;
  display: flex;
  gap: calc(var(--u) * 3);
}

.dbage__s {
  background: var(--pd-ok);
}

.dbage__s--blue {
  background: var(--ml-blue);
}

.dbage__s--amber {
  background: var(--gr-amber);
}

.dbage__s--acc {
  background: var(--acc);
}

.dbage__ls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.dbage__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.dbage__k {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.dbage__sw {
  flex-shrink: 0;
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 3);
}

.dbage__v {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.dbst__k {
  padding-top: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 15));
}

.dbsts {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.dbst {
  padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 10) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 84) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 14);
  align-items: center;
}

.dbst__ph {
  position: relative;
  height: calc(var(--u) * 56);
  border-radius: calc(var(--u) * 14);
  overflow: hidden;
  background: var(--stripes);
}

.dbst__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dbst__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.dbst__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 16));
}

.dbst__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--gr-amber);
}

.dbst.is-done .dbst__d {
  color: var(--pd-ok);
}

/* == 224. Dealer — tablet and phone ==================================== */
@media (max-width: 1999px) {
  .dbkpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dbhero {
    grid-column: span 3;
  }

  .dbhi {
    grid-template-columns: minmax(0, 1fr);
  }

  .dbhi__r {
    flex-wrap: wrap;
  }

  .dbl {
    grid-template-columns: calc(var(--u) * 52) minmax(0, 1fr) auto auto;
    gap: 10px 14px;
  }

  .dbl__src {
    display: none;
  }

  .dbl__a {
    grid-column: 2 / -1;
  }
}

@media (max-width: 1599px) {
  .dbgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dbkpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dbhero {
    grid-column: span 2;
  }

  .dbt {
    grid-template-columns: calc(var(--u) * 56) minmax(0, 1fr);
  }

  .dbt__a {
    grid-column: 2;
  }
}

@media (max-width: 1199px) {
  .dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .dlside {
    position: relative;
    top: auto;
  }

  .dlg__ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 767px) {
  /* the site's .5px phone unit makes 27 px rows; the dealer shell and dashboard get a finger-sized scale */
  .dl {
    --u: .8px;
  }

  .dlcard,
  .dbhi,
  .dbcard {
    padding: 16px 14px;
  }

  .dbhi__l {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .dbhi__t {
    font-size: 30px;
  }

  .dbkpis {
    gap: 12px;
  }

  .dbk {
    padding: 16px 14px;
  }

  .dbhero__v {
    font-size: 44px;
  }

  .dbcard__h {
    flex-wrap: wrap;
  }

  .dbcard__x {
    flex-wrap: wrap;
  }

  .dbfs {
    grid-template-columns: 1fr 1fr;
  }

  .dbf:first-child {
    grid-column: 1 / -1;
  }

  .dbt {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }

  .dbt__i {
    width: 44px;
    height: 44px;
  }

  .dbt__a {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .dbev {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dbev__time {
    grid-column: 1 / -1;
    font-size: 15px;
  }

  .dbl {
    grid-template-columns: 44px auto auto minmax(0, 1fr);
    gap: 10px;
  }

  .dbl__b {
    grid-column: 2 / -1;
  }

  .dbl__src + .dbpill {
    grid-column: 2;
  }

  .dbpill + .dbpill {
    grid-column: 3;
  }

  .dbl__av {
    width: 44px;
    height: 44px;
  }

  .dbl__a {
    grid-column: 4;
    justify-content: flex-end;
  }

  .dbage__ls {
    grid-template-columns: 1fr 1fr;
  }

  .dbprog__bar {
    width: 100px;
  }
}

/* == 225. Dealer · Leads — KPI row, SLA bar, filters ==================== */
.lq {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.lqg__ul,
.lffeed,
.lfcar__cs,
.lffin {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lqkpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) calc(var(--u) * 300);
  gap: calc(var(--u) * 16);
}

.lqk {
  --c: var(--acc);
  --tb: var(--acc-a10);
  min-width: 0;
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  transition: background .2s, color .2s;
}

.lqk--hot {
  --c: #fff;
  --tb: var(--acc);
}

.lqk--blue {
  --c: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.lqk--ok {
  --c: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.lqk.is-on {
  background: var(--acc);
  color: #fff;
}

.lqk__i {
  flex-shrink: 0;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 17);
  background: var(--tb);
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lqk__b {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lqk__k {
  font-size: max(12px, calc(var(--u) * 15));
  opacity: .7;
}

.lqk__r {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
}

.lqk__v {
  font-size: max(12px, calc(var(--u) * 36));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.lqk__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.lqk.is-on .lqk__d {
  color: #fff;
}

.lqk__sp {
  flex-shrink: 0;
  width: calc(var(--u) * 70);
  height: calc(var(--u) * 40);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 3);
}

.lqk__sp span {
  flex: 1;
  border-radius: calc(var(--u) * 3);
  background: rgba(128, 132, 140, .25);
}

.lqk__sp span:last-child {
  background: var(--c);
}

.lqk--hot:not(.is-on) .lqk__sp span:last-child {
  background: var(--acc);
}

.lqkx {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.lqkx__add,
.lqkx__exp {
  flex: 1;
  border-radius: calc(var(--u) * 26);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
}

.lqkx__add {
  background: var(--acc);
  box-shadow: 0 10px 24px var(--acc-a25);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
}

.lqkx__add:hover {
  filter: brightness(1.08);
}

.lqkx__plus {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.lqkx__exp {
  border: 1px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  transition: border-color .2s, color .2s;
}

.lqkx__exp:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.lqkx__exp.is-done,
.lqkx__exp.is-done:hover {
  border-color: rgba(47, 163, 107, .4);
  color: var(--pd-ok);
}

.lqsla {
  padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 32);
  background: var(--up-plus);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.lqsla[hidden],
.lqdone[hidden],
.lqbulk[hidden],
.lqg[hidden],
.lqr[hidden],
.lqempty[hidden],
.lfslots[hidden],
.lfcar[hidden],
.lffin[hidden],
.lqsla__av[hidden] {
  display: none;
}

.lqsla__avs {
  flex-shrink: 0;
  padding-left: calc(var(--u) * 4);
  display: flex;
}

.lqsla__av {
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  margin-right: calc(var(--u) * -10);
  border: 3px solid var(--up-plus);
  border-radius: 50%;
  object-fit: cover;
  background: var(--acc);
}

.lqsla__b {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-left: calc(var(--u) * 14);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.lqsla__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.lqsla__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: #a3a9b3;
}

.lqsla__go {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.lqsla__go:hover {
  filter: brightness(1.1);
}

.lqdone {
  margin: 0;
  padding: calc(var(--u) * 16) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 32);
  background: rgba(47, 163, 107, .12);
  color: var(--sd-drop);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 16));
}

.lqdone__i {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: 50%;
  background: var(--pd-ok);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lqf {
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.lqf__r {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.lqv {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
  transition: background .2s, color .2s;
}

.lqv__n {
  min-width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 7);
  border-radius: calc(var(--u) * 12);
  background: var(--surf);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.lqv[aria-pressed="true"] {
  background: var(--up-plus);
  color: #fff;
}

.lqv[aria-pressed="true"] .lqv__n {
  background: var(--acc);
  color: #fff;
}

.lqsearch {
  flex: 1;
  min-width: calc(var(--u) * 240);
  max-width: calc(var(--u) * 420);
  height: calc(var(--u) * 46);
  margin-left: auto;
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 23);
  background: var(--bg);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lqsearch__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 44);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
}

.lqf__src {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.lqsrc {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.lqsrc:hover {
  border-color: var(--acc);
}

.lqsrc[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc-a08);
  color: var(--acc);
}

.lqseg,
.lfseg {
  flex-shrink: 0;
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 21);
  background: var(--ms-tile);
  display: flex;
}

.lqseg {
  margin-left: auto;
}

.lqseg__b,
.lfseg__b {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 17);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.lqseg__b[aria-pressed="true"],
.lfseg__b[aria-pressed="true"] {
  background: var(--surf);
  color: var(--acc);
}

/* == 226. Dealer · Leads — grouped list, rows, bulk bar ================= */
.lqgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 620);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.lqlist {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.lqbulk {
  position: sticky;
  top: 20px;
  z-index: 3;
  padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 30);
  background: var(--up-plus);
  box-shadow: 0 18px 40px rgba(17, 20, 24, .25);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lqbulk__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 16));
}

.lqbulk__b,
.lqbulk__x {
  height: calc(var(--u) * 42);
  border-radius: calc(var(--u) * 21);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.lqbulk__b {
  padding: 0 calc(var(--u) * 18);
}

.lqbulk__b--me {
  background: #fff;
  color: #111418;
}

.lqbulk__b--acc {
  background: var(--acc);
}

.lqbulk__b:hover,
.lqbulk__x:hover {
  filter: brightness(1.1);
}

.lqbulk__x {
  width: calc(var(--u) * 42);
  font-size: max(12px, calc(var(--u) * 18));
}

.lqg {
  padding: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lqg__h {
  margin: 0;
  font: inherit;
}

.lqg__b {
  width: 100%;
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  text-align: left;
}

.lqg__dot {
  flex-shrink: 0;
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  background: var(--acc);
}

.lqg__dot--blue {
  background: var(--ml-blue);
}

.lqg__dot--ok {
  background: var(--pd-ok);
}

.lqg__t {
  font-size: max(12px, calc(var(--u) * 19));
}

.lqg__n {
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: var(--acc-a10);
  color: var(--acc);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.lqg__n--blue {
  background: rgba(29, 95, 209, .1);
  color: var(--ml-blue);
}

.lqg__n--ok {
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.lqg__s {
  flex: 1;
  min-width: 0;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lqg__chev {
  display: flex;
  color: var(--mute);
  transform: rotate(180deg);
  transition: transform .3s;
}

.lqg.is-shut .lqg__chev {
  transform: none;
}

.lqg__w {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .35s var(--pd-ease);
}

.lqg.is-shut .lqg__w {
  grid-template-rows: 0fr;
}

.lqg__ul {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lqr {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 28) calc(var(--u) * 52) minmax(0, 1.3fr) minmax(0, 1fr) calc(var(--u) * 150) calc(var(--u) * 170) auto;
  gap: calc(var(--u) * 14);
  align-items: center;
  cursor: pointer;
  transition: background .2s;
}

.lqr.is-ck {
  background: rgba(29, 95, 209, .06);
}

/* the ring is inset so the group's collapsing container doesn't clip it */
.lqr.is-sel {
  background: var(--acc-a06);
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.lqr__ck {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  padding: 0;
  border: 2px solid var(--up-ln2);
  border-radius: calc(var(--u) * 8);
  background: var(--surf);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.lqr__ck[aria-pressed="true"] {
  border-color: var(--ml-blue);
  background: var(--ml-blue);
}

.lqr__ck[aria-pressed="true"]::before {
  content: "✓";
}

.lqring,
.lfring {
  --rc: var(--mute);
  flex-shrink: 0;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: conic-gradient(var(--rc) 0 var(--p, 0%), var(--ms-tile) var(--p, 0%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lqring--acc,
.lfring--acc {
  --rc: var(--acc);
}

.lqring--amber,
.lfring--amber {
  --rc: var(--gr-amber);
}

.lqring__n,
.lfring__n {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.lqr__b,
.lqr__car {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.lqr__car {
  gap: calc(var(--u) * 2);
}

.lqr__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.lqr__n {
  padding: 0;
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 17));
  text-align: left;
}

.lqr__n.is-new {
  font-weight: 500;
}

.lqr__n:hover {
  color: var(--acc);
}

.lqheat,
.lftag {
  --t: var(--acc);
  --tb: var(--acc-a10);
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 9);
  border-radius: calc(var(--u) * 12);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.lqheat--warm,
.lftag--amber {
  --t: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.lqheat--cold {
  --t: var(--body);
  --tb: var(--ms-tile);
}

.lftag--ok {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.lftag--blue {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.lqr__last,
.lqr__ct {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lqr__last,
.lqr__cs {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lqr__ct {
  font-size: max(12px, calc(var(--u) * 15));
}

.lqr__w {
  --wc: var(--mute);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.lqr__w--late {
  --wc: var(--acc);
}

.lqr__w--ok {
  --wc: var(--pd-ok);
}

.lqr__wt {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--wc);
}

.lqr__wb {
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
  background: var(--ms-tile);
  overflow: hidden;
}

.lqr__wf {
  display: block;
  width: 0;
  height: 100%;
  background: var(--wc);
}

.lqr__st {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.lqst {
  --t: var(--acc);
  --tb: var(--acc-a10);
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.lqst--1 {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.lqst--2 {
  --t: var(--db-purple);
  --tb: rgba(122, 79, 209, .12);
}

.lqst--3 {
  --t: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.lqst--4 {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.lqst--5 {
  --t: var(--mute);
  --tb: var(--ms-tile);
}

.lqow {
  flex-shrink: 0;
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
  border-radius: 50%;
  object-fit: cover;
  display: flex;
}

.lqow--none {
  background: #c5c9cf;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.lqr__a {
  display: flex;
  gap: calc(var(--u) * 6);
}

.lqq {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  background: var(--surf);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}

.lqq:hover {
  color: var(--acc);
}

.lqq.is-hot,
.lqq.is-hot:hover {
  background: var(--acc);
  color: #fff;
}

.lqq.is-called,
.lqq.is-called:hover {
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
}

.lqq--book,
.lqq--book:hover {
  color: var(--ml-blue);
}

.lqempty {
  margin: 0;
  padding: calc(var(--u) * 50);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 16));
  text-align: center;
}

/* == 227. Dealer · Leads — the lead file =============================== */
.lf {
  position: sticky;
  top: 20px;
  min-width: 0;
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
}

.lf__in {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.lfhd {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.lfring {
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 76);
}

.lfring__n {
  width: calc(var(--u) * 68);
  height: calc(var(--u) * 68);
  font-size: max(12px, calc(var(--u) * 20));
}

.lfhd__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.lfhd__n,
.lfhd__s,
.lfhd__tags {
  margin: 0;
}

.lfhd__n {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  line-height: normal;
}

.lfhd__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lfhd__tags {
  padding-top: calc(var(--u) * 4);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.lfhd__tags .lqheat,
.lftag {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
}

.lfhd__call {
  flex-shrink: 0;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: var(--up-plus);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lfhd__call:hover {
  color: #fff;
  filter: brightness(1.2);
}

.lfrail {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 4);
}

.lfrail__b {
  --t: var(--acc);
  --tb: var(--acc-a10);
  min-width: 0;
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 20);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.lfrail__b--1 {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.lfrail__b--2 {
  --t: var(--db-purple);
  --tb: rgba(122, 79, 209, .12);
}

.lfrail__b--3 {
  --t: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.lfrail__b--4 {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.lfrail__b--5 {
  --t: var(--mute);
}

.lfrail__b:hover {
  color: var(--t);
}

.lfrail__b.is-past {
  background: var(--tb);
  color: var(--t);
}

.lfrail__b.is-cur {
  background: var(--t);
  color: #fff;
}

.lfnba {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  background: linear-gradient(var(--acc-a06), var(--acc-a06)), var(--surf);
  box-shadow: inset 0 0 0 1px var(--acc-a25);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.lfnba__i {
  flex-shrink: 0;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 14);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lfnba__b {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.lfnba__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.lfnba__t {
  font-size: max(12px, calc(var(--u) * 16));
  line-height: 1.35;
}

.lfnba__go {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.lfnba__go:hover {
  filter: brightness(1.08);
}

.lfnba__go[hidden] {
  display: none;
}

.lfslots {
  padding: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 20);
  background: rgba(29, 95, 209, .07);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.lfslot {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  color: var(--ml-blue);
  font-size: max(12px, calc(var(--u) * 14));
}

.lfslot:hover {
  background: var(--ml-blue);
  color: #fff;
}

.lfseg {
  border-radius: calc(var(--u) * 24);
}

.lf .lfseg__b {
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 20);
}

.lffeed {
  max-height: calc(var(--u) * 300);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.lfev {
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 10) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 12);
  align-items: start;
}

.lfev--sys {
  background: transparent;
}

.lfev--you {
  background: var(--acc-a06);
}

.lfev__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  margin-top: calc(var(--u) * 6);
  border-radius: 50%;
  background: var(--ink);
}

.lfev__dot--acc {
  background: var(--acc);
}

.lfev__dot--mute {
  background: var(--mute);
}

.lfev__t {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.45;
}

.lfev__at {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  white-space: nowrap;
}

.lfcar {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.lfcar__img {
  width: 100%;
  height: calc(var(--u) * 170);
  border-radius: calc(var(--u) * 20);
  object-fit: cover;
  background: var(--stripes);
}

.lfcar__h {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.lfcar__t {
  font-size: max(12px, calc(var(--u) * 19));
}

.lfcar__p {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.lfcar__cs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.lfcar__c {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 16);
  background: var(--ms-tile);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.lffin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 8);
}

.lffin__c {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.lffin__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.lffin__v {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.lffin__v--acc {
  color: var(--acc);
}

.lffin__v--ok {
  color: var(--pd-ok);
}

.lffin__v--mute {
  color: var(--mute);
}

.lfnote {
  width: 100%;
  height: calc(var(--u) * 130);
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  outline: none;
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.5;
  resize: none;
  display: block;
}

.lfnote:focus {
  border-color: var(--acc);
}

.lftpls {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.lftpl {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--acc-a35);
  border-radius: calc(var(--u) * 19);
  background: var(--acc-a06);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.lftpl:hover {
  background: var(--acc);
  color: #fff;
}

.lfcomp {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 30);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.lfcomp__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 56);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
}

.lfseg--sf {
  background: var(--surf);
}

.lfcomp .lfseg__b {
  height: calc(var(--u) * 34);
  border-radius: calc(var(--u) * 17);
}

.lfseg__b--ink[aria-pressed="true"] {
  background: var(--up-plus);
  color: #fff;
}

.lfcomp__send {
  flex-shrink: 0;
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  background: #c5c9cf;
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  transition: background .2s;
}

.lfcomp__send.is-on {
  background: var(--acc);
}

.lfown {
  padding-top: calc(var(--u) * 4);
  border-top: 1px solid var(--up-ln);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.lfown__k,
.lfown__n {
  padding-top: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
}

.lfown__k {
  color: var(--mute);
}

.lfown__l {
  padding-top: calc(var(--u) * 10);
  display: flex;
  gap: calc(var(--u) * 6);
}

.lfown__b {
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  padding: 0;
  border-radius: 50%;
  opacity: .55;
  transition: opacity .2s;
}

.lfown__b img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.lfown__b:hover {
  opacity: .85;
}

.lfown__b.is-on {
  box-shadow: 0 0 0 3px var(--surf), 0 0 0 5px var(--acc);
  opacity: 1;
}

.lfown__b.is-on[data-o="1"] {
  box-shadow: 0 0 0 3px var(--surf), 0 0 0 5px var(--ml-blue);
}

.lfown__b.is-on[data-o="2"] {
  box-shadow: 0 0 0 3px var(--surf), 0 0 0 5px var(--pd-ok);
}

.lfown__n {
  flex: 1;
  min-width: 0;
  color: var(--body);
}

.lfown__lost {
  height: calc(var(--u) * 40);
  margin-top: calc(var(--u) * 10);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.lfown__lost:hover {
  border-color: var(--acc);
  color: var(--acc);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lfcomp__send:not(.is-on) {
    background: #3a3f47;
  }
}

:root[data-theme="dark"] .lfcomp__send:not(.is-on) {
  background: #3a3f47;
}

/* == 228. Dealer · Leads — tablet and phone ============================= */
@media (max-width: 1999px) {
  .lqkpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lqkx {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .lqkx__add,
  .lqkx__exp {
    height: calc(var(--u) * 52);
  }

  .lqgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lf {
    position: relative;
    top: auto;
  }
}

@media (max-width: 1599px) {
  .lqr {
    grid-template-columns: calc(var(--u) * 28) calc(var(--u) * 52) minmax(0, 1fr) auto;
  }

  .lqr__car,
  .lqr__w {
    grid-column: 3 / -1;
  }

  .lqr__st {
    grid-column: 3;
  }

  .lqr__a {
    grid-column: 4;
  }
}

@media (max-width: 767px) {
  .lq {
    --u: .8px;
  }

  .lqkpis {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .lqk {
    padding: 14px 16px;
  }

  .lqsla {
    flex-wrap: wrap;
  }

  .lqsla__b {
    flex-basis: calc(100% - 140px);
    padding-left: 10px;
  }

  .lqsla__go {
    width: 100%;
  }

  .lqsearch {
    min-width: 0;
    max-width: none;
    flex-basis: 100%;
    margin-left: 0;
  }

  .lqf__src {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }

  .lqseg {
    margin-left: 0;
  }

  .lqbulk {
    flex-wrap: wrap;
    padding: 10px;
  }

  .lqbulk__t {
    flex-basis: calc(100% - 52px);
    padding-left: 8px;
  }

  .lqg {
    padding: 8px;
  }

  .lqg__s {
    display: none;
  }

  .lqr {
    grid-template-columns: 26px 44px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .lqring {
    width: 44px;
    height: 44px;
  }

  .lqring__n {
    width: 37px;
    height: 37px;
  }

  .lqr__car,
  .lqr__w {
    grid-column: 3;
  }

  .lqr__st {
    grid-column: 1 / 3;
  }

  .lqr__a {
    grid-column: 3;
    justify-content: flex-end;
  }

  .lf {
    padding: 16px 14px;
  }

  .lfhd {
    flex-wrap: wrap;
  }

  .lfrail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lfnba {
    flex-wrap: wrap;
  }

  .lfnba__b {
    flex-basis: calc(100% - 60px);
  }

  .lfnba__go {
    width: 100%;
  }

  .lfseg {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lfcomp {
    height: auto;
    padding: 6px;
    border-radius: 24px;
    flex-wrap: wrap;
  }

  .lfcomp__in {
    flex-basis: 100%;
    height: 44px;
    padding: 0 10px;
  }

  .lfcomp__send {
    margin-left: auto;
  }

  .lffin {
    grid-template-columns: minmax(0, 1fr);
  }

  .lfown {
    flex-wrap: wrap;
  }
}

/* == 229. Dealer · Test drives — KPIs, day bar ========================== */
.tv {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.tvleg,
.tvwhere,
.tvfls {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* status colours: pending amber · confirmed blue · on the road accent · done green · no-show grey */
.tvb,
.tvst,
.tvleg__sw {
  --c: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.tvb--confirmed,
.tvst--confirmed,
.tvleg__sw--confirmed {
  --c: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.tvb--onroad,
.tvst--onroad,
.tvleg__sw--onroad {
  --c: var(--acc);
  --tb: var(--acc-a10);
}

.tvb--done,
.tvst--done,
.tvleg__sw--done {
  --c: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.tvb--noshow,
.tvst--noshow,
.tvleg__sw--noshow {
  --c: var(--mute);
  --tb: var(--ms-tile);
}

.tvkpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) calc(var(--u) * 300);
  gap: calc(var(--u) * 16);
}

.tvk {
  min-width: 0;
  margin: 0;
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.tvk__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.tvk__r {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
}

.tvk__v {
  font-size: max(12px, calc(var(--u) * 38));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.tvk__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.tvkx {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tvkx__book,
.tvkx__av {
  flex: 1;
  border-radius: calc(var(--u) * 26);
}

.tvkx__book {
  background: var(--acc);
  box-shadow: 0 10px 24px var(--acc-a25);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
}

.tvkx__book:hover {
  filter: brightness(1.08);
}

.tvkx__av {
  border: 1px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  transition: border-color .2s, color .2s;
}

.tvkx__av:hover {
  border-color: var(--acc);
}

.tvkx__av[aria-pressed="true"] {
  border-color: rgba(47, 163, 107, .4);
  color: var(--pd-ok);
}

.tvday {
  padding: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tvday__arr {
  flex-shrink: 0;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border-radius: 50%;
  background: var(--ms-tile);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 18));
}

.tvday__arr:hover:not(:disabled) {
  color: var(--acc);
}

.tvday__arr:disabled {
  opacity: .4;
  cursor: default;
}

.tvday__t {
  min-width: calc(var(--u) * 200);
  margin: 0;
  font-size: max(12px, calc(var(--u) * 20));
  text-align: center;
}

.tvday__today {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 21);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tvday__today:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.tvday__sp {
  flex: 1;
}

.tvseg {
  flex-shrink: 0;
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 22);
  background: var(--ms-tile);
  display: flex;
}

.tvseg__b {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.tvseg__b[aria-pressed="true"] {
  background: var(--surf);
  color: var(--acc);
}

.tvleg {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.tvleg__i {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
}

.tvleg__sw {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 3);
  background: var(--c);
}

/* == 230. Dealer · Test drives — day calendar =========================== */
.tvgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 560);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.tvcal {
  min-width: 0;
  padding: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
}

.tvcal__in {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.tvheads,
.tvbody {
  display: grid;
  grid-template-columns: calc(var(--u) * 70) repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.tvh {
  min-width: 0;
  padding: calc(var(--u) * 8) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.tvh__av {
  flex-shrink: 0;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  object-fit: cover;
}

.tvh__av--car {
  border-radius: calc(var(--u) * 12);
}

.tvh__b {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.tvh__n {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 15));
}

.tvh__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tvbody {
  position: relative;
  height: calc(var(--u) * 1040);
}

.tvhours {
  position: relative;
}

.tvhour {
  position: absolute;
  left: 0;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tvcols {
  display: contents;
}

/* half-hour lines drawn on the column background */
.tvcol {
  position: relative;
  min-width: 0;
  border-radius: calc(var(--u) * 18);
  background: repeating-linear-gradient(180deg, var(--bg) 0 calc(var(--u) * 51), var(--ms-tile) calc(var(--u) * 51) calc(var(--u) * 52));
}

.tvslot {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 12);
  transition: background .2s;
}

.tvslot:hover,
.tvslot:focus-visible {
  background: var(--acc-a08);
}

.tvb {
  position: absolute;
  left: calc(var(--u) * 6);
  right: calc(var(--u) * 6);
  height: calc(var(--u) * 74);
  padding: calc(var(--u) * 7) calc(var(--u) * 10);
  border-left: 4px solid var(--c);
  border-radius: calc(var(--u) * 16);
  background: var(--tb);
  color: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 1);
  text-align: left;
  transition: background .2s, color .2s, box-shadow .2s;
}

.tvb.is-sel {
  background: var(--c);
  box-shadow: 0 10px 24px rgba(17, 20, 24, .18);
  color: #fff;
}

.tvb__t,
.tvb__c,
.tvb__m {
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tvb__t,
.tvb__m {
  font-size: max(12px, calc(var(--u) * 14));
  line-height: calc(var(--u) * 20);
  opacity: .8;
}

.tvb__c {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: calc(var(--u) * 21);
}

.tvnow {
  position: absolute;
  left: calc(var(--u) * 62);
  right: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  pointer-events: none;
}

.tvnow[hidden] {
  display: none;
}

.tvnow__dot {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  border-radius: 50%;
  background: var(--acc);
}

.tvnow__ln {
  flex: 1;
  height: 2px;
  background: var(--acc);
}

/* == 231. Dealer · Test drives — drive panel and fleet ================= */
.tvp {
  position: sticky;
  top: 20px;
  min-width: 0;
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
}

.tvp__none {
  margin: 0;
  padding: calc(var(--u) * 60) calc(var(--u) * 20);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 16));
  text-align: center;
}

.tvp__none[hidden],
.tvp__in[hidden] {
  display: none;
}

.tvp__in {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.tvp__hd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tvst {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--tb);
  color: var(--c);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
}

.tvst::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.tvp__time {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.tvp__cd {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.tvcust {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.tvcust__av {
  flex-shrink: 0;
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  border-radius: 50%;
  object-fit: cover;
}

.tvcust__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.tvcust__n,
.tvcust__tags {
  margin: 0;
}

.tvcust__n {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
  line-height: normal;
}

.tvcust__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.tvtag {
  --t: var(--acc);
  --tb: var(--acc-a10);
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tvtag--ok {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.tvtag--blue {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.tvtag--amber {
  --t: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.tvcust__call {
  flex-shrink: 0;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  background: var(--ms-tile);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tvcust__call:hover {
  color: var(--acc);
}

.tvcar {
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 110) minmax(0, 1fr);
  gap: calc(var(--u) * 14);
  align-items: center;
}

.tvcar__img {
  width: 100%;
  height: calc(var(--u) * 72);
  border-radius: calc(var(--u) * 16);
  object-fit: cover;
  background: var(--stripes);
}

.tvcar__b {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.tvcar__n {
  font-size: max(12px, calc(var(--u) * 17));
}

.tvcar__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tvwhere {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 8);
}

.tvwhere__c {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.tvwhere__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tvwhere__v {
  font-size: max(12px, calc(var(--u) * 16));
}

.tvroute {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
}

.tvroute__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.tvprep {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.tvprep__h {
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 15));
}

.tvprep__n {
  color: var(--gr-amber);
}

.tvprep__n.is-ok {
  color: var(--pd-ok);
}

.tvprep__g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 6);
}

.tvprep__b {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
  text-align: left;
}

.tvprep__box {
  flex-shrink: 0;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  border: 2px solid var(--up-ln2);
  border-radius: calc(var(--u) * 7);
  background: var(--surf);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.tvprep__b[aria-pressed="true"] .tvprep__box {
  border-color: var(--pd-ok);
  background: var(--pd-ok);
}

.tvprep__b[aria-pressed="true"] .tvprep__box::before {
  content: "✓";
}

.tvp__st {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.tvp__st:empty {
  display: none;
}

.tvodo {
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tvodo__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tvodo__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 34);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 18));
  text-align: right;
}

.tvfb {
  margin: 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: rgba(47, 163, 107, .08);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tvfb__t {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--sd-drop);
}

.tvfb__stars {
  display: flex;
  gap: calc(var(--u) * 6);
}

.tvstar {
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  border-radius: 50%;
  background: var(--surf);
  color: #c5c9cf;
  font-size: max(12px, calc(var(--u) * 18));
  transition: background .2s, color .2s;
}

.tvstar[aria-pressed="true"] {
  background: var(--acc);
  color: #fff;
}

.tvfb__int {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.tvfb .tvseg {
  background: var(--surf);
}

.tvfb .tvseg__b[aria-pressed="true"] {
  background: var(--pd-ok);
  color: #fff;
}

.tvfb .tvseg__b[data-i="1"][aria-pressed="true"] {
  background: var(--gr-amber);
}

.tvfb .tvseg__b[data-i="2"][aria-pressed="true"] {
  background: var(--mute);
}

.tvacts {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.tvbtn {
  flex: 1;
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 25);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, filter .2s;
}

.tvbtn:hover {
  border-color: var(--acc);
}

.tvbtn--acc {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.tvbtn--ok {
  border-color: var(--pd-ok);
  background: var(--pd-ok);
  color: #fff;
}

.tvbtn--ink {
  border-color: var(--up-plus);
  background: var(--up-plus);
  color: #fff;
}

.tvbtn--acc:hover,
.tvbtn--ok:hover,
.tvbtn--ink:hover {
  filter: brightness(1.1);
}

.tvbtn--mute {
  color: var(--mute);
}

.tvbtn.is-done,
.tvbtn.is-done:hover {
  border-color: rgba(47, 163, 107, .4);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  filter: none;
  cursor: default;
}

.tvbtn--line.is-done,
.tvbtn--line.is-done:hover {
  border-color: var(--up-ln2);
  background: var(--surf);
}

.tvreslots {
  padding: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.tvreslots[hidden] {
  display: none;
}

.tvreslot {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
}

.tvreslot:hover {
  background: var(--acc);
  color: #fff;
}

.tvfleet {
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.tvfleet__h {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.tvfleet__t,
.tvfleet__s {
  margin: 0;
}

.tvfleet__t {
  font-size: max(12px, calc(var(--u) * 22));
  line-height: normal;
  font-weight: 300;
}

.tvfleet__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tvfls {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.tvfl {
  width: 100%;
  min-width: 0;
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
  text-align: left;
  transition: opacity .2s;
}

.tvfl[aria-pressed="true"] {
  opacity: .55;
}

.tvfl__img {
  width: 100%;
  height: calc(var(--u) * 70);
  border-radius: calc(var(--u) * 14);
  object-fit: cover;
  background: var(--stripes);
}

.tvfl__n {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 15));
}

.tvfl__s {
  --c: var(--pd-ok);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  color: var(--c);
  font-size: max(12px, calc(var(--u) * 14));
}

.tvfl__s::before {
  content: "";
  flex-shrink: 0;
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: currentColor;
}

.tvfl__s--acc {
  --c: var(--acc);
}

.tvfl__s--mute {
  --c: var(--mute);
}

/* == 232. Dealer · Test drives — tablet and phone ======================= */
@media (max-width: 1999px) {
  .tvkpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tvkx {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .tvkx__book,
  .tvkx__av {
    height: calc(var(--u) * 52);
  }

  .tvday {
    flex-wrap: wrap;
  }

  .tvgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tvp {
    position: relative;
    top: auto;
  }

  .tvfls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .tv {
    --u: .8px;
  }

  .tvkpis {
    gap: 12px;
  }

  .tvk {
    padding: 14px 16px;
  }

  .tvday__t {
    flex: 1;
    min-width: 0;
    font-size: 17px;
  }

  .tvday__sp {
    display: none;
  }

  /* four columns of drives need room: the calendar scrolls sideways inside its card */
  .tvcal {
    padding: 12px;
    overflow-x: auto;
  }

  .tvcal__in {
    min-width: 640px;
  }

  .tvp {
    padding: 16px 14px;
  }

  .tvcust {
    flex-wrap: wrap;
  }

  .tvroute {
    flex-wrap: wrap;
  }

  .tvprep__g,
  .tvwhere {
    grid-template-columns: minmax(0, 1fr);
  }

  .tvbtn {
    flex-basis: 100%;
  }

  .tvfleet__h {
    flex-direction: column;
  }

  .tvfls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* == 233. Dealer · Deals — KPIs and the pipeline board ================== */
.dz {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.dzcol__ul,
.dzsheet__ul,
.dzgp,
.dzfin,
.dzdocs {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* stage colours: offer amber · accepted purple · deposit / financing blue · paperwork grey · ready accent · delivered green */
.dzdot,
.dzpill,
.dzrail__b {
  --c: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.dzdot--1,
.dzpill--s1,
.dzrail__b--1 {
  --c: var(--db-purple);
  --tb: rgba(122, 79, 209, .12);
}

.dzdot--2,
.dzdot--3,
.dzpill--s2,
.dzpill--s3,
.dzrail__b--2,
.dzrail__b--3 {
  --c: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.dzdot--4,
.dzpill--s4,
.dzrail__b--4 {
  --c: var(--body);
  --tb: var(--ms-tile);
}

.dzdot--5,
.dzpill--s5,
.dzrail__b--5 {
  --c: var(--acc);
  --tb: var(--acc-a10);
}

.dzdot--6,
.dzpill--s6,
.dzrail__b--6,
.dzpill--ok {
  --c: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.dzpill--sx {
  --c: var(--mute);
  --tb: var(--ms-tile);
}

.dzkpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) calc(var(--u) * 300);
  gap: calc(var(--u) * 16);
}

.dzk {
  min-width: 0;
  margin: 0;
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.dzk__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.dzk__r {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
}

.dzk__v {
  font-size: max(12px, calc(var(--u) * 38));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.dzk__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.dzkx {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.dzkx__new,
.dzkx__exp {
  flex: 1;
  border-radius: calc(var(--u) * 26);
}

.dzkx__new {
  background: var(--acc);
  box-shadow: 0 10px 24px var(--acc-a25);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
}

.dzkx__new:hover {
  filter: brightness(1.08);
}

.dzkx__exp {
  border: 1px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  transition: border-color .2s, color .2s;
}

.dzkx__exp:hover {
  border-color: var(--acc);
}

.dzkx__exp.is-done {
  border-color: rgba(47, 163, 107, .4);
  color: var(--pd-ok);
}

.dzboard {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
  align-items: start;
}

.dzcol {
  min-width: 0;
  min-height: calc(var(--u) * 300);
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.dzcol__h {
  margin: 0;
  padding: calc(var(--u) * 6) calc(var(--u) * 8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: inherit;
}

.dzcol__t {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
}

.dzdot {
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: 50%;
  background: var(--c);
}

.dzcol__n,
.dzcol__sum {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.dzcol__sum {
  margin: 0;
  padding: 0 calc(var(--u) * 8);
}

.dzcol__ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.dzc {
  width: 100%;
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
  text-align: left;
  transition: background .2s;
}

.dzc.is-sel {
  background: var(--acc-a06);
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.dzc__img {
  width: 100%;
  height: calc(var(--u) * 64);
  border-radius: calc(var(--u) * 12);
  object-fit: cover;
  background: var(--stripes);
}

.dzc__car {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.3;
}

.dzc__row {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.dzc__p {
  color: var(--ink);
}

.dzc__bl {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.dzc__bl--mute {
  color: var(--mute);
}

.dzc__bl--amber {
  color: var(--gr-amber);
}

.dzc__bl--acc {
  color: var(--acc);
}

/* == 234. Dealer · Deals — the deal sheet =============================== */
.dzs {
  min-width: 0;
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
}

.dzs__none {
  margin: 0;
  padding: calc(var(--u) * 60) calc(var(--u) * 20);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 16));
  text-align: center;
}

.dzs__none[hidden],
.dzs__in[hidden] {
  display: none;
}

.dzs__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.dzs__l,
.dzs__r {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.dzs__hd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.dzpill {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--tb);
  color: var(--c);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.dzpill--ok,
.dzpill--amber {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
}

.dzs__id {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.dzs__bl {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
}

.dzs__car {
  display: grid;
  grid-template-columns: calc(var(--u) * 120) minmax(0, 1fr);
  gap: calc(var(--u) * 14);
  align-items: center;
}

.dzs__img {
  width: 100%;
  height: calc(var(--u) * 80);
  border-radius: calc(var(--u) * 18);
  object-fit: cover;
  background: var(--stripes);
}

.dzs__cb {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.dzs__n {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.dzs__c {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.dzrail {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  gap: calc(var(--u) * 4);
}

.dzrail__b {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 6);
  border-radius: calc(var(--u) * 19);
  color: var(--mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 14));
  transition: background .2s, color .2s;
}

.dzrail__b:hover:not(:disabled) {
  color: var(--c);
}

.dzrail__b:disabled {
  cursor: default;
}

.dzrail__b.is-past {
  background: var(--tb);
  color: var(--c);
}

.dzrail__b.is-cur {
  background: var(--c);
  color: #fff;
}

.dzsheet {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.dzsheet__h,
.dzadds__h,
.dzadds__l {
  margin: 0;
}

.dzsheet__h {
  padding-bottom: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.dzsheet__ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.dzln {
  padding: calc(var(--u) * 5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.dzln--ok {
  color: var(--pd-ok);
}

.dzln--mute {
  color: var(--body);
}

.dzln--tot {
  border-top: 1px solid var(--up-ln);
}

.dzln--tot .dzln__v {
  font-size: max(12px, calc(var(--u) * 22));
}

.dzadds {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.dzadds__h {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.dzadds__l {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.dzadd {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 19);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.dzadd:hover {
  border-color: var(--acc);
}

.dzadd[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc-a08);
  color: var(--acc);
}

.dzgp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 8);
}

.dzgp__c {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.dzgp__c--ok {
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
}

.dzgp__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.dzgp__c--ok .dzgp__k {
  color: inherit;
}

.dzgp__v {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.dzbox {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.dzbox--row {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
}

.dzbox--del {
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
}

.dzbox__h,
.dzdue,
.dzdel {
  margin: 0;
}

.dzbox__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.dzbox__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.dzbox--row .dzbox__k {
  font-size: max(12px, calc(var(--u) * 14));
}

.dzbox__n {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--gr-amber);
}

.dzbox__n--ok {
  color: var(--pd-ok);
}

.dzpill--amber {
  --c: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.dzfin {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.dzfin li {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.dzfin__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.dzfin__v {
  font-size: max(12px, calc(var(--u) * 18));
}

.dzsubmit {
  align-self: flex-start;
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 21);
  background: var(--ml-blue);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
}

.dzsubmit:hover {
  filter: brightness(1.1);
}

.dzdocs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.dzbox--docs {
  gap: calc(var(--u) * 8);
}

.dzdoc {
  --c: var(--acc);
  padding: calc(var(--u) * 8) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.dzdoc--amber {
  --c: var(--gr-amber);
}

.dzdoc--ok {
  --c: var(--pd-ok);
}

.dzdoc__dot {
  flex-shrink: 0;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  border-radius: 50%;
  background: #d6d9de;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.dzdoc--amber .dzdoc__dot,
.dzdoc--ok .dzdoc__dot {
  background: var(--c);
}

.dzdoc--amber .dzdoc__dot::before {
  content: "…";
}

.dzdoc--ok .dzdoc__dot::before {
  content: "✓";
}

.dzdoc__t {
  flex: 1;
  min-width: 0;
  font-size: max(12px, calc(var(--u) * 15));
}

.dzdoc__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--c);
}

.dzdoc__b {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 12);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 17);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.dzdoc__b:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.dzdue,
.dzdel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.dzdue {
  flex: 1;
}

.dzdue__v {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.dzdel__v {
  font-size: max(12px, calc(var(--u) * 16));
}

.dzlink {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 22);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.dzlink:hover {
  border-color: var(--acc);
}

.dzlink.is-done,
.dzlink.is-done:hover {
  border-color: rgba(47, 163, 107, .4);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  cursor: default;
}

.dzmode {
  flex-shrink: 0;
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 21);
  background: var(--surf);
  display: flex;
}

.dzmode__b {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 17);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.dzmode__b[aria-pressed="true"] {
  background: var(--acc);
  color: #fff;
}

.dzacts {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.dzbtn {
  flex: 1;
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 25);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, filter .2s;
}

.dzbtn:hover {
  border-color: var(--acc);
}

.dzbtn--acc {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.dzbtn--ok {
  border-color: var(--pd-ok);
  background: var(--pd-ok);
  color: #fff;
}

.dzbtn--ink {
  border-color: var(--up-plus);
  background: var(--up-plus);
  color: #fff;
}

.dzbtn--acc:hover,
.dzbtn--ok:hover,
.dzbtn--ink:hover {
  filter: brightness(1.1);
}

.dzbtn--mute {
  color: var(--mute);
}

.dzbtn.is-done,
.dzbtn.is-done:hover {
  border-color: rgba(47, 163, 107, .4);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  cursor: default;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dzdoc__dot {
    background: #3a3f47;
  }
}

:root[data-theme="dark"] .dzdoc__dot {
  background: #3a3f47;
}

/* == 235. Dealer · Deals — tablet and phone ============================= */
@media (max-width: 1999px) {
  .dzkpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dzkx {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .dzkx__new,
  .dzkx__exp {
    height: calc(var(--u) * 52);
  }

  .dzs__in {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1199px) {
  /* seven stages need room: the board scrolls sideways inside the page column */
  .dzboard {
    grid-template-columns: repeat(7, 200px);
    overflow-x: auto;
    padding-bottom: 6px;
  }
}

@media (max-width: 767px) {
  .dz {
    --u: .8px;
  }

  .dzkpis {
    gap: 12px;
  }

  .dzk {
    padding: 14px 16px;
  }

  .dzk__r {
    flex-wrap: wrap;
  }

  .dzboard {
    grid-template-columns: repeat(7, 220px);
  }

  .dzs {
    padding: 16px 14px;
  }

  .dzs__hd {
    flex-wrap: wrap;
  }

  .dzs__bl {
    flex-basis: 100%;
    margin-left: 0;
  }

  .dzrail {
    flex-wrap: wrap;
  }

  .dzrail__b {
    flex-basis: calc(25% - 3px);
  }

  .dzbox--row {
    flex-wrap: wrap;
  }

  .dzlink {
    width: 100%;
  }

  .dzdoc {
    flex-wrap: wrap;
  }

  .dzdoc__t {
    flex-basis: calc(100% - 40px);
  }

  .dzdoc__s {
    margin-left: 36px;
  }

  .dzdoc__b {
    margin-left: auto;
  }

  .dzbtn {
    flex-basis: 100%;
  }
}

/* == 236. Dealer · Inventory — KPIs, stock health, price position ======= */
.iv {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.ivmix,
.ivrows,
.ivsim,
.ivperf,
.ivchks,
.ivcomps,
.ivhist,
.ivleads {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* tones: ok green · blue · amber · acc accent */
.ivht__dot,
.ivhb,
.ivmix__dot {
  --c: var(--pd-ok);
}

.ivht__dot--blue,
.ivhb--blue,
.ivmix__dot--blue {
  --c: var(--ml-blue);
}

.ivht__dot--amber,
.ivhb--amber {
  --c: var(--gr-amber);
}

.ivht__dot--acc,
.ivhb--acc,
.ivmix__dot--acc {
  --c: var(--acc);
}

.ivkpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) calc(var(--u) * 300);
  gap: calc(var(--u) * 16);
}

.ivk {
  min-width: 0;
  margin: 0;
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.ivk__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.ivk__r {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 calc(var(--u) * 8);
}

.ivk__v {
  font-size: max(12px, calc(var(--u) * 38));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.ivk__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.ivk__d--acc {
  color: var(--acc);
}

.ivkx {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.ivkx__add,
.ivkx__imp {
  flex: 1;
  border-radius: calc(var(--u) * 26);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ivkx__add {
  background: var(--acc);
  box-shadow: 0 10px 24px var(--acc-a25);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
}

.ivkx__add:hover {
  color: #fff;
  filter: brightness(1.08);
}

.ivkx__imp {
  border: 1px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  transition: border-color .2s, color .2s;
}

.ivkx__imp:hover {
  border-color: var(--acc);
}

.ivkx__imp.is-done,
.ivkx__imp.is-done:hover {
  border-color: rgba(47, 163, 107, .4);
  color: var(--pd-ok);
}

.ivhealth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 420);
  gap: calc(var(--u) * 16);
}

.ivhc,
.ivpos {
  min-width: 0;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.ivhc {
  background: var(--surf);
}

.ivhc__h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6) calc(var(--u) * 14);
}

.ivhc__t,
.ivhc__s,
.ivpos__t,
.ivpos__s {
  margin: 0;
}

.ivhc__t,
.ivpos__t {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  line-height: normal;
}

.ivhc__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ivhc__x {
  height: calc(var(--u) * 32);
  margin-left: auto;
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--ink);
  color: var(--surf);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: pre;
}

.ivhc__x[hidden] {
  display: none;
}

.ivhbar {
  height: calc(var(--u) * 16);
  display: flex;
  gap: calc(var(--u) * 4);
}

.ivhb {
  min-width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 8);
  background: var(--c);
  transition: opacity .2s;
}

.ivhts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.ivht {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border: 1.5px solid transparent;
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
  text-align: left;
  transition: opacity .2s;
}

.ivhb.is-dim,
.ivht.is-dim {
  opacity: .3;
}

.ivht.is-on {
  border-color: var(--c);
}

.ivht__h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
}

.ivht__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  background: var(--c);
}

.ivht__r {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ivht__b {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 calc(var(--u) * 8);
}

.ivht__n {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
}

.ivht__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.ivpos {
  background: var(--up-plus);
  color: #fff;
}

.ivpos__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: rgba(255, 255, 255, .7);
}

.ivmix {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.ivmix__i {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 15));
}

.ivmix__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  background: var(--c);
}

.ivmix__t {
  flex: 1;
}

.ivmix__n {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

/* == 237. Dealer · Inventory — toolbar, smart views, bulk bar =========== */
.ivbar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.ivtfs,
.ivsort {
  flex-shrink: 0;
  padding: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
}

.ivtf {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 23);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
  transition: background .2s, color .2s;
}

.ivtf__n,
.ivsm__n {
  min-width: calc(var(--u) * 26);
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 7);
  border-radius: calc(var(--u) * 12);
  background: var(--ms-tile);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.ivtf[aria-pressed="true"],
.ivsm[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.ivtf[aria-pressed="true"] .ivtf__n,
.ivsm[aria-pressed="true"] .ivsm__n {
  background: var(--acc);
  color: #fff;
}

.ivq {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 58);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 29);
  background: var(--surf);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.ivq__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
}

.ivsort__k {
  padding: 0 calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ivsort__b {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 23);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.ivsort__b[aria-pressed="true"] {
  background: var(--ms-tile);
  color: var(--ink);
}

.ivsms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.ivsms__k {
  padding-right: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ivsm {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 21);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
  transition: background .2s, color .2s;
}

.ivsm__n {
  height: calc(var(--u) * 26);
  border-radius: calc(var(--u) * 13);
}

.ivsms__n {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ivbulk {
  padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 30);
  background: var(--up-plus);
  box-shadow: 0 16px 40px rgba(17, 20, 24, .25);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.ivbulk[hidden] {
  display: none;
}

.ivbulk__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 16));
}

.ivbulk__b {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.ivbulk__b--acc {
  background: var(--acc);
}

.ivbulk__b--x {
  background: transparent;
}

.ivbulk__b:hover {
  filter: brightness(1.15);
}

/* == 238. Dealer · Inventory — stock table ============================= */
.ivgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 600);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.ivtable {
  min-width: 0;
  padding: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.ivth,
.ivr {
  display: grid;
  grid-template-columns: calc(var(--u) * 28) minmax(0, 1.5fr) calc(var(--u) * 130) calc(var(--u) * 130) calc(var(--u) * 120) calc(var(--u) * 150) calc(var(--u) * 96) calc(var(--u) * 96);
  gap: calc(var(--u) * 14);
  align-items: center;
}

.ivth {
  margin: 0;
  padding: calc(var(--u) * 8) calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ivrows {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.ivr {
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  cursor: pointer;
  transition: background .2s;
}

.ivr[hidden] {
  display: none;
}

.ivr.is-sel {
  background: var(--acc-a06);
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.ivr__ck {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  padding: 0;
  border: 1.5px solid var(--up-ln2);
  border-radius: calc(var(--u) * 9);
  background: var(--surf);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.ivr__ck[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc);
}

.ivr__ck[aria-pressed="true"]::before {
  content: "✓";
}

.ivr__v {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.ivr__ph {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 84);
  height: calc(var(--u) * 58);
}

.ivr__img {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--u) * 14);
  object-fit: cover;
  background: var(--stripes);
  display: block;
}

.ivr__star {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 2px var(--surf);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.ivr__vb {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 2);
}

.ivr__n {
  max-width: 100%;
  padding: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 16));
  text-align: left;
}

.ivr__n:hover {
  color: var(--acc);
}

.ivr__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ivr__p {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.ivr__pv {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.ivr__was,
.ivprice__was {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ivpill,
.ivst {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
  justify-self: start;
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.ivpill--blue {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.ivpill--acc {
  --t: var(--acc);
  --tb: var(--acc-a10);
}

.ivst--reserved {
  --t: var(--db-purple);
  --tb: rgba(122, 79, 209, .12);
}

.ivst--draft {
  --t: var(--body);
  --tb: var(--ms-tile);
}

.ivst--sold {
  --t: var(--ink);
  --tb: var(--ms-tile);
}

.ivr__d,
.ivr__q,
.ivbox__q {
  --c: var(--pd-ok);
}

.ivr__d--amber,
.ivr__q--amber {
  --c: var(--gr-amber);
}

.ivr__d--acc,
.ivr__q--acc {
  --c: var(--acc);
}

.ivr__d--mute {
  --c: var(--mute);
}

.ivr__d {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.ivr__dt {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--c);
  white-space: nowrap;
}

.ivr__db,
.ivr__qb {
  border-radius: calc(var(--u) * 2);
  background: var(--ms-tile);
  overflow: hidden;
}

.ivr__db {
  height: calc(var(--u) * 4);
}

.ivr__df,
.ivr__qf {
  display: block;
  width: 0;
  height: 100%;
  background: var(--c);
}

.ivr__vw {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 10);
}

.ivspark {
  height: calc(var(--u) * 30);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 2);
}

.ivspark span {
  width: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: var(--up-ln2);
}

.ivspark .is-last {
  background: var(--ink);
}

.ivspark .is-acc {
  background: var(--acc);
}

.ivr__vn {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.ivr__q {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.ivr__qb {
  flex: 1;
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
}

.ivr__qv,
.ivbox__q {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--c);
}

.ivempty {
  margin: 0;
  padding: calc(var(--u) * 40);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 16));
  text-align: center;
}

.ivempty[hidden] {
  display: none;
}

/* == 239. Dealer · Inventory — the car panel =========================== */
.ivpn {
  position: sticky;
  top: 20px;
  min-width: 0;
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.ivpn__ph {
  position: relative;
  height: calc(var(--u) * 220);
  border-radius: calc(var(--u) * 24);
  overflow: hidden;
  background: var(--stripes);
}

.ivpn__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ivpn__pills {
  position: absolute;
  left: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.ivpn__st,
.ivpn__days {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.ivpn__st {
  background: var(--pd-ok);
  color: #fff;
}

.ivpn__st--reserved {
  background: var(--db-purple);
}

.ivpn__st--draft {
  background: var(--body);
}

.ivpn__st--sold {
  background: var(--ink);
  color: var(--surf);
}

.ivpn__days {
  background: var(--surf);
  color: var(--c);
}

.ivpn__hd {
  padding: 0 calc(var(--u) * 8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.ivpn__n,
.ivpn__s {
  margin: 0;
}

.ivpn__n {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: normal;
}

.ivpn__s {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.ivseg {
  margin: 0 calc(var(--u) * 8);
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  gap: calc(var(--u) * 4);
}

.ivseg__b {
  --c: var(--pd-ok);
  flex: 1;
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 20);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
  transition: background .2s, color .2s;
}

.ivseg__b--reserved {
  --c: var(--db-purple);
}

.ivseg__b--draft {
  --c: var(--body);
}

.ivseg__b[aria-pressed="true"] {
  background: var(--c);
  color: #fff;
}

/* dark theme: ink is light there, so the label takes the surface colour */
.ivseg__b--sold[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.ivtabs {
  padding: 0 calc(var(--u) * 8) calc(var(--u) * 12);
  border-bottom: .5px solid var(--up-ln2);
  display: flex;
  gap: calc(var(--u) * 6);
}

.ivtab {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 20);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
  transition: background .2s, color .2s;
}

.ivtab[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.ivpane {
  padding: 0 calc(var(--u) * 8) calc(var(--u) * 8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.ivsimc {
  padding: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.ivsimc__h,
.ivprice__c,
.ivband__lg,
.ivpres,
.ivbox__k,
.ivbox__s,
.ivbox__h {
  margin: 0;
}

.ivsimc__h,
.ivbox__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.ivsimc__k,
.ivbox__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.ivprice {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.ivprice__b {
  flex-shrink: 0;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border: 1px solid var(--up-ln2);
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 22));
}

.ivprice__b:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.ivprice__c {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2);
}

.ivprice__v {
  font-size: max(12px, calc(var(--u) * 48));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.ivband {
  position: relative;
  height: calc(var(--u) * 10);
  margin: calc(var(--u) * 6) calc(var(--u) * 10) 0;
  border-radius: calc(var(--u) * 5);
  background: linear-gradient(90deg, rgba(47, 163, 107, .35), rgba(29, 95, 209, .22) 40%, rgba(29, 95, 209, .22) 60%, var(--acc-a35));
}

.ivband__mk {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -5);
  width: 2px;
  height: calc(var(--u) * 20);
  background: var(--ink);
}

.ivband__knob {
  --c: var(--ml-blue);
  position: absolute;
  top: 50%;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  margin: calc(var(--u) * -11) 0 0 calc(var(--u) * -11);
  border: 3px solid var(--c);
  border-radius: 50%;
  background: var(--surf);
  transition: left .3s var(--pd-ease);
}

.ivband__knob--ok {
  --c: var(--pd-ok);
}

.ivband__knob--acc {
  --c: var(--acc);
}

.ivband__lg {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ivband__m {
  color: var(--ink);
}

.ivpres {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.ivpre {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.ivpre:hover {
  border-color: var(--acc);
}

.ivpre[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.ivsim {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.ivsim__c {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.ivsim__k,
.ivperf__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ivsim__v,
.ivperf__v {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.ivsim__v--ok {
  color: var(--pd-ok);
}

.ivsim__v--amber {
  color: var(--gr-amber);
}

.ivsim__v--acc {
  color: var(--acc);
}

/* the simulator's sub-captions are the one place the handoff allows 12px */
.ivsim__s {
  font-size: 12px;
  color: var(--mute);
}

.ivbox {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.ivbox--chk {
  gap: calc(var(--u) * 8);
}

.ivperf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.ivperf__c {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.ivbox__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.ivchks {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.ivchk {
  --c: var(--pd-ok);
  padding: calc(var(--u) * 8) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.ivchk--warn {
  --c: var(--gr-amber);
}

.ivchk__dot {
  flex-shrink: 0;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.ivchk--ok .ivchk__dot::before {
  content: "✓";
}

.ivchk--warn .ivchk__dot::before {
  content: "!";
}

.ivchk__t {
  flex: 1;
  min-width: 0;
  font-size: max(12px, calc(var(--u) * 15));
}

.ivchk__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--c);
}

.ivchk__b {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 12);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 17);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.ivchk__b:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.ivcomps,
.ivhist,
.ivleads {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.ivcomp {
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  color: var(--ink);
  display: grid;
  grid-template-columns: calc(var(--u) * 64) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 12);
  align-items: center;
}

.ivcomp.is-you {
  background: var(--acc-a08);
  box-shadow: inset 0 0 0 1.5px var(--acc);
  color: var(--acc);
}

.ivcomp__img {
  width: 100%;
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 10);
  object-fit: cover;
  display: block;
}

.ivcomp__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.ivcomp__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 15));
}

.ivcomp__w {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ivcomp__p {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.ivhist li {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.ivhist__r {
  display: flex;
  gap: calc(var(--u) * 14);
}

.ivhist__w {
  min-width: calc(var(--u) * 110);
  color: var(--mute);
  text-align: right;
}

.ivlead {
  --c: var(--acc);
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.ivlead--blue {
  --c: var(--ml-blue);
}

.ivlead--amber {
  --c: var(--gr-amber);
}

.ivlead--mute {
  --c: var(--body);
}

.ivlead__av {
  flex-shrink: 0;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  object-fit: cover;
}

.ivlead__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.ivlead__n {
  font-size: max(12px, calc(var(--u) * 16));
}

.ivlead__w {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ivlead__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.ivlead__s {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--surf);
  color: var(--c);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.ivlink {
  height: calc(var(--u) * 46);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 23);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.ivlink:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.ivnone {
  margin: 0;
  padding: calc(var(--u) * 30);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 15));
  text-align: center;
}

.ivacts {
  margin: 0;
  padding: 0 calc(var(--u) * 8) calc(var(--u) * 8);
  display: flex;
  gap: calc(var(--u) * 8);
}

.ivbtn {
  flex: 1;
  height: calc(var(--u) * 52);
  padding: 0 6px;
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.ivbtn:hover {
  border-color: var(--acc);
}

.ivbtn--ink,
.ivbtn--ink:hover {
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--surf);
}

.ivbtn.is-done,
.ivbtn.is-done:hover {
  border-color: rgba(47, 163, 107, .4);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

/* == 240. Dealer · Inventory — tablet and phone ========================= */
@media (max-width: 1999px) {
  .ivkpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ivkx {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .ivkx__add,
  .ivkx__imp {
    height: calc(var(--u) * 52);
  }

  .ivbar {
    flex-wrap: wrap;
  }

  .ivq {
    order: -1;
    flex-basis: 100%;
  }

  .ivgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ivpn {
    position: relative;
    top: auto;
  }
}

@media (max-width: 1599px) {
  .ivhealth {
    grid-template-columns: minmax(0, 1fr);
  }

  .ivth {
    display: none;
  }

  .ivr {
    grid-template-columns: calc(var(--u) * 28) minmax(0, 1fr) auto auto;
    gap: calc(var(--u) * 12) calc(var(--u) * 14);
  }

  .ivr__d,
  .ivr__vw,
  .ivr__q {
    grid-column: span 1;
  }

  .ivr__v {
    grid-column: 2 / 3;
  }

  .ivr__d {
    grid-column: 2;
  }

  .ivr__vw {
    grid-column: 3 / 5;
  }

  .ivr__q {
    grid-column: 2;
  }
}

@media (max-width: 767px) {
  .iv {
    --u: .8px;
  }

  .ivkpis {
    gap: 12px;
  }

  .ivk {
    padding: 14px 16px;
  }

  .ivhc,
  .ivpos {
    padding: 16px 14px;
  }

  .ivhts {
    grid-template-columns: 1fr 1fr;
  }

  .ivtfs,
  .ivsort {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ivsms__n {
    flex-basis: 100%;
    margin-left: 0;
  }

  .ivbulk {
    flex-wrap: wrap;
    padding: 10px;
  }

  .ivbulk__t {
    flex-basis: 100%;
    padding-left: 8px;
  }

  .ivtable {
    padding: 8px;
  }

  .ivr {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    padding: 10px;
  }

  .ivr__v,
  .ivr__d,
  .ivr__q {
    grid-column: 2 / -1;
  }

  .ivr__p {
    grid-column: 2;
  }

  .ivr__vw {
    grid-column: 2 / -1;
  }

  .ivr .ivst {
    grid-column: 2;
  }

  .ivpn {
    padding: 10px;
  }

  .ivpn__ph {
    height: 180px;
  }

  .ivprice__v {
    font-size: 34px;
  }

  .ivsim,
  .ivperf {
    grid-template-columns: 1fr 1fr;
  }

  .ivpres .ivpre {
    flex: 1 1 auto;
  }

  .ivacts {
    flex-wrap: wrap;
  }

  .ivbtn {
    flex-basis: 100%;
  }
}

/* == 241. Dealer · Add listing — VIN hero and the ready rail ============ */
.ax {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.ax p {
  margin: 0;
}

.axid__st,
.axspecs__g,
.axslots,
.axsim,
.axcomps,
.axopts,
.axboosts,
.axhints {
  margin: 0;
  padding: 0;
  list-style: none;
}

.axhero {
  padding: calc(var(--u) * 34) calc(var(--u) * 36);
  border-radius: calc(var(--u) * 36);
  background: var(--up-plus);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: calc(var(--u) * 34);
  align-items: stretch;
}

.axhero__l {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 16);
}

.axhero__k {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.8);
  color: rgba(255, 255, 255, .6);
}

.axhero__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 48));
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.02;
}

.axvin {
  display: flex;
  gap: calc(var(--u) * 10);
}

.axvin__in {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 26);
  border: 0;
  border-radius: calc(var(--u) * 32);
  outline: 0;
  background: var(--surf);
  color: var(--ink);
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 20));
  letter-spacing: calc(var(--u) * 1.6);
}

.axvin__go {
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 17));
  white-space: nowrap;
  transition: background .2s;
}

.axvin__go.is-done {
  background: var(--pd-ok);
}

.axhero__x {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.axghost {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: calc(var(--u) * 22);
  color: #fff;
  display: inline-flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.axghost:hover {
  border-color: #fff;
  color: #fff;
}

.axid {
  min-width: 0;
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: calc(var(--u) * 28);
  background: rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.axid--none {
  border: 1px dashed rgba(255, 255, 255, .25);
  background: transparent;
  color: rgba(255, 255, 255, .6);
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 16));
  text-align: center;
}

.axid__v {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.axid__ok {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: rgba(47, 163, 107, .2);
  color: #6fd3a0;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.axid__vin {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 0.84);
  color: rgba(255, 255, 255, .6);
}

.axid__h {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.axid__l {
  font-size: max(12px, calc(var(--u) * 16));
  color: rgba(255, 255, 255, .7);
}

.axid__t {
  font-size: max(12px, calc(var(--u) * 52));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}

.axid__st {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.axid__c {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.axid__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: rgba(255, 255, 255, .6);
}

.axid__n {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.axid__n--ok {
  color: #6fd3a0;
}

.axchips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.axchip {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.axchip--acc {
  background: var(--acc-a08);
  color: var(--acc);
}

.axchip--dot::before {
  content: "";
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--pd-ok);
}

.axchip--hero {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.axchip--tile {
  background: var(--ms-tile);
}

.axready {
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 24);
  align-items: center;
}

.axready__l {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.axready__h {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.axready__t {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.axready__n {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.axsegs {
  display: flex;
  gap: calc(var(--u) * 6);
}

.axsegs__b {
  --c: var(--ms-tile);
  --t: var(--mute);
  flex: 1;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
  text-align: left;
}

.axsegs__b--ok {
  --c: var(--pd-ok);
  --t: var(--ink);
}

.axsegs__b--open {
  --c: var(--acc);
  --t: var(--acc);
}

.axsegs__bar {
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 5);
  background: var(--c);
  transition: background .3s;
}

.axsegs__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--t);
}

.axready__r {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.axest {
  min-width: calc(var(--u) * 130);
  padding: calc(var(--u) * 10) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.axest__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.axest__v {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.axauto {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 30);
  background: var(--acc);
  box-shadow: 0 10px 24px var(--acc-a25);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
  white-space: nowrap;
}

.axauto.is-done {
  background: var(--pd-ok);
}

/* == 242. Dealer · Add listing — section cards ========================= */
.axgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 520);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.axcards {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 14);
  align-items: start;
}

.axc {
  min-width: 0;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
}

.axc.is-open {
  grid-column: span 2;
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.axc__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.axc__n {
  flex-shrink: 0;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  background: var(--ms-tile);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.axc__n.is-done {
  background: var(--pd-ok);
  color: #fff;
}

.axc__hb {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.axc__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
  line-height: normal;
}

.axc__s {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.axst {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: rgba(201, 138, 18, .14);
  color: var(--gr-amber);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.axst--ok {
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.axc__ed,
.axbtn {
  flex-shrink: 0;
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 22);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.axc__ed:hover,
.axbtn:hover {
  border-color: var(--acc);
}

.axbtn--ink,
.axbtn--ink:hover {
  border: 0;
  background: var(--ink);
  color: var(--surf);
}

.axspecs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.axok {
  align-self: flex-start;
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.axspecs__g {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.axspec {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.axspec__k,
.axfield__k,
.axfg__t,
.axhelp {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.axspec__v {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 16));
}

.axnote {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.axveh {
  display: grid;
  grid-template-columns: calc(var(--u) * 200) repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 14);
}

.axfield {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.axfield__in {
  width: 100%;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  outline: 0;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
}

.axfield__in:focus,
.axta:focus {
  border-color: var(--acc);
}

.axseg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  gap: calc(var(--u) * 4);
}

.axseg__b {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 20);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.axseg__b[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.axmini {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 6);
}

.axmini__s {
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--u) * 10);
  overflow: hidden;
  background: var(--bg);
}

.axmini__s.is-cover {
  border: 2px solid var(--acc);
}

.axmini__s.is-empty {
  border: 1.5px dashed var(--up-ln2);
}

.axmini__img,
.axslot__img,
.axpv__img,
.axcomp__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.axrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
}

.axrow--l {
  justify-content: flex-start;
}

.axrow__t {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.axslots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.axslot {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px dashed var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.axslot.is-full {
  border: 2px solid transparent;
}

.axslot.is-cover {
  border-color: var(--acc);
}

.axslot__img {
  position: absolute;
  inset: 0;
}

.axslot__l {
  position: relative;
  height: calc(var(--u) * 26);
  margin: calc(var(--u) * 8);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  color: var(--mute);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.axslot.is-full .axslot__l {
  background: var(--surf);
  color: var(--ink);
}

.axslot__cv {
  position: absolute;
  left: calc(var(--u) * 8);
  top: calc(var(--u) * 8);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.axfg {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.axfg__l {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.axtog {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 21);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.axtog:hover {
  border-color: var(--acc);
}

.axtog[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc-a08);
  color: var(--acc);
}

.axexc {
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.axwrite {
  align-self: flex-start;
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 18);
  border: 1px dashed var(--acc-a50);
  border-radius: calc(var(--u) * 21);
  background: var(--acc-a06);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 15));
}

.axta {
  width: 100%;
  min-height: calc(var(--u) * 150);
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  outline: 0;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  line-height: 1.5;
  resize: vertical;
  display: block;
}

.axcount {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.axcount.is-ok {
  color: var(--pd-ok);
}

.axhist {
  --c: var(--gr-amber);
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.axhist.is-ok {
  --c: var(--pd-ok);
}

.axhist__dot {
  flex-shrink: 0;
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.axhist__dot::before {
  content: "!";
}

.axhist.is-ok .axhist__dot::before {
  content: "✓";
}

.axhist__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.axhist__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.axhist__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 243. Dealer · Add listing — pricing, options, publish ============= */
.axpmini {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.axpmini__v {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  letter-spacing: -.02em;
}

.axband {
  position: relative;
  height: calc(var(--u) * 10);
  margin: calc(var(--u) * 6) calc(var(--u) * 10) 0;
  border-radius: calc(var(--u) * 5);
  background: linear-gradient(90deg, rgba(47, 163, 107, .35), rgba(29, 95, 209, .22) 40%, rgba(29, 95, 209, .22) 60%, var(--acc-a35));
}

.axband--mini {
  flex: 1;
  height: calc(var(--u) * 8);
  margin: 0;
  border-radius: calc(var(--u) * 4);
}

.axband__mk {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -5);
  width: 2px;
  height: calc(var(--u) * 20);
  background: var(--ink);
}

.axband--mini .axband__mk {
  top: calc(var(--u) * -4);
  height: calc(var(--u) * 16);
}

.axband__knob {
  --c: var(--ml-blue);
  position: absolute;
  top: 50%;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  margin: calc(var(--u) * -11) 0 0 calc(var(--u) * -11);
  border: 3px solid var(--c);
  border-radius: 50%;
  background: var(--surf);
  transition: left .3s var(--pd-ease);
}

.axband--mini .axband__knob {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  margin: calc(var(--u) * -9) 0 0 calc(var(--u) * -9);
}

.axband__knob--ok,
.axpill--ok {
  --c: var(--pd-ok);
}

.axband__knob--acc {
  --c: var(--acc);
}

.axband__lg {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.axband__m {
  color: var(--ink);
}

.axpri {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: calc(var(--u) * 16);
  align-items: start;
}

.axsimc {
  min-width: 0;
  padding: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.axsimc__h,
.axbox__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.axsimc__k,
.axbox__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.axpill {
  --t: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--tb);
  color: var(--t);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.axpill--ok {
  --t: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.axpill--acc {
  --t: var(--acc);
  --tb: var(--acc-a10);
}

.axprice,
.axfloor {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.axprice__b,
.axfloor__b {
  flex-shrink: 0;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border: 1px solid var(--up-ln2);
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 22));
}

.axprice__b:hover,
.axfloor__b:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.axprice__v {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 46));
  font-weight: 300;
  letter-spacing: -.03em;
  text-align: center;
}

.axpres {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.axpre {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.axpre:hover {
  border-color: var(--acc);
}

.axpre[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.axsim {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.axsim__c {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.axsim__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.axsim__v {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.axsim__v--ok {
  color: var(--pd-ok);
}

.axsim__v--amber {
  color: var(--gr-amber);
}

.axsim__v--acc {
  color: var(--acc);
}

/* the price simulator's sub-captions are the one place the handoff allows 12px */
.axsim__s {
  font-size: 12px;
  color: var(--mute);
}

.axpri__r {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.axbox {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.axfloor__w {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.axfloor__w.is-warn {
  color: var(--acc);
}

.axfloor {
  gap: calc(var(--u) * 10);
}

.axfloor__b {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  font-size: max(12px, calc(var(--u) * 18));
}

.axfloor__v {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  text-align: center;
}

.axcomps {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.axcomp {
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: var(--surf);
  color: var(--ink);
  display: grid;
  grid-template-columns: calc(var(--u) * 56) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 10);
  align-items: center;
}

.axcomp.is-you {
  background: var(--acc-a08);
  box-shadow: inset 0 0 0 1.5px var(--acc);
  color: var(--acc);
}

.axcomp__img {
  height: calc(var(--u) * 38);
  border-radius: calc(var(--u) * 8);
}

.axcomp__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.axcomp__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 15));
}

.axcomp__w {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.axcomp__p {
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.axopts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.axopt {
  width: 100%;
  min-width: 0;
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  text-align: left;
  transition: background .2s, border-color .2s;
}

.axopt[aria-pressed="true"] {
  border-color: var(--acc-a35);
  background: var(--acc-a06);
}

.axopt__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.axopt__t {
  font-size: max(12px, calc(var(--u) * 16));
}

.axopt__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.axsw {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 28);
  border-radius: calc(var(--u) * 14);
  background: var(--up-ln2);
  transition: background .2s;
}

.axsw::after {
  content: "";
  position: absolute;
  top: calc(var(--u) * 3);
  left: calc(var(--u) * 3);
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  border-radius: 50%;
  background: var(--surf);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: left .2s;
}

.axopt[aria-pressed="true"] .axsw {
  background: var(--acc);
}

.axopt[aria-pressed="true"] .axsw::after {
  left: calc(var(--u) * 23);
}

.axpubg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: calc(var(--u) * 16);
}

.axdays,
.axmgrs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.axdays {
  padding-top: calc(var(--u) * 4);
}

.axday {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 19);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
}

.axday[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.axmgr {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 5);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 23);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
}

.axmgr[aria-pressed="true"],
.axboost[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc-a06);
}

.axmgr__av {
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  object-fit: cover;
}

.axboosts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.axboost {
  width: 100%;
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border: 1.5px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 4);
  text-align: left;
}

.axboost__h {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 16));
}

.axboost__p {
  color: var(--body);
}

.axboost[aria-pressed="true"] .axboost__p {
  color: var(--acc);
}

.axboost__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 244. Dealer · Add listing — preview, placement, quality ========== */
.axside {
  position: sticky;
  top: 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.axpv {
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.axpv__h {
  align-self: stretch;
  padding: calc(var(--u) * 4) calc(var(--u) * 4) 0 calc(var(--u) * 8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.axpv__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
}

.axpv__h .axseg {
  border-radius: calc(var(--u) * 20);
}

.axpv__h .axseg__b {
  flex: none;
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 14));
}

.axpv__f {
  width: 100%;
  border: 0 solid var(--up-plus);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
  transition: width .35s var(--pd-ease), padding .35s, border-width .35s, border-radius .35s;
}

.axpv__f.is-mobile {
  width: calc(var(--u) * 340);
  padding: calc(var(--u) * 10);
  border-width: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 44);
}

.axpv__ph {
  position: relative;
  height: calc(var(--u) * 250);
  border-radius: calc(var(--u) * 24);
  background: var(--ms-tile);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.axpv__img {
  position: absolute;
  inset: 0;
}

.axpv__none {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.axpv__pill {
  position: absolute;
  left: calc(var(--u) * 14);
  top: calc(var(--u) * 14);
  background: var(--surf);
}

.axpv__b {
  padding: 0 calc(var(--u) * 8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.axpv__t {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  letter-spacing: -.01em;
}

.axpv__l {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.axpv__p {
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.02em;
}

.axpv__fin {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--acc);
}

.axpv__f > .axchips {
  padding: 0 calc(var(--u) * 8) calc(var(--u) * 8);
}

.axrank,
.axq {
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.axq {
  gap: calc(var(--u) * 12);
}

.axrank__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.axrank__t,
.axq__t {
  font-size: max(12px, calc(var(--u) * 20));
}

.axrank__s,
.axrank__n,
.axq__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.axrank__r {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.axrank__v {
  font-size: max(12px, calc(var(--u) * 56));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}

.axrank__v--ok {
  color: var(--pd-ok);
}

.axrank__v--acc {
  color: var(--acc);
}

.axrank__d {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.axrank__bar {
  display: flex;
  gap: calc(var(--u) * 3);
}

.axrank__bar span {
  flex: 1;
  height: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 5);
  background: var(--ms-tile);
  transition: background .3s;
}

.axrank__bar .is-p1 {
  background: var(--up-ln2);
}

.axrank__bar .is-you {
  background: var(--acc);
}

.axq__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.axq__ring {
  --c: var(--acc);
  flex-shrink: 0;
  width: calc(var(--u) * 84);
  height: calc(var(--u) * 84);
  border-radius: 50%;
  background: conic-gradient(var(--c) 0 var(--p, 0%), var(--ms-tile) var(--p, 0%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.axq__ring--ok {
  --c: var(--pd-ok);
}

.axq__ring--amber {
  --c: var(--gr-amber);
}

.axq__v {
  width: calc(var(--u) * 66);
  height: calc(var(--u) * 66);
  border-radius: 50%;
  background: var(--surf);
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.axq__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.axhints {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.axhint {
  padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.axhint__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.axhint__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.axhint__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.axhint__go {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 19);
  background: var(--acc-a10);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.axallset {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
  font-size: max(12px, calc(var(--u) * 15));
}

.axacts {
  display: flex;
  gap: calc(var(--u) * 8);
}

.axsave,
.axpub {
  height: calc(var(--u) * 54);
  border-radius: calc(var(--u) * 27);
  font-size: max(12px, calc(var(--u) * 15));
}

.axsave {
  flex: 1;
  border: 1px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
}

.axpub {
  flex: 1.5;
  background: var(--acc);
  box-shadow: 0 10px 24px var(--acc-a20);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
}

.axsave.is-done {
  border-color: rgba(47, 163, 107, .4);
  color: var(--pd-ok);
}

.axpub.is-done {
  background: var(--pd-ok);
}

.axauto__n {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .axpv__f {
    border-color: #3a3f47;
  }
}

:root[data-theme="dark"] .axpv__f {
  border-color: #3a3f47;
}

/* == 245. Dealer · Add listing — tablet and phone ======================= */
@media (max-width: 1999px) {
  .axready {
    grid-template-columns: minmax(0, 1fr);
  }

  .axgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .axside {
    position: relative;
    top: auto;
  }

  .axpri {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1599px) {
  .axhero {
    grid-template-columns: minmax(0, 1fr);
  }

  .axcards {
    grid-template-columns: minmax(0, 1fr);
  }

  .axc.is-open {
    grid-column: auto;
  }

  .axveh {
    grid-template-columns: 1fr 1fr;
  }

  .axslots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ax {
    --u: .8px;
  }

  .axhero {
    padding: 20px 16px;
  }

  .axvin {
    flex-wrap: wrap;
  }

  .axvin__in {
    flex-basis: 100%;
  }

  .axvin__go {
    width: 100%;
  }

  .axid {
    padding: 16px;
  }

  .axid__st {
    grid-template-columns: minmax(0, 1fr);
  }

  .axready {
    padding: 16px 14px;
  }

  .axready__r {
    flex-wrap: wrap;
  }

  .axest {
    flex: 1;
    min-width: 0;
  }

  .axauto {
    width: 100%;
  }

  .axsegs__t {
    display: none;
  }

  .axc {
    padding: 16px 14px;
  }

  .axc__h {
    flex-wrap: wrap;
  }

  .axc__hb {
    flex-basis: calc(100% - 54px);
  }

  .axc__ed {
    margin-left: auto;
  }

  .axspecs__g,
  .axslots {
    grid-template-columns: 1fr 1fr;
  }

  .axveh,
  .axopts,
  .axpubg,
  .axboosts {
    grid-template-columns: minmax(0, 1fr);
  }

  .axmini {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .axprice__v {
    font-size: 32px;
  }

  .axsim {
    grid-template-columns: 1fr 1fr;
  }

  .axpv__f.is-mobile {
    width: 100%;
  }

  .axacts {
    flex-direction: column;
  }

  .axsave,
  .axpub {
    flex: none;
  }
}

/* == 246. Dealer · Trade-ins — KPIs and the queue strip ================= */
.tz {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.tz p {
  margin: 0;
}

.tzq,
.tzlines,
.tztiles,
.tzstrs,
.tzngs,
.tzhis,
.tzphs,
.tzrcs,
.tzrss,
.tzins,
.tzbids {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* statuses: new accent · booked blue · inspected purple · offer sent amber · accepted green · declined grey · in stock ink */
.tzs--0 {
  --c: var(--acc);
  --tb: var(--acc-a10);
}

.tzs--1 {
  --c: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.tzs--2 {
  --c: var(--db-purple);
  --tb: rgba(122, 79, 209, .12);
}

.tzs--3 {
  --c: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.tzs--4 {
  --c: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.tzs--5 {
  --c: var(--mute);
  --tb: var(--ms-tile);
}

.tzs--6 {
  --c: var(--ink);
  --tb: var(--ms-tile);
}

.tzv--ok {
  color: var(--pd-ok);
}

.tzv--amber {
  color: var(--gr-amber);
}

.tzv--acc {
  color: var(--acc);
}

.tzv--blue {
  color: var(--ml-blue);
}

.tzv--mute {
  color: var(--body);
}

.tzkpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) calc(var(--u) * 300);
  gap: calc(var(--u) * 16);
}

.tzk {
  min-width: 0;
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.tzk__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.tzk__r {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 calc(var(--u) * 8);
}

.tzk__v {
  font-size: max(12px, calc(var(--u) * 38));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.tzk__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.tzk__d--mute {
  color: var(--mute);
}

.tzkx {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tzkx__add,
.tzkx__cal {
  flex: 1;
  border-radius: calc(var(--u) * 26);
}

.tzkx__add {
  background: var(--acc);
  box-shadow: 0 10px 24px var(--acc-a25);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
}

.tzkx__add:hover {
  filter: brightness(1.08);
}

.tzkx__cal {
  border: 1px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
}

.tzkx__cal:hover {
  border-color: var(--acc);
}

.tzkx__cal[aria-pressed="true"] {
  border-color: rgba(47, 163, 107, .4);
  color: var(--pd-ok);
}

.tzq {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.tzqc {
  width: 100%;
  min-width: 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
  text-align: left;
}

.tzqc.is-sel {
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.tzqc__s {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--c);
}

.tzqc__s::before {
  content: "";
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: 50%;
  background: currentColor;
}

.tzqc__car,
.tzqc__e {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tzqc__car {
  font-size: max(12px, calc(var(--u) * 16));
}

.tzqc__row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tzqc__o {
  color: var(--ink);
}

.tzqc__e {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tzqc__e--acc {
  color: var(--acc);
}

.tzqc__e--amber {
  color: var(--gr-amber);
}

/* == 247. Dealer · Trade-ins — the desk (left) ========================== */
.tzdesk {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.tzl {
  min-width: 0;
  padding: calc(var(--u) * 26);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.tzl__hd {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.tzpill {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--tb);
  color: var(--c);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tzl__id {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.tzl__e {
  flex-shrink: 0;
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tzcar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.tzcar__img {
  flex-shrink: 0;
  width: calc(var(--u) * 160);
  height: calc(var(--u) * 104);
  border-radius: calc(var(--u) * 14);
  object-fit: cover;
  background: var(--stripes);
}

.tzcar__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.tzcar__n {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: normal;
}

.tzcar__c {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.tzcar__m {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tzcalc {
  min-width: 0;
  padding: calc(var(--u) * 18) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.tzcalc__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.tzcalc__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tzcalc__n {
  font-size: max(12px, calc(var(--u) * 14));
}

.tzlines {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.tzln {
  padding: calc(var(--u) * 5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.tzln--acc {
  color: var(--acc);
}

.tzln--mute {
  color: var(--body);
}

.tzln--max {
  border-top: 1px solid var(--up-ln2);
  color: var(--pd-ok);
}

.tzln--max .tzln__v {
  font-size: max(12px, calc(var(--u) * 22));
}

.tzmg {
  padding: calc(var(--u) * 8) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.tzmg__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 15));
}

.tzmg__b,
.tzoff__b {
  flex-shrink: 0;
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border: 1px solid var(--up-ln2);
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 17));
}

.tzmg__b:hover,
.tzoff__b:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.tzmg__v {
  min-width: calc(var(--u) * 56);
  font-size: max(12px, calc(var(--u) * 17));
  text-align: center;
}

.tzoff {
  padding-top: calc(var(--u) * 4);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tzoff__b {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  font-size: max(12px, calc(var(--u) * 22));
}

.tzoff__c {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2);
}

.tzoff__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tzoff__v {
  font-size: max(12px, calc(var(--u) * 58));
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1;
}

.tzrange {
  position: relative;
  height: calc(var(--u) * 10);
  margin: calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * 4);
  border-radius: calc(var(--u) * 5);
  background: linear-gradient(90deg, var(--up-ln2), var(--ms-tile) 55%, rgba(47, 163, 107, .35));
  display: block;
}

.tzrange__m {
  position: absolute;
  top: calc(var(--u) * -6);
  width: 2px;
  height: calc(var(--u) * 22);
  background: var(--body);
}

.tzrange__m--e {
  background: var(--gr-amber);
}

.tzrange__m--x {
  background: var(--pd-ok);
}

.tzrange__k {
  position: absolute;
  top: 50%;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  margin: calc(var(--u) * -11) 0 0 calc(var(--u) * -11);
  border: 3px solid var(--acc);
  border-radius: 50%;
  background: var(--surf);
  transition: left .3s var(--pd-ease);
}

.tzlg {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.tzlg__i {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
}

.tzlg__i::before {
  content: "";
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 2);
  background: var(--body);
}

.tzlg__i--e::before {
  background: var(--gr-amber);
}

.tzlg__i--x::before {
  background: var(--pd-ok);
}

.tztiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.tztile {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.tztile__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tztile__v {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

/* tile sub-captions are the one place the handoff allows 12px */
.tztile__s {
  font-size: 12px;
  color: var(--mute);
}

.tzst {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tzstrs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.tzstr {
  width: 100%;
  min-width: 0;
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border: 1.5px solid var(--up-ln2);
  border-radius: calc(var(--u) * 22);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
  text-align: left;
}

.tzstr:hover {
  border-color: var(--acc-a40);
}

.tzstr[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc-a06);
}

.tzstr__h {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 15));
}

.tzstr__v {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  letter-spacing: -.02em;
}

.tzbar {
  width: 100%;
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
  background: var(--ms-tile);
  overflow: hidden;
  display: block;
}

.tzbar__f,
.tzwin__f {
  display: block;
  width: 0;
  height: 100%;
  background: var(--pd-ok);
  transition: width .3s;
}

.tzbar__f--amber,
.tzwin__f--amber {
  background: var(--gr-amber);
}

.tzbar__f--acc,
.tzwin__f--acc {
  background: var(--acc);
}

.tzstr__g {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.tzbox {
  min-width: 0;
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tzbox--list {
  gap: calc(var(--u) * 8);
}

.tzng {
  padding: calc(var(--u) * 6) 0;
  display: grid;
  grid-template-columns: calc(var(--u) * 12) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 12);
  align-items: center;
}

.tzng__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  background: var(--acc);
}

.tzdot--amber {
  background: var(--gr-amber);
}

.tzdot--blue {
  background: var(--ml-blue);
}

.tzng__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.tzng__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.tzng__w {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tzng__v {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.tzngs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tzngb {
  padding-top: calc(var(--u) * 4);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.tzbtn {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 21);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tzbtn:hover {
  border-color: var(--acc);
}

.tzhis {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tzhi {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.tzhi__k {
  color: var(--body);
}

.tzhi__v {
  text-align: right;
}

.tzeq {
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.tzeq--neg {
  background: var(--acc-a08);
  color: var(--acc);
}

.tzeq__v {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

/* == 248. Dealer · Trade-ins — the desk (right) and the action bar ===== */
.tzr {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.tzcard {
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.tzcard__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.tzcard__t {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 22));
  line-height: normal;
  font-weight: 300;
}

.tzgr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 14);
}

.tzgr__lt {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.tzgr__l {
  flex-shrink: 0;
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: calc(var(--u) * 18);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
}

.tzgr__l--A {
  background: var(--pd-ok);
}

.tzgr__l--B {
  background: var(--ml-blue);
}

.tzgr__l--C {
  background: var(--gr-amber);
}

.tzgr__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.tzphs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.tzph {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 18);
  background: var(--stripes);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.tzph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tzph__l {
  position: relative;
  max-width: 100%;
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: var(--surf);
  overflow: hidden;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tzph__c {
  position: absolute;
  right: calc(var(--u) * 8);
  top: calc(var(--u) * 8);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.tznone {
  padding: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 15));
  text-align: center;
}

.tzready {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tzrcs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.tzrc {
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 14);
  background: var(--bg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 90) calc(var(--u) * 90);
  gap: calc(var(--u) * 12);
  align-items: center;
}

.tzrc__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.tzrc__t,
.tzrc__c {
  font-size: max(12px, calc(var(--u) * 15));
}

.tzrc__v {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tzrc__eta {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tzrc__c {
  text-align: right;
}

.tzrss {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.tzrs {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.tzrs--net {
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
}

.tzrs--neg {
  background: var(--acc-a08);
  color: var(--acc);
}

.tzrs__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tzrs__v {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.tzins,
.tzbids {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.tzin {
  --c: var(--pd-ok);
  padding: calc(var(--u) * 8) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tzin.is-bad {
  --c: var(--acc);
}

.tzin__dot {
  flex-shrink: 0;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.tzin__dot::before {
  content: "✓";
}

.tzin.is-bad .tzin__dot::before {
  content: "!";
}

.tzin__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}

.tzin__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.tzin__n {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tzin__c {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  white-space: nowrap;
}

.tzin.is-bad .tzin__c {
  color: var(--acc);
}

.tzin__sw {
  flex-shrink: 0;
  padding: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  display: flex;
  gap: calc(var(--u) * 2);
}

.tzin__ok,
.tzin__is {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tzin__ok[aria-pressed="true"] {
  background: var(--surf);
  color: var(--pd-ok);
}

.tzin__is[aria-pressed="true"] {
  background: var(--acc);
  color: #fff;
}

.tzbid {
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tzbid__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 15));
}

.tzbid__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.tzbid__v {
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.tzbar2 {
  position: relative;
  padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 32);
  background: var(--up-plus);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
}

.tzbar2__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.tzbar2__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: rgba(255, 255, 255, .6);
}

.tzbar2__v {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.tzwin {
  min-width: calc(var(--u) * 220);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.tzwin__v {
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
}

.tzwin__bar {
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
  background: rgba(255, 255, 255, .15);
  overflow: hidden;
  display: block;
}

.tzwin__f {
  background: #6fd3a0;
}

.tzbar2__sp {
  flex: 1;
}

.tzch {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 24);
  background: rgba(255, 255, 255, .08);
  display: flex;
  gap: calc(var(--u) * 4);
}

.tzch__b {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
}

.tzch__b[aria-pressed="true"] {
  background: #fff;
  color: #111418;
}

.tzact {
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 27);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: inline-flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.tzact:hover {
  color: #fff;
  filter: brightness(1.15);
}

.tzact--acc,
.tzact--ink {
  background: var(--acc);
}

.tzact--ok {
  background: var(--pd-ok);
}

.tznote {
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
  font-size: max(12px, calc(var(--u) * 15));
}

/* == 249. Dealer · Trade-ins — tablet and phone ========================= */
@media (max-width: 1999px) {
  .tzkpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tzkx {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .tzkx__add,
  .tzkx__cal {
    height: calc(var(--u) * 52);
  }

  .tzq {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tzdesk {
    grid-template-columns: minmax(0, 1fr);
  }

  .tzbar2 {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .tz {
    --u: .8px;
  }

  .tzkpis {
    gap: 12px;
  }

  .tzk {
    padding: 14px 16px;
  }

  .tzq {
    grid-template-columns: repeat(7, 220px);
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .tzl,
  .tzcard {
    padding: 16px 14px;
  }

  .tzl__hd {
    flex-wrap: wrap;
  }

  .tzl__e {
    flex-basis: 100%;
    margin-left: 0;
  }

  .tzcar {
    flex-direction: column;
    align-items: flex-start;
  }

  .tzcar__img {
    width: 100%;
    height: auto;
    aspect-ratio: 479 / 170;
  }

  .tzcar__n {
    font-size: 26px;
  }

  .tzcalc {
    padding: 14px;
  }

  .tzoff__v {
    font-size: 36px;
  }

  .tztiles,
  .tzstrs,
  .tzrss {
    grid-template-columns: 1fr 1fr;
  }

  .tzphs {
    grid-template-columns: 1fr 1fr;
  }

  .tzrc {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tzrc__eta {
    grid-column: 1;
    grid-row: 2;
  }

  .tzin {
    flex-wrap: wrap;
  }

  .tzin__b {
    flex-basis: calc(100% - 40px);
  }

  .tzin__c {
    margin-left: 36px;
  }

  .tzin__sw {
    margin-left: auto;
  }

  .tzbar2 {
    padding: 16px;
    gap: 12px;
  }

  .tzwin {
    min-width: 0;
    flex-basis: 100%;
  }

  .tzbar2__sp {
    display: none;
  }

  .tzact {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* == 250. Dealer · Finance — KPIs and the application picker ============ */
.fz {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.fz p {
  margin: 0;
}

.fzpick,
.fzcls,
.fzlines,
.fzpkgs,
.fzprods,
.fzlens,
.fzlen__t,
.fzdocs,
.fztl,
.fzinc {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* tones and statuses: draft grey · submitted blue · docs accent · review amber · approved green · conditional purple · funded ink · declined grey */
.fz .fzv--ok {
  color: var(--pd-ok);
}

.fz .fzv--amber {
  color: var(--gr-amber);
}

.fz .fzv--acc {
  color: var(--acc);
}

.fz .fzv--blue {
  color: var(--ml-blue);
}

.fz .fzv--purple {
  color: var(--db-purple);
}

.fz .fzv--mute {
  color: var(--mute);
}

.fzs--0,
.fzpill--mute {
  --c: var(--body);
  --tb: var(--ms-tile);
}

.fzs--1 {
  --c: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.fzs--2 {
  --c: var(--acc);
  --tb: var(--acc-a10);
}

.fzs--3,
.fzpill--amber {
  --c: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.fzs--4,
.fzpill--ok {
  --c: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.fzs--5,
.fzpill--purple {
  --c: var(--db-purple);
  --tb: rgba(122, 79, 209, .12);
}

.fzs--6 {
  --c: var(--ink);
  --tb: var(--ms-tile);
}

.fzs--7 {
  --c: var(--mute);
  --tb: var(--ms-tile);
}

.fzkpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) calc(var(--u) * 300);
  gap: calc(var(--u) * 16);
}

.fzk {
  min-width: 0;
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.fzk__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.fzk__r {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 calc(var(--u) * 8);
}

.fzk__v {
  font-size: max(12px, calc(var(--u) * 38));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.fzk__d {
  font-size: max(12px, calc(var(--u) * 14));
}

.fzkx {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.fzkx__add,
.fzkx__rate {
  flex: 1;
  border-radius: calc(var(--u) * 26);
}

.fzkx__add {
  background: var(--acc);
  box-shadow: 0 10px 24px var(--acc-a25);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
}

.fzkx__add:hover {
  filter: brightness(1.08);
}

.fzkx__rate {
  border: 1px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
}

.fzkx__rate:hover {
  border-color: var(--acc);
}

.fzkx__rate[aria-pressed="true"] {
  border-color: rgba(47, 163, 107, .4);
  color: var(--pd-ok);
}

.fzpick {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.fzchip {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.fzchip.is-sel {
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.fzchip__av {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  object-fit: cover;
}

.fzchip__b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 1);
}

.fzchip__n {
  font-size: max(12px, calc(var(--u) * 15));
}

.fzchip__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--c);
}

/* == 251. Dealer · Finance — the builder ================================ */
.fzgridm {
  display: grid;
  grid-template-columns: calc(var(--u) * 640) minmax(0, 1fr);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.fzl {
  min-width: 0;
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.fzl__hd {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.fzpill {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  background: var(--tb);
  color: var(--c);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.fzl__id {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
  white-space: nowrap;
}

.fzl__sla {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.fzcu {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.fzcu__av {
  flex-shrink: 0;
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border-radius: 50%;
  object-fit: cover;
}

.fzcu__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.fzcu__n {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: normal;
}

.fzcu__s {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--body);
}

.fzcls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.fzcl {
  --c: var(--ink);
  min-width: 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.fzcl--ok {
  --c: var(--pd-ok);
}

.fzcl--blue {
  --c: var(--ml-blue);
}

.fzcl--amber {
  --c: var(--gr-amber);
}

.fzcl--acc {
  --c: var(--acc);
}

.fzcl--mute {
  --c: var(--mute);
}

.fzcl__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.fzcl__r {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
  color: var(--c);
}

.fzcl__v {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.fzcl__t {
  font-size: max(12px, calc(var(--u) * 14));
}

.fzcl__s {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.fzcl__bar {
  height: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 3);
  background: var(--ms-tile);
  overflow: hidden;
  display: block;
}

.fzcl__f {
  display: block;
  width: 0;
  height: 100%;
  background: var(--c);
  transition: width .3s;
}

.fzbox {
  min-width: 0;
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.fzbox--big {
  padding: calc(var(--u) * 18) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  gap: calc(var(--u) * 12);
}

.fzbox--list {
  gap: calc(var(--u) * 8);
}

.fzbox__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.fzbox__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.fzlines {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.fzln {
  padding: calc(var(--u) * 5) 0;
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.fzln--mute {
  color: var(--body);
}

.fzln--ok {
  color: var(--pd-ok);
}

.fzln--tot {
  border-top: 1px solid var(--up-ln2);
}

.fzln--tot .fzln__v {
  font-size: max(12px, calc(var(--u) * 22));
}

.fzctl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 10);
}

.fzdown {
  padding: calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 8) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.fzdown__b,
.fztg__b,
.fzmo__b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}

.fzdown__v {
  font-size: max(12px, calc(var(--u) * 17));
}

.fzstep {
  flex-shrink: 0;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border: 1px solid var(--up-ln2);
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 18));
}

.fzstep:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.fzterms {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  display: flex;
  gap: calc(var(--u) * 3);
}

.fzterm {
  flex: 1;
  min-width: 0;
  padding: calc(var(--u) * 4) 0;
  border-radius: calc(var(--u) * 12);
  color: var(--body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}

.fzterm[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.fzterm__n {
  font-size: max(12px, calc(var(--u) * 16));
}

/* the «mo» unit under the term buttons is the handoff's one 12px exception */
.fzterm__u {
  font-size: 12px;
  opacity: .8;
}

.fzmo {
  padding-top: calc(var(--u) * 4);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
}

.fzmo__b {
  gap: calc(var(--u) * 2);
}

.fzmo__v {
  font-size: max(12px, calc(var(--u) * 56));
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1;
}

.fzmo__r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 2);
  text-align: right;
}

.fzmo__apr {
  font-size: max(12px, calc(var(--u) * 15));
}

.fztg {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.fztg__b {
  gap: calc(var(--u) * 2);
}

.fztg__v {
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  letter-spacing: -.02em;
}

.fztgbar {
  position: relative;
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--ms-tile);
  display: block;
}

.fztgbar__f {
  display: block;
  width: 0;
  max-width: 100%;
  height: 100%;
  border-radius: calc(var(--u) * 4);
  background: var(--pd-ok);
  transition: width .3s;
}

.fztgbar__f--acc {
  background: var(--acc);
}

.fztgbar__m {
  position: absolute;
  left: 80%;
  top: calc(var(--u) * -5);
  width: 2px;
  height: calc(var(--u) * 18);
  background: var(--ink);
}

.fzfixes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.fzfix {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 19);
  background: var(--surf);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

button.fzfix:hover {
  border-color: var(--acc);
}

.fzgrid__k {
  padding-top: calc(var(--u) * 4);
}

.fzgrid {
  display: grid;
  grid-template-columns: calc(var(--u) * 110) repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 6);
  align-items: center;
}

.fzgrid--h span {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
  text-align: center;
}

.fzgrid__l {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.fzcell {
  height: calc(var(--u) * 46);
  border: 1.5px solid var(--up-ln2);
  border-radius: calc(var(--u) * 14);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 16));
  transition: background .2s;
}

.fzcell.is-ok {
  border-color: rgba(47, 163, 107, .35);
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
}

.fzcell.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surf);
}

.fzpkgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.fzprods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.fzpkg,
.fzprod {
  width: 100%;
  min-width: 0;
  border: 1.5px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.fzpkg {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  gap: calc(var(--u) * 6);
}

.fzprod {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  gap: calc(var(--u) * 2);
}

.fzpkg:hover,
.fzprod:hover {
  border-color: var(--acc-a40);
}

.fzpkg[aria-pressed="true"],
.fzprod[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--acc-a06);
}

.fzpkg__h,
.fzprod__h {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 8);
}

.fzpkg__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.fzpkg__m,
.fzprod__m {
  flex-shrink: 0;
  color: var(--mute);
  white-space: nowrap;
}

.fzpkg__m {
  font-size: max(12px, calc(var(--u) * 14));
}

.fzpkg[aria-pressed="true"] .fzpkg__m,
.fzprod[aria-pressed="true"] .fzprod__m {
  color: var(--acc);
}

.fzpkg__i {
  font-size: max(12px, calc(var(--u) * 14));
  line-height: 1.35;
  color: var(--body);
}

.fzpkg__p {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.fzprod__h {
  font-size: max(12px, calc(var(--u) * 15));
}

.fzprod__t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fzprod__p {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 252. Dealer · Finance — lenders, documents, actions ================ */
.fzr {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.fzr__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
}

.fzr__t {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.fzr__s {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.fzlens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.fzlen {
  min-width: 0;
  padding: calc(var(--u) * 20);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.fzlen.is-sel {
  box-shadow: inset 0 0 0 2px var(--pd-ok);
}

.fzlen__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 8);
}

.fzlen__n {
  font-size: max(12px, calc(var(--u) * 18));
}

.fzbest {
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 13);
  background: var(--pd-ok);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.fzlen .fzpill {
  align-self: flex-start;
}

.fzodds {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.fzodds__h {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 14));
}

.fzodds__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.fzodds__bar {
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
  background: var(--ms-tile);
  overflow: hidden;
  display: block;
}

.fzodds__f {
  display: block;
  width: 0;
  height: 100%;
  background: var(--pd-ok);
  transition: width .3s;
}

.fzodds__f--amber {
  background: var(--gr-amber);
}

.fzodds__f--acc {
  background: var(--acc);
}

.fzapr {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.fzapr__v {
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.fzlen__t {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.fzlen__t li {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
}

.fzlen__t li > span:first-child {
  color: var(--mute);
}

.fzlen__c {
  min-height: calc(var(--u) * 40);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.fzlen__go {
  height: calc(var(--u) * 48);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
}

.fzlen__go:hover {
  border-color: var(--pd-ok);
}

.fzlen__go[aria-pressed="true"] {
  border-color: var(--pd-ok);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.fzbot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 16);
  align-items: start;
}

.fzcard {
  min-width: 0;
  padding: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.fzdocs,
.fztl {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.fzdoc {
  --c: var(--acc);
  padding: calc(var(--u) * 8) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.fzdoc--amber {
  --c: var(--gr-amber);
}

.fzdoc--ok {
  --c: var(--pd-ok);
}

.fzdoc__dot {
  flex-shrink: 0;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  border-radius: 50%;
  background: var(--up-ln2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.fzdoc--amber .fzdoc__dot,
.fzdoc--ok .fzdoc__dot {
  background: var(--c);
}

.fzdoc--amber .fzdoc__dot::before {
  content: "…";
}

.fzdoc--ok .fzdoc__dot::before {
  content: "✓";
}

.fzdoc__t {
  flex: 1;
  min-width: 0;
  font-size: max(12px, calc(var(--u) * 15));
}

.fzdoc__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--c);
}

.fzdoc__b {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 12);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 17);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.fzdoc__b:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.fztl__i {
  display: grid;
  grid-template-columns: calc(var(--u) * 64) calc(var(--u) * 10) minmax(0, 1fr);
  gap: calc(var(--u) * 12);
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.fztl__w {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.fztl__dot {
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: 50%;
  background: var(--mute);
}

.fztl__dot--blue {
  background: var(--ml-blue);
}

.fztl__dot--ok {
  background: var(--pd-ok);
}

.fztl__dot--acc {
  background: var(--acc);
}

.fztl__dot--ink {
  background: var(--ink);
}

.fzinc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.fzinc__c {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.fzinc__c--ok {
  background: rgba(47, 163, 107, .1);
}

.fzinc__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.fzinc__c--ok .fzinc__k {
  color: var(--sd-drop);
}

.fzinc__v {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

.fzinc__c--ok .fzinc__v {
  color: var(--pd-ok);
}

.fznote {
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
  font-size: max(12px, calc(var(--u) * 15));
}

.fzacts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.fzact {
  flex: 1;
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 20);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.fzact:hover {
  border-color: var(--acc);
}

.fzact--acc {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.fzact--ok {
  border-color: var(--pd-ok);
  background: var(--pd-ok);
  color: #fff;
}

.fzact--ink,
.fzact--ink:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surf);
}

.fzact--acc:hover,
.fzact--ok:hover {
  filter: brightness(1.1);
}

.fzact--mute {
  color: var(--mute);
}

/* == 253. Dealer · Finance — tablet and phone =========================== */
@media (max-width: 1999px) {
  .fzkpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fzkx {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .fzkx__add,
  .fzkx__rate {
    height: calc(var(--u) * 52);
  }

  .fzgridm {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1599px) {
  .fzlens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .fz {
    --u: .8px;
  }

  .fzkpis {
    gap: 12px;
  }

  .fzk {
    padding: 14px 16px;
  }

  .fzpick {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .fzchip {
    flex-shrink: 0;
  }

  .fzl,
  .fzcard {
    padding: 16px 14px;
  }

  .fzl__hd {
    flex-wrap: wrap;
  }

  .fzl__sla {
    flex-basis: 100%;
    margin-left: 0;
  }

  .fzbox--big {
    padding: 14px;
  }

  .fzctl,
  .fzcls,
  .fzprods,
  .fzpkgs,
  .fzlens,
  .fzbot {
    grid-template-columns: minmax(0, 1fr);
  }

  .fzmo {
    flex-direction: column;
    align-items: flex-start;
  }

  .fzmo__r {
    align-items: flex-start;
    text-align: left;
  }

  .fzmo__v {
    font-size: 40px;
  }

  .fzgrid {
    grid-template-columns: 80px repeat(3, minmax(0, 1fr));
  }

  .fzcell {
    font-size: 13px;
  }

  .fzr__h {
    flex-direction: column;
  }

  .fzact {
    flex-basis: 100%;
  }
}

/* == 254. Dealer · Messages — KPIs and the conversation list ============ */
.mq {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.mq p {
  margin: 0;
}

.mqrows,
.mqmsgs,
.mqinfo,
.mqact,
.mqlinks__l {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* tones: ok green · amber · acc accent · blue · purple · mute; stages: new accent · engaged blue · negotiating amber · won green */
.mq .mqv--ok {
  color: var(--pd-ok);
}

.mq .mqv--amber {
  color: var(--gr-amber);
}

.mq .mqv--acc {
  color: var(--acc);
}

.mq .mqv--blue {
  color: var(--ml-blue);
}

.mqint,
.mqpill,
.mqst--0,
.mqdot--acc,
.mqheat--acc {
  --c: var(--acc);
  --tb: var(--acc-a10);
}

.mqint--ok,
.mqst--3,
.mqdot--ok {
  --c: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.mqint--amber,
.mqpill--amber,
.mqst--2,
.mqdot--amber,
.mqheat--amber {
  --c: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.mqint--blue,
.mqst--1,
.mqdot--blue,
.mqheat--blue {
  --c: var(--ml-blue);
  --tb: rgba(29, 95, 209, .1);
}

.mqint--purple,
.mqdot--purple {
  --c: var(--db-purple);
  --tb: rgba(122, 79, 209, .12);
}

.mqint--mute,
.mqdot--mute {
  --c: var(--body);
  --tb: var(--ms-tile);
}

.mqpill--acc {
  --c: var(--acc);
  --tb: var(--acc-a10);
}

.mqkpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) calc(var(--u) * 300);
  gap: calc(var(--u) * 16);
}

.mqk {
  min-width: 0;
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.mqk__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.mqk__r {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 calc(var(--u) * 8);
}

.mqk__v {
  font-size: max(12px, calc(var(--u) * 38));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.mqk__d {
  font-size: max(12px, calc(var(--u) * 14));
}

.mqkx {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.mqkx__bc,
.mqkx__tp {
  flex: 1;
  border-radius: calc(var(--u) * 26);
}

.mqkx__bc {
  background: var(--acc);
  box-shadow: 0 10px 24px var(--acc-a25);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
}

.mqkx__bc:hover {
  filter: brightness(1.08);
}

.mqkx__tp {
  border: 1px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
}

.mqkx__tp:hover {
  border-color: var(--acc);
}

.mqkx__tp[aria-pressed="true"] {
  border-color: rgba(47, 163, 107, .4);
  color: var(--pd-ok);
}

.mqgrid {
  display: grid;
  grid-template-columns: calc(var(--u) * 440) minmax(0, 1fr) calc(var(--u) * 420);
  gap: calc(var(--u) * 16);
  align-items: start;
}

.mqlist,
.mqthread,
.mqctx {
  min-width: 0;
  padding: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.mqlist {
  gap: calc(var(--u) * 10);
}

.mqlist__f {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.mqtabs {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: flex;
  gap: calc(var(--u) * 4);
}

.mqtab {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 20);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.mqtab[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.mqchs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.mqchip {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 12);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 17);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
}

.mqchip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surf);
}

.mqsearch {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 23);
  background: var(--bg);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.mqsearch__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 15));
}

.mqrows {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.mqrow {
  width: 100%;
  min-width: 0;
  padding: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 20);
  color: var(--ink);
  display: flex;
  gap: calc(var(--u) * 12);
  text-align: left;
  transition: background .2s;
}

.mqrow:hover {
  background: var(--bg);
}

.mqrow.is-sel {
  background: var(--acc-a06);
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.mqrow__av {
  flex-shrink: 0;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border-radius: 50%;
  object-fit: cover;
}

.mqrow__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.mqrow__h,
.mqrow__c,
.mqrow__l {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.mqrow__n,
.mqrow__car,
.mqrow__last {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mqrow__n {
  font-size: max(12px, calc(var(--u) * 16));
}

.mqrow.is-un .mqrow__n {
  font-weight: 500;
}

/* channel badge, unread count, timestamps, uppercase labels and the stage rail are the handoff's 12px exceptions */
.mqch,
.mqint {
  flex-shrink: 0;
  height: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 11);
  display: flex;
  align-items: center;
  font-size: 12px;
  white-space: nowrap;
}

.mqch {
  background: var(--ms-tile);
  color: var(--body);
}

.mqint {
  background: var(--tb);
  color: var(--c);
}

.mqrow__t {
  flex-shrink: 0;
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mqrow__car {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.mqrow__last {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mqrow.is-un .mqrow__last {
  color: var(--ink);
}

.mqun {
  min-width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 6);
  border-radius: calc(var(--u) * 11);
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.mqrow__sla {
  font-size: max(12px, calc(var(--u) * 14));
}

.mqempty {
  padding: calc(var(--u) * 30);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 15));
  text-align: center;
}

/* == 255. Dealer · Messages — the thread ================================ */
.mqth {
  padding-bottom: calc(var(--u) * 14);
  border-bottom: .5px solid var(--up-ln2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.mqth__avw {
  flex-shrink: 0;
  display: flex;
}

.mqth__av {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  object-fit: cover;
}

.mqth__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.mqth__h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.mqth__n {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 400;
  line-height: normal;
}

.mqpill {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--tb);
  color: var(--c);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.mqth__s {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mqth__a {
  flex-shrink: 0;
  display: flex;
  gap: calc(var(--u) * 6);
}

.mqhb {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.mqhb:hover {
  border-color: var(--acc);
}

.mqhb.is-done {
  border-color: rgba(47, 163, 107, .4);
  background: rgba(47, 163, 107, .08);
  color: var(--pd-ok);
}

.mqai {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: linear-gradient(135deg, var(--acc-a08), rgba(29, 95, 209, .06));
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 14);
}

.mqai__i {
  flex-shrink: 0;
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: calc(var(--u) * 11);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 16));
}

.mqai__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.mqcap {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--mute);
}

.mqai__t {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.45;
}

.mqai__n {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.mqai__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.mqai__v {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.mqai__go {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
}

.mqmsgs {
  height: calc(var(--u) * 500);
  padding: calc(var(--u) * 6) calc(var(--u) * 4);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.mqsys {
  align-self: center;
  height: calc(var(--u) * 28);
  margin: calc(var(--u) * 4) 0;
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--ms-tile);
  color: var(--body);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.mqmsg {
  display: flex;
  justify-content: flex-end;
}

.mqmsg--c {
  justify-content: flex-start;
}

.mqb {
  max-width: 72%;
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22) calc(var(--u) * 6) calc(var(--u) * 22) calc(var(--u) * 22);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.mqmsg--c .mqb {
  border-radius: calc(var(--u) * 6) calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 22);
  background: var(--ms-tile);
  color: var(--ink);
}

.mqmsg--note .mqb {
  background: rgba(201, 138, 18, .14);
  color: var(--ink);
}

.mqb__lab {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gr-amber);
}

.mqb__t {
  font-size: max(12px, calc(var(--u) * 16));
  line-height: 1.45;
  white-space: pre-wrap;
}

.mqb__time {
  align-self: flex-end;
  font-size: 12px;
  opacity: .65;
}

.mqcard {
  min-width: calc(var(--u) * 300);
  padding: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.mqcard__img {
  flex-shrink: 0;
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 64);
  border-radius: calc(var(--u) * 12);
  object-fit: cover;
}

.mqcard__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.mqcard__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.mqcard__p {
  font-size: max(12px, calc(var(--u) * 17));
  font-weight: 300;
}

.mqcard__a {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--acc);
}

.mqseen {
  align-self: flex-end;
  padding-right: calc(var(--u) * 6);
  font-size: 12px;
  color: var(--mute);
}

.mqtyping {
  align-self: flex-start;
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 6) calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 18);
  background: var(--ms-tile);
  color: var(--body);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
}

.mqtyping__d {
  display: flex;
  gap: calc(var(--u) * 3);
}

.mqtyping__d span {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: var(--mute);
}

.mqtyping__d span:nth-child(2) {
  opacity: .6;
}

.mqtyping__d span:nth-child(3) {
  opacity: .3;
}

.mqsug {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.mqsug__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mqsg {
  max-width: calc(var(--u) * 420);
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--acc-a30);
  border-radius: calc(var(--u) * 19);
  background: var(--acc-a06);
  color: var(--acc);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.mqsg:hover {
  background: var(--acc);
  color: #fff;
}

.mqcomp {
  padding: calc(var(--u) * 14);
  border: 1px solid transparent;
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.mqcomp.is-note {
  border-color: rgba(201, 138, 18, .35);
  background: rgba(201, 138, 18, .08);
}

.mqcomp__h,
.mqcomp__f {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.mqcomp__h {
  flex-wrap: wrap;
}

.mqmode {
  padding: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  display: flex;
  gap: calc(var(--u) * 2);
}

.mqmode__b {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

.mqmode__b--reply[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.mqmode__b--note[aria-pressed="true"] {
  background: var(--gr-amber);
  color: #fff;
}

.mqtpl {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.mqtpl:hover,
.mqtool:hover {
  border-color: var(--acc);
}

.mqcomp__ta {
  width: 100%;
  min-height: calc(var(--u) * 84);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  line-height: 1.45;
  resize: none;
  display: block;
}

.mqtool {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.mqcomp__sp {
  flex: 1;
}

.mqcomp__via {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mqsend {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 23);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.mqcomp.is-note .mqsend {
  background: var(--gr-amber);
}

.mqsend:hover {
  filter: brightness(1.08);
}

/* == 256. Dealer · Messages — customer context ========================== */
.mqcx {
  padding: calc(var(--u) * 8) 0 calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 8);
  text-align: center;
}

.mqcx__av {
  width: calc(var(--u) * 72);
  height: calc(var(--u) * 72);
  border-radius: 50%;
  object-fit: cover;
}

.mqcx__n {
  font-size: max(12px, calc(var(--u) * 22));
}

.mqcx__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mqinfo,
.mqbox {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.mqinfo li {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.mqinfo__k {
  color: var(--mute);
}

.mqinfo__v {
  text-align: right;
}

.mqint2 {
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.mqint2__img {
  flex-shrink: 0;
  width: calc(var(--u) * 90);
  height: calc(var(--u) * 62);
  border-radius: calc(var(--u) * 14);
  object-fit: cover;
}

.mqint2__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.mqint2__k,
.mqbox__k,
.mqlinks__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mqint2__c {
  font-size: max(12px, calc(var(--u) * 15));
}

.mqint2__p {
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
}

.mqbox__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.mqheat__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.mqheat {
  display: flex;
  gap: calc(var(--u) * 3);
}

.mqheat span {
  flex: 1;
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 3);
  background: var(--ms-tile);
}

.mqheat span.is-on {
  background: var(--c);
}

.mqrail {
  padding-top: calc(var(--u) * 4);
  display: flex;
  gap: calc(var(--u) * 4);
}

.mqrail__s {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.mqrail__bar {
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: var(--ms-tile);
}

.mqrail__s.is-on .mqrail__bar {
  background: var(--c);
}

.mqrail__t {
  font-size: 12px;
  color: var(--mute);
}

.mqrail__s.is-cur .mqrail__t {
  color: var(--c);
}

.mqact {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.mqact li {
  display: grid;
  grid-template-columns: calc(var(--u) * 10) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 10);
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.mqact__dot,
.mqlink__dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--c);
}

.mqact__w {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mqlinks {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.mqlinks__k {
  padding: 0 calc(var(--u) * 4);
}

.mqlinks__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.mqlink {
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.mqlink:hover {
  color: var(--acc);
}

.mqlink__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 15));
}

.mqlink__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.mqlink__ar {
  color: var(--mute);
}

.mqqa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 8);
}

.mqqa__b {
  height: calc(var(--u) * 48);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.mqqa__b:hover {
  border-color: var(--acc);
}

.mqqa__b--acc,
.mqqa__b--acc:hover {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.mqteam {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.mqteam__avs {
  display: flex;
}

.mqteam__av {
  width: calc(var(--u) * 37);
  height: calc(var(--u) * 37);
  margin-right: calc(var(--u) * -8);
  border: 2px solid var(--bg);
  border-radius: 50%;
  object-fit: cover;
}

.mqteam__t {
  flex: 1;
  padding-left: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

/* == 257. Dealer · Messages — tablet and phone ========================== */
@media (max-width: 1999px) {
  .mqkpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mqkx {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .mqkx__bc,
  .mqkx__tp {
    height: calc(var(--u) * 52);
  }

  .mqgrid {
    grid-template-columns: calc(var(--u) * 440) minmax(0, 1fr);
  }

  .mqctx {
    grid-column: 1 / -1;
  }

  .mqth {
    flex-wrap: wrap;
  }

  .mqth__a {
    flex-basis: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 1199px) {
  .mqgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .mq {
    --u: .8px;
  }

  .mqkpis {
    gap: 12px;
  }

  .mqk {
    padding: 14px 16px;
  }

  .mqlist,
  .mqthread,
  .mqctx {
    padding: 14px 12px;
  }

  .mqtab {
    flex: 1 1 auto;
    padding: 0 8px;
  }

  .mqrows {
    max-height: 420px;
    overflow: auto;
  }

  .mqb {
    max-width: 88%;
  }

  .mqcard {
    min-width: 0;
  }

  .mqcomp__f {
    flex-wrap: wrap;
  }

  .mqcomp__sp {
    display: none;
  }

  .mqsend {
    margin-left: auto;
  }

  .mqqa {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* == 258. Dealer · Reviews — rating strip and filters =================== */
.rz {
  --gold: #e0a10f;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.rz p {
  margin: 0;
}

.rzrows,
.rzai,
.rzval,
.rzkv,
.rzhi {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rz .rzv--ok {
  color: var(--pd-ok);
}

.rz .rzv--amber {
  color: var(--gr-amber);
}

.rz .rzv--acc {
  color: var(--acc);
}

.rz .rzv--mute {
  color: var(--mute);
}

.rzstars {
  display: flex;
  gap: calc(var(--u) * 2);
  line-height: 1;
}

.rzstars span {
  color: var(--up-ln2);
}

.rzstars .is-on {
  color: var(--gold);
}

.rzstars--sm {
  font-size: max(12px, calc(var(--u) * 14));
}

.rzstars--md {
  font-size: max(12px, calc(var(--u) * 18));
}

.rzstars--lg {
  font-size: max(12px, calc(var(--u) * 20));
}

.rzstrip {
  padding: calc(var(--u) * 20) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) repeat(3, auto);
  gap: calc(var(--u) * 28);
  align-items: center;
}

.rzavg {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.rzavg__v {
  font-size: max(12px, calc(var(--u) * 56));
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
}

.rzavg__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.rzavg__t {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.rzhist {
  height: calc(var(--u) * 56);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 6);
}

.rzhist__b {
  flex: 1;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 4);
}

.rzhist__bar {
  width: 100%;
  min-height: 4px;
  border-radius: calc(var(--u) * 6);
  background: var(--gold);
  transition: opacity .2s;
}

.rzhist__bar--amber {
  background: var(--gr-amber);
}

.rzhist__bar--acc {
  background: var(--acc);
}

.rzhist__b:hover .rzhist__bar {
  opacity: .8;
}

.rzhist__b[aria-pressed="true"] .rzhist__k {
  color: var(--ink);
}

/* the star labels under the histogram are the handoff's one 12px exception */
.rzhist__k {
  font-size: 12px;
  color: var(--mute);
}

.rzstat {
  padding-left: calc(var(--u) * 24);
  border-left: .5px solid var(--up-ln2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.rzstat__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.rzstat__v {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
}

.rzbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.rztabs {
  padding: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  display: flex;
  gap: calc(var(--u) * 4);
}

.rztab {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 21);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.rztab__n {
  min-width: calc(var(--u) * 24);
  height: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 6);
  border-radius: calc(var(--u) * 11);
  background: var(--ms-tile);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.rztab[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.rztab[aria-pressed="true"] .rztab__n {
  background: var(--acc);
  color: #fff;
}

.rzsrcs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.rzsrc {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 19);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
}

.rzsrc[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surf);
}

.rzclear {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 19);
  background: var(--ink);
  color: var(--surf);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: pre;
}

.rzbar__n {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

/* == 259. Dealer · Reviews — queue and review card ====================== */
.rzdesk {
  display: grid;
  grid-template-columns: calc(var(--u) * 560) minmax(0, 1fr) calc(var(--u) * 420);
  gap: calc(var(--u) * 20);
  align-items: start;
}

.rzq {
  min-width: 0;
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
}

.rzrows {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.rzrow {
  width: 100%;
  min-width: 0;
  padding: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 20);
  color: var(--ink);
  display: flex;
  gap: calc(var(--u) * 12);
  text-align: left;
  transition: background .2s;
}

.rzrow:hover {
  background: var(--bg);
}

.rzrow.is-sel {
  background: var(--acc-a06);
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.rzrow__av {
  flex-shrink: 0;
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  border-radius: 50%;
  object-fit: cover;
}

.rzrow__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.rzrow__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.rzrow__f {
  display: flex;
  gap: calc(var(--u) * 6);
}

.rzrow__n {
  font-size: max(12px, calc(var(--u) * 16));
}

.rzrow__d,
.rzrow__sla {
  flex-shrink: 0;
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.rzrow__d {
  color: var(--mute);
}

.rzrow__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.rzpill {
  --c: var(--body);
  --tb: var(--ms-tile);
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 9);
  border-radius: calc(var(--u) * 12);
  background: var(--tb);
  color: var(--c);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.rzpill--lg {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
}

.rzpill--ok {
  --c: var(--pd-ok);
  --tb: rgba(47, 163, 107, .12);
}

.rzpill--amber {
  --c: var(--gr-amber);
  --tb: rgba(201, 138, 18, .14);
}

.rzpill--acc {
  --c: var(--acc);
  --tb: var(--acc-a10);
}

.rzpill--ink {
  --c: var(--surf);
  --tb: var(--ink);
}

.rzempty {
  padding: calc(var(--u) * 30);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 15));
  text-align: center;
}

.rzc,
.rzr {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.rzr {
  gap: calc(var(--u) * 16);
}

.rzrev {
  min-width: 0;
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.rzrev.is-open {
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.rzrev__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.rzrev__av {
  flex-shrink: 0;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  object-fit: cover;
}

.rzrev__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.rzrev__n {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 20));
}

.rzrev__s {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
}

.rzrev__src {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 4);
}

.rzrev__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.rzrev__t {
  font-size: max(12px, calc(var(--u) * 18));
  line-height: 1.55;
}

.rzrev__ph {
  display: flex;
  gap: calc(var(--u) * 8);
}

.rzrev__img {
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 80);
  border-radius: calc(var(--u) * 14);
  object-fit: cover;
}

.rzrev__m {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.rzrev__car {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.rztheme {
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.rztheme--iss {
  background: var(--acc-a08);
  color: var(--acc);
}

.rzreply {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.rzreply__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.rzreply__t {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.5;
  color: var(--body);
}

.rznote {
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
  font-size: max(12px, calc(var(--u) * 15));
}

.rzed {
  padding: calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.rzed__r,
.rzed__f {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.rzed__r {
  flex-wrap: wrap;
}

.rzed__k,
.rzed__to,
.rzed__tip {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.rzed__to {
  margin-left: auto;
}

.rzed__tip {
  flex: 1;
}

.rzseg {
  padding: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  display: flex;
  gap: calc(var(--u) * 2);
}

.rzseg__b {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

.rzseg__b[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.rzpers {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border: 1px dashed var(--acc-a45);
  border-radius: calc(var(--u) * 16);
  background: var(--acc-a03);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.rzpers:hover {
  border-style: solid;
}

.rzed__ta {
  width: 100%;
  min-height: calc(var(--u) * 120);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 16));
  line-height: 1.5;
  resize: vertical;
  display: block;
}

.rzbtn {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.rzbtn:hover {
  border-color: var(--acc);
}

.rzbtn--acc {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.rzbtn--acc:hover {
  filter: brightness(1.08);
}

.rzbtn.is-done {
  border-color: rgba(47, 163, 107, .4);
  background: rgba(47, 163, 107, .1);
  color: var(--pd-ok);
}

.rzpub {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 21);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.rzpub:hover {
  filter: brightness(1.08);
}

.rzacts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

/* == 260. Dealer · Reviews — AI analysis, preview, customer ============= */
.rzcard {
  min-width: 0;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.rzcard__t {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.rzcard__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.rzcard__hr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.rzai__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.rzai__ic {
  flex-shrink: 0;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 13);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 18));
}

.rzai__hb {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.rzsent {
  min-width: calc(var(--u) * 180);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 14));
}

.rzsent__bar {
  width: calc(var(--u) * 180);
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
  background: var(--ms-tile);
  overflow: hidden;
  display: block;
}

.rzsent__f {
  display: block;
  width: 0;
  height: 100%;
  background: var(--pd-ok);
}

.rzsent__f--amber {
  background: var(--gr-amber);
}

.rzsent__f--acc {
  background: var(--acc);
}

.rzai {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.rzai__i {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: rgba(47, 163, 107, .08);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 14);
  align-items: center;
}

.rzai__i--iss {
  background: var(--acc-a06);
}

.rzai__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.rzai__t {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--sd-drop);
}

.rzai__i--iss .rzai__t {
  color: var(--acc);
}

.rzai__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.rzai__go {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--acc-a35);
  border-radius: calc(var(--u) * 19);
  background: var(--surf);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.rzai__go--ok {
  border-color: var(--up-ln2);
  color: var(--ink);
}

.rzai__go.is-done {
  border-color: rgba(47, 163, 107, .4);
  background: rgba(47, 163, 107, .08);
  color: var(--pd-ok);
}

.rzai__imp {
  color: var(--body);
}

.rzpv {
  padding: calc(var(--u) * 18) calc(var(--u) * 20);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.rzpv__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.rzpv__av {
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  object-fit: cover;
}

.rzpv__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.rzpv__b .rzstars {
  gap: calc(var(--u) * 1);
  line-height: normal;
}

.rzpv__n {
  font-size: max(12px, calc(var(--u) * 15));
}

.rzpv__d {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.rzpv__t {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.5;
}

.rzpv__r {
  margin-left: calc(var(--u) * 24);
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 14);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.rzpv__k {
  font-size: max(12px, calc(var(--u) * 14));
}

.rzpv__rt {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.5;
  color: var(--body);
  white-space: pre-wrap;
}

.rzval {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.rzval li {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.rzval__k {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.rzval__v {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.rzoff {
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: rgba(47, 163, 107, .08);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.rzoff--neg {
  background: var(--acc-a06);
}

.rzoff__t {
  font-size: max(12px, calc(var(--u) * 16));
  color: var(--sd-drop);
}

.rzoff--neg .rzoff__t {
  color: var(--acc);
}

.rzoff__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.rzoff__go {
  align-self: flex-start;
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 21);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.rzoff__go.is-done {
  background: var(--pd-ok);
}

.rzpu {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.rzpu__img {
  flex-shrink: 0;
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 64);
  border-radius: calc(var(--u) * 14);
  object-fit: cover;
}

.rzpu__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.rzpu__c {
  font-size: max(12px, calc(var(--u) * 16));
}

.rzpu__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.rzkv,
.rzhi {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.rzkv li {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(var(--u) * 15));
}

.rzkv__k {
  color: var(--mute);
}

.rzhi li {
  line-height: calc(var(--u) * 20);
  display: grid;
  grid-template-columns: calc(var(--u) * 10) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 10);
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.rzhi__dot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--ml-blue);
}

.rzdot--ok {
  background: var(--pd-ok);
}

.rzdot--acc {
  background: var(--acc);
}

.rzdot--gold {
  background: var(--gold);
}

.rzhi__w {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.rzlink {
  height: calc(var(--u) * 44);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 22);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.rzlink:hover {
  border-color: var(--acc);
  color: var(--acc);
}

/* == 261. Dealer · Reviews — tablet and phone =========================== */
@media (max-width: 1999px) {
  .rzdesk {
    grid-template-columns: calc(var(--u) * 560) minmax(0, 1fr);
  }

  .rzr {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 1599px) {
  .rzstrip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rzdesk,
  .rzr {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .rz {
    --u: .8px;
  }

  .rzstrip {
    padding: 16px 14px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }

  .rzavg,
  .rzhist {
    grid-column: 1 / -1;
  }

  .rzstat {
    padding-left: 10px;
  }

  .rztabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rzbar__n {
    flex-basis: 100%;
    margin-left: 0;
  }

  .rzrows {
    max-height: 420px;
    overflow: auto;
  }

  .rzrev,
  .rzcard {
    padding: 16px 14px;
  }

  .rzrev__h {
    flex-wrap: wrap;
  }

  .rzrev__src {
    flex-direction: row;
    align-items: center;
    flex-basis: 100%;
  }

  .rzrev__t {
    font-size: 16px;
  }

  .rzed__f {
    flex-wrap: wrap;
  }

  .rzed__tip {
    flex-basis: 100%;
  }

  .rzai__h {
    flex-wrap: wrap;
  }

  .rzsent {
    min-width: 0;
    flex-basis: 100%;
    align-items: flex-start;
  }

  .rzsent__bar {
    width: 100%;
  }

  .rzai__i {
    grid-template-columns: minmax(0, 1fr);
  }

  .rzai__go {
    justify-self: start;
  }
}

/* == 262. Dealer · Analytics — controls, summary, goals, KPIs =========== */
.ay {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.ay p {
  margin: 0;
}

.aygoals,
.aykpis,
.ayins,
.ayfns,
.aydrill__l,
.aysrs,
.aymix,
.ayage,
.ayspeed,
.aytms,
.ayals {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* series and tones */
.aysw--ink {
  background: var(--ink);
}

.aysw--acc {
  background: var(--acc);
}

.aysw--purple {
  background: var(--db-purple);
}

.aysw--blue {
  background: var(--ml-blue);
}

.aysw--ok {
  background: var(--pd-ok);
}

.aysw--amber {
  background: var(--gr-amber);
}

.ay .ayv--ok {
  color: var(--pd-ok);
}

.ay .ayv--amber {
  color: var(--gr-amber);
}

.ay .ayv--acc {
  color: var(--acc);
}

.ay .ayv--ink {
  color: var(--ink);
}

.ay .ayv--mute {
  color: var(--mute);
}

.ay .ayv--mute2 {
  color: var(--body);
}

.aybar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.aybar__sp {
  flex: 1;
}

.ayper {
  padding: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  display: flex;
  gap: calc(var(--u) * 4);
}

.ayper__b {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 21);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.ayper__b[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.aycmp {
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.aycmp__sw {
  position: relative;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 12);
  background: var(--up-ln2);
  transition: background .2s;
}

.aycmp__sw::after {
  content: "";
  position: absolute;
  top: calc(var(--u) * 3);
  left: calc(var(--u) * 3);
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  border-radius: 50%;
  background: var(--surf);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: left .2s;
}

.aycmp[aria-pressed="true"] .aycmp__sw {
  background: var(--acc);
}

.aycmp[aria-pressed="true"] .aycmp__sw::after {
  left: calc(var(--u) * 19);
}

.ayfilt {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.aysel {
  position: relative;
  display: flex;
}

.aysel::after {
  content: "▾";
  position: absolute;
  right: calc(var(--u) * 16);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  pointer-events: none;
}

.aysel__s {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 36) 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 22);
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  font-size: max(12px, calc(var(--u) * 14));
  appearance: none;
  cursor: pointer;
}

.aysel__s:focus {
  border-color: var(--acc);
  outline: 0;
}

.aybtn {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 22);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.aybtn:hover {
  border-color: var(--acc);
}

.aybtn--acc,
.aybtn--acc:hover {
  padding: 0 calc(var(--u) * 20);
  border: 0;
  background: var(--acc);
  color: #fff;
}

.aybtn--sm {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 15);
  font-size: max(12px, calc(var(--u) * 14));
}

.aytop {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(var(--u) * 16);
  align-items: stretch;
}

.ayexec {
  min-width: 0;
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 32);
  background: var(--up-plus);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.ayexec__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.ayexec__i {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: calc(var(--u) * 11);
  background: rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 16));
}

.ayexec__k {
  font-size: max(12px, calc(var(--u) * 14));
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.24);
  color: rgba(255, 255, 255, .6);
}

.ayexec__t {
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -.01em;
}

.ay .ayexec__f {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.ayexec__c {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.ayexec__c--ok {
  color: #6fd3a0;
}

.ayexec__c--acc {
  color: #ff9b6b;
}

.ayexec__go {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 20);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.aycard {
  min-width: 0;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.aytop .aycard {
  gap: calc(var(--u) * 14);
}

.aycard__h {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
}

.aycard__t {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.aycard__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.aygoals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.aygoal {
  min-width: 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 8);
  text-align: center;
}

.ayring {
  --c: var(--acc);
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 96);
  border-radius: 50%;
  background: conic-gradient(var(--c) 0 var(--a, 0%), rgba(128, 128, 128, .25) var(--a, 0%) var(--f, 0%), var(--ms-tile) var(--f, 0%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ayring--ok {
  --c: var(--pd-ok);
}

.ayring--amber {
  --c: var(--gr-amber);
}

.ayring__in {
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 76);
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ayring__v {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

/* axis labels, heatmap hours, the target label and ring captions are the handoff's 12px exceptions */
.ayring__k {
  font-size: 12px;
  color: var(--mute);
}

.aygoal__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.aygoal__v {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.aypill {
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.aypill--ok {
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.aypill--amber {
  background: rgba(201, 138, 18, .14);
  color: var(--gr-amber);
}

.aypill--acc {
  background: var(--acc-a10);
  color: var(--acc);
}

.aykpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 14);
}

.ayk {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  text-align: left;
  transition: box-shadow .2s;
}

.ayk.is-on {
  box-shadow: inset 0 0 0 2px var(--acc);
}

.ayk__k {
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--mute);
}

.ayk__v {
  font-size: max(12px, calc(var(--u) * 36));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.ayk__f {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
}

.ayk__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--pd-ok);
}

.ayspark {
  height: calc(var(--u) * 28);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 3);
}

.ayspark span {
  width: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 2);
  background: var(--up-ln2);
}

.ayspark .is-last {
  background: var(--acc);
}

/* == 263. Dealer · Analytics — chart, insights, funnel, sources ========= */
.aymid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 460);
  gap: calc(var(--u) * 16);
  align-items: stretch;
}

.aych__r {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.ayseg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  gap: calc(var(--u) * 4);
}

.ayseg__b {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 19);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.ayseg__b[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surf);
}

.aych__tot {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.aych__v {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
  letter-spacing: -.02em;
}

.aych__d {
  font-size: max(12px, calc(var(--u) * 14));
}

.ay .aylg {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.aylg__i {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
}

.aylg__i::before {
  content: "";
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 3);
  background: var(--acc);
}

.aylg__i--prev::before {
  background: var(--up-ln2);
}

.aych {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.aych__tip {
  position: absolute;
  top: calc(var(--u) * -6);
  z-index: 2;
  padding: calc(var(--u) * 8) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 12);
  background: var(--ink);
  color: var(--surf);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  transition: left .2s;
}

/* near the edges the tooltip hangs inwards so it never leaves the card */
.aych__tip--r {
  transform: translateX(calc(-100% + calc(var(--u) * 24)));
}

.aych__tip--l {
  transform: translateX(calc(var(--u) * -24));
}

.aych__plot {
  --gap: calc(var(--u) * 10);
  position: relative;
  height: calc(var(--u) * 300);
  padding-top: calc(var(--u) * 44);
  border-bottom: 1px solid var(--up-ln2);
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
}

.aych__plot.is-dense,
.aych__x.is-dense {
  --gap: calc(var(--u) * 4);
}

.aych__tgt {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1.5px dashed var(--ink);
  opacity: .5;
  pointer-events: none;
}

.aych__tgtl {
  position: absolute;
  right: 0;
  padding: calc(var(--u) * 2) calc(var(--u) * 8);
  border-radius: calc(var(--u) * 8);
  background: var(--surf);
  color: var(--body);
  font-size: 12px;
  transform: translateY(-100%);
  pointer-events: none;
}

.aybarc {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border-radius: calc(var(--u) * 8) calc(var(--u) * 8) 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--u) * 2);
}

.aybarc.is-sel {
  background: var(--acc-a06);
}

.aybarc__p,
.aybarc__v {
  flex: 1;
  max-width: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 6) calc(var(--u) * 6) 0 0;
}

.aybarc__p {
  background: var(--up-ln2);
}

.aybarc__v {
  background: var(--acc-a45);
  transition: height .3s;
}

.aybarc.is-sel .aybarc__v {
  background: var(--acc);
}

.aych__x {
  --gap: calc(var(--u) * 10);
  display: flex;
  gap: var(--gap);
}

.aych__x span {
  flex: 1;
  min-width: 0;
  overflow: visible;
  color: var(--mute);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.ayins {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.ayin {
  --c: var(--acc);
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--acc-a06);
  display: flex;
  gap: calc(var(--u) * 12);
}

.ayin--ok {
  --c: var(--pd-ok);
  background: rgba(47, 163, 107, .08);
}

.ayin--blue {
  --c: var(--ml-blue);
  background: rgba(29, 95, 209, .07);
}

.ayin__m {
  flex-shrink: 0;
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 10);
  background: var(--c);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.ayin__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.ayin__t {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.45;
}

.ayin__go,
.ayal__go {
  align-self: flex-start;
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 17);
  background: var(--surf);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.ayin__go:hover,
.ayal__go:hover {
  border-color: var(--acc);
  color: var(--ink);
}

.ayrow2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: calc(var(--u) * 16);
  align-items: stretch;
}

.ayfns {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.ayfn {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.ayfn__r {
  width: calc(100% + calc(var(--u) * 12));
  margin: calc(var(--u) * -4) calc(var(--u) * -6);
  padding: calc(var(--u) * 4) calc(var(--u) * 6);
  border-radius: calc(var(--u) * 12);
  color: var(--ink);
  display: grid;
  grid-template-columns: calc(var(--u) * 120) minmax(0, 1fr) calc(var(--u) * 90) calc(var(--u) * 80);
  gap: calc(var(--u) * 12);
  align-items: center;
  text-align: left;
}

.ayfn__r.is-on {
  background: var(--acc-a06);
}

.ayfn__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.ayfn__bar {
  position: relative;
  height: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 10);
  background: var(--bg);
  overflow: hidden;
  display: block;
}

.ayfn__p {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-right: 2px dashed var(--mute);
}

.ayfn__f {
  display: block;
  height: 100%;
  border-radius: calc(var(--u) * 10);
  background: var(--acc);
  transition: width .3s;
}

.ayfn__f--ink {
  background: var(--ink);
}

.ayfn__f--ok {
  background: var(--pd-ok);
}

.ayfn__v {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
  text-align: right;
}

.ayfn__d {
  font-size: max(12px, calc(var(--u) * 14));
  text-align: right;
}

.ayfn__c {
  padding-left: calc(var(--u) * 132);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.aydrill {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.aydrill__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: max(12px, calc(var(--u) * 15));
}

.aydrill__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.aydrill__l li {
  display: grid;
  grid-template-columns: calc(var(--u) * 150) minmax(0, 1fr) calc(var(--u) * 70);
  gap: calc(var(--u) * 10);
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.aydrill__v {
  text-align: right;
  color: var(--body);
}

.aymini {
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--ms-tile);
  overflow: hidden;
  display: block;
}

.aymini__f {
  display: block;
  height: 100%;
}

.aysr {
  padding: calc(var(--u) * 10) calc(var(--u) * 4);
  border-top: .5px solid var(--up-ln2);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) calc(var(--u) * 70) calc(var(--u) * 60) calc(var(--u) * 70) calc(var(--u) * 70) calc(var(--u) * 70);
  gap: calc(var(--u) * 12);
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.aysr--h {
  padding: 0 calc(var(--u) * 4);
  border-top: 0;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.aysrs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.aysr__n {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.aysw {
  flex-shrink: 0;
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 3);
}

.aysr__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aysr__c {
  text-align: right;
}

/* == 264. Dealer · Analytics — profit, inventory, team, heatmap ========= */
.ayrow3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
  gap: calc(var(--u) * 16);
  align-items: stretch;
}

.aypm__v {
  font-size: max(12px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: -.02em;
}

.aystack {
  height: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 8);
  overflow: hidden;
  display: flex;
  gap: calc(var(--u) * 3);
}

.aystack span {
  height: 100%;
}

.aymix {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.aymix li {
  display: grid;
  grid-template-columns: calc(var(--u) * 12) minmax(0, 1fr) auto calc(var(--u) * 50);
  gap: calc(var(--u) * 10);
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.aymix__p {
  text-align: right;
  color: var(--mute);
}

.aymgn__k {
  padding-top: calc(var(--u) * 4);
}

.aymgn {
  height: calc(var(--u) * 60);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 5);
}

.aymgn span {
  flex: 1;
  border-radius: calc(var(--u) * 4);
  background: var(--up-ln2);
}

.aymgn .is-last {
  background: var(--acc);
}

.ayage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.ayage li {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.ayage__k {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.aydot {
  flex-shrink: 0;
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: 50%;
}

.ayage__v {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.ayage__s {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ayspeed {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.ayspeed li {
  display: grid;
  grid-template-columns: calc(var(--u) * 120) minmax(0, 1fr) calc(var(--u) * 60);
  gap: calc(var(--u) * 10);
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.ayspeed__v {
  text-align: right;
}

.ayturn {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.aytm {
  padding: calc(var(--u) * 10) calc(var(--u) * 4);
  border-top: .5px solid var(--up-ln2);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
  align-items: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.aytm--h {
  padding: 0 calc(var(--u) * 4);
  border-top: 0;
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.aytms {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.aytm__sort {
  padding: 0;
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
  text-align: right;
}

.aytm__sort[aria-pressed="true"] {
  color: var(--ink);
}

.aytm__n {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.aytm__av {
  flex-shrink: 0;
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: 50%;
  object-fit: cover;
}

.aytm__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aytm__c {
  text-align: right;
}

.ayrow4 {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: calc(var(--u) * 16);
  align-items: stretch;
}

.ayhms {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.ayhm {
  display: grid;
  grid-template-columns: calc(var(--u) * 44) repeat(13, minmax(0, 1fr));
  gap: calc(var(--u) * 4);
  align-items: center;
}

.ayhm--h span {
  font-size: 12px;
  color: var(--mute);
  text-align: center;
}

.ayhm__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.ayhm__c {
  position: relative;
  height: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 7);
}

.ayhm__c::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--acc);
  opacity: var(--o, .1);
}

.ayhm__c.is-peak {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.ayhm__c.is-peak::before {
  inset: 2px;
  border-radius: calc(var(--u) * 5);
}

.ayhm__lg {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--body);
}

.ayhm__scale {
  display: flex;
  gap: calc(var(--u) * 3);
}

.ayhm__scale span {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 3);
  background: var(--acc);
}

.ayhm__scale span:nth-child(1) {
  opacity: .08;
}

.ayhm__scale span:nth-child(2) {
  opacity: .35;
}

.ayhm__scale span:nth-child(3) {
  opacity: .65;
}

.ayhm__tip {
  color: var(--ink);
}

.ayals {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.ayal {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: grid;
  grid-template-columns: calc(var(--u) * 10) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 12);
  align-items: center;
}

.ayal .aydot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
}

.ayal__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.ayal__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.ayal__d {
  font-size: max(12px, calc(var(--u) * 14));
  color: var(--mute);
}

.ayal__go {
  align-self: center;
}

/* == 265. Dealer · Analytics — tablet and phone ========================= */
@media (max-width: 1999px) {
  .aykpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .aymid,
  .ayrow2,
  .ayrow4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ayrow3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ayrow3 > .aycard:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1599px) {
  .aytop {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .ay {
    --u: .8px;
  }

  .aycard,
  .ayexec {
    padding: 16px 14px;
  }

  .ayper,
  .ayseg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .aybar__sp {
    display: none;
  }

  .ayexec__t {
    font-size: 20px;
  }

  .aygoals {
    grid-template-columns: minmax(0, 1fr);
  }

  .aykpis {
    grid-template-columns: 1fr 1fr;
  }

  .ayrow3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ay .aylg {
    margin-left: 0;
  }

  .ayfn__r {
    grid-template-columns: 84px minmax(0, 1fr) 54px;
  }

  .ayfn__d {
    display: none;
  }

  .ayfn__c {
    padding-left: 0;
    flex-wrap: wrap;
  }

  .aysrs,
  .aysr--h {
    overflow-x: auto;
  }

  .aysr {
    min-width: 560px;
  }

  .aycard--src {
    overflow-x: auto;
  }

  .aytm {
    grid-template-columns: minmax(0, 1.6fr) repeat(6, minmax(0, 1fr));
    gap: 6px;
    font-size: 13px;
  }

  .aytm__av {
    display: none;
  }

  .ayhm {
    grid-template-columns: 32px repeat(13, minmax(0, 1fr));
    gap: 2px;
  }

  .ayhm__lg {
    flex-wrap: wrap;
  }

  .ayal {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .ayal__go {
    grid-column: 2;
    justify-self: start;
  }
}

/* == 266. Dealer · Team — KPI row, invite and tabs ====================== */
.tq {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.tq p {
  margin: 0;
}

.tqpend,
.tqtags,
.tqwk__d,
.tqlog__l,
.tqrules,
.tqld,
.tqpath,
.tqto {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tq .tqv--ok {
  color: var(--pd-ok);
}

.tq .tqv--amber {
  color: var(--gr-amber);
}

.tq .tqv--acc {
  color: var(--acc);
}

.tq .tqv--mute {
  color: var(--mute);
}

.tq .tqv--body {
  color: var(--body);
}

.tq .tqv--s0 {
  color: var(--pd-ok);
}

.tq .tqv--s1 {
  color: var(--ml-blue);
}

.tq .tqv--s2,
.tq .tqv--s4 {
  color: var(--mute);
}

.tq .tqv--s3 {
  color: var(--gr-amber);
}

.tqc--ok {
  background: var(--pd-ok);
}

.tqc--amber {
  background: var(--gr-amber);
}

.tqc--acc {
  background: var(--acc);
}

/* avatars: the member's photo, with the status dot on the bigger ones */
.tqav {
  position: relative;
  flex-shrink: 0;
  border-radius: 50%;
  display: block;
}

.tqav__i {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

.tqav__dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surf);
}

.tqav--28 {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
}

.tqav--30 {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
}

.tqav--32 {
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
}

.tqav--34 {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
}

.tqav--36 {
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
}

.tqav--40 {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
}

.tqav--40 .tqav__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
}

.tqav--46 {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
}

.tqav--56 {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
}

.tqav--72 {
  width: calc(var(--u) * 72);
  height: calc(var(--u) * 72);
}

.tqav--72 .tqav__dot {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
}

.tqav__dot.tqs--0 {
  background: var(--pd-ok);
}

.tqav__dot.tqs--1 {
  background: var(--ml-blue);
}

.tqav__dot.tqs--2,
.tqav__dot.tqs--4 {
  background: var(--mute);
}

.tqav__dot.tqs--3 {
  background: var(--gr-amber);
}

/* status / request pills */
.tqpill {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tqpill--btn {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  align-self: center;
}

.tqpill.tqs--0,
.tqpill.tqt--ok {
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.tqpill.tqs--1 {
  background: rgba(29, 95, 209, .1);
  color: var(--ml-blue);
}

.tqpill.tqs--2,
.tqpill.tqs--4,
.tqpill.tqt--no {
  background: var(--ms-tile);
  color: var(--mute);
}

.tqpill.tqs--3,
.tqpill.tqt--wait {
  background: rgba(201, 138, 18, .14);
  color: var(--gr-amber);
}

.tqmeter {
  display: block;
  border-radius: calc(var(--u) * 3);
  background: var(--ms-tile);
  overflow: hidden;
}

.tqmeter__f {
  display: block;
  height: 100%;
  width: 0;
}

.tqmeter--5 {
  height: calc(var(--u) * 5);
}

.tqmeter--6 {
  height: calc(var(--u) * 6);
}

.tqmeter--8 {
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
}

/* segmented controls */
.tqseg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 24);
  display: flex;
  gap: calc(var(--u) * 3);
}

.tqseg--sf {
  background: var(--surf);
}

.tqseg--pg {
  background: var(--bg);
}

.tqseg__b {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tqseg__b.is-on {
  background: var(--ink);
  color: var(--surf);
}

.tqseg--fill .tqseg__b {
  flex: 1;
  min-width: 0;
  padding: 0 calc(var(--u) * 8);
}

.tqseg--lg .tqseg__b {
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 22);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqseg--sm {
  padding: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 18);
}

.tqseg--sm .tqseg__b {
  height: calc(var(--u) * 32);
  border-radius: calc(var(--u) * 16);
}

.tqtop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) calc(var(--u) * 300);
  gap: calc(var(--u) * 16);
}

.tqkpi {
  padding: calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.tqkpi__k {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqkpi__r {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.tqkpi__v {
  font-size: max(12px, calc(var(--u) * 38));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.tqkpi__d {
  font-size: max(12px, calc(var(--u) * 14));
}

.tqtop__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tqtop__inv,
.tqtop__exp {
  flex: 1;
  min-height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 26);
}

.tqtop__inv {
  background: var(--acc);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) var(--acc-a25);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 16));
}

.tqtop__exp {
  border: 1px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqtop__exp:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.tqform {
  padding: calc(var(--u) * 18) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  box-shadow: inset 0 0 0 1.5px var(--acc);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.tqform__t {
  font-size: max(12px, calc(var(--u) * 18));
  font-weight: 300;
}

.tqform__in {
  flex: 1;
  min-width: calc(var(--u) * 240);
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 18);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 24);
  background: var(--bg);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  outline: 0;
}

.tqform__in:focus {
  border-color: var(--acc);
}

.tqform__go {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 24);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.tqpend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.tqpi {
  padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 16);
  border: 1px dashed var(--up-ln2);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.tqpi__e {
  font-size: max(12px, calc(var(--u) * 15));
  overflow-wrap: anywhere;
}

.tqpi__r {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--ms-tile);
  color: var(--body);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.tqpi__w {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqpi__rs,
.tqpi__x {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 17);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqpi__rs {
  border: 1px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
}

.tqpi__x {
  color: var(--mute);
}

.tqpi__x:hover {
  color: var(--acc);
}

.tqtabs {
  padding: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  gap: calc(var(--u) * 6);
}

.tqtab {
  flex: 1;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 28);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 16));
  white-space: nowrap;
}

.tqtab.is-on {
  background: var(--ink);
  color: var(--surf);
}

.tqtab__b {
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 9);
  border-radius: calc(var(--u) * 14);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.tqb--n {
  background: var(--ms-tile);
  color: var(--body);
}

.tqb--amber {
  background: rgba(201, 138, 18, .18);
  color: var(--gr-amber);
}

.tqb--acc {
  background: var(--acc-a12);
  color: var(--acc);
}

.tqtab.is-on .tqtab__b {
  background: rgba(128, 128, 128, .25);
  color: var(--surf);
}

/* == 267. Dealer · Team — people: grid, org chart, profile ============= */
.tqbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.tqbar .tqseg {
  gap: calc(var(--u) * 4);
}

.tqsearch {
  flex: 1;
  max-width: calc(var(--u) * 420);
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.tqsearch__i {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  flex-shrink: 0;
  fill: none;
  stroke: var(--mute);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.tqsearch__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqbar__sp {
  flex: 1;
}

.tqbar .tqseg:last-child .tqseg__b {
  padding: 0 calc(var(--u) * 16);
}

.tqgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 14);
}

.tqcard {
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  color: var(--ink);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.tqcard.is-on {
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.tqcard.is-off {
  opacity: .5;
}

.tqcard__h {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tqcard__nm {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.tqcard__n {
  font-size: max(12px, calc(var(--u) * 18));
}

.tqcard__r {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqload {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
}

.tqload__t {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 8);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqcard__s {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 6);
}

.tqcard__k {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.tqcard__kl {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqcard__kv {
  font-size: max(12px, calc(var(--u) * 18));
}

.tqempty {
  grid-column: 1 / -1;
  padding: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqorg {
  padding: calc(var(--u) * 26);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tqorg__gm {
  padding: calc(var(--u) * 12) calc(var(--u) * 20) calc(var(--u) * 12) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 24);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tqorg__b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 2);
}

.tqorg__n {
  font-size: max(12px, calc(var(--u) * 17));
}

.tqorg__r {
  font-size: max(12px, calc(var(--u) * 14));
  opacity: .7;
}

.tqorg__v {
  width: 2px;
  height: calc(var(--u) * 28);
  background: var(--up-ln2);
  display: block;
}

.tqorg__v--s {
  height: calc(var(--u) * 22);
}

.tqorg__hz {
  width: 72%;
  height: 2px;
  background: var(--up-ln2);
  display: block;
}

.tqorg__cols {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 16);
}

.tqorg__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.tqorg__pill {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 14);
  background: var(--ms-tile);
  color: var(--ink);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.tqorg__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.tqorow {
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  display: grid;
  grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr) calc(var(--u) * 90);
  align-items: center;
  gap: calc(var(--u) * 10);
}

.tqorow.is-on {
  background: var(--acc-a06);
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.tqorow__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}

.tqorow__n {
  font-size: max(12px, calc(var(--u) * 15));
}

.tqorow__s {
  overflow: hidden;
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tqorow__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.tqorow__lt {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
  text-align: right;
  white-space: nowrap;
}

.tqpro {
  padding: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.tqpro__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.tqpro__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.tqpro__n {
  margin: 0;
  font-size: max(12px, calc(var(--u) * 28));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: normal;
}

.tqpro__r {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqpro__c {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
  overflow-wrap: anywhere;
}

.tqtags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.tqtags li {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--ms-tile);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.tqtg {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tqtg__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqtg__k {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqtg__g {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.tqtg__gt,
.tqtg__c {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqtg__c {
  align-items: center;
  padding-top: calc(var(--u) * 4);
}

.tqtg__cv {
  color: var(--pd-ok);
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.tqwork {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.tqwork__i {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  text-decoration: none;
}

.tqwork__i:hover {
  box-shadow: inset 0 0 0 1px var(--acc);
}

.tqwork__k {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqwork__v {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.tqwk,
.tqrole {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.tqwk__t,
.tqrole__t,
.tqlog__t {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqwk__d {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(var(--u) * 4);
}

.tqwk__d li {
  padding: calc(var(--u) * 8) 0;
  border-radius: calc(var(--u) * 12);
  background: var(--acc-a10);
  color: var(--acc);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqwk__d .is-off {
  background: var(--ms-tile);
  color: var(--mute);
}

.tqwk__d .is-today {
  background: var(--acc);
  color: #fff;
}

.tqwk__dd {
  font-size: max(12px, calc(var(--u) * 12));
  opacity: .8;
}

.tqlog {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.tqlog__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.tqlog__l li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqlog__w {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqrole .tqseg {
  border-radius: calc(var(--u) * 22);
}

.tqrole .tqseg__b {
  height: calc(var(--u) * 38);
  border-radius: calc(var(--u) * 19);
}

.tqnote {
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqacts {
  display: flex;
  gap: calc(var(--u) * 8);
}

.tqacts__b {
  flex: 1;
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 21);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqacts__b:hover {
  border-color: var(--acc);
}

/* == 268. Dealer · Team — roles & permissions ========================== */
.tqbox {
  min-width: 0;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.tqbox__h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.tqbox__t {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.tqbox__s {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqroles {
  display: grid;
  grid-template-columns: calc(var(--u) * 360) minmax(0, 1fr);
  align-items: start;
  gap: calc(var(--u) * 16);
}

.tqroles__l {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tqroles__r {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.tqpre {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  background: var(--surf);
  color: var(--ink);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 6);
}

.tqpre.is-on {
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.tqpre__h {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
}

.tqpre__t {
  font-size: max(12px, calc(var(--u) * 17));
}

.tqpre__n {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqpre__d {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  line-height: 1.4;
}

.tqpre__w {
  padding-top: calc(var(--u) * 2);
  display: flex;
  gap: calc(var(--u) * 4);
}

.tqyou {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  border-radius: 50%;
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 12));
}

.tqunsv {
  padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tqunsv__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gr-amber);
}

.tqunsv__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 15));
}

.tqunsv__x,
.tqunsv__go {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tqunsv__x {
  border: 1px solid rgba(128, 128, 128, .45);
  color: var(--surf);
}

.tqunsv__go {
  padding: 0 calc(var(--u) * 18);
  background: var(--acc);
  color: #fff;
}

.tqmx {
  min-width: 0;
}

.tqmx__in {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.tqmx__h,
.tqmx__r {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: calc(var(--u) * 8);
}

.tqmx__h {
  padding: 0 calc(var(--u) * 4) calc(var(--u) * 8);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqmx__c {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2);
  text-align: center;
}

.tqmx__ct {
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqmx__r {
  padding: calc(var(--u) * 8) calc(var(--u) * 4);
  border-top: .5px solid var(--up-ln2);
}

.tqmx__p {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.tqmx__pt {
  font-size: max(12px, calc(var(--u) * 15));
}

.tqmx__pd {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqcell {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 15);
  background: var(--ms-tile);
  color: var(--mute);
  justify-self: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.tqcell.is-on {
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
}

.tqcell.is-lock {
  background: var(--ink);
  color: var(--surf);
  cursor: default;
}

.tqcell.is-hl {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.tqcell.is-chg {
  box-shadow: inset 0 0 0 2px var(--gr-amber);
}

.tqmx__n {
  padding-top: calc(var(--u) * 8);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

/* == 269. Dealer · Team — lead routing ================================== */
.tqrt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: calc(var(--u) * 16);
}

.tqrt__m {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.tqrt__k {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqrt__d {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqrules {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.tqrule {
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 20) auto calc(var(--u) * 48);
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqrule.is-off {
  opacity: .45;
}

.tqrule__ar {
  color: var(--mute);
}

.tqrule__w {
  display: flex;
  gap: calc(var(--u) * 4);
}

.tqsw {
  position: relative;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 26);
  border-radius: calc(var(--u) * 13);
  background: var(--up-ln2);
}

.tqsw.is-on {
  background: var(--acc);
}

.tqsw__k {
  position: absolute;
  top: calc(var(--u) * 3);
  left: calc(var(--u) * 3);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: var(--surf);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: left .2s;
}

.tqsw.is-on .tqsw__k {
  left: calc(var(--u) * 21);
}

.tqset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.tqset__i {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.tqset__i--row {
  flex-direction: row;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.tqset__b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.tqset__k {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqset__v {
  font-size: max(12px, calc(var(--u) * 20));
}

.tqstep {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  flex-shrink: 0;
  border: 1px solid var(--up-ln2);
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 17));
}

.tqstep:disabled {
  opacity: .4;
  cursor: default;
}

.tqnext {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--acc-a06);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.tqnext__k {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqnext__n {
  font-size: max(12px, calc(var(--u) * 16));
}

.tqnext__w {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqld {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.tqld__i {
  display: grid;
  grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr) calc(var(--u) * 120);
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tqld__b {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
}

.tqld__h {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
}

.tqld__h span:last-child {
  font-size: max(12px, calc(var(--u) * 14));
}

.tqld__v {
  font-size: max(12px, calc(var(--u) * 15));
  text-align: right;
  white-space: nowrap;
}

.tqsmp {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.tqsmp__b {
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border: 1.5px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  color: var(--ink);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 2);
}

.tqsmp__b.is-on {
  border-color: var(--acc);
  background: var(--acc-a04);
}

.tqsmp__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.tqsmp__m {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqpath {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.tqpath__s {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.tqpath__s.is-end {
  background: var(--acc-a06);
}

.tqpath__k {
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqpath__i {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 12));
}

.tqpath__v {
  font-size: max(12px, calc(var(--u) * 16));
}

/* == 270. Dealer · Team — schedule and time off ======================== */
.tqsc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 440);
  align-items: start;
  gap: calc(var(--u) * 16);
}

.tqsc__w {
  min-width: 0;
}

.tqsc__in {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.tqsg {
  display: grid;
  grid-template-columns: calc(var(--u) * 180) repeat(7, minmax(0, 1fr));
  align-items: center;
  gap: calc(var(--u) * 6);
}

.tqsg--days {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqsg__d {
  text-align: center;
}

.tqsg__m {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.tqsg__n {
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 15));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tqsh {
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 12);
  background: var(--acc-a10);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tqsh.is-off {
  background: var(--bg);
  color: var(--mute);
}

.tqsg--cov {
  padding-top: calc(var(--u) * 6);
  border-top: .5px solid var(--up-ln2);
}

.tqsg__k {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqsg__c {
  font-size: max(12px, calc(var(--u) * 15));
  text-align: center;
}

.tqsg__dm {
  display: flex;
  justify-content: center;
}

.tqdem {
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: rgba(47, 163, 107, .1);
  color: var(--pd-ok);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tqdem.is-short {
  background: var(--acc-a10);
  color: var(--acc);
}

.tqsc__st {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.tqsc__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 14));
}

.tqsc__go {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 20);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.tqto {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.tqto__i {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.tqto__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.tqto__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}

.tqto__n {
  font-size: max(12px, calc(var(--u) * 15));
}

.tqto__w {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqto__h .tqpill {
  align-self: center;
}

.tqto__imp {
  font-size: max(12px, calc(var(--u) * 14));
}

.tqto__a {
  display: flex;
  gap: calc(var(--u) * 8);
}

.tqto__ok,
.tqto__no {
  flex: 1;
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 14));
}

.tqto__ok {
  background: var(--pd-ok);
  color: #fff;
}

.tqto__no {
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  background: var(--surf);
  color: var(--ink);
  white-space: nowrap;
}

/* tablet and phone */
@media (max-width: 1999px) {
  .tqtop {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tqtop__b {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .tqsc {
    grid-template-columns: minmax(0, 1fr);
  }

  .tqto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 1599px) {
  .tqgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tqroles,
  .tqrt {
    grid-template-columns: minmax(0, 1fr);
  }

  .tqroles__l {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tqmx,
  .tqsc__w {
    overflow-x: auto;
  }

  .tqmx__in {
    min-width: 720px;
  }

  .tqsc__in {
    min-width: 760px;
  }
}

@media (max-width: 1023px) {
  .tqtop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tqgrid,
  .tqroles__l {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tqorg__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .tqorg__hz,
  .tqorg__v--s {
    display: none;
  }

  .tqpath {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tqto {
    grid-template-columns: minmax(0, 1fr);
  }

  .tqtabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tqtab {
    flex: none;
    padding: 0 18px;
  }
}

@media (max-width: 767px) {
  .tq {
    --u: .8px;
  }

  .tqkpi {
    padding: 14px;
  }

  .tqtop__b {
    flex-direction: column;
  }

  .tqtop__inv,
  .tqtop__exp {
    flex: none;
    height: 44px;
  }

  .tqform {
    padding: 14px;
  }

  .tqform__in {
    flex-basis: 100%;
    min-width: 0;
  }

  .tqform .tqseg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tqform__go {
    flex: 1;
  }

  .tqbar .tqseg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tqsearch {
    flex-basis: 100%;
    max-width: none;
  }

  .tqbar__sp {
    display: none;
  }

  .tqgrid,
  .tqroles__l,
  .tqset {
    grid-template-columns: minmax(0, 1fr);
  }

  .tqwork__i {
    padding: 10px;
  }

  .tqcard,
  .tqpro,
  .tqbox,
  .tqorg {
    padding: 16px 14px;
  }

  .tqpro__h {
    flex-wrap: wrap;
  }

  .tqpro__b {
    flex-basis: calc(100% - 80px);
  }

  .tqwk__d li {
    font-size: 12px;
  }

  .tqrole .tqseg {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tqrole .tqseg__b {
    flex: none;
    padding: 0 12px;
  }

  .tqacts {
    flex-direction: column;
  }

  .tqacts__b {
    flex: none;
  }

  .tqunsv {
    flex-wrap: wrap;
    padding: 12px 14px;
  }

  .tqunsv__t {
    flex-basis: calc(100% - 30px);
  }

  .tqunsv__x,
  .tqunsv__go {
    flex: 1;
  }

  .tqrt .tqseg--lg {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tqrt .tqseg--lg .tqseg__b {
    flex: none;
    padding: 0 14px;
  }

  .tqrule {
    grid-template-columns: minmax(0, 1fr) auto 48px;
  }

  .tqrule__ar {
    display: none;
  }

  .tqld__i {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .tqld__v {
    grid-column: 2;
    text-align: left;
  }

  .tqsmp__b {
    flex-basis: 100%;
  }

  .tqpath {
    grid-template-columns: minmax(0, 1fr);
  }

  .tqsc__st {
    flex-direction: column;
    align-items: stretch;
  }
}

/* == 271. Dealer · Profile — tokens, strength hero ===================== */
:root {
  --pz-amt: #8a6200;
  --pz-graph: #1c1f24;
  --pz-graph-t: rgba(28, 31, 36, .08);
  --pz-frame: #111418;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pz-amt: #e8b64c;
    --pz-graph: #e6e8eb;
    --pz-graph-t: rgba(230, 232, 235, .1);
    --pz-frame: #3a3f47;
  }
}

:root[data-theme="dark"] {
  --pz-amt: #e8b64c;
  --pz-graph: #e6e8eb;
  --pz-graph-t: rgba(230, 232, 235, .1);
  --pz-frame: #3a3f47;
}

.pz {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.pz p {
  margin: 0;
}

.pzben,
.pzsf,
.pzterms,
.pzmini,
.pzlocs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz .pzv--ok {
  color: var(--pd-ok);
}

.pz .pzv--amber {
  color: var(--gr-amber);
}

/* storefront colours are the dealer's own and stay fixed across themes (Graphite flips) */
.pzbr--0 {
  --br: #d8470e;
  --br-t: rgba(216, 71, 14, .1);
}

.pzbr--1 {
  --br: #177a4b;
  --br-t: rgba(23, 122, 75, .1);
}

.pzbr--2 {
  --br: #2450e0;
  --br-t: rgba(36, 80, 224, .1);
}

.pzbr--3 {
  --br: var(--pz-graph);
  --br-t: var(--pz-graph-t);
}

.pzhero {
  padding: calc(var(--u) * 26) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 32);
  background: var(--up-plus);
  color: #fff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 30);
}

.pzhero__q {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.pzhero__k {
  color: rgba(255, 255, 255, .6);
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 2.24);
  text-transform: uppercase;
}

.pzhero__v {
  font-size: max(12px, calc(var(--u) * 64));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}

.pzhero__m {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.pzseg {
  display: flex;
  gap: calc(var(--u) * 4);
}

.pzseg__i {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.pzseg__b {
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 5);
  display: block;
}

.pzseg--ok {
  background: #6fd3a0;
}

.pzseg--part {
  background: #c98a12;
}

.pzseg--none {
  background: rgba(255, 255, 255, .15);
}

.pzseg__t {
  overflow: hidden;
  color: rgba(255, 255, 255, .65);
  font-size: max(12px, calc(var(--u) * 12));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pzhints {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.pzhints--done {
  color: rgba(255, 255, 255, .7);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzhint {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 19);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzhint:hover {
  background: rgba(255, 255, 255, .18);
}

.pzhero__a {
  width: calc(var(--u) * 420);
  display: flex;
  gap: calc(var(--u) * 8);
}

.pzhero__live,
.pzhero__pub {
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 26);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.pzhero__live {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, .3);
  text-decoration: none;
}

.pzhero__live:hover {
  border-color: #fff;
}

.pzhero__pub {
  flex: 1.4;
  padding: 0 calc(var(--u) * 12);
  background: var(--acc);
}

.pzhero__pub.is-done {
  background: var(--pd-ok);
}

/* == 272. Dealer · Profile — insights and the unpublished bar ========= */
.pzins {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: calc(var(--u) * 16);
}

.pzcard {
  min-width: 0;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.pzcard--up {
  background: var(--acc-a06);
  gap: calc(var(--u) * 10);
}

.pzcard__h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
}

.pzcard__t {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.pzcard__s {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzrank {
  height: calc(var(--u) * 28);
  margin-left: auto;
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  display: flex;
  align-items: center;
  align-self: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzrank--ok {
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.pzrank--amber {
  background: rgba(201, 138, 18, .14);
  color: var(--gr-amber);
}

.pzben {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.pzben__i {
  display: grid;
  grid-template-columns: calc(var(--u) * 190) minmax(0, 1fr) calc(var(--u) * 44);
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.pzben__n {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pzben__bar {
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 5);
  background: var(--ms-tile);
  display: block;
  overflow: hidden;
}

.pzben__f {
  width: 0;
  height: 100%;
  background: var(--up-ln2);
  display: block;
  transition: width .3s;
}

.pzben__v {
  text-align: right;
}

.pzben__i.is-me {
  color: var(--acc);
}

.pzben__i.is-me .pzben__f {
  background: var(--acc);
}

.pzsf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.pzsf__i {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.pzsf__k {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzsf__v {
  font-size: max(12px, calc(var(--u) * 24));
  font-weight: 300;
}

.pzterms {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.pzterms li {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--bg);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzup {
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 56));
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}

.pzup__d {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
}

.pz .pzup__n {
  margin-top: auto;
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzchg {
  padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  background: var(--surf);
  box-shadow: inset 0 0 0 1.5px var(--gr-amber);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.pzchg__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gr-amber);
}

.pzchg__t {
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.pzchg__l {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.pzchg__c {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: rgba(201, 138, 18, .12);
  color: var(--pz-amt);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzchg__go {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 21);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

/* == 273. Dealer · Profile — section cards ============================= */
.pzmain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 440);
  align-items: start;
  gap: calc(var(--u) * 20);
}

.pzsecs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: calc(var(--u) * 14);
}

.pzsec {
  min-width: 0;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
  scroll-margin-top: 20px;
}

.pzsec.is-open {
  grid-column: span 2;
  box-shadow: inset 0 0 0 1.5px var(--acc);
}

.pzsec__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.pzsec__m {
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.pzsec--ok {
  background: var(--pd-ok);
  color: #fff;
}

.pzsec--warn {
  background: rgba(201, 138, 18, .18);
  color: var(--gr-amber);
}

.pzsec__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.pzsec__t {
  font-size: max(12px, calc(var(--u) * 20));
  font-weight: 300;
}

.pzsec__s {
  overflow: hidden;
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pzsec__p {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzsec--pok {
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.pzsec--pwarn {
  background: rgba(201, 138, 18, .14);
  color: var(--gr-amber);
}

.pzbtn {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzbtn:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.pzbtn--42 {
  height: calc(var(--u) * 42);
}

.pzpills {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.pzpill {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--bg);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzpill--ok {
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.pzpill--t {
  background: var(--ms-tile);
}

.pzpill--br {
  height: calc(var(--u) * 32);
  background: var(--br-t);
  color: var(--br);
}

.pzpill--dot::before {
  content: "";
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: var(--pd-ok);
}

.pzf3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) calc(var(--u) * 140);
  gap: calc(var(--u) * 12);
}

.pzfld {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.pzfld__k,
.pzgrp__k,
.pzab__k {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzfld__in,
.pzta {
  width: 100%;
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 16));
  outline: 0;
}

.pzfld__in {
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 16);
}

.pzfld__in:focus,
.pzta:focus {
  border-color: var(--acc);
}

.pzlic {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: rgba(47, 163, 107, .08);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.pzlic__ok {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pd-ok);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.pzlic__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.pzlic__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.pzlic__d {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzab__x {
  display: -webkit-box;
  overflow: hidden;
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pzab__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.pzab__n {
  margin-left: auto;
  font-size: max(12px, calc(var(--u) * 14));
}

.pzseg2 {
  padding: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  gap: calc(var(--u) * 2);
}

.pzseg2__b {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzseg2__b.is-on {
  background: var(--ink);
  color: var(--surf);
}

.pzab__ta {
  display: block;
}

.pzta {
  min-height: calc(var(--u) * 120);
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  display: block;
  line-height: 1.5;
  resize: vertical;
}

.pzgrp {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.pzchips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.pzchip {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 19);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzchip.is-on {
  border-color: var(--acc);
  background: var(--acc-a06);
  color: var(--acc);
}

.pzmini {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(var(--u) * 4);
}

.pzmini li {
  padding: calc(var(--u) * 8) 0;
  border-radius: calc(var(--u) * 12);
  background: rgba(47, 163, 107, .08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 12));
  white-space: nowrap;
}

.pzmini .is-off {
  background: var(--bg);
  color: var(--mute);
}

.pzlocs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.pzloc {
  min-width: 0;
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  gap: calc(var(--u) * 12);
}

.pzloc__img {
  width: calc(var(--u) * 84);
  height: calc(var(--u) * 84);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 16);
  object-fit: cover;
}

.pzloc__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.pzloc__t {
  font-size: max(12px, calc(var(--u) * 16));
}

.pzloc__a,
.pzloc__hol {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzloc__p {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzloc__k {
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--surf);
  color: var(--body);
  display: flex;
  align-items: center;
  align-self: flex-start;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzhrs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(var(--u) * 6);
}

.pzhr {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 4);
  border: 1.5px solid transparent;
  border-radius: calc(var(--u) * 16);
  background: rgba(47, 163, 107, .08);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 4);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzhr.is-off {
  background: var(--bg);
  color: var(--mute);
}

.pzhr.is-today {
  border-color: var(--acc);
}

.pzhr__t {
  white-space: nowrap;
}

.pzgal {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.pzslot {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--up-ln2);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.pzslot.is-on {
  border: 0;
}

.pzslot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pzslot__l {
  position: relative;
  height: calc(var(--u) * 24);
  margin: calc(var(--u) * 6);
  padding: 0 calc(var(--u) * 9);
  border-radius: calc(var(--u) * 12);
  color: var(--mute);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  white-space: nowrap;
}

.pzslot.is-on .pzslot__l {
  background: var(--surf);
  color: var(--ink);
}

.pzslot__cv {
  position: absolute;
  top: calc(var(--u) * 6);
  left: calc(var(--u) * 6);
  height: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 11);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
}

.pzmed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 10);
}

.pzvid {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 20);
  background: var(--surf);
  color: var(--ink);
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.pzvid.is-on {
  border-color: rgba(47, 163, 107, .4);
  background: rgba(47, 163, 107, .06);
}

.pzvid__i {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 12);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.pzvid__b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.pzvid__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.pzvid__d {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzcol {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.pzcol__l {
  display: flex;
  gap: calc(var(--u) * 8);
}

.pzsw {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border: 3px solid transparent;
  border-radius: 50%;
  background: var(--br);
  background-clip: padding-box;
}

.pzsw.is-on {
  border-color: var(--ink);
}

.pzgm {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
}

.pzgm__i {
  flex: 1;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--up-ln2);
  border-radius: calc(var(--u) * 10);
  background: var(--bg);
  overflow: hidden;
}

.pzgm__i.is-on {
  border: 0;
}

.pzgm__i.is-cover {
  border: 2px solid var(--ink);
}

.pzgm__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pzgm__c {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  flex-shrink: 0;
  margin-left: calc(var(--u) * 6);
  border-radius: 50%;
  background: var(--br);
  box-shadow: 0 0 0 3px var(--surf), 0 0 0 4px var(--up-ln2);
}

.pzsv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.pzsv__b {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border: 1.5px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.pzsv__b.is-on {
  border-color: rgba(47, 163, 107, .4);
  background: rgba(47, 163, 107, .05);
}

.pzsv__m {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--up-ln2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.pzsv__b.is-on .pzsv__m {
  background: var(--pd-ok);
}

.pzsv__x,
.pzpo__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}

.pzpo__b {
  flex: 1;
}

.pzsv__t,
.pzpo__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.pzsv__d,
.pzpo__d {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzpo {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.pzsw2 {
  position: relative;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 26);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 13);
  background: var(--up-ln2);
  transition: background .2s;
}

.pzsw2.is-on {
  background: var(--acc);
}

.pzsw2__k {
  position: absolute;
  top: calc(var(--u) * 3);
  left: calc(var(--u) * 3);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: var(--surf);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: left .2s;
}

.pzsw2.is-on .pzsw2__k {
  left: calc(var(--u) * 21);
}

.pzfc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.pzfc__b {
  min-width: 0;
  padding: calc(var(--u) * 8);
  border: 1.5px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.pzfc__b.is-on {
  border-color: var(--acc);
  background: var(--acc-a04);
}

.pzfc__img {
  width: 100%;
  height: calc(var(--u) * 64);
  border-radius: calc(var(--u) * 12);
  background: var(--bg);
  display: block;
  object-fit: cover;
}

.pzfc__t {
  padding: 0 calc(var(--u) * 4);
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 14));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pzfc__m {
  padding: 0 calc(var(--u) * 4) calc(var(--u) * 4);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzfc__b.is-on .pzfc__m,
.pzfr.is-on .pzfr__m {
  color: var(--acc);
}

.pzstars {
  color: #e0a10f;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzstars__off {
  color: var(--up-ln2);
}

.pzfr {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border: 1.5px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.pzfr.is-on {
  border-color: var(--acc);
  background: var(--acc-a04);
}

.pzfr__q {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 15));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pzfr__m {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzcm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: calc(var(--u) * 6);
}

.pzcm__i {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.pzcm__img {
  width: 100%;
  height: calc(var(--u) * 48);
  border-radius: calc(var(--u) * 10);
  background: var(--bg);
  display: block;
  object-fit: cover;
}

.pzcm__t {
  overflow: hidden;
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 12));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pzcm__r {
  padding-left: calc(var(--u) * 6);
  color: #e0a10f;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

/* == 274. Dealer · Profile — buyer preview ============================= */
.pzpv {
  position: sticky;
  top: 20px;
  min-width: 0;
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.pzpv__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
}

.pzpv__k {
  flex: 1;
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
  letter-spacing: calc(var(--u) * 2.24);
  text-transform: uppercase;
}

.pzpv__h .pzseg2 {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 20);
  gap: calc(var(--u) * 3);
}

.pzpv__h .pzseg2__b {
  height: calc(var(--u) * 34);
  border-radius: calc(var(--u) * 17);
}

.pzpv__k2 {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzph {
  width: calc(var(--u) * 380);
  max-width: 100%;
  padding-bottom: calc(var(--u) * 18);
  border: calc(var(--u) * 10) solid var(--pz-frame);
  border-radius: calc(var(--u) * 44);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: calc(var(--u) * 14);
  overflow: hidden;
}

.pzph__cv {
  position: relative;
  height: calc(var(--u) * 170);
  background: var(--ms-tile);
}

.pzph__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pzph__strip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(var(--u) * 6);
  background: var(--br);
}

.pzph__vid {
  position: absolute;
  right: calc(var(--u) * 14);
  bottom: calc(var(--u) * 18);
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: rgba(17, 20, 24, .75);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.pzph__in {
  position: relative;
  margin-top: calc(var(--u) * -46);
  padding: 0 calc(var(--u) * 18);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.pzph__id {
  padding: calc(var(--u) * 4);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 14);
}

.pzph__logo,
.pzsr__logo {
  flex-shrink: 0;
  background: var(--br);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'BBH Bartle', Geist, sans-serif;
}

.pzph__logo {
  width: calc(var(--u) * 84);
  height: calc(var(--u) * 84);
  border-radius: calc(var(--u) * 24);
  box-shadow: 0 0 0 4px var(--surf);
  font-size: max(12px, calc(var(--u) * 26));
}

.pzbr--3 .pzph__logo,
.pzbr--3 .pzsr__logo,
.pzbr--3 .pzph__msg {
  color: var(--surf);
}

.pzph__nm {
  min-width: 0;
  padding-bottom: calc(var(--u) * 2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.pzph__n {
  overflow-wrap: anywhere;
  font-size: max(12px, calc(var(--u) * 26));
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.pzph__tg {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 15));
}

.pzph__bd {
  padding: calc(var(--u) * 6) calc(var(--u) * 4) 0;
}

.pzph__bd .pzpill,
.pzph__sv .pzpill {
  height: calc(var(--u) * 28);
}

.pzph__sv .pzpill {
  height: calc(var(--u) * 32);
}

.pzph__ab {
  padding: calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.pzph__abt {
  display: -webkit-box;
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.pzph__mk {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzph__sv {
  padding: calc(var(--u) * 4);
}

.pzph__open {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.pzph__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mute);
}

.pzph__dot.is-open {
  background: var(--pd-ok);
}

.pzph__ot {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 15));
}

.pzph__ad {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzph__fc {
  padding: calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.pzph__ft {
  font-size: max(12px, calc(var(--u) * 16));
}

.pzph__cars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
}

.pzph__car {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.pzph__ci {
  width: 100%;
  height: calc(var(--u) * 80);
  border-radius: calc(var(--u) * 14);
  background: var(--bg);
  display: block;
  object-fit: cover;
}

.pzph__ct {
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 14));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pzph__cp {
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 300;
}

.pzph__rv {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.pzph__rq {
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.45;
}

.pzph__ra {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzph__cta {
  padding: 0 calc(var(--u) * 4);
  display: flex;
  gap: calc(var(--u) * 8);
}

.pzph__msg,
.pzph__book {
  flex: 1;
  height: calc(var(--u) * 50);
  border-radius: calc(var(--u) * 25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.pzph__msg {
  background: var(--br);
  color: #fff;
}

.pzph__book {
  border: 1px solid var(--up-ln2);
}

.pzsr {
  padding: calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 24);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.pzsr__h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.pzsr__logo {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 56);
  border-radius: calc(var(--u) * 16);
  font-size: max(12px, calc(var(--u) * 18));
}

.pzsr__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.pzsr__n {
  font-size: max(12px, calc(var(--u) * 18));
}

.pzsr__m,
.pzsr__l {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

.pzsr__cars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 6);
}

.pzsr__img {
  width: 100%;
  height: calc(var(--u) * 70);
  border-radius: calc(var(--u) * 12);
  background: var(--bg);
  display: block;
  object-fit: cover;
}

.pzsr .pzpill--br {
  height: calc(var(--u) * 28);
}

.pzsr__go {
  height: calc(var(--u) * 46);
  border-radius: calc(var(--u) * 23);
  background: var(--ink);
  color: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
}

/* == 275. Dealer · Profile — tablet and phone ========================== */
@media (max-width: 1999px) {
  .pzhero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .pzhero__a {
    grid-column: 1 / -1;
    width: auto;
  }

  .pzmain {
    grid-template-columns: minmax(0, 1fr);
  }

  .pzpv {
    position: static;
  }
}

@media (max-width: 1599px) {
  .pzins {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pzcard--up {
    grid-column: 1 / -1;
  }

  .pzgal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .pzins,
  .pzsecs {
    grid-template-columns: minmax(0, 1fr);
  }

  .pzsec.is-open {
    grid-column: auto;
  }

  .pzchg {
    flex-wrap: wrap;
  }

  .pzchg__l {
    flex-basis: 100%;
    order: 3;
  }
}

@media (max-width: 767px) {
  .pz {
    --u: .8px;
  }

  .pzhero {
    padding: 18px 16px;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .pzseg {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .pzseg__i {
    flex-basis: calc(33.33% - 3px);
  }

  .pzhero__a {
    flex-direction: column;
  }

  .pzhero__live,
  .pzhero__pub {
    flex: none;
    height: 48px;
  }

  .pzcard,
  .pzsec,
  .pzpv {
    padding: 16px 14px;
  }

  .pzben__i {
    grid-template-columns: 120px minmax(0, 1fr) 40px;
  }

  .pzsec__h {
    flex-wrap: wrap;
  }

  .pzsec__b {
    flex-basis: calc(100% - 50px);
  }

  .pzsec__p {
    margin-left: 48px;
  }

  .pzsec .pzbtn {
    margin-left: auto;
  }

  .pzf3,
  .pzlocs,
  .pzmed,
  .pzsv,
  .pzfc {
    grid-template-columns: minmax(0, 1fr);
  }

  .pzlic {
    flex-wrap: wrap;
  }

  .pzlic__b {
    flex-basis: calc(100% - 42px);
  }

  .pzab__n {
    flex-basis: 100%;
    margin-left: 0;
  }

  .pzhrs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pzmini li {
    font-size: 12px;
  }

  .pzmini li span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pzgal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pzfc__img {
    height: 120px;
  }

  .pzcm {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pzcm__r {
    grid-column: 1 / -1;
    padding-left: 0;
  }

  .pzpv__h {
    flex-wrap: wrap;
  }

  .pzpv__k {
    flex-basis: 100%;
  }

  .pzph {
    border-width: 8px;
    border-radius: 36px;
  }

  /* the name wraps on a narrow frame: start it below the cover instead of growing up into it */
  .pzph__id {
    align-items: flex-start;
  }

  .pzph__nm {
    padding: 44px 0 0;
  }
}

/* == 276. Dealer · Billing — tokens, alerts, shared bits =============== */
:root {
  --bz-amt: #8a6200;
  --bz-bar: #2b2f36;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bz-amt: #e8b64c;
    --bz-bar: #7d838d;
  }
}

:root[data-theme="dark"] {
  --bz-amt: #e8b64c;
  --bz-bar: #7d838d;
}

.bz {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.bz p {
  margin: 0;
}

.bzinc,
.bzln,
.bzpm,
.bzpc__f {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bz .bzv--ok {
  color: var(--pd-ok);
}

.bz .bzv--amber {
  color: var(--gr-amber);
}

.bz .bzv--acc {
  color: var(--acc);
}

.bz .bzv--body {
  color: var(--body);
}

.bzc--ok {
  background: var(--pd-ok);
}

.bzc--amber {
  background: var(--gr-amber);
}

.bzc--acc {
  background: var(--acc);
}

.bzcard {
  min-width: 0;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.bzcard__h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.bzcard__t {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.bzcard__s {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzcard__r {
  margin-left: auto;
}

.bzpill {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  display: inline-flex;
  align-items: center;
  justify-self: start;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.bzpill--ok {
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
}

.bzpill--amber {
  background: rgba(201, 138, 18, .14);
  color: var(--gr-amber);
}

.bzpill--acc {
  background: var(--acc-a10);
  color: var(--acc);
}

.bzpill--mute {
  background: var(--ms-tile);
  color: var(--body);
}

.bzbtn {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 21);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.bzbtn:hover {
  border-color: var(--acc);
}

.bzbtn--acc,
.bzbtn--amber {
  padding: 0 calc(var(--u) * 18);
  border: 0;
  color: #fff;
}

.bzbtn--acc {
  background: var(--acc);
}

.bzbtn--amber {
  background: var(--gr-amber);
}

.bzbtn--mute {
  color: var(--mute);
}

.bzbtn--36 {
  height: calc(var(--u) * 36);
}

.bzbtn--start {
  align-self: flex-start;
}

.bzacts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.bzseg {
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  gap: calc(var(--u) * 3);
}

.bzseg__b {
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 19);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.bzseg__b.is-on {
  background: var(--ink);
  color: var(--surf);
}

.bzal {
  padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.bzal--acc {
  background: var(--acc-a06);
  box-shadow: inset 0 0 0 1.5px var(--acc-a35);
}

.bzal--amber {
  background: rgba(201, 138, 18, .06);
  box-shadow: inset 0 0 0 1.5px rgba(201, 138, 18, .35);
}

.bzal__m {
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.bzal--acc .bzal__m {
  background: var(--acc);
}

.bzal--amber .bzal__m {
  background: var(--gr-amber);
}

.bzal__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.bzal__t {
  font-size: max(12px, calc(var(--u) * 16));
}

.bzal__d {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

/* == 277. Dealer · Billing — plan, usage, spend, budget =============== */
.bzrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: calc(var(--u) * 16);
}

.bzrow--plan {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.bzrow--spend {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.bzrow--inv {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
}

.bzplan {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 16);
}

.bzplan__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.bzplan__n {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.bzplan__nm {
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.bzplan__p {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 16));
}

.bzplan__r {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzplan__since {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 2);
  font-size: max(12px, calc(var(--u) * 15));
}

.bzplan__sk {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzinc {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.bzinc li {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--bg);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.bzcx {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 20);
  background: var(--acc-a06);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.bzcx__t {
  font-size: max(12px, calc(var(--u) * 16));
}

.bzcx__r {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.bzcx__c {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzcx__c.is-on {
  border-color: var(--acc);
  background: var(--acc-a08);
  color: var(--acc);
}

.bzcx__o {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

.bznote {
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 15));
}

.bznote--ok {
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
}

.bznote--amber {
  background: rgba(201, 138, 18, .12);
  color: var(--bz-amt);
}

.bznote--acc {
  background: var(--acc-a08);
  color: var(--acc);
}

.bzuse {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.bzuse__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.bzuse__l {
  color: var(--mute);
}

.bzbar {
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--ms-tile);
  display: block;
  overflow: hidden;
}

.bzbar__f,
.bzcap__f {
  width: 0;
  height: 100%;
  display: block;
  transition: width .3s;
}

.bzuse__f {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.bzuse__ft {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 14));
}

.bzbuy {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border: 1px solid var(--acc-a35);
  border-radius: calc(var(--u) * 16);
  background: var(--surf);
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.bzbuy.is-on {
  border-color: rgba(47, 163, 107, .4);
  background: rgba(47, 163, 107, .08);
  color: var(--pd-ok);
}

.bzsp {
  height: calc(var(--u) * 200);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 10);
}

.bzsp__c {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 6);
}

.bzsp__v,
.bzsp__m {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 12));
  white-space: nowrap;
}

.bzsp__c.is-now .bzsp__v {
  color: var(--acc);
}

.bzsp__s {
  width: 100%;
  border-radius: calc(var(--u) * 8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bzsp__s span {
  display: block;
}

.bzsp__p {
  background: var(--acc-a50);
}

.bzsp__r {
  background: #c98a12;
}

.bzsp__b {
  background: var(--bz-bar);
}

.bzsp__c.is-now .bzsp__p {
  background: var(--acc);
}

.bzsp__c.is-now .bzsp__b {
  background: var(--ink);
}

.bzlg {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 16);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzlg__i {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
}

.bzlg__i::before {
  content: "";
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 3);
}

.bzlg--plan::before {
  background: var(--ink);
}

.bzlg--promo::before {
  background: var(--acc);
}

.bzlg--rep::before {
  background: #c98a12;
}

.bzcol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.bzcap {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.bzcap__b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.bzcap__k {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzcap__v {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
}

.bzstep {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  flex-shrink: 0;
  border: 1px solid var(--up-ln2);
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 17));
}

.bzstep:disabled {
  opacity: .4;
  cursor: default;
}

.bzcap__bar {
  position: relative;
  height: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 6);
  background: var(--ms-tile);
  display: block;
}

.bzcap__f {
  border-radius: calc(var(--u) * 6);
}

.bzcap__tick {
  position: absolute;
  top: calc(var(--u) * -4);
  left: 80%;
  width: 2px;
  height: calc(var(--u) * 20);
  background: var(--mute);
}

.bzcap__s {
  font-size: max(12px, calc(var(--u) * 14));
}

.bzunits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.bzunit {
  padding: calc(var(--u) * 18) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.bzunit__k {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzunit__v {
  font-size: max(12px, calc(var(--u) * 30));
  font-weight: 300;
}

.bzunit__d {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

/* == 278. Dealer · Billing — plans comparison ========================== */
.bzplans__cy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzpl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

.bzpc {
  min-width: 0;
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.bzpc.is-cur {
  background: var(--up-plus);
  color: #fff;
}

.bzpc.is-pv {
  box-shadow: inset 0 0 0 2px var(--acc);
}

.bzpc__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 8);
}

.bzpc__n {
  font-size: max(12px, calc(var(--u) * 22));
}

.bzpc__tag {
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--acc-a10);
  color: var(--acc);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.bzpc__tag.is-cur {
  background: var(--acc);
  color: #fff;
}

.bzpc__p {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 6);
}

.bzpc__v {
  font-size: max(12px, calc(var(--u) * 44));
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}

.bzpc__u {
  font-size: max(12px, calc(var(--u) * 15));
  opacity: .7;
}

.bzpc__b {
  min-height: calc(var(--u) * 20);
  font-size: max(12px, calc(var(--u) * 14));
  opacity: .7;
}

.bzpc__f {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.bzpc__f li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.bzpc__f .is-no {
  opacity: .55;
}

.bzpc__m {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pd-ok);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 12));
}

.bzpc__f .is-no .bzpc__m {
  background: var(--up-ln2);
}

.bzpc.is-cur .is-no .bzpc__m {
  background: rgba(255, 255, 255, .2);
}

.bzpc__x {
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzpc__go {
  height: calc(var(--u) * 50);
  margin-top: auto;
  border-radius: calc(var(--u) * 25);
  font-size: max(12px, calc(var(--u) * 15));
}

.bzpc__go.is-cur {
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  cursor: default;
}

.bzpc__go.is-no {
  background: var(--ms-tile);
  color: var(--mute);
  cursor: default;
}

.bzpc__go.is-up {
  background: var(--acc);
  color: #fff;
}

.bzpc__go.is-down {
  background: var(--up-plus);
  color: #fff;
}

.bzpv {
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--up-plus);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.bzpv__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}

.bzpv__t {
  font-size: max(12px, calc(var(--u) * 16));
}

.bzpv__d {
  color: rgba(255, 255, 255, .7);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzpv__x {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: calc(var(--u) * 21);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
}

/* == 279. Dealer · Billing — next invoice and payment methods ========= */
.bzln {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.bzln__i {
  padding: calc(var(--u) * 8) 0;
  border-top: .5px solid var(--up-ln2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.bzln__i--tot {
  border-top: 1.5px solid var(--ink);
  font-size: max(12px, calc(var(--u) * 22));
}

.bzln__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.bzln__d {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzwh {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.bzwh__h {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzwh__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 130) calc(var(--u) * 70) calc(var(--u) * 80);
  align-items: center;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 15));
}

.bzwh__c {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bzwh__b {
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzwh__v,
.bzwh__l {
  text-align: right;
}

.bzpm {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.bzpm__i {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

/* card-brand badges keep their brand colours in both themes */
.bzpm__br {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 38);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 12));
  letter-spacing: calc(var(--u) * 0.72);
}

.bzbrand--visa {
  background: #1a1f71;
}

.bzbrand--amex {
  background: #2e77bb;
}

.bzbrand--ach {
  background: #2b2f36;
}

.bzbrand--mc {
  background: #eb5a28;
}

.bzpm__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.bzpm__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.bzpm__d {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzpm__rm {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 18);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzpm__rm:hover {
  color: var(--acc);
}

.bzadd {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 16);
  border: 1px dashed var(--up-ln2);
  border-radius: calc(var(--u) * 21);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzadd:disabled {
  color: var(--pd-ok);
  cursor: default;
}

.bzauto {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.bzauto__b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.bzauto__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.bzauto__d {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzsw {
  position: relative;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 26);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 13);
  background: var(--up-ln2);
  transition: background .2s;
}

.bzsw.is-on {
  background: var(--acc);
}

.bzsw__k {
  position: absolute;
  top: calc(var(--u) * 3);
  left: calc(var(--u) * 3);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: var(--surf);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: left .2s;
}

.bzsw.is-on .bzsw__k {
  left: calc(var(--u) * 21);
}

/* == 280. Dealer · Billing — invoices, details, tablet and phone ====== */
.bzif {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.bzif .bzseg__b {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
}

.bzsearch {
  flex: 1;
  max-width: calc(var(--u) * 320);
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.bzsearch__i {
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 15);
  flex-shrink: 0;
  fill: none;
  stroke: var(--mute);
  stroke-width: 1.6;
}

.bzsearch__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzit {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.bzit__h,
.bzit__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 140) calc(var(--u) * 120) calc(var(--u) * 110) calc(var(--u) * 130);
  align-items: center;
  gap: calc(var(--u) * 12);
}

.bzit__h {
  padding: 0 calc(var(--u) * 6);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzit__r {
  padding: calc(var(--u) * 12) calc(var(--u) * 6);
  border-top: .5px solid var(--up-ln2);
  font-size: max(12px, calc(var(--u) * 15));
}

.bzit__a {
  text-align: right;
}

.bzit__n {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.bzit__d {
  overflow: hidden;
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bzit__dt {
  color: var(--body);
}

.bzit__go {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  justify-self: end;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.bzit__go.is-fail {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.bzit__go.is-done {
  color: var(--pd-ok);
}

.bzit__empty {
  padding: calc(var(--u) * 28);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 15));
  text-align: center;
}

.bzdet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.bzdet__f {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.bzdet__k,
.bzdet__h {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.bzdet__in {
  width: 100%;
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  outline: 0;
}

.bzdet__in:focus {
  border-color: var(--acc);
}

.bzdet__s {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.bzdet__h {
  flex: 1;
}

@media (max-width: 1599px) {
  .bzrow,
  .bzrow--plan,
  .bzrow--spend,
  .bzrow--inv {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1023px) {
  .bzpl {
    grid-template-columns: minmax(0, 1fr);
  }

  .bzit__h {
    display: none;
  }

  .bzit__r {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }

  .bzit__n {
    grid-column: 1 / -1;
  }

  .bzit__dt {
    grid-column: 1;
  }

  .bzit__go {
    grid-column: 2;
    grid-row: 3;
  }
}

@media (max-width: 767px) {
  .bz {
    --u: .8px;
  }

  .bzcard {
    padding: 16px 14px;
  }

  .bzal {
    padding: 14px;
    flex-wrap: wrap;
  }

  .bzal__b {
    flex-basis: calc(100% - 46px);
  }

  .bzal .bzbtn {
    flex: 1;
  }

  .bzplan {
    flex-direction: column;
    gap: 10px;
  }

  .bzplan__since {
    flex-direction: row;
    gap: 6px;
  }

  .bzacts .bzbtn {
    flex: 1;
  }

  .bzuse__f {
    flex-wrap: wrap;
  }

  .bzsp {
    gap: 4px;
  }

  .bzsp__v {
    display: none;
  }

  .bzunits {
    grid-template-columns: minmax(0, 1fr);
  }

  .bzpv {
    flex-wrap: wrap;
  }

  .bzpv__b {
    flex-basis: 100%;
  }

  .bzwh__r {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 2px;
  }

  .bzwh__b {
    grid-column: 1;
  }

  .bzwh__v {
    grid-column: 2;
    grid-row: 1;
  }

  .bzpm__i {
    flex-wrap: wrap;
  }

  .bzpm__b {
    flex-basis: calc(100% - 72px);
  }

  .bzif .bzseg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bzsearch {
    flex-basis: 100%;
    max-width: none;
  }

  .bzdet {
    grid-template-columns: minmax(0, 1fr);
  }

  .bzdet__s {
    flex-wrap: wrap;
  }

  .bzdet__h {
    flex-basis: 100%;
  }
}

/* == 281. Dealer · Settings — search, unsaved bar, shared rows ======== */
.sz {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
  font-weight: 400;
  line-height: normal;
}

.sz p {
  margin: 0;
}

.szlog,
.szsess {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sz .szv--ok {
  color: var(--pd-ok);
}

.sz .szv--amber {
  color: var(--gr-amber);
}

.sz .szv--acc {
  color: var(--acc);
}

.sz .szv--mute {
  color: var(--mute);
}

.szc--ok {
  background: var(--pd-ok);
}

.szc--amber {
  background: var(--gr-amber);
}

.szc--acc {
  background: var(--acc);
}

/* section colours: index icons, jump dots, card tiles */
.szic--notif {
  background: var(--acc);
}

.szic--auto {
  background: var(--ml-blue);
}

.szic--listing {
  background: var(--pd-ok);
}

.szic--integ {
  background: var(--db-purple);
}

.szic--sec {
  background: #2b2f36;
}

.szic--region {
  background: var(--gr-amber);
}

.szic--data {
  background: #5f6671;
}

.szmono {
  font-family: ui-monospace, Menlo, monospace;
  font-size: max(12px, calc(var(--u) * 14));
}

.szq {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 12);
}

.szsearch {
  flex: 1;
  min-width: calc(var(--u) * 360);
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 30);
  background: var(--surf);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.szsearch__i {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  flex-shrink: 0;
  fill: none;
  stroke: var(--mute);
  stroke-width: 1.6;
}

.szsearch__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 16));
}

.szsearch__n {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.szjump {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.szjump__a {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 14);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 14));
  text-decoration: none;
  white-space: nowrap;
}

.szjump__a:hover {
  color: var(--acc);
}

.szdot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
}

.szbar {
  position: sticky;
  top: 16px;
  z-index: 5;
  padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26);
  background: var(--up-plus);
  box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 40) rgba(17, 20, 24, .2);
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.szbar__dot {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  flex-shrink: 0;
  border-radius: 50%;
  background: #c98a12;
}

.szbar__t {
  font-size: max(12px, calc(var(--u) * 15));
  white-space: nowrap;
}

.szbar__l {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.szbar__c {
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.szbar__x,
.szbar__go {
  border-radius: calc(var(--u) * 21);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.szbar__x {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid rgba(255, 255, 255, .25);
}

.szbar__go {
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 18);
  background: var(--acc);
}

.szsaved {
  padding: calc(var(--u) * 12) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: rgba(47, 163, 107, .1);
  color: var(--sd-drop);
  font-size: max(12px, calc(var(--u) * 15));
}

.szbtn {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.szbtn:hover:not(:disabled) {
  border-color: var(--acc);
}

.szbtn:disabled {
  color: var(--pd-ok);
  cursor: default;
}

.szbtn--mute {
  color: var(--body);
}

.szbtn--34 {
  height: calc(var(--u) * 34);
}

.szbtn--dash {
  border-style: dashed;
}

.szbtn--danger {
  border-color: var(--acc-a40);
  color: var(--acc);
}

.szpill {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.szwarn {
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 14);
  background: var(--acc-a10);
  color: var(--acc);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.szrow {
  width: 100%;
  padding: calc(var(--u) * 12) 0;
  border-top: .5px solid var(--up-ln2);
  color: var(--ink);
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.szrow__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.szrow__t {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 16));
}

.szrow__d {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.szrec {
  height: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 14);
  background: rgba(47, 163, 107, .12);
  color: var(--pd-ok);
  display: flex;
  align-items: center;
  font-size: max(12px, calc(var(--u) * 12));
  white-space: nowrap;
}

.szchgdot {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  flex-shrink: 0;
  border-radius: 50%;
  background: #c98a12;
}

.szseg {
  flex-shrink: 0;
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 22);
  background: var(--bg);
  display: flex;
  gap: calc(var(--u) * 3);
}

.szseg__b {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.szseg__b.is-on {
  background: var(--ink);
  color: var(--surf);
}

.szseg__b.is-chg {
  box-shadow: 0 0 0 2px #c98a12;
}

.szstep {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  flex-shrink: 0;
  border: 1px solid var(--up-ln2);
  border-radius: 50%;
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 17));
}

.szstep:disabled {
  opacity: .4;
  cursor: default;
}

.szstep__v {
  min-width: calc(var(--u) * 90);
  font-size: max(12px, calc(var(--u) * 17));
  text-align: center;
}

.szstep__v.is-chg {
  color: var(--gr-amber);
}

.szsw {
  position: relative;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 28);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 14);
  background: var(--up-ln2);
  transition: background .2s;
}

.szsw.is-on {
  background: var(--acc);
}

.szsw__k {
  position: absolute;
  top: calc(var(--u) * 3);
  left: calc(var(--u) * 3);
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  border-radius: 50%;
  background: var(--surf);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: left .2s;
}

.szsw.is-on .szsw__k {
  left: calc(var(--u) * 21);
}

/* == 282. Dealer · Settings — left column ============================== */
.szlay {
  display: grid;
  grid-template-columns: calc(var(--u) * 300) minmax(0, 1fr);
  align-items: start;
  gap: calc(var(--u) * 20);
}

.szside {
  position: sticky;
  top: 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}

.szidx {
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.szidx__a {
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 16);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  text-decoration: none;
}

.szidx__a:hover {
  background: var(--acc-a06);
}

.szidx__a.is-dim {
  opacity: .4;
}

.szidx__i,
.szcard__i {
  flex-shrink: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.szidx__i {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  border-radius: calc(var(--u) * 9);
  font-size: max(12px, calc(var(--u) * 14));
}

.szidx__t {
  flex: 1;
  overflow: hidden;
  font-size: max(12px, calc(var(--u) * 15));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.szidx__dot {
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  flex-shrink: 0;
  border-radius: 50%;
}

.szidx__dot--amber {
  background: #c98a12;
}

.szidx__dot--acc {
  background: var(--acc);
}

.szbox {
  padding: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 28);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.szbox__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 10);
  font-size: max(12px, calc(var(--u) * 14));
}

.szbox__t {
  font-size: max(12px, calc(var(--u) * 18));
}

.szbar8 {
  height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4);
  background: var(--ms-tile);
  display: block;
  overflow: hidden;
}

.szbar8__f {
  width: 0;
  height: 100%;
  display: block;
  transition: width .3s;
}

.szck {
  padding: calc(var(--u) * 6) calc(var(--u) * 4);
  color: var(--ink);
  text-align: left;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.szck:disabled {
  cursor: default;
}

.szck__m {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  flex-shrink: 0;
  border: 1.5px solid var(--up-ln2);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 12));
}

.szck.is-done .szck__m {
  border: 0;
  background: var(--pd-ok);
}

.szck__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 14));
}

.szck.is-done .szck__t {
  color: var(--mute);
  text-decoration: line-through;
}

.szck__fix {
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 14));
}

.szpre {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border: 1.5px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 3);
}

.szpre.is-on {
  border-color: rgba(47, 163, 107, .45);
  background: rgba(47, 163, 107, .05);
}

.szpre__h {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 15));
}

.szpre__s {
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 14));
}

.szpre.is-on .szpre__s {
  color: var(--pd-ok);
}

.szpre__d {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.szlog {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.szlog__i {
  display: grid;
  grid-template-columns: calc(var(--u) * 28) minmax(0, 1fr);
  align-items: start;
  gap: calc(var(--u) * 10);
}

.szlog__av,
.szlog__you {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  border-radius: 50%;
}

.szlog__av {
  display: block;
  object-fit: cover;
}

.szlog__you {
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 12));
}

.szlog__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}

.szlog__t {
  font-size: max(12px, calc(var(--u) * 14));
}

.szlog__w {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 12));
}

/* == 283. Dealer · Settings — cards ==================================== */
.szmain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.szgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: calc(var(--u) * 16);
}

.szcard {
  min-width: 0;
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 32);
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  scroll-margin-top: 90px;
}

.szcard__h {
  padding-bottom: calc(var(--u) * 6);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.szcard__i {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 13);
  font-size: max(12px, calc(var(--u) * 15));
}

.szcard__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.szcard__t {
  font-size: max(12px, calc(var(--u) * 22));
  font-weight: 300;
}

.szcard__d {
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.szmx {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.szmx__h,
.szmx__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, calc(var(--u) * 72));
  align-items: center;
  gap: calc(var(--u) * 8);
}

.szmx__h {
  padding-bottom: calc(var(--u) * 6);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.szmx__c {
  text-align: center;
}

.szmx__r {
  padding: calc(var(--u) * 10) 0;
  border-top: .5px solid var(--up-ln2);
}

.szmx__e {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}

.szmx__e .szrow__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.szcell {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 15);
  background: var(--ms-tile);
  color: var(--mute);
  justify-self: center;
  font-size: max(12px, calc(var(--u) * 15));
}

.szcell.is-on {
  background: rgba(47, 163, 107, .14);
  color: var(--pd-ok);
}

.szcell.is-chg {
  box-shadow: inset 0 0 0 2px #c98a12;
}

.szar {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
}

.szar__ta {
  width: 100%;
  min-height: calc(var(--u) * 84);
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--bg);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.5;
  outline: 0;
  resize: vertical;
}

.szar__ta:focus,
.szdz__in:focus {
  border-color: var(--acc);
}

.szints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 10);
}

.szint {
  min-width: 0;
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.szint.is-err {
  box-shadow: inset 0 0 0 1.5px var(--acc-a40);
}

.szint__i {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  flex-shrink: 0;
  border-radius: calc(var(--u) * 14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.szint--0 {
  background: #2b2f36;
}

.szint--1 {
  background: var(--ml-blue);
}

.szint--2 {
  background: var(--db-purple);
}

.szint--3 {
  background: var(--body);
}

.szint--4 {
  background: var(--pd-ok);
}

.szint--5 {
  background: var(--gr-amber);
}

.szint__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.szint__n {
  font-size: max(12px, calc(var(--u) * 15));
}

.szint__s {
  overflow: hidden;
  color: var(--body);
  font-size: max(12px, calc(var(--u) * 14));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.szint__go {
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border: 1px solid var(--up-ln2);
  border-radius: calc(var(--u) * 18);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.szint__go.is-acc {
  border: 0;
  background: var(--acc);
  color: #fff;
}

.szfeed {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(var(--u) * 10);
}

.szfeed__i {
  min-width: 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
  font-size: max(12px, calc(var(--u) * 14));
}

.szfeed__u {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.szfeed__a {
  display: flex;
  gap: calc(var(--u) * 6);
}

.szfa {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18);
  background: var(--acc-a06);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.szfa.is-ok {
  background: rgba(47, 163, 107, .08);
}

.szfa__m {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 14));
}

.szfa.is-ok .szfa__m {
  background: var(--pd-ok);
}

.szfa__t {
  flex: 1;
  font-size: max(12px, calc(var(--u) * 15));
}

.szsub {
  padding-top: calc(var(--u) * 6);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.szsess {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.szsess__i {
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.szsess__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}

.szsess__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.szips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
}

.szip {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  white-space: nowrap;
}

.szip__x {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  border-radius: 50%;
  background: var(--surf);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 14));
}

.szip__x:hover {
  color: var(--acc);
}

.szexp {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.szexp .szrow__t,
.szdz .szrow__t {
  font-size: max(12px, calc(var(--u) * 15));
}

.szexp .szbtn,
.szdz .szbtn {
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
}

.szdz {
  margin-top: calc(var(--u) * 6);
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--acc-a04);
  box-shadow: inset 0 0 0 1px var(--acc-a25);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}

.szdz__t {
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 15));
}

.szdz__r,
.szdz__c {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.szdz__c {
  gap: calc(var(--u) * 10);
}

.szdz__l {
  flex: 1;
  min-width: 0;
  display: flex;
}

.szdz__in {
  width: 100%;
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--acc-a35);
  border-radius: calc(var(--u) * 22);
  background: var(--surf);
  color: var(--ink);
  font-size: max(12px, calc(var(--u) * 15));
  outline: 0;
}

.szdz__go {
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22);
  background: var(--acc);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 14));
  white-space: nowrap;
}

.szdz__go:disabled {
  background: var(--up-ln2);
  cursor: default;
}

.szdz__done {
  color: var(--acc);
  font-size: max(12px, calc(var(--u) * 14));
}

.szempty {
  padding: calc(var(--u) * 40);
  color: var(--mute);
  font-size: max(12px, calc(var(--u) * 16));
  text-align: center;
}

/* == 284. Dealer · Settings — tablet and phone ========================= */
@media (max-width: 1999px) {
  .szgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1279px) {
  .szlay {
    grid-template-columns: minmax(0, 1fr);
  }

  .szside {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .sz {
    --u: .8px;
  }

  .szsearch {
    min-width: 0;
    flex-basis: 100%;
    padding: 0 16px;
  }

  .szsearch__n {
    display: none;
  }

  .szjump {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .szbar {
    top: 8px;
    padding: 10px 12px;
    flex-wrap: wrap;
  }

  .szbar__l {
    display: none;
  }

  .szbar__t {
    flex: 1;
    min-width: 0;
    white-space: normal;
  }

  .szbar {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .szbar__x,
  .szbar__go {
    padding: 0 12px;
  }

  .szside {
    grid-template-columns: minmax(0, 1fr);
  }

  .szcard,
  .szbox {
    padding: 16px 14px;
  }

  .szcard__h {
    flex-wrap: wrap;
  }

  .szcard__b {
    flex-basis: calc(100% - 54px);
  }

  .szrow {
    flex-wrap: wrap;
  }

  .szrow--tg {
    flex-wrap: nowrap;
  }

  .szseg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .szrow .szrow__b {
    flex-basis: 100%;
  }

  .szrow--tg .szrow__b,
  .szexp .szrow__b,
  .szdz .szrow__b {
    flex-basis: auto;
  }

  .szrow .szstep:first-of-type {
    margin-left: auto;
  }

  .szmx__h,
  .szmx__r {
    grid-template-columns: minmax(0, 1fr) repeat(4, 46px);
    gap: 4px;
  }

  .szcell {
    width: 40px;
  }

  .szints,
  .szfeed {
    grid-template-columns: minmax(0, 1fr);
  }

  .szsess__i {
    flex-wrap: wrap;
  }

  .szexp,
  .szdz__r,
  .szdz__c {
    flex-wrap: wrap;
  }

  .szdz__l {
    flex-basis: 100%;
  }
}