/*
Theme Name: DP Core
Theme URI: https://directory-pro.com
Description: Directory Pro network design system. Child of Twenty Twelve. One theme, 14 verticals, per-site accent and config via wp options (dp_vertical, dp_accent, dp_form_id, dp_phone).
Author: Houston Barnett-Gearhart
Template: twentytwelve
Version: 1.0.0
Text Domain: dp-core
*/

/* ==========================================================================
   1. TOKENS
   Type scale 12-72. Spacing scale 4-768. Nine shades per color. Five shadows.
   Pick from these. Do not invent values.
   ========================================================================== */

:root {
	/* --- type scale --- */
	--dp-text-12: 0.75rem;
	--dp-text-14: 0.875rem;
	--dp-text-16: 1rem;
	--dp-text-18: 1.125rem;
	--dp-text-20: 1.25rem;
	--dp-text-24: 1.5rem;
	--dp-text-30: 1.875rem;
	--dp-text-36: 2.25rem;
	--dp-text-48: 3rem;
	--dp-text-60: 3.75rem;

	/* --- spacing scale --- */
	--dp-4: 4px;
	--dp-8: 8px;
	--dp-12: 12px;
	--dp-16: 16px;
	--dp-24: 24px;
	--dp-32: 32px;
	--dp-48: 48px;
	--dp-64: 64px;
	--dp-96: 96px;
	--dp-128: 128px;

	/* --- fonts --- */
	--dp-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--dp-font-prose: "Charter", "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;

	/* --- grey, cool (hue 214, saturation rises at the lightness extremes) --- */
	--dp-grey-100: hsl(214, 32%, 97%);
	--dp-grey-200: hsl(214, 26%, 93%);
	--dp-grey-300: hsl(214, 20%, 86%);
	--dp-grey-400: hsl(214, 15%, 71%);
	--dp-grey-500: hsl(214, 13%, 54%);
	--dp-grey-600: hsl(214, 16%, 42%);
	--dp-grey-700: hsl(214, 22%, 31%);
	--dp-grey-800: hsl(214, 28%, 22%);
	--dp-grey-900: hsl(214, 35%, 14%);

	/* --- brand, per-vertical override lands on --dp-brand-hue --- */
	--dp-brand-hue: 212;
	--dp-brand-100: hsl(var(--dp-brand-hue), 84%, 96%);
	--dp-brand-200: hsl(var(--dp-brand-hue), 80%, 89%);
	--dp-brand-300: hsl(var(--dp-brand-hue), 76%, 76%);
	--dp-brand-400: hsl(var(--dp-brand-hue), 78%, 60%);
	--dp-brand-500: hsl(var(--dp-brand-hue), 84%, 44%);
	--dp-brand-600: hsl(var(--dp-brand-hue), 86%, 37%);
	--dp-brand-700: hsl(var(--dp-brand-hue), 88%, 29%);
	--dp-brand-800: hsl(var(--dp-brand-hue), 88%, 22%);
	--dp-brand-900: hsl(var(--dp-brand-hue), 90%, 16%);

	/* --- action, warm. The only orange on the page is the thing to click. --- */
	--dp-cta-100: hsl(26, 100%, 95%);
	--dp-cta-300: hsl(26, 96%, 76%);
	--dp-cta-500: hsl(24, 92%, 48%);
	--dp-cta-600: hsl(22, 94%, 42%);
	--dp-cta-700: hsl(20, 96%, 35%);
	--dp-cta-900: hsl(18, 92%, 22%);

	/* --- semantic --- */
	--dp-good-500: hsl(152, 62%, 38%);
	--dp-good-100: hsl(152, 56%, 95%);
	--dp-warn-500: hsl(42, 92%, 46%);
	--dp-warn-100: hsl(42, 96%, 94%);

	/* --- elevation --- */
	--dp-shadow-1: 0 1px 3px hsla(214, 35%, 14%, 0.12), 0 1px 2px hsla(214, 35%, 14%, 0.24);
	--dp-shadow-2: 0 3px 6px hsla(214, 35%, 14%, 0.15), 0 2px 4px hsla(214, 35%, 14%, 0.12);
	--dp-shadow-3: 0 10px 20px hsla(214, 35%, 14%, 0.15), 0 3px 6px hsla(214, 35%, 14%, 0.1);
	--dp-shadow-4: 0 15px 25px hsla(214, 35%, 14%, 0.15), 0 5px 10px hsla(214, 35%, 14%, 0.05);

	/* --- radius, border, measure --- */
	--dp-radius-sm: 4px;
	--dp-radius: 8px;
	--dp-radius-lg: 12px;
	--dp-measure: 68ch;
	--dp-page: 1200px;
}

