/*
 * DECOR PAINT PRO 3.0.15 responsive final layer.
 *
 * This file is deliberately enqueued after frontend, feature-module,
 * application-sidebar and typography styles. All rules stay inside managed
 * application pages; theme, shop, policy and footer surfaces are untouched.
 */

@media (max-width: 720px) {
	body.dpip-managed-page #primary .dpip-service-nav.dpip-service-nav .dpip-service-nav__head,
	body.dpip-managed-page.dpip-nationwide-page .dpip-growth-province > .dpip-service-nav.dpip-service-nav .dpip-service-nav__head {
		align-content: center !important;
		align-items: center !important;
		background: #eaf3fc !important;
		isolation: isolate;
	}

	body.dpip-managed-page #primary .dpip-service-nav.dpip-service-nav .dpip-service-nav__head > a,
	body.dpip-managed-page.dpip-nationwide-page .dpip-growth-province > .dpip-service-nav.dpip-service-nav .dpip-service-nav__head > a {
		align-content: center !important;
		align-items: center !important;
		display: flex !important;
		height: 100% !important;
		justify-content: center !important;
		padding: 4px !important;
	}

	body.dpip-managed-page #primary .dpip-service-nav.dpip-service-nav .dpip-service-nav__head > a > .dpip-service-nav__mobile-caption,
	body.dpip-managed-page.dpip-nationwide-page .dpip-growth-province > .dpip-service-nav.dpip-service-nav .dpip-service-nav__head > a > .dpip-service-nav__mobile-caption,
	body.dpip-managed-page #primary .dpip-service-nav.dpip-service-nav .dpip-service-nav__head > a:is(.is-current, [aria-current="page"]) > .dpip-service-nav__mobile-caption,
	body.dpip-managed-page.dpip-nationwide-page .dpip-growth-province > .dpip-service-nav.dpip-service-nav .dpip-service-nav__head > a:is(.is-current, [aria-current="page"]) > .dpip-service-nav__mobile-caption {
		align-items: center !important;
		background: #fff !important;
		border: 1px solid #a9c5e1 !important;
		border-bottom-width: 1px !important;
		border-radius: 9px !important;
		box-shadow: 0 5px 14px rgba(13, 79, 152, .16) !important;
		color: #073e78 !important;
		display: flex !important;
		flex: 0 1 auto !important;
		flex-direction: column !important;
		font-size: clamp(11px, 2.9vw, 12.5px) !important;
		font-weight: 900 !important;
		gap: 2px !important;
		height: auto !important;
		justify-content: center !important;
		letter-spacing: .01em !important;
		line-height: 1.08 !important;
		margin: auto !important;
		max-height: none !important;
		max-width: calc(100% - 8px) !important;
		min-height: 0 !important;
		min-width: 0 !important;
		opacity: 1 !important;
		overflow: visible !important;
		padding: 8px 3px !important;
		position: relative !important;
		text-align: center !important;
		text-shadow: none !important;
		transform: none !important;
		visibility: visible !important;
		white-space: normal !important;
		width: calc(100% - 8px) !important;
		z-index: 3 !important;
	}

	body.dpip-managed-page #primary .dpip-service-nav.dpip-service-nav .dpip-service-nav__mobile-caption > span,
	body.dpip-managed-page.dpip-nationwide-page .dpip-growth-province > .dpip-service-nav.dpip-service-nav .dpip-service-nav__mobile-caption > span {
		background: transparent !important;
		border: 0 !important;
		color: inherit !important;
		display: block !important;
		font: inherit !important;
		height: auto !important;
		line-height: inherit !important;
		margin: 0 !important;
		max-width: 100% !important;
		opacity: 1 !important;
		overflow: visible !important;
		padding: 0 !important;
		text-align: center !important;
		text-shadow: none !important;
		visibility: visible !important;
		white-space: nowrap !important;
		width: auto !important;
		word-break: normal !important;
	}
}

