/* Dealers: the Dealer Partner programme, and the dealer desk preview. The page opens on what a dealer already holds
   (the archive, as a typeset list with its earnings), then who Maranello Data is through the cars a dealer sells (an
   advert carrying the badge), what it does, what a partner gets, and the price with the three rules. Every section is one screen tall on desktop; phones flow. The desk
   (dk-*) follows the Your records dashboard. md-dealers.js runs the reveals and the copy buttons. */

.md-dealers .md-h2 em, .dl-title em { color: var(--burgundy); }
.dl-open, .dl-what, .dl-does, .dl-get, .dl-cost {
  min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(24px, 6svh, 88px);
}
.dl-actions { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; margin-top: clamp(22px, 3.6svh, 40px); }

/* 1. The opening: the promise, beside an advert with the badge. */
.dl-open-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(36px, 6vw, 112px); align-items: center; }
.dl-title { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.7rem, min(1.2rem + 3.9vw, 9svh), 5.6rem); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
.dl-title em { display: block; }
.dl-lead { max-width: 44ch; margin-top: clamp(16px, 2.8svh, 30px); }
.dl-open-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: clamp(18px, 3svh, 30px); padding-top: clamp(14px, 2.4svh, 20px); border-top: 1px solid var(--ink); font-size: 1.125rem; color: var(--ink-2); }
.dl-open-price strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 1.5rem + 0.9vw, 2.4rem); line-height: 1; color: var(--burgundy); }
.dl-open-price span { flex-basis: 100%; color: var(--ink-3); font-size: 1rem; }

.dl-ad { display: grid; gap: 12px; margin: 0; }
.dl-ad-card {
  display: grid; gap: clamp(8px, 1.4svh, 14px); padding: clamp(16px, 2.8svh, 30px) clamp(20px, 2.4vw, 34px) clamp(18px, 3svh, 30px);
  background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 1px 1px rgba(45, 32, 12, 0.08), 0 44px 70px -44px rgba(45, 32, 12, 0.6);
}
.dl-ad-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.dl-ad-dealer { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink-2); }
.dl-ad-top .md-mono { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--ink-3); }
.dl-ad-car { display: flex; justify-content: center; }
.dl-ad-car img { width: auto; max-width: 100%; height: clamp(70px, 15svh, 160px); object-fit: contain; }
.dl-ad-title { font-family: var(--serif); font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.9rem); line-height: 1.1; }
.dl-ad-title span { color: var(--ink-3); }
.dl-badge { display: grid; gap: 10px; margin-top: clamp(4px, 1svh, 10px); padding-top: clamp(12px, 2svh, 18px); border-top: 1px solid var(--ink); }
.dl-badge-seal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.dl-badge-mark { width: 12px; height: 12px; border-radius: 2px; background: var(--burgundy); }
.dl-badge-name { font-weight: 600; font-size: 1rem; }
.dl-badge-by { margin-left: auto; font-size: 0.75rem; letter-spacing: 0.14em; color: var(--ink-3); }
.dl-badge-line { font-family: var(--serif); font-size: clamp(1.15rem, 1.02rem + 0.4vw, 1.4rem); line-height: 1.3; }
.dl-badge-years .md-years-field { height: clamp(22px, 3.2svh, 34px); margin-top: 0; }
.dl-ad .md-year.is-gap { background: rgba(94, 1, 9, 0.1); }
.dl-badge-link { justify-self: start; color: var(--ink); font-size: 0.9375rem; font-weight: 600; text-underline-offset: 4px; }
.dl-ad figcaption, .dl-ledger figcaption { color: var(--ink-3); font-size: 0.875rem; line-height: 1.45; }

