/* =========================================================
   ANJ DIGITAL
   PREMIUM ASSESSMENT PAGES

   Shared foundation for:
   - Baseline Technical & SEO Readiness Assessment
   - Organic Search Performance & Competitive Analysis
   ========================================================= */


.assessment-page {
	--assessment-pink: #f2849e;
	--assessment-blue: #7ecaf6;
	--assessment-teal: #7bd0c1;
	--assessment-magenta: #c75b9b;
	--assessment-purple: #ae85ca;
	--assessment-dark: #585858;
	--assessment-border: #e4e4e4;
	--assessment-soft: #fafafa;
}


/* =========================================================
   SHARED TYPOGRAPHY
   ========================================================= */

.assessment-page h1,
.assessment-page h2,
.assessment-page h3 {
	text-transform: none;
}

.assessment-page h1 {
	font-size: clamp(2.9em, 4.4vw, 4.35em);
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.assessment-page h2 {
	font-size: clamp(1.8em, 2.6vw, 2.4em);
	line-height: 1.13;
	letter-spacing: -0.025em;
}

.assessment-page h3 {
	font-size: 1.12em;
	line-height: 1.28;
	letter-spacing: -0.01em;
}

.assessment-eyebrow {
	display: block;

	margin-bottom: 1.2em;

	color: var(--assessment-pink);

	font-size: 0.64em;
	font-weight: 900;
	letter-spacing: 0.18em;
}

.assessment-section-label {
	display: flex;
	align-items: center;

	gap: 0.8em;

	margin-bottom: 1.4em;
}

.assessment-section-label > span {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;

	flex: 0 0 auto;

	border-radius: 50%;

	background:
		linear-gradient(
			135deg,
			var(--assessment-pink),
			var(--assessment-blue)
		);

	color: #ffffff;

	font-size: 0.62em;
	font-weight: 900;
}

.assessment-section-label p {
	margin: 0;

	font-size: 0.63em;
	font-weight: 900;
	letter-spacing: 0.14em;
}

.assessment-section-label--light p {
	color: rgba(255,255,255,0.72);
}


/* =========================================================
   HERO
   ========================================================= */

.assessment-hero {
	position: relative;

	display: grid;

	grid-template-columns:
		minmax(0, 1.08fr)
		minmax(330px, 0.92fr);

	gap: 5em;
	align-items: center;

	margin: 1em 0 6em;

	padding: 4.5em;

	border: 1px solid var(--assessment-border);

	border-radius: 24px;

	overflow: hidden;

	background:
		radial-gradient(
			circle at 95% 5%,
			rgba(126,202,246,0.18),
			transparent 30%
		),
		radial-gradient(
			circle at 5% 95%,
			rgba(242,132,158,0.16),
			transparent 34%
		),
		#ffffff;
}

.assessment-hero::after {
	content: '';

	position: absolute;

	right: -165px;
	top: -185px;

	width: 480px;
	height: 480px;

	border-radius: 50%;

	border:
		1px solid rgba(126,202,246,0.2);

	box-shadow:
		0 0 0 48px rgba(126,202,246,0.035),
		0 0 0 96px rgba(174,133,202,0.025);
}

.assessment-hero > * {
	position: relative;
	z-index: 2;
}

.assessment-hero h1 {
	margin-bottom: 0.55em;
}

.assessment-hero h1 span {
	display: block;

	background:
		linear-gradient(
			90deg,
			var(--assessment-pink),
			var(--assessment-purple),
			var(--assessment-blue)
		);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.assessment-hero__lead {
	max-width: 760px;

	margin-bottom: 0.7em;

	font-size: 1.15em;
	line-height: 1.7;
}

.assessment-hero__support {
	max-width: 760px;

	margin-bottom: 2em;

	line-height: 1.75;
}

.assessment-hero__actions {
	display: flex;
	flex-wrap: wrap;

	gap: 0.8em;
}


/* =========================================================
   HERO REPORT PREVIEW
   ========================================================= */

.assessment-hero__preview {
	padding: 1.3em;

	border-radius: 18px;

	background: var(--assessment-dark);

	color: #ffffff;

	box-shadow:
		0 24px 55px rgba(88,88,88,0.18);
}

.assessment-preview__top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 1em;

	padding: 0.5em 0 1.2em;
}

.assessment-preview__top span {
	font-size: 0.58em;
	font-weight: 900;
	letter-spacing: 0.15em;
}

.assessment-preview__top strong {
	color: var(--assessment-teal);

	font-size: 0.58em;
	letter-spacing: 0.1em;
}

.assessment-preview__image {
	padding: 0.6em;

	border-radius: 10px;

	background: #ffffff;

	overflow: hidden;
}

.assessment-preview__image img {
	display: block;

	width: 100%;
	height: auto;
}

.assessment-preview__bottom {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 0.7em;

	margin-top: 0.8em;
}

.assessment-preview__bottom > div {
	padding: 0.9em;

	border-radius: 9px;

	background: rgba(255,255,255,0.06);

	border:
		1px solid rgba(255,255,255,0.09);
}

.assessment-preview__bottom span {
	display: block;

	margin-bottom: 0.35em;

	color: var(--assessment-pink);

	font-size: 0.58em;
	font-weight: 900;
}

.assessment-preview__bottom > div:nth-child(2) span {
	color: var(--assessment-blue);
}

.assessment-preview__bottom > div:nth-child(3) span {
	color: var(--assessment-teal);
}

.assessment-preview__bottom strong {
	color: #ffffff;

	font-size: 0.72em;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.assessment-section-heading,
.assessment-review__heading,
.assessment-audience__heading,
.assessment-order__heading {
	max-width: 850px;

	margin-bottom: 2.7em;
}

.assessment-section-heading h2,
.assessment-review__heading h2,
.assessment-audience__heading h2,
.assessment-order__heading h2 {
	margin-bottom: 0.65em;
}


/* =========================================================
   PRICE OPTIONS
   ========================================================= */

.assessment-options {
	margin-bottom: 6em;
}

.assessment-options__grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 1.4em;
}

.assessment-price-card {
	position: relative;

	display: flex;
	flex-direction: column;

	min-height: 590px;

	padding: 2.7em;

	border: 1px solid var(--assessment-border);

	border-radius: 19px;

	background: #ffffff;
}

.assessment-price-card--featured {
	border-color:
		rgba(242,132,158,0.75);

	box-shadow:
		0 20px 45px rgba(242,132,158,0.09);
}

.assessment-price-card__badge {
	position: absolute;

	right: 1.5em;
	top: -0.8em;

	padding: 0.5em 0.8em;

	border-radius: 100px;

	background:
		linear-gradient(
			90deg,
			var(--assessment-pink),
			var(--assessment-purple)
		);

	color: #ffffff;

	font-size: 0.55em;
	font-weight: 900;
	letter-spacing: 0.1em;
}

.assessment-price-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-bottom: 1.5em;
}

