/* Reporta Health landing page
   Built from the "Website" frame of the Reporta Health Figma file (Reporta Web App page).
   Desktop values match the 1440px design; smaller breakpoints adapt the same pieces.
*/

/*****************************************
Table Of Contents:

01. Tokens & General
02. Shared Pieces
03. Navigation
04. Hero
05. About
06. Features
07. Statistics
08. Contact
09. Footer
10. Reduced Motion
******************************************/


/******************************/
/*   01. Tokens & General     */
/******************************/
:root {
	--text-headings: #22252b;
	--text-body: #333740;
	--reporta-blue-100: #eaf1fb;
	--reporta-blue-200: #94a1c2;
	--reporta-blue-300: #5b709d;
	--reporta-blue-400: #3e598b;
	--reporta-blue-500: #194379;
	--reporta-blue-600: #173055;
	--reporta-blue-800: #040c15;
	--info-400: #4047ff;
	--info-default: #000aff;
	--info-600: #0008bf;
	--border-primary: #d0d1d4;
	--gray-300: #a1a4aa;
	--page-bg: #f6f6f6;
	--hero-bg: #f9f9f9;
	--font-display: "Bricolage Grotesque", sans-serif;
	--font-body: "Poppins", sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--page-bg);
	color: var(--text-body);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
}

h1, h2, h3, h4, p, ul, dl, dd {
	margin: 0;
}

ul {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

section[id] {
	scroll-margin-top: 120px;
}

button {
	font: inherit;
	cursor: pointer;
}


/******************************/
/*     02. Shared Pieces      */
/******************************/
.section {
	padding: 70px clamp(20px, 6.5vw, 94px);
	background: var(--page-bg);
}

.section__inner {
	margin: 0 auto;
}

/* Small label with a line on each side ("feature header" in Figma) */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.28px;
	white-space: nowrap;
}

.eyebrow::before,
.eyebrow::after {
	content: "";
	flex: none;
	width: 70px;
	height: 1px;
	background: currentColor;
}

.eyebrow--about { color: var(--reporta-blue-300); }
.eyebrow--features { color: #ff9040; }
.eyebrow--stats { color: var(--reporta-blue-400); }
.eyebrow--contact { color: var(--info-400); }

.section-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-variation-settings: "opsz" 14;
	font-size: clamp(28px, 4.2vw, 42px);
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--text-headings);
}

.section-text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--text-body);
}

/* Fixed-size illustrations (map, phone callouts) scale with their container; js/landing.js sets --fit-scale */
.fit {
	position: relative;
	width: 100%;
}

.fit__stage {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
	transform: scale(var(--fit-scale, 1));
}


/******************************/
/*      03. Navigation        */
/******************************/
.site-nav {
	position: fixed;
	top: 30px;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 0 20px;
}

.site-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1314px;
	margin: 0 auto;
	padding: 16px 32px;
	background: #fff;
	border-radius: 52px;
	box-shadow: 0 4px 12.5px rgba(0, 0, 0, 0.08);
}

/* Figma places the bar 67px from the left of the 1440 frame, slightly off-centre */
@media (min-width: 1360px) {
	.site-nav__bar {
		margin-left: calc(50% - 653px);
	}
}

.site-nav__logo img {
	width: 106px;
	height: 44px;
}

.site-nav__right {
	display: flex;
	flex: 0 1 804px;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-nav__links {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
}

.site-nav__links a,
.mobile-menu__links a {
	display: block;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 17px;
	color: var(--text-body);
	text-align: center;
	transition: color 0.2s;
}

.site-nav__links a:hover,
.mobile-menu__links a:hover {
	color: var(--reporta-blue-500);
}

.site-nav__links li:nth-child(1) a,
.site-nav__links li:nth-child(2) a { width: 65px; }
.site-nav__links li:nth-child(3) a,
.site-nav__links li:nth-child(5) a { width: 62px; }
.site-nav__links li:nth-child(4) a { width: 74px; }

.btn-web-app {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15.5px 24px;
	border-radius: 28px;
	background: var(--reporta-blue-500);
	color: #e4e6ed;
	font-family: "Urbanist", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 16px;
	white-space: nowrap;
	transition: background-color 0.2s;
}

.btn-web-app:hover {
	background: var(--reporta-blue-600);
}

.btn-web-app--block {
	border-radius: 10px;
}

.site-nav__toggle {
	display: none;
	padding: 0;
	border: 0;
	background: none;
}

.mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 246px;
	height: 100vh;
	height: 100dvh;
	max-height: 800px;
	padding: 25px 12px;
	background: #fff;
	box-shadow: 0 4px 12.5px rgba(0, 0, 0, 0.08);
}