/* ==========================================================================
   2. BASE
   Twenty Twelve ships Open Sans and its own layout. Override at the root and
   let the cascade below do the rest. functions.php dequeues font-open-sans.
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
}

body,
body.custom-font-enabled {
	background: #fff;
	color: var(--dp-grey-900);
	font-family: var(--dp-font-prose);
	font-size: var(--dp-text-18);
	line-height: 1.6;
}

button,
input,
select,
textarea,
.dp-ui {
	font-family: var(--dp-font-ui);
}

/* Twenty Twelve wraps everything in these. Reset its narrow column and let the
   DP layout own the width. */
.site,
.site-content,
.entry-content,
.entry-header,
.widget-area {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	box-shadow: none;
	background: none;
}

a {
	color: var(--dp-brand-600);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--dp-brand-700);
}

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

/* ==========================================================================
   3. LAYOUT
   Prose holds a 68ch measure. The quote rail sits beside it on wide screens.
   ========================================================================== */

.dp-wrap {
	max-width: var(--dp-page);
	margin: 0 auto;
	padding-inline: var(--dp-24);
}

.dp-main {
	padding-block: var(--dp-48) var(--dp-96);
}

.dp-cols {
	display: grid;
	gap: var(--dp-48);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
	.dp-cols {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: var(--dp-64);
		align-items: start;
	}
	.dp-cols--single {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Without the rail, the reading column centres rather than hugging the left. */
	.dp-cols--single > .dp-prose {
		margin-inline: auto;
	}
	.dp-rail {
		position: sticky;
		top: var(--dp-24);
	}
}

.dp-prose {
	max-width: var(--dp-measure);
}

/* ==========================================================================
   4. HEADER AND NAV
   ========================================================================== */

.dp-header {
	background: #fff;
	border-bottom: 1px solid var(--dp-grey-200);
	position: relative;
	z-index: 20;
}

.dp-header__bar {
	display: flex;
	align-items: center;
	gap: var(--dp-24);
	min-height: 72px;
	max-width: var(--dp-page);
	margin: 0 auto;
	padding-inline: var(--dp-24);
}

.dp-brand {
	display: flex;
	align-items: center;
	gap: var(--dp-12);
	font-family: var(--dp-font-ui);
	text-decoration: none;
	color: var(--dp-grey-900);
	margin-right: auto;
}

.dp-brand:hover {
	color: var(--dp-grey-900);
}

.dp-brand__mark {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: var(--dp-radius-sm);
	background: var(--dp-brand-800);
	color: #fff;
	font-size: var(--dp-text-18);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.dp-brand__name {
	font-size: var(--dp-text-18);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.dp-brand__tag {
	display: block;
	font-size: var(--dp-text-12);
	font-weight: 500;
	color: var(--dp-grey-500);
	letter-spacing: 0.01em;
}

.dp-nav {
	font-family: var(--dp-font-ui);
}

.dp-nav ul {
	display: flex;
	align-items: center;
	gap: var(--dp-24);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dp-nav a {
	font-size: var(--dp-text-14);
	font-weight: 500;
	color: var(--dp-grey-700);
	text-decoration: none;
}

.dp-nav a:hover {
	color: var(--dp-brand-600);
}

.dp-nav .current-menu-item > a,
.dp-nav [aria-current="page"] {
	color: var(--dp-grey-900);
	font-weight: 600;
}

.dp-header__phone {
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-14);
	font-weight: 600;
	color: var(--dp-grey-700);
	text-decoration: none;
	white-space: nowrap;
}

.dp-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--dp-grey-300);
	border-radius: var(--dp-radius-sm);
	padding: var(--dp-8) var(--dp-12);
	font-size: var(--dp-text-14);
	font-weight: 600;
	color: var(--dp-grey-700);
	cursor: pointer;
}

@media (max-width: 860px) {
	.dp-nav-toggle {
		display: block;
	}
	.dp-nav {
		display: none;
		position: absolute;
		inset: 100% 0 auto;
		background: #fff;
		border-bottom: 1px solid var(--dp-grey-200);
		box-shadow: var(--dp-shadow-2);
		padding: var(--dp-16) var(--dp-24) var(--dp-24);
	}
	.dp-nav[data-open="true"] {
		display: block;
	}
	.dp-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: var(--dp-4);
	}
	.dp-nav a {
		display: block;
		padding: var(--dp-12) 0;
		font-size: var(--dp-text-16);
		border-bottom: 1px solid var(--dp-grey-100);
	}
	.dp-header__phone {
		display: none;
	}
}