.assessment-price-card__top span {
	color: var(--assessment-pink);

	font-size: 0.6em;
	font-weight: 900;
	letter-spacing: 0.14em;
}

.assessment-price-card--featured
.assessment-price-card__top span {
	color: var(--assessment-blue);
}

.assessment-price-card__top strong {
	color: #bbbbbb;

	font-size: 0.68em;
}

.assessment-price-card__type {
	margin-bottom: 0.8em;

	color: var(--assessment-dark);

	font-size: 0.66em;
	font-weight: 900;
	letter-spacing: 0.14em;
}

.assessment-price {
	display: flex;
	align-items: flex-start;

	margin-bottom: 1em;
}

.assessment-price > span {
	margin-top: 0.35em;

	font-size: 1em;
	font-weight: 900;
}

.assessment-price > strong {
	color: var(--assessment-dark);

	font-size: 3em;
	line-height: 1;
}

.assessment-price small {
	align-self: flex-end;

	margin: 0 0 0.35em 0.6em;

	color: #999999;

	font-size: 0.7em;
	font-weight: 700;
}

.assessment-price-card > p:not(.assessment-price-card__type) {
	line-height: 1.7;
}

.assessment-price-card ul {
	margin: 1.3em 0 2em;
	padding-left: 1.2em;
}

.assessment-price-card li {
	margin-bottom: 0.55em;
	line-height: 1.55;
}

.assessment-price-card li::marker {
	color: var(--assessment-pink);
}

.assessment-price-card--featured li::marker {
	color: var(--assessment-blue);
}

.assessment-price-card__button {
	width: 100%;

	margin-top: auto;

	text-align: center;
}


/* =========================================================
   FOUNDATION
   ========================================================= */

.assessment-foundation {
	margin-bottom: 6em;

	padding: 4em;

	border-radius: 22px;

	background: var(--assessment-dark);

	color: #ffffff;
}

.assessment-foundation__intro {
	max-width: 850px;

	margin-bottom: 3em;
}

.assessment-foundation h2 {
	margin-bottom: 0.7em;

	color: #ffffff;
}

.assessment-foundation h2 span {
	display: block;

	color: var(--assessment-pink);
}

.assessment-foundation__intro > p {
	color: rgba(255,255,255,0.76);
}

.assessment-foundation__flow {
	display: flex;
	align-items: stretch;

	gap: 0.7em;
}

.assessment-foundation__flow > div {
	flex: 1 1 0;

	padding: 1.5em;

	border-radius: 13px;

	background: rgba(255,255,255,0.06);

	border:
		1px solid rgba(255,255,255,0.11);
}

