/*
	Feature detail pages

	CRM, Inventory, Quotes & Financing, Communications, Dealer Website, Marketing and Accounting.
	Same language as the features hub, the AI page and the phone page - one grotesque family,
	left-aligned, rules instead of cards. The hero is the navy with the blue glow and, beside the
	text, either the page's own picture or the first few things the module does.

	Everything is prefixed .fd- so nothing fights the theme's .dp- primitives; only .dp-container
	is borrowed. The Solution pages keep css/detail/detail.css. Nothing on the page moves.
*/

.fd {
	--fd-ink: #102338;
	--fd-ink-soft: #4a5b6d;
	--fd-fog: #edf0f3;
	--fd-line: #d5dbe2;
	--fd-blue: #1478cf;
	--fd-blue-bright: #2196f3;
	--fd-sky: #7cc3fa;
	--fd-font: "Schibsted Grotesk", "Segoe UI", sans-serif;

	font-family: var(--fd-font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--fd-ink);
}

/* :where() keeps the reset at the lowest specificity, so every class rule below wins over it */
.fd :where(h1, h2, h3, p, ul, ol, dl, dd, figure) {
	margin: 0;
	padding: 0;
	font-family: var(--fd-font);
}

.fd :where(ul, ol) {
	list-style: none;
}

.fd a:focus-visible {
	outline: 3px solid var(--fd-blue-bright);
	outline-offset: 3px;
}


/* ---------------------------------------------------------------- Type and buttons */

.fd .fd-title {
	max-width: 18ch;
	font-size: clamp(32px, 4.2vw, 54px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.028em;
	text-wrap: balance;
}

.fd .fd-lede {
	max-width: 46ch;
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--fd-ink-soft);
}

.fd .fd-eyebrow {
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fd-blue);
}

.fd .fd-section {
	padding: 112px 0;
}

/* Section opener: the title on the left, the sentence that explains it on the right */
.fd .fd-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	gap: 20px 64px;
	align-items: end;
	margin-bottom: 64px;
}

.fd .fd-head .fd-lede {
	margin-top: 0;
}

.fd .fd-btn {
	display: inline-block;
	padding: 16px 28px;
	border-radius: 4px;
	background: var(--fd-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: #ffffff;
	transition: background-color 0.15s, color 0.15s;
}

.fd .fd-btn:hover,
.fd .fd-btn:focus {
	background: var(--fd-blue);
	text-decoration: none;
	color: #ffffff;
}

/* On the navy and blue grounds the button turns over */
.fd .fd-btn-light {
	background: #ffffff;
	color: var(--fd-ink);
}

.fd .fd-btn-light:hover,
.fd .fd-btn-light:focus {
	background: #d8ecfd;
	color: var(--fd-ink);
}

.fd .fd-link {
	font-size: 16px;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	text-decoration-color: var(--fd-line);
	color: var(--fd-ink);
	transition: text-decoration-color 0.15s;
}

.fd .fd-link:hover,
.fd .fd-link:focus {
	text-decoration-color: var(--fd-blue-bright);
	color: var(--fd-ink);
}

/* A tick drawn in CSS, so the lists need no icon markup */
.fd .fd-ticks {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 28px;
}

.fd .fd-ticks li {
	position: relative;
	padding-left: 30px;
	font-weight: 500;
}

.fd .fd-ticks li:before {
	content: "";
	position: absolute;
	top: 0.4em;
	left: 2px;
	width: 12px;
	height: 7px;
	border-bottom: 3px solid var(--fd-blue-bright);
	border-left: 3px solid var(--fd-blue-bright);
	transform: rotate(-45deg);
}


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

.fd .fd-hero {
	overflow: hidden;
	background-color: var(--fd-ink);
	background-image: radial-gradient(ellipse 55% 80% at 100% 40%, rgba(33, 150, 243, 0.3) 0%, rgba(33, 150, 243, 0) 70%);
	color: #ffffff;

	/* 60px of the top is the fixed header */
	padding: 112px 0 104px 0;
}

.fd .fd-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 64px;
	align-items: center;
}

.fd .fd-crumbs {
	margin-bottom: 28px;
}

.fd .fd-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.64);
}

.fd .fd-crumbs li + li:before {
	content: "/";
	margin-right: 8px;
	color: rgba(255, 255, 255, 0.3);
}

.fd .fd-crumbs a {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.8);
}

.fd .fd-crumbs a:hover,
.fd .fd-crumbs a:focus {
	text-decoration: underline;
	color: #ffffff;
}