/* ==========================================================================
   5. HERO
   Local pages lead with the place, then the promise, then one action.
   ========================================================================== */

.dp-hero {
	background:
		radial-gradient(120% 140% at 12% -10%, hsla(var(--dp-brand-hue), 84%, 44%, 0.22) 0%, hsla(var(--dp-brand-hue), 84%, 44%, 0) 55%),
		var(--dp-grey-900);
	color: #fff;
	padding-block: var(--dp-48) var(--dp-64);
}

.dp-hero__inner {
	max-width: var(--dp-page);
	margin: 0 auto;
	padding-inline: var(--dp-24);
	display: grid;
	gap: var(--dp-32);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

/* The form is the point of the page, so it sits beside the headline rather than
   below the fold. */
@media (min-width: 1000px) {
	.dp-hero__inner {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--dp-64);
		/* The form is taller than the headline. Top-align so the headline stays
		   at the top of the hero rather than drifting to the middle. */
		align-items: start;
	}
}

.dp-hero__form .dp-quote {
	margin: 0;
}


.dp-hero h1,
.dp-hero__title {
	font-size: var(--dp-text-36);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 var(--dp-16);
	max-width: 24ch;
	color: #fff;
}

@media (min-width: 720px) {
	.dp-hero h1,
	.dp-hero__title {
		font-size: var(--dp-text-48);
	}
}

.dp-hero__sub {
	font-size: var(--dp-text-20);
	line-height: 1.5;
	color: var(--dp-grey-300);
	max-width: 56ch;
	margin: 0 0 var(--dp-32);
}

.dp-hero__sub:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   6. BUTTONS
   Styled by hierarchy. Orange is primary and appears once per view.
   ========================================================================== */

.dp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dp-8);
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-16);
	font-weight: 600;
	line-height: 1;
	padding: var(--dp-12) var(--dp-16);
	border: 1px solid transparent;
	border-radius: var(--dp-radius);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease, box-shadow 120ms ease;
}

.dp-btn--primary {
	background: var(--dp-cta-500);
	color: #fff;
	box-shadow: inset 0 1px 0 var(--dp-cta-300), var(--dp-shadow-1);
}

.dp-btn--primary:hover {
	background: var(--dp-cta-600);
	color: #fff;
}

.dp-btn--secondary {
	background: #fff;
	color: var(--dp-grey-800);
	border-color: var(--dp-grey-300);
	box-shadow: var(--dp-shadow-1);
}

.dp-btn--secondary:hover {
	background: var(--dp-grey-100);
	color: var(--dp-grey-900);
}

.dp-btn--ghost {
	background: none;
	color: var(--dp-brand-600);
	padding-inline: 0;
}

.dp-btn--lg {
	font-size: var(--dp-text-20);
	padding: var(--dp-16) var(--dp-32);
}

.dp-btn--block {
	width: 100%;
}

/* ==========================================================================
   7. PROSE
   Serves both content shapes: the pipeline article and the old block pages.
   ========================================================================== */

.dp-prose > *,
.entry-content > * {
	max-width: var(--dp-measure);
}

.dp-prose p,
.entry-content p {
	margin: 0 0 var(--dp-24);
}

.dp-prose h2,
.entry-content h2 {
	font-family: var(--dp-font-prose);
	font-size: var(--dp-text-30);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--dp-grey-900);
	margin: var(--dp-48) 0 var(--dp-16);
	scroll-margin-top: var(--dp-24);
}

.dp-prose h3,
.entry-content h3 {
	font-family: var(--dp-font-prose);
	font-size: var(--dp-text-20);
	line-height: 1.3;
	font-weight: 600;
	color: var(--dp-grey-900);
	margin: var(--dp-32) 0 var(--dp-12);
	scroll-margin-top: var(--dp-24);
}

.dp-prose h4,
.entry-content h4 {
	font-family: var(--dp-font-prose);
	font-size: var(--dp-text-16);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--dp-grey-700);
	margin: var(--dp-24) 0 var(--dp-8);
}

.dp-prose ul,
.dp-prose ol,
.entry-content ul,
.entry-content ol {
	margin: 0 0 var(--dp-24);
	padding-left: var(--dp-24);
}

.dp-prose li,
.entry-content li {
	margin-bottom: var(--dp-8);
}

.dp-prose li::marker {
	color: var(--dp-grey-400);
}