.mobile-menu[hidden] {
	display: none;
}

.mobile-menu__close {
	align-self: flex-end;
	padding: 0;
	border: 0;
	background: none;
}

.mobile-menu__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 42px;
	margin-top: 54px;
	padding: 10px;
}

.mobile-menu .btn-web-app {
	margin-top: auto;
}

@media (max-width: 1099px) {
	.site-nav {
		top: 0;
		padding: 0;
	}

	.site-nav__bar {
		max-width: none;
		padding: 14px 20px;
		border-radius: 0;
	}

	.site-nav__right {
		display: none;
	}

	.site-nav__toggle {
		display: block;
	}
}

@media (min-width: 1100px) {
	.mobile-menu {
		display: none;
	}
}


/******************************/
/*          04. Hero          */
/******************************/
.hero {
	position: relative;
	overflow: hidden;
	background: var(--hero-bg);
}

.hero__geo {
	position: absolute;
	left: calc(50% - 793.92px);
	top: 10px;
	width: 1588.84px;
	height: 1001px;
	max-width: none;
	pointer-events: none;
}

.hero__inner {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: 199px 51px 32px 76px;
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 723fr) minmax(0, 590fr);
	grid-template-areas:
		"copy map"
		"tags map"
		"stats map";
	align-items: start;
}

.hero__copy {
	grid-area: copy;
}

.hero__title {
	max-width: 520px;
	font-family: var(--font-display);
	font-weight: 700;
	font-variation-settings: "opsz" 14;
	font-size: clamp(30px, 4.2vw, 50px);
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--reporta-blue-800);
}

.hero__title span {
	font-weight: 800;
	letter-spacing: 0.64px;
	color: var(--info-400);
}

/* In Figma this 4px line has no layout height, so it eats into the 20px gaps around it */
.hero__rule {
	display: block;
	width: 70px;
	height: 4px;
	margin-top: 16px;
	background: var(--info-400);
}

.hero__text {
	max-width: 629px;
	margin-top: 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body);
}

.hero__map {
	grid-area: map;
	max-width: 590px;
	margin-top: 61px;
	aspect-ratio: 590 / 477;
}

.hero__map .fit__stage {
	width: 590px;
	height: 477px;
}

.hero__tags {
	grid-area: tags;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 70px;
}

.tag {
	display: flex;
	align-items: center;
	gap: 19px;
	height: 45px;
	padding: 0 15px 0 16px;
	border: 0.5px solid rgba(0, 3, 64, 0.2);
	border-radius: 10px;
	background: rgba(0, 3, 64, 0.075);
	box-shadow: 4px 4px 5px rgba(0, 3, 64, 0.09);
	font-size: 12px;
	line-height: 18px;
	color: #000340;
	white-space: nowrap;
}

.tag img {
	width: 24px;
	height: 24px;
}

.hero__stats {
	grid-area: stats;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% + 35px);
	max-width: 758px;
	margin-top: 74px;
	padding: 10px 30px;
	border-radius: 20px;
	background: rgba(0, 3, 64, 0.9);
}

.hero__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 10px;
	text-align: center;
}

.hero__stat strong {
	font-weight: 700;
	font-size: 24px;
	line-height: 36px;
	color: var(--reporta-blue-100);
	white-space: nowrap;
}

.hero__stat span {
	font-size: 14px;
	line-height: 21px;
	color: #fff;
	white-space: nowrap;
}

.hero__divider {
	flex: none;
	width: 1px;
	height: 80px;
	background: #fff;
}

/* Map illustration (coordinates come from the Figma "map" frame) */
.map__country {
	position: absolute;
	left: 0;
	top: 0;
	width: 598.475px;
	height: 484.605px;
	max-width: none;
}

.map__badge {
	position: absolute;
	left: 169.48px;
	top: 157.02px;
	width: 119px;
	height: 110px;
	overflow: hidden;
	filter: drop-shadow(-3px 8px 4px rgba(0, 0, 0, 0.25));
}

.map__badge img {
	position: absolute;
	left: -44.95px;
	top: 0;
	width: 365.69px;
	height: 110px;
	max-width: none;
}