@media (max-width: 767px) {
	/* One full-width copy column for every application hero family. */
	body.dpip-managed-page #primary :is(
		.dpip-directory .dpip-hero__grid > div:first-child,
		.dpip-workspace-header > .dpip-shell > div:first-child,
		.dpip-cost-hero__copy,
		.dpip-cs__hero > div:first-child,
		.dpip-cs__section-head > div,
		.dpip-cs__section-title > div,
		.dpip-kb-hero > div:first-child,
		.dpip-kb-detail__head,
		.dpip-pd__hero,
		.dpip-public-preview__hero,
		.dpip-tw__hero
	) {
		box-sizing: border-box !important;
		flex: 1 1 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	/* Release only the prose that was constrained by module-specific rules. */
	body.dpip-managed-page #primary :is(
		.dpip-directory .dpip-hero__grid > div:first-child,
		.dpip-workspace-header,
		.dpip-cost-hero__copy,
		.dpip-cs__hero,
		.dpip-cs__section-head,
		.dpip-cs__section-title,
		.dpip-kb-hero,
		.dpip-kb-detail__head,
		.dpip-pd__hero,
		.dpip-public-preview__hero,
		.dpip-public-preview__empty,
		.dpip-tw__hero
	) :where(h1, h2, p),
	body.dpip-managed-page #primary :is(
		.dpip-pd__empty,
		.dpip-pd__notice,
		.dpip-pd__request-copy,
		.dpip-pd__request-empty,
		.dpip-cs__empty,
		.dpip-cs__notice,
		.dpip-public-preview__notice,
		.dpip-public-preview__empty,
		.dpip-kb-empty,
		.dpip-tw-notice
	) > :where(h2, p, span) {
		box-sizing: border-box !important;
		hyphens: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		min-width: 0 !important;
		overflow-wrap: break-word !important;
		text-align: left !important;
		white-space: normal !important;
		width: 100% !important;
		word-break: normal !important;
	}

	body.dpip-managed-page #primary :is(
		.dpip-workspace-header > .dpip-shell,
		.dpip-cs__hero,
		.dpip-kb-hero,
		.dpip-kb-detail__head,
		.dpip-pd__hero,
		.dpip-public-preview__hero,
		.dpip-tw__hero
	) {
		box-sizing: border-box !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	/* The cost hero already owns an inner shell. Padding both the hero and
	 * that shell produced a second mobile inset that no other hero had. */
	body.dpip-managed-page #primary .dpip-cost-hero {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.dpip-managed-page #primary .dpip-cost-hero > .dpip-shell {
		box-sizing: border-box !important;
		flex-wrap: wrap !important;
		max-width: none !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		width: 100% !important;
	}

	/* The compact cost badge stayed beside the copy until 700px, so at
	 * 701--767px it still consumed roughly 130px of the reading line. Keep
	 * the entire mobile range on the same one-column contract. */
	body.dpip-managed-page #primary .dpip-cost-hero__badge {
		display: none !important;
	}

	/* Workspace headers use one real reading column on phones. A late
	 * frontend rule used to retain a 78--92px second grid track, leaving the
	 * title/copy in a narrow first track even when the meta card wrapped. */
	body.dpip-managed-page.dpip-dashboard-page #primary .dpip .dpip-workspace-header > .dpip-shell,
	body.dpip-managed-page.dpip-job-board-page #primary .dpip .dpip-workspace-header > .dpip-shell,
	body.dpip-managed-page.dpip-profile-page #primary .dpip .dpip-workspace-header > .dpip-shell,
	body.dpip-managed-page.dpip-post-job-page #primary .dpip .dpip-workspace-header > .dpip-shell {
		align-items: stretch !important;
		display: grid !important;
		gap: 8px !important;
		grid-template-columns: minmax(0, 1fr) !important;
		justify-content: stretch !important;
		width: 100% !important;
	}

	body.dpip-managed-page.dpip-dashboard-page #primary .dpip .dpip-workspace-header > .dpip-shell > :first-child,
	body.dpip-managed-page.dpip-job-board-page #primary .dpip .dpip-workspace-header > .dpip-shell > :first-child,
	body.dpip-managed-page.dpip-profile-page #primary .dpip .dpip-workspace-header > .dpip-shell > :first-child,
	body.dpip-managed-page.dpip-post-job-page #primary .dpip .dpip-workspace-header > .dpip-shell > :first-child {
		box-sizing: border-box !important;
		grid-column: 1 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page.dpip-dashboard-page #primary .dpip .dpip-workspace-header > .dpip-shell > :is(.dpip-workspace-header__meta, .dpip-persona-badge),
	body.dpip-managed-page.dpip-job-board-page #primary .dpip .dpip-workspace-header > .dpip-shell > :is(.dpip-workspace-header__meta, .dpip-persona-badge),
	body.dpip-managed-page.dpip-profile-page #primary .dpip .dpip-workspace-header > .dpip-shell > :is(.dpip-workspace-header__meta, .dpip-persona-badge),
	body.dpip-managed-page.dpip-post-job-page #primary .dpip .dpip-workspace-header > .dpip-shell > :is(.dpip-workspace-header__meta, .dpip-persona-badge) {
		align-self: start !important;
		grid-column: 1 !important;
		justify-self: start !important;
		max-width: 100% !important;
		min-width: 0 !important;
		white-space: normal !important;
		width: fit-content !important;
	}

	body.dpip-managed-page #primary :is(
		.dpip-cs__section-head,
		.dpip-cs__section-title,
		.dpip-section-title,
		.dpip-cost-card__head
	) {
		align-items: start !important;
		--dpip-mobile-step-size: 34px;
		display: grid !important;
		gap: 8px 10px !important;
		grid-template-columns: var(--dpip-mobile-step-size) minmax(0, 1fr) !important;
		grid-template-rows: auto auto !important;
		width: 100% !important;
	}

	/* A flex-basis cannot size a grid item. Give every numbered marker an
	 * explicit square so 01--09 cannot collapse to the glyph width. */
	body.dpip-managed-page #primary :is(
		.dpip-cs__section-head,
		.dpip-cs__section-title,
		.dpip-section-title,
		.dpip-cost-card__head
	) > span:first-child {
		block-size: var(--dpip-mobile-step-size) !important;
		box-sizing: border-box !important;
		flex: 0 0 var(--dpip-mobile-step-size) !important;
		grid-column: 1 !important;
		grid-row: 1 !important;
		inline-size: var(--dpip-mobile-step-size) !important;
		min-block-size: var(--dpip-mobile-step-size) !important;
		min-inline-size: var(--dpip-mobile-step-size) !important;
	}

	/* These wrappers are plain layout divs containing only h2/p. Flattening
	 * them lets the heading stay beside the number while the explanatory
	 * paragraph uses the complete safe row beneath it. */
	body.dpip-managed-page #primary :is(
		.dpip-cs__section-head,
		.dpip-cs__section-title,
		.dpip-section-title,
		.dpip-cost-card__head
	) > div {
		display: contents !important;
	}

	body.dpip-managed-page #primary :is(
		.dpip-cs__section-head,
		.dpip-cs__section-title,
		.dpip-section-title,
		.dpip-cost-card__head
	) > div > h2 {
		align-self: center !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary :is(
		.dpip-cs__section-head,
		.dpip-cs__section-title,
		.dpip-section-title,
		.dpip-cost-card__head
	) > div > p {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	/* Numbered explanatory lists use the same mobile reading contract. This
	 * covers the directory, contract, knowledge and comparison routes without
	 * touching wizard controls, profile accordions or fieldset legends. */
	body.dpip-managed-page #primary .dpip-steps {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.dpip-managed-page #primary .dpip-steps > :is(div, li) {
		gap: 8px 10px !important;
		grid-template-columns: 34px minmax(0, 1fr) !important;
		grid-template-rows: auto auto !important;
	}

	body.dpip-managed-page #primary .dpip-steps > :is(div, li) > span {
		grid-column: 1 !important;
		grid-row: 1 !important;
		min-height: 34px !important;
		min-width: 34px !important;
	}

	body.dpip-managed-page #primary .dpip-steps > :is(div, li) > h3 {
		align-self: center !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
	}

	body.dpip-managed-page #primary .dpip-steps > :is(div, li) > p {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-cs--contracts .dpip-cs__contract-path > ol {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.dpip-managed-page #primary .dpip-cs--contracts .dpip-cs__contract-path > ol > li {
		gap: 6px 8px !important;
		grid-template-columns: 30px minmax(0, 1fr) !important;
		grid-template-rows: auto auto !important;
	}

	body.dpip-managed-page #primary .dpip-cs--contracts .dpip-cs__contract-path > ol > li > span {
		grid-column: 1 !important;
		grid-row: 1 !important;
		min-height: 28px !important;
		min-width: 28px !important;
	}

	body.dpip-managed-page #primary .dpip-cs--contracts .dpip-cs__contract-path > ol > li > strong {
		align-self: center !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
	}

	body.dpip-managed-page #primary .dpip-cs--contracts .dpip-cs__contract-path > ol > li > small {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-kb-process li {
		gap: 8px 10px !important;
		grid-template-columns: 38px minmax(0, 1fr) !important;
		grid-template-rows: auto auto auto !important;
	}

	body.dpip-managed-page #primary .dpip-kb-process li:not(:last-child)::before {
		display: none !important;
	}

	body.dpip-managed-page #primary .dpip-kb-process li > b {
		grid-column: 1 !important;
		grid-row: 1 !important;
		min-height: 38px !important;
		min-width: 38px !important;
	}

	body.dpip-managed-page #primary .dpip-kb-process li > div {
		display: contents !important;
	}

	body.dpip-managed-page #primary .dpip-kb-process li > div > h3 {
		align-self: center !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
		min-width: 0 !important;
	}

	body.dpip-managed-page #primary .dpip-kb-process li > div > p {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-kb-process li > div > small {
		box-sizing: border-box !important;
		display: block !important;
		grid-column: 1 / -1 !important;
		grid-row: 3 !important;
		justify-self: stretch !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-pd__compare-guide {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.dpip-managed-page #primary .dpip-pd.dpip-pd--compare-landing .dpip-pd__compare-guide > li {
		gap: 8px 10px !important;
		grid-template-columns: 38px minmax(0, 1fr) !important;
		grid-template-rows: auto auto !important;
	}

	body.dpip-managed-page #primary .dpip-pd.dpip-pd--compare-landing .dpip-pd__compare-guide > li > span {
		grid-column: 1 !important;
		grid-row: 1 !important;
		min-height: 36px !important;
		min-width: 36px !important;
	}

	body.dpip-managed-page #primary .dpip-pd.dpip-pd--compare-landing .dpip-pd__compare-guide > li > div {
		display: contents !important;
	}

	body.dpip-managed-page #primary .dpip-pd.dpip-pd--compare-landing .dpip-pd__compare-guide > li > div > h3 {
		align-self: center !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
		min-width: 0 !important;
	}

	body.dpip-managed-page #primary .dpip-pd.dpip-pd--compare-landing .dpip-pd__compare-guide > li > div > p {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	/* Dashboard task copy used to stay permanently indented by the 40px icon.
	 * Keep the kicker/title beside that icon, then release the explanatory
	 * sentence and action onto their own full-width rows. */
	body.dpip-managed-page #primary .dpip-task-card {
		align-items: start !important;
		grid-template-columns: 40px minmax(0, 1fr) !important;
		grid-template-rows: auto auto auto auto !important;
	}

	body.dpip-managed-page #primary .dpip-task-card > div {
		display: contents !important;
	}

	body.dpip-managed-page #primary .dpip-task-card > .dpip-task-card__icon {
		align-self: center !important;
		grid-column: 1 !important;
		grid-row: 1 / span 2 !important;
	}

	body.dpip-managed-page #primary .dpip-task-card > div > .dpip-kicker {
		grid-column: 2 !important;
		grid-row: 1 !important;
		min-width: 0 !important;
	}

	body.dpip-managed-page #primary .dpip-task-card > div > h2 {
		grid-column: 2 !important;
		grid-row: 2 !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-task-card > div > p {
		grid-column: 1 / -1 !important;
		grid-row: 3 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-task-card > .dpip-btn {
		grid-column: 1 / -1 !important;
		grid-row: 4 !important;
		max-width: none !important;
		width: 100% !important;
	}

	/* Knowledge-result rows contain icon, summary, metadata and an action.
	 * Only the title needs the icon column; every descriptive surface gets a
	 * complete reading row below it through the entire mobile range. */
	body.dpip-managed-page #primary .dpip-kb--list .dpip-kb-row {
		align-items: start !important;
		grid-template-columns: auto minmax(0, 1fr) !important;
		grid-template-rows: auto auto auto auto auto !important;
	}

	body.dpip-managed-page #primary .dpip-kb--list .dpip-kb-row__icon {
		align-self: center !important;
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	body.dpip-managed-page #primary .dpip-kb--list .dpip-kb-row__body {
		display: contents !important;
	}

	body.dpip-managed-page #primary .dpip-kb--list .dpip-kb-row__body > h2 {
		align-self: center !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-kb--list .dpip-kb-row__body > p {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-kb--list .dpip-kb-row__body > .dpip-kb-chips {
		grid-column: 1 / -1 !important;
		grid-row: 3 !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-kb--list .dpip-kb-row__meta {
		grid-column: 1 / -1 !important;
		grid-row: 4 !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-kb--list .dpip-kb-row__action {
		grid-column: 1 / -1 !important;
		grid-row: 5 !important;
		justify-self: stretch !important;
		max-width: none !important;
		width: 100% !important;
	}

	/* Profile accordions and the specialty helper repeat the same marker/copy
	 * pattern. Preserve the compact heading row but stop their helper sentence
	 * inheriting a narrow second column. */
	body.dpip-managed-page #primary .dpip-profile-section > summary {
		grid-template-columns: 30px minmax(0, 1fr) 18px !important;
		grid-template-rows: auto auto !important;
	}

	body.dpip-managed-page #primary .dpip-profile-section > summary > span {
		block-size: 30px !important;
		grid-column: 1 !important;
		grid-row: 1 !important;
		inline-size: 30px !important;
		min-block-size: 30px !important;
		min-inline-size: 30px !important;
	}

	body.dpip-managed-page #primary .dpip-profile-section > summary > div {
		display: contents !important;
	}

	body.dpip-managed-page #primary .dpip-profile-section > summary strong {
		align-self: center !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
		min-width: 0 !important;
	}

	body.dpip-managed-page #primary .dpip-profile-section > summary small {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-profile-section > summary::after {
		align-self: center !important;
		grid-column: 3 !important;
		grid-row: 1 !important;
	}

	body.dpip-managed-page #primary .dpip-specialty-guide__item {
		align-items: start !important;
		grid-template-columns: 44px minmax(0, 1fr) !important;
		grid-template-rows: auto auto !important;
	}

	body.dpip-managed-page #primary .dpip-specialty-guide__mark {
		align-self: center !important;
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	body.dpip-managed-page #primary .dpip-specialty-guide__copy {
		display: contents !important;
	}

	body.dpip-managed-page #primary .dpip-specialty-guide__copy > strong {
		align-self: center !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
		min-width: 0 !important;
	}

	body.dpip-managed-page #primary .dpip-specialty-guide__copy > small {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-cs--radius .dpip-cs__empty,
	body.dpip-managed-page #primary :is(.dpip-pd__empty, .dpip-pd__notice, .dpip-public-preview__notice, .dpip-public-preview__empty) {
		box-sizing: border-box !important;
		max-width: none !important;
		min-width: 0 !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		text-align: left !important;
		width: 100% !important;
	}

	/* Radius empty states live inside an already padded card; do not add a
	 * second inset around their explanatory copy. */
	body.dpip-managed-page #primary .dpip-cs--radius .dpip-cs__empty {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.dpip-managed-page #primary .dpip-kb-empty {
		box-sizing: border-box !important;
		max-width: none !important;
		min-width: 0 !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		text-align: left !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-kb-empty > :where(h1, h2, p, strong) {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		min-width: 0 !important;
		text-align: left !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-public-preview__notice {
		align-items: stretch !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 6px !important;
	}

	body.dpip-managed-page #primary .dpip-public-preview__notice > :where(strong, span, p) {
		flex: 0 1 auto !important;
		max-width: none !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-pd--compare-landing > .dpip-pd__empty {
		display: grid !important;
		gap: 8px !important;
		grid-template-areas:
			"title"
			"copy"
			"action" !important;
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.dpip-managed-page #primary .dpip-pd--compare-landing > .dpip-pd__empty > .dpip-pd__button {
		justify-self: stretch !important;
		max-width: 100% !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-cs--radius .dpip-cs__empty > .dpip-cs__button {
		display: flex !important;
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 100% !important;
		width: fit-content !important;
	}

	/* Virtual province pages are rendered outside #primary. Extend the same
	 * phone reading-width repair through 767px without changing their
	 * established two-column layout from 768px upward. */
	body.dpip-managed-page.dpip-nationwide-page .dpip-growth-province[data-dpip-growth-root] .dpip-growth-hero__grid {
		align-items: stretch !important;
		gap: 14px !important;
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.dpip-managed-page.dpip-nationwide-page .dpip-growth-province[data-dpip-growth-root] .dpip-growth-hero__grid > div:first-child,
	body.dpip-managed-page.dpip-nationwide-page .dpip-growth-province[data-dpip-growth-root] .dpip-growth-hero__grid > div:first-child > :where(h1, p) {
		box-sizing: border-box !important;
		max-width: none !important;
		min-width: 0 !important;
		text-align: left !important;
		white-space: normal !important;
		width: 100% !important;
		word-break: normal !important;
	}

	body.dpip-managed-page.dpip-nationwide-page .dpip-growth-province[data-dpip-growth-root] .dpip-growth-trust {
		grid-template-columns: auto minmax(0, 1fr) !important;
		width: 100% !important;
	}

	body.dpip-managed-page.dpip-nationwide-page .dpip-growth-province[data-dpip-growth-root] .dpip-growth-trust > span {
		margin-bottom: 0 !important;
	}

	/* 3.0.15: Fill the marked mobile reading areas with ordinary word wrapping.
	 * pretty/balance can shorten rendered lines even when the box is 100% wide.
	 * Justify prose between words, leaving the final line naturally aligned. */
	body.dpip-managed-page #primary .dpip-growth-province-index .dpip-growth-section-head > div {
		flex: 1 1 100% !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	/* These modules switch to desktop flex rows before the shared 768px
	 * boundary. Keep their actions below the copy throughout phone widths. */
	body.dpip-managed-page #primary .dpip-pd--landing > .dpip-pd__empty > p {
		flex-basis: 100% !important;
	}

	body.dpip-managed-page #primary .dpip-kb--list > .dpip-kb-hero {
		align-items: stretch !important;
		flex-direction: column !important;
	}

	body.dpip-managed-page #primary :is(.dpip, .dpip-kb) :is(
		.dpip-cs--organization .dpip-cs__hero > div,
		.dpip-cs--contracts .dpip-cs__hero > div,
		.dpip-cs--radius .dpip-cs__hero > div,
		.dpip-cs--radius .dpip-cs__section-head > div,
		.dpip-cs--radius .dpip-cs__empty,
		.dpip-cs--contracts .dpip-cs__empty,
		.dpip-public-preview--organizations > .dpip-public-preview__hero,
		.dpip-public-preview--dossiers > .dpip-public-preview__hero,
		.dpip-public-preview--dossiers > .dpip-public-preview__empty,
		.dpip-cost-card__head > div,
		.dpip-growth-province-index .dpip-growth-section-head > div,
		.dpip-pd--landing > .dpip-pd__empty,
		.dpip-kb-hero > div
	) > p {
		box-sizing: border-box !important;
		hyphens: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		min-width: 0 !important;
		overflow-wrap: break-word !important;
		text-align: justify !important;
		text-align-last: start !important;
		text-justify: inter-word;
		text-wrap: wrap !important;
		white-space: normal !important;
		width: 100% !important;
		word-break: normal !important;
	}

	/* The contract sign-in title uses the same full reading width, without
	 * balancing two short lines or stretching the spaces in a heading. */
	body.dpip-managed-page #primary .dpip-cs--contracts .dpip-cs__empty > h2 {
		text-wrap: wrap !important;
	}
}

