/*
 * LogRock Cost Per Mile Calculator.
 *
 * EVERY rule is scoped under .lrcpm. No bare element selectors, ever — a global
 * `button {}` rule here would restyle or hide the "Your Privacy Choices" button
 * that mu-plugins/your-privacy-choices-link.php prints in the footer, and that
 * button is a CPRA requirement, not decoration.
 *
 * Colours and fonts come from the Elementor global kit so the block tracks a
 * rebrand automatically, each with the current literal as a fallback for the
 * Elementor editor preview and anywhere the kit stylesheet has not loaded.
 */

.lrcpm {
	/* Palette — Elementor kit post-568. */
	--lrcpm-ink:        var(--e-global-color-primary,   #111827);
	--lrcpm-gold:       var(--e-global-color-4662d3b,   #F3C14A);
	--lrcpm-text:       var(--e-global-color-text,      #324A6D);
	--lrcpm-muted:      var(--e-global-color-7268922,   #6B7280);
	--lrcpm-faint:      var(--e-global-color-623fb2a,   #9CA3AF);
	--lrcpm-border:     var(--e-global-color-bc93ddb,   #E5E7EB);
	--lrcpm-surface:    var(--e-global-color-secondary, #F3F5F8);
	--lrcpm-surface-2:  var(--e-global-color-c696dce,   #F9FAFB);
	--lrcpm-white:      #FFFFFF;

	/* Chart series. Fuel and insurance carry the gold because they are the two
	   the page is really about; the rest step down in weight so the bar reads
	   as one object rather than a pile of competing colours. */
	--lrcpm-c-fuel:        #F3C14A;
	--lrcpm-c-truck:       #111827;
	--lrcpm-c-insurance:   #B08A1E;
	--lrcpm-c-maintenance: #6B7280;
	--lrcpm-c-hidden:      #C8D5DC;
	/* The buffer is an uplift on everything else, so it reads as the lightest
	   slice rather than competing with the real cost categories. */
	--lrcpm-c-buffer:      #E5E7EB;

	--lrcpm-font-head:   var(--e-global-typography-primary-font-family, "Archivo"), system-ui, -apple-system, sans-serif;
	--lrcpm-font-alt:    var(--e-global-typography-secondary-font-family, "Rubik"), system-ui, sans-serif;
	--lrcpm-font-body:   var(--e-global-typography-text-font-family, "Archivo"), system-ui, -apple-system, sans-serif;

	/*
	 * Geometry sampled from the live site rather than invented: the header's
	 * "Get a quote" button is an 8px radius on #111827, and section cards use
	 * 12px. The original 999px pills and 22px card read as a different product.
	 */
	--lrcpm-radius:    8px;
	--lrcpm-radius-lg: 12px;
	--lrcpm-shadow:    0 10px 20px -12px rgba(17, 24, 39, .18);

	/* Forms read badly at full container width; the surrounding prose does not. */
	--lrcpm-form-max:  920px;

	/*
	 * Spacing scale, 4px base. Before this existed the file mixed .55rem, .7rem,
	 * .85rem, 1.15rem and 1.4rem, which computed to 8.8 / 11.2 / 13.6 / 18.4 /
	 * 22.4px — no two gaps related to each other and the rhythm read as accidental.
	 * Every margin, padding and gap below comes from this scale. Add a step here
	 * rather than inventing a one-off value.
	 */
	--lrcpm-s1:  4px;
	--lrcpm-s2:  8px;
	--lrcpm-s3: 12px;
	--lrcpm-s4: 16px;
	--lrcpm-s5: 24px;
	--lrcpm-s6: 32px;
	--lrcpm-s7: 40px;
	--lrcpm-s8: 56px;

	/* One height for every control, so fields and buttons sit on one line. */
	--lrcpm-control-h: 48px;

	font-family: var(--lrcpm-font-body);
	color: var(--lrcpm-text);
	line-height: 1.6;
	container-type: inline-size;
}

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

/*
 * The `hidden` attribute is display:none from the UA stylesheet, which any class
 * that sets display beats — `.lrcpm-btn { display: inline-flex }` was enough to
 * leave the submit and restart buttons on screen from step one. The wizard hides
 * everything through this attribute, so it has to win.
 */
.lrcpm [hidden] { display: none !important; }

/*
 * Weight 700 and a tight leading, matching the site's own H1 (Archivo 700,
 * 64px/1.05). The earlier 600 read a step lighter than every other page.
 */
.lrcpm h2,
.lrcpm h3,
.lrcpm h4 {
	font-family: var(--lrcpm-font-head);
	color: var(--lrcpm-ink);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 .6em;
	letter-spacing: -.02em;
	/*
	 * The Elementor kit capitalises headings, which turned our sentence-case
	 * copy into "Where The Money Goes" and "Is Your Insurance Line Bigger Than
	 * It Needs To Be?". The copy is written deliberately; leave it alone.
	 */
	text-transform: none;
}

.lrcpm p { margin: 0 0 1em; }
.lrcpm p:last-child { margin-bottom: 0; }

.lrcpm a { color: var(--lrcpm-ink); text-underline-offset: .2em; }

/* ---------- Buttons ---------- */

/*
 * Buttons follow the site header: dark #111827, white text, 8px radius,
 * Archivo at its normal weight. `--gold` stays the accent it is elsewhere on
 * the site — a highlight, not the primary action colour.
 */
.lrcpm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lrcpm-s2);
	min-height: var(--lrcpm-control-h);
	padding: 0 var(--lrcpm-s5);
	border: 1px solid transparent;
	border-radius: var(--lrcpm-radius);
	font: inherit;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.lrcpm-btn:focus-visible {
	outline: 3px solid var(--lrcpm-gold);
	outline-offset: 2px;
}

/*
 * `.lrcpm` in front is load-bearing, not decoration. `.lrcpm a` is one class
 * plus one element (0,1,1) and beats a lone `.lrcpm-btn--primary` (0,1,0), so
 * the anchor-flavoured buttons rendered ink-on-ink — invisible. Same family of
 * bug as defect #2 in the runbook. Count the specificity before assuming a rule
 * here does nothing.
 */
.lrcpm .lrcpm-btn--primary {
	background: var(--lrcpm-ink);
	color: #fff;
}

.lrcpm .lrcpm-btn--primary:hover { background: #000; }

/* On the dark CTA panel the dark button would vanish, so there the gold leads. */
.lrcpm .lrcpm-cta .lrcpm-btn--primary {
	background: var(--lrcpm-gold);
	color: var(--lrcpm-ink);
	font-weight: 600;
}

.lrcpm .lrcpm-cta .lrcpm-btn--primary:hover { background: #f7cf68; }

.lrcpm .lrcpm-btn--ghost {
	background: transparent;
	border-color: var(--lrcpm-border);
	color: var(--lrcpm-ink);
}

.lrcpm .lrcpm-btn--ghost:hover { background: var(--lrcpm-surface); }

.lrcpm-btn[disabled],
.lrcpm-btn[aria-disabled="true"] {
	opacity: .38;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---------- Wizard shell ---------- */

/*
 * The form is capped and centred. At the site's full 1210px container the
 * two-column grid stretched inputs to ~590px each and left the copy column
 * floating in dead space; a form reads far better narrow. The prose sections
 * below keep their own, wider measures.
 */
.lrcpm-wizard {
	max-width: var(--lrcpm-form-max);
	margin-inline: auto;
}

/*
 * The white panel the steps live in. The progress row sits above it rather than
 * inside, so the card reads as "the question being asked" and the progress as
 * "where you are" — two different things that looked like one when they shared
 * a border.
 */
.lrcpm-card {
	display: flex;
	flex-direction: column;
	background: var(--lrcpm-white);
	border: 1px solid var(--lrcpm-border);
	border-radius: var(--lrcpm-radius-lg);
	box-shadow: var(--lrcpm-shadow);
	padding: var(--lrcpm-s7) var(--lrcpm-s7) var(--lrcpm-s6);
	/*
	 * Reserved height, with the nav pinned to the bottom of it below. Clicking
	 * Next six times in the same place is the whole interaction, and the control
	 * moving between presses is what made it feel unreliable: it drifted 240px
	 * across the seven steps before this.
	 *
	 * 38rem is chosen, not guessed. It leaves 33px of drift — less than the
	 * button's own 48px height, so the pointer is still over the button after the
	 * card changes size, which is the property that actually matters. Reserving
	 * enough for zero drift needs 41rem and leaves 189px of visible dead space on
	 * the two-field steps, which reads as a mistake rather than as breathing room.
	 */
	min-height: 38rem;
}

@container (max-width: 639px) {
	.lrcpm-card {
		padding: var(--lrcpm-s5) var(--lrcpm-s4) var(--lrcpm-s5);
		min-height: 0;
	}
}

.lrcpm-progress { margin-bottom: var(--lrcpm-s4); }

.lrcpm-progress__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--lrcpm-s4);
	margin-bottom: var(--lrcpm-s3);
	font-family: var(--lrcpm-font-alt);
	font-size: .8125rem;
}

.lrcpm-progress__label {
	font-weight: 600;
	color: var(--lrcpm-ink);
}

.lrcpm-progress__count { color: var(--lrcpm-muted); font-variant-numeric: tabular-nums; }

/*
 * The whole progress device: one tick per step, filled up to the current one.
 * It replaced a filled bar plus a percentage plus a per-step badge, all of which
 * said the same thing. Ticks beat a percentage here because the visitor's real
 * question is "how many more of these", which a count answers and a percentage
 * makes them do arithmetic for.
 */
.lrcpm-progress__ticks {
	display: flex;
	gap: var(--lrcpm-s1);
}

.lrcpm-progress__tick {
	flex: 1;
	height: 3px;
	border-radius: 999px;
	background: var(--lrcpm-border);
	transition: background-color .3s ease;
}

.lrcpm-progress__tick.is-done { background: var(--lrcpm-ink); }

/* ---------- Steps ---------- */

.lrcpm-step {
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0; /* fieldset defaults break grid children otherwise */
}

.lrcpm-step[hidden] { display: none; }

.lrcpm-step__title {
	display: block;
	width: 100%;
	padding: 0;
	font-family: var(--lrcpm-font-head);
	font-size: clamp(1.375rem, 2.6vw, 1.75rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--lrcpm-ink);
	margin-bottom: var(--lrcpm-s2);
}

.lrcpm-step__title:focus { outline: none; }
.lrcpm-step__title:focus-visible { outline: 3px solid var(--lrcpm-gold); outline-offset: 4px; }

.lrcpm .lrcpm-step__body {
	/* 68ch, not 56: a one-line intro was wrapping with half the card still empty. */
	max-width: 68ch;
	color: var(--lrcpm-muted);
	font-size: .9375rem;
	margin-bottom: var(--lrcpm-s5);
}

.lrcpm-grid {
	display: grid;
	gap: var(--lrcpm-s5) var(--lrcpm-s5);
	grid-template-columns: 1fr;
	align-content: start;
}

@container (min-width: 640px) {
	.lrcpm-grid { grid-template-columns: 1fr 1fr; }
	.lrcpm-field--wide { grid-column: 1 / -1; }
}

/*
 * Five short fields read better in three columns than in two-and-a-half, and it
 * takes a row out of the tallest step — which is what lets the whole wizard hold
 * one reserved height and stop the forward control moving.
 */
@container (min-width: 800px) {
	.lrcpm-grid--dense { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Fields ---------- */

.lrcpm-field__label {
	display: block;
	font-weight: 600;
	font-size: .875rem;
	color: var(--lrcpm-ink);
	margin-bottom: var(--lrcpm-s2);
}

.lrcpm-field__optional {
	font-weight: 400;
	color: var(--lrcpm-faint);
	font-size: .82em;
}

.lrcpm-field__control {
	display: flex;
	align-items: center;
	min-height: var(--lrcpm-control-h);
	background: var(--lrcpm-white);
	border: 1px solid var(--lrcpm-border);
	border-radius: var(--lrcpm-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.lrcpm-field__control:focus-within {
	border-color: var(--lrcpm-ink);
	box-shadow: 0 0 0 3px rgba(243, 193, 74, .35);
}

.lrcpm-field__control input,
.lrcpm-field__control select {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0 var(--lrcpm-s3);
	font: inherit;
	font-size: 1rem;
	color: var(--lrcpm-ink);
}

.lrcpm-field__control input:focus,
.lrcpm-field__control select:focus { outline: none; }

.lrcpm-field__affix {
	flex: 0 0 auto;
	padding: 0 var(--lrcpm-s1) 0 var(--lrcpm-s3);
	color: var(--lrcpm-muted);
	font-size: .875rem;
}

.lrcpm-field__affix + input { padding-left: var(--lrcpm-s1); }
.lrcpm-field__control input + .lrcpm-field__affix { padding: 0 var(--lrcpm-s3) 0 var(--lrcpm-s1); }

/*
 * The hint and the validation error share this line.
 *
 * In the two- and three-column grids the line is reserved even when empty, so a
 * hintless field keeps the same height as its neighbours and the rows stay
 * aligned. In one column there is nothing to align to, and reserving it just put
 * a blank gap under every hintless field — so there it collapses.
 */
.lrcpm .lrcpm-field__help {
	margin: var(--lrcpm-s2) 0 0;
	font-size: .8125rem;
	line-height: 1.35;
	color: var(--lrcpm-muted);
}

@container (min-width: 640px) {
	.lrcpm .lrcpm-field__help { min-height: 1.35em; }
}

.lrcpm-field__error {
	display: block;
	color: #B3261E;
	font-weight: 600;
}

.lrcpm-field--invalid .lrcpm-field__control { border-color: #B3261E; }
.lrcpm-field--invalid .lrcpm-field__hint { display: none; }

/* ---------- Coverage toggles ---------- */

.lrcpm-toggles {
	display: grid;
	gap: var(--lrcpm-s2);
	align-content: start;
}

/*
 * A labelled switch rather than a checkbox: the question is "is this included?"
 * and a switch answers it without the visitor parsing a tick. The real input is
 * visually hidden but still focusable, so keyboard and screen-reader behaviour
 * is the browser's own.
 */
.lrcpm-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lrcpm-s4);
	min-height: var(--lrcpm-control-h);
	padding: var(--lrcpm-s2) var(--lrcpm-s3);
	border: 1px solid var(--lrcpm-border);
	border-radius: var(--lrcpm-radius);
	background: var(--lrcpm-white);
	cursor: pointer;
}

.lrcpm-toggle__label {
	font-size: .9rem;
	font-weight: 500;
	color: var(--lrcpm-ink);
}

.lrcpm-toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.lrcpm-toggle__switch {
	position: relative;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 1.5rem;
	border-radius: 999px;
	background: var(--lrcpm-border);
	transition: background-color .18s ease;
}

.lrcpm-toggle__switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: var(--lrcpm-white);
	box-shadow: 0 1px 3px rgba(17, 24, 39, .25);
	transition: transform .18s ease;
}

.lrcpm-toggle:has(input:checked) .lrcpm-toggle__switch { background: var(--lrcpm-ink); }
.lrcpm-toggle:has(input:checked) .lrcpm-toggle__switch::after { transform: translateX(1.25rem); }

.lrcpm-toggle:has(input:focus-visible) .lrcpm-toggle__switch {
	outline: 3px solid var(--lrcpm-gold);
	outline-offset: 2px;
}

/* ---------- Live per-step readout ---------- */

/*
 * The per-step answer. This is the one thing that rewards typing, so it gets the
 * typographic contrast: a quiet 12px label over a large tabular figure. Tabular
 * matters — the figure updates on every keystroke, and proportional digits make
 * it jitter sideways while someone is still typing.
 */
.lrcpm-live {
	margin-top: var(--lrcpm-s6);
	padding: var(--lrcpm-s4) var(--lrcpm-s5);
	border-radius: var(--lrcpm-radius);
	background: var(--lrcpm-surface);
	border: 1px solid var(--lrcpm-border);
	border-left: 3px solid var(--lrcpm-ink);
}

.lrcpm-live__label {
	display: block;
	font-family: var(--lrcpm-font-alt);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--lrcpm-muted);
	font-weight: 600;
}

.lrcpm-live__value {
	display: block;
	margin-top: var(--lrcpm-s1);
	font-family: var(--lrcpm-font-head);
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--lrcpm-ink);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.lrcpm-live__unit {
	display: block;
	margin-top: var(--lrcpm-s1);
	font-size: .75rem;
	color: var(--lrcpm-muted);
}

/* ---------- Navigation ---------- */

/*
 * Controls only. The step counter moved up into the progress row, so Back sits
 * hard left and the forward action hard right with nothing between them to read.
 */
.lrcpm-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lrcpm-s3);
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: var(--lrcpm-s5);
	border-top: 1px solid var(--lrcpm-border);
}

/* The step needs the gap above the nav rule even when the nav is pinned. */
.lrcpm-step,
.lrcpm-results { margin-bottom: var(--lrcpm-s6); }

.lrcpm-nav__hint {
	margin-left: auto;
	font-size: .8125rem;
	color: var(--lrcpm-muted);
}

/* ---------- Gate ---------- */

/*
 * Full width, stretched. The gate is the one step where there is a single thing
 * to do, so the submit spans the form rather than sitting at its natural width
 * next to empty space — and on a phone it is the same shape, so the step reads
 * identically at both ends.
 */
.lrcpm-gate__action {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--lrcpm-s3);
	margin-top: var(--lrcpm-s5);
}

.lrcpm-gate__action .lrcpm-btn { width: 100%; }

.lrcpm-teaser {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lrcpm-s4);
	flex-wrap: wrap;
	padding: var(--lrcpm-s5);
	margin-bottom: var(--lrcpm-s5);
	border-radius: var(--lrcpm-radius);
	background: var(--lrcpm-ink);
	color: #fff;
}

.lrcpm-teaser__label { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; opacity: .7; }
.lrcpm-teaser__value {
	font-family: var(--lrcpm-font-head);
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--lrcpm-gold);
	font-variant-numeric: tabular-nums;
}

.lrcpm .lrcpm-consent {
	font-size: .8rem;
	color: var(--lrcpm-muted);
	margin: 0;
}

/* Honeypot: off-canvas rather than display:none, which many bots skip. */
.lrcpm-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Results ---------- */

.lrcpm-results[hidden] { display: none; }

.lrcpm-results__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: var(--lrcpm-s2);
}

.lrcpm-results__title:focus { outline: none; }
.lrcpm-results__title:focus-visible { outline: 3px solid var(--lrcpm-gold); outline-offset: 4px; }

.lrcpm .lrcpm-results__body {
	color: var(--lrcpm-muted);
	max-width: 60ch;
	font-size: .9375rem;
	margin-bottom: var(--lrcpm-s5);
}

.lrcpm-metrics {
	display: grid;
	gap: var(--lrcpm-s3);
	grid-template-columns: 1fr;
	margin-bottom: var(--lrcpm-s3);
}

@container (min-width: 720px) {
	.lrcpm-metrics { grid-template-columns: repeat(3, 1fr); }
}

.lrcpm-metric {
	padding: var(--lrcpm-s5);
	border-radius: var(--lrcpm-radius);
	border: 1px solid var(--lrcpm-border);
	background: var(--lrcpm-white);
	display: flex;
	flex-direction: column;
	gap: var(--lrcpm-s2);
}

.lrcpm-metric__label {
	font-family: var(--lrcpm-font-alt);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	font-weight: 600;
	color: var(--lrcpm-muted);
}

.lrcpm-metric__value {
	font-family: var(--lrcpm-font-head);
	font-size: clamp(1.875rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--lrcpm-ink);
	font-variant-numeric: tabular-nums;
}

.lrcpm-metric__note { font-size: .82rem; color: var(--lrcpm-muted); }

.lrcpm-metric--hero {
	background: var(--lrcpm-ink);
	border-color: var(--lrcpm-ink);
}

.lrcpm-metric--hero .lrcpm-metric__label { color: rgba(255, 255, 255, .62); }
.lrcpm-metric--hero .lrcpm-metric__value { color: var(--lrcpm-gold); }
.lrcpm-metric--hero .lrcpm-metric__note { color: rgba(255, 255, 255, .62); }

.lrcpm-secondary {
	display: grid;
	gap: var(--lrcpm-s3);
	grid-template-columns: 1fr;
	margin-bottom: var(--lrcpm-s6);
}

@container (min-width: 640px) {
	.lrcpm-secondary { grid-template-columns: 1fr 1fr; }
}

.lrcpm-secondary__item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--lrcpm-s4);
	padding: var(--lrcpm-s4) var(--lrcpm-s5);
	border-radius: var(--lrcpm-radius);
	background: var(--lrcpm-surface);
}

.lrcpm-secondary__label { font-size: .875rem; color: var(--lrcpm-muted); }
.lrcpm-secondary__value { font-weight: 600; color: var(--lrcpm-ink); font-variant-numeric: tabular-nums; }

/* ---------- Breakdown ---------- */

.lrcpm-breakdown {
	padding: var(--lrcpm-s5);
	border-radius: var(--lrcpm-radius);
	border: 1px solid var(--lrcpm-border);
	background: var(--lrcpm-surface-2);
	margin-bottom: var(--lrcpm-s5);
}

.lrcpm-breakdown__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--lrcpm-s4);
	flex-wrap: wrap;
	margin-bottom: var(--lrcpm-s4);
}