.pin {
	position: relative;
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	overflow: hidden;
}

.pin img {
	position: absolute;
	max-width: none;
}

.pin img:first-child {
	left: 3.211px;
	top: 0.461px;
	width: 9.577px;
	height: 15.078px;
}

.pin img:last-child {
	left: 2.821px;
	top: 0.072px;
	width: 10.355px;
	height: 15.856px;
}

.mp {
	position: absolute;
	display: block;
}

.rot {
	display: flex;
	align-items: center;
	justify-content: center;
}

.rot > * {
	position: relative;
	display: block;
	flex: none;
}

.mp--flex,
.mp--row {
	display: flex;
	align-items: flex-start;
}

/* Dashed route lines are exported with 1.5px of stroke padding on each side */
.ln > img {
	position: absolute;
	left: -1.5px;
	top: -1.5px;
	width: calc(100% + 3px);
	height: calc(100% + 3px);
	max-width: none;
}

/* Facility cards floating over the map */
.facility-card {
	position: absolute;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 10px 20px;
	border-radius: 3px;
	background: #fff;
	filter: drop-shadow(-5px 4px 2px var(--reporta-blue-200));
	color: #333;
}

.facility-card--d {
	left: -118px;
	top: 66px;
	width: 290px;
	height: 67px;
}

.facility-card--c {
	left: 272px;
	top: 351px;
	width: 288px;
	height: 63px;
}

.facility-card__logo {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 30px;
	height: 30px;
	border-radius: 3px;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 17px;
	line-height: 1;
	color: #fff;
}

.facility-card__info {
	width: 156px;
}

.facility-card__name {
	font-weight: 500;
	font-size: 9px;
	line-height: 1.5;
}

.facility-card__meta,
.facility-card__rating {
	display: flex;
	align-items: center;
	margin-top: 5px;
	font-family: "Quicksand", sans-serif;
	font-size: 7px;
	line-height: 1.25;
	white-space: nowrap;
}

.facility-card__meta {
	gap: 7px;
}

.facility-card__meta b {
	font-size: 11px;
	line-height: 0.6;
}

.facility-card__rating {
	gap: 5px;
}

.facility-card__rating img {
	width: 7px;
	height: 7px;
}

.facility-card__distance {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font-size: 6px;
	line-height: 1.5;
	opacity: 0.9;
	white-space: nowrap;
}

.facility-card__distance img {
	width: 10px;
	height: 10px;
}

/* Trusted by */
.trusted {
	position: relative;
	max-width: 969px;
	margin: 84px auto 0;
}

/* Centre on the page rather than on the hero's uneven 76px / 51px padding */
@media (min-width: 1200px) {
	.trusted {
		left: -12.5px;
	}
}

.trusted__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 25px;
	font-family: var(--font-display);
	font-weight: 800;
	font-variation-settings: "opsz" 14;
	font-size: 20px;
	line-height: 1.2;
	color: var(--reporta-blue-600);
	white-space: nowrap;
}

.trusted__title::before,
.trusted__title::after {
	content: "";
	flex: 0 1 240px;
	height: 1px;
	background: var(--reporta-blue-600);
}

.trusted__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 150px;
	margin-top: 8px;
	padding: 5px 30px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.6);
}

.trusted__nhia,
.trusted__fmoh {
	height: 52px;
	object-fit: cover;
}

.trusted__nhia { width: 161px; }
.trusted__fmoh { width: 130px; }

.trusted__crop {
	position: relative;
	flex: none;
	height: 52px;
	overflow: hidden;
}

.trusted__crop img {
	position: absolute;
	max-width: none;
}

.trusted__crop--3 { width: 52px; }
.trusted__crop--3 img { left: -37.49%; top: -38.29%; width: 174.37%; height: 174.83%; }
.trusted__crop--4 { width: 42px; }
.trusted__crop--4 img { left: -69.94%; top: -59.9%; width: 252.27%; height: 204.16%; }

@media (max-width: 1199px) {
	.hero__inner {
		padding: 150px clamp(20px, 5vw, 76px) 40px;
	}

	.hero__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"copy"
			"map"
			"tags"
			"stats";
	}

	.hero__map {
		width: 100%;
		margin: 40px auto 0;
	}

	/* Keep the facility cards inside the map so nothing hangs off small screens */
	.facility-card--d { left: 300px; top: 96px; }
	.facility-card--c { left: 300px; top: 330px; }

	.hero__tags {
		margin-top: 40px;
	}

	.hero__stats {
		width: 100%;
		margin-top: 40px;
	}

	.trusted {
		margin-top: 60px;
	}

	.trusted__logos {
		gap: 16px 64px;
	}
}