/* 2. What it does for you: four results, each under its own ink rule with its number. */
.dl-does { background: var(--paper); border-block: 1px solid var(--rule); }
.dl-does-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 6svh, 64px) clamp(24px, 3vw, 56px); margin-top: clamp(32px, 6svh, 72px); }
.dl-does-item { position: relative; padding-top: clamp(16px, 2.6svh, 24px); }
.dl-does-item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: left; }
.dl-does-item::after { content: attr(data-n); position: absolute; right: 0; top: clamp(18px, 2.8svh, 26px); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.dl-does-item h3 { padding-right: 2.4rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 1.15rem + 1.1vw, 2.3rem); line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance; }
.dl-does-item p { max-width: 30ch; margin-top: clamp(10px, 1.8svh, 16px); color: var(--ink-2); font-size: 1.125rem; line-height: 1.55; }
.md-js .dl-does-item::before { scale: 0 1; transition: scale 1200ms var(--ease-out); transition-delay: calc(var(--i) * 140ms); }
.md-js .dl-does.is-in .dl-does-item::before { scale: 1 1; }

/* 3 and 4. What you get: a list beside a picture of it. */
.dl-get-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(36px, 6vw, 112px); align-items: center; }
.dl-price-mail { margin-top: 14px; color: var(--ink-3); font-size: 1rem; }
.dl-price-mail a { color: var(--ink); text-underline-offset: 3px; }

.dk-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--rule-strong); border-radius: 999px; font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink); }

/* What you get: the parts as on the homepage's Chassis File (a square that fills burgundy, the current one's line shown
   beneath), beside one paper card that shows the part chosen. A hairline under the current part fills while it waits. */
