/* Apollo / Marketing Data Platform case study */

:root {
	--apl-ink: #1f1f1f;
	--apl-muted: #5f5f5f;
	--apl-soft: #959595;
	--apl-line: #e5e5e5;
	--apl-card: #f7f7f7;
	--apl-blue: #4763ff;
	--apl-orange: #ff8b4a;
}

.apollo-page {
	--apl-font-body: var(--normal-copy-font-size);
	--apl-font-label: 14px;
	--apl-font-meta-label: 15px;
	--apl-font-heading: 28px;
	--apl-font-problem-heading: 38px;
	--apl-font-board-heading: 28px;
	--apl-font-statement-item: 17px;
	--apl-font-choice: 18px;
	--apl-font-table-heading: 24px;
	--apl-font-table-flow-heading: 25px;
	--apl-font-table-row-heading: 15px;
	--apl-font-table-cell: 12px;
	--apl-font-table-mobile-label: 10px;
	--apl-font-chapter-label: 13px;
	--apl-font-chapter-icon: 16px;
	--apl-font-statement: 24px;
	--apl-font-kpi: 78px;
	--apl-font-kpi-label: 16px;
	--apl-font-card-heading: 20px;
	--apl-font-note: 13px;
	--apl-font-media-label: 18px;
	--apl-font-placeholder: 20px;
	--apl-font-section-title: 28px;
	--apl-font-client-title: 16px;
	--apl-font-hero-caption: 20px;
	--apl-font-warning-mark: 10px;
	background: #fff;
	color: var(--apl-ink);
	font-family: "IBM Plex Sans", Arial, sans-serif;
	letter-spacing: 0;
}

.apollo-page .home-header {
	background: #fff;
}

.apl-main {
	background: #fff;
	padding-top: 0;
}

.apl-shell {
	width: min(1280px, calc(100% - 160px));
	margin: 0 auto;
}

.apl-narrow {
	width: min(846px, calc(100% - 160px));
	margin: 0 auto;
	text-align: center;
}

.apl-section {
	padding: 80px 0;
	border-bottom: 1px solid var(--apl-line);
}

.apl-copy-block {
	max-width: 1025px;
}

.apl-copy-block h1,
.apl-copy-block h2,
.apl-narrow h2,
.apl-total h2 {
	margin: 0;
	color: var(--apl-ink);
	font-size: var(--apl-font-heading);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
}

.apl-copy-block p,
.apl-narrow p,
.apl-total p {
	margin: 12px 0 0;
	color: var(--apl-muted);
	font-size: var(--apl-font-body);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}

.apl-copy-block p + p {
	margin-top: 12px;
}

.apl-copy-block .apl-kicker {
	font-size: var(--apl-font-label);
}

.apl-kicker,
.apl-section-title,
.apl-image-label {
	margin: 0 0 10px;
	color: var(--apl-muted);
	font-size: var(--apl-font-label);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}

.apl-icon-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
}

.apl-icon-label::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	background:
		linear-gradient(135deg, rgba(71, 99, 255, .18), rgba(255, 139, 74, .18)),
		#f5f5f5;
	box-shadow: inset 0 0 0 1px rgba(31, 31, 31, .08);
}

.apl-centered-label {
	text-align: center;
}

.apl-media-frame {
	margin: 0;
}

.apl-media-frame img {
	display: block;
	width: 100%;
	height: auto;
}

.apl-hero {
	padding: 0 0 72px;
	border-bottom: 0;
}

.apl-hero-stage {
	width: min(1360px, calc(100% - 80px));
	margin: 0 auto;
	padding-top: 0;
}

.apl-hero-visual {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 8px;
	background: #d8e0e1;
}

.apl-hero-visual img {
	display: block;
	width: 100%;
	height: auto;
}

.apl-hero-visual picture {
	display: block;
}

.apl-hero-visual figcaption {
	display: none;
	grid-template-columns: 130px minmax(0, 600px);
	position: absolute;
	left: 0;
	bottom: 0;
	min-height: 63px;
	z-index: 1;
}

.apl-hero-visual figcaption span {
	display: flex;
	align-items: center;
	padding: 16px 20px;
	color: #fff;
	font-size: var(--apl-font-hero-caption);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.apl-hero-visual figcaption span:first-child {
	justify-content: center;
	background: #f5863d;
}

.apl-hero-visual figcaption span:last-child {
	background: #5d4df7;
}

.apl-result-line {
	margin: 40px 0 0;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--apl-line);
	color: var(--apl-muted);
	font-size: var(--apl-font-body);
	line-height: 24px;
}

.apl-result-line strong {
	color: var(--apl-ink);
	font-weight: 500;
}

.apl-meta-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 80px;
	margin-top: 40px;
}