@media (max-width: 1099px) {
	.hero__inner {
		padding-top: 110px;
	}
}

@media (max-width: 767px) {
	.hero__text {
		font-size: 13px;
	}

	.hero__tags {
		gap: 15px;
	}

	.hero__stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 5px 8px;
		border-radius: 10px;
	}

	.hero__divider {
		display: none;
	}

	.hero__stat strong {
		font-size: 20px;
		line-height: 30px;
	}

	.hero__stat span {
		font-size: 12px;
		line-height: 18px;
	}

	.trusted__title {
		gap: 16px;
	}

	.trusted__logos {
		gap: 16px 40px;
		padding: 10px 16px;
	}
}


/******************************/
/*         05. About          */
/******************************/
.about__inner {
	max-width: 1252px;
}

.about__title {
	margin-top: 40px;
	font-size: clamp(32px, 5vw, 50px);
}

.about__title span {
	color: #0da500;
}

.about__text {
	max-width: 942px;
	margin-top: 24px;
}

.about-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 90px;
}

.about-col {
	display: contents;
}

.about-card {
	position: relative;
	overflow: hidden;
	padding: 30px 30px calc(var(--art-h) + var(--art-b) + 16px);
	border-radius: 20px;
	background: var(--card-bg);
	outline-offset: 3px;
}

.about-card__art {
	position: absolute;
	right: var(--art-r);
	bottom: var(--art-b);
	width: var(--art-w);
	height: var(--art-h);
	max-width: none;
	object-fit: contain;
	transition: width 0.45s ease, height 0.45s ease, right 0.45s ease, bottom 0.45s ease, opacity 0.3s ease;
}

.about-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 307px;
}

.about-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 1px solid var(--icon-border);
	border-radius: 10px;
	background: var(--icon-bg);
}

.about-card__icon img {
	width: 25px;
	height: 25px;
}

.about-card h3 {
	margin-top: -5px;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.5;
	color: var(--text-headings);
}

.about-card p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body);
}

.about-card--discovery {
	--card-bg: #f0e8f4; --icon-bg: #f0e8f4; --icon-border: #651391;
	--art-w: 199px; --art-h: 187px; --art-r: 20px; --art-b: -16px;
	--art-xw: 308px; --art-xh: 289px; --art-xr: 20px; --art-xb: 0px;
}

.about-card--discovery .about-card__art {
	object-fit: cover;
	object-position: left center;
}

.about-card--access {
	--card-bg: #c2e8bf; --icon-bg: #e7f6e5; --icon-border: #4abc40;
	--art-w: 150px; --art-h: 150px; --art-r: 20px; --art-b: -16px;
	--art-xw: 249px; --art-xh: 249px; --art-xr: 20px; --art-xb: 0px;
}

.about-card--innovation {
	--card-bg: #ffdabf; --icon-bg: #fff0e5; --icon-border: #ff6b00;
	--art-w: 187px; --art-h: 187px; --art-r: 20px; --art-b: -27px;
	--art-xw: 319px; --art-xh: 319px; --art-xr: 0px; --art-xb: -24px;
}

.about-card--support {
	--card-bg: #bfc2ff; --icon-bg: #e5e7ff; --icon-border: #4047ff;
	--art-w: 131px; --art-h: 186px; --art-r: 20px; --art-b: -16px;
	--art-xw: 210px; --art-xh: 298px; --art-xr: 20px; --art-xb: 0px;
}

.about-card--community {
	--card-bg: #ffbfbf; --icon-bg: #ffe5e5; --icon-border: #ff0000;
	--art-w: 147px; --art-h: 196px; --art-r: 20px; --art-b: -22px;
	--art-xw: 226px; --art-xh: 301px; --art-xr: 20px; --art-xb: 0px;
}

.about-card--transparency {
	--card-bg: #fff9bf; --icon-bg: #fffce5; --icon-border: #ffe500;
	--art-w: 192px; --art-h: 185px; --art-r: 20px; --art-b: -24px;
	--art-xw: 334px; --art-xh: 321px; --art-xr: 20px; --art-xb: 5px;
}