.dl-get-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.dl-get-copy .md-h2 { margin-top: 10px; }
.dl-parts { margin-top: clamp(20px, 3.6svh, 40px); border-top: 1px solid var(--ink); }
.dl-parts li { border-bottom: 1px solid var(--rule); }
.dl-part {
  position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr); grid-template-rows: auto 0fr; column-gap: 14px; width: 100%;
  padding: clamp(10px, 1.7svh, 15px) 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: grid-template-rows 360ms var(--ease-out);
}
.dl-part::before { content: ""; grid-row: 1; align-self: center; width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--rule-strong); transition: background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.dl-part-name { font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem); line-height: 1.2; color: var(--ink-2); transition: color 240ms var(--ease-out); }
.dl-part-what { grid-column: 2; min-height: 0; overflow: hidden; }
.dl-part-what span { display: block; padding-top: 4px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.dl-part:hover .dl-part-name { color: var(--ink); }
.dl-part.is-current { grid-template-rows: auto 1fr; }
.dl-part.is-current::before { background: var(--burgundy); box-shadow: none; }
.dl-part.is-current .dl-part-name { color: var(--ink); }
.dl-part::after { content: ""; position: absolute; left: 24px; right: 0; bottom: -1px; height: 1px; background: var(--burgundy); transform-origin: left; scale: 0 1; }
.dl-parts.is-playing .dl-part.is-current::after { animation: dl-wait var(--wait, 5200ms) linear forwards; }
@keyframes dl-wait { to { scale: 1 1; } }
.dl-part:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.dl-desk-link { margin-top: clamp(20px, 3.4svh, 34px); }
html:not(.md-js) .dl-part { grid-template-rows: auto 1fr; }

.dl-scenes { display: grid; }
.dl-scene {
  grid-area: 1 / 1; display: grid; align-content: start; gap: clamp(12px, 2svh, 20px); margin: 0; padding: clamp(22px, 3.6svh, 40px) clamp(22px, 2.6vw, 40px);
  background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 1px 1px rgba(45, 32, 12, 0.08), 0 44px 70px -44px rgba(45, 32, 12, 0.6);
  opacity: 0; visibility: hidden; translate: 0 10px; transition: opacity 320ms ease-in, translate 320ms ease-in, visibility 0s linear 320ms;
}
.dl-scene.is-on { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 600ms var(--ease-out) 120ms, translate 800ms var(--ease-out) 120ms, visibility 0s; }
html:not(.md-js) .dl-scene:not(.is-on) { display: none; }
.dl-scene-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.dl-scene-head .mr-redact { vertical-align: middle; }
.dl-scene-car { display: flex; justify-content: center; }
.dl-scene-car img { width: auto; max-width: 100%; height: clamp(80px, 15svh, 160px); object-fit: contain; }
.dl-scene-title { font-family: var(--serif); font-size: clamp(1.5rem, 1.25rem + 0.7vw, 2rem); line-height: 1.1; }
.dl-scene-years .md-years-field { height: clamp(26px, 3.8svh, 40px); margin-top: 0; }
.dl-scene .md-year.is-gap { background: rgba(94, 1, 9, 0.1); }
.dl-scene-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.dl-scene-facts div + div { padding-left: 14px; border-left: 1px solid var(--rule); }
.dl-scene-facts dt { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.dl-scene-facts dd { margin: 4px 0 0; font-size: 1.0625rem; }
.dl-scene-big { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.8rem); line-height: 1.05; letter-spacing: -0.015em; }
.dl-scene-big .dl-badge-mark { width: 16px; height: 16px; border-radius: 3px; background: var(--burgundy); }
.dl-scene-line { font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem); line-height: 1.35; }
.dl-scene-note { color: var(--ink-3); font-size: 1rem; line-height: 1.5; }
.dl-scene-history li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 16px; padding: clamp(12px, 2svh, 18px) 0 clamp(12px, 2svh, 18px) 20px; position: relative; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem); line-height: 1.25; }
.dl-scene-history li::before { content: ""; position: absolute; left: 0; top: calc(clamp(12px, 2svh, 18px) + 0.45em); width: 9px; height: 9px; border-radius: 2px; background: var(--ink); }
.dl-scene-history li > span:first-child { font-size: 1rem; color: var(--ink-3); }
.dl-scene-history li.is-more { font-family: var(--sans); font-size: 1rem; font-style: italic; color: var(--ink-3); }
.dl-scene-history li.is-more::before { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.dl-scene-history li.is-yours { margin-inline: -14px; padding-inline: 34px 14px; background: rgba(94, 1, 9, 0.06); color: var(--burgundy); border-bottom: 0; }
.dl-scene-history li.is-yours::before { left: 14px; background: var(--burgundy); }
.dl-scene-steps { display: grid; gap: 0; }
.dl-scene-steps li { display: grid; gap: 4px; padding: clamp(14px, 2.4svh, 22px) 0 clamp(14px, 2.4svh, 22px) 22px; position: relative; border-left: 1px solid var(--rule-strong); }
.dl-scene-steps li::before { content: ""; position: absolute; left: -5px; top: calc(clamp(14px, 2.4svh, 22px) + 0.4em); width: 9px; height: 9px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.dl-scene-steps .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.dl-scene-steps strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.25rem + 0.7vw, 2rem); line-height: 1.1; color: var(--ink-3); }
.dl-scene-steps li.is-now strong { color: var(--ink); }
.dl-scene-steps li.is-now::before { background: var(--burgundy); box-shadow: none; }
.dl-scene-steps small { color: var(--ink-2); font-size: 1rem; }
.dl-scene-notice { display: grid; gap: 8px; padding: 16px 18px; border-left: 3px solid var(--burgundy); background: rgba(94, 1, 9, 0.05); font-size: 1.125rem; line-height: 1.5; }
.dl-scene-notice-top { display: flex; justify-content: space-between; gap: 12px; font-family: var(--serif); font-size: 1.25rem; }
.dl-scene-flag { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: var(--burgundy); white-space: nowrap; }
.dl-scene-cars { border-top: 1px solid var(--ink); }
.dl-scene-cars li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: 1.15rem; }
.dl-scene-cars small { margin-left: 6px; font-family: var(--sans); font-size: 0.875rem; color: var(--ink-3); }
.dl-scene-cars .md-mono { font-size: 0.75rem; color: var(--ink-3); }
.dl-scene-code { font-family: var(--mono); font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); letter-spacing: 0.16em; color: var(--burgundy); }