.lrcpm-breakdown__head h4 { margin: 0; font-size: 1.0625rem; }
.lrcpm-breakdown__note { font-family: var(--lrcpm-font-alt); font-size: .75rem; color: var(--lrcpm-muted); }

.lrcpm-bar {
	display: flex;
	height: 14px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--lrcpm-border);
}

.lrcpm-bar__seg { height: 100%; transition: width .5s cubic-bezier(.4, 0, .2, 1); }

.lrcpm-legend {
	list-style: none;
	margin: var(--lrcpm-s4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--lrcpm-s2);
	grid-template-columns: 1fr;
}

@container (min-width: 640px) {
	.lrcpm-legend { grid-template-columns: 1fr 1fr; column-gap: var(--lrcpm-s6); }
}

.lrcpm-legend__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lrcpm-s3);
	font-size: .875rem;
	padding-bottom: var(--lrcpm-s2);
	border-bottom: 1px solid var(--lrcpm-border);
}

.lrcpm-legend__name { display: flex; align-items: center; gap: var(--lrcpm-s2); }

.lrcpm-legend__dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex: 0 0 auto;
}

.lrcpm-legend__value { font-weight: 600; color: var(--lrcpm-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lrcpm-legend__pct { color: var(--lrcpm-muted); font-weight: 400; }

/* ---------- Insights ---------- */

.lrcpm-insights { display: grid; gap: var(--lrcpm-s2); margin-bottom: var(--lrcpm-s6); }

.lrcpm-insight {
	display: flex;
	gap: var(--lrcpm-s3);
	padding: var(--lrcpm-s4) var(--lrcpm-s5);
	border-radius: var(--lrcpm-radius);
	background: var(--lrcpm-surface);
	border: 1px solid var(--lrcpm-border);
	font-size: .92rem;
}

.lrcpm-insight__mark { flex: 0 0 auto; font-weight: 700; color: var(--lrcpm-ink); }

/* ---------- CTA ---------- */

.lrcpm-cta {
	display: grid;
	gap: var(--lrcpm-s5);
	align-items: center;
	padding: clamp(var(--lrcpm-s5), 4vw, var(--lrcpm-s7));
	border-radius: var(--lrcpm-radius-lg);
	background: var(--lrcpm-ink);
	color: #fff;
}

@container (min-width: 720px) {
	.lrcpm-cta { grid-template-columns: 1.5fr auto; }
}

.lrcpm-cta__eyebrow {
	display: block;
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 600;
	color: var(--lrcpm-gold);
	margin-bottom: var(--lrcpm-s3);
}

/* Needs .lrcpm in front: the `.lrcpm h2, h3, h4` block above is one class plus
   one element, so a lone class here loses to it and the heading renders in ink
   on an ink panel — invisible. Same for any other heading on a dark surface. */
.lrcpm .lrcpm-cta__title { color: #fff; font-size: clamp(1.3rem, 3vw, 1.8rem); margin-bottom: var(--lrcpm-s3); }
.lrcpm-cta__text { color: rgba(255, 255, 255, .72); margin: 0; max-width: 52ch; }

/* ---------- Notices ---------- */

.lrcpm-notice {
	padding: var(--lrcpm-s4) var(--lrcpm-s5);
	border-radius: var(--lrcpm-radius);
	font-size: .9375rem;
	border: 1px solid var(--lrcpm-border);
	background: var(--lrcpm-surface);
}

.lrcpm-notice--error {
	border-color: rgba(179, 38, 30, .4);
	background: rgba(179, 38, 30, .07);
	color: #7F1D1D;
	margin-top: var(--lrcpm-s5);
}

.lrcpm-notice--info { border-left: 4px solid var(--lrcpm-gold); }

/* ---------- Benchmarks ---------- */

.lrcpm-bench {
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	max-width: var(--lrcpm-form-max);
	margin-inline: auto;
}

.lrcpm-bench__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}

.lrcpm-bench__title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0; }

.lrcpm-bench__note { font-size: .78rem; color: var(--lrcpm-muted); }

.lrcpm-bench__cards {
	display: grid;
	gap: var(--lrcpm-s3);
	grid-template-columns: 1fr;
}

@container (min-width: 640px) {
	.lrcpm-bench__cards { grid-template-columns: 1fr 1fr; }
}

/*
 * A row per category rather than a table: there are only two values to compare
 * — the name and the range — and a table's header row earned nothing.
 */
.lrcpm-bench__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lrcpm-s4);
	padding: var(--lrcpm-s4) var(--lrcpm-s5);
	border: 1px solid var(--lrcpm-border);
	border-radius: var(--lrcpm-radius);
	background: var(--lrcpm-surface-2);
}