/* Project/comparison heroes used to paint their decorative disk after the
 * content without a stacking guard. Keep decoration behind the readable
 * layer at every breakpoint, matching the other application hero families. */
body.dpip-managed-page #primary .dpip-pd__hero {
	isolation: isolate !important;
}

body.dpip-managed-page #primary .dpip-pd__hero::after {
	pointer-events: none !important;
	z-index: 0 !important;
}

body.dpip-managed-page #primary .dpip-pd__hero > * {
	position: relative !important;
	z-index: 1 !important;
}

@media (min-width: 768px) and (max-width: 991px) {
	/* At tablet widths the copy consumes every pixel left by the compact meta
	 * card. Reset fixed bases and prose measures inherited from route CSS. */
	body.dpip-managed-page.dpip-dashboard-page #primary .dpip .dpip-workspace-header > .dpip-shell,
	body.dpip-managed-page.dpip-job-board-page #primary .dpip .dpip-workspace-header > .dpip-shell,
	body.dpip-managed-page.dpip-profile-page #primary .dpip .dpip-workspace-header > .dpip-shell,
	body.dpip-managed-page.dpip-post-job-page #primary .dpip .dpip-workspace-header > .dpip-shell {
		align-items: center !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 12px !important;
		grid-template-columns: none !important;
		justify-content: flex-start !important;
		width: 100% !important;
	}

	body.dpip-managed-page.dpip-dashboard-page #primary .dpip .dpip-workspace-header > .dpip-shell > :first-child,
	body.dpip-managed-page.dpip-job-board-page #primary .dpip .dpip-workspace-header > .dpip-shell > :first-child,
	body.dpip-managed-page.dpip-profile-page #primary .dpip .dpip-workspace-header > .dpip-shell > :first-child,
	body.dpip-managed-page.dpip-post-job-page #primary .dpip .dpip-workspace-header > .dpip-shell > :first-child {
		box-sizing: border-box !important;
		flex: 1 1 0 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: auto !important;
	}

	body.dpip-managed-page.dpip-dashboard-page #primary .dpip .dpip-workspace-header > .dpip-shell > :first-child > :where(h1, p),
	body.dpip-managed-page.dpip-job-board-page #primary .dpip .dpip-workspace-header > .dpip-shell > :first-child > :where(h1, p),
	body.dpip-managed-page.dpip-profile-page #primary .dpip .dpip-workspace-header > .dpip-shell > :first-child > :where(h1, p),
	body.dpip-managed-page.dpip-post-job-page #primary .dpip .dpip-workspace-header > .dpip-shell > :first-child > :where(h1, p) {
		max-width: none !important;
		min-width: 0 !important;
		text-align: left !important;
		white-space: normal !important;
		width: 100% !important;
	}

	body.dpip-managed-page.dpip-dashboard-page #primary .dpip .dpip-workspace-header > .dpip-shell > :is(.dpip-workspace-header__meta, .dpip-persona-badge),
	body.dpip-managed-page.dpip-job-board-page #primary .dpip .dpip-workspace-header > .dpip-shell > :is(.dpip-workspace-header__meta, .dpip-persona-badge),
	body.dpip-managed-page.dpip-profile-page #primary .dpip .dpip-workspace-header > .dpip-shell > :is(.dpip-workspace-header__meta, .dpip-persona-badge),
	body.dpip-managed-page.dpip-post-job-page #primary .dpip .dpip-workspace-header > .dpip-shell > :is(.dpip-workspace-header__meta, .dpip-persona-badge) {
		box-sizing: border-box !important;
		flex: 0 1 auto !important;
		max-width: 30% !important;
		min-width: 0 !important;
		white-space: normal !important;
		width: fit-content !important;
	}
}