/* 1. The archive, as a typeset list: the list a dealer sends, the wanted and accepted lines marked. */
.dl-steps { margin-top: clamp(20px, 3.6svh, 40px); border-top: 1px solid var(--ink); }
.dl-steps li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 12px; padding: clamp(12px, 2svh, 18px) 0; border-bottom: 1px solid var(--rule-strong); }
.dl-step-n { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.1; color: var(--burgundy); }
.dl-steps h3 { font-size: 1.125rem; font-weight: 600; }
.dl-steps p { margin-top: 3px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.dl-ledger { display: grid; gap: 12px; margin: 0; }
.dl-ledger-card { padding: clamp(18px, 3svh, 32px) clamp(20px, 2.4vw, 34px) clamp(14px, 2.4svh, 24px); background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 1px 1px rgba(45, 32, 12, 0.08), 0 40px 64px -42px rgba(45, 32, 12, 0.55); }
.dl-ledger-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.dl-ledger-title { font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem); }
.dl-ledger-head .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.dl-ledger table { width: 100%; border-collapse: collapse; }
.dl-ledger th { padding: 10px 0 6px; font-family: var(--mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; text-align: left; color: var(--ink-3); }
.dl-ledger td { padding: clamp(7px, 1.25svh, 11px) 12px clamp(7px, 1.25svh, 11px) 0; border-top: 1px solid var(--rule); vertical-align: baseline; }
.dl-ledger-year { width: 4.2rem; font-family: var(--mono); font-size: 0.9375rem; letter-spacing: 0.04em; color: var(--ink-2); }
.dl-ledger-car { font-family: var(--serif); font-size: 1.0625rem; }
.dl-ledger-kind { margin-left: 8px; color: var(--ink-3); font-size: 0.8125rem; }
.dl-ledger-sn { vertical-align: middle; }
.dl-ledger-short, .dl-pager, .dl-scene-part { display: none; }
.dl-ledger-state { padding-right: 0; text-align: right; white-space: nowrap; }
.dl-ledger-state > span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.875rem; font-weight: 500; }
.dl-ledger tr.is-paid .dl-ledger-state > span::before { content: ""; width: 8px; height: 8px; border-radius: 1.5px; background: var(--ink); }
.dl-ledger tr.is-paid .dl-ledger-state > span { color: var(--ink); }
.dl-ledger tr.is-wanted td { background: rgba(94, 1, 9, 0.06); border-top-color: rgba(94, 1, 9, 0.25); }
.dl-ledger tr.is-wanted td:first-child { box-shadow: inset 3px 0 0 var(--burgundy); padding-left: 10px; }
.dl-ledger tr.is-wanted + tr td { border-top-color: rgba(94, 1, 9, 0.25); }
.dl-ledger tr.is-wanted .dl-ledger-state > span { color: var(--burgundy); }
.dl-ledger tr.is-wanted .dl-ledger-state > span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--burgundy); animation: dl-pulse 2.4s var(--ease-out) infinite; }
@keyframes dl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(94, 1, 9, 0.35); } 50% { box-shadow: 0 0 0 5px rgba(94, 1, 9, 0); } }
.md-js .dl-open tbody tr { transition: opacity 600ms var(--ease-out), translate 700ms var(--ease-out); transition-delay: calc(250ms + var(--i) * 110ms); }
.md-js .dl-open:not(.is-in) tbody tr { opacity: 0; translate: 0 6px; }
.md-js .dl-open .dl-ledger-state > span { transition: opacity 500ms var(--ease-out); transition-delay: calc(1200ms + var(--i) * 180ms); }
.md-js .dl-open:not(.is-in) .dl-ledger-state > span { opacity: 0; }
/* The total, under the list: what the paper earned. */
.dl-ledger-total { display: flex; align-items: flex-end; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink); }
.dl-ledger-amount { font-family: var(--serif); font-size: clamp(2.8rem, min(1.8rem + 2.6vw, 8svh), 4.4rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--burgundy); font-variant-numeric: tabular-nums; }
.dl-ledger-total > span:last-child { display: grid; gap: 2px; padding-bottom: 4px; font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; }
.dl-ledger-total small { font-family: var(--sans); font-size: 0.9375rem; color: var(--ink-3); }