.lrcpm-bench__card-label { font-weight: 600; color: var(--lrcpm-ink); }

.lrcpm-bench__card-value {
	font-weight: 600;
	color: var(--lrcpm-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.lrcpm-bench__card-unit { font-size: .75rem; font-weight: 400; color: var(--lrcpm-muted); margin-left: .25em; }

.lrcpm .lrcpm-bench__source { margin-top: 1.25rem; font-size: .8rem; color: var(--lrcpm-muted); }

.lrcpm-disclaimer {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--lrcpm-border);
	font-size: .8rem;
	color: var(--lrcpm-muted);
	max-width: 78ch;
}

.lrcpm-disclaimer strong { color: var(--lrcpm-ink); }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.lrcpm *,
	.lrcpm *::before,
	.lrcpm *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ---------- Print ---------- */

@media print {
	.lrcpm-progress,
	.lrcpm-nav,
	.lrcpm-step,
	.lrcpm-cta { display: none !important; }

	.lrcpm-card { box-shadow: none; border: 0; padding: 0; min-height: 0; }
	.lrcpm-metric--hero { background: none; border: 1px solid #000; }
	.lrcpm-metric--hero .lrcpm-metric__label,
	.lrcpm-metric--hero .lrcpm-metric__value,
	.lrcpm-metric--hero .lrcpm-metric__note { color: #000; }
}

/* ================================================================ Hero ==== */

/*
 * A deliberate dark panel. The rest of logrock.com is light, so this reads as
 * a landing page rather than a content page — and it makes the white
 * calculator card below it the obvious next thing to look at.
 *
 * It breaks out of the 920px column to full bleed, because a dark band that
 * stops short of the viewport edges looks like a mistake.
 */
.lrcpm-hero {
	position: relative;
	margin: 0 calc(50% - 50vw) clamp(2rem, 5vw, 3.5rem);
	/*
	 * 5vw horizontally, not a clamp: the hero is viewport-wide, and Elementor's
	 * container gutter is 5% of the same width. A clamp capped at 2rem left the
	 * hero copy 6px inside everything else below 1024px.
	 */
	padding: clamp(2.5rem, 7vw, 5rem) 5vw;
	background: var(--lrcpm-ink);
	color: #fff;
	overflow: hidden;
}

.lrcpm-hero__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
	/*
	 * Same column as the form and the sections below. A wider hero looked
	 * better in isolation but sat 6-20px off the rest of the page, and a
	 * near-miss reads worse than a narrower band that lines up exactly.
	 */
	max-width: var(--lrcpm-form-max);
	margin-inline: auto;
}

@container (min-width: 820px) {
	.lrcpm-hero__inner { grid-template-columns: 1.1fr 1fr; }
}

.lrcpm-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .35rem .85rem;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06);
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .85);
}

