/**
 * TradeGarden — Field Service Pricing Tool (/tools/service-pricing-calculator/).
 *
 * Layout follows the Lovable prototype; colours, radii and buttons come from
 * the site tokens in tradegarden.css.
 */

/*
 * One left gutter for the whole page — hero row, tool shell and sticky bar all
 * use it, so the breadcrumb, the stats and every card border share a single
 * edge that lines up with the visible left edge of the header logo.
 */
:root {
	--tg-price-tool-gutter: calc(var(--tg-header-gutter, 24px) + var(--tg-logo-optical-inset, 0.125rem));
}

.tg-price-tool {
	--tg-pt-surface: #f7f9fc;
	--tg-pt-radius-card: 10px;
	--tg-pt-radius-panel: 8px;
	--tg-pt-gap: 1.25rem;
	color: var(--tg-color-dark, #595959);
	/* The GenerateBlocks shell centres its children; body copy on this site is
	   left-aligned, so reset here and re-centre only the display panels below. */
	text-align: left;
}

/*
 * Blue hero. Same edge-to-edge treatment as every other blue band on the site
 * (trade landing, comparison PDP, quiz): break out to the full viewport, then
 * re-constrain the inner row to the shared content width + header gutter so the
 * breadcrumb lines up with the logo above it.
 */
.tg-price-tool-hero {
	width: 100vw !important;
	max-width: none !important;
	margin-right: calc(50% - 50vw) !important;
	margin-left: calc(50% - 50vw) !important;
	margin-top: calc(-1 * var(--tg-header-hero-white-gap, 1.5rem)) !important;
	padding-top: 0 !important;
	padding-bottom: var(--tg-blue-hero-pad-bottom, 1.5rem) !important;
	/* GenerateBlocks puts 24px of side padding on the block itself; the gutter
	   belongs on the inner row instead, or it doubles up. */
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: var(--tg-color-primary, #0e49b5) !important;
	color: #ffffff;
}

.tg-price-tool-hero > .gb-inside-container {
	box-sizing: border-box;
	max-width: min(100%, var(--tg-content-max, 1180px)) !important;
	margin: 0 auto !important;
	padding-top: var(--tg-hero-breadcrumb-pad-top, 0.75rem) !important;
	padding-bottom: 0 !important;
	padding-left: var(--tg-price-tool-gutter) !important;
	padding-right: var(--tg-header-gutter, 24px) !important;
}

.tg-price-tool-hero .gb-headline,
.tg-price-tool-hero h1,
.tg-price-tool-hero p {
	color: #ffffff !important;
}

.tg-price-tool-hero .gb-headline-tg-price-tool-kicker,
.tg-price-tool-hero .tg-price-tool-kicker {
	color: #dbeafe !important;
}

/*
 * Breadcrumb colours intentionally come from the shared blue-hero tokens in
 * tradegarden.css (--tg-hero-breadcrumb-link / --tg-hero-breadcrumb-current)
 * so the current page reads differently from its ancestors, exactly like every
 * other hero. Do not re-colour them here.
 */

/* Same max-width + gutter maths as the hero row and the header, so the tool,
   the H1 and the logo all share one left edge. */
.tg-price-tool-shell {
	padding-top: 0.5rem;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.tg-price-tool-shell > .gb-inside-container {
	box-sizing: border-box;
	max-width: min(100%, var(--tg-content-max, 1180px)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--tg-price-tool-gutter) !important;
	padding-right: var(--tg-header-gutter, 24px) !important;
	padding-bottom: 0.5rem !important;
}

/* The artifact wrapper adds another 64px under the shell, which leaves a dead
   band between the last playbook row and the footer. */
.gb-inside-container:has(> .tg-price-tool-shell) {
	padding-bottom: 1rem !important;
}

/* ------------------------------------------------------------ sticky bar */

.tg-price-tool__summary {
	position: sticky;
	top: var(--tg-site-header-height, 72px);
	z-index: 20;
	width: 100vw;
	max-width: none;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	margin-bottom: 1.5rem;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--tg-color-border, #e2e8f0);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
	backdrop-filter: blur(6px);
}

.tg-price-tool__summary-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	box-sizing: border-box;
	width: 100%;
	max-width: min(100%, var(--tg-content-max, 1180px));
	margin: 0 auto;
	padding: 0.6rem var(--tg-header-gutter, 24px) 0.6rem var(--tg-price-tool-gutter);
}

/* Target rate anchors the left edge; job price sits centred in the space left
   between it and the button. */
.tg-price-tool__stat--target {
	flex: 0 0 auto;
	text-align: left;
}

.tg-price-tool__stat--job {
	flex: 1 1 auto;
	text-align: center;
}

.tg-price-tool__stat-label {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__stat-value {
	margin: 0.1rem 0 0;
	font-size: 1.15rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--tg-color-dark, #595959);
}

.tg-price-tool__stat--accent .tg-price-tool__stat-value {
	color: var(--tg-color-primary, #0e49b5);
}

/* Metrics come from .tg-btn--compact (the "Find My Software" pill). */
.tg-price-tool__summary-btn {
	flex: 0 0 auto;
	margin-left: auto;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- cards */

.tg-price-tool__card {
	background: #fff;
	border: 1px solid var(--tg-color-border, #e2e8f0);
	border-radius: var(--tg-pt-radius-card);
	box-shadow: var(--tg-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.05));
	padding: 1.5rem;
}

.tg-price-tool__card-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--tg-color-dark, #595959);
}

.tg-price-tool__card-lede {
	margin: 0.35rem 0 0;
	font-size: 0.9rem;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__section-title {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--tg-color-dark, #595959);
}

.tg-price-tool__section-lede {
	margin: 0.35rem 0 1.25rem;
	font-size: 0.9rem;
	color: var(--tg-color-muted, #64748b);
}

/* ---------------------------------------------------------------- grids */

.tg-price-tool__grid {
	display: grid;
	gap: 0.9rem var(--tg-pt-gap);
	/* Inside a two-column split the grid is stretched to the taller column, and
	   auto rows would soak up that slack — pinning to the start keeps the row
	   spacing identical to a grid that stands on its own. */
	align-content: start;
}

.tg-price-tool__grid--two,
.tg-price-tool__grid--three,
.tg-price-tool__grid--profile {
	grid-template-columns: 1fr;
}

.tg-price-tool__split {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: 1fr;
}

.tg-price-tool__stack {
	display: grid;
	gap: 1.25rem;
	align-content: start;
}

@media (min-width: 600px) {
	.tg-price-tool__grid--two,
	.tg-price-tool__grid--profile {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tg-price-tool__grid--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.tg-price-tool__grid--profile {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tg-price-tool__split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tg-price-tool__split--job {
		grid-template-columns: 1.15fr 1fr;
	}

	.tg-price-tool__rail {
		position: sticky;
		top: calc(var(--tg-site-header-height, 72px) + 5.5rem);
		align-self: start;
	}
}

/* --------------------------------------------------------------- fields */

.tg-price-tool__field {
	display: block;
}

.tg-price-tool__label {
	display: flex;
	align-items: flex-start;
	gap: 0.35rem;
	margin-bottom: 0.25rem;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--tg-color-dark, #595959);
}

.tg-price-tool__hint {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__input-shell {
	position: relative;
	display: block;
}

/* Doubled class so these beat the theme's `input[type="number"]` rules, which
   otherwise leave the select white while every number field reads grey. */
.tg-price-tool .tg-price-tool__input,
.tg-price-tool .tg-price-tool__select {
	/* Without this the padding and border are added *outside* the 100% width and
	   every control spills 24px into the next grid column. */
	box-sizing: border-box;
	width: 100%;
	min-height: 36px;
	padding: 0.3rem 0.65rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--tg-color-dark, #595959);
	background: var(--tg-input-bg, #f7f8f9);
	border: 1px solid var(--tg-input-border-color, #e2e8f0);
	border-radius: var(--tg-radius-control, 7px);
}

.tg-price-tool .tg-price-tool__input:focus,
.tg-price-tool .tg-price-tool__select:focus {
	border-color: var(--tg-input-border-focus, #0e49b5);
	outline: var(--tg-input-focus-ring, 2px solid rgba(14, 73, 181, 0.25));
	outline-offset: 0;
}

.tg-price-tool__input-shell--prefixed .tg-price-tool__input {
	padding-left: 1.6rem;
}

.tg-price-tool__input-shell--suffixed .tg-price-tool__input {
	padding-right: 2rem;
}

.tg-price-tool__affix {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.9rem;
	color: var(--tg-color-muted, #64748b);
	pointer-events: none;
}

.tg-price-tool__affix--prefix {
	left: 0.65rem;
}

.tg-price-tool__affix--suffix {
	right: 0.7rem;
}

/* -------------------------------------------------------------- tooltip */

.tg-price-tool__tip {
	position: relative;
	display: inline-flex;
	flex: none;
}

.tg-price-tool__tip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	padding: 0;
	font-size: 0.62rem;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	color: var(--tg-color-muted, #64748b);
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 50%;
	cursor: help;
}

.tg-price-tool__tip-btn:hover,
.tg-price-tool__tip-btn:focus-visible {
	color: var(--tg-color-primary, #0e49b5);
	background: transparent;
}

.tg-price-tool__tip-text {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 40;
	width: 250px;
	transform: translateX(-50%);
	padding: 0.6rem 0.7rem;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	color: #fff;
	background: #1f2937;
	border-radius: var(--tg-radius-control, 7px);
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
}

.tg-price-tool__tip:hover .tg-price-tool__tip-text,
.tg-price-tool__tip:focus-within .tg-price-tool__tip-text {
	opacity: 1;
	visibility: visible;
}

/* --------------------------------------------------------------- panels */

.tg-price-tool__panel {
	padding: 1.15rem;
	background: var(--tg-color-surface, #fff);
	border: 1px solid var(--tg-color-border, #e2e8f0);
	border-radius: var(--tg-pt-radius-panel);
}

.tg-price-tool__panel--accent {
	background: rgba(87, 197, 153, 0.1);
	border-color: rgba(87, 197, 153, 0.5);
}

.tg-price-tool__panel-title {
	margin: 0 0 0.85rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__panel-note {
	margin: 0.85rem 0 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--tg-color-dark, #595959);
}

.tg-price-tool__panel-fineprint {
	margin: 0.85rem 0 0;
	font-size: 0.72rem;
	line-height: 1.55;
	color: var(--tg-color-muted, #64748b);
}

/* On the green panels the source line reads as a footnote to the note above it,
   so it carries the same body colour rather than the muted grey. */
.tg-price-tool__panel--accent .tg-price-tool__panel-fineprint {
	color: var(--tg-color-dark, #595959);
}

.tg-price-tool__callout {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.15rem;
	background: rgba(87, 197, 153, 0.1);
	border: 0;
	border-radius: var(--tg-pt-radius-panel);
	text-align: center;
}

.tg-price-tool__callout-label {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__callout-value {
	margin: 0.4rem 0 0;
	font-size: 1.75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--tg-color-primary, #0e49b5);
}

.tg-price-tool__callout-note {
	margin: 0.5rem 0 0;
	font-size: 0.72rem;
	line-height: 1.55;
	color: var(--tg-color-muted, #64748b);
}

@media (min-width: 1000px) {
	.tg-price-tool__callout {
		grid-row: span 2;
	}
}

/* Below the 3-column breakpoint the callout is a summary of the inputs above it,
   so it drops to the end of the grid instead of splitting the questions. */
@media (max-width: 999px) {
	.tg-price-tool__grid--profile .tg-price-tool__callout {
		order: 1;
	}
}

.tg-price-tool__mini-card {
	padding: 0.85rem;
	background: #fff;
	border: 1px solid var(--tg-color-border, #e2e8f0);
	border-radius: var(--tg-pt-radius-panel);
}

.tg-price-tool__mini-card-label {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__mini-card-value {
	margin: 0.25rem 0 0;
	font-size: 1.15rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--tg-color-primary, #0e49b5);
}

.tg-price-tool__mini-card-note {
	margin: 0.25rem 0 0;
	font-size: 0.7rem;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__mini-rows {
	padding: 0 0.75rem;
	background: #fff;
	border: 1px solid var(--tg-color-border, #e2e8f0);
	border-radius: var(--tg-pt-radius-panel);
}

/* ------------------------------------------------------------ result rows */

.tg-price-tool__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--tg-color-border, #e2e8f0);
}

.tg-price-tool__row:last-child {
	border-bottom: 0;
}

.tg-price-tool__row-label {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--tg-color-dark, #595959);
}

.tg-price-tool__row-hint {
	margin-top: 0.15rem;
	font-size: 0.72rem;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__row-value {
	flex: none;
	font-size: 0.87rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--tg-color-dark, #595959);
}

/* Pulled out by its own horizontal padding so the label and the figure stay on
   the same edges as the plain rows above it. */
.tg-price-tool__row--emphasis {
	margin: 0 -0.75rem;
	padding: 0.55rem 0.75rem;
	background: rgba(14, 73, 181, 0.06);
	border-bottom: 0;
	border-radius: var(--tg-pt-radius-panel);
}

.tg-price-tool__row--emphasis .tg-price-tool__row-label {
	font-weight: 700;
	color: var(--tg-color-primary, #0e49b5);
}

.tg-price-tool__row--emphasis .tg-price-tool__row-value {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--tg-color-primary, #0e49b5);
}

.tg-price-tool__headline-rows {
	display: grid;
	gap: 0.4rem;
	margin-top: 0.85rem;
}

.tg-price-tool__vs-row {
	margin-top: 0.85rem;
}

/* ---------------------------------------------------------------- steps */

.tg-price-tool__steps {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
}

.tg-price-tool__step {
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--tg-color-border, #e2e8f0);
	border-radius: var(--tg-pt-radius-card);
	box-shadow: var(--tg-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.05));
	scroll-margin-top: calc(var(--tg-site-header-height, 72px) + 5rem);
}

.tg-price-tool__step[open] {
	border-color: rgba(14, 73, 181, 0.3);
}

.tg-price-tool__step-summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.5rem;
	cursor: pointer;
	list-style: none;
}

.tg-price-tool__step-summary::-webkit-details-marker {
	display: none;
}

.tg-price-tool__step-summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 2px solid var(--tg-color-muted, #64748b);
	border-bottom: 2px solid var(--tg-color-muted, #64748b);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.15s ease;
}

.tg-price-tool__step[open] > .tg-price-tool__step-summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.tg-price-tool__step-number {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 0.9rem;
	font-weight: 800;
	color: #fff;
	background: var(--tg-color-primary, #0e49b5);
	border-radius: 50%;
}

.tg-price-tool__step-title {
	display: block;
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--tg-color-dark, #595959);
}

.tg-price-tool__step-subtitle {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__step-body {
	padding: 0 1.5rem 1.5rem;
}

.tg-price-tool__step-lede {
	margin: 0 0 1.5rem;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__step-continue {
	display: flex;
	justify-content: flex-end;
	margin-top: 1.15rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--tg-color-border, #e2e8f0);
}

/* When a contextual "Read the guide" link shares the footer with the Next
   button, split them to opposite edges; wraps to two rows on narrow screens. */
.tg-price-tool__step-continue--split {
	flex-wrap: wrap;
	gap: 0.65rem 1rem;
	align-items: center;
	justify-content: space-between;
}

.tg-price-tool__guide-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--tg-color-primary, #0e49b5);
	text-decoration: none;
}

.tg-price-tool__guide-link:hover,
.tg-price-tool__guide-link:focus-visible {
	text-decoration: underline;
}

/* ------------------------------------------------------------ job pricing */

.tg-price-tool__materials {
	display: grid;
	gap: 0.5rem;
}

.tg-price-tool__material-row {
	display: grid;
	grid-template-columns: 1fr 110px;
	gap: 0.5rem;
}

.tg-price-tool__material-row .tg-price-tool__input {
	min-height: 38px;
	padding: 0.4rem 0.6rem;
	font-size: 0.88rem;
}

.tg-price-tool__input--cost {
	font-variant-numeric: tabular-nums;
}

.tg-price-tool__pert {
	margin: 0.9rem 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tg-color-dark, #595959);
}

.tg-price-tool__pert-value {
	color: var(--tg-color-primary, #0e49b5);
}

.tg-price-tool__pert-formula {
	margin-left: 0.4rem;
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__panel .tg-price-tool__grid + .tg-price-tool__grid,
.tg-price-tool__materials + .tg-price-tool__grid {
	margin-top: 1.15rem;
}

/* ----------------------------------------------------------- recommended */

.tg-price-tool__recommended {
	padding: 1.35rem;
	color: #fff;
	background: var(--tg-color-primary, #0e49b5);
	border-radius: var(--tg-pt-radius-card);
	text-align: center;
}

.tg-price-tool__recommended-label {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.85;
}

.tg-price-tool__recommended-price {
	margin: 0.25rem 0 0;
	font-size: 2.25rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	color: #fff;
}

.tg-price-tool__recommended-method {
	margin: 0.3rem 0 0;
	font-size: 0.85rem;
	opacity: 0.92;
}

.tg-price-tool__recommended-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.tg-price-tool__recommended-stat-label {
	margin: 0;
	font-size: 0.72rem;
	opacity: 0.85;
}

.tg-price-tool__recommended-stat-value {
	margin: 0.1rem 0 0;
	font-size: 0.95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.tg-price-tool__method-guide {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tg-price-tool__method-guide li + li {
	margin-top: 0.75rem;
}

.tg-price-tool__method-guide-name {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--tg-color-primary, #0e49b5);
}

.tg-price-tool__method-guide-when {
	margin: 0.1rem 0 0;
	font-size: 0.82rem;
	color: var(--tg-color-muted, #64748b);
}

/* ----------------------------------------------------------- disclosures */

.tg-price-tool__disclosure {
	padding: 0 1rem;
	background: var(--tg-pt-surface);
	border: 1px solid var(--tg-color-border, #e2e8f0);
	border-radius: var(--tg-pt-radius-panel);
}

.tg-price-tool__disclosure-summary {
	padding: 0.9rem 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tg-color-muted, #64748b);
	cursor: pointer;
}

.tg-price-tool__disclosure-body {
	padding-bottom: 1rem;
}

.tg-price-tool__deflist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tg-price-tool__deflist-item {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__deflist-item:last-child {
	margin-bottom: 0;
}

.tg-price-tool__deflist-item strong {
	color: var(--tg-color-dark, #595959);
}

/* -------------------------------------------------------------- footer */

/* ------------------------------------------------------- email capture */

/*
 * Same band as the "Get the Field Service Business Starter Kit" block on the
 * homepage: full-bleed brand blue, centred column, green submit.
 */
.tg-price-tool__excel {
	width: 100vw;
	max-width: none;
	margin: 3rem calc(50% - 50vw) 0;
	padding: 1.75rem var(--tg-header-gutter, 24px) 2rem;
	background: var(--tg-color-primary, #0e49b5);
}

.tg-price-tool__excel-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

/* Doubled class: the theme colours every .site-content heading dark grey. */
.tg-price-tool .tg-price-tool__excel-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
}

.tg-price-tool__excel-lede {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	line-height: 1.45;
	color: #dbeafe;
}

.tg-price-tool__excel-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem;
	width: 100%;
	max-width: 520px;
}

.tg-price-tool__excel-input {
	box-sizing: border-box;
	flex: 1 1 220px;
	min-width: 0;
	min-height: 42px;
	padding: 0.65rem 0.85rem;
	font-size: 0.92rem;
	background: #fff;
	border: 1px solid var(--tg-input-border-color, #e2e8f0);
	border-radius: var(--tg-radius-control, 7px);
}

.tg-price-tool__excel-submit {
	flex-shrink: 0;
	border: none;
	cursor: pointer;
}

.tg-price-tool__excel-status {
	margin: 0.65rem 0 0;
	font-size: 0.92rem;
	font-weight: 600;
	color: #dbeafe;
}

.tg-price-tool__excel-status--ok {
	color: #d1fae5;
}

.tg-price-tool__excel-status--error {
	color: #fecaca;
}

.tg-price-tool__excel-fine {
	margin: 0.65rem 0 0;
	font-size: 0.78rem;
	color: #dbeafe;
}

/* ------------------------------------------------------------- playbook */

.tg-price-tool__playbook {
	margin-top: 3rem;
}

.tg-price-tool__playbook-list {
	display: grid;
	gap: 0.65rem;
}

/* Same accordion row as the homepage FAQ, including the native open/close
   marker — see .tg-home-faq__item in tradegarden.css. */
.tg-price-tool__playbook-item {
	padding: 0.85rem 1rem;
	background: #fff;
	border: 1px solid var(--tg-color-border, #e2e8f0);
	border-radius: 8px;
	box-shadow: var(--tg-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.05));
}

.tg-price-tool__playbook-summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--tg-color-dark, #595959);
}

.tg-price-tool__playbook-content {
	margin-top: 0.65rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--tg-color-muted, #64748b);
}

.tg-price-tool__playbook-group + .tg-price-tool__playbook-group {
	margin-top: 0.85rem;
}

.tg-price-tool__playbook-heading {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--tg-color-primary, #0e49b5);
}

.tg-price-tool__playbook-body {
	margin: 0.15rem 0 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--tg-color-muted, #64748b);
}

/* ---------------------------------------------------------- print sheet */

.tg-price-tool__print {
	display: none;
}

@media print {
	body * {
		visibility: hidden !important;
	}

	.tg-price-tool__print,
	.tg-price-tool__print * {
		visibility: visible !important;
	}

	.tg-price-tool__print {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		padding: 0;
		color: #1a1a2e;
	}

	.tg-price-tool__print-header {
		padding-bottom: 0.75rem;
		border-bottom: 3px solid #0e49b5;
	}

	.tg-price-tool__print-brand {
		margin: 0;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: #0e49b5;
	}

	.tg-price-tool__print-title {
		margin: 0.2rem 0 0;
		font-size: 1.5rem;
		font-weight: 800;
	}

	.tg-price-tool__print-meta {
		margin: 0.25rem 0 0;
		font-size: 0.8rem;
		color: #555;
	}

	.tg-price-tool__print-section {
		margin-top: 1.1rem;
		page-break-inside: avoid;
	}

	.tg-price-tool__print-section-title {
		margin: 0 0 0.35rem;
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #0e49b5;
	}

	.tg-price-tool__print .tg-price-tool__row {
		padding: 0.3rem 0;
		border-bottom: 1px solid #e2e8f0;
	}

	.tg-price-tool__print .tg-price-tool__row--emphasis {
		padding: 0.35rem 0.5rem;
		background: #eef3fb;
	}

	.tg-price-tool__print-footer {
		margin-top: 1.5rem;
		padding-top: 0.5rem;
		font-size: 0.72rem;
		text-align: center;
		color: #666;
		border-top: 1px solid #e2e8f0;
	}

	.tg-price-tool__summary {
		position: static;
	}
}