/* 2. Who Maranello Data is, through the cars a dealer sells. */
.dl-what { background: var(--paper); border-block: 1px solid var(--rule); }
.dl-what-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(36px, 6vw, 112px); align-items: center; }
.dl-what-copy .md-h2 { margin-top: 10px; }
.dl-what-copy .md-h2 em { display: block; }
.dl-what-lead { max-width: 40ch; margin-top: clamp(16px, 2.8svh, 28px); font-family: var(--serif); font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.75rem); line-height: 1.3; }
.dl-what-text { max-width: 48ch; margin-top: 14px; color: var(--ink-2); font-size: 1.125rem; line-height: 1.6; }
.dl-sign { margin-top: clamp(18px, 3svh, 30px); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--ink-3); }
.dl-sign span { white-space: nowrap; }
.dl-what .dl-ad-card { background: var(--sand); }

/* 6. What it costs, beside the three rules. */
.dl-cost-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 112px); align-items: center; }
.dl-price { padding: clamp(24px, 4svh, 44px) clamp(24px, 2.8vw, 44px); background: var(--paper); border-top: 3px solid var(--burgundy); box-shadow: 0 1px 1px rgba(45, 32, 12, 0.08), 0 40px 64px -42px rgba(45, 32, 12, 0.55); }
.dl-price-name { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem); line-height: 1.05; }
.dl-price-amount { display: flex; align-items: flex-end; gap: 14px; margin-top: clamp(14px, 2.4svh, 24px); }
.dl-price-figure { font-family: var(--serif); font-size: clamp(4rem, min(2.4rem + 4.4vw, 13svh), 7rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--burgundy); }
.dl-price-per { display: grid; padding-bottom: 6px; font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; }
.dl-price-per small { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.dl-founding { display: grid; gap: 6px; margin-top: clamp(18px, 3svh, 30px); padding-top: 16px; border-top: 1px solid var(--rule-strong); color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; }
.dl-founding .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--burgundy); }
.dl-rules .md-h2 em { display: block; }
.dl-rules-list { counter-reset: rule; margin-top: clamp(20px, 3.6svh, 40px); border-top: 1px solid var(--ink); }
.dl-rules-list li { counter-increment: rule; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 14px; padding: clamp(14px, 2.6svh, 24px) 0; border-bottom: 1px solid var(--rule-strong); }
.dl-rules-list li::before { content: counter(rule); grid-row: 1 / span 2; font-family: var(--serif); font-style: italic; font-size: 2rem; line-height: 1; color: var(--burgundy); }
.dl-rules-list h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.15rem + 0.5vw, 1.7rem); line-height: 1.12; }
.dl-rules-list p { margin-top: 6px; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.55; }

/* Short laptop screens: the same sections, a little tighter. */
@media (min-width: 961px) and (max-height: 800px) {
  .dl-does-item p { font-size: 1.0625rem; }
  .dl-rules-list p { font-size: 1rem; }
  .dl-ledger td { padding-block: 5px; }
  .dl-ledger-card { padding-block: 16px 14px; }
  .dl-steps li { padding-block: 10px; }
}

/* Phones and tablets: one column, the picture after the words. */
@media (max-width: 960px) {
  .dl-open-grid, .dl-what-grid, .dl-get-grid, .dl-cost-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5svh, 48px); }
  .dl-ad, .dl-scenes, .dl-ledger { max-width: 620px; }
  .dl-does-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones and tablets: "What you get" is one card with its part named at the top, and under it the seven parts as
   squares to choose from, with previous and next. A swipe across the card moves too. Without script the list stays. */