/* The pipeline's first paragraph carries the answer. Let it read like one. */
.dp-prose section[data-section="intro"] > p:first-child,
.entry-content section[data-section="intro"] > p:first-child {
	font-size: var(--dp-text-20);
	line-height: 1.55;
	color: var(--dp-grey-800);
	border-left: 3px solid var(--dp-brand-500);
	padding-left: var(--dp-24);
}

/* --- Legacy content repair -------------------------------------------------
   The 13 older sites hold no <p> tags. Body copy sits in bare
   <span style="font-weight: 400"> runs, and every <h2> wraps its text in <b>.
   Treat those spans as paragraphs and drop the inline weight. */

.dp-prose > span[style],
.entry-content > span[style] {
	display: block;
	max-width: var(--dp-measure);
	margin: 0 0 var(--dp-24);
	font-weight: 400 !important;
}

.dp-prose h2 > b,
.dp-prose h3 > b,
.dp-prose h4 > b,
.entry-content h2 > b,
.entry-content h3 > b,
.entry-content h4 > b {
	font-weight: inherit;
}

.dp-prose li > span[style],
.entry-content li > span[style] {
	font-weight: 400 !important;
}

.dp-prose blockquote,
.entry-content blockquote {
	margin: var(--dp-32) 0;
	padding: var(--dp-4) 0 var(--dp-4) var(--dp-24);
	border-left: 3px solid var(--dp-grey-300);
	color: var(--dp-grey-700);
	font-style: normal;
}

/* ==========================================================================
   8. TABLE OF CONTENTS
   ========================================================================== */

.dp-toc,
nav[data-section="toc"] {
	font-family: var(--dp-font-ui);
	background: var(--dp-grey-100);
	border: 1px solid var(--dp-grey-200);
	border-radius: var(--dp-radius);
	padding: var(--dp-24);
	margin: var(--dp-32) 0 var(--dp-48);
}

.dp-toc h2,
nav[data-section="toc"] h2 {
	font-size: var(--dp-text-12) !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dp-grey-500);
	margin: 0 0 var(--dp-12) !important;
}

.dp-toc ul,
nav[data-section="toc"] ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dp-toc ul ul,
nav[data-section="toc"] ul ul {
	padding-left: var(--dp-16);
	margin-top: var(--dp-4);
}

.dp-toc li,
nav[data-section="toc"] li {
	margin: 0 0 var(--dp-8);
}

.dp-toc a,
nav[data-section="toc"] a {
	font-size: var(--dp-text-14);
	font-weight: 500;
	color: var(--dp-grey-700);
	text-decoration: none;
	line-height: 1.4;
}

.dp-toc a:hover,
nav[data-section="toc"] a:hover {
	color: var(--dp-brand-600);
	text-decoration: underline;
}

.dp-toc ul ul a,
nav[data-section="toc"] ul ul a {
	font-weight: 400;
	color: var(--dp-grey-600);
}

/* ==========================================================================
   9. QUOTE CARD AND FORM
   The one conversion surface. Raised, warm border, light from above.
   ========================================================================== */

.dp-quote,
.dp-form-wrap {
	font-family: var(--dp-font-ui);
	background: #fff;
	border: 1px solid var(--dp-grey-200);
	border-top: 3px solid var(--dp-cta-500);
	border-radius: var(--dp-radius-lg);
	box-shadow: var(--dp-shadow-3);
	padding: var(--dp-24);
	max-width: none;
	margin: var(--dp-48) 0;
}

.dp-hero__form .dp-quote {
	box-shadow: var(--dp-shadow-4);
}

.dp-quote h2,
.dp-form-wrap h2 {
	font-family: var(--dp-font-ui) !important;
	font-size: var(--dp-text-24) !important;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--dp-grey-900);
	margin: 0 0 var(--dp-8) !important;
	max-width: none;
}

.dp-quote p,
.dp-form-wrap p {
	font-size: var(--dp-text-14);
	line-height: 1.5;
	color: var(--dp-grey-600);
	margin: 0 0 var(--dp-16);
	max-width: none;
}

.dp-quote__proof {
	display: flex;
	align-items: center;
	gap: var(--dp-8);
	font-size: var(--dp-text-12);
	font-weight: 600;
	color: var(--dp-good-500);
	background: var(--dp-good-100);
	border-radius: 999px;
	padding: var(--dp-4) var(--dp-12);
	margin: 0 0 var(--dp-16);
	width: fit-content;
}