/* A singular public painter projection can render exactly one teaser card.
 * It must not inherit the catalogue's responsive 2/3-column tracks. */
body.dpip-managed-page #primary .dpip-public-preview[data-dpip-public-preview="profile"] > .dpip-public-preview__grid {
	grid-template-columns: minmax(0, 1fr) !important;
	max-width: none !important;
	min-width: 0 !important;
	width: 100% !important;
}

body.dpip-managed-page #primary .dpip-public-preview[data-dpip-public-preview="profile"] > .dpip-public-preview__hero > p {
	max-width: none !important;
	min-width: 0 !important;
	text-align: left !important;
	white-space: normal !important;
	width: 100% !important;
	word-break: normal !important;
}

body.dpip-managed-page #primary .dpip-public-preview[data-dpip-public-preview="profile"] > .dpip-public-preview__grid > .dpip-public-preview__card {
	justify-self: stretch !important;
	max-width: none !important;
	min-width: 0 !important;
	width: 100% !important;
}

/* Directory hero: intrinsic mobile flow, balanced reading rhythm and a
 * desktop action pair anchored to the trust row's lower content edge. */
body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-hero__grid {
	align-items: center !important;
	padding-bottom: 16px !important;
	padding-top: 16px !important;
}

body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-hero__grid > div:first-child {
	align-self: center !important;
	height: auto !important;
	min-height: 0 !important;
	min-width: 0 !important;
}