@media (max-width: 960px) {
  .md-js .dl-get-grid { grid-template-columns: minmax(0, 512px) 96px; justify-content: start; grid-template-areas: "kicker kicker" "title title" "scenes scenes" "parts pager" "desk desk"; column-gap: 12px; row-gap: 0; align-items: center; }
  .md-js .dl-get-copy { display: contents; }
  .md-js .dl-get-copy > .md-kicker { grid-area: kicker; }
  .md-js .dl-get-copy > .md-h2 { grid-area: title; }
  .md-js .dl-scenes { grid-area: scenes; margin-top: 20px; touch-action: pan-y pinch-zoom; }
  .md-js .dl-parts { grid-area: parts; display: flex; margin: 12px 0 0 -10px; border: 0; }
  .md-js .dl-parts li { border: 0; }
  .md-js .dl-part, .md-js .dl-part.is-current { grid-template-columns: 10px; grid-template-rows: 10px; place-content: center; width: 30px; height: 44px; padding: 0; }
  .md-js .dl-part-name, .md-js .dl-part-what { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .md-js .dl-part::after { left: 8px; right: 8px; bottom: 6px; height: 2px; }
  .md-js .dl-pager { grid-area: pager; display: flex; gap: 8px; margin-top: 12px; }
  .dl-pager button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: border-color 160ms var(--ease-out); }
  .dl-pager button:active { border-color: var(--ink); }
  .dl-pager button:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
  .md-js .dl-desk-link { grid-area: desk; justify-self: start; margin-top: 18px; }
  .md-js .dl-scene-part { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
  .dl-scene-part .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--burgundy); }
  .dl-scene-part strong { font-family: var(--serif); font-size: clamp(1.5rem, 1.3rem + 1vw, 1.9rem); font-weight: 400; line-height: 1.12; }
  .dl-scene-part > span:last-child { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.45; }
  .md-js .dl-scene-head { flex-wrap: wrap; gap: 2px 14px; padding-bottom: 0; border-bottom: 0; }
  .md-js .dl-scene-head > span:not(:only-child) { white-space: nowrap; }
  .md-js .dl-scene-head > span:only-child { min-width: 0; overflow-wrap: anywhere; letter-spacing: 0.06em; }
}

/* Phones: every block one screen or less. The list a dealer sends keeps the year, the car and a short status on one
   line each; the four results sit closer; the cards lose a little padding. */
@media (max-width: 640px) {
  .dl-title { font-size: clamp(2.3rem, 10.6vw, 3.1rem); }
  .dl-ad-card, .dl-scene, .dl-ledger-card { padding: 18px; }
  .dl-price-amount { flex-wrap: wrap; }

  .dl-ledger-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dl-ledger-kind, .dl-ledger td:nth-child(3), .dl-ledger th:nth-child(3) { display: none; }
  .dl-ledger-year { width: 3.4rem; font-size: 0.875rem; }
  .dl-ledger td { padding-block: 9px; }
  .dl-ledger-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .dl-ledger-short { display: inline; }
  .dl-ledger-state > span { font-size: 0.9375rem; }
  .dl-ledger-total { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dl-ledger-total > span:last-child { padding-bottom: 0; font-size: 1.125rem; }

  .dl-does-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 24px; }
  .dl-does-item { padding-top: 14px; }
  .dl-does-item::after { top: 17px; }
  .dl-does-item h3 { font-size: 1.55rem; }
  .dl-does-item p { max-width: none; margin-top: 6px; padding-right: 2.4rem; font-size: 1.0625rem; line-height: 1.5; }
  .dl-rules-list p { font-size: 1.0625rem; }

  .dl-scene-car img { height: 84px; }
  .dl-scene-facts { display: none; }
  .dl-scene-history li { padding-block: 11px; }
  .dl-scene-history li::before { top: calc(11px + 0.45em); }
  .dl-scene-steps li { padding-block: 12px; }
  .dl-scene-steps li::before { top: calc(12px + 0.4em); }
  .dl-scene-history li { grid-template-columns: 5.4rem minmax(0, 1fr); gap: 12px; font-size: 1.125rem; }
  .dl-scene-history li > span:first-child { font-size: 0.9375rem; }
  .dl-scene-notice { padding: 14px 16px; font-size: 1rem; }
  .dl-scene-notice-top { font-size: 1.125rem; }
  .dl-scene-cars li { padding-block: 8px; font-size: 1.0625rem; }
}
/* Phones under 830 points tall: the cards leave out their closing notes. */
@media (max-width: 640px) and (max-height: 830px) {
  .dl-scene-note { display: none; }
}
/* Short phones: "What you get" keeps the card's part name and drops its line and the kicker, so the card, the squares
   and the link still share one screen. The list and the four results sit a little closer. */