/* Fluent Form defaults, supercharged. */
.dp-quote .ff-el-group,
.dp-form-wrap .ff-el-group {
	margin-bottom: var(--dp-16);
}

.dp-quote label,
.dp-form-wrap label,
.dp-quote .ff-el-input--label label {
	display: block;
	font-size: var(--dp-text-12) !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dp-grey-600);
	margin-bottom: var(--dp-4);
}

.dp-quote input[type="text"],
.dp-quote input[type="email"],
.dp-quote input[type="tel"],
.dp-quote select,
.dp-quote textarea,
.dp-form-wrap input[type="text"],
.dp-form-wrap input[type="email"],
.dp-form-wrap input[type="tel"],
.dp-form-wrap select,
.dp-form-wrap textarea,
.dp-form-wrap .ff-el-form-control {
	width: 100%;
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-16);
	color: var(--dp-grey-900);
	background: #fff;
	padding: var(--dp-12);
	border: 1px solid var(--dp-grey-300);
	border-radius: var(--dp-radius-sm);
	box-shadow: inset 0 1px 2px hsla(214, 35%, 14%, 0.06);
}

.dp-form-wrap .ff-el-form-control:focus,
.dp-quote input:focus,
.dp-quote select:focus,
.dp-quote textarea:focus {
	outline: 2px solid var(--dp-brand-400);
	outline-offset: 1px;
	border-color: var(--dp-brand-500);
}

.dp-quote button[type="submit"],
.dp-form-wrap button[type="submit"],
.dp-form-wrap .ff-btn-submit {
	width: 100%;
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-18);
	font-weight: 700;
	color: #fff;
	background: var(--dp-cta-500);
	border: 1px solid transparent;
	border-radius: var(--dp-radius);
	padding: var(--dp-16);
	cursor: pointer;
	box-shadow: inset 0 1px 0 var(--dp-cta-300), var(--dp-shadow-1);
}

.dp-quote button[type="submit"]:hover,
.dp-form-wrap .ff-btn-submit:hover {
	background: var(--dp-cta-600);
}

/* Fluent Form ships its own button colour at higher specificity, and the form
   settings can add an inline one. The submit button is the primary action on
   the page, so it takes the action colour. */
.dp-form-wrap .ff-btn.ff-btn-submit,
.dp-form-wrap button.ff-btn-submit,
.dp-quote .ff-btn.ff-btn-submit,
.dp-quote button.ff-btn-submit {
	background-color: var(--dp-cta-500) !important;
	background-image: none !important;
	border-color: transparent !important;
	color: #fff !important;
	font-family: var(--dp-font-ui) !important;
	font-size: var(--dp-text-18) !important;
	font-weight: 700 !important;
	border-radius: var(--dp-radius) !important;
	box-shadow: inset 0 1px 0 var(--dp-cta-300), var(--dp-shadow-1) !important;
}

.dp-form-wrap .ff-btn.ff-btn-submit:hover,
.dp-quote .ff-btn.ff-btn-submit:hover {
	background-color: var(--dp-cta-600) !important;
}

.dp-quote__fine {
	font-size: var(--dp-text-12) !important;
	color: var(--dp-grey-500);
	margin: var(--dp-12) 0 0 !important;
	text-align: center;
}

/* ==========================================================================
   10. STICKY MOBILE CTA
   ========================================================================== */

.dp-sticky {
	position: fixed;
	inset: auto 0 0;
	z-index: 30;
	display: none;
	gap: var(--dp-12);
	align-items: center;
	background: hsla(214, 35%, 14%, 0.97);
	padding: var(--dp-12) var(--dp-16);
	box-shadow: 0 -4px 16px hsla(214, 35%, 14%, 0.25);
}

.dp-sticky__text {
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-12);
	font-weight: 600;
	line-height: 1.3;
	color: var(--dp-grey-300);
	margin: 0;
	flex: 1 1 auto;
}

.dp-sticky .dp-btn {
	flex: 0 0 auto;
}

@media (max-width: 860px) {
	.dp-sticky {
		display: flex;
	}
	body {
		padding-bottom: 72px;
	}
}

/* ==========================================================================
   11. TABLES
   Numbers right-aligned and tabular. Fewer borders, banded rows.
   ========================================================================== */

.dp-prose .dp-table-wrap,
.entry-content .dp-table-wrap {
	max-width: none;
	overflow-x: auto;
	margin: var(--dp-32) 0;
	border: 1px solid var(--dp-grey-200);
	border-radius: var(--dp-radius);
}

.dp-prose table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-14);
	border: 0;
	margin: 0;
}