.apl-meta-item {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.apl-meta-label {
	color: var(--apl-muted);
	font-size: var(--apl-font-meta-label);
	line-height: 1.5;
}

.apl-meta-value {
	color: var(--apl-ink);
	font-size: var(--apl-font-body);
	line-height: 24px;
}

.apl-overview-copy {
	margin-top: 40px;
}

.apl-overview-copy .apl-kicker {
	margin-bottom: 12px;
	color: #8c8c8c;
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
}

.apl-overview-copy h1,
.apl-overview-copy strong {
	color: var(--apl-ink);
	font-weight: 600;
}

.apl-overview-copy h1 {
	font-size: 24px;
	line-height: 31px;
}

.apl-overview-copy p {
	color: #595959;
	font-size: var(--apl-font-body);
	line-height: 24px;
}

@media (min-width: 1200px) {
	.apl-hero {
		padding-bottom: 0;
	}

	.apl-problem-section > .apl-shell {
		width: min(1280px, calc(100% - 160px));
	}

	.apl-hero > .apl-shell {
		width: min(1280px, calc(100% - 160px));
	}

	.apl-overview-copy {
		max-width: 1025px;
		margin-top: 40px;
	}

	.apl-overview-copy .apl-kicker {
		margin-bottom: 12px;
		font-weight: 500;
		line-height: 21px;
	}

	.apl-overview-copy h1 {
		font-weight: 600;
		line-height: 31px;
	}

	.apl-overview-copy p:not(.apl-kicker) {
		margin-top: 12px;
		font-weight: 400;
		line-height: 24px;
	}

	.apl-overview-copy p:not(.apl-kicker) + p:not(.apl-kicker) {
		margin-top: 12px;
	}

	.apl-problem-section .apl-copy-block {
		max-width: none;
	}
}

.apl-problem-section {
	padding-top: 0;
	border-bottom: 0;
}

.apl-problem-section .apl-copy-block {
	max-width: 1025px;
	padding-top: 45px;
}

.apl-problem-section .apl-kicker {
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.apl-problem-section h2 {
	font-size: 32px;
	font-weight: 600;
	line-height: 42px;
	max-width: 1025px;
	text-transform: uppercase;
}

.apl-problem-section .apl-copy-block p:not(.apl-kicker) {
	max-width: 1025px;
	margin-top: 12px;
	font-style: italic;
}

.apl-problem-section h2 span {
	color: #f57f45;
}

.apl-problem-section .apl-problem-label {
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-height: 24px;
	color: #8c8c8c;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	text-transform: capitalize;
}

.apl-problem-label::before,
.apl-problem-label::after {
	content: none;
}

.apl-problem-icon {
	display: block;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	object-fit: cover;
}

.apl-problem-section .apl-icon-label:not(.apl-problem-label)::before {
	width: 24px;
	height: 24px;
	border-radius: 0;
	background: #ffb000;
	box-shadow: none;
	clip-path: polygon(50% 8%, 94% 86%, 6% 86%);
}

.apl-problem-section .apl-icon-label:not(.apl-problem-label)::after {
	content: "!";
	position: absolute;
	left: 9px;
	top: 3px;
	color: #fff;
	font-size: var(--apl-font-warning-mark);
	font-weight: 700;
	line-height: 1;
}

.apl-problem-list {
	max-width: 1025px;
	margin: 0;
	padding-left: 24px;
	color: var(--apl-muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.apl-problem-visual {
	display: grid;
	grid-template-columns: 613px 611px;
	gap: 34px;
	align-items: start;
	margin-top: 43px;
}

.apl-problem-image {
	margin: 0;
}

.apl-problem-image picture,
.apl-problem-image img {
	display: block;
	width: 100%;
}

.apl-hypothesis-comparison-image {
	margin-top: 22px;
}

.apl-problem-board {
	min-width: 0;
	background: #fafafa;
	border-radius: 2px;
}

.apl-problem-board h3 {
	margin: 0;
	padding: 22px 24px;
	background: #fff;
	color: var(--apl-ink);
	font-size: var(--apl-font-board-heading);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	letter-spacing: 0;
}

.apl-problem-statements h3 {
	border-bottom: 3px solid #ff5a42;
	border-right: 3px solid #ff5a42;
	border-bottom-right-radius: 6px;
}

.apl-hypothesis-comparison h3 {
	border-bottom: 3px solid #2da8ff;
	border-left: 3px solid #2da8ff;
	border-bottom-left-radius: 6px;
}

.apl-statement-list {
	display: grid;
	gap: 34px;
	min-height: 330px;
	margin-top: 28px;
	padding: 36px 44px;
	border: 3px dashed #ff5a42;
	border-radius: 6px;
	background: #fff;
}

.apl-statement-list p {
	margin: 0;
	color: #3a3a3a;
	font-size: var(--apl-font-statement-item);
	font-weight: 600;
	line-height: 1.45;
}

.apl-problem-choice-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: min(470px, 80%);
	margin: 72px auto 48px;
}

.apl-problem-choice-row span {
	display: grid;
	min-height: 58px;
	place-items: center;
	border: 3px solid;
	border-radius: 6px;
	font-size: var(--apl-font-choice);
	font-weight: 600;
	line-height: 1;
}

.apl-problem-choice-row span:first-child {
	border-color: #dc942a;
	background: #ffd092;
	color: #5d4932;
}

.apl-problem-choice-row span:last-child {
	border-color: #25a7ff;
	background: #b7e0ff;
	color: #33495d;
}

.apl-hypothesis-table-wrap {
	margin-top: 42px;
	overflow-x: auto;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	background: #fff;
}

.apl-hypothesis-table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	table-layout: fixed;
	color: #292929;
}

.apl-hypothesis-table th,
.apl-hypothesis-table td {
	padding: 18px 18px;
	border: 1px solid #e3e3e3;
	text-align: left;
	vertical-align: middle;
}

.apl-hypothesis-table thead th {
	background: #fff;
	font-size: var(--apl-font-table-heading);
	font-weight: 500;
	line-height: 1.15;
}

.apl-hypothesis-table thead th:first-child {
	width: 32%;
}

.apl-hypothesis-table thead th:nth-child(2),
.apl-hypothesis-table thead th:nth-child(3) {
	width: 34%;
	font-family: "Comic Sans MS", "Bradley Hand", "IBM Plex Sans", cursive;
	font-size: var(--apl-font-table-flow-heading);
	font-style: italic;
}

.apl-hypothesis-table tbody th {
	background: #fff;
	font-size: var(--apl-font-table-row-heading);
	font-weight: 700;
	line-height: 1.25;
}

.apl-hypothesis-table td {
	background: #fff;
	font-size: var(--apl-font-table-cell);
	font-weight: 700;
	line-height: 1.32;
}

.apl-hypothesis-table td.is-cons {
	background: #ffca89;
}

.apl-hypothesis-table td.is-pro {
	background: #aedafa;
}

.apl-goals-chapter {
	display: grid;
	place-items: center;
	min-height: 36px;
	padding: 0;
	border-bottom: 0;
	text-align: center;
}

.apl-goals-chapter-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	color: #8c8c8c;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	text-align: center;
	text-transform: capitalize;
	white-space: nowrap;
}

.apl-goals-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	background: url("../assets/images/apollo/goals-icon.png") center / cover no-repeat;
}

.apl-statement-section {
	margin-top: -90px;
	padding: 54px 0 74px;
	border-bottom: 0;
}

.apl-statement-section .apl-narrow {
	width: min(846px, calc(100% - 160px));
}

.apl-statement-section .apl-kicker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 12px;
	color: #8c8c8c;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	text-align: center;
	text-transform: capitalize;
	white-space: nowrap;
}

.apl-statement-section .apl-icon-label::before {
	content: "";
	display: none;
}

.apl-design-statement-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	background: url("../assets/images/apollo/design-statement-icon.png") center / cover no-repeat;
}

.apl-statement-section .apl-statement {
	margin-top: 0;
	color: var(--apl-ink);
	font-size: var(--apl-font-statement);
	font-weight: 500;
	line-height: 1.24;
}

.apl-goal-section {
	padding-top: 0;
	padding-bottom: 52px;
	text-align: center;
}

.apl-goal-section .apl-narrow {
	padding-top: 8px;
	width: min(760px, calc(100% - 160px));
}

.apl-goal-section > .apl-narrow:first-child {
	width: min(704px, calc(100% - 160px));
	margin-top: -10px;
}

.apl-goal-section h2,
.apl-total h2 {
	font-size: var(--apl-font-heading);
	line-height: 1.03;
}

.apl-goal-section > .apl-narrow h2 {
	font-size: 22px;
	line-height: 1.24;
}

.apl-goal-section > .apl-narrow:first-child > .apl-kicker {
	display: none;
}

.apl-goal-media {
	width: 1179px;
	max-width: 100%;
	margin: 51px auto 0;
}

.apl-goal-media picture {
	display: block;
}

.apl-total {
	margin-top: 25px;
	text-align: center;
}

.apl-total .apl-kicker {
	margin-bottom: 9px;
}

.apl-kpi-pair {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	justify-content: center;
	gap: 206px;
	margin-top: 50px;
}

.apl-kpi-pair div {
	display: grid;
	justify-items: center;
	gap: 12px;
}

.apl-kpi-pair strong {
	color: #f57f45;
	font-size: var(--apl-font-kpi);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: 0;
}

.apl-kpi-pair span {
	color: var(--apl-muted);
	font-size: var(--apl-font-kpi-label);
	line-height: 1.45;
	white-space: nowrap;
}

.apl-research-section {
	padding-top: 24px;
	padding-bottom: 0;
}

.apl-research-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 50px;
	align-items: start;
	margin-bottom: 48px;
}

.apl-research-grid .apl-copy-block {
	max-width: none;
}

.apl-interview-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.apl-interview-block .apl-kicker {
	margin: 0;
	color: #8c8c8c;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
}

.apl-interview-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.apl-interview-content h2 {
	margin: 0;
	color: #262626;
	font-size: 24px;
	font-weight: 600;
	line-height: normal;
}

.apl-interview-intro {
	margin: 0;
	color: #595959;
	font-size: var(--apl-font-body);
	font-weight: 400;
	line-height: 1.5;
}

.apl-interview-intro strong {
	color: #262626;
	font-weight: 600;
}

