.hero {
	margin-bottom: 3rem;
	& .container { border-bottom: solid 0.875em; }
	h1 { font-size:var(--h1-responsive-size-lg); margin-bottom:0.3875em;}
	h4 { margin-bottom: 2.5em; }
	.caption-sm { font-weight: var(--font-weight-light)}
}
.service {
	.service-icon { font-size: 2.75em; margin-bottom: 0.75rem; }
}
section#section-pricing { margin-bottom: 3rem; }
.pricing {
	text-align: center;
	background:#F9F9F9;
	border-radius: var(--base-border-radius);
	box-shadow: var(--base-box-shadow);
	.header {
		background: gray;
		color: white;
		padding: 1rem;
		border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
		h3 { margin: 0;}
	}
	.body {
		font-size: 1.25em;
		margin: 0 auto;
		padding: 2rem 1rem;
		h4 { font-size: var(--font-size-larger)}
		p { margin-bottom: 2em; }
		p:last-child { margin-bottom: 0;}
		svg-icon { color: var(--success-color)}
	}
	.body .d-flex {
		align-items: center;
		span:first-child { margin-right: 2em; }
		span:first-child > * { display: block; text-align: right}
		span:first-child > *:last-child { font-size: 1.875em;}
		span:last-child { text-align: left;}
	}
}
table.list-table {
	width: 100%;
	overflow: hidden;
	background: white;
	margin:0 auto 3rem;
	border-radius: var(--base-border-radius);
	border-collapse: collapse;
	box-shadow: var(--base-box-shadow);
	th { font-size: var(--font-size-large)}
	th, td { padding: 0.75em 1rem; text-align: start; }
	th:first-child, td:first-child { text-align: end;}
	tr:not(:last-child) > td, thead tr > th { border-bottom: solid 1px #ddd; }
	
}
.pricing table.list-table { width: calc(100% - 2rem); }
body.accounting {
	.hero > .container { border-color: var(--category-accounting-color); }
	.hero h1 { color: var(--category-accounting-color)}
	.service-icon { color: var(--category-accounting-color)}
	.service h4 { font-weight: var(--font-weight-heavy); color: var(--category-accounting-color)}
	.pricing .header { background: var(--category-accounting-color)}
	.pricing .body {max-width: 767px;}
}
body.payroll {
	.hero > .container { border-color: var(--category-payroll-color); }
	.hero h1 { color: var(--category-payroll-color)}
	.service-icon { color: var(--category-payroll-color)}
	.service h4 { color: var(--category-payroll-color)}
	.pricing .header { background: var(--category-payroll-color)}
}
body.tax {
	.hero > .container { border-color: var(--category-tax-color); }
	.hero h1 { color: var(--category-tax-color)}
	.service-icon { color: var(--category-tax-color)}
	.service h4 { color: var(--category-tax-color)}
	.pricing .header { background: var(--category-tax-color)}
}
body.m-and-a {
	.hero > .container { border-color: var(--category-m-a-color); }
	.hero h1 { color: var(--category-m-a-color)}
	.service-icon { color: var(--category-m-a-color)}
	.service h4 { color: var(--category-m-a-color-dark)}
	.pricing .header { background: var(--category-m-a-color)}
}
.section-toggle {
	display:flex;
	justify-content:center;
	padding: 3rem 0 0;
	.buttons {
		background: #aaa;
		border-radius: 2rem;
		padding: 0.25rem;
	}
	a.toggle {
		display: inline-block;
		color:#fff;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: var(--font-weight-medium);
		padding: 0.5em 1em;
		border-radius: 1.75rem;
		border:solid 1px transparent;
	}
	a.toggle:hover { border-color:white; }
	a.toggle.active {
		background: #fff;
		border-color: white;
		color: var(--body-color);
	}
}

.hero div.col[data-defer-bg] { background-repeat:no-repeat;background-size:contain; background-position: 50% 100%; width: clamp(300px, 18%, 400px); }
@media(min-width:768px) {
	.hero { padding-top: 2rem; }
	.hero h1 { white-space: nowrap; }
	.hero .col:first-child { padding-top: 3rem; padding-bottom: 2rem; }

}
@media(max-width:991px) {
	.hero .btn-lg { font-size:105%; padding: 0.5em 1.875em;}
}
@media(max-width: 767px) {
	.hero {
		position: relative;
		padding-top: 6rem;
		div.col[data-defer-bg] {
			background-position-x: 105%;
			background-size: auto 105%;
			position: absolute;
			outline: dotted 1px;
			left: 0; top: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			opacity: 0.45;
		}
	}
	.pricing table.list-table { width: 100%; }
}
@media(max-width:550px) {
	.section-toggle {
		padding-left:1rem; padding-right:1rem;
		text-align: center;
		.buttons {
			flex-grow: 1;
			border-radius: 1.35rem;
		}
		a.toggle {
			display: block;
			padding: .875em 1em;
			border-radius: 1.1rem;
		}
	}
}