.dp-prose th,
.entry-content th {
	text-align: left;
	font-size: var(--dp-text-12);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dp-grey-600);
	background: var(--dp-grey-100);
	padding: var(--dp-12) var(--dp-16);
	border-bottom: 1px solid var(--dp-grey-200);
}

.dp-prose td,
.entry-content td {
	padding: var(--dp-12) var(--dp-16);
	border-bottom: 1px solid var(--dp-grey-100);
	color: var(--dp-grey-800);
	vertical-align: top;
}

.dp-prose tbody tr:nth-child(even) td,
.entry-content tbody tr:nth-child(even) td {
	background: var(--dp-grey-100);
}

.dp-prose tbody tr:last-child td,
.entry-content tbody tr:last-child td {
	border-bottom: 0;
}

.dp-num,
.dp-prose td.dp-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--dp-grey-900);
}

/* ==========================================================================
   12. PROVIDER SLOT
   Where the CallRail number and the Places listings land.
   ========================================================================== */

.dp-providers {
	max-width: none;
	margin: var(--dp-48) 0;
}

.dp-providers__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dp-16);
	margin-bottom: var(--dp-16);
}

.dp-provider {
	font-family: var(--dp-font-ui);
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: var(--dp-16);
	align-items: center;
	background: #fff;
	border: 1px solid var(--dp-grey-200);
	border-radius: var(--dp-radius);
	box-shadow: var(--dp-shadow-1);
	padding: var(--dp-16);
	margin-bottom: var(--dp-12);
}

.dp-provider__mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--dp-radius-sm);
	background: var(--dp-grey-100);
	color: var(--dp-grey-600);
	font-size: var(--dp-text-18);
	font-weight: 700;
}

.dp-provider__name {
	font-size: var(--dp-text-16);
	font-weight: 600;
	color: var(--dp-grey-900);
	margin: 0;
}

.dp-provider__meta {
	font-size: var(--dp-text-12);
	color: var(--dp-grey-500);
	margin: var(--dp-4) 0 0;
}

.dp-provider--empty {
	display: block;
	text-align: center;
	background: var(--dp-grey-100);
	border-style: dashed;
	border-color: var(--dp-grey-300);
	box-shadow: none;
	color: var(--dp-grey-600);
	padding: var(--dp-32) var(--dp-24);
}

.dp-provider--empty p {
	font-size: var(--dp-text-14);
	margin: 0 0 var(--dp-16);
	color: var(--dp-grey-600);
}

/* ==========================================================================
   13. SILO INDEX GRID
   State hubs and the city list. Links are the product here.
   ========================================================================== */

.dp-silo-index,
.dp-grid {
	max-width: none;
	margin: var(--dp-48) 0;
}

.dp-silo-index h2,
.dp-grid h2 {
	margin-top: 0;
}

.dp-silo-index ul,
.dp-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dp-8);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.dp-silo-index li,
.dp-grid__list li {
	margin: 0;
}

.dp-silo-index a,
.dp-grid__list a {
	font-family: var(--dp-font-ui);
	display: block;
	font-size: var(--dp-text-14);
	font-weight: 500;
	color: var(--dp-grey-800);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--dp-grey-200);
	border-left: 3px solid var(--dp-brand-300);
	border-radius: var(--dp-radius-sm);
	padding: var(--dp-12) var(--dp-16);
}

.dp-silo-index a:hover,
.dp-grid__list a:hover {
	border-left-color: var(--dp-cta-500);
	background: var(--dp-grey-100);
	color: var(--dp-grey-900);
}

/* ==========================================================================
   14. FIGURES
   ========================================================================== */

.dp-stock-image,
.dp-prose figure,
.entry-content figure {
	max-width: none !important;
	margin: var(--dp-32) 0 !important;
}

.dp-stock-image img,
.dp-prose figure img,
.entry-content figure img {
	width: 100%;
	height: auto;
	border-radius: var(--dp-radius) !important;
	box-shadow: var(--dp-shadow-2);
}

.dp-stock-image figcaption,
.entry-content figcaption {
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-12);
	color: var(--dp-grey-500);
	margin-top: var(--dp-8);
}

/* ==========================================================================
   15. BREADCRUMB
   ========================================================================== */

.dp-crumbs {
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-12);
	font-weight: 500;
	color: var(--dp-grey-500);
	padding-block: var(--dp-16) 0;
}

.dp-crumbs a {
	color: var(--dp-grey-600);
	text-decoration: none;
}

