/**
 * QuickBooks cloud hosting page (design: services/cloud-hosting.html,
 * assets/cloud-hosting.css). Section, card and FAQ styles; the FAQ items
 * reuse the homepage's `.ac-faq-item` (home.css).
 */

/* stylelint-disable no-descending-specificity --
 * Breakpoint overrides deliberately follow their base rules. */

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

.wp-block-group.ac-ch-section {
	padding-block: 100px;
}

.ac-ch-soft {
	background: var(--wp--preset--color--wash);
}

.ac-ch-section .ac-ch-title {
	margin: 16px 0 0;
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: 1.1;
}

.ac-ch-section .ac-ch-copy,
.ac-ch-hero .ac-ch-copy {
	max-width: 710px;
	margin: 16px 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.8;
}

.wp-block-group.ac-ch-head {
	margin-bottom: 48px;
	text-align: center;
}

.ac-ch-head .ac-ch-copy {
	margin-inline: auto;
}

.ac-ch-section .ac-arrow-link {
	margin-top: 22px;
}

/* ---------- Hero ---------- */

.ac-ch-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background:
		radial-gradient(circle at 78% 25%, #e2f4ff 0%, transparent 35%),
		radial-gradient(ellipse at 95% 95%, #e9f8fc 0%, transparent 40%),
		linear-gradient(110deg, var(--wp--preset--color--white) 15%, var(--wp--preset--color--wash) 100%);
}

.wp-block-columns.ac-ch-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	gap: 22px;
	margin-block: 0;
}

.ac-ch-hero .ac-ch-hero__title {
	max-width: 690px;
	margin: 18px 0 22px;
	line-height: 1.085;
}

.ac-ch-hero .ac-ch-hero__intro {
	max-width: 560px;
	margin: 0 0 28px;
	line-height: 1.8;
}

.ac-ch-hero__actions .wp-block-button__link {
	min-height: 51px;
}

.wp-block-group.ac-ch-chips {
	margin-top: 34px;
}

.ac-ch-chips .ac-ch-chip {
	margin: 0;
	padding: 9px 12px;
	border: 1px solid var(--wp--preset--color--line-blue);
	border-radius: var(--wp--preset--border-radius--pill);
	background: rgb(255 255 255 / 60%);
	color: var(--wp--preset--color--label);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--label);
}

.ac-ch-chip::before {
	content: "✓" / "";
	margin-right: 7px;
	color: var(--wp--preset--color--blue);
}

.ac-ch-hero .ac-ch-hero__art {
	margin: 0;
}

.ac-ch-hero__art img {
	display: block;
	width: 113%;
	max-width: none;
	height: auto;
	margin-left: -3%;
	filter: drop-shadow(0 6px 18px #719cd214);
}

/* ---------- Software strip ---------- */

.ac-ch-strip {
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
}

.wp-block-group.ac-ch-strip__row {
	align-items: center;
	gap: 22px;
}

.ac-ch-strip .ac-ch-strip__label {
	margin: 0;
	color: var(--wp--preset--color--label);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: var(--wp--custom--font-weight--heading);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-transform: uppercase;
}

.ac-ch-strip .ac-ch-strip__items {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px 26px;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--heading);
	letter-spacing: -0.02em;
}

/* ---------- Two-column blocks ---------- */

.wp-block-columns.ac-ch-why,
.wp-block-columns.ac-ch-diagram-intro,
.wp-block-columns.ac-ch-faq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	margin-block: 0;
}

.wp-block-columns.ac-ch-diagram-intro {
	gap: 40px;
	margin-bottom: 31px;
}

.wp-block-columns.ac-ch-faq {
	grid-template-columns: 0.85fr 1.15fr;
	gap: 74px;
	align-items: start;
}

/* ---------- Mini cards (why) ---------- */

.wp-block-group.ac-ch-mini {
	min-height: 180px;
	padding: 25px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 10px 26px rgb(35 89 166 / 4.5%);
}

.ac-ch-mini-grid > .ac-ch-mini:nth-child(2) {
	background: linear-gradient(145deg, #e6f3ff, #f7fcff);
}

.ac-ch-mini-grid > .ac-ch-mini:nth-child(3) {
	background: linear-gradient(145deg, #ecf9ff, #f8fcff);
}

.ac-ch-mini .ac-ch-mini__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.03em;
	line-height: 1.3;
}

.ac-ch-mini .ac-ch-mini__text {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
}

/* ---------- Cards (services, apps, models, steps, why) ---------- */

.wp-block-group.ac-ch-card {
	display: flex;
	flex-direction: column;
	padding: 27px 26px 25px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 12px 26px rgb(31 88 165 / 3.5%);
}

.ac-ch-card .ac-ch-card__title {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: var(--wp--custom--letter-spacing--snug);
	line-height: 1.25;
}

.ac-ch-card .ac-ch-card__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.7;
}