/* Desktop: two cards per column; hovering (or focusing) a card expands it to the Figma "Top"/"Bottom" variant */
@media (min-width: 1200px) {
	.about-cards {
		display: flex;
		justify-content: center;
		gap: 10px;
	}

	.about-col {
		display: flex;
		flex: 0 1 410px;
		flex-direction: column;
		gap: 28px;
		height: 828px;
	}

	.about-card {
		flex: 1 1 0;
		min-height: 0;
		padding: 30px;
		transition: flex 0.45s ease;
	}

	.about-card__body {
		width: 307px;
		max-width: 100%;
	}

	.about-col--narrow .about-card__body {
		width: 261px;
	}

	.about-card p {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.about-card:is(:hover, :focus-visible) {
		flex: 0 0 577px;
	}

	.about-card:is(:hover, :focus-visible) .about-card__body {
		width: 307px;
	}

	.about-card:is(:hover, :focus-visible) p {
		white-space: normal;
	}

	.about-card:is(:hover, :focus-visible) .about-card__art {
		right: var(--art-xr);
		bottom: var(--art-xb);
		width: var(--art-xw);
		height: var(--art-xh);
	}

	.about-col:has(.about-card:is(:hover, :focus-visible)) .about-card:not(:hover, :focus-visible) .about-card__art {
		opacity: 0;
	}
}


/******************************/
/*        06. Features        */
/******************************/
.features {
	padding-left: clamp(20px, 2.1vw, 30px);
	padding-right: clamp(20px, 2.1vw, 30px);
	overflow: hidden;
}

.features__inner {
	max-width: 1380px;
	margin: 0 auto;
}

.feature {
	position: relative;
	max-width: 1249px;
	margin: 0 auto;
}

.feature__copy {
	position: relative;
	z-index: 1;
	max-width: 721px;
}

.features__title {
	margin-top: 40px;
	color: #000;
}

.features__title span {
	color: var(--info-default);
}

.features__text {
	max-width: 601px;
	margin-top: 16px;
}

.features__available {
	margin-top: 23px;
	font-style: italic;
	font-size: 14px;
	line-height: 1.5;
	color: var(--info-default);
}

.features__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 23px;
	margin-top: 23px;
}

.btn-launch {
	display: inline-block;
	padding: 10px 15px;
	border: 1px solid #7bb5ff;
	border-radius: 10px;
	background: #2567e8;
	color: #d7d7d7;
	font-weight: 500;
	font-size: 14px;
	line-height: 21px;
	white-space: nowrap;
	transition: background-color 0.2s;
}

.btn-launch:hover {
	background: #1d55c4;
}

/* Phone with feature callouts (coordinates come from the Figma "Photo Features" group) */
.feature__visual {
	max-width: 750px;
	margin: 40px auto 0;
	aspect-ratio: 750 / 793;
}

.feature__visual .fit__stage {
	width: 750px;
	height: 793px;
}

.feature__glow {
	position: absolute;
	left: -9.5px;
	top: 49px;
	width: 722px;
	height: 679px;
	max-width: none;
	pointer-events: none;
}

.feature__phone {
	position: absolute;
	left: 167px;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 404.829px;
	height: 667.264px;
}

.feature__phone img {
	flex: none;
	width: 300.96px;
	height: 624.49px;
	max-width: none;
	object-fit: cover;
	transform: rotate(10deg);
}

.callout {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	padding: 5px 10px;
}

.callout--tight {
	padding: 5px;
}

.callout__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 4px 35px 5px rgba(175, 192, 235, 0.1);
}

.callout__icon > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 9px;
}

.callout__icon img {
	width: 23px;
	height: 23px;
	object-fit: contain;
}

.callout p {
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.28px;
	text-align: center;
	color: var(--text-body);
}

.callout strong {
	font-weight: 700;
}

.callout-arrow {
	position: absolute;
}

.callout-arrow img {
	position: absolute;
	left: -0.11px;
	top: 0;
	width: calc(100% + 0.11px);
	height: 100%;
	max-width: none;
}

@media (min-width: 1300px) {
	.feature {
		height: 931px;
	}

	.feature__visual {
		position: absolute;
		left: 499px;
		top: 139px;
		width: 750px;
		margin: 0;
	}
}

