/* ==========================================================================
   AltTune OBD-II — public code page + index
   Premium, KBB-style. Self-contained: scoped under .alttune-obd so it can ride
   on a bare document or inside a theme without leaking styles.
   ========================================================================== */

.alttune-obd {
	/* All design values map onto the marketing theme's tokens (loaded globally
	   via tokens.css) so the page reads as the same brand. Safe fallbacks keep
	   the page sane in the rare bare-document case. The old foreign blue accent
	   (#0b69ff) is gone — accents are now the brand orange / theme borders. */
	--obd-ink:        var(--fg-1, #050505);
	--obd-ink-soft:   var(--fg-2, #4a4a4a);
	--obd-ink-muted:  var(--fg-3, #8a8a8a);
	--obd-line:       var(--steel-silver, #D9D8D8);
	--obd-line-soft:  var(--steel-silver-100, #F2F1F1);
	--obd-bg:         var(--steel-silver-50, #F8F7F7);
	--obd-surface:    var(--pure-white, #ffffff);
	--obd-accent:     var(--performance-orange, #F26921);
	--obd-accent-ink: var(--performance-orange-700, #C9501A);

	/* Severity scale — mapped onto the theme's status tokens (low=green … */
	/* critical=red). Used only inside badges + the severity word, never as bars. */
	--obd-low:        var(--success, #2F8F4F);
	--obd-low-bg:     #e7f3ec;
	--obd-medium:     var(--warning, #E0A91A);
	--obd-medium-bg:  #fbf2dd;
	--obd-high:       var(--performance-orange, #F26921);
	--obd-high-bg:    #fde6d7;
	--obd-critical:   var(--danger, #C8341C);
	--obd-critical-bg:#fbe3df;

	--obd-radius:     var(--radius-lg, 16px);
	--obd-radius-sm:  var(--radius-md, 8px);
	--obd-shadow:     var(--shadow-3, 0 12px 32px rgba(46,45,43,.16));
	--obd-shadow-sm:  var(--shadow-2, 0 4px 12px rgba(46,45,43,.10));

	/* The marketing theme's fixed nav: the visible white pill (.at-nav-inner)
	   sits ~141px from the top once scrolled (the .at-nav wrapper adds outer
	   padding on top of an ~81px pill). This token feeds the sticky TOC `top`
	   and every section's `scroll-margin-top` so the visible nav never overlaps
	   the TOC or an anchored heading. ~141px nav + ~19px gap. */
	--obd-nav-clear:  160px;

	box-sizing: border-box;
	margin: 0;
	/* Extra top padding clears the theme's fixed nav so the page header isn't
	   tucked under it on first paint. */
	padding: 140px var(--at-gutter, 32px) var(--space-9, 96px);
	background: var(--obd-bg);
	color: var(--obd-ink);
	font-family: var(--font-sans, 'Proxima Nova', 'Helvetica Neue', Arial, sans-serif);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.alttune-obd *,
.alttune-obd *::before,
.alttune-obd *::after { box-sizing: border-box; }

.alttune-obd-shell {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 268px;
	gap: 56px;
	align-items: start;
}

.alttune-obd-shell--index { grid-template-columns: minmax(0, 1fr); }

.alttune-obd-content { min-width: 0; }

/* ---- Header ------------------------------------------------------------- */

.alttune-obd-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--obd-ink-muted);
	margin-bottom: 18px;
}
.alttune-obd-crumbs a { color: var(--obd-ink-muted); text-decoration: none; }
.alttune-obd-crumbs a:hover { color: var(--obd-accent); }
.alttune-obd-crumb-current { color: var(--obd-ink); }

.alttune-obd-titlerow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 14px;
}

.alttune-obd-title {
	font-family: var(--font-display, 'Jost', sans-serif);
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -.02em;
	text-transform: uppercase;
	margin: 0;
	color: var(--obd-ink);
}

.alttune-obd-subtitle {
	font-size: clamp(1.06rem, 2.2vw, 1.32rem);
	line-height: 1.4;
	font-weight: 600;
	color: var(--obd-ink-soft);
	margin: 0 0 14px;
	max-width: 52ch;
}

.alttune-obd-severity-reason {
	font-size: 1rem;
	color: var(--obd-ink-soft);
	margin: 0 0 8px;
}

.alttune-obd-generic-meaning {
	font-size: .96rem;
	color: var(--obd-ink-muted);
	margin: 8px 0 0;
}

.alttune-obd-header { margin-bottom: 12px; }

.alttune-obd-title-code { color: var(--obd-ink); }
.alttune-obd-title-name { color: var(--obd-ink-soft); font-weight: 300; font-size: 0.5em; letter-spacing: 0; text-transform: none; }

/* ---- Top-of-code intro block (severity card + fix card + CTA bar) -------- */

.alttune-obd-intro {
	margin: 8px 0 4px;
	display: grid;
	gap: 18px;
}

.alttune-obd-intro-row {
	display: grid;
	grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
	gap: 18px;
	align-items: stretch;
}

/* White rounded cards with the theme's hairline border + radius — same card
   language as .prop / .article-card / .post-card in the theme. */
.alttune-obd-sev-card,
.alttune-obd-fix-card {
	background: var(--obd-surface);
	border: 1px solid var(--obd-line);
	border-radius: var(--obd-radius);
	padding: 28px;
}

/* LEFT — severity card: big icon, muted label, big friendly word. The
   per-severity color drives BOTH the icon and the word from one source. */
.alttune-obd-sev-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	--obd-sev-color: var(--obd-medium);
	--obd-sev-bg: var(--obd-medium-bg);
}
.alttune-obd-sev-card--low      { --obd-sev-color: var(--obd-low);      --obd-sev-bg: var(--obd-low-bg); }
.alttune-obd-sev-card--medium   { --obd-sev-color: var(--obd-medium);   --obd-sev-bg: var(--obd-medium-bg); }
.alttune-obd-sev-card--high     { --obd-sev-color: var(--obd-high);     --obd-sev-bg: var(--obd-high-bg); }
.alttune-obd-sev-card--critical { --obd-sev-color: var(--obd-critical); --obd-sev-bg: var(--obd-critical-bg); }

/* The accent reads through a subtle severity-tinted fill (the theme's way of
   showing status — like the orange FAQ toggle / badge tints), not a heavy bar. */
.alttune-obd-sev-card {
	background: var(--obd-sev-bg);
	border-color: color-mix(in srgb, var(--obd-sev-color) 22%, transparent);
}

.alttune-obd-sev-icon {
	display: inline-flex;
	color: var(--obd-sev-color);
}
.alttune-obd-sev-icon svg { width: 44px; height: 44px; }
.alttune-obd-sev-label {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--obd-ink-muted);
}
.alttune-obd-sev-word {
	font-family: var(--font-display, 'Jost', sans-serif);
	font-size: 1.8rem;
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--obd-sev-color);
}

/* RIGHT — "What this code means for you": carries the severity reason. */
.alttune-obd-fix-title {
	font-family: var(--font-display, 'Jost', sans-serif);
	font-size: 1.32rem;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 12px;
	color: var(--obd-ink);
}
.alttune-obd-fix-card p {
	margin: 0 0 12px;
	font-size: 1rem;
	color: var(--obd-ink-soft);
	max-width: 70ch;
}
.alttune-obd-fix-card p:last-child { margin-bottom: 0; }

/* ROW 2 — full-width CTA bar: clean hairline-bordered panel (no colored bar).
   The CTA button itself is the theme's .at-btn .at-btn-primary, so it inherits
   the site-wide orange wipe-in + arrow-slide hover. */
.alttune-obd-cta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	background: var(--obd-surface);
	border: 1px solid var(--obd-line);
	border-radius: var(--obd-radius);
	padding: 24px 28px;
}

.alttune-obd-cta-copy {
	margin: 0;
	flex: 1 1 360px;
	font-size: 1rem;
	color: var(--obd-ink-soft);
	max-width: 76ch;
}

/* The "Schedule Diagnosis" CTA now renders as .at-btn .at-btn-primary in markup;
   we only keep the arrow glyph sizing consistent here. The arrow is a child
   <span>, so the theme's `.at-btn-primary:hover > *` translate animates it. */
.alttune-obd-cta-bar .at-btn { flex: 0 0 auto; }
.alttune-obd-cta-arrow { font-size: 1.05rem; line-height: 1; }

@media (max-width: 760px) {
	.alttune-obd-intro-row { grid-template-columns: 1fr; }
	.alttune-obd-cta-bar { flex-direction: column; align-items: flex-start; }
	.alttune-obd-cta-bar .at-btn { width: 100%; justify-content: center; }
}

/* ---- Severity badge ----------------------------------------------------- */

.alttune-obd-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px 7px 12px;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
}
.alttune-obd-badge-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}
/* Same warning-triangle icon as the single page's severity card, scaled down. */
.alttune-obd-badge-icon {
	display: inline-flex;
	color: currentColor;
	flex: 0 0 auto;
}
.alttune-obd-badge-icon svg { width: 13px; height: 13px; }
.alttune-obd-badge--sm { padding: 4px 10px 4px 8px; font-size: .72rem; gap: 6px; }
.alttune-obd-badge--sm .alttune-obd-badge-dot { width: 6px; height: 6px; }
.alttune-obd-badge--sm .alttune-obd-badge-icon svg { width: 12px; height: 12px; }

.alttune-obd-badge--low      { color: var(--obd-low);      background: var(--obd-low-bg);      border-color: rgba(26,157,86,.22); }
.alttune-obd-badge--medium   { color: var(--obd-medium);   background: var(--obd-medium-bg);   border-color: rgba(185,130,26,.24); }
.alttune-obd-badge--high     { color: var(--obd-high);     background: var(--obd-high-bg);     border-color: rgba(212,105,14,.24); }
.alttune-obd-badge--critical { color: var(--obd-critical); background: var(--obd-critical-bg); border-color: rgba(210,45,45,.24); }

/* ---- Sections ----------------------------------------------------------- */

.alttune-obd-section {
	background: var(--obd-surface);
	border: 1px solid var(--obd-line);
	border-radius: var(--obd-radius);
	box-shadow: none;
	padding: 28px 30px;
	margin-top: 22px;
	/* Clear the theme's fixed nav when a TOC link / hash jumps to this section. */
	scroll-margin-top: var(--obd-nav-clear);
	outline: none;
}

.alttune-obd-section-title {
	font-family: var(--font-display, 'Jost', sans-serif);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 16px;
	color: var(--obd-ink);
}

/* Priority blocks (symptoms / causes) sit side-by-side. No accent rail — the
   theme never uses chunky colored left bars; the hairline card border is the
   only edge treatment, consistent with every other section. */
.alttune-obd-section--priority {
	position: relative;
}

.alttune-obd-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}
.alttune-obd-list li {
	position: relative;
	padding-left: 30px;
	font-size: 1.02rem;
	color: var(--obd-ink-soft);
}
.alttune-obd-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .58em;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--obd-accent);
}

.alttune-obd-prose p {
	margin: 0 0 14px;
	font-size: 1.04rem;
	color: var(--obd-ink-soft);
	max-width: 100%;
}
.alttune-obd-prose p:last-child { margin-bottom: 0; }

/* The tuning context is our B2B moat — give it the theme's premium dark surface
   (rubber-black) with a brand-orange "AltTune" tag, matching the theme's dark
   sections (footer / workshop card) rather than a foreign blue panel. */
.alttune-obd-section--tuning_context {
	background: var(--surface-dark, #050505);
	border-color: var(--rubber-black-90, #1a1a1a);
}
.alttune-obd-section--tuning_context .alttune-obd-section-title { color: var(--pure-white, #fff); }
.alttune-obd-section--tuning_context .alttune-obd-section-title::after {
	content: "AltTune";
	display: inline-block;
	margin-left: 10px;
	padding: 3px 9px;
	font-family: var(--font-display, 'Jost', sans-serif);
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--performance-orange, #F26921);
	background: rgba(242,105,33,.12);
	border: 1px solid rgba(242,105,33,.32);
	border-radius: 6px;
	vertical-align: middle;
}
.alttune-obd-section--tuning_context .alttune-obd-prose p { color: var(--steel-silver, #D9D8D8); }

/* Discreet engineer sign-off line under the tuning context. */
.alttune-obd-reviewed-by {
	margin: 14px 0 0;
	font-size: .82rem;
	font-style: italic;
	color: var(--steel-silver, #D9D8D8);
	opacity: .65;
}

/* ---- Two-up priority row on wide screens -------------------------------- */
.alttune-obd-priority-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: 22px;
}
.alttune-obd-priority-row .alttune-obd-section { margin-top: 0; }

@media (max-width: 600px) {
	.alttune-obd-priority-row { grid-template-columns: 1fr; }
}

/* ---- FAQ accordion ------------------------------------------------------ */
/* The FAQ now renders with the marketing theme's `.at-faq-list/.at-faq-item`
   markup, so it inherits the theme's sections2.css styling and the theme's
   global single-open toggle (main.js). We add nothing here on purpose — the
   theme owns the look. A tiny reset only guards against our `.alttune-obd-list`
   bullet rules bleeding into FAQ answers (they don't use <ul>, but keep the
   FAQ button caret from being affected by any generic button rules). */
.alttune-obd-faq-list .at-faq-q-toggle { cursor: pointer; }

/* ---- Related codes ------------------------------------------------------ */

.alttune-obd-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}
.alttune-obd-related-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border: 1px solid var(--obd-line);
	border-radius: var(--obd-radius-sm);
	text-decoration: none;
	color: var(--obd-ink);
	background: var(--obd-surface);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.alttune-obd-related-card:hover {
	border-color: var(--obd-accent);
	transform: translateY(-2px);
	box-shadow: none;
}
.alttune-obd-related-code { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; font-size: 1.04rem; letter-spacing: .01em; }
.alttune-obd-related-arrow { color: var(--obd-accent); font-size: 1.1rem; transition: transform .18s var(--ease-standard, ease); }
.alttune-obd-related-card:hover .alttune-obd-related-arrow { transform: translateX(3px); }

/* ---- Sticky TOC --------------------------------------------------------- */

/* --- Sticky-TOC enabler -------------------------------------------------
   The marketing theme sets `html, body { overflow-x: hidden }`. `overflow-x:
   hidden` forces the computed `overflow-y` to `auto`, which turns <body> into
   a scroll container — and that BREAKS `position: sticky` for our TOC (it
   sticks relative to the body scrollport, which itself scrolls away with the
   page). The fix is `overflow-x: clip`: it clips horizontal overflow exactly
   like `hidden` (keeping the theme's no-horizontal-scroll guarantee) WITHOUT
   establishing a scroll container, so `overflow-y` stays `visible` and sticky
   resolves against the viewport again. Scoped to our route's body class so it
   never affects any other page. */
body.alttune-obd-route,
html:has(> body.alttune-obd-route) {
	overflow-x: clip;
	overflow-y: visible;
}

/* Sticky TOC.
   The sticky child sticks relative to its containing block — the grid cell.
   That cell must be as TALL as the (long) content column, or the sticky inner
   has no travel room and scrolls away with the page. The parent grid uses
   `align-items: start` (so the short TOC content doesn't stretch awkwardly),
   which would collapse this cell to content height — so we explicitly
   `align-self: stretch` THIS cell back to full row height. The inner panel
   then sticks through the whole content column. `top` clears the fixed nav. */
.alttune-obd-toc {
	position: relative;
	align-self: stretch;
}
.alttune-obd-toc-inner {
	position: sticky;
	top: var(--obd-nav-clear);
	/* Keep the panel inside the viewport on short windows so it can scroll
	   internally rather than getting clipped by the fixed nav above it. */
	max-height: calc(100vh - var(--obd-nav-clear) - 24px);
	overflow-y: auto;
	background: var(--obd-surface);
	border: 1px solid var(--obd-line);
	border-radius: var(--obd-radius);
	box-shadow: none;
	padding: 22px 20px;
}
.alttune-obd-toc-label {
	margin: 0 0 14px;
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--obd-ink-muted);
}
.alttune-obd-toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.alttune-obd-toc-link {
	display: block;
	padding: 8px 12px;
	border-radius: var(--radius-md, 8px);
	font-size: .95rem;
	font-weight: 550;
	color: var(--obd-ink-muted);
	text-decoration: none;
	transition: color .15s ease, background .15s ease;
}
.alttune-obd-toc-link:hover { color: var(--obd-ink); background: var(--obd-line-soft); }
/* Active = brand-orange label on a subtle orange tint — same accent language as
   the theme's eyebrows / active states. No colored left bar. */
.alttune-obd-toc-link.is-active {
	color: var(--obd-ink);
	background: rgba(5, 5, 5, 0.06);
	font-weight: 700;
}

.alttune-obd-toc-toggle,
.alttune-obd-toc-toggle-icon { display: none; }

/* ---- Sidebar "Should you fix it yourself?" + info tooltip --------------- */

/* The label + info icon block sits at the top of the sticky TOC panel,
   above the "On this page" list. The explainer copy lives in a light-theme
   disclosure tooltip toggled by the info button. */
.alttune-obd-fixtip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--obd-line-soft);
}
.alttune-obd-fixtip-label {
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--obd-ink);
}
.alttune-obd-fixtip-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--obd-ink-muted);
	cursor: pointer;
	border-radius: 50%;
	transition: color .15s ease, background .15s ease;
}
.alttune-obd-fixtip-btn:hover,
.alttune-obd-fixtip-btn[aria-expanded="true"] {
	color: var(--obd-accent);
	background: var(--obd-line-soft);
}
.alttune-obd-fixtip-btn:focus-visible {
	outline: 2px solid rgba(5, 5, 5, .3);
	outline-offset: 2px;
}
.alttune-obd-fixtip-btn svg { width: 18px; height: 18px; }

/* Light-theme floating tooltip: white card, hairline border, dark text,
   generous padding, rounded. A very light shadow keeps it legible as an
   overlay without going heavy. Positioned below-left of the icon and
   constrained to the panel width so it never overflows the sidebar. */
.alttune-obd-fixtip-pop {
	position: absolute;
	z-index: 30;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	max-width: 320px;
	margin-left: auto;
	padding: 16px 18px;
	background: var(--obd-surface);
	border: 1px solid var(--obd-line);
	border-radius: var(--obd-radius-sm);
	box-shadow: 0 6px 20px rgba(46, 45, 43, .12);
	color: var(--obd-ink-soft);
	font-size: .92rem;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .16s ease, transform .16s ease;
}
.alttune-obd-fixtip-pop[hidden] { display: none; }
.alttune-obd-fixtip-pop.is-open {
	opacity: 1;
	transform: translateY(0);
}
.alttune-obd-fixtip-pop p { margin: 0 0 10px; }
.alttune-obd-fixtip-pop p:last-child { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.alttune-obd-fixtip-pop { transition: none; transform: none; }
	.alttune-obd-fixtip-pop.is-open { transform: none; }
}

/* On mobile the TOC becomes a top dropdown; keep the fixtip readable and
   let its tooltip span the full width below the icon. */
@media (max-width: 920px) {
	.alttune-obd-fixtip {
		padding: 14px 18px;
		margin: 0;
		border-bottom: 1px solid var(--obd-line);
	}
	.alttune-obd-fixtip-pop {
		left: 14px;
		right: 14px;
		max-width: none;
	}
}

/* ---- Index / search ----------------------------------------------------- */

.alttune-obd-index-hero { margin-bottom: 36px; }
.alttune-obd-search { margin-top: 22px; max-width: 520px; }
.alttune-obd-search-input {
	width: 100%;
	padding: 16px 20px;
	font-size: 1.06rem;
	border: 1px solid var(--obd-line);
	border-radius: var(--obd-radius-sm);
	background: var(--obd-surface);
	box-shadow: none;
	color: var(--obd-ink);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.alttune-obd-search-input:focus {
	border-color: var(--rubber-black, #050505);
	outline: 2px solid rgba(5,5,5,.22); outline-offset: 1px;
}

.alttune-obd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.alttune-obd-grid-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border: 1px solid var(--obd-line);
	border-radius: var(--obd-radius);
	background: var(--obd-surface);
	box-shadow: none;
	text-decoration: none;
	color: var(--obd-ink);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.alttune-obd-grid-card:hover {
	border-color: var(--obd-accent);
	transform: translateY(-2px);
	box-shadow: none;
}
.alttune-obd-grid-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alttune-obd-grid-code { font-size: 1.24rem; font-weight: 800; letter-spacing: -.01em; }
.alttune-obd-grid-title { font-size: .96rem; color: var(--obd-ink-soft); line-height: 1.4; }
.alttune-obd-empty { color: var(--obd-ink-muted); font-size: 1.02rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 920px) {
	.alttune-obd { padding: 28px 18px 72px; }
	.alttune-obd-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }

	/* TOC collapses to a top dropdown on mobile. */
	.alttune-obd-toc { order: -1; margin-bottom: 22px; }
	.alttune-obd-toc-inner { position: static; padding: 0; border-radius: var(--obd-radius-sm); overflow: hidden; }
	.alttune-obd-toc-label { display: none; }
	.alttune-obd-toc-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 14px 18px;
		background: var(--obd-surface);
		border: 0;
		font: inherit;
		font-weight: 700;
		color: var(--obd-ink);
		cursor: pointer;
	}
	.alttune-obd-toc-toggle-icon {
		display: block;
		width: 10px; height: 10px;
		border-right: 2px solid var(--obd-ink-muted);
		border-bottom: 2px solid var(--obd-ink-muted);
		transform: rotate(45deg);
		transition: transform .2s ease;
	}
	.alttune-obd-toc-toggle[aria-expanded="true"] .alttune-obd-toc-toggle-icon { transform: rotate(225deg); }
	.alttune-obd-toc-list { padding: 6px 10px 12px; }
	.alttune-obd-toc-list[hidden] { display: none; }

	.alttune-obd-section--symptoms,
	.alttune-obd-section--causes { display: block; width: 100%; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.alttune-obd * { transition: none !important; scroll-behavior: auto !important; }
}


/* ---- Sidebar offer blocks (DIY tuning + send-your-ECU) ------------------- */
.alttune-obd-offers { display: grid; gap: 14px; margin-top: 18px; margin-bottom: 14px; }
.alttune-obd-offer {
	border: 1px solid var(--obd-line, #e3e1de);
	border-radius: var(--obd-radius, 14px);
	background: var(--obd-surface, #fff);
	padding: 18px 16px;
}
.alttune-obd-offer-title {
	font-family: var(--font-display, 'Jost', sans-serif);
	font-weight: 700; font-size: 15px; line-height: 1.25;
	color: var(--obd-ink, #050505); margin: 0 0 6px; text-transform: none;
}
.alttune-obd-offer-text {
	font-size: 13px; line-height: 1.5; color: var(--obd-ink-muted, #6b7177); margin: 0 0 14px;
}
.alttune-obd-offer-btn { width: 100%; justify-content: center; }
.alttune-obd-offer--ecu { text-align: center; }
.alttune-obd-offer-img {
	display: block; width: 100%; max-width: 170px; height: auto; margin: 2px auto 12px;
}


/* Offers: sidebar copy on desktop (stacked); inline copy under Symptoms/Causes on
   mobile, where the two blocks sit side by side (2 columns) with matching heights. */
.alttune-obd-offers--inline { display: none; }
@media (max-width: 920px) {
	.alttune-obd-offers--side { display: none; }
	/* The two offers join into ONE unified card (no gap, shared border + a
	   divider between them) — not two detached elements. */
	.alttune-obd-offers--inline {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		align-items: stretch;
		margin: 6px 0 28px;
		border: 1px solid var(--obd-line);
		border-radius: var(--obd-radius, 14px);
		background: var(--obd-surface, #fff);
		overflow: hidden;
	}
	.alttune-obd-offers--inline .alttune-obd-offer {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 16px 14px;
		border: 0;
		border-radius: 0;
		background: transparent;
	}
	.alttune-obd-offers--inline .alttune-obd-offer:first-child {
		border-right: 1px solid var(--obd-line);
	}
	.alttune-obd-offers--inline .alttune-obd-offer-btn { margin-top: auto; }
	/* Both images share the SAME height so the title/text below them line up:
	   the scene photo fills (cover), the box PNG fits whole (contain). */
	.alttune-obd-offers--inline .alttune-obd-offer-photo,
	.alttune-obd-offers--inline .alttune-obd-offer-img {
		width: 100%;
		max-width: none;
		height: 110px;
		margin: 0 0 12px;
		border-radius: 8px;
	}
	.alttune-obd-offers--inline .alttune-obd-offer-photo { object-fit: cover; }
	.alttune-obd-offers--inline .alttune-obd-offer-img { object-fit: contain; }
}


/* "Tune it yourself" scene photo — full width with rounded corners (the box PNG
   above keeps its own treatment via .alttune-obd-offer-img). */
.alttune-obd-offer-photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 0 0 14px;
	object-fit: cover;
}


/* Center the offer titles (e.g. "Tune it yourself"). */
.alttune-obd-offer-title { text-align: center; }