/* Links inside running text are underlined, not told apart by colour alone. */
.ac-ch-card__text a,
.ac-ch-faq__list .ac-faq-item__answer a {
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Application cards (design: .ch-app-card). */
.ac-ch-app .ac-ch-card__text {
	flex: 1;
}

.wp-block-group.ac-ch-card.ac-ch-app {
	transition: transform 0.25s, box-shadow 0.25s;
}

.wp-block-group.ac-ch-card.ac-ch-app:hover {
	box-shadow: var(--wp--custom--hover--app-shadow);
	transform: translateY(-4px);
}

/* Text links (design .ch-text-link:hover): underline, colour unchanged. */
.ac-ch-hero .ac-arrow-link:has(> a:hover),
.ac-ch-section .ac-arrow-link:has(> a:hover),
.ac-ch-final .ac-arrow-link:has(> a:hover),
.ac-ch-hero .ac-arrow-link a:hover,
.ac-ch-section .ac-arrow-link a:hover,
.ac-ch-final .ac-arrow-link a:hover {
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
}

.wp-block-group.ac-ch-app__top {
	margin-bottom: 20px;
}

.ac-ch-app .ac-ch-app__badge {
	display: grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: 15px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--blue);
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--heading);
}

.ac-ch-app--tax .ac-ch-app__badge {
	background: #eaf9f6;
	color: #057574;
}

.ac-ch-app--erp .ac-ch-app__badge {
	background: #f1efff;
	color: #5249c4;
}

.ac-ch-app .ac-ch-app__type {
	margin: 0;
	color: var(--wp--preset--color--label);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: var(--wp--custom--font-weight--label);
	letter-spacing: 0.075em;
	line-height: 1.5;
	text-align: right;
	text-transform: uppercase;
}

.ac-ch-app .ac-ch-app__note {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--label);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--label);
}

.ac-ch-section .ac-ch-note {
	box-sizing: border-box;
	margin: 23px 0 0;
	padding: 18px 22px;
	border: 1px solid var(--wp--preset--color--line-blue);
	border-radius: 15px;
	background: linear-gradient(120deg, #edf7ff, #f6fcff);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.75;
}

/* Hosting models (design: .ch-compare-card). */
.wp-block-group.ac-ch-model {
	min-height: 325px;
	padding: 30px;
}

.wp-block-group.ac-ch-model.is-featured {
	border-color: #97c6fb;
	background:
		radial-gradient(circle at 90% 8%, #d9eeff, transparent 45%),
		linear-gradient(150deg, #eff7ff, var(--wp--preset--color--white));
}

.ac-ch-model .ac-ch-model__number,
.ac-ch-step .ac-ch-step__label {
	margin: 0 0 20px;
	color: var(--wp--preset--color--blue);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--heading);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ac-ch-model .ac-ch-card__text {
	margin-bottom: 20px;
}

.ac-ch-checks,
.ac-ch-factors {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ac-ch-checks li {
	position: relative;
	padding-left: 21px;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
}

.ac-ch-checks li::before {
	content: "✓" / "";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--blue);
	font-weight: var(--wp--custom--font-weight--heading);
}

/* Steps: a short gradient rule above the label (design: .ch-step-line). */
.ac-ch-step .ac-ch-step__label::before {
	content: "";
	display: block;
	width: 45px;
	height: 4px;
	margin-bottom: 24px;
	border-radius: 4px;
	background: var(--wp--preset--gradient--brand);
}

/* ---------- Diagram ---------- */

.ac-ch-section .ac-ch-diagram {
	margin: 0;
}

.ac-ch-diagram img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 26px;
	box-shadow: 0 20px 48px #6ba4da13;
}

/* ---------- Security (dark) ---------- */

.ac-ch-security {
	padding-block: 92px;
	background:
		radial-gradient(ellipse 50% 90% at 80% 36%, #1c4c82, transparent 70%),
		linear-gradient(115deg, #081a38, #112f5b);
	color: var(--wp--preset--color--white);
}

.wp-block-columns.ac-ch-security__grid {
	display: grid;
	grid-template-columns: 1fr 0.86fr;
	gap: 55px;
	margin-block: 0;
}

.ac-ch-security .is-style-eyebrow {
	color: #7ed7ff;
}

.ac-ch-security .ac-ch-title {
	margin: 16px 0 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: 1.1;
}

.ac-ch-security .ac-ch-copy {
	max-width: 620px;
	margin: 16px 0 0;
	color: #b0c5de;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.8;
}

.wp-block-group.ac-ch-security__list {
	margin-top: 29px;
}

.ac-ch-security .ac-ch-security__item {
	margin: 0;
	padding-top: 15px;
	border-top: 1px solid #90b7e53d;
	color: #a7beda;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
}

.ac-ch-security__item strong {
	display: block;
	margin-bottom: 6px;
	color: #edf6ff;
	font-size: var(--wp--preset--font-size--base);
}

.ac-ch-security__item strong::before {
	content: "✓ " / "";
	color: #70d4ff;
}

.ac-ch-security .ac-ch-security__art {
	max-width: 490px;
	margin: auto;
}

.ac-ch-security__art img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 13px 29px #081e4c55);
}

/* ---------- Pricing ---------- */

.wp-block-columns.ac-ch-cost {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 42px;
	margin-block: 0;
	padding: 45px 52px;
	border: 1px solid var(--wp--preset--color--line-blue);
	border-radius: 25px;
	background: linear-gradient(120deg, #edf6ff 2%, #fbfdff 80%);
}

.ac-ch-factors {
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.ac-ch-factors li {
	padding: 16px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--label);
}

.ac-ch-factors li::before {
	content: "•" / "";
	margin-right: 8px;
	color: var(--wp--preset--color--blue);
}

/* ---------- FAQ ---------- */

.ac-ch-faq__intro {
	position: sticky;
	top: 32px;
}

.ac-ch-faq__list {
	display: grid;
	gap: 10px;
}

.ac-ch-faq__list > .wp-block-details.ac-faq-item {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: var(--wp--preset--color--white);
}

.ac-ch-faq__list .ac-faq-item > summary {
	padding: 19px 22px;
	font-size: var(--wp--preset--font-size--medium);
}

.ac-ch-faq__list .ac-faq-item .ac-faq-item__answer {
	padding: 0 22px 20px;
	font-size: var(--wp--preset--font-size--base);
}

.ac-ch-faq__intro .ac-ch-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: 25px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--label);
}

.ac-ch-sources a {
	color: var(--wp--preset--color--blue);
}

.ac-ch-sources a::after {
	content: " ↗" / "";
}

/* ---------- Related services ---------- */

.wp-block-group.ac-ch-section.ac-ch-related {
	padding-block: 70px;
}

.ac-ch-related .ac-ch-related__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 26px 0 0;
}

.ac-ch-related__links a {
	padding: 12px 18px;
	border: 1px solid var(--wp--preset--color--line-blue);
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--blue-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--label);
	text-decoration: none;
}