/* Phones: stack the callouts under the phone instead of shrinking them */
@media (max-width: 699px) {
	.feature__visual {
		aspect-ratio: auto;
	}

	.feature__visual .fit__stage {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 28px 12px;
		width: auto;
		height: auto;
		transform: none;
	}

	.feature__glow {
		left: 50%;
		top: 0;
		width: 140%;
		height: auto;
		transform: translateX(-50%);
	}

	.feature__phone {
		position: relative;
		left: auto;
		grid-column: 1 / -1;
		width: 100%;
		height: auto;
		aspect-ratio: 404.829 / 667.264;
	}

	.feature__phone img {
		width: 74.3%;
		height: auto;
	}

	.callout {
		position: relative;
		left: auto !important;
		top: auto !important;
		padding: 0;
	}

	.callout p {
		width: auto !important;
		line-height: 1.2;
	}

	.callout-arrow {
		display: none;
	}
}

/* Explore the App Experience */
.screens {
	margin-top: 57px;
	text-align: center;
}

.screens__text {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--text-body);
}

.screens__viewport {
	margin-top: 72px;
	overflow-x: auto;
}

.screens__track {
	display: flex;
	width: max-content;
}

.screens__track li {
	margin-right: 40px;
}

.screens__track img {
	width: 272px;
	height: 564px;
	object-fit: cover;
}

.screens__track.is-animated {
	animation: screens-scroll 45s linear infinite;
}

.screens__viewport:has(.is-animated) {
	overflow: hidden;
}

.screens__viewport:hover .screens__track {
	animation-play-state: paused;
}

@keyframes screens-scroll {
	to { transform: translateX(-50%); }
}

@media (max-width: 767px) {
	.screens__viewport {
		margin-top: 40px;
	}

	.screens__track li {
		margin-right: 20px;
	}

	.screens__track img {
		width: 204px;
		height: 423px;
	}
}


/******************************/
/*       07. Statistics       */
/******************************/
.stats__inner {
	max-width: 1257px;
}

.stats__title {
	margin-top: 40px;
	line-height: 1;
	letter-spacing: 0.02em;
}

.stats__text {
	max-width: 739px;
	margin-top: 21px;
}

.stats__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 75px;
}

.stat-box {
	position: relative;
	padding: 29px;
	border: 0.5px solid var(--gray-300);
	border-radius: 5px;
	overflow: hidden;
}

.stat-box__title {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-headings);
}

.stat-box__text {
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-body);
}

.stat-box__map {
	width: 481px;
	height: auto;
	margin: 50px 0 0 35px;
}

.legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 25px;
	margin-top: 20px;
}

.legend li {
	display: flex;
	align-items: center;
	gap: 25px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-body);
}

.legend span {
	width: 25px;
	height: 25px;
	border-radius: 3px;
}

/* Complaint by State */
.bar-chart {
	--label-w: 50px;
	--track-end: 12.5px;
	position: relative;
	height: 330px;
	margin: 70px 0 0 -9px;
}

.bar-chart__grid {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--label-w) + 30px);
	right: var(--track-end);
}

.bar-chart__grid span {
	position: absolute;
	top: 0;
	width: 40px;
	padding-top: 312px;
	transform: translateX(-50%);
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: var(--text-body);
}

.bar-chart__grid span::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 309px;
	background: #ecedee;
}

.bar-chart__rows {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.bar-chart__rows li {
	display: grid;
	grid-template-columns: var(--label-w) minmax(0, 1fr);
	align-items: center;
	column-gap: 30px;
	padding-right: var(--track-end);
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-body);
}

.bar-chart__track {
	display: flex;
	align-items: center;
	gap: 15px;
	white-space: nowrap;
}

.bar-chart__track--wide {
	gap: 25px;
}

.bar-chart__bar {
	flex: none;
	height: 9px;
	border-radius: 10px;
}

/* Gender Based Violence Support Gap */
.gbv {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 8px;
}

.gbv-chart {
	--label-w: 140px;
	position: relative;
	padding: 54px 0 80px;
}

.gbv-chart__grid {
	position: absolute;
	top: 32px;
	left: var(--label-w);
	right: 0;
}

.gbv-chart__grid span {
	position: absolute;
	top: 0;
	width: 60px;
	padding-top: 303px;
	transform: translateX(-50%);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.5;
	text-align: center;
	color: var(--text-body);
}

.gbv-chart__grid span::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 282px;
	background: var(--border-primary);
}

.gbv-chart__rows {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 35px;
}

.gbv-chart__rows li {
	display: grid;
	grid-template-columns: var(--label-w) minmax(0, 1fr);
	align-items: start;
	min-height: 60px;
}