.apl-interview-list {
	display: block;
	margin: 0;
	padding-left: 24px;
	color: #595959;
	font-size: var(--apl-font-body);
	font-weight: 400;
	line-height: 1.5;
	list-style: disc;
}

.apl-interview-list li {
	margin: 0;
	padding-left: 0;
}

.apl-interview-list li::before {
	content: none;
}

.apl-finding-list {
	display: grid;
	gap: 12px;
	margin-top: 4px;
}

.apl-finding-list p {
	display: grid;
	gap: 8px;
	margin: 0;
}

.apl-finding-list p + p {
	margin-top: 0;
}

.apl-finding-list strong {
	color: var(--apl-ink);
	font-size: var(--apl-font-body);
	font-weight: 500;
	line-height: 1.5;
}

.apl-finding-list span {
	color: var(--apl-muted);
	font-size: var(--apl-font-body);
	line-height: 1.5;
}

.apl-interview-media {
	width: min(797px, 100%);
	margin: 0 auto 12px;
}

.apl-persona-intro {
	max-width: 1280px;
	min-height: 98px;
	margin-bottom: 24px;
}

.apl-interview-label {
	margin: 0 0 45px;
	font-size: 16px;
	line-height: 24px;
}

#nav-findings {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#nav-findings .apl-kicker {
	margin: 0;
	color: #8c8c8c;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
}

#nav-findings h2 {
	font-size: 24px;
	font-weight: 600;
	line-height: normal;
}

.apl-persona-stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

.apl-persona-card {
	margin: 0;
}

.apl-persona-card picture {
	display: block;
}

.apl-persona-card--head {
	width: calc(100% + 3px);
	max-width: 1283px;
}

.apl-persona-card--member {
	width: calc(100% + 6px);
	max-width: 1286px;
}

.apl-decision-section {
	padding-top: 40px;
}

.apl-decision-section .apl-copy-block {
	max-width: 914px;
	margin-bottom: 40px;
}

.apl-decision-two {
	border-bottom: 0;
}

.apl-decision-three {
	border-bottom: 0;
}

@media (min-width: 1200px) {
	.apl-decision-three {
		margin-top: -90px;
	}
}

.apl-decision-one .apl-copy-block {
	max-width: none;
	margin-bottom: 32px;
}

.apl-decision-one .apl-kicker {
	margin: 0 0 8px;
	color: #8c8c8c;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
}

.apl-decision-one .apl-copy-block h2 {
	margin: 0;
	color: #262626;
	font-size: 24px;
	font-weight: 600;
	line-height: normal;
}

.apl-decision-one .apl-copy-block > p:not(.apl-kicker) {
	margin: 12px 0 0;
	color: #595959;
	font-size: var(--apl-font-body);
	font-weight: 400;
	line-height: 1.5;
}

.apl-decision-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 36px;
	margin-bottom: 60px;
}

.apl-decision-one .apl-decision-cards {
	gap: 36px;
	margin-bottom: 40px;
}

.apl-decision-cards article,
.apl-result-card-grid article,
.apl-reflection-grid article,
.apl-mini-feedback,
.apl-annotation-row p,
.apl-client-card {
	background: #fff;
	border: 1px solid var(--apl-line);
	border-radius: 8px;
}

.apl-decision-cards article {
	padding: 24px;
	min-height: 156px;
}

.apl-decision-one .apl-decision-cards article {
	display: flex;
	min-height: 87px;
	padding: 24px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 6px;
	background: linear-gradient(180deg, #ffc7a6 0%, #fff7f2 100%);
	text-align: center;
}

.apl-decision-cards h3,
.apl-result-card-grid h3,
.apl-reflection-grid h3 {
	margin: 0 0 12px;
	color: var(--apl-ink);
	font-size: var(--apl-font-card-heading);
	font-weight: 500;
	line-height: 1.55;
}

.apl-decision-one .apl-decision-cards h3 {
	margin: 0 0 12px;
	color: #262626;
	font-size: 18px;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
}

.apl-decision-cards p,
.apl-result-card-grid p,
.apl-reflection-grid p {
	margin: 0;
	color: var(--apl-muted);
	font-size: var(--apl-font-body);
	line-height: 1.5;
}

.apl-decision-one .apl-decision-cards p {
	max-width: 420px;
	color: #595959;
	font-size: var(--apl-font-body);
	font-weight: 400;
	line-height: 1.4;
}

.apl-before-label {
	margin: 0 0 24px;
	color: #262626;
	font-size: 20px;
	font-weight: 600;
	line-height: normal;
}

.apl-decision-before {
	margin-bottom: 28px;
}

.apl-decision-before .apl-before-label,
.apl-decision-after .apl-before-label {
	margin: 0 0 12px;
}

.apl-decision-before p:not(.apl-before-label),
.apl-decision-after p:not(.apl-before-label) {
	max-width: 1030px;
	margin: 0;
	color: #595959;
	font-size: var(--apl-font-body);
	font-weight: 400;
	line-height: 1.5;
}

.apl-decision-one .apl-wide-media {
	width: 100%;
	margin: 0 auto 28px;
}

.apl-decision-phase-copy,
.apl-decision-flow-copy {
	max-width: 1104px;
	margin: 0 0 28px;
}

.apl-decision-phase-copy--after {
	max-width: 954px;
}

.apl-decision-phase-copy .apl-image-label {
	margin: 0 0 8px;
	color: #262626;
	font-size: 24px;
	font-weight: 600;
	line-height: normal;
}

.apl-decision-phase-copy p:not(.apl-image-label),
.apl-decision-flow-copy p {
	margin: 0;
	color: var(--apl-muted);
	font-size: var(--apl-font-body);
	line-height: 1.5;
}

.apl-decision-flow-copy {
	margin-top: 28px;
}

.apl-decision-flow-copy h3 {
	margin: 0 0 8px;
	color: var(--apl-ink);
	font-size: var(--apl-font-card-heading);
	font-weight: 600;
	line-height: 1.35;
}

.apl-flow-media {
	margin-top: 20px;
}

.apl-decision-stage-label {
	margin: 0 0 40px;
	color: #262626;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.apl-decision-two-before-media {
	width: min(1440px, 100vw);
	max-width: none;
	margin-left: calc((100% - min(1440px, 100vw)) / 2);
	margin-right: calc((100% - min(1440px, 100vw)) / 2);
}

.apl-decision-one .apl-wide-media img {
	width: 100%;
}

.apl-decision-after {
	margin-top: 0;
}

.apl-decision-after h3 {
	margin: 24px 0 12px;
	color: #262626;
	font-size: 20px;
	font-weight: 600;
	line-height: normal;
}

.apl-approval-flow-detail {
	width: 100%;
	margin: 32px auto 0;
}

.apl-approval-flow-detail img {
	display: block;
	width: 100%;
}

.apl-wide-media {
	margin: 0 auto;
}

.apl-annotation-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 430px));
	gap: 36px;
	margin: 36px 0 72px;
	align-items: start;
}

.apl-annotation-row--three {
	grid-template-columns: 410px 271px 339px;
	justify-content: space-between;
}

.apl-annotation-row p {
	margin: 0;
	padding: 12px;
	color: var(--apl-muted);
	font-size: var(--apl-font-note);
	line-height: 1.4;
}

.apl-duo-media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin-top: 48px;
}

.apl-role-views {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	margin-top: 0;
}

.apl-role-callouts {
	position: relative;
	width: 100%;
	height: 178px;
	margin-top: 31px;
}