.lrcpm-hero__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--lrcpm-gold);
	flex: 0 0 auto;
}

.lrcpm .lrcpm-hero__title {
	margin: 1.25rem 0 0;
	color: #fff;
	font-size: clamp(2rem, 5.5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.025em;
	text-transform: none;
}

.lrcpm-hero__accent { color: var(--lrcpm-gold); }

.lrcpm-hero__lede {
	margin-top: 1.25rem;
	max-width: 34rem;
	font-size: clamp(1rem, 2vw, 1.125rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}

.lrcpm-hero__sub {
	margin-top: .75rem;
	max-width: 34rem;
	font-size: .92rem;
	color: rgba(255, 255, 255, .55);
}

/* The two CTAs sit side by side in the reference; they only stack on narrow
   screens. Without the shrink they wrapped at the 920px content cap. */
.lrcpm-hero__actions .lrcpm-btn { padding-inline: 1.4rem; }

.lrcpm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.75rem;
}

/* On the dark panel the gold leads, mirroring the results CTA. */
.lrcpm .lrcpm-btn--onDark {
	background: var(--lrcpm-gold);
	color: var(--lrcpm-ink);
	font-weight: 600;
}

.lrcpm .lrcpm-btn--onDark:hover { background: #f7cf68; }

.lrcpm .lrcpm-btn--ghostDark {
	background: transparent;
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}

.lrcpm .lrcpm-btn--ghostDark:hover { background: rgba(255, 255, 255, .1); }

/* ---------- The example card ---------- */

.lrcpm-hero__panel {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--lrcpm-radius-lg);
	background: rgba(255, 255, 255, .04);
}

.lrcpm-hero__panel-head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .11em;
	color: rgba(255, 255, 255, .45);
}

