.od-cost-page.od-vehicle-content,
.od-cost-detail-page.od-vehicle-content {
	min-height: 720px;
	padding: .4rem .15rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.od-cost-heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
	align-items: end;
	gap: 1.5rem;
	margin-bottom: 1.35rem;
}

.od-cost-kicker {
	display: inline-flex;
	margin-bottom: .45rem;
	color: #ef5b22;
	font-size: .66rem;
	font-weight: 850;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.od-cost-heading h2,
.od-cost-detail-page h2 {
	margin: 0;
	color: #132d46;
	font-size: clamp(1.45rem, 2.3vw, 2rem);
	line-height: 1.15;
	letter-spacing: -.03em;
}

.od-cost-heading > div > p,
.od-cost-detail-page header p {
	max-width: 660px;
	margin: .55rem 0 0;
	color: #667a8e;
	font-size: .82rem;
	line-height: 1.6;
}

.od-cost-intro-note {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: .8rem;
	min-height: 76px;
	padding: .85rem 1rem;
	border: 1px solid #e0e7ec;
	border-radius: .9rem;
	background: linear-gradient(145deg, #f8fafc, #fff);
}

.od-cost-intro-note > span {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #edf3f7;
	color: #173a59;
}

.od-cost-intro-note svg,
.od-cost-section-icon svg,
.od-cost-package svg,
.od-cost-card svg,
.od-cost-cta svg,
.od-cost-detail-page svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.od-cost-intro-note svg {
	width: 19px;
	height: 19px;
}

.od-cost-intro-note p {
	margin: 0;
	color: #6a7b8a;
	font-size: .67rem;
	line-height: 1.55;
}

.od-cost-intro-note strong {
	display: block;
	margin-bottom: .15rem;
	color: #2c455b;
}

.od-cost-packages,
.od-cost-parts {
	margin-top: 1.2rem;
}

.od-cost-section-title {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.od-cost-section-icon {
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
}

.od-cost-section-icon svg {
	width: 22px;
	height: 22px;
}

.od-cost-section-icon--green {
	background: #eaf8ef;
	color: #2aa65a;
}

.od-cost-section-icon--purple {
	background: #f1ecff;
	color: #8055c8;
}

.od-cost-section-title h3 {
	margin: 0;
	color: #19334c;
	font-size: .9rem;
}

.od-cost-section-title p {
	margin: .2rem 0 0;
	color: #718292;
	font-size: .64rem;
}

.od-cost-package-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: .9rem;
}

.od-cost-package {
	position: relative;
	min-height: 220px;
	overflow: hidden;
	padding: 1.15rem;
	border: 1px solid #dfe6eb;
	border-radius: .95rem;
	background: #fff;
	box-shadow: 0 8px 24px rgba(20, 47, 70, .035);
}

.od-cost-package::after {
	content: "";
	position: absolute;
	right: -30px;
	bottom: -40px;
	width: 130px;
	height: 130px;
	border: 18px solid currentColor;
	border-radius: 50%;
	opacity: .045;
}

.od-cost-package--routine { color: #2aa65a; }
.od-cost-package--heavy { color: #3b78ca; }

.od-cost-package header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .75rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid #e8edf1;
}

.od-cost-package header > span {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: currentColor;
}

.od-cost-package header > span svg {
	width: 20px;
	height: 20px;
	color: #fff;
}

.od-cost-package header > div {
	display: grid;
}

.od-cost-package header strong,
.od-cost-package > div > strong {
	color: #1c354d;
	font-size: .72rem;
}

.od-cost-package header small {
	margin-top: .2rem;
	color: #7c8b98;
	font-size: .59rem;
}

.od-cost-package header b {
	max-width: 125px;
	color: #476175;
	font-size: .65rem;
	line-height: 1.4;
	text-align: right;
}

.od-cost-package > div {
	padding-top: .9rem;
}

.od-cost-package ul {
	display: grid;
	gap: .42rem;
	margin: .7rem 0 0;
	padding: 0;
	list-style: none;
}

.od-cost-package li {
	position: relative;
	padding-left: 1rem;
	color: #5f7283;
	font-size: .64rem;
}

.od-cost-package li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: currentColor;
	font-weight: 900;
}

.od-cost-parts-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.od-cost-parts-head > label {
	display: flex;
	align-items: center;
	gap: .45rem;
	color: #6f8090;
	font-size: .6rem;
	font-weight: 750;
}

.od-cost-sort {
	min-width: 155px;
	height: 36px;
	padding: 0 2rem 0 .7rem;
	border: 1px solid #dbe3e9;
	border-radius: .6rem;
	background-color: #fff;
	color: #314a60;
	font-size: .62rem;
}

.od-cost-card-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: .85rem;
	margin-top: .9rem;
}

.od-cost-card {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	min-width: 0;
	min-height: 225px;
	padding: 1rem .7rem .75rem;
	border: 1px solid #dfe5ea;
	border-radius: .85rem;
	background: #fff;
	color: inherit;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(20, 47, 70, .02);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.od-cost-card:hover,
.od-cost-card:focus-visible {
	border-color: #bca9df;
	box-shadow: 0 12px 28px rgba(92, 58, 147, .1);
	color: inherit;
	transform: translateY(-3px);
}

.od-cost-card:focus-visible {
	outline: 3px solid rgba(128, 85, 200, .22);
	outline-offset: 2px;
}

.od-cost-card__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: .6rem;
	border-radius: 50%;
	background: #f3eeff;
	color: #8055c8;
}

.od-cost-card__icon svg {
	width: 34px;
	height: 34px;
}

.od-cost-card__demo {
	position: absolute;
	top: .55rem;
	right: .55rem;
	padding: .18rem .36rem;
	border-radius: 999px;
	background: #fff4e9;
	color: #a85a18;
	font-size: .47rem;
	font-weight: 850;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.od-cost-card > strong {
	min-height: 34px;
	color: #1c344c;
	font-size: .68rem;
	line-height: 1.4;
}

.od-cost-card__price {
	margin: .45rem 0;
	color: #19364f;
	font-size: .79rem;
	font-weight: 900;
	white-space: nowrap;
}

.od-cost-card__price i {
	margin: 0 .15rem;
	color: #97a4af;
	font-style: normal;
}

.od-cost-card > small:not(.od-cost-card__demo) {
	width: 100%;
	overflow: hidden;
	color: #7b8996;
	font-size: .53rem;
	line-height: 1.45;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.od-cost-card > em {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: auto;
	padding-top: .55rem;
	border-top: 1px solid #edf0f2;
	color: #6f4eaa;
	font-size: .55rem;
	font-style: normal;
	font-weight: 850;
}

.od-cost-empty {
	grid-column: 1 / -1;
	padding: 2rem;
	border: 1px dashed #d8e0e6;
	border-radius: .8rem;
	text-align: center;
}

.od-cost-advice {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 1.25rem;
}

.od-cost-advice article {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .8rem;
	padding: 1rem;
	border: 1px solid #f2ded4;
	border-radius: .9rem;
	background: linear-gradient(135deg, #fff6f1, #fff);
}

.od-cost-advice article + article {
	border-color: #dce9f4;
	background: linear-gradient(135deg, #f3f8fd, #fff);
}

.od-cost-advice article > span {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #ef5b22;
	color: #fff;
	font-size: .7rem;
	font-weight: 900;
}

.od-cost-advice article + article > span { background: #3174bd; }

.od-cost-advice h3 {
	margin: .2rem 0 .65rem;
	color: #193149;
	font-size: .78rem;
}

.od-cost-advice ul {
	display: grid;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.od-cost-advice li {
	position: relative;
	padding-left: 1rem;
	color: #627586;
	font-size: .62rem;
	line-height: 1.45;
}

.od-cost-advice li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #ef5b22;
	font-weight: 900;
}

.od-cost-advice article + article li::before { color: #3174bd; }

.od-cost-cta {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
	padding: 1rem 1.15rem;
	border: 1px solid #dfe6eb;
	border-radius: .9rem;
	background: #fff;
}

.od-cost-cta > span {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #eaf0f5;
	color: #173a57;
}

.od-cost-cta svg { width: 24px; height: 24px; }
.od-cost-cta > div { display: grid; }
.od-cost-cta strong { color: #19334c; font-size: .76rem; }
.od-cost-cta p { margin: .22rem 0 0; color: #718292; font-size: .63rem; }

.od-cost-cta button,
.od-cost-detail-actions button {
	min-width: 150px;
	padding: .72rem .9rem;
	border: 1px solid #dbe3e9;
	border-radius: .65rem;
	background: #f8fafb;
	color: #2d475d;
	font-size: .64rem;
	font-weight: 850;
}

.od-cost-cta button small,
.od-cost-detail-actions button small {
	margin-left: .3rem;
	color: #1e9b4d;
	font-size: .47rem;
	text-transform: uppercase;
}

.od-cost-disclaimer {
	display: flex;
	align-items: flex-start;
	gap: .4rem;
	margin: .75rem .1rem 0;
	color: #84919c;
	font-size: .57rem;
	line-height: 1.5;
}

.od-cost-back {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: 1rem;
	color: #536d82;
	font-size: .67rem;
	font-weight: 800;
	text-decoration: none;
}

.od-cost-back:hover,
.od-cost-back:focus-visible { color: #ef5b22; }

.od-cost-detail-page > header {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid #e1e7ec;
	border-radius: 1rem;
	background: linear-gradient(145deg, #fff, #fbf9ff);
}

.od-cost-detail-icon {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: #f2ecff;
	color: #8055c8;
}

.od-cost-detail-icon svg { width: 43px; height: 43px; }

.od-cost-detail-price {
	display: grid;
	place-items: center;
	margin-top: 1rem;
	padding: 1.4rem;
	border: 1px solid #f0d9cf;
	border-radius: 1rem;
	background: linear-gradient(135deg, #fff6f1, #fff);
	text-align: center;
}

.od-cost-detail-price small { color: #7f8d98; font-size: .66rem; }
.od-cost-detail-price strong { margin: .25rem 0; color: #17334c; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.04em; }
.od-cost-detail-price span { color: #7c8b97; font-size: .62rem; }

.od-cost-detail-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .85rem;
	margin-top: .9rem;
}

.od-cost-detail-grid article {
	display: grid;
	grid-template-columns: 38px 1fr;
	align-items: center;
	gap: .2rem .7rem;
	padding: 1rem;
	border: 1px solid #e1e7ec;
	border-radius: .85rem;
	background: #fff;
}

.od-cost-detail-grid article > span {
	display: grid;
	grid-row: 1 / 3;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: .65rem;
	background: #edf3f7;
	color: #315a78;
}

.od-cost-detail-grid svg { width: 21px; height: 21px; }
.od-cost-detail-grid small { color: #84919c; font-size: .57rem; }
.od-cost-detail-grid strong { color: #203b52; font-size: .69rem; }

.od-cost-detail-note {
	margin-top: .9rem;
	padding: 1rem 1.1rem;
	border-radius: .85rem;
	background: #f7f9fb;
}

.od-cost-detail-note strong { color: #1f3a51; font-size: .72rem; }
.od-cost-detail-note p { margin: .35rem 0 0; color: #687b8c; font-size: .66rem; line-height: 1.55; }

.od-cost-detail-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .75rem;
	margin-top: 1rem;
}

.od-cost-back--button {
	margin: 0;
	padding: .72rem .9rem;
	border: 1px solid #dbe3e9;
	border-radius: .65rem;
	background: #fff;
}

@media (max-width: 900px) {
	.od-cost-heading { grid-template-columns: 1fr; }
	.od-cost-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.od-cost-page.od-vehicle-content,
	.od-cost-detail-page.od-vehicle-content { padding-top: 0; }
	.od-cost-package-grid,
	.od-cost-advice,
	.od-cost-detail-grid { grid-template-columns: 1fr; }
	.od-cost-package header { grid-template-columns: auto minmax(0, 1fr); }
	.od-cost-package header b { grid-column: 1 / -1; max-width: none; text-align: left; }
	.od-cost-parts-head { align-items: flex-start; flex-direction: column; }
	.od-cost-parts-head > label { width: 100%; justify-content: space-between; }
	.od-cost-sort { flex: 1; }
	.od-cost-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
	.od-cost-card { min-height: 220px; }
	.od-cost-cta { grid-template-columns: auto minmax(0, 1fr); }
	.od-cost-cta button { grid-column: 1 / -1; }
	.od-cost-detail-page > header { grid-template-columns: 58px minmax(0, 1fr); padding: 1rem; }
	.od-cost-detail-icon { width: 58px; height: 58px; }
	.od-cost-detail-icon svg { width: 34px; height: 34px; }
	.od-cost-detail-actions { align-items: stretch; flex-direction: column; }
	.od-cost-detail-actions > * { width: 100%; justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.od-cost-card { transition: none; }
}