.gbv-chart__label {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding-right: 12px;
}

.gbv-chart__label strong {
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	color: var(--text-headings);
}

.gbv-chart__label span {
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-body);
}

.gbv-chart__track span {
	display: block;
	height: 60px;
	border-radius: 0 10px 10px 0;
	background: var(--info-600);
}

.insights {
	position: relative;
	padding: 28px 10px 30px;
	border: 1px solid var(--border-primary);
	border-radius: 10px;
}

.insights h4 {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.5;
	color: var(--info-600);
}

.insights ul {
	display: flex;
	flex-direction: column;
	gap: 11px;
	max-width: 199px;
	margin-top: 53px;
}

.insights li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.insights__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	border-radius: 5px;
	background: #8085ff;
}

.insights__icon img {
	width: 14px;
	height: 14px;
}

.insights p {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 156px;
	font-size: 10px;
	line-height: 1.5;
	color: var(--text-body);
}

.insights strong {
	font-weight: 500;
	font-size: 12px;
	color: var(--text-headings);
}

@media (min-width: 768px) {
	.gbv-chart {
		--label-w: 260px;
	}
}

@media (min-width: 1100px) {
	.stat-box--gbv {
		height: 485px;
		padding-right: 20px;
	}

	.gbv {
		grid-template-columns: minmax(0, 1fr) 227px;
		column-gap: 40.5px;
	}

	.gbv-chart {
		--label-w: 353px;
		padding-bottom: 0;
	}

	.insights {
		height: 350px;
	}
}

@media (min-width: 1300px) {
	.stats__grid {
		grid-template-columns: repeat(2, minmax(0, 620px));
	}

	.stat-box--map,
	.stat-box--bars {
		height: 559px;
	}

	.stat-box--gbv {
		grid-column: 1 / -1;
	}

	.legend {
		position: absolute;
		left: 468px;
		top: 375px;
		flex-direction: column;
		width: 147px;
		margin: 0;
	}
}

@media (max-width: 767px) {
	.stat-box {
		padding: 20px 16px;
	}

	.stat-box__map {
		margin: 30px auto 0;
	}

	.bar-chart {
		--track-end: 48px;
		margin: 40px 0 0;
	}

	.gbv-chart__grid span {
		width: 40px;
		padding-top: 290px;
		font-size: 12px;
	}

	.gbv-chart__label strong {
		font-size: 13px;
	}

	.gbv-chart__label span {
		font-size: 10px;
	}

	.gbv-chart {
		padding-bottom: 50px;
	}
}


/******************************/
/*        08. Contact         */
/******************************/
.contact {
	padding-top: 70px;
	background: var(--page-bg);
}

.contact__inner {
	max-width: calc(1279px + 2 * clamp(20px, 5.6vw, 81px));
	margin: 0 auto;
	padding: 0 clamp(20px, 5.6vw, 81px);
}

.contact__top {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.contact__intro {
	max-width: 591px;
}

.contact__title {
	margin-top: 40px;
	font-family: var(--font-display);
	font-weight: 700;
	font-variation-settings: "opsz" 14;
	font-size: clamp(24px, 3vw, 30px);
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: #000;
}

.contact__text {
	max-width: 576px;
	margin-top: 30px;
}

.email-card {
	display: flex;
	align-items: flex-start;
	width: 100%;
	max-width: 670px;
	min-height: 337px;
	padding-top: 37px;
	border-radius: 10px;
	background: #e0ecfc;
}

.email-card__art {
	flex: none;
	width: 293px;
	height: 263px;
}

.email-card__body {
	width: 228px;
	margin: 44px 0 0 45px;
}

.email-card h3 {
	font-weight: 500;
	font-size: 24px;
	line-height: 1.5;
	color: #000;
}

.email-card__body > p {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body);
}

.btn-email {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 10px 30px;
	border-radius: 5px;
	background: var(--info-600);
	color: #fff;
	font-weight: 500;
	font-size: 10px;
	line-height: 24px;
	white-space: nowrap;
	transition: background-color 0.2s;
}

.btn-email:hover {
	background: #000580;
}

.email-card__body > .email-card__note {
	margin-top: 12px;
	font-style: italic;
}

.contact-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 23px;
	margin-top: 40px;
}

.contact-card {
	min-height: 239px;
	padding: 29px 18px;
	border: 1px solid var(--border-primary);
	border-radius: 10px;
	background: #fff;
}