.lrcpm-hero__panel-figures {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.35rem;
}

.lrcpm-hero__panel-label {
	display: block;
	font-size: .82rem;
	color: rgba(255, 255, 255, .6);
}

.lrcpm-hero__panel-value {
	display: block;
	margin-top: .2rem;
	font-family: var(--lrcpm-font-head);
	font-size: clamp(2.25rem, 6vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--lrcpm-gold);
	font-variant-numeric: tabular-nums;
}

.lrcpm-hero__panel-rate {
	text-align: right;
	font-size: .95rem;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.lrcpm-hero__bar {
	display: flex;
	height: 12px;
	margin-top: 1.35rem;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, .1);
}

.lrcpm-hero__seg { height: 100%; }

.lrcpm-hero__legend {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem 1rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .78rem;
	color: rgba(255, 255, 255, .7);
}

.lrcpm-hero__legend li {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.lrcpm-hero__chip {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	flex: 0 0 auto;
}

.lrcpm-hero__seg--fuel,        .lrcpm-hero__chip--fuel        { background: var(--lrcpm-c-fuel); }
.lrcpm-hero__seg--truck,       .lrcpm-hero__chip--truck       { background: #fff; }
.lrcpm-hero__seg--insurance,   .lrcpm-hero__chip--insurance   { background: var(--lrcpm-c-insurance); }
.lrcpm-hero__seg--maintenance, .lrcpm-hero__chip--maintenance { background: #9CA3AF; }
.lrcpm-hero__seg--hidden,      .lrcpm-hero__chip--hidden      { background: var(--lrcpm-c-hidden); }
.lrcpm-hero__seg--buffer,      .lrcpm-hero__chip--buffer      { background: rgba(255, 255, 255, .28); }

.lrcpm-hero__panel-note {
	margin-top: 1rem;
	font-size: .72rem;
	color: rgba(255, 255, 255, .42);
}

/* ================================================ Section furniture ==== */

.lrcpm-eyebrow {
	display: block;
	margin-bottom: .5rem;
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--lrcpm-muted);
}

.lrcpm-section__head {
	max-width: var(--lrcpm-form-max);
	margin: 0 auto 1.5rem;
}

.lrcpm .lrcpm-section__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 0;
}

/* ========================================== Centring the narrow blocks ==== */

/*
 * Anything narrower than its container is centred rather than left-hugging.
 *
 * Centring a capped paragraph on its own would only indent it under a
 * full-width heading, so each prose section becomes ONE centred reading column
 * — eyebrow, heading and body share a measure and all sit centred. Data that
 * needs the room (the benchmark table, the stat cards, the form) keeps 920px.
 *
 * Two things this got wrong first time round, both worth remembering:
 *
 * 1. The measure is in rem, NOT ch. `ch` scales with the element's own font
 *    size, so 68ch on a 32px heading is about 1150px — wider than the column,
 *    so the cap silently did nothing on every heading.
 * 2. The selectors carry `.lrcpm` in front. `.lrcpm p { margin: 0 0 1em }` is a
 *    class plus an element, which outranks a lone class, so `margin-inline:
 *    auto` lost and nothing moved.
 */
.lrcpm {
	--lrcpm-read-max: 42rem;  /* ~672px — a comfortable line for body copy. */
}

/*
 * Descendant selectors, not direct-child ones. `.lrcpm-bench > .lrcpm-eyebrow`
 * never matched, because that eyebrow sits inside `.lrcpm-bench__head` — so it
 * ran the full column width while the heading below it was capped, and the two
 * did not line up. A descendant selector does not care how the markup is
 * nested.
 */
.lrcpm .lrcpm-disclaimer > p {
	max-width: var(--lrcpm-read-max);
	margin-inline: auto;
}

/* The disclaimer is the last thing on the page; give it the section column. */
.lrcpm .lrcpm-disclaimer {
	max-width: var(--lrcpm-form-max);
	margin-inline: auto;
}

/*
 * Inside the form the step intro sits directly above full-width inputs, so it
 * matches the card rather than being centred — a centred paragraph over
 * left-aligned fields reads as a mistake.
 */
.lrcpm .lrcpm .lrcpm-step__body { max-width: none; }
.lrcpm .lrcpm .lrcpm-results__body { max-width: none; }

/* ---------- Button hover keeps its colour ---------- */

/*
 * The theme's own link-hover rule was repainting these to ink — white text on
 * the dark hero turned near-black on hover and effectively vanished. The
 * resting rules set colour but the hover rules did not, so the more specific
 * :hover selector elsewhere won. Stating it on hover settles it.
 */
.lrcpm .lrcpm-btn--ghostDark:hover,
.lrcpm .lrcpm-btn--ghostDark:focus-visible { color: #fff; }

.lrcpm .lrcpm-btn--onDark:hover,
.lrcpm .lrcpm-btn--onDark:focus-visible,
.lrcpm .lrcpm-cta .lrcpm-btn--primary:hover,
.lrcpm .lrcpm-cta .lrcpm-btn--primary:focus-visible { color: var(--lrcpm-ink); }

.lrcpm .lrcpm-btn--primary:hover,
.lrcpm .lrcpm-btn--primary:focus-visible { color: #fff; }

.lrcpm .lrcpm-btn--ghost:hover,
.lrcpm .lrcpm-btn--ghost:focus-visible { color: var(--lrcpm-ink); }