@media (max-width: 640px) and (max-height: 760px) {
  .md-js .dl-get-copy > .md-kicker { display: none; }
  .md-js .dl-scenes { margin-top: 14px; }
  .dl-scene { gap: 10px; padding: 16px; }
  .dl-scene-part > span:last-child, .dl-scene-note { display: none; }
  .md-js .dl-scene-part { padding-bottom: 10px; }
  .md-js .dl-parts, .md-js .dl-pager { margin-top: 8px; }
  .md-js .dl-desk-link { margin-top: 12px; }
  .dl-ledger td { padding-block: 7px; }
  .dl-does-grid { gap: 16px; margin-top: 18px; }
  .dl-does-item { padding-top: 12px; }
  .dl-does-item::after { top: 14px; }
  .dl-does-item h3 { font-size: 1.4rem; }
  .dl-does-item p { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-does-item::before, .dl-open tbody tr, .dl-open .dl-ledger-state > span, .dl-scene, .dl-part { transition: none !important; }
  .dl-part.is-current::after { animation: none; }
  .dl-ledger tr.is-wanted .dl-ledger-state > span::before { animation: none; }
}

/* The dealer desk preview, built like Your records: the dealership and four figures, the stock with its files and its
   advert lines, what needs the dealer, the dealer page and the introductions code. */
.dk-desk { padding-block: clamp(36px, 7svh, 96px) clamp(28px, 5svh, 64px); }
.dk-desk-inner { display: grid; gap: clamp(28px, 5svh, 56px); }
.dk-hello-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.dk-hello-top > .md-mono { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--ink-3); }
.dk-chip i { width: 8px; height: 8px; border-radius: 2px; background: var(--burgundy); }
.dk-title { margin-top: 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, min(1.4rem + 4vw, 10svh), 5.25rem); line-height: 0.96; letter-spacing: -0.025em; }
.dk-summary { max-width: 52ch; margin-top: clamp(10px, 1.8svh, 16px); color: var(--ink-2); font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.45; }
.dk-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.dk-figures div { padding: 16px 18px 0 0; }
.dk-figures div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
.dk-figures dt { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.dk-figures dd { margin: 8px 0 0; font-size: 1rem; color: var(--ink-2); }
.dk-figures strong { margin-right: 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1vw, 2.75rem); line-height: 1; color: var(--ink); }
.dk-figures p { margin-top: 4px; color: var(--ink-3); font-size: 0.9375rem; }