body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-hero__grid > div:first-child > :where(.dpip-eyebrow, h1, p, .dpip-actions) {
	position: relative;
	z-index: 1;
}

body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-hero h1 {
	line-height: 1.18 !important;
	margin: 7px 0 8px !important;
}

body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-hero__grid > div:first-child > p {
	line-height: 1.52 !important;
	margin: 0 0 12px !important;
	max-width: none !important;
	width: 100% !important;
}

body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-actions {
	align-items: stretch !important;
	gap: 8px !important;
	margin: 0 !important;
}

body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-actions .dpip-btn {
	box-sizing: border-box !important;
	line-height: 1.25 !important;
	min-height: 46px !important;
	min-width: 0 !important;
	overflow-wrap: normal !important;
	padding: 9px 12px !important;
	white-space: normal !important;
	word-break: normal !important;
}

body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-hero__trust {
	align-self: center !important;
}

@media (min-width: 821px) {
	/* The trust panel defines the desktop row height. Stretch only the copy
	 * column to that row and pin its action pair to the bottom, leaving the
	 * same 16px outer hero padding instead of a centred 60px+ blue void. */
	body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-hero__grid > div:first-child {
		align-self: stretch !important;
		display: flex !important;
		flex-direction: column !important;
	}

	body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-actions {
		margin-bottom: 0 !important;
		margin-top: auto !important;
	}
}

@media (max-width: 820px) {
	body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-hero__grid {
		align-items: stretch !important;
		gap: 10px !important;
		padding-bottom: 14px !important;
		padding-top: 14px !important;
	}

	body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-hero__grid > div:first-child {
		align-self: stretch !important;
		width: 100% !important;
	}

	body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-hero__trust {
		margin-top: 0 !important;
	}
}

@media (max-width: 480px) {
	body.dpip-managed-page.dpip-directory-page #primary .dpip-directory .dpip-actions .dpip-btn {
		font-size: 13px !important;
		padding-left: 7px !important;
		padding-right: 7px !important;
	}
}