/*
 * Fulfill360 — everything Tailwind utilities can't express.
 * Loaded before tailwind.css, so keep selectors specific enough to survive
 * Preflight (a single class beats Preflight's bare element selectors).
 */

/* ---------------------------------------------------------------- Fonts -- */

@font-face {
	font-family: 'Geist Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('../fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Geist Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('../fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------ Document -- */

html {
	scroll-behavior: smooth;
}

html,
body.f360 {
	font-family: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	background-color: #f5f5f5;
}

/* The navbar is absolutely positioned; a stray wide child must never widen the
   document on a phone. */
body.f360 {
	overflow-x: hidden;
}

/* --------------------------------------------------------- Reveal ------- */

.f360-reveal {
	opacity: 1;
}

html.f360-js .f360-reveal {
	opacity: 0;
	transform: translateY(var(--rv-dist, 24px));
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0ms),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0ms);
	will-change: opacity, transform;
}

html.f360-js .f360-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

/* Inside the Elementor editor nothing should ever be invisible. */
body.elementor-editor-active .f360-reveal,
body.elementor-editor-preview .f360-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* ------------------------------------------------ Scroll-fill headline -- */

.f360-scroll-highlight span {
	color: rgba(0, 0, 0, 0.22);
	transition: color 0.35s ease-out;
}

/* -------------------------------------------------------- Marquees ------ */

@keyframes f360-partners-marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.f360-partners-track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: f360-partners-marquee 30s linear infinite;
}

@keyframes f360-brands-marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* --------------------------------------------------------- Carousel ----- */

.f360-no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.f360-no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* ------------------------------------------------------------- Quiz ----- */

@keyframes f360-quiz-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.quiz-fade {
	animation: f360-quiz-fade-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.f360-quiz-lock {
	overflow: hidden;
}

/* ------------------------------------------------- Elementor spacing ---- */
/*
 * Every section widget renders its own <section> with its own padding, exactly
 * like the React build. Elementor's wrappers must add nothing on top.
 */

body.f360 .elementor-section,
body.f360 .elementor-container,
body.f360 .elementor-column,
body.f360 .elementor-column-wrap,
body.f360 .elementor-widget-wrap,
body.f360 .elementor-widget,
body.f360 .elementor-widget-container {
	margin: 0;
	padding: 0;
	max-width: none;
	width: 100%;
}

body.f360 .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

/* Elementor 3.x flex containers. */
body.f360 .e-con,
body.f360 .e-con-inner {
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

body.f360 .elementor-element {
	max-width: none;
}

/* Editor chrome shouldn't reflow a full-bleed layout. */
body.elementor-editor-active .f360-reveal,
body.elementor-editor-active .elementor-widget {
	overflow: visible;
}

/* ------------------------------------------------------------ Prose ----- */
/* Only used by plain WP pages/posts, never by the Elementor marketing pages. */

.f360-prose {
	color: rgba(0, 0, 0, 0.7);
	font-size: 1rem;
	line-height: 1.75;
}

.f360-prose > * + * {
	margin-top: 1.25em;
}

.f360-prose h1,
.f360-prose h2,
.f360-prose h3,
.f360-prose h4 {
	color: #000;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin-top: 2em;
	margin-bottom: 0.6em;
}

.f360-prose h2 {
	font-size: 1.875rem;
}

.f360-prose h3 {
	font-size: 1.375rem;
}

.f360-prose h4 {
	font-size: 1.125rem;
}

.f360-prose a {
	color: #2b2644;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.f360-prose a:hover {
	color: #000;
}

.f360-prose strong {
	color: #000;
	font-weight: 500;
}

.f360-prose ul,
.f360-prose ol {
	padding-left: 1.25em;
}

.f360-prose ul {
	list-style: disc;
}

.f360-prose ol {
	list-style: decimal;
}

.f360-prose li + li {
	margin-top: 0.4em;
}

.f360-prose blockquote {
	border-left: 2px solid #2b2644;
	padding-left: 1.25em;
	color: rgba(0, 0, 0, 0.6);
	font-style: normal;
}

.f360-prose img {
	border-radius: 1rem;
	height: auto;
	max-width: 100%;
}

.f360-prose code {
	background: #f5f5f5;
	border-radius: 0.35em;
	font-size: 0.9em;
	padding: 0.15em 0.4em;
}

.f360-prose pre {
	background: #151221;
	border-radius: 1rem;
	color: #fff;
	overflow-x: auto;
	padding: 1.25rem;
}

.f360-prose pre code {
	background: none;
	padding: 0;
}

.f360-prose table {
	display: block;
	overflow-x: auto;
	width: 100%;
}

/* -------------------------------------------------------- Pagination --- */

.f360-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.f360-pagination .page-numbers {
	align-items: center;
	background: #fff;
	border-radius: 9999px;
	color: rgba(0, 0, 0, 0.6);
	display: inline-flex;
	font-size: 0.875rem;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.5rem 1rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.f360-pagination .page-numbers:hover,
.f360-pagination .page-numbers.current {
	background: #000;
	color: #fff;
}

.f360-pagination .screen-reader-text {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ------------------------------------------------- Reduced motion ------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	html.f360-js .f360-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.quiz-fade {
		animation: none;
	}

	.f360-partners-track,
	.f360-brands-row {
		animation: none !important;
	}

	.f360-scroll-highlight span {
		color: #000;
		transition: none;
	}
}