.dk-screen { padding-block: clamp(40px, 8svh, 112px); border-top: 1px solid var(--rule); }
.dk-section-head { display: grid; gap: 6px; margin-bottom: clamp(16px, 2.8svh, 28px); padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.dk-section-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.1vw, 2.5rem); line-height: 1.05; letter-spacing: -0.015em; }
.dk-section-head p { color: var(--ink-3); font-size: 1rem; }
.dk-cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.dk-car {
  display: grid; align-content: start; gap: 10px; padding: clamp(18px, 2.6svh, 24px) clamp(18px, 1.8vw, 24px); background: var(--paper); border: 1px solid var(--rule);
  border-radius: 2px; box-shadow: 6px 6px 0 var(--sand-deep); animation: dk-in 700ms var(--ease-out) both; animation-delay: calc(100ms + var(--i) * 80ms);
}
@keyframes dk-in { from { opacity: 0; translate: 0 12px; } }
.dk-car-id { display: grid; gap: 4px; }
.dk-car-model { font-family: var(--serif); font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.75rem); line-height: 1.05; }
.dk-car-id .md-mono { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.dk-car-state { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; }
.dk-car-state i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.dk-car.is-preparing .dk-car-state { color: var(--ink-2); }
.dk-car.is-preparing .dk-car-state i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); animation: dl-pulse 2.4s var(--ease-out) infinite; }
.dk-car.is-finding { border-color: rgba(94, 1, 9, 0.35); }
.dk-car.is-finding .dk-car-state { color: var(--burgundy); }
.dk-car.is-finding .dk-car-state i { background: var(--burgundy); }
.dk-car-line { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.4; }
.dk-car-line.is-waiting, .dk-car.is-finding .dk-car-line { font-family: var(--sans); font-size: 0.9375rem; color: var(--ink-2); }
.dk-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.dk-badge i { width: 9px; height: 9px; border-radius: 2px; background: var(--burgundy); }
.dk-car-actions { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 2px; }
.dk-car-actions a, .dk-car-actions button { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.dk-car-actions a:hover, .dk-car-actions button:hover { color: var(--burgundy); }
.dk-car-add { background: transparent; border-style: dashed; border-color: var(--rule-strong); box-shadow: none; }

.dk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 112px); align-items: start; }
.dk-col { display: grid; gap: clamp(36px, 6svh, 64px); }
.dk-items li { display: grid; gap: 6px; padding: clamp(12px, 2svh, 18px) 0; border-bottom: 1px solid var(--rule); }
.dk-items li > p:not(.dk-item-meta) { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; }
.dk-item-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dk-item-meta .md-mono { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.dk-item-flag { font-size: 0.875rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.dk-items li.is-alert, .dk-items li.is-wanted { padding-inline: 14px; border-left: 3px solid var(--burgundy); background: rgba(94, 1, 9, 0.05); }
.dk-items li.is-alert .dk-item-flag, .dk-items li.is-wanted .dk-item-flag { color: var(--burgundy); }
.dk-items .md-arrow-link { justify-self: start; margin-top: 4px; font-size: 0.9375rem; }
.dk-lookup { display: grid; gap: 8px; margin-top: clamp(18px, 3svh, 28px); }
.dk-lookup label { font-weight: 600; }
.dk-lookup-row { display: flex; gap: 8px; }
.dk-lookup-row input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--paper); color: var(--ink); font: inherit; font-family: var(--mono); letter-spacing: 0.08em; }
.dk-lookup-row input:focus { outline: 2px solid var(--burgundy); outline-offset: 1px; border-color: var(--ink); }
.dk-lookup-register { justify-self: start; color: var(--ink-2); font-size: 0.9375rem; text-underline-offset: 3px; }
.dk-forensics { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 1rem; }
.dk-forensics a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.dk-page-card { display: grid; gap: 10px; padding: clamp(18px, 3svh, 28px) clamp(18px, 2vw, 28px); background: var(--paper); border: 1px solid var(--rule); box-shadow: 6px 6px 0 var(--sand-deep); }
.dk-page-url { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); }
.dk-page-name { font-family: var(--serif); font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.1rem); line-height: 1.05; }
.dk-page-cars { border-top: 1px solid var(--ink); }
.dk-page-cars li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: 1.0625rem; }
.dk-page-cars small { margin-left: 6px; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-3); }
.dk-page-cars .md-mono { font-size: 0.75rem; color: var(--ink-3); }
.dk-note { margin-top: 12px; color: var(--ink-3); font-size: 0.9375rem; }
.dk-code { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.dk-code .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.dk-code strong { font-family: var(--mono); font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem); font-weight: 400; letter-spacing: 0.14em; }
.dk-code-text { margin-top: 12px; max-width: 46ch; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; }
.dk-help { margin-top: clamp(28px, 5svh, 48px); padding-top: 16px; border-top: 1px solid var(--rule-strong); }
.dk-help h3 { font-weight: 600; }
.dk-help p { margin-top: 6px; color: var(--ink-2); font-size: 1rem; }
.dk-toast {
  position: fixed; z-index: 60; left: 50%; bottom: 24px; translate: -50% 0; max-width: min(92vw, 560px); padding: 12px 18px; border-radius: 2px;
  background: var(--ink); color: var(--sand); font-size: 0.9375rem; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}
@media (max-width: 960px) {
  .dk-cars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-two { grid-template-columns: minmax(0, 1fr); }
  .dk-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .dk-figures div:nth-child(3) { padding-left: 0; border-left: 0; }
  .dk-desk { padding-top: var(--flow); }
}
@media (max-width: 640px) {
  .dk-cars { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dk-screen { padding-block: var(--flow); }
  /* Each car reads in one glance: the model and its year on one line, then its state, its line and what to do. */
  .dk-car { gap: 8px; padding: 16px 18px 18px; }
  .dk-car-id { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .dk-car-id .md-mono { flex: none; }
  .dk-car-actions { gap: 4px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-car { animation: none; }
  .dk-car.is-preparing .dk-car-state i { animation: none; }
}