.assessment-foundation__flow > div > span {
	display: block;

	margin-bottom: 1.2em;

	color: var(--assessment-pink);

	font-size: 0.62em;
	font-weight: 900;
}

.assessment-foundation__flow > div:nth-of-type(2) > span {
	color: var(--assessment-blue);
}

.assessment-foundation__flow > div:nth-of-type(3) > span {
	color: var(--assessment-teal);
}

.assessment-foundation__flow > div:nth-of-type(4) > span {
	color: var(--assessment-purple);
}

.assessment-foundation__flow strong {
	display: block;

	margin-bottom: 0.35em;

	color: #ffffff;
}

.assessment-foundation__flow p {
	margin: 0;

	color: rgba(255,255,255,0.65);

	font-size: 0.8em;
}

.assessment-foundation__flow > b {
	display: flex;
	align-items: center;

	color: rgba(255,255,255,0.42);
}


/* =========================================================
   ASSESSMENT REVIEW
   ========================================================= */

.assessment-review {
	margin-bottom: 6em;
}

.assessment-review__grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 1.2em;
}

.assessment-review__grid article {
	min-height: 310px;

	padding: 2.2em;

	border-radius: 17px;

	background: #ffffff;

	border:
		1px solid var(--assessment-border);
}

.assessment-review__grid article > span {
	display: block;

	margin-bottom: 1.6em;

	color: var(--assessment-pink);

	font-size: 0.66em;
	font-weight: 900;
}

.assessment-review__grid article:nth-child(2) > span,
.assessment-review__grid article:nth-child(6) > span {
	color: var(--assessment-blue);
}

.assessment-review__grid article:nth-child(3) > span,
.assessment-review__grid article:nth-child(7) > span {
	color: var(--assessment-teal);
}

.assessment-review__grid article:nth-child(4) > span,
.assessment-review__grid article:nth-child(8) > span {
	color: var(--assessment-purple);
}

.assessment-review__grid h3 {
	margin: 0 0 0.7em;

	font-size: 1.2em;
}

.assessment-review__grid article > p {
	line-height: 1.7;
}

.assessment-review__grid ul {
	margin: 1.2em 0 0;

	padding-left: 1.2em;
}

.assessment-review__grid li {
	margin-bottom: 0.4em;
}

.assessment-review__grid li::marker {
	color: var(--assessment-pink);
}


/* =========================================================
   REPORT PREVIEW
   ========================================================= */

.assessment-report-preview {
	display: grid;

	grid-template-columns:
		0.9fr 1.1fr;

	gap: 5em;
	align-items: center;

	margin-bottom: 6em;

	padding: 4em;

	border-radius: 22px;

	background:
		linear-gradient(
			135deg,
			#585858,
			#626262
		);

	color: #ffffff;
}

.assessment-report-preview h2 {
	margin-bottom: 0.7em;

	color: #ffffff;
}

.assessment-report-preview__copy > p {
	color: rgba(255,255,255,0.76);
}

.assessment-report-preview__points {
	margin-top: 2em;

	border-top:
		1px solid rgba(255,255,255,0.14);
}

.assessment-report-preview__points > div {
	display: grid;

	grid-template-columns: 45px 1fr;

	gap: 1em;

	padding: 1em 0;

	border-bottom:
		1px solid rgba(255,255,255,0.14);
}

.assessment-report-preview__points span {
	color: var(--assessment-blue);

	font-size: 0.64em;
	font-weight: 900;
}

.assessment-report-preview__points p {
	margin: 0;

	color: #ffffff;

	font-weight: 700;
}

.assessment-report-preview__images {
	position: relative;

	min-height: 420px;
}

.assessment-report-image {
	position: absolute;

	width: 76%;

	padding: 0.7em;

	border-radius: 12px;

	background: #ffffff;

	box-shadow:
		0 22px 50px rgba(0,0,0,0.18);
}

.assessment-report-image img {
	display: block;

	width: 100%;
	height: auto;
}

.assessment-report-image--1 {
	left: 0;
	top: 0;

	transform: rotate(-2deg);
}

.assessment-report-image--2 {
	right: 0;
	bottom: 0;

	transform: rotate(2deg);
}


/* =========================================================
   AUDIENCE
   ========================================================= */

.assessment-audience {
	margin-bottom: 6em;
}

.assessment-audience__grid {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 1em;
}

.assessment-audience__grid article {
	min-height: 245px;

	padding: 1.8em;

	border-radius: 16px;

	border:
		1px solid var(--assessment-border);

	background: #ffffff;
}

.assessment-audience__grid article > span {
	display: block;

	margin-bottom: 1.8em;

	color: var(--assessment-pink);

	font-size: 0.64em;
	font-weight: 900;
}

.assessment-audience__grid article:nth-child(2) > span {
	color: var(--assessment-blue);
}