.ac-ch-related__links a:hover {
	background: var(--wp--custom--hover--pill-cloud);
}

/* Design .related-row a:hover on the service pages that reuse these pills. */
.ac-services-more .ac-ch-related__links.ac-services-more__links a:hover {
	background: var(--wp--custom--hover--pill);
}

/* ---------- Final call to action ---------- */

.wp-block-group.ac-ch-final {
	padding: 65px 30px;
	border-radius: 27px;
	background:
		radial-gradient(circle at 92% 4%, #c5ebff, transparent 33%),
		linear-gradient(115deg, #e5f2ff, #f8fbff 60%, #e1f4ff);
	text-align: center;
}

.ac-ch-final .ac-ch-copy {
	margin: 18px auto 25px;
}

.ac-ch-final .ac-ch-final__fine {
	margin: 17px auto 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ---------- Breakpoints ---------- */

@media (max-width: 1100px) {

	.wp-block-group.ac-ch-cards.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ac-ch-hero__art img {
		width: 108%;
	}
}

@media (max-width: 860px) {

	.wp-block-columns.ac-ch-hero__grid,
	.wp-block-columns.ac-ch-why,
	.wp-block-columns.ac-ch-diagram-intro,
	.wp-block-columns.ac-ch-faq,
	.wp-block-columns.ac-ch-security__grid,
	.wp-block-columns.ac-ch-cost {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.ac-ch-hero__art img {
		width: 100%;
		max-width: 680px;
		margin: 16px auto -16px;
	}

	.ac-ch-strip .ac-ch-strip__items,
	.wp-block-group.ac-ch-strip__row {
		justify-content: center;
		text-align: center;
	}

	.wp-block-group.ac-ch-strip__row {
		flex-direction: column;
		gap: 12px;
	}

	.ac-ch-strip .ac-ch-strip__items {
		flex: none;
		gap: 8px 18px;
	}

	.ac-ch-faq__intro {
		position: static;
	}

	.ac-ch-security .ac-ch-security__art {
		max-width: 370px;
	}
}

@media (max-width: 600px) {

	.wp-block-group.ac-ch-section {
		padding-block: 69px;
	}

	.ac-ch-security {
		padding-block: 70px;
	}

	.wp-block-group.ac-ch-head {
		margin-bottom: 30px;
	}

	.ac-ch-hero__actions,
	.ac-ch-hero__actions .wp-block-button,
	.ac-ch-hero__actions .wp-block-button__link {
		width: 100%;
	}

	.wp-block-group.ac-ch-cards.is-layout-grid,
	.wp-block-group.ac-ch-security__list.is-layout-grid,
	.ac-ch-factors {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-group.ac-ch-mini-grid.is-layout-grid {
		gap: 9px;
	}

	.wp-block-group.ac-ch-mini {
		min-height: 0;
		padding: 18px;
	}

	.wp-block-group.ac-ch-model {
		min-height: 0;
	}

	.wp-block-columns.ac-ch-cost {
		padding: 28px 21px;
	}

	.wp-block-group.ac-ch-final {
		padding: 49px 21px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-group.ac-ch-card.ac-ch-app {
		transition: none;
	}
}