.apl-role-callout {
	position: absolute;
	z-index: 1;
	min-height: 52px;
	padding: 8px;
	border-radius: 8px;
	background: linear-gradient(176deg, rgba(175, 175, 175, 0.65) 42.87%, #ffffff 102.89%);
	color: #595959;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
}

.apl-role-callout p {
	margin: 0;
}

.apl-role-callout strong {
	color: var(--apl-ink);
	font-weight: 600;
}

.apl-role-callout::before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(100% + 10px);
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #bfbfbf;
	transform: translateX(-50%);
}

.apl-role-callout::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(100% + 18px);
	height: var(--connector-height, 92px);
	border-left: 2px dotted #bfbfbf;
	transform: translateX(-50%);
}

.apl-role-callout--status {
	left: 0;
	top: 16px;
	width: 410px;
	--connector-height: 84px;
}

.apl-role-callout--create {
	left: 476px;
	top: 38px;
	width: 271px;
	--connector-height: 62px;
}

.apl-role-callout--tabs {
	left: 965px;
	top: 0;
	width: 339px;
	min-height: 82px;
	display: grid;
	gap: 6px;
	text-align: left;
	--connector-height: 78px;
}

.apl-duo-media.apl-role-views figcaption {
	margin-bottom: 16px;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.apl-role-lower {
	position: relative;
	min-height: 430px;
	margin-top: 28px;
}

.apl-role-lower-callout {
	position: absolute;
	z-index: 1;
	padding: 8px;
	border-radius: 8px;
	background: linear-gradient(176deg, rgba(175, 175, 175, 0.65) 42.87%, #ffffff 102.89%);
	color: #595959;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
}

.apl-role-lower-callout p {
	margin: 0;
}

.apl-role-lower-callout p + p {
	margin-top: 14px;
}

.apl-role-lower-callout strong {
	color: var(--apl-ink);
	font-weight: 600;
}

.apl-role-lower-callout::before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(-1 * var(--connector-height, 58px) - 8px);
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #bfbfbf;
	transform: translateX(-50%);
}

.apl-role-lower-callout::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(-1 * var(--connector-height, 58px));
	height: var(--connector-height, 58px);
	border-left: 2px dotted #bfbfbf;
	transform: translateX(-50%);
}

.apl-role-lower-callout--filter {
	left: 430px;
	top: 64px;
	width: 430px;
	--connector-height: 64px;
}

.apl-role-lower-callout--actions {
	left: 890px;
	top: 44px;
	width: 390px;
	min-height: 92px;
	text-align: left;
	--connector-height: 84px;
}

.apl-role-mid-callout,
.apl-role-lower-callout--tablet-tabs {
	display: none;
}

.apl-feedback-grid {
	position: absolute;
	left: 0;
	right: 0;
	top: 198px;
	display: grid;
	grid-template-columns: 430px 430px;
	gap: 54px;
	align-items: start;
}

.apl-feedback-group {
	width: 100%;
}