.assessment-audience__grid article:nth-child(3) > span {
	color: var(--assessment-teal);
}

.assessment-audience__grid article:nth-child(4) > span {
	color: var(--assessment-purple);
}

.assessment-audience__grid h3 {
	margin: 0 0 0.65em;
}

.assessment-audience__grid p {
	margin: 0;

	line-height: 1.7;
}


/* =========================================================
   DIFFERENCE
   ========================================================= */

.assessment-difference {
	display: grid;

	grid-template-columns:
		0.9fr 1.1fr;

	gap: 5em;
	align-items: center;

	margin-bottom: 6em;

	padding: 4em;

	border-radius: 22px;

	background: var(--assessment-dark);

	color: #ffffff;
}

.assessment-difference h2 {
	margin-bottom: 0.7em;

	color: #ffffff;
}

.assessment-difference h2 span {
	display: block;

	color: var(--assessment-pink);
}

.assessment-difference__copy > p {
	color: rgba(255,255,255,0.76);
}

.assessment-difference__grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 0.8em;
}

.assessment-difference__grid > div {
	min-height: 160px;

	padding: 1.4em;

	border-radius: 13px;

	background: rgba(255,255,255,0.06);

	border:
		1px solid rgba(255,255,255,0.11);
}

.assessment-difference__grid span {
	display: block;

	margin-bottom: 1em;

	color: var(--assessment-pink);

	font-size: 0.62em;
	font-weight: 900;
}

.assessment-difference__grid > div:nth-child(2) span {
	color: var(--assessment-blue);
}

.assessment-difference__grid > div:nth-child(3) span {
	color: var(--assessment-teal);
}

.assessment-difference__grid > div:nth-child(4) span {
	color: var(--assessment-purple);
}

.assessment-difference__grid strong {
	display: block;

	margin-bottom: 0.4em;

	color: #ffffff;
}

.assessment-difference__grid p {
	margin: 0;

	color: rgba(255,255,255,0.66);

	font-size: 0.8em;
}


/* =========================================================
   WHY FOUNDATION COMES FIRST
   ========================================================= */

.assessment-why-first {
	margin-bottom: 6em;
}

.assessment-why-first__grid {
	display: grid;

	grid-template-columns:
		0.85fr 1.15fr;

	gap: 5em;

	margin-bottom: 3em;
}

.assessment-why-first__grid h2 {
	margin: 0;
}

.assessment-why-first__grid p {
	font-size: 1.03em;
	line-height: 1.8;
}

.assessment-why-first__flow {
	display: grid;

	grid-template-columns:
		1fr auto 1fr auto 1fr;

	gap: 1em;
	align-items: stretch;
}

.assessment-why-first__flow > div {
	padding: 1.7em;

	border-radius: 15px;

	border:
		1px solid var(--assessment-border);

	background:
		linear-gradient(
			140deg,
			#ffffff,
			#fafafa
		);
}

.assessment-why-first__flow > div > span {
	display: block;

	margin-bottom: 1.2em;

	color: var(--assessment-pink);

	font-size: 0.64em;
	font-weight: 900;
}

.assessment-why-first__flow > div:nth-of-type(2) > span {
	color: var(--assessment-blue);
}

.assessment-why-first__flow > div:nth-of-type(3) > span {
	color: var(--assessment-teal);
}

.assessment-why-first__flow strong {
	display: block;

	margin-bottom: 0.35em;
}

.assessment-why-first__flow p {
	margin: 0;

	font-size: 0.82em;
}

.assessment-why-first__flow > b {
	display: flex;
	align-items: center;

	color: var(--assessment-pink);
}


/* =========================================================
   WHAT HAPPENS NEXT
   ========================================================= */

.assessment-next {
	margin-bottom: 6em;

	padding: 4em;

	border-radius: 22px;

	background:
		linear-gradient(
			125deg,
			var(--assessment-pink),
			var(--assessment-purple),
			var(--assessment-blue)
		);

	color: #ffffff;
}

.assessment-next__intro {
	max-width: 820px;

	margin-bottom: 3em;
}

.assessment-next h2 {
	margin-bottom: 0.7em;

	color: #ffffff;
}

.assessment-next h2 span {
	display: block;
}

.assessment-next__intro > p {
	color: rgba(255,255,255,0.86);
}

.assessment-next__steps {
	display: grid;

	grid-template-columns:
		repeat(5, minmax(0, 1fr));

	gap: 0.8em;
}

.assessment-next__steps article {
	min-height: 235px;

	padding: 1.5em;

	border-radius: 14px;

	background: rgba(255,255,255,0.1);

	border:
		1px solid rgba(255,255,255,0.2);
}

.assessment-next__steps article > span {
	display: block;

	margin-bottom: 1.5em;

	color: rgba(255,255,255,0.72);

	font-size: 0.62em;
	font-weight: 900;
}