.contact-card__icon {
	display: inline-flex;
	padding: 10px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	background: #fff;
}

.contact-card__icon img,
.contact-card__icon svg {
	width: 24px;
	height: 24px;
}

.contact-card h3 {
	margin-top: 12px;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.5;
	color: #000;
}

.contact-card > p,
.contact-card > a {
	display: block;
	margin-top: 15px;
	font-size: 16px;
	line-height: 24px;
	color: #333;
	overflow-wrap: anywhere;
}

.contact-card > a {
	font-style: italic;
	color: var(--info-400);
	text-decoration: underline;
}

.contact-card > .contact-card__note {
	margin-top: 10px;
	line-height: 1.5;
}

@media (min-width: 700px) and (max-width: 1199px) {
	.contact-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.contact__top {
		flex-direction: row;
		justify-content: space-between;
		gap: 18px;
	}

	.email-card {
		flex: none;
		width: 670px;
	}

	.contact-cards {
		display: flex;
	}

	.contact-card {
		flex: 0 1 444px;
		height: 239px;
	}

	.contact-card--narrow {
		flex: 1 1 0;
	}
}

@media (max-width: 699px) {
	.email-card {
		flex-direction: column;
		align-items: center;
		padding: 24px 20px 32px;
		text-align: center;
	}

	.email-card__art {
		width: 220px;
		height: auto;
	}

	.email-card__body {
		width: auto;
		margin: 16px 0 0;
	}
}


/******************************/
/*         09. Footer         */
/******************************/
.site-footer {
	margin-top: 55px;
	padding: 67px clamp(20px, 7vw, 100px) 20px;
	background: linear-gradient(180.55deg, #5b5673 1.86%, #262431 98.14%);
	color: #fff;
}

.site-footer__inner {
	max-width: 1240px;
	margin: 0 auto;
}

.site-footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

.site-footer h4 {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 27px;
}

.site-footer__brand {
	max-width: 318px;
}

.footer-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 283px;
	height: 74px;
}

.footer-logo__mark {
	width: 73.883px;
	height: 73.714px;
}

.footer-logo__word {
	position: relative;
	width: 105.461px;
	height: 45.62px;
}

.footer-logo__word img {
	position: absolute;
	width: auto;
	height: auto;
	max-width: none;
}

.site-footer__brand > p {
	margin-top: 20px;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 17px;
}

.site-footer__apps {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-top: 20px;
}

.site-footer__apps img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.site-footer__pages ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	line-height: 17px;
}

.site-footer__pages a:hover,
.site-footer__bullet a:hover {
	opacity: 0.8;
}

.site-footer__links {
	width: 199px;
}

.site-footer__bullet {
	position: relative;
	margin-top: 18px;
	padding-left: 17px;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 22px;
	color: #f1f1f8;
}

.site-footer__bullet::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7.5px;
	width: 7px;
	height: 7px;
	background: #00c9db;
}

.site-footer__bullet a {
	color: #00c9db;
	text-decoration: underline;
}

.site-footer__social {
	max-width: 243px;
}

.site-footer__social > p {
	margin-top: 18px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	line-height: 17px;
}

.site-footer__social > p:last-child {
	margin-top: 10px;
}

.social-links {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}

.social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 60px;
	background: #fff;
}

.social-links img {
	width: 20px;
	height: 20px;
	object-fit: cover;
}

.social-links .social-links__fb {
	width: 26px;
	height: 26px;
	max-width: none;
	clip-path: inset(3px);
}

.social-links .social-links__in {
	height: 19px;
}

.social-links__ig {
	position: relative;
	width: 20px;
	height: 18px;
	overflow: hidden;
}

.social-links__ig img {
	position: absolute;
	left: -11.54%;
	top: 0;
	width: 123.08%;
	height: 100%;
	max-width: none;
}

.site-footer__copyright {
	margin-top: 73px;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	color: rgba(241, 241, 248, 0.6);
}

@media (min-width: 640px) and (max-width: 1199px) {
	.site-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.site-footer__cols {
		display: flex;
		align-items: flex-start;
		gap: 136px;
	}

	.site-footer__brand {
		width: 318px;
	}

	.site-footer__pages {
		width: 72px;
	}

	.site-footer__social {
		width: 243px;
	}

	.social-links {
		justify-content: center;
	}
}


/******************************/
/*     10. Reduced Motion     */
/******************************/
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}