.apl-feedback-group .apl-image-label {
	margin-bottom: 16px;
	color: var(--apl-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.apl-feedback-grid .apl-mini-feedback {
	min-height: 78px;
}

.apl-feedback-group--team .apl-mini-feedback {
	min-height: 96px;
}

.apl-duo-media figcaption,
.apl-before-after-labels p,
.apl-version-labels strong,
.apl-version-labels span {
	display: block;
	margin: 0 0 16px;
	color: var(--apl-ink);
	font-size: var(--apl-font-media-label);
	font-weight: 400;
	line-height: 1.6;
}

.apl-feedback-note {
	width: 430px;
	margin: 48px 0 0 auto;
}

.apl-feedback-note--left {
	margin-left: 0;
	margin-right: auto;
}

.apl-feedback-note--center {
	margin-left: auto;
	margin-right: auto;
}

.apl-feedback-note--segment-before {
	margin-top: 38px;
}

.apl-mini-feedback {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 12px;
	padding: 12px;
}

.apl-mini-feedback + .apl-mini-feedback {
	margin-top: 12px;
}

.apl-decision-one .apl-mini-feedback {
	border: 0;
	background: linear-gradient(177deg, rgba(236, 136, 70, .65) 0%, #fff 100%);
}

.apl-decision-two .apl-feedback-note .apl-image-label {
	margin-bottom: 16px;
	color: #262626;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.apl-decision-two .apl-feedback-note .apl-mini-feedback {
	min-height: 64px;
	border: 0;
	background: linear-gradient(177.346deg, rgba(236, 136, 70, .65) 42.87%, #fff 102.89%);
}

.apl-decision-two .apl-feedback-note .apl-mini-feedback p {
	color: #595959;
	font-size: 12px;
	line-height: 18px;
}

.apl-mini-feedback p {
	margin: 0;
	color: var(--apl-muted);
	font-size: var(--apl-font-note);
	line-height: 1.4;
}

.apl-avatar,
.apl-client-avatar {
	display: block;
	border-radius: 50%;
	background:
		radial-gradient(circle at 42% 32%, rgba(255,255,255,.9) 0 13%, transparent 14%),
		linear-gradient(135deg, #d9e2ff, #ffd9bf);
}

.apl-avatar {
	width: 40px;
	height: 40px;
}

.apl-avatar-image {
	object-fit: cover;
	background: none;
}

.apl-team-avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #fff;
}

.apl-team-avatar img {
	display: block;
	width: 18px;
	height: 20px;
}

.apl-placeholder-panel {
	display: grid;
	place-items: center;
	height: 372px;
	margin: 36px 0 48px;
	border-radius: 8px;
	background: var(--apl-card);
	color: var(--apl-soft);
	font-size: var(--apl-font-placeholder);
}

.apl-segment-creation-detail {
	width: 100%;
	margin: 32px auto 0;
}

.apl-segment-creation-detail img {
	display: block;
	width: 100%;
}

.apl-after-copy {
	max-width: 922px;
	margin: 64px 0 40px;
}

.apl-after-copy--segment {
	margin: 40px 0;
}

.apl-after-copy--segment .apl-decision-stage-label {
	margin-bottom: 16px;
}

.apl-after-copy p:last-child {
	margin: 0;
	color: #595959;
	font-size: 16px;
	line-height: 24px;
}

.apl-segment-after-workflow {
	margin-top: 40px;
}

.apl-segment-flow-scroll {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}

.apl-segment-flow {
	position: relative;
	width: 1280px;
	height: 444px;
	margin: 0 auto;
}

.apl-flow-review-group {
	position: absolute;
	left: 500px;
	top: 0;
	width: 267px;
	height: 424px;
	border: 2px dashed #f6b73b;
	border-radius: 8px;
}

.apl-flow-stage,
.apl-flow-step {
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.apl-flow-stage {
	top: 54px;
	width: 190px;
	height: 70px;
	border: 4px dashed #ff968c;
	border-radius: 8px;
	background: #ffd8d4;
	color: #262626;
}

.apl-flow-stage--create {
	left: 250px;
	width: 210px;
}

.apl-flow-stage--review {
	left: 536px;
}

.apl-flow-stage--finalize {
	left: 804px;
}

.apl-flow-step {
	top: 214px;
	height: 78px;
	border: 2px solid #22aaf2;
	border-radius: 6px;
	background: #bee2f8;
	color: #262626;
}

.apl-flow-step--choose {
	left: 12px;
	width: 198px;
}

.apl-flow-step--info {
	left: 254px;
	width: 198px;
}

.apl-flow-step--condition {
	left: 254px;
	top: 345px;
	width: 198px;
}

.apl-flow-step--preview {
	left: 536px;
	width: 190px;
}

.apl-flow-step--save {
	left: 804px;
	width: 190px;
}

.apl-flow-step--approve {
	left: 1038px;
	width: 152px;
}

.apl-flow-lines {
	position: absolute;
	inset: 0;
	width: 1280px;
	height: 444px;
	pointer-events: none;
}

.apl-flow-line {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.apl-flow-line--dark {
	stroke: #262626;
	marker-end: url("#apl-arrow-dark");
}

.apl-flow-line--red {
	stroke: #ff4b2b;
	stroke-dasharray: 16 10;
	marker-end: url("#apl-arrow-red");
}

#apl-arrow-dark path {
	fill: #262626;
}

#apl-arrow-red path {
	fill: #ff4b2b;
}

.apl-segment-connector,
.apl-screen-connector {
	position: relative;
	width: 1px;
	border-left: 2px dashed #bfbfbf;
}

.apl-segment-connector {
	height: 55px;
	margin: 0 0 24px 630px;
}

.apl-segment-connector::after,
.apl-screen-connector::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #bfbfbf;
	transform: translateX(-50%);
}

.apl-feedback-note--segment-after {
	margin: 0 0 53px 415px;
}

.apl-feedback-note--segment-after .apl-mini-feedback {
	min-height: 78px;
}

.apl-segment-screens {
	position: relative;
	height: 573px;
}

.apl-segment-screen {
	position: absolute;
	display: block;
	object-fit: cover;
}

.apl-segment-screen--select {
	left: 0;
	top: 0;
	width: 624px;
	height: 495px;
}

.apl-segment-screen--result {
	left: 624px;
	top: 0;
	width: 656px;
	height: 361px;
}

.apl-screen-connector {
	position: absolute;
	z-index: 1;
}

.apl-screen-connector--select {
	left: 212px;
	top: 452px;
	height: 43px;
}

.apl-screen-connector--result {
	left: 1160px;
	top: 361px;
	height: 55px;
}

.apl-segment-callout {
	position: absolute;
	z-index: 2;
	width: 430px;
	margin: 0;
	padding: 12px;
	border-radius: 8px;
	background: linear-gradient(177deg, rgba(236, 136, 70, .65) 0%, #fff 100%);
	color: #595959;
	font-size: 12px;
	line-height: 18px;
}

.apl-segment-callout strong {
	color: #262626;
	font-weight: 600;
}

.apl-segment-callout--select {
	left: 0;
	top: 495px;
	min-height: 78px;
}

.apl-segment-callout--result {
	left: 850px;
	top: 436px;
	min-height: 96px;
}

.apl-notification-detail-stage {
	position: relative;
	width: 100%;
	height: 739px;
	margin-top: 96px;
}

.apl-notification-detail-stage::before {
	content: "";
	position: absolute;
	left: 746px;
	top: 374px;
	width: 312px;
	height: 37px;
	border-top: 2px dashed #cfcfcf;
	border-right: 2px dashed #cfcfcf;
	z-index: 1;
}

.apl-notification-callout {
	position: absolute;
	min-height: 78px;
	padding: 12px;
	border-radius: 8px;
	background: linear-gradient(176deg, rgba(236, 136, 70, .65) 42.87%, #fff 102.89%);
	color: #595959;
	font-size: 12px;
	line-height: 18px;
}

.apl-notification-callout::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -5px;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #cfcfcf;
	transform: translateX(-50%);
}

.apl-notification-callout p {
	margin: 0;
}

.apl-notification-callout strong {
	color: #262626;
	font-weight: 600;
}

.apl-notification-callout--title {
	left: 12px;
	top: 0;
	width: 287px;
}

.apl-notification-callout--message {
	left: 379px;
	top: 0;
	width: 436px;
}

.apl-notification-callout--image {
	left: 963px;
	top: 0;
	width: 306px;
}

.apl-notification-callout--preview {
	left: 905px;
	top: 423px;
	width: 306px;
}

.apl-notification-callout--preview::before {
	top: -17px;
}

.apl-before-after-labels,
.apl-version-labels {
	display: grid;
	grid-template-columns: 332px 400px;
	gap: 40px;
	align-items: start;
	margin-left: 0;
}

.apl-notification-stage-labels {
	position: absolute;
	left: 0;
	top: 118px;
	width: 779px;
}

.apl-notification-stage-labels p {
	margin: 0;
	color: #262626;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.apl-mobile-compare {
	position: absolute;
	left: 0;
	top: 187px;
	width: 779px;
	margin: 0;
}

.apl-mobile-compare img {
	display: block;
	width: 100%;
	height: auto;
}

.apl-notification-stage-versions {
	position: absolute;
	left: 11px;
	top: 693px;
	grid-template-columns: 245px 390px;
	gap: 126px;
	width: 761px;
}

.apl-version-labels p {
	margin: 0;
}

.apl-version-labels p.is-muted {
	opacity: .2;
}

.apl-version-labels span {
	margin: 8px 0 0;
	color: #595959;
	font-size: 16px;
	line-height: 1.2;
}

.apl-version-labels strong {
	margin: 0;
	color: #ec8846;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

.apl-results-section {
	padding-top: 72px;
	padding-bottom: 0;
	border-bottom: 0;
}

.apl-results-section .apl-copy-block {
	max-width: 914px;
}

.apl-results-section .apl-kicker {
	margin: 0 0 8px;
	color: #8c8c8c;
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
}

.apl-results-section .apl-copy-block h2 {
	font-size: 24px;
	font-weight: 600;
	line-height: 31px;
}

.apl-results-section .apl-copy-block p:not(.apl-kicker) {
	margin-top: 12px;
	color: #595959;
	font-size: var(--apl-font-body);
	line-height: 24px;
}

.apl-results-section .apl-copy-block strong {
	color: #262626;
	font-weight: 600;
}

@media (min-width: 1200px) {
	.apl-results-section {
		margin-top: -113px;
	}
}

.apl-result-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	margin-top: 40px;
}

.apl-result-card-grid article {
	display: grid;
	grid-template-columns: 57px 1fr;
	gap: 12px;
	align-items: center;
	min-height: 148px;
	padding: 24px 12px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(175deg, #c9c9c9 0%, #fff 100%);
}

.apl-result-card-grid article:nth-child(-n+2) {
	min-height: 172px;
}

.apl-result-card-grid article:nth-child(4) {
	align-items: start;
}

.apl-result-icon {
	display: block;
	width: 57px;
	height: 57px;
	object-fit: cover;
}

.apl-result-card-grid h3 {
	margin: 0 0 4px;
	color: #262626;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.apl-result-card-grid p {
	color: #595959;
	font-size: var(--apl-font-body);
	line-height: 24px;
}

.apl-total-bottom {
	margin-top: 40px;
}

.apl-total-bottom .apl-kpi-pair {
	margin-top: 32px;
}

.apl-client-feedback-section {
	padding-top: 48px;
}

.apl-section-title {
	font-size: var(--apl-font-section-title);
	line-height: 1.1;
	color: var(--apl-ink);
}

.apl-client-feedback-section .apl-section-title {
	width: min(704px, 100%);
	margin-bottom: 40px;
	color: #262626;
	font-size: 24px;
	font-weight: 600;
	line-height: 31px;
}

.apl-client-card {
	width: min(1115px, 100%);
	margin: 0 auto;
	padding: 24px;
	border: 0;
	background: linear-gradient(180deg, rgba(236, 136, 70, .5) 0%, rgba(236, 136, 70, .12) 100%);
}

.apl-client-card header {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 12px;
	align-items: start;
	margin-bottom: 12px;
}

.apl-client-avatar {
	width: 64px;
	height: 64px;
	object-fit: cover;
}

.apl-client-card h2 {
	margin: 0;
	color: #262626;
	font-size: var(--apl-font-client-title);
	font-weight: 600;
	line-height: 24px;
}

.apl-client-card header p,
.apl-client-card > p {
	margin: 0;
	color: #595959;
	font-size: var(--apl-font-body);
	line-height: 24px;
}

.apl-client-card header p {
	line-height: 24px;
}

.apl-client-card > p + p {
	margin-top: 12px;
}

.apl-reflection-section {
	padding-top: 40px;
	border-bottom: 0;
}

.apl-reflection-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	margin-top: 40px;
}

.apl-reflection-grid article {
	display: flex;
	min-height: 196px;
	padding: 24px 12px;
	flex-direction: column;
	justify-content: flex-start;
	border: 0;
	background: linear-gradient(174deg, #ffd2d2 0%, #fff 100%);
}

.apl-reflection-grid h3 {
	margin: 0 0 4px;
	color: #262626;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.apl-reflection-grid p {
	color: #595959;
	font-size: 16px;
	line-height: 24px;
}

.apl-other-title {
	margin-top: 40px;
}

.apl-other-work-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;
	margin-top: 40px;
}

.apl-other-work-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.apl-other-work-card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.apl-other-work-card h3 {
	margin: 16px 0 8px;
	color: var(--apl-ink);
	font-size: var(--apl-font-heading);
	font-weight: 500;
	line-height: 1.28;
}

.apl-other-work-card p {
	max-width: 608px;
	margin: 0;
	color: var(--apl-muted);
	font-size: var(--apl-font-body);
	line-height: 1.5;
}

.apl-footer {
	padding-top: 68px;
}

@media (max-width: 1100px) {
	.apollo-page {
		--apl-font-hero-caption: 10px;
		--apl-font-problem-heading: 42px;
		--apl-font-statement: 18px;
	}

	.apl-shell,
	.apl-narrow {
		width: calc(100% - 80px);
	}

	.apl-section {
		padding: 80px 0;
	}

	.apl-hero {
		padding-bottom: 0;
	}

	.apl-hero-stage {
		width: calc(100% - 80px);
	}

	.apl-hero-visual figcaption {
		grid-template-columns: 70px 327px;
		min-height: 34px;
	}

	.apl-hero-visual figcaption span {
		padding: 8px 11px;
	}

	.apl-result-line {
		margin-top: 40px;
	}

	.apl-overview-copy {
		margin-top: 24px;
	}

	.apl-meta-grid {
		gap: 80px;
		margin-top: 24px;
	}

	.apl-meta-value {
		font-size: var(--apl-font-body);
	}

	.apl-problem-section h2 {
		font-size: 32px;
		line-height: 42px;
	}

	.apl-problem-section {
		margin-top: -114px;
	}

	.apl-problem-section .apl-copy-block p:not(.apl-kicker),
	.apl-problem-list {
		font-size: var(--apl-font-body);
		line-height: 24px;
	}

	.apl-problem-visual {
		grid-template-columns: 330px 370px;
		gap: 40px;
		margin-top: 24px;
	}

	.apl-hypothesis-comparison-image {
		margin-top: 0;
	}

	.apl-statement-section {
		margin-top: -76px;
		padding: 50px 0 41px;
	}

	.apl-statement-section .apl-narrow {
		width: min(846px, calc(100% - 80px));
	}

	.apl-statement-section .apl-statement {
		margin-top: 0;
		font-size: 24px;
		line-height: 31px;
	}

	.apl-goals-chapter {
		min-height: 34px;
		padding: 0;
	}

	.apl-goal-section {
		padding-top: 0;
		padding-bottom: 40px;
	}

	.apl-goal-section .apl-narrow {
		padding-top: 4px;
		width: min(640px, calc(100% - 80px));
	}

	.apl-goal-section > .apl-narrow:first-child {
		width: min(740px, calc(100% - 80px));
		margin-top: -5px;
	}

	.apl-goal-section > .apl-narrow h2 {
		font-size: 24px;
		line-height: 31px;
	}

	.apl-research-grid,
	.apl-decision-cards,
	.apl-duo-media,
	.apl-result-card-grid,
	.apl-reflection-grid {
		grid-template-columns: 1fr;
	}

	.apl-role-callouts {
		display: grid;
		height: auto;
		margin-top: 40px;
		gap: 12px;
	}

	.apl-role-callout {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
	}

	.apl-role-callout::before,
	.apl-role-callout::after {
		display: none;
	}

	.apl-role-lower {
		display: grid;
		min-height: auto;
		margin-top: 28px;
		gap: 20px;
	}

	.apl-role-lower-callout {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		min-height: 0;
	}

	.apl-role-lower-callout::before,
	.apl-role-lower-callout::after {
		display: none;
	}

	.apl-feedback-grid {
		position: relative;
		top: auto;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.apl-role-views {
		margin-top: 24px;
	}

	.apl-decision-one .apl-decision-cards {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-bottom: 34px;
	}

	.apl-decision-one .apl-decision-cards article {
		min-height: 133px;
		padding: 24px;
		border-radius: 8px;
		background: linear-gradient(180deg, rgba(236, 136, 70, 0.65) 0%, #ffffff 102.5%);
	}

	.apl-decision-one .apl-decision-cards h3 {
		font-size: 24px;
		font-weight: 600;
		line-height: normal;
	}

	.apl-decision-one .apl-decision-cards p {
		max-width: 692px;
		font-size: var(--apl-font-body);
		line-height: normal;
	}

	.apl-goal-media {
		width: 100%;
		margin-top: 40px;
	}

	.apl-research-section {
		--apl-font-body: 16px;
		padding-top: 40px;
		padding-bottom: 0;
	}

	.apl-research-grid {
		gap: 24px;
		margin-bottom: 28px;
	}

	.apl-interview-media {
		margin-bottom: 24px;
	}

	.apl-interview-label {
		margin-bottom: 40px;
	}

	.apl-persona-intro {
		min-height: 122px;
	}

	.apl-persona-stack {
		gap: 40px;
	}

	.apl-decision-section {
		padding-top: 40px;
	}

	.apl-persona-card--head,
	.apl-persona-card--member {
		width: 100%;
		max-width: none;
	}

	.apl-other-work-grid {
		gap: 40px;
		margin-top: 40px;
	}

	.apl-total {
		margin-top: 23px;
	}

	.apl-total .apl-kicker {
		margin-bottom: 12px;
	}

	.apl-kpi-pair {
		margin-top: 40px;
	}

	.apl-kpi-pair {
		gap: 206px;
	}

	.apl-annotation-row,
	.apl-annotation-row--three,
	.apl-notification-annotations {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
	}

	.apl-notification-annotations p:last-child {
		grid-column: auto;
	}

	.apl-before-after-labels,
	.apl-version-labels {
		grid-template-columns: 1fr 1fr;
		width: min(740px, 100%);
	}

	.apl-notification-detail-stage {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		height: auto;
		margin-top: 40px;
	}

	.apl-notification-callout,
	.apl-notification-stage-labels,
	.apl-mobile-compare,
	.apl-notification-stage-versions {
		position: static;
		width: auto;
	}

	.apl-notification-callout {
		min-height: auto;
	}

	.apl-notification-detail-stage::before,
	.apl-notification-callout::before {
		display: none;
	}

	.apl-notification-callout--message,
	.apl-notification-stage-labels,
	.apl-mobile-compare,
	.apl-notification-stage-versions {
		grid-column: 1 / -1;
	}

	.apl-notification-stage-labels,
	.apl-mobile-compare,
	.apl-notification-stage-versions {
		width: min(779px, 100%);
	}

	.apl-notification-stage-versions {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.apl-feedback-note {
		margin-left: auto;
		margin-right: auto;
	}

	.apl-feedback-note--segment-after {
		max-width: 430px;
		margin: 0 auto 40px;
	}

	.apl-segment-connector {
		margin-left: auto;
		margin-right: auto;
	}

	.apl-segment-flow {
		margin-left: 0;
		margin-right: 0;
	}

	.apl-segment-screens {
		display: grid;
		height: auto;
		gap: 20px;
	}

	.apl-segment-screen,
	.apl-segment-callout {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
	}

	.apl-segment-callout {
		min-height: 0;
	}

	.apl-screen-connector {
		display: none;
	}

}

@media (min-width: 768px) and (max-width: 1100px) {
	.apl-role-callouts {
		display: block;
		height: 178px;
		margin-top: 34px;
	}

	.apl-role-callout {
		position: absolute;
		min-height: 52px;
	}

	.apl-role-callout::before,
	.apl-role-callout::after {
		display: block;
	}

	.apl-role-callout--status {
		left: 32px;
		top: 0;
		width: 360px;
		--connector-height: 94px;
	}

	.apl-role-callout--create {
		left: auto;
		right: 0;
		top: 20px;
		width: 250px;
		--connector-height: 74px;
	}

	.apl-role-callout--tabs {
		display: none;
	}

	.apl-role-views {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 0;
	}

	.apl-role-mid-callout {
		position: relative;
		display: block;
		width: 360px;
		margin: 54px auto 70px;
		padding: 8px;
		border-radius: 8px;
		background: linear-gradient(176deg, rgba(175, 175, 175, 0.65) 42.87%, #ffffff 102.89%);
		color: #595959;
		font-size: 12px;
		line-height: 18px;
		text-align: center;
	}

	.apl-role-mid-callout p {
		margin: 0;
	}

	.apl-role-mid-callout strong {
		color: var(--apl-ink);
		font-weight: 600;
	}

	.apl-role-mid-callout::before {
		content: "";
		position: absolute;
		left: 50%;
		top: -66px;
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background: #bfbfbf;
		transform: translateX(-50%);
	}

	.apl-role-mid-callout::after {
		content: "";
		position: absolute;
		left: 50%;
		top: -58px;
		height: 58px;
		border-left: 2px dotted #bfbfbf;
		transform: translateX(-50%);
	}

	.apl-role-lower {
		display: block;
		min-height: auto;
		margin-top: 76px;
		padding-top: 210px;
	}

	.apl-role-lower-callout {
		position: absolute;
		min-height: 0;
	}

	.apl-role-lower-callout::before,
	.apl-role-lower-callout::after {
		display: block;
	}

	.apl-role-lower-callout--filter {
		display: none;
	}

	.apl-role-lower-callout--actions {
		left: 32px;
		top: 42px;
		width: 250px;
		text-align: left;
		--connector-height: 62px;
	}

	.apl-role-lower-callout--tablet-tabs {
		display: grid;
		gap: 6px;
		left: auto;
		right: 0;
		top: 24px;
		width: 300px;
		text-align: left;
		--connector-height: 76px;
	}

	.apl-feedback-grid {
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.apollo-page {
		--apl-font-hero-caption: 6px;
		--apl-font-label: 13px;
		--apl-font-meta-label: 13px;
		--apl-font-heading: 23px;
		--apl-font-problem-heading: 26px;
		--apl-font-board-heading: 22px;
		--apl-font-statement-item: 14px;
		--apl-font-choice: 15px;
		--apl-font-table-row-heading: 13px;
		--apl-font-table-cell: 11px;
		--apl-font-chapter-label: 15px;
		--apl-font-statement: 18px;
		--apl-font-kpi: 42px;
		--apl-font-kpi-label: 13px;
		--apl-font-card-heading: 16px;
		--apl-font-media-label: 14px;
		--apl-font-placeholder: 16px;
		--apl-font-section-title: 21px;
	}

	.apl-shell,
	.apl-narrow {
		width: calc(100% - 32px);
	}

	.apl-section {
		padding: 56px 0;
	}

	.apl-copy-block h1,
	.apl-copy-block h2,
	.apl-narrow h2,
	.apl-total h2 {
		font-size: var(--apl-font-heading);
		line-height: 1.3;
	}

	.apl-copy-block p,
	.apl-narrow p,
	.apl-total p,
	.apl-finding-list strong,
	.apl-finding-list span,
	.apl-client-card header p,
	.apl-client-card > p {
		font-size: var(--apl-font-body);
		line-height: 1.45;
	}

	.apl-kicker,
	.apl-image-label {
		font-size: var(--apl-font-label);
	}

	.apl-hero {
		padding-bottom: 0;
	}

	.apl-hero-stage {
		width: calc(100% - 32px);
		padding-top: 16px;
	}

	.apl-hero-visual figcaption {
		grid-template-columns: 34px 159px;
		min-height: 16px;
	}

	.apl-hero-visual figcaption span {
		padding: 4px 5px;
	}

	.apl-result-line {
		margin-top: 30px;
		padding-bottom: 19px;
		font-size: 14px;
		line-height: 20px;
	}

	.apl-meta-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-top: 30px;
	}

	.apl-meta-label {
		font-size: var(--apl-font-meta-label);
		line-height: 18px;
	}

	.apl-meta-value {
		font-size: 14px;
		line-height: 20px;
	}

	.apl-overview-copy {
		margin-top: 20px;
	}

	.apl-overview-copy .apl-kicker {
		font-size: 14px;
		line-height: 20px;
	}

	.apl-overview-copy h1 {
		font-size: 18px;
		line-height: 24px;
	}

	.apl-overview-copy p {
		font-size: 14px;
		line-height: 20px;
	}

	.apl-problem-section .apl-copy-block {
		padding-top: 40px;
	}

	.apl-problem-section {
		margin-top: -88px;
	}

	.apl-problem-section .apl-kicker {
		font-size: 14px;
		line-height: 20px;
	}

		.apl-problem-section .apl-icon-label:not(.apl-problem-label)::before {
			width: 18px;
			height: 18px;
		}

		.apl-problem-section .apl-icon-label:not(.apl-problem-label)::after {
			left: 7px;
			top: 1px;
		}

	.apl-problem-section h2 {
		font-size: 22px;
		line-height: 26px;
	}

	.apl-problem-section .apl-copy-block p:not(.apl-kicker),
	.apl-problem-list {
		font-size: 14px;
		line-height: 20px;
	}

	.apl-problem-visual {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 20px;
	}

	.apl-hypothesis-comparison-image {
		margin-top: 0;
	}

	.apl-goals-chapter {
		min-height: 32px;
		padding: 0;
	}

	.apl-goal-section {
		padding-top: 0;
		padding-bottom: 12px;
	}

	.apl-statement-section {
		margin-top: -79px;
		padding: 42px 0 19px;
	}

	.apl-statement-section .apl-narrow {
		width: calc(100% - 32px);
	}

	.apl-statement-section .apl-statement {
		font-size: 18px;
		line-height: 21px;
	}

	.apl-goal-section .apl-narrow {
		padding-top: 4px;
		width: calc(100% - 32px);
	}

	.apl-goal-section > .apl-narrow:first-child {
		width: calc(100% - 32px);
		margin-top: -3px;
	}

	.apl-goal-section > .apl-narrow h2 {
		font-size: 18px;
		line-height: 21px;
	}

	.apl-goal-media {
		width: 100%;
		margin: 20px auto 0;
	}

	.apl-research-section {
		--apl-font-body: var(--normal-copy-font-size);
		padding-top: 20px;
		padding-bottom: 0;
	}

	.apl-interview-content {
		gap: 8px;
	}

	.apl-interview-content h2,
	#nav-findings h2 {
		font-size: 18px;
		line-height: 23px;
	}

	.apl-interview-intro,
	.apl-interview-list,
	.apl-finding-list strong,
	.apl-finding-list span {
		line-height: 20px;
	}

	.apl-interview-media {
		margin-bottom: 12px;
	}

	.apl-interview-label {
		margin-bottom: 20px;
		font-size: 14px;
		line-height: 20px;
	}

	.apl-persona-intro {
		min-height: 119px;
		margin-bottom: 20px;
	}

	.apl-persona-stack {
		gap: 20px;
	}

	.apl-other-work-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		margin-top: 16px;
	}

	.apl-other-work-card h3 {
		font-size: 18px;
		line-height: 1.25;
	}

	.apl-total {
		margin-top: 3px;
	}

	.apl-total .apl-kicker {
		margin-bottom: 9px;
	}

	.apl-kpi-pair {
		gap: 38px;
		margin-top: 25px;
	}

	.apl-kpi-pair strong {
		font-size: var(--apl-font-kpi);
	}

	.apl-kpi-pair span {
		font-size: var(--apl-font-kpi-label);
	}

	.apl-research-grid {
		gap: 24px;
		margin-bottom: 48px;
	}

	.apl-interview-media {
		margin-bottom: 12px;
	}

	.apl-persona-intro {
		margin-bottom: 20px;
	}

	.apl-decision-section .apl-copy-block {
		margin-bottom: 20px;
	}

	.apl-decision-section {
		padding-top: 20px;
	}

	.apl-decision-cards {
		gap: 24px;
		margin-bottom: 40px;
	}

	.apl-decision-one .apl-decision-cards {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 34px;
	}

	.apl-decision-cards article {
		padding: 16px;
		min-height: 81px;
	}

	.apl-decision-cards h3,
	.apl-result-card-grid h3,
	.apl-reflection-grid h3 {
		font-size: var(--apl-font-card-heading);
		line-height: 1.35;
	}

	.apl-decision-cards p,
	.apl-result-card-grid p,
	.apl-reflection-grid p {
		font-size: var(--apl-font-body);
		line-height: 1.55;
	}

	.apl-annotation-row,
	.apl-annotation-row--three,
	.apl-notification-annotations {
		grid-template-columns: 1fr;
		gap: 12px;
		margin: 20px 0 40px;
	}

	.apl-notification-annotations {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.apl-annotation-row p {
		font-size: var(--apl-font-note);
	}

	.apl-duo-media {
		gap: 24px;
		margin-top: 24px;
	}

	.apl-role-callouts {
		display: block;
		height: 112px;
		margin-top: 31px;
	}

	.apl-role-callout {
		position: absolute;
		min-height: 58px;
		font-size: 12px;
		line-height: 18px;
	}

	.apl-role-callout--status {
		left: 0;
		top: 0;
		width: 100%;
		--connector-height: 42px;
	}

	.apl-role-callout--status::before,
	.apl-role-callout--status::after {
		display: block;
		left: 56px;
	}

	.apl-role-callout--create,
	.apl-role-callout--tabs {
		display: none;
	}

	.apl-role-views {
		gap: 0;
		margin-top: 0;
	}

	.apl-duo-media.apl-role-views figcaption {
		margin-bottom: 16px;
		font-size: 16px;
		line-height: 24px;
	}

	.apl-role-mid-callout {
		position: relative;
		display: block;
		width: min(294px, calc(100% - 48px));
		margin: 68px auto 56px;
		padding: 10px 16px;
		border-radius: 8px;
		background: linear-gradient(176deg, rgba(175, 175, 175, 0.65) 42.87%, #ffffff 102.89%);
		color: #595959;
		font-size: 14px;
		line-height: 21px;
		text-align: center;
	}

	.apl-role-mid-callout p {
		margin: 0;
	}

	.apl-role-mid-callout strong {
		color: var(--apl-ink);
		font-weight: 600;
	}

	.apl-role-mid-callout::before {
		content: "";
		position: absolute;
		left: 64px;
		top: -58px;
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background: #bfbfbf;
		transform: translateX(-50%);
	}

	.apl-role-mid-callout::after {
		content: "";
		position: absolute;
		left: 64px;
		top: -50px;
		height: 50px;
		border-left: 2px dotted #bfbfbf;
		transform: translateX(-50%);
	}

	.apl-role-lower {
		display: block;
		min-height: auto;
		margin-top: 40px;
	}

	.apl-role-lower-callout--filter,
	.apl-role-lower-callout--actions,
	.apl-role-lower-callout--tablet-tabs {
		display: none;
	}

	.apl-feedback-grid {
		margin-top: 52px;
	}

		.apl-duo-media figcaption,
		.apl-before-after-labels p,
	.apl-version-labels strong,
	.apl-version-labels span {
		font-size: var(--apl-font-media-label);
	}

	.apl-feedback-note {
		width: 100%;
		margin-top: 24px;
	}

	.apl-feedback-grid {
		grid-template-columns: 1fr;
	}

	.apl-placeholder-panel {
		height: 372px;
		margin: 24px 0;
		font-size: var(--apl-font-placeholder);
	}

	.apl-after-copy {
		margin: 40px 0 24px;
	}

	.apl-segment-after-workflow {
		margin-top: 24px;
	}

	.apl-segment-flow {
		transform: scale(.7);
		transform-origin: top left;
	}

	.apl-segment-flow-scroll {
		height: 312px;
	}

	.apl-segment-connector {
		height: 32px;
		margin-bottom: 16px;
	}

	.apl-before-after-labels,
	.apl-version-labels {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.apl-mobile-compare {
		margin-bottom: 16px;
	}

	.apl-notification-detail-stage {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 24px;
	}

	.apl-notification-callout,
	.apl-notification-callout--message {
		grid-column: auto;
	}

	.apl-notification-stage-labels,
	.apl-notification-stage-versions {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.apl-notification-stage-labels p {
		font-size: 20px;
	}

	.apl-mobile-compare {
		margin-bottom: 0;
	}

	.apl-result-card-grid {
		gap: 24px;
		margin-top: 20px;
	}

	.apl-result-card-grid article {
		grid-template-columns: 57px 1fr;
		min-height: 156px;
		padding: 16px 12px;
	}

	.apl-total-bottom {
		margin-top: 32px;
	}

	.apl-section-title {
		font-size: var(--apl-font-section-title);
	}

	.apl-client-card {
		margin-top: 20px;
		padding: 24px;
	}

	.apl-client-card header {
		grid-template-columns: 64px 1fr;
	}

	.apl-reflection-grid {
		gap: 24px;
		margin-top: 24px;
	}

	.apl-reflection-grid article {
		min-height: 252px;
		padding: 16px 12px;
	}

	.apl-footer {
		padding-top: 48px;
	}

	.apollo-page #nav-problem {
		min-height: 900px;
	}

	.apollo-page #nav-goal {
		min-height: 1032px;
	}

}