.assessment-next__steps h3 {
	margin: 0 0 0.6em;

	color: #ffffff;

	font-size: 1em;
}

.assessment-next__steps p {
	margin: 0;

	color: rgba(255,255,255,0.78);

	font-size: 0.8em;
}

.assessment-next__note {
	margin: 2em 0 0;

	padding-top: 1.5em;

	border-top:
		1px solid rgba(255,255,255,0.22);

	color: #ffffff;

	font-weight: 700;
}


/* =========================================================
   FINAL ORDER CARDS
   ========================================================= */

.assessment-order {
	margin-bottom: 6em;
}

.assessment-order__grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 1.4em;
}

.assessment-order-card {
	position: relative;

	display: flex;
	flex-direction: column;

	min-height: 390px;

	padding: 2.5em;

	border-radius: 18px;

	border:
		1px solid var(--assessment-border);

	background: #ffffff;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.assessment-order-card:hover {
	transform: translateY(-5px);

	box-shadow:
		0 22px 50px rgba(88,88,88,0.1);
}

.assessment-order-card--featured {
	border-color:
		rgba(242,132,158,0.7);

	background:
		linear-gradient(
			145deg,
			rgba(242,132,158,0.04),
			rgba(126,202,246,0.05)
		);
}

.assessment-order-card__badge {
	position: absolute;

	right: 1.5em;
	top: -0.75em;

	padding: 0.5em 0.8em;

	border-radius: 100px;

	background: var(--assessment-dark);

	color: #ffffff;

	font-size: 0.55em;
	font-weight: 900;
	letter-spacing: 0.1em;
}

.assessment-order-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 1em;

	margin-bottom: 1.4em;
}

.assessment-order-card__top span {
	color: var(--assessment-pink);

	font-size: 0.6em;
	font-weight: 900;
	letter-spacing: 0.12em;
}

.assessment-order-card--featured
.assessment-order-card__top span {
	color: var(--assessment-blue);
}

.assessment-order-card__top strong {
	color: #bbbbbb;

	font-size: 0.66em;
}

.assessment-order-card__type {
	margin-bottom: 0.8em;

	font-size: 0.64em;
	font-weight: 900;
	letter-spacing: 0.13em;
}

.assessment-order-card__price {
	display: flex;
	align-items: flex-start;

	margin-bottom: 1em;
}

.assessment-order-card__price small {
	margin-top: 0.35em;

	font-size: 1em;
	font-weight: 900;
}

.assessment-order-card__price strong {
	color: var(--assessment-dark);

	font-size: 3em;
	line-height: 1;
}

.assessment-order-card__price span {
	align-self: flex-end;

	margin:
		0 0 0.35em 0.6em;

	color: #999999;

	font-size: 0.68em;
}

.assessment-order-card > p {
	line-height: 1.7;
}

