/*
 * Conversion + company page templates (templates/template-{estimate,contact,
 * about,careers,business,offer,plain}.php). Builds on tokens.css and the
 * shared section shells in home.css, which is enqueued alongside this file
 * on these templates.
 */

/* ---- Page head band ---- */

/* ---- Generic prose body (left-aligned copy in a readable measure) ---- */

.convert-prose__inner,
.convert-narrow {
	max-width: var(--bhc-maxw-prose);
	margin-inline: auto;
}

.convert-prose__inner p,
.convert-narrow p {
	max-width: var(--bhc-maxw-prose);
	text-align: left;
}

.convert .convert-narrow h2,
.convert .convert-narrow h3 {
	margin: var(--bhc-space-3) 0 var(--bhc-space-1);
	text-align: left;
}

.convert .convert-narrow h2:first-child {
	margin-top: 0;
}

.convert-narrow ul {
	max-width: var(--bhc-maxw-prose);
	margin: 0 0 var(--bhc-space-2);
	padding-left: 1.25em;
	color: var(--bhc-color-muted);
	line-height: 1.75;
}

.convert-narrow ul li {
	margin-bottom: 0.25em;
}

.convert-narrow a {
	color: var(--bhc-color-brand-dark);
}

/* ---- Form card (white card wrapping an embedded Gravity Form) ---- */

.form-card {
	max-width: 900px;
	margin: var(--bhc-space-4) auto 0;
	padding: var(--bhc-space-4) var(--bhc-space-3);
	background: var(--bhc-color-paper);
	border: 1px solid var(--bhc-color-line);
	border-radius: var(--bhc-radius);
	box-shadow: var(--bhc-shadow-card);
	text-align: left;
}

.form-card--wide {
	max-width: var(--bhc-maxw-mid);
}

/* ---- Guarded-form fallback card ---- */

.form-fallback {
	max-width: 640px;
	margin: var(--bhc-space-3) auto 0;
	padding: var(--bhc-space-4) var(--bhc-space-3);
	background: var(--bhc-color-paper);
	border: 1px solid var(--bhc-color-line);
	border-radius: var(--bhc-radius);
	text-align: center;
}

.convert .form-fallback p {
	max-width: 34em;
	margin: 0 auto var(--bhc-space-2);
	text-align: center;
}

.convert .form-fallback .form-fallback__cta {
	margin-bottom: 0;
}

/* ---- Contact info line (contact page "Still have questions?") ---- */

.convert .contact-aside {
	text-align: center;
}

.convert .contact-aside p {
	max-width: var(--bhc-maxw-prose);
	margin-inline: auto;
	text-align: center;
}

.convert .contact-aside a {
	color: var(--bhc-color-brand-dark);
	font-weight: 600;
}

.convert .contact-aside__label {
	color: var(--bhc-color-heading);
	font-weight: 700;
}

/* ---- Feature grid (h4 + copy blurbs: pros perks, prepaid includes) ---- */

.feature-grid {
	display: grid;
	gap: var(--bhc-space-3) var(--bhc-space-4);
	max-width: var(--bhc-maxw-wide);
	margin: var(--bhc-space-4) auto 0;
	text-align: center;
}

@media (min-width: 640px) {
	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.feature-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.feature-grid__item img {
	width: 64px;
	height: 64px;
	margin-bottom: var(--bhc-space-1);
}

/* Inline SVG variant (careers/pros perks): brand-green line icons. */
.feature-grid__icon {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto var(--bhc-space-1);
	color: var(--bhc-color-brand);
}

/* A grid that opens its section (no section head) drops its lead-in gap. */
.pros-perks .feature-grid {
	margin-top: 0;
}

.convert .feature-grid__item h3,
.convert .feature-grid__item h4 {
	margin: 0 0 var(--bhc-space-1);
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-h3);
	font-weight: 600;
	line-height: 1.3;
}

.convert .feature-grid__item p {
	max-width: 30em;
	margin-inline: auto;
}

/* ---- Benefit list grid (h3 + copy, left-aligned: business benefits) ---- */

.benefit-grid {
	display: grid;
	gap: var(--bhc-space-3) var(--bhc-space-4);
	max-width: var(--bhc-maxw-mid);
	margin: var(--bhc-space-4) auto 0;
	text-align: left;
}