.dp-crumbs a:hover {
	color: var(--dp-brand-600);
	text-decoration: underline;
}

.dp-crumbs__sep {
	color: var(--dp-grey-400);
	margin-inline: var(--dp-8);
}

/* ==========================================================================
   16. CTA BAND
   Replaces the pipeline's inline-styled grey CTA block.
   ========================================================================== */

.dp-prose section[data-section="cta"],
.entry-content section[data-section="cta"],
.dp-cta-band {
	max-width: none;
	background: var(--dp-brand-900);
	border-radius: var(--dp-radius-lg);
	color: #fff;
	padding: var(--dp-32);
	margin: var(--dp-48) 0;
	text-align: center;
}

.dp-prose section[data-section="cta"] > div,
.entry-content section[data-section="cta"] > div {
	background: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

.dp-prose section[data-section="cta"] h2,
.entry-content section[data-section="cta"] h2,
.dp-cta-band h2 {
	color: #fff;
	margin-top: 0 !important;
	font-size: var(--dp-text-30) !important;
	max-width: 28ch;
	margin-inline: auto;
}

.dp-prose section[data-section="cta"] p,
.entry-content section[data-section="cta"] p,
.dp-cta-band p {
	color: var(--dp-grey-300);
	max-width: 52ch;
	margin-inline: auto;
}

.dp-prose section[data-section="cta"] a,
.entry-content section[data-section="cta"] a,
.dp-cta-band .dp-btn {
	display: inline-flex;
	align-items: center;
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-18);
	font-weight: 700;
	color: #fff !important;
	background: var(--dp-cta-500) !important;
	border-radius: var(--dp-radius);
	padding: var(--dp-16) var(--dp-32) !important;
	text-decoration: none;
	box-shadow: inset 0 1px 0 var(--dp-cta-300), var(--dp-shadow-1);
	margin-top: var(--dp-8);
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.dp-footer {
	background: var(--dp-grey-900);
	color: var(--dp-grey-400);
	font-family: var(--dp-font-ui);
	padding-block: var(--dp-48) var(--dp-32);
	margin-top: var(--dp-96);
}

.dp-footer__inner {
	max-width: var(--dp-page);
	margin: 0 auto;
	padding-inline: var(--dp-24);
	display: grid;
	gap: var(--dp-32);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
	.dp-footer__inner {
		grid-template-columns: 2fr 1fr 1fr;
		gap: var(--dp-48);
	}
}

.dp-footer h2 {
	font-size: var(--dp-text-12);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dp-grey-500);
	margin: 0 0 var(--dp-12);
}

.dp-footer p {
	font-size: var(--dp-text-14);
	line-height: 1.6;
	margin: 0 0 var(--dp-12);
	max-width: 48ch;
}

.dp-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dp-footer li {
	margin-bottom: var(--dp-8);
}

.dp-footer a {
	font-size: var(--dp-text-14);
	color: var(--dp-grey-300);
	text-decoration: none;
}

.dp-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.dp-footer__legal {
	max-width: var(--dp-page);
	margin: var(--dp-48) auto 0;
	padding: var(--dp-24) var(--dp-24) 0;
	border-top: 1px solid var(--dp-grey-800);
	font-size: var(--dp-text-12);
	color: var(--dp-grey-500);
}

/* ==========================================================================
   18. UTILITY AND TWENTY TWELVE CLEANUP
   ========================================================================== */

.dp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.site-header,
.main-navigation,
.site-info,
#colophon .site-info,
.template-front-page .widget-area {
	display: none;
}

.entry-header .entry-title,
.page .entry-header {
	display: none;
}

/* Twenty Twelve's own H1 inside single posts stays, styled by the prose rules. */
.single .entry-header,
.single .entry-header .entry-title {
	display: block;
}

.single .entry-header .entry-title {
	font-family: var(--dp-font-prose);
	font-size: var(--dp-text-36);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--dp-grey-900);
	margin: 0 0 var(--dp-16);
	max-width: 32ch;
}

@media print {
	.dp-header,
	.dp-sticky,
	.dp-quote,
	.dp-footer {
		display: none;
	}
}

/* ==========================================================================
   19. POST TITLE
   ========================================================================== */

.dp-post-title {
	font-family: var(--dp-font-prose);
	font-size: var(--dp-text-36);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--dp-grey-900);
	margin: 0 0 var(--dp-8);
	max-width: 32ch;
	text-wrap: balance;
}

.dp-post-meta {
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-12);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dp-grey-500);
	margin: 0 0 var(--dp-32);
}