.fd .fd-hero-title {
	max-width: 11em;
	font-size: clamp(40px, 5.2vw, 70px);
	font-weight: 800;
	line-height: 0.99;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.fd .fd-hero-subtitle {
	max-width: 44ch;
	margin-top: 28px;
	font-size: 20px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

.fd .fd-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	align-items: center;
	margin-top: 36px;
}

.fd .fd-hero .fd-link {
	text-decoration-color: rgba(255, 255, 255, 0.35);
	color: #ffffff;
}

.fd .fd-hero .fd-link:hover,
.fd .fd-hero .fd-link:focus {
	text-decoration-color: var(--fd-sky);
	color: #ffffff;
}

/* The picture is a dark composition, so it sits on the navy as a framed window */
.fd .fd-hero-image {
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	box-shadow: 0 40px 70px -28px rgba(0, 0, 0, 0.6);
}

.fd .fd-hero-image img {
	display: block;
	width: 100%;
	height: auto;
}


/* ---------------------------------------------------------------- What the module is made of */

.fd .fd-glance {
	max-width: 480px;
	margin: 0 0 0 auto;
	padding: 24px 24px 18px 24px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.07);
	box-shadow: 0 40px 70px -28px rgba(0, 0, 0, 0.5);
}

.fd .fd-glance-label {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fd-sky);
}

.fd .fd-glance-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3ddc84;
	box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.2);
}

.fd .fd-glance-list li {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 14px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.fd .fd-glance-icon {
	flex: 0 0 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 18px;
	color: #ffffff;
}

.fd .fd-glance-name {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.fd .fd-glance-more {
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 15px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.64);
}


/* ---------------------------------------------------------------- Highlights */

.fd .fd-highlights {
	background: #ffffff;
}

.fd .fd-highlight-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
}

.fd .fd-highlight-list li {
	padding-top: 24px;
	border-top: 2px solid var(--fd-ink);
}

.fd .fd-highlight-list li > i {
	font-size: 26px;
	color: var(--fd-blue);
}

.fd .fd-highlight-list h3 {
	margin-top: 18px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.fd .fd-highlight-list p {
	margin-top: 10px;
	color: var(--fd-ink-soft);
}


/* ---------------------------------------------------------------- Showcase */

.fd .fd-showcase {
	background: var(--fd-fog);
}

.fd .fd-showcase-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 72px;
	align-items: center;
}

.fd .fd-showcase-row + .fd-showcase-row {
	margin-top: 112px;
}

/* Every other row turns over, so the page reads as a zigzag rather than a column */
.fd .fd-showcase-row:nth-child(even) .fd-showcase-copy {
	order: 2;
}

.fd .fd-showcase-title {
	max-width: 16ch;
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.028em;
	text-wrap: balance;
}

.fd .fd-showcase-media {
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 30px 60px -30px rgba(16, 35, 56, 0.4);
}

.fd .fd-showcase-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Until the picture is made: a ground the size the picture will be, saying what it should show */
.fd .fd-showcase-media.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	border: 2px dashed var(--fd-line);
	background: transparent;
	box-shadow: none;
	text-align: center;
}

.fd .fd-showcase-media figcaption {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	max-width: 36ch;
	color: var(--fd-ink-soft);
}

.fd .fd-showcase-media figcaption i {
	font-size: 32px;
	color: var(--fd-blue);
}

.fd .fd-media-flag {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fd-ink);
}

.fd .fd-media-label {
	font-size: 15px;
}


/* ---------------------------------------------------------------- Capabilities */

.fd .fd-blocks {
	background: #ffffff;
}

.fd .fd-blocks-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 72px;
	align-items: start;
}

/* The heading stays in view while the list goes by */
.fd .fd-blocks-head {
	position: sticky;
	top: 104px;
}

.fd .fd-spec {
	border-top: 2px solid var(--fd-ink);
}

.fd .fd-spec-row {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 8px 32px;
	padding: 24px 0;
	border-bottom: 1px solid var(--fd-line);
}

