/* Reference-matched dashboard illustrations. All business copy remains native HTML. */
.capability-example-label { margin: 0; padding: 0 4px; color: #718095; font-size: 12px; line-height: 20px; text-align: right; }
.capability-example, .solution-lightbox-content { container-type: inline-size; }
.capability-row .reference-dashboard, .solution-lightbox-content .reference-dashboard {
  --rd-blue: #0868ff; --rd-ink: #132553; --rd-muted: #869bbd;
  width: 100%; max-width: none; padding: 1.35em; border: 1px solid #edf5ff; border-radius: 13px;
  color: var(--rd-ink); background: linear-gradient(115deg,#f2f9ff 0%,#f9fcff 55%,#f2f9ff 100%);
  font-size: clamp(10px, 1.92cqw, 15px); line-height: 1.55; box-shadow: inset 0 0 30px #ffffffa8;
}
.reference-dashboard *, .reference-dashboard *::before, .reference-dashboard *::after { box-sizing: border-box; }
.reference-dashboard :is(h4,h5,p,dl,dd,ol,ul) { margin: 0; }
.reference-dashboard :is(ol,ul) { padding: 0; list-style: none; }
.capability-row .reference-dashboard h4, .solution-lightbox-content .reference-dashboard h4 { font-size: 1.2em; line-height: 1.5; font-weight: 650; }
.reference-dashboard h5 { font-size: 1em; line-height: 1.5; font-weight: 600; }
.reference-dashboard small { display: block; font-size: .85em; color: var(--rd-muted); font-weight: 400; }
.reference-dashboard strong { font-weight: 600; }
.reference-dashboard b { font-weight: 600; }
.reference-dashboard .rd-blue { color: var(--rd-blue); }
.rd-icon-bubble { flex: none; display: grid; place-items: center; width: 2.5em; height: 2.5em; color: var(--rd-blue); background: linear-gradient(140deg,#e1efff,#f5faff); border-radius: 50%; }
.rd-icon { width: 1.45em; height: 1.45em; display: block; }
.rd-square { border-radius: .7em; background: linear-gradient(135deg,#deeeff,#edf7ff); }
.rd-orange { color: #ff870b; background: #fff2e2; }
.rd-context { display: flex; align-items: center; justify-content: space-between; gap: 1em; color: #7d96bb; font-size: .92em; margin-bottom: 1.1em; }
.rd-context b { color: #233765; margin-left: .5em; }
.rd-context > span:last-child { display: flex; align-items: center; gap: .5em; }
.rd-tag { display: inline-block; white-space: nowrap; color: var(--rd-blue); background: #e7f3ff; border-radius: .4em; padding: .3em .6em; font-size: .85em; }
.rd-green { color: #18b38f; background: #e5f9f3; }
.rd-detail { color: #518bff; font-size: .8em; margin-left: auto; white-space: nowrap; }
/* The ship retains the supplied reference art; vehicle and documents render sharply. */
.rd-art { display: block; flex: none; background-image: url("capability-reference.png"); background-repeat: no-repeat; background-size: 99.2em 158.6em; }

.rd-ship-art { width: 11.4em; height: 6.4em; background-position: -83.6em -55.6em; mix-blend-mode: multiply; }
/* 01 — vehicle dossier */
/* Compact VIN header, visually continuous rather than a separate icon button. */
.rd-vin-heading { display: flex; align-items: center; gap: .8em; padding: .325em .8em; margin-bottom: 1.05em; background: #2b405d; border-radius: .65em; }
.rd-vin-heading > .rd-icon-bubble { width: 2.25em; height: 2.25em; border-radius: .45em; background: #ffffff0a; color: #bdd5f0; }
.rd-vin-heading .rd-icon { width: 1.5em; height: 1.5em; }
.rd-vin-bar { display: flex; align-items: center; gap: .9em; flex: 1; min-width: 0; padding: .15em .2em; color: #fff; line-height: 1.25; }
.rd-vin-bar > strong { font-size: 1.4em; letter-spacing: .015em; white-space: nowrap; }
.rd-live { background: #3c716d; color: #d3efe6; border-radius: 2em; padding: .18em .65em; font-size: .7em; white-space: nowrap; }
.rd-vin-bar small { margin-left: auto; color: #abbcd1; font-size: .76em; }
.rd-dossier-grid { display: grid; grid-template-columns: minmax(0,2.8fr) minmax(0,1fr); align-items: start; gap: 1.15em; }
/* The left region is an open canvas; only the supplier and buyer read as cards. */
.rd-vehicle-card { padding: .4em 0 .2em; background: #ffffff20; border: 0; min-width: 0; }
.rd-vehicle-meta { display: grid; grid-template-columns: 1.05fr 1.23fr .86fr .72fr; align-items: end; gap: .65em; margin-bottom: 1.45em; padding: 0 .2em .45em; }
.rd-car-illustration { display: block; width: 7.6em; max-width: 100%; height: auto; align-self: end; }
.rd-vehicle-meta > div { min-width: 0; padding: 0 0 .5em .8em; border-left: 1px solid #e5eef8; }
.rd-vehicle-meta strong { display: block; font-size: .98em; margin-top: .4em; line-height: 1.4; white-space: nowrap; color: #243a59; }
.rd-vehicle-meta small { font-size: .76em; color: #7f92ac; }
.rd-trade { display: grid; grid-template-columns: minmax(0,1fr) 3em minmax(0,1fr); align-items: center; gap: 0; }
.rd-trade > div { display: flex; align-items: flex-start; gap: .7em; padding: 1em .85em; background: #eaf3fbd9; border: 1px solid #e5effa; border-radius: .7em; }
.rd-trade strong { display: block; margin: .35em 0; font-size: 1.02em; color: #243a59; }
.rd-trade section > small:last-child { font-size: .76em; color: #8c9db3; }
.rd-trade .rd-icon-bubble { width: 2.15em; height: 2.15em; background: #e0eefb; color: #4589df; }
.rd-relationship { position: relative; display: grid; place-items: center; color: #367fe0; }
.rd-relationship::before { content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 1px solid #cddff4; }
.rd-relationship > span { position: relative; z-index: 1; padding: 0 .16em; background: #f5faff; font-size: 1.3em; line-height: 1; }
.rd-costs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 1.25em; padding: .95em 0 .15em; border-top: 1px solid #e5eef8; }
.rd-costs > div { display: flex; align-items: flex-start; gap: .55em; padding-left: .7em; border-left: 1px solid #e5eef8; }
.rd-costs > div:first-child { padding-left: 0; border-left: 0; }
.rd-costs .rd-icon-bubble { width: 2em; height: 2em; background: #edf3fa; color: #7397c3; }
.rd-costs strong { display: block; font-size: 1.22em; margin-top: .2em; white-space: nowrap; color: #2b405d; }
.rd-costs .rd-receivable { color: #2479e8; background: #e5f1ff; }
.rd-costs > div:last-child strong { color: #0868f2; font-size: 1.3em; }
/* Status supports the vehicle story, with one distinct current step. */
.rd-export-card { padding: .85em .8em; background: #ffffff85; border: 1px solid #f0f5fc; border-radius: .7em; }
.rd-export-card h5 { color: #7c8da6; margin: 0 0 .65em .15em; font-size: .94em; font-weight: 500; }
.rd-export-card ol { display: grid; gap: .55em; }
.rd-export-card li { display: flex; align-items: center; gap: .75em; position: relative; padding: .3em .15em; font-size: .92em; color: #adbbcf; white-space: nowrap; }
.rd-export-card li:not(:last-child)::after { content: ""; position: absolute; top: 1.3em; bottom: -.95em; left: .65em; width: 1px; background: #e0e9f5; }
.rd-export-card i { position: relative; z-index: 1; flex: none; width: 1.05em; height: 1.05em; display: grid; place-items: center; border: 1.5px solid #d4dfed; border-radius: 50%; background: #fbfdff; font-style: normal; line-height: 1; font-size: .95em; }
.rd-export-card .rd-done { color: #3280e7; }
.rd-export-card .rd-done strong { font-weight: 550; }
.rd-export-card .rd-done i { border-color: #75a8ec; background: #75a8ec; color: #fff; }
.rd-export-card .rd-permit { color: #60738e; }
.rd-export-card .rd-permit i { background: #e3f2ed; border-color: #a3ccbd; color: #579d83; }
.rd-export-card strong > span { padding: .12em .3em; font-size: .78em; color: #609c87; background: #eef7f3; border-radius: .35em; font-weight: 500; }
.rd-export-card .rd-active { color: #1c3b66; background: #e9f3ff; border-radius: .5em; padding-block: .65em; }
.rd-export-card .rd-active strong { font-weight: 700; font-size: 1.06em; }
.rd-export-card .rd-active i { background: #227af0; border-color: #227af0; box-shadow: 0 0 0 2px #f4f9ff,0 0 0 3px #8bb8f5; }
.rd-export-card .rd-active strong > span { color: #1d72e3; background: #dcecff; font-weight: 600; }
/* 02 — six stops on one horizontal route */
.rd-timeline { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); padding: .6em 0 1.6em!important; }
.rd-timeline li { min-width: 0; position: relative; padding: 0 .4em .6em; }
.rd-timeline li::before { content: ""; position: absolute; top: .56em; height: 2px; left: .6em; width: 100%; background: #adcbff; }
.rd-timeline li:last-child::before { width: calc(100% - 1.3em); }
.rd-timeline i { display: grid; place-items: center; position: relative; width: 1.2em; height: 1.2em; border: 1px solid var(--rd-blue); background: #f7fbff; border-radius: 50%; color: var(--rd-blue); font-size: 1em; font-style: normal; margin-bottom: 1.1em; line-height: 1; }
.rd-timeline .rd-complete:nth-child(-n+3) i { border: 3px solid #b9d5ff; background: #3985ff; box-shadow: 0 0 0 3px #e9f3ff; }
.rd-timeline .rd-complete:nth-child(-n+3) i::after { content: ""; width: .22em; height: .22em; border-radius: 50%; background: white; }
.rd-timeline strong { display: block; font-size: .88em; white-space: nowrap; }
.rd-timeline small { font-size: .76em; margin-top: .4em; white-space: nowrap; }
.rd-timeline .rd-current { background: linear-gradient(transparent 20%,#e7f3ff); border-radius: .5em; color: var(--rd-blue); }
.rd-timeline .rd-current i { background: var(--rd-blue); color: white; }
.rd-timeline .rd-current small { color: #4c8eff; }
.rd-flow-bottom { display: grid; grid-template-columns: 2.25fr 1.65fr 1fr; gap: 1em; background: linear-gradient(100deg,#eaf5ff,transparent); border-radius: .7em; }
.rd-current-card { display: flex; align-items: flex-start; gap: 1.2em; padding: 1.25em; }
.rd-stage { display: grid; place-items: center; width: 2.25em; height: 2.25em; flex: none; border-radius: .45em; color: #fff; background: linear-gradient(135deg,#cbe3ff,#70a9ff); font-size: 1.5em; }
.rd-current-card h4 { margin: .3em 0!important; }
.rd-current-card p { font-size: .8em; color: #7e98bd; white-space: nowrap; }
.rd-checklist { border: 1px solid #ecf4ff; border-radius: .6em; background: #ffffffbf; padding: .8em 1em; }
.rd-checklist strong { font-size: .9em; }
.rd-checklist ul { display: grid; gap: .25em; margin-top: .4em; font-size: .85em; color: #7e96b9; }
.rd-checklist li::before { content: ""; display: inline-block; width: .4em; height: .4em; background: #3b87ff; border-radius: 50%; box-shadow: 0 0 0 3px #e8f3ff; margin-right: .8em; vertical-align: middle; }
.rd-harbor { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #eff8ff; border-radius: .6em; padding: .4em 0; }
.rd-harbor .rd-art { font-size: .7em; }
.rd-harbor p { font-size: .85em; color: #6f86aa; line-height: 1.35; }
/* 03 — profit and receivables */
.rd-finance-grid { display: grid; grid-template-columns: 1.14fr 1fr; gap: .9em; }
.rd-profit-card, .rd-payment-card { min-width: 0; padding: 1em 1.2em; background: #ffffffdb; border: 1px solid #e7f1ff; border-radius: .7em; }
.rd-card-heading { display: flex; gap: .65em; align-items: center; }
.rd-card-heading .rd-icon-bubble { width: 2.4em; height: 2.4em; }
.capability-row .rd-card-heading h4, .solution-lightbox-content .rd-card-heading h4 { font-size: 1.05em; white-space: nowrap; }
.rd-card-heading > small { margin-left: auto; font-size: .61em; white-space: nowrap; }
.rd-profit-total { display: flex; align-items: center; gap: 2em; margin: .6em 0; }
.rd-profit-total > strong { color: var(--rd-blue); font-size: 1.85em; line-height: 1.4; }
.rd-profit-total > span { color: #8fa2bd; font-size: .85em; }
.rd-profit-total b { color: var(--rd-ink); font-size: 1.2em; margin-left: .35em; }
.rd-profit-bar { display: flex; height: 1.75em; border-radius: .25em; overflow: hidden; background: #e6f4ff; }
/* The three segments share one scale: 148000 + 12000 + 8000 = 168000. */
.rd-profit-bar > span:nth-child(1) { flex: 148; background: linear-gradient(100deg,#f5b68b,#f4bd9b); }
.rd-profit-bar > span:nth-child(2) { flex: 12; background: #ffdf72; }
.rd-profit-bar > span:nth-child(3) { flex: 8; background: linear-gradient(100deg,#8ad16e,#61cab6); }
.rd-profit-legend { display: flex; justify-content: space-between; margin-top: 1em; gap: .7em; }
.rd-profit-legend > div { display: grid; grid-template-columns: .85em auto; align-items: center; gap: .25em .45em; }
.rd-profit-legend i { width: .8em; height: .8em; border-radius: .2em; background: #ff9e50; }
.rd-profit-legend > div:nth-child(2) i { background: #ffdb64; }
.rd-profit-legend > div:nth-child(3) i { background: #82cf5e; }
.rd-profit-legend strong { font-size: .85em; }
.rd-profit-legend small { grid-column: 2; font-size: .8em; }
.rd-payment-card dl { margin: .8em 0; }
.rd-payment-card dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: .5em; margin: .25em 0; }
.rd-payment-card dt { color: #7e93b4; }
.rd-payment-card dd { font-weight: 600; font-size: 1.08em; }
.rd-payment-card dl > div:last-child { border-top: 1px solid #f0f5fc; padding-top: .4em; margin-top: .4em; }
.rd-payment-card dl > div:last-child dt { color: var(--rd-ink); }
.rd-payment-card dl > div:last-child dd { color: var(--rd-blue); font-size: 1.22em; }
.rd-payment-bar { height: .6em; background: #e4eeff; border-radius: .2em; overflow: hidden; }
.rd-payment-bar > span { display: block; width: 59.5238%; height: 100%; background: linear-gradient(90deg,#98c4ff,#69a7ff); }
.rd-payment-legend { display: flex; justify-content: space-between; margin-top: .45em; font-size: .77em; color: #8a9fc0; }
/* 04 — responsible people and status */
.rd-todos-heading { display: flex; align-items: center; gap: .8em; margin-bottom: .65em; }
.rd-count { background: #ff555c; color: white; padding: 0 .55em; border-radius: 2em; font-size: .9em; line-height: 1.5; }
.rd-tasks { display: grid; align-content: start; gap: .3em; }
.rd-tasks li { display: grid; grid-template-columns: 2.6em minmax(0,1fr) 9em 5.2em 1em; align-items: center; gap: .8em; padding: .28em .8em; line-height: 1.35; border: 1px solid #edf4fe; border-left: 2px solid #a5caff; border-radius: .45em; background: #ffffffd9; }
.rd-tasks > li > .rd-icon-bubble { width: 2.15em; height: 2.15em; }
.rd-task-info strong { font-size: 1em; }
.rd-task-info small { white-space: nowrap; font-size: .85em; }
.rd-owner { color: #7890b5; font-size: .95em; }
.rd-owner small { font-size: 1em; }
.rd-task-status { color: #1478ff; text-align: center; border-radius: .55em; background: #eaf4ff; padding: .35em .6em; font-size: .9em; white-space: nowrap; }
.rd-chevron { color: #8fa8cb; font-size: 1.9em; font-weight: 300; line-height: 1; }
.rd-tasks .rd-alert { border-left-color: #ff8197; background: linear-gradient(90deg,#fff3f5,#fff8f9); }
.rd-alert .rd-icon-bubble, .rd-alert .rd-task-status { background: #ffe8ec; color: #fa4d66; }
.rd-alert .rd-task-info strong { color: #894658; }
.rd-tasks .rd-purple { border-left-color: #dccaff; }
/* 05 — document recognition, then field collaboration */
.rd-ai-grid { display: grid; grid-template-columns: 1.18fr 1em 1fr; align-items: center; gap: .8em; }
.rd-ai-heading { display: flex; align-items: center; gap: .7em; margin-bottom: .65em; }
.rd-upload-card { background: #ffffffda; border: 1px solid #e7f1ff; padding: .55em 1em; border-radius: .7em; }
.rd-upload-card h5 { font-size: .9em; margin-bottom: .6em; }
.rd-documents { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7em; text-align: center; }
.rd-documents > div { min-width: 0; }
/* Native text and CSS geometry remain sharp at any display scale. */
.rd-document-thumb { position: relative; display: flex; flex-direction: column; width: 5.8em; max-width: 100%; height: 6.5em; margin: 0 auto; overflow: hidden; border: 1px solid #dce8f7; border-radius: .4em; font-size: .83em; text-align: left; }
.rd-vin-preview { justify-content: center; padding: .45em; background: linear-gradient(145deg,#edf1f5 0%,#c5ced7 35%,#8c9ba9 36%,#dae1e7 61%,#aab6c2 100%); }
.rd-metal-highlight { position: absolute; inset: 0 0 auto; height: 1.6em; background: linear-gradient(175deg,#f7fafc,#c0cbd6); border-bottom: .16em solid #81909d; }
.rd-vin-plate { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3em; padding: .5em .18em; margin-top: .9em; border: 1px solid #5a697b; border-radius: .22em; background: #263447; color: white; box-shadow: 0 .15em .3em #26344738; }
.rd-vin-plate::before, .rd-vin-plate::after { content: ""; position: absolute; top: .2em; width: .15em; height: .15em; background: #b7c5d4; border-radius: 50%; }
.rd-vin-plate::before { left: .2em; }.rd-vin-plate::after { right: .2em; }
.rd-plate-title { font-size: .57em; font-weight: 600; letter-spacing: .08em; white-space: nowrap; }
.rd-plate-number { font-size: .56em; font-family: ui-monospace, monospace; font-weight: 600; letter-spacing: .015em; white-space: nowrap; }
.rd-barcode { width: 86%; height: .55em; background: repeating-linear-gradient(90deg,#eff5ff 0 .08em,transparent .08em .15em,#eff5ff .15em .19em,transparent .19em .3em); }
.rd-plate-model { color: #c7d8ea; font-size: .34em; letter-spacing: .1em; }
.rd-paper-preview { padding: .55em .4em; background: linear-gradient(100deg,#f7faff,#fff 12%,#fff 90%,#f4f7fb); color: #425571; }
.rd-paper-title { font-size: .58em; font-weight: 650; line-height: 1.5; white-space: nowrap; text-align: center; }
.rd-paper-subtitle { font-size: .22em; text-align: center; letter-spacing: .035em; white-space: nowrap; margin-top: .45em; }
.rd-paper-rule { height: 1px; background: #9aacbe; margin: .35em 0; }
.rd-paper-field { font-size: .33em; line-height: 2; white-space: nowrap; }
.rd-paper-lines { height: 1.8em; margin-top: .35em; background: repeating-linear-gradient(to bottom,transparent 0 .34em,#c3cedc .34em .39em); }
.rd-signature-row { display: flex; justify-content: space-between; margin-top: .8em; font-size: .31em; color: #7b8da4; }
.rd-paper-seal { position: absolute; bottom: .8em; right: .8em; display: grid; place-items: center; width: 2.2em; height: 2.2em; border: 1px solid #dc9196; border-radius: 50%; color: #c76a74; font-size: .4em; transform: rotate(-12deg); background: #fff7f740; }
.rd-customs-preview { padding-inline: .35em; }
.rd-customs-preview .rd-paper-title { font-size: .52em; }
.rd-customs-fields { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #a6b6c9; border-bottom: 0; margin-top: .5em; }
.rd-customs-fields > span { font-size: .28em; height: 3.1em; padding: .35em; border-bottom: 1px solid #a6b6c9; }
.rd-customs-fields > span:nth-child(odd) { border-right: 1px solid #a6b6c9; }
.rd-customs-table { display: grid; grid-template-columns: 1.5fr 1fr 1fr; border-left: 1px solid #a6b6c9; }
.rd-customs-table > span { font-size: .29em; min-height: 2.6em; display: grid; place-items: center; border-right: 1px solid #a6b6c9; border-bottom: 1px solid #a6b6c9; white-space: nowrap; }
.rd-customs-table > span:nth-child(-n+3) { background: #edf3f9; }
.rd-customs-footer { margin-top: auto; font-size: .28em; color: #8293a8; text-align: center; }
.rd-documents small { margin-top: .35em; font-size: .85em; white-space: nowrap; }
.rd-add { display: grid; place-items: center; height: 2.7em; border: 1px solid #e5f1ff; border-radius: .25em; background: #f2f9ff; color: #7faaff; font-size: 2em; line-height: 1; }
.rd-ai-arrow { color: var(--rd-blue); font-size: 2.5em; font-weight: 300; }
.rd-recognition { padding: .7em 1em; border: 1px solid #e7f1ff; background: #ffffffd9; border-radius: .7em; }
.rd-recognition h5 { color: var(--rd-blue); font-size: .95em; margin-bottom: .6em; }
.rd-recognition h5 > span { background: #eaf4ff; font-size: .8em; border-radius: .3em; padding: .2em; }
.rd-recognition dl > div { display: grid; grid-template-columns: .85fr 1.15fr 1em; gap: .4em; border-bottom: 1px solid #f0f5fc; padding: .2em .4em; font-size: .86em; }
.rd-recognition dt { color: #7d95ba; }
.rd-recognition dd { font-weight: 550; white-space: nowrap; }
.rd-recognition dl > div > span { background: #66b852; color: #fff; width: 1.1em; height: 1.1em; line-height: 1.1; text-align: center; border-radius: 50%; font-size: .9em; align-self: center; }
.rd-review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin-top: .65em; font-size: .9em; text-align: center; }
.rd-review-actions > span { padding: .4em; background: #e8f3ff; color: var(--rd-blue); border-radius: .4em; }
.rd-review-actions > span:last-child { background: #f2f4f7; color: #9aa6b9; }
.rd-collaboration { margin-top: .85em; background: #ffffff91; padding: .6em .9em; border-radius: .6em; }
.rd-collaboration h5 { font-size: .9em; margin-bottom: .6em; }
.rd-collaboration ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.7em; }
.rd-collaboration li { display: flex; align-items: center; gap: .7em; position: relative; }
.rd-collaboration li:not(:last-child)::after { content: "→"; position: absolute; right: -1.2em; top: .3em; color: #589cff; font-size: 1.2em; }
.rd-collaboration strong { white-space: nowrap; font-size: .88em; }
.rd-collaboration small { white-space: nowrap; font-size: .78em; margin-top: .25em; }
.rd-collaboration .rd-icon-bubble { width: 2.5em; height: 2.5em; }
/* Keep the reference composition intact as the illustration scales; stack dense panels on phones. */
@container (max-width: 540px) {
  .rd-vehicle-meta { gap: .5em; }
  .rd-vehicle-meta > div { padding-left: .5em; }
  .rd-costs > div { gap: .4em; padding-left: .3em; }
  .rd-costs .rd-icon-bubble { width: 1.8em; height: 1.8em; }
  .rd-costs strong { font-size: 1.1em; }
  .rd-export-card { padding-inline: .65em; }
  .rd-export-card li { gap: .5em; font-size: .86em; }
  .rd-tasks li { grid-template-columns: 2.5em minmax(0,1fr) 5.5em 5em .7em; gap: .6em; }
  .rd-card-heading > small { display: none; }
  .rd-collaboration ol { gap: 1.2em; }
  .rd-collaboration li { gap: .4em; }
  .rd-collaboration .rd-icon-bubble { width: 2em; height: 2em; }
}
@container (max-width: 420px) {
  .capability-row .reference-dashboard { padding: 12px; }
  .rd-vin-bar { gap: .6em; }
  .rd-vin-bar > strong { font-size: 1.3em; }
  .rd-vin-bar small { font-size: .7em; }
  .rd-dossier-grid { grid-template-columns: 1fr; }
  .rd-export-card { padding: .8em; }
  .rd-export-card h5 { margin-bottom: .55em; }
  .rd-export-card ol { display: flex; justify-content: space-between; gap: .4em; }
  .rd-export-card li { flex-direction: column; gap: .6em; font-size: .78em; padding: .45em .15em; }
  .rd-export-card .rd-active { padding-block: .45em; }
  .rd-export-card li:not(:last-child)::after { top: .95em; left: 50%; bottom: auto; width: calc(100% + 1.2em); height: 1px; }
  .rd-export-card strong > span { display: none; }
  .rd-export-card .rd-active strong > span { display: inline; margin-left: .3em; font-size: .8em; }
  .rd-context { font-size: .85em; gap: .5em; }
  .rd-context .rd-tag { font-size: .75em; padding-inline: .4em; }
  .rd-timeline { overflow-x: auto; padding-bottom: 1em!important; }
  .rd-timeline strong { font-size: .76em; letter-spacing: -.03em; }
  .rd-timeline small { white-space: normal; font-size: .7em; }
  .rd-flow-bottom { grid-template-columns: 1.65fr 1fr; gap: .6em; }
  .rd-current-card { gap: .7em; padding: .8em; }
  .rd-current-card p { white-space: normal; }
  .rd-harbor { grid-column: 1/-1; flex-direction: row; gap: 1.5em; }
  .rd-harbor .rd-art { font-size: .5em; }
  .rd-finance-grid { grid-template-columns: 1fr; }
  .rd-card-heading > small { display: block; }
  .rd-finance-grid > div { padding: 1em 1.2em; }
  .rd-profit-total { margin-block: .8em; }
  .rd-tasks li { grid-template-columns: 2.3em minmax(0,1fr) 4.3em 4.6em; gap: .55em; padding-inline: .6em; }
  .rd-task-info small { white-space: normal; font-size: .8em; }
  .rd-chevron { display: none; }
  .rd-owner { font-size: .85em; }
  .rd-ai-grid { grid-template-columns: 1fr; gap: .8em; }
  .rd-ai-arrow { text-align: center; transform: rotate(90deg); line-height: .6; }
  .rd-documents .rd-document-thumb { font-size: 1em; }
  .rd-add { height: 3.25em; }
  .rd-recognition { padding: 1em; }
  .rd-recognition dl > div { font-size: 1em; padding-block: .4em; }
  .rd-collaboration ol { grid-template-columns: 1fr 1fr; gap: 1.2em 2em; }
  .rd-collaboration li:nth-child(2)::after { content: "↓"; top: 100%; right: 50%; font-size: 1em; }
  .rd-collaboration li:nth-child(3) { grid-column: 2; grid-row: 2; }
  .rd-collaboration li:nth-child(4) { grid-column: 1; grid-row: 2; }
  .rd-collaboration li:nth-child(3)::after { content: "←"; right: calc(100% + .6em); }
}
/* Narrow phones need room for the vehicle name and all three complete amounts. */
@container (max-width: 300px) {
  .rd-vin-bar { flex-wrap: wrap; gap: .35em .65em; }
  .rd-vin-bar > strong { font-size: 1.2em; }
  .rd-live { flex-shrink: 0; white-space: nowrap; }
  .rd-vin-bar small { flex-basis: 100%; margin-left: 0; }
  .rd-vehicle-meta { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .rd-vehicle-meta .rd-car-illustration { grid-column: 1/-1; justify-self: center; }
  .rd-vehicle-meta > div { padding-left: .4em; }
  .rd-vehicle-meta strong { font-size: .88em; }
  .rd-trade > div { padding: .85em .55em; gap: .45em; }
  .rd-trade .rd-icon-bubble { width: 1.75em; height: 1.75em; }
  .rd-trade strong { font-size: .9em; }
  .rd-trade section > small:last-child { font-size: .68em; }
  .rd-costs > div:last-child strong { font-size: 1.12em; }
  .rd-costs > div { flex-direction: column; gap: .4em; padding-left: .45em; }
  .rd-costs strong { font-size: 1.05em; }
}