.dp-main .pagination,
.dp-main .nav-links {
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-14);
	margin-top: var(--dp-32);
}

/* ==========================================================================
   20. HERO MOTIF
   A single line drawing of the subject, sitting in the space the headline
   leaves. It is behind the text and never competes with it.
   ========================================================================== */

.dp-hero {
	position: relative;
	overflow: hidden;
}

.dp-hero__inner {
	position: relative;
	z-index: 1;
}

.dp-motif {
	display: none;
	position: absolute;
	left: max(24px, calc((100% - var(--dp-page)) / 2 + 24px));
	bottom: -40px;
	width: 300px;
	height: 300px;
	color: var(--dp-brand-200);
	opacity: 0.16;
	pointer-events: none;
	z-index: 0;
}

/* The motif only appears where the headline leaves room for it. */
@media (min-width: 1100px) {
	.dp-motif {
		display: block;
	}
}

.dp-hero__coverage {
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-14);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--dp-grey-400);
	margin: var(--dp-16) 0 0;
}

.dp-hero__points {
	font-family: var(--dp-font-ui);
	list-style: none;
	margin: var(--dp-32) 0 0;
	padding: 0;
	display: grid;
	gap: var(--dp-12);
	max-width: 46ch;
}

.dp-hero__points li {
	position: relative;
	padding-left: var(--dp-32);
	font-size: var(--dp-text-14);
	line-height: 1.5;
	color: var(--dp-grey-300);
	margin: 0;
}

.dp-hero__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--dp-cta-500);
}

.dp-hero__coverage::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 1px;
	background: currentColor;
	vertical-align: 4px;
	margin-right: var(--dp-12);
	opacity: 0.6;
}

/* ==========================================================================
   21. HOW IT WORKS
   ========================================================================== */

.dp-steps {
	padding-block: var(--dp-16) var(--dp-48);
}

.dp-steps h2 {
	font-family: var(--dp-font-prose);
	font-size: var(--dp-text-24);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--dp-grey-900);
	margin: 0 0 var(--dp-24);
}

.dp-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dp-24);
	grid-template-columns: minmax(0, 1fr);
	counter-reset: dp-step;
}

@media (min-width: 760px) {
	.dp-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--dp-32);
	}
}

.dp-step {
	font-family: var(--dp-font-ui);
	position: relative;
	padding-left: var(--dp-64);
	counter-increment: dp-step;
}

.dp-step__icon {
	position: absolute;
	left: 0;
	top: 2px;
	width: 44px;
	height: 44px;
	color: var(--dp-brand-600);
}

.dp-step h3 {
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-16);
	font-weight: 700;
	color: var(--dp-grey-900);
	margin: 0 0 var(--dp-4);
}

.dp-step p {
	font-size: var(--dp-text-14);
	line-height: 1.55;
	color: var(--dp-grey-600);
	margin: 0;
	max-width: 42ch;
}

/* ==========================================================================
   22. HOME LOCATION GRID
   ========================================================================== */

.dp-silo-index--home {
	margin-block: var(--dp-16) var(--dp-48);
}

.dp-silo-index--home h2 {
	font-family: var(--dp-font-prose);
	font-size: var(--dp-text-24);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 var(--dp-16);
}

.dp-silo-index__all {
	font-family: var(--dp-font-ui);
	font-size: var(--dp-text-14);
	font-weight: 600;
	margin: var(--dp-16) 0 0;
}

/* ==========================================================================
   23. PHONE FIXES
   A 14 site network gets checked at 400px before anything ships. These are the
   rules that check turned up.
   ========================================================================== */

@media (max-width: 760px) {
	/* Several site titles are full search headlines. At phone width they ran to
	   six lines and pushed the form off the screen. */
	.dp-hero h1,
	.dp-hero__title {
		font-size: var(--dp-text-30);
		line-height: 1.15;
		text-wrap: balance;
	}

	.dp-hero {
		padding-block: var(--dp-32) var(--dp-48);
	}

	.dp-hero__sub {
		font-size: var(--dp-text-18);
	}

	.dp-main {
		padding-block: var(--dp-32) var(--dp-64);
	}

	.dp-quote,
	.dp-form-wrap {
		padding: var(--dp-16);
	}

	/* The sticky bar sat on top of the last form field. */
	body {
		padding-bottom: 88px;
	}

	.dp-prose h2,
	.entry-content h2 {
		font-size: var(--dp-text-24);
		margin-top: var(--dp-32);
	}

	.dp-brand__tag {
		display: none;
	}
}