/*
 * foundation.css — shared marketing-page primitives (.ft-*).
 *
 * Extracted from pages/index.css (the homepage, which established the site
 * standard: fluid width → fixed cap, centered; no 4K upscaling). Loaded
 * GLOBALLY from nuxt.config.ts at tagPriority 4 — after core/header/footer,
 * before every page's own stylesheet (added via useHead), so page CSS can
 * always override these defaults by source order.
 *
 * Contains ONLY page-agnostic primitives: tokens, shell/section, heading trio,
 * buttons, two-column splits, card grid anatomy, feature list, timeline, store
 * badges, and their shared responsive steps. Homepage-specific rules (hero
 * carousel, products row, section background modifiers) stay in
 * pages/index.css; every other page keeps its genuinely unique rules in its
 * own sheet.
 *
 * Figma tokens (source of truth):
 *   Blue_Main #2DA7FA · Blue_Subtle #EDF7FF · Text #333536 · Muted #737A82
 *   Title/Display 36/44 · Title/Title 24/30 · Body/Lead 16/22 · Label/Button 16
 */

/* Tokens live on :root (not .ft-main) so sidebars, cards and standalone
 * surfaces outside a .ft-main can consume them too. */
:root {
	--ft-blue: #2da7fa;
	--ft-blue-subtle: #edf7ff;
	--ft-text: #333536;
	--ft-muted: #737a82;
	--ft-border: #e4e4e4;
}

.ft-main {
	--ft-shell: min(1480px, 100% - 80px);
	color: var(--ft-text);
	font-family: "Montserrat", sans-serif;
}

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

.ft-shell {
	width: var(--ft-shell);
	margin-inline: auto;
}

/* ---- Sections ---- */
.ft-section {
	padding: 80px 0;
}

/* ---- Headings ---- */
.ft-heading {
	display: grid;
	gap: 8px;
}

.ft-eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ft-text);
}

.ft-title {
	margin: 0;
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
	color: var(--ft-text);
}

.ft-accent {
	color: var(--ft-blue);
}

.ft-lead {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--ft-muted);
}

/* ---- Buttons ---- */
.ft-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: fit-content;
	padding: 12px 32px;
	border: 1.5px solid transparent;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.ft-btn i {
	font-size: 16px;
}

.ft-btn--primary {
	background: var(--ft-blue);
	color: #f6f6f6;
}

.ft-btn--outline {
	padding: 8px 24px;
	background: transparent;
	color: var(--ft-blue);
	border-color: var(--ft-blue);
}

/* ---- Card grid (product/feature cards) ---- */
.ft-cards {
	display: grid;
	grid-template-columns: repeat(3, 240px);
	justify-content: center;
	gap: 120px;
}

.ft-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	height: 100%;
}

/* Pin every card's button to a common baseline (Figma: all "Explore Now"
 * buttons sit at the same top). The cards already stretch to equal height as
 * grid items, so margin-top:auto keeps the buttons aligned even when one
 * description wraps to a different number of lines. */
.ft-card .ft-btn {
	margin-top: auto;
}

.ft-card__img {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 190px;
}

.ft-card__img img {
	max-height: 190px;
	object-fit: contain;
}

.ft-card__info {
	display: grid;
	gap: 8px;
	text-align: center;
}

.ft-card__info h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--ft-text);
}

.ft-card__info p {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--ft-muted);
}

/* ---- Split layouts (two-column content ↔ media) ---- */
/* Figma side margins: the split content/media pin to a 15.625% gutter per side
 * (300px on the 1920 design). max-width 1320 = 1920 − 2×300; space-between
 * pins the text to the left gutter and the media to the right gutter, with the
 * inter-column gap absorbing the slack (Figma's gap varies per section). */
.ft-split {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 72px;
	max-width: 1320px;
	margin-inline: auto;
}

.ft-split__content {
	flex: 1 1 460px;
	max-width: 540px;
	display: grid;
	gap: 32px;
}

.ft-split__media {
	flex: 1 1 460px;
	max-width: 640px;
}

.ft-split__media img {
	display: block;
	width: 100%;
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(20, 33, 50, 0.08);
}

/* ---- Feature list ---- */
.ft-features {
	display: grid;
	gap: 16px;
}

.ft-feature__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ft-feature__head img {
	width: 22px;
	height: 22px;
}

.ft-feature__head h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--ft-text);
}

.ft-feature p {
	margin: 8px 0 0;
	padding-left: 30px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--ft-muted);
}

/* ---- Timeline (expand-one-step accordion) ---- */
.ft-timeline {
	display: grid;
	gap: 16px;
}

.ft-tl {
	display: grid;
	padding: 8px 0 8px 24px;
	border-left: 3px solid var(--ft-border);
	transition: border-left-color 0.35s ease;
}

.ft-tl.is-active {
	border-left-color: var(--ft-blue);
}

.ft-tl__head {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.ft-tl__head img {
	width: 24px;
	height: 24px;
}

.ft-tl__head h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--ft-text);
}

/* Collapsible description — animate height via grid-template-rows (0fr → 1fr) */
.ft-tl__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease;
}

.ft-tl.is-active .ft-tl__body {
	grid-template-rows: 1fr;
}

.ft-tl p {
	overflow: hidden;
	min-height: 0;
	margin: 0;
	padding-left: 32px;
	padding-top: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--ft-muted);
	opacity: 0;
	transition: opacity 0.3s ease, padding-top 0.4s ease;
}

.ft-tl.is-active p {
	padding-top: 8px;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ft-tl,
	.ft-tl__body,
	.ft-tl p {
		transition: none;
	}
}

/* ---- App-store badges ---- */
.ft-stores {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.ft-stores img {
	height: 40px;
}

/* ---- Responsive ---- */
/* The two-column splits use flex-wrap, so below ~1072px (shell < the
 * 460+72+460 two-column basis) each half wraps onto its own row but keeps its
 * desktop max-width — leaving the media stuck to the left with a large empty
 * gap on the right. Switch the splits to the centered, image-on-top
 * single-column mobile layout a touch before that wrap point. */
@media (max-width: 1080px) {
	.ft-split {
		flex-direction: column;
		gap: 32px;
	}

	.ft-split__content,
	.ft-split__media {
		/* In column mode the flex-basis becomes a VERTICAL basis — reset it so
		 * each half takes its natural height instead of inflating to 460px. */
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
	}

	/* Figma mobile: every split section leads with its image on top */
	.ft-split__media {
		order: -1;
	}
}

@media (max-width: 990px) {
	.ft-section {
		padding: 64px 0;
	}
}

@media (max-width: 680px) {
	/* Tighter vertical rhythm so sections sit close together (Figma mobile) */
	.ft-section {
		padding: 48px 0;
	}
}

/* ---- Extra-small phones (down to the 325px min target) ----
 * The default shell reserves 40px of padding EACH side (--ft-shell: 100% - 80px).
 * At ~325px that leaves only ~245px of content, which squeezes copy and forces
 * store-badge rows to wrap. Halve the side padding here. */
@media (max-width: 380px) {
	.ft-main {
		--ft-shell: min(1480px, 100% - 40px);
	}

	.ft-stores {
		gap: 16px;
	}
}