.assessment-order-card__cta {
	margin-top: auto;

	padding-top: 1.5em;

	border-top:
		1px solid var(--assessment-border);

	color: var(--assessment-dark);

	font-size: 0.68em;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.assessment-final {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 4em;

	margin-bottom: 5em;

	padding: 4em;

	border-radius: 22px;

	background:
		linear-gradient(
			110deg,
			rgba(242,132,158,0.11),
			rgba(174,133,202,0.09),
			rgba(126,202,246,0.12)
		);

	border:
		1px solid var(--assessment-border);
}

.assessment-final > div {
	max-width: 780px;
}

.assessment-final > div > span {
	display: block;

	margin-bottom: 1em;

	color: var(--assessment-pink);

	font-size: 0.62em;
	font-weight: 900;
	letter-spacing: 0.14em;
}

.assessment-final h2 {
	margin-bottom: 0.55em;

	font-size: clamp(1.8em, 2.5vw, 2.3em);
	line-height: 1.13;
	letter-spacing: -0.02em;

	text-transform: none;
}

.assessment-final p {
	margin: 0;

	line-height: 1.7;
}

.assessment-final__button {
	flex: 0 0 auto;
}


/* =========================================================
   BASELINE PAGE — SMALL REFINEMENTS
   ========================================================= */

.assessment-page--baseline
.assessment-review__grid article {
	position: relative;

	overflow: hidden;
}

.assessment-page--baseline
.assessment-review__grid article::after {
	content: '';

	position: absolute;

	right: -45px;
	top: -45px;

	width: 100px;
	height: 100px;

	border-radius: 50%;

	background:
		rgba(126,202,246,0.045);
}

.assessment-page--baseline
.assessment-review__grid article:nth-child(odd)::after {
	background:
		rgba(242,132,158,0.045);
}


/* =========================================================
   LINK / CARD BEHAVIOR
   ========================================================= */

.assessment-order-card,
.assessment-order-card:hover,
.assessment-order-card:focus {
	border-bottom-style: solid;
}

.assessment-order-card:hover
.assessment-order-card__cta {
	color: var(--assessment-pink);
}

.assessment-price-card__button {
	white-space: normal;

	height: auto;

	min-height: 3.5em;

	padding-top: 0.9em;
	padding-bottom: 0.9em;

	line-height: 1.4;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 980px) {

	.assessment-hero,
	.assessment-report-preview,
	.assessment-difference,
	.assessment-why-first__grid {
		grid-template-columns: 1fr;

		gap: 2.5em;
	}


	/* Pricing */

	.assessment-options__grid,
	.assessment-order__grid {
		grid-template-columns: 1fr;
	}

	.assessment-price-card {
		min-height: auto;
	}


	/* Foundation */

	.assessment-foundation__flow {
		display: grid;

		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.assessment-foundation__flow > b {
		display: none;
	}


	/* Review */

	.assessment-review__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	/* Report images */

	.assessment-report-preview__images {
		min-height: 470px;
	}


	/* Audience */

	.assessment-audience__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	/* Foundation flow */

	.assessment-why-first__flow {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}

	.assessment-why-first__flow > b {
		display: none;
	}


	/* Process */

	.assessment-next__steps {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.assessment-next__steps article:last-child {
		grid-column: 1 / -1;
	}


	/* Final CTA */

	.assessment-final {
		flex-direction: column;

		align-items: flex-start;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 736px) {

	/* Overall spacing */

	.assessment-hero,
	.assessment-options,
	.assessment-foundation,
	.assessment-review,
	.assessment-report-preview,
	.assessment-audience,
	.assessment-difference,
	.assessment-why-first,
	.assessment-next,
	.assessment-order {
		margin-bottom: 4em;
	}


	/* Typography */

	.assessment-page h1 {
		font-size: 2.35em;
	}

	.assessment-page h2 {
		font-size: 1.65em;
	}

	.assessment-page h3 {
		font-size: 1.05em;
	}


	/* Hero */

	.assessment-hero {
		padding: 2.2em 1.5em;

		border-radius: 16px;
	}

	.assessment-hero__actions {
		flex-direction: column;

		align-items: stretch;
	}

	.assessment-hero__actions .button {
		width: 100%;

		text-align: center;
	}

	.assessment-hero__preview {
		padding: 1em;

		border-radius: 15px;
	}

	.assessment-preview__bottom {
		grid-template-columns: 1fr;
	}


	/* Pricing */

	.assessment-price-card {
		padding: 2em 1.5em;

		border-radius: 15px;
	}

	.assessment-price {
		align-items: flex-start;
	}

	.assessment-price > strong {
		font-size: 2.6em;
	}


	/* Dark Foundation */

	.assessment-foundation {
		padding: 2em 1.5em;

		border-radius: 15px;
	}

	.assessment-foundation__flow {
		grid-template-columns: 1fr;
	}


	/* Review Cards */

	.assessment-review__grid {
		grid-template-columns: 1fr;
	}

	.assessment-review__grid article {
		min-height: auto;

		padding: 1.7em;

		border-radius: 14px;
	}


	/* Report Preview */

	.assessment-report-preview {
		padding: 2em 1.5em;

		border-radius: 15px;
	}

	.assessment-report-preview__images {
		display: grid;

		gap: 1em;

		min-height: auto;
	}

	.assessment-report-image {
		position: relative;

		width: 100%;

		left: auto;
		right: auto;
		top: auto;
		bottom: auto;

		transform: none;
	}


	/* Audience */

	.assessment-audience__grid {
		grid-template-columns: 1fr;
	}

	.assessment-audience__grid article {
		min-height: auto;
	}


	/* Difference */

	.assessment-difference {
		padding: 2em 1.5em;

		border-radius: 15px;
	}

	.assessment-difference__grid {
		grid-template-columns: 1fr;
	}

	.assessment-difference__grid > div {
		min-height: auto;
	}


	/* Why Foundation Comes First */

	.assessment-why-first__grid {
		gap: 1.5em;
	}

	.assessment-why-first__flow {
		grid-template-columns: 1fr;
	}


	/* What Happens Next */

	.assessment-next {
		padding: 2em 1.5em;

		border-radius: 15px;
	}

	.assessment-next__steps {
		grid-template-columns: 1fr;
	}

	.assessment-next__steps article,
	.assessment-next__steps article:last-child {
		grid-column: auto;

		min-height: auto;
	}


	/* Bottom Order Cards */

	.assessment-order-card {
		min-height: auto;

		padding: 2em 1.5em;

		border-radius: 15px;
	}

	.assessment-order-card__price strong {
		font-size: 2.6em;
	}


	/* Final CTA */

	.assessment-final {
		margin-bottom: 4em;

		padding: 2em 1.5em;

		border-radius: 15px;
	}

	.assessment-final h2 {
		font-size: 1.65em;
	}

	.assessment-final__button {
		width: 100%;

		text-align: center;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 480px) {

	.assessment-page h1 {
		font-size: 2.05em;
	}

	.assessment-page h2 {
		font-size: 1.5em;
	}

	.assessment-price-card__badge,
	.assessment-order-card__badge {
		position: static;

		display: inline-block;

		align-self: flex-start;

		margin-bottom: 1em;
	}

	.assessment-price-card__top,
	.assessment-order-card__top {
		align-items: flex-start;
	}

}

/* =========================================================
   ORGANIC SEARCH PERFORMANCE + COMPETITIVE ANALYSIS
   ========================================================= */


/* HERO — slightly more search/data oriented */
.assessment-page--competitive .competitive-hero {
	background:
		radial-gradient(
			circle at 95% 5%,
			rgba(174,133,202,0.17),
			transparent 30%
		),
		radial-gradient(
			circle at 5% 95%,
			rgba(126,202,246,0.14),
			transparent 35%
		),
		#ffffff;
}


/* =========================================================
   COMPETITIVE POSITION
   ========================================================= */

.competitive-position {
	display: grid;

	grid-template-columns:
		0.9fr 1.1fr;

	gap: 5em;
	align-items: center;

	margin-bottom: 6em;

	padding: 4em;

	border-radius: 22px;

	background: var(--assessment-dark);

	color: #ffffff;
}

.competitive-position h2 {
	margin-bottom: 0.7em;

	color: #ffffff;
}

.competitive-position h2 span {
	display: block;

	color: var(--assessment-blue);
}

.competitive-position__copy > p {
	color: rgba(255,255,255,0.76);
}

.competitive-position__signals {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 0.8em;
}

.competitive-position__signals > div {
	min-height: 155px;

	padding: 1.4em;

	border-radius: 13px;

	background: rgba(255,255,255,0.06);

	border:
		1px solid rgba(255,255,255,0.11);
}

.competitive-position__signals span {
	display: block;

	margin-bottom: 1em;

	color: var(--assessment-pink);

	font-size: 0.62em;
	font-weight: 900;
}

.competitive-position__signals > div:nth-child(2) span {
	color: var(--assessment-blue);
}

.competitive-position__signals > div:nth-child(3) span {
	color: var(--assessment-teal);
}

.competitive-position__signals > div:nth-child(4) span {
	color: var(--assessment-purple);
}

.competitive-position__signals strong {
	display: block;

	margin-bottom: 0.35em;

	color: #ffffff;
}

.competitive-position__signals p {
	margin: 0;

	color: rgba(255,255,255,0.65);

	font-size: 0.8em;
}


/* =========================================================
   EIGHT ANALYSIS SECTIONS
   ========================================================= */

.competitive-analysis {
	margin-bottom: 6em;
}

.competitive-analysis__sections {
	border-top:
		1px solid var(--assessment-border);
}

.competitive-analysis-row {
	display: grid;

	grid-template-columns:
		80px minmax(0, 1fr);

	gap: 2em;

	padding: 2.7em 0;

	border-bottom:
		1px solid var(--assessment-border);
}

.competitive-analysis-row__number {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;

	border-radius: 50%;

	background:
		linear-gradient(
			135deg,
			var(--assessment-pink),
			var(--assessment-purple)
		);

	color: #ffffff;

	font-size: 0.68em;
	font-weight: 900;
}

.competitive-analysis-row:nth-child(2)
.competitive-analysis-row__number,
.competitive-analysis-row:nth-child(6)
.competitive-analysis-row__number {
	background:
		linear-gradient(
			135deg,
			var(--assessment-blue),
			var(--assessment-purple)
		);
}

.competitive-analysis-row:nth-child(3)
.competitive-analysis-row__number,
.competitive-analysis-row:nth-child(7)
.competitive-analysis-row__number {
	background:
		linear-gradient(
			135deg,
			var(--assessment-teal),
			var(--assessment-blue)
		);
}

.competitive-analysis-row__copy {
	max-width: 900px;
}

.competitive-analysis-row__copy > span {
	display: block;

	margin-bottom: 0.7em;

	color: var(--assessment-pink);

	font-size: 0.62em;
	font-weight: 900;
	letter-spacing: 0.14em;
}

.competitive-analysis-row h3 {
	margin: 0 0 0.8em;

	font-size: 1.3em;
}

.competitive-analysis-row__copy > p {
	line-height: 1.75;
}

.competitive-analysis-row ul {
	margin: 1.2em 0;

	padding-left: 1.2em;
}

.competitive-analysis-row li {
	margin-bottom: 0.45em;
}

.competitive-analysis-row li::marker {
	color: var(--assessment-pink);
}

.competitive-analysis-row__note {
	margin-top: 1.4em;

	padding: 1em 1.2em;

	border-left:
		3px solid var(--assessment-blue);

	background:
		rgba(126,202,246,0.055);

	font-size: 0.9em;
}


/* Featured Competitive Organic Search Results */
.competitive-analysis-row--featured {
	margin-top: 1.5em;

	padding: 2.7em;

	border: 0;

	border-radius: 20px;

	background:
		linear-gradient(
			125deg,
			rgba(242,132,158,0.08),
			rgba(174,133,202,0.07),
			rgba(126,202,246,0.09)
		);
}

.competitive-analysis
.competitive-analysis-row--featured
.competitive-analysis-row__number {
	background:
		linear-gradient(
			135deg,
			var(--assessment-pink),
			var(--assessment-blue)
		);

	box-shadow:
		0 10px 25px rgba(242,132,158,0.16);
}

.competitive-analysis-row--featured
.competitive-analysis-row__copy > span {
	color: var(--assessment-magenta);
}

.competitive-analysis-row--featured h3 {
	font-size: 1.45em;
}

.competitive-analysis-row--featured
.competitive-analysis-row__note {
	border-left-color: var(--assessment-pink);

	background:
		rgba(242,132,158,0.06);
}


/* =========================================================
   COMPETITIVE REPORT PREVIEW
   ========================================================= */

.competitive-report-preview {
	background:
		linear-gradient(
			135deg,
			#585858 0%,
			#606060 60%,
			#575757 100%
		);
}

.competitive-report-preview
.assessment-report-preview__points span {
	color: var(--assessment-teal);
}


/* =========================================================
   COMPETITIVE DIFFERENCE
   ========================================================= */

.competitive-difference h2 span {
	color: var(--assessment-blue);
}


/* =========================================================
   COMPETITIVE FINAL CTA
   ========================================================= */

.competitive-final {
	background:
		linear-gradient(
			110deg,
			rgba(126,202,246,0.11),
			rgba(174,133,202,0.09),
			rgba(242,132,158,0.11)
		);
}

.competitive-final > div > span {
	color: var(--assessment-purple);
}


/* =========================================================
   COMPETITIVE PAGE TYPOGRAPHY
   ========================================================= */

.assessment-page--competitive h1 {
	font-size: clamp(2.8em, 4.2vw, 4.2em);
}

.assessment-page--competitive
.competitive-analysis-row h3 {
	letter-spacing: -0.015em;

	text-transform: none;
}

.assessment-page--competitive
.competitive-position h2,
.assessment-page--competitive
.competitive-analysis .assessment-review__heading h2 {
	letter-spacing: -0.025em;

	text-transform: none;
}


/* =========================================================
   COMPETITIVE PAGE — TABLET
   ========================================================= */

@media screen and (max-width: 980px) {

	.competitive-position {
		grid-template-columns: 1fr;

		gap: 2.5em;
	}

	.competitive-analysis-row {
		grid-template-columns:
			65px minmax(0, 1fr);

		gap: 1.5em;
	}

	.competitive-analysis-row--featured {
		padding: 2.3em;
	}

}


/* =========================================================
   COMPETITIVE PAGE — MOBILE
   ========================================================= */

@media screen and (max-width: 736px) {

	.assessment-page--competitive
	.competitive-position,
	.assessment-page--competitive
	.competitive-analysis {
		margin-bottom: 4em;
	}


	/* Position Section */

	.competitive-position {
		padding: 2em 1.5em;

		border-radius: 15px;
	}

	.competitive-position__signals {
		grid-template-columns: 1fr;
	}

	.competitive-position__signals > div {
		min-height: auto;
	}


	/* Eight Analysis Sections */

	.competitive-analysis-row {
		grid-template-columns: 1fr;

		gap: 1em;

		padding: 2em 0;
	}

	.competitive-analysis-row__number {
		width: 42px;
		height: 42px;
	}

	.competitive-analysis-row h3 {
		font-size: 1.15em;
	}

	.competitive-analysis-row__copy > span {
		margin-bottom: 0.55em;
	}

	.competitive-analysis-row__note {
		padding: 0.9em 1em;
	}


	/* Featured Competitive Organic Search Results */

	.competitive-analysis-row--featured {
		margin-top: 1em;

		padding: 2em 1.5em;

		border-radius: 15px;
	}

	.competitive-analysis-row--featured h3 {
		font-size: 1.25em;
	}


	/* Hero */

	.assessment-page--competitive h1 {
		font-size: 2.3em;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 480px) {

	.assessment-page--competitive h1 {
		font-size: 2.05em;
	}

	.competitive-analysis-row--featured {
		padding: 1.6em 1.2em;
	}

}