/* =========================================================================
 * Fetch Fancy — Global Styles
 * Conservative, site-wide custom properties + reset helpers.
 * Anything heavier lives in rewards.css.
 * ========================================================================= */

:root {
	/* Palette --------------------------------------------------------- */
	--ff-ink:         #0A1929;   /* near-black navy */
	--ff-ink-2:       #1E293B;
	--ff-ink-soft:    #475569;
	--ff-paper:       #FFFFFF;
	--ff-cream:       #FFF8EE;
	--ff-cream-deep:  #F5ECDC;
	--ff-line:        rgba(10, 25, 41, 0.10);

	--ff-brand:       #22D3EE;   /* echoes existing teal headline */
	--ff-brand-deep:  #0891B2;
	--ff-lime:        #B6E445;   /* matches brand logo pin */
	--ff-gold:        #FBBF24;
	--ff-coral:       #F97316;
	--ff-rose:        #E11D48;

	/* Type ------------------------------------------------------------ */
	--ff-font-display: "Archivo Black", "Montserrat", system-ui, sans-serif;
	--ff-font-body:    "Montserrat", system-ui, -apple-system, sans-serif;

	/* Rhythm ---------------------------------------------------------- */
	--ff-radius:      14px;
	--ff-radius-lg:   24px;
	--ff-shadow-sm:   0 2px 6px rgba(10,25,41,.06), 0 1px 2px rgba(10,25,41,.04);
	--ff-shadow-md:   0 12px 30px -10px rgba(10,25,41,.18);
	--ff-shadow-xl:   0 30px 60px -20px rgba(10,25,41,.30);

	--ff-ease-out:    cubic-bezier(.16,.84,.34,1);
}

/* =========================================================================
 * Below: utility helpers that any future Fetch Fancy page can reuse.
 * Scoped to .ff to avoid bleeding into Elementor pages.
 * ========================================================================= */
.ff,
.ff * {
	box-sizing: border-box;
}

.ff {
	font-family: var(--ff-font-body);
	color: var(--ff-ink);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ff h1, .ff h2, .ff h3, .ff h4 {
	font-family: var(--ff-font-display);
	color: var(--ff-ink);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 .4em;
}

.ff p { margin: 0 0 1em; }
.ff p:last-child { margin-bottom: 0; }

.ff a { color: inherit; }

.ff img { max-width: 100%; height: auto; display: block; }

.ff-container {
	width: min(1180px, 100% - 2rem);
	margin-inline: auto;
}

.ff-eyebrow {
	font-family: var(--ff-font-body);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ff-brand-deep);
	margin: 0 0 .9rem;
}
.ff-eyebrow--light { color: var(--ff-lime); }

/* Buttons ---------------------------------------------------------------- */
.ff-btn {
	--btn-bg:    var(--ff-ink);
	--btn-fg:    #fff;
	--btn-bd:    var(--ff-ink);
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .85rem 1.4rem;
	border-radius: 999px;
	font-family: var(--ff-font-body);
	font-weight: 700;
	font-size: .98rem;
	letter-spacing: .01em;
	text-decoration: none;
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 2px solid var(--btn-bd);
	cursor: pointer;
	transition: transform .25s var(--ff-ease-out), background .25s ease, color .25s ease, box-shadow .25s ease;
	will-change: transform;
}
.ff-btn:hover { transform: translateY(-2px); box-shadow: var(--ff-shadow-md); }
.ff-btn:active { transform: translateY(0); }

.ff-btn--primary {
	--btn-bg: linear-gradient(135deg, var(--ff-lime) 0%, var(--ff-brand) 100%);
	--btn-fg: var(--ff-ink);
	--btn-bd: transparent;
	box-shadow: 0 8px 22px -8px rgba(34,211,238,.6);
}
.ff-btn--primary:hover { box-shadow: 0 18px 35px -10px rgba(34,211,238,.7); }

.ff-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--ff-ink);
	--btn-bd: var(--ff-ink);
}
.ff-btn--ghost-light {
	--btn-fg: #fff;
	--btn-bd: rgba(255,255,255,.6);
}
.ff-btn--ghost:hover { background: var(--ff-ink); color: #fff; }
.ff-btn--ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }

.ff-btn--xl {
	padding: 1.05rem 1.8rem;
	font-size: 1.05rem;
}

/* Reveal-on-scroll ------------------------------------------------------- */
.ff-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s var(--ff-ease-out), transform .8s var(--ff-ease-out);
	will-change: opacity, transform;
}
.ff-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.ff-reveal { opacity: 1; transform: none; transition: none; }
	.ff * { animation: none !important; transition: none !important; }
}