.fd .fd-spec-row dt {
	display: flex;
	gap: 14px;
	align-items: baseline;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.fd .fd-spec-row dt i {
	flex: 0 0 22px;
	font-size: 17px;
	color: var(--fd-blue);
}

.fd .fd-spec-row dd {
	color: var(--fd-ink-soft);
}


/* ---------------------------------------------------------------- How it works */

.fd .fd-steps-band {
	background: var(--fd-fog);
}

/* One rule runs across the steps, and each step hangs a dot from it */
.fd .fd-line {
	counter-reset: fd-step;
	display: grid;
	grid-template-columns: repeat(var(--fd-steps, 4), minmax(0, 1fr));
	gap: 40px;
	margin-top: 64px;
	border-top: 2px solid var(--fd-ink);
}

.fd .fd-line li {
	counter-increment: fd-step;
	position: relative;
	padding-top: 32px;
}

.fd .fd-line li:before {
	content: "";
	position: absolute;
	top: -9px;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--fd-blue-bright);
	box-shadow: 0 0 0 4px var(--fd-fog);
}

.fd .fd-line h3 {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.fd .fd-line h3:before {
	content: counter(fd-step) ". ";
	color: var(--fd-blue);
}

.fd .fd-line p {
	max-width: 28ch;
	margin-top: 10px;
	color: var(--fd-ink-soft);
}


/* ---------------------------------------------------------------- Plans */

.fd .fd-plans-band {
	padding: 56px 0;
	background: #ffffff;
}

.fd .fd-plans {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
}

.fd .fd-plans-label {
	font-weight: 700;
}

.fd .fd-plans-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fd .fd-plans-chips li {
	padding: 4px 18px;
	border: 2px solid var(--fd-ink);
	border-radius: 999px;
	font-weight: 700;
}

.fd .fd-plans-note {
	flex: 1 1 320px;
	color: var(--fd-ink-soft);
}


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

.fd .fd-related {
	background: var(--fd-fog);
}

.fd .fd-related-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
	margin-top: 64px;
}

.fd .fd-related-list li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 24px;
	border-top: 2px solid var(--fd-ink);
}

.fd .fd-related-list h3 {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/* The whole item is the target, not only the words */
.fd .fd-related-list h3 a {
	text-decoration: none;
	color: var(--fd-ink);
}

.fd .fd-related-list h3 a:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.fd .fd-related-list h3 a:hover,
.fd .fd-related-list h3 a:focus {
	text-decoration: none;
	color: var(--fd-blue);
}

.fd .fd-related-list p {
	max-width: 32ch;
	margin: 12px 0 24px 0;
	color: var(--fd-ink-soft);
}

.fd .fd-related-go {
	margin-top: auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--fd-blue);
}

.fd .fd-related-go i {
	margin-left: 4px;
	transition: transform 0.15s;
}

.fd .fd-related-list li:hover .fd-related-go i {
	transform: translateX(4px);
}


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

.fd .fd-final {
	padding: 104px 0;
	background: var(--fd-blue);
	color: #ffffff;
}

.fd .fd-final-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 36px 64px;
	align-items: flex-end;
	justify-content: space-between;
}

.fd .fd-final-title {
	max-width: 17ch;
	font-size: clamp(34px, 5vw, 64px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.fd .fd-final-text {
	max-width: 46ch;
	margin-top: 24px;
	font-size: 19px;
	color: rgba(255, 255, 255, 0.9);
}


/* ---------------------------------------------------------------- Narrower screens */

@media (max-width: 991px) {

	.fd .fd-hero-grid,
	.fd .fd-blocks-grid,
	.fd .fd-showcase-row,
	.fd .fd-head {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.fd .fd-head {
		gap: 20px;
		margin-bottom: 48px;
	}

	.fd .fd-glance {
		max-width: none;
		margin: 0;
	}

	.fd .fd-blocks-head {
		position: static;
	}

	.fd .fd-showcase-row + .fd-showcase-row {
		margin-top: 80px;
	}

	.fd .fd-showcase-row:nth-child(even) .fd-showcase-copy {
		order: 0;
	}

	.fd .fd-highlight-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 32px;
	}

	.fd .fd-line {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 32px;
		border-top: 0;
	}

	.fd .fd-line li {
		border-top: 2px solid var(--fd-ink);
	}

	.fd .fd-related-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		margin-top: 48px;
	}
}

@media (max-width: 767px) {

	.fd {
		font-size: 16px;
	}

	.fd .fd-section {
		padding: 72px 0;
	}

	.fd .fd-hero {
		padding: 100px 0 64px 0;
	}

	.fd .fd-hero-subtitle {
		font-size: 18px;
	}

	.fd .fd-highlight-list,
	.fd .fd-line {
		grid-template-columns: minmax(0, 1fr);
	}

	.fd .fd-spec-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.fd .fd-final {
		padding: 72px 0;
	}
}

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

	.fd .fd-btn,
	.fd .fd-link,
	.fd .fd-related-go i {
		transition: none;
	}
}