@media (min-width: 700px) {
	.benefit-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.convert .benefit-grid h3 {
	margin: 0 0 var(--bhc-space-1);
	color: var(--bhc-color-brand-dark);
}

.convert .benefit-grid p {
	max-width: 34em;
}

/* ---- Card row (3-up audience cards on business-account) ---- */

.card-row {
	display: grid;
	gap: var(--bhc-space-3);
	max-width: var(--bhc-maxw-wide);
	margin: var(--bhc-space-4) auto 0;
}

@media (min-width: 900px) {
	.card-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

.card-row__card {
	padding: var(--bhc-space-3);
	background: var(--bhc-color-paper);
	border: 1px solid var(--bhc-color-line);
	border-radius: var(--bhc-radius);
	text-align: center;
}

.card-row__card img {
	width: 100%;
	height: auto;
	margin: var(--bhc-space-2) 0;
	border-radius: var(--bhc-radius);
}

.convert .card-row__card h3 {
	margin: 0;
	font-size: var(--bhc-size-h3);
}

.convert .card-row__card h4 {
	margin: 0 0 var(--bhc-space-1);
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-h4);
	font-weight: 600;
}

.convert .card-row__card p {
	text-align: left;
}

/* ---- Split rows (alternating media + copy) ---- */

.split {
	display: grid;
	gap: var(--bhc-space-3) var(--bhc-space-5);
	align-items: center;
	max-width: var(--bhc-maxw-mid);
	margin: var(--bhc-space-4) auto 0;
}

@media (min-width: 820px) {
	.split {
		grid-template-columns: 1fr 1fr;
	}

	.split--flip .split__media {
		order: 2;
	}
}

.split__media img {
	width: 100%;
	height: auto;
	border-radius: var(--bhc-radius);
}

.convert .split__copy h3 {
	margin: 0 0 0.25rem;
	text-align: left;
}

.convert .split__copy h4 {
	margin: 0 0 var(--bhc-space-1);
	color: var(--bhc-color-muted);
	font-size: var(--bhc-size-h4);
	font-weight: 600;
	text-align: left;
}

.convert .split__copy p {
	text-align: left;
}

/* ---- Pricing cards (prepaid plans) ---- */

.plans {
	display: grid;
	gap: var(--bhc-space-3);
	max-width: var(--bhc-maxw-mid);
	margin: var(--bhc-space-4) auto 0;
}

@media (min-width: 820px) {
	.plans {
		grid-template-columns: repeat(3, 1fr);
	}
}

.plan {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bhc-color-paper);
	border: 1px solid var(--bhc-color-line);
	border-radius: var(--bhc-radius);
	text-align: center;
}

.plan__head {
	padding: var(--bhc-space-3) var(--bhc-space-2);
	background: var(--bhc-color-brand);
	color: var(--bhc-color-on-accent);
}

.plan__kicker {
	display: block;
	font-size: var(--bhc-size-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.convert .plan__head h2 {
	margin: 0;
	color: var(--bhc-color-on-accent);
	font-size: 1.75rem;
}

.convert .plan__head h2 small {
	font-size: 1rem;
	font-weight: 400;
}

.plan__price {
	padding: var(--bhc-space-2) 0 0;
	color: var(--bhc-color-heading);
	font-size: 2rem;
	font-weight: 700;
}

.plan__price small {
	color: var(--bhc-color-muted);
	font-size: 1rem;
	font-weight: 400;
}

.plan__list {
	flex: 1;
	margin: var(--bhc-space-2) 0;
	padding: 0 var(--bhc-space-3);
	list-style: none;
	color: var(--bhc-color-muted);
	line-height: 1.9;
}

.plan__cta {
	margin: 0;
	padding: 0 var(--bhc-space-3) var(--bhc-space-3);
}

/* ---- Numbered steps (prepaid getting started) ---- */

.convert .steps {
	counter-reset: bhc-step;
	max-width: 720px;
	margin: var(--bhc-space-4) auto 0;
	text-align: left;
}

.convert .steps__item {
	position: relative;
	margin-bottom: var(--bhc-space-3);
	padding-left: 3.25rem;
}

.convert .steps__item::before {
	counter-increment: bhc-step;
	content: counter(bhc-step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--bhc-color-brand);
	color: var(--bhc-color-on-accent);
	font-size: 1.125rem;
	font-weight: 700;
}

.convert .steps__item h3 {
	margin: 0 0 0.25rem;
	text-align: left;
}

.convert .steps__item p {
	text-align: left;
}

/* ---- Offer hero (janitorial: copy left, estimate card right) ---- */

.offer-hero {
	display: grid;
	gap: var(--bhc-space-4);
	align-items: start;
	max-width: var(--bhc-maxw-wide);
	margin-inline: auto;
}

@media (min-width: 900px) {
	.offer-hero {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

.convert .offer-hero__copy h1 {
	margin: 0 0 var(--bhc-space-2);
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-h2);
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}

.convert .offer-hero__copy p {
	text-align: left;
}

.offer-hero .form-card {
	margin-top: 0;
}

.convert .offer-hero__card-title {
	margin: 0 0 var(--bhc-space-2);
	font-size: var(--bhc-size-h3);
	text-align: center;
}

.offer-hero__badge {
	margin-top: var(--bhc-space-2);
	text-align: center;
}

.offer-hero__badge img {
	max-width: 100%;
	height: auto;
}

/* ---- Pros head (careers/pros: lead form beside the requirements) ---- */

.pros-head {
	display: grid;
	gap: var(--bhc-space-4);
	align-items: start;
	max-width: var(--bhc-maxw-wide);
	margin: var(--bhc-space-4) auto 0;
}

@media (min-width: 900px) {
	.pros-head {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--bhc-space-5);
	}
}

.pros-head .form-card,
.pros-head .form-fallback {
	margin-top: 0;
}

/* The contact head's sub carries the gap; the card brings none of its own. */
.pros-contact .form-card,
.pros-contact .form-fallback {
	margin-top: 0;
}

/* Requirements list rides the paper band's baseline, not the card's. */
@media (min-width: 900px) {
	.pros-head__reqs {
		padding-top: var(--bhc-space-2);
	}
}

/* ---- Rate tables (gift certificate) ---- */

.rate-table-wrap {
	max-width: 900px;
	margin: var(--bhc-space-3) auto 0;
	overflow-x: auto;
}

.rate-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bhc-size-body);
}

.rate-table th,
.rate-table td {
	padding: 0.625rem 0.875rem;
	border-bottom: 1px solid var(--bhc-color-line);
	color: var(--bhc-color-muted);
	text-align: left;
}

.rate-table th {
	color: var(--bhc-color-heading);
	font-weight: 700;
}

.rate-table td:not(:first-child),
.rate-table th:not(:first-child) {
	text-align: right;
}

/* ---- Embedded third-party frame (gift certificate BookingKoala) ---- */

.embed-frame {
	max-width: 900px;
	margin: var(--bhc-space-4) auto 0;
}

.embed-frame iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* ---- Badge image band (CAPES) ---- */

.convert .badge-img {
	margin: 0 auto var(--bhc-space-3);
	text-align: center;
}

.convert .badge-img img {
	max-width: min(420px, 100%);
	height: auto;
	margin-inline: auto;
}

/* ---- CAPES hero: brand-dark ground for the white-wordmark badge ---- */

/*
 * Live ran a navy photo hero; Direction A keeps the same "dark band" read
 * on the brand green (cf. the newsletter band). Copy is paper at ~88% so
 * the H1/subheading at 100% still lead. The orange Apply Now is the only
 * accent on the band.
 */
.convert .capes-hero {
	background: var(--bhc-color-brand-dark);
	color: rgba(255, 255, 255, 0.88);
}

.convert .capes-hero .section-head__title,
.convert .capes-hero .section-head__subheading,
.convert .capes-hero .convert-narrow strong {
	color: var(--bhc-color-on-accent);
}

.convert .capes-hero .section-head__sub,
.convert .capes-hero .convert-narrow p,
.convert .capes-hero .convert-narrow ul,
.convert .capes-hero .capes-proof {
	color: rgba(255, 255, 255, 0.88);
}

.convert .capes-hero a:not(.btn) {
	color: var(--bhc-color-on-accent);
}

.convert .capes-hero a:focus-visible {
	outline-color: var(--bhc-color-paper);
}

.convert .capes-hero .btn:focus-visible {
	outline-color: var(--bhc-color-paper);
}

/* Proof-of-eligibility line under an Apply Now button (both bands). */
.convert .capes-proof {
	margin: var(--bhc-space-1) 0 0;
	font-size: var(--bhc-size-small);
	text-align: center;
}

.convert .capes-services .capes-proof {
	color: var(--bhc-color-label);
}

.convert .capes-services .capes-proof a {
	color: var(--bhc-color-brand-dark);
}

/* Service tiles: text-only cards, so the copy centers under the title. */
.convert .capes-services .card-row__card p {
	text-align: center;
}

.convert .capes-services .card-row__card h3 {
	margin-bottom: var(--bhc-space-1);
}

.convert .card-row__cta {
	margin: var(--bhc-space-2) 0 0;
}

/* Eligible-group entries carry a two-item criteria list. */
.convert .benefit-grid ul {
	margin: var(--bhc-space-1) 0 0;
	padding-left: 1.25em;
	color: var(--bhc-color-muted);
	line-height: 1.75;
}

.convert .benefit-grid ul li + li {
	margin-top: 0.25em;
}

.convert .benefit-grid strong {
	color: var(--bhc-color-ink);
}

/* ---- Janitorial CTA bands + hero pitch ---- */

.convert .offer-hero__copy .offer-hero__pitch {
	margin: 0 0 var(--bhc-space-2);
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-h2);
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}

.home-section__cta-band {
	margin-top: var(--bhc-space-4);
	text-align: center;
}

.convert .janitorial-cta__heading {
	margin: 0;
	text-align: center;
}

.convert .home-section__cta-band .home-section__cta {
	margin-top: var(--bhc-space-2);
}

.convert .janitorial-cta__alt {
	margin: var(--bhc-space-2) 0 0;
	font-size: var(--bhc-size-small);
	text-align: center;
}

.convert .janitorial-cta__alt a {
	color: var(--bhc-color-brand-dark);
}

/* ---- Small trailing lines ---- */

.convert .refer-track,
.convert .prepaid-contact__call {
	margin: var(--bhc-space-3) auto 0;
	text-align: center;
}

.convert .prepaid-contact__call a {
	color: var(--bhc-color-brand-dark);
}

/* ---- Utility ---- */

.convert .home-section__cta a + a {
	margin-left: var(--bhc-space-2);
}

.convert .fine-print {
	color: var(--bhc-color-label);
	font-size: var(--bhc-size-fine);
}

@media (max-width: 480px) {
	.form-card {
		padding: var(--bhc-space-3) var(--bhc-space-2);
	}
}