/*
 * FreeFlow Brand Stylesheet
 * Implements the FreeFlow Design System on top of the Astra theme.
 *
 * Source of truth: marketing-assets/FreeFlow Design System/ (tokens/, readme.md)
 *   - Display / headlines -> Baloo 2 (substitute for proprietary Arial Rounded MT Bold)
 *   - Body / UI           -> CoFo Sans (official, trial weights)
 *   - Warm, soft, rounded; Deep-Blue-tinted shadows; orange CTAs; never black bg.
 *
 * NOTE: CoFo Sans files are TRIAL weights — swap for licensed production files
 * before public launch. Baloo 2 is enqueued from Google Fonts in freeflow-brand.php.
 */

/* ==========================================================================
   0. Webfonts — CoFo Sans (official, trial). Paths are relative to this file.
   ========================================================================== */

@font-face {
	font-family: 'CoFo Sans';
	src: url('assets/fonts/CoFoSans-Light.otf') format('opentype');
	font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'CoFo Sans';
	src: url('assets/fonts/CoFoSans-Regular.otf') format('opentype');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'CoFo Sans';
	src: url('assets/fonts/CoFoSans-Italic.otf') format('opentype');
	font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
	font-family: 'CoFo Sans';
	src: url('assets/fonts/CoFoSans-Medium.otf') format('opentype');
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'CoFo Sans';
	src: url('assets/fonts/CoFoSans-MediumItalic.otf') format('opentype');
	font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
	font-family: 'CoFo Sans';
	src: url('assets/fonts/CoFoSans-Bold.otf') format('opentype');
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'CoFo Sans';
	src: url('assets/fonts/CoFoSans-Black.otf') format('opentype');
	font-weight: 900; font-style: normal; font-display: swap;
}

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
	/* ---- Core palette --------------------------------------------------- */
	--ff-orange:            #FF8C55; /* Bird of Paradise — primary */
	--ff-cultured:          #FBF6F3; /* Cultured — secondary, calm */
	--ff-deep-blue:         #021F28; /* Deep Blue — accent, ink */

	/* ---- Orange tints & shades ----------------------------------------- */
	--ff-orange-tint-light: #FFE7DA;
	--ff-orange-tint-mid:   #FFD1B8;
	--ff-orange-shade:      #CC6E3D;

	/* ---- Blue shades & neutrals ---------------------------------------- */
	--ff-blue-mid:          #0E2E37;
	--ff-blue-light:        #364E57;
	--ff-off-white:         #FEFBF8; /* page background */
	--ff-white:             #FFFFFF;

	/* ---- Support palette (graphics & social) --------------------------- */
	--ff-green:             #24A975;
	--ff-yellow:            #EFCB68;
	--ff-peach:             #FFB8A1;
	--ff-sky:               #8FD4E3;
	--ff-green-tint:        #DFF3EA;
	--ff-yellow-tint:       #FBF1D2;
	--ff-sky-tint:          #E3F4F8;

	/* ---- Gradients ------------------------------------------------------ */
	--ff-gradient-soft:  linear-gradient(135deg, #FF8C55 0%, #FFE7DA 100%);
	--ff-gradient-hero:  linear-gradient(135deg, #FF8C55 0%, #EFCB68 100%);
	--ff-gradient-fresh: linear-gradient(135deg, #FF8C55 0%, #24A975 100%);
	--ff-gradient-calm:  linear-gradient(135deg, #24A975 0%, #8FD4E3 100%);

	/* ---- Semantic surfaces & text -------------------------------------- */
	--surface-page:        var(--ff-off-white);
	--surface-card:        var(--ff-white);
	--surface-muted:       var(--ff-cultured);
	--surface-input:       var(--ff-orange-tint-light);
	--surface-tint:        var(--ff-orange-tint-light);
	--surface-ink:         var(--ff-deep-blue);
	--surface-ink-soft:    var(--ff-blue-mid);

	--text-heading:        var(--ff-deep-blue);
	--text-body:           var(--ff-blue-mid);
	--text-muted:          var(--ff-blue-light);
	--text-on-dark:        var(--ff-cultured);
	--text-on-dark-muted:  #97AAB1;
	--text-on-brand:       var(--ff-white);

	/* ---- Brand / interactive ------------------------------------------- */
	--brand:               var(--ff-orange);
	--brand-hover:         var(--ff-orange-shade);
	--brand-soft:          var(--ff-orange-tint-light);
	--link:                var(--ff-orange);
	--link-hover:          var(--ff-orange-shade);

	/* ---- Lines (used sparingly — tone over hard borders) --------------- */
	--border-subtle:       #F0E4DC;
	--border-warm:         var(--ff-orange-tint-mid);
	--border-on-dark:      rgba(251, 246, 243, 0.16);
	--focus-ring:          rgba(255, 140, 85, 0.45);

	/* ---- Typography ----------------------------------------------------- */
	--font-display: 'Baloo 2', 'Arial Rounded MT Bold', 'Nunito', 'Varela Round', system-ui, sans-serif;
	--font-body:    'CoFo Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;

	--fw-regular:   400;
	--fw-medium:    500;
	--fw-semibold:  600;
	--fw-bold:      700;
	--fw-extra:     800;

	--text-display: clamp(2.75rem, calc(1.6rem + 5vw), 4.5rem);
	--text-h1:      clamp(2.1rem, calc(1.3rem + 3.4vw), 3.25rem);
	--text-h2:      clamp(1.7rem, calc(1.2rem + 2.2vw), 2.5rem);
	--text-h3:      clamp(1.35rem, calc(1.1rem + 1.1vw), 1.75rem);
	--text-h4:      clamp(1.15rem, calc(1rem + 0.5vw), 1.35rem);
	--text-lead:    clamp(1.125rem, calc(1rem + 0.6vw), 1.3rem);
	--text-body-lg: 1.125rem;
	--text-base:    1rem;
	--text-sm:      0.875rem;
	--text-xs:      0.75rem;
	--text-eyebrow: 0.8125rem;

	--lh-tight:     1.1;
	--lh-snug:      1.25;
	--lh-body:      1.65;
	--ls-display:  -0.02em;
	--ls-heading:  -0.01em;
	--ls-eyebrow:   0.12em;

	/* ---- Spacing & layout ---------------------------------------------- */
	--space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
	--space-5: 1.5rem;  --space-6: 2rem;    --space-7: 2.5rem;  --space-8: 3rem;
	--space-9: 4rem;    --space-10: 5rem;   --space-12: 6rem;

	--content-max:    1200px;
	--content-narrow: 760px;
	--section-pad:    clamp(3.5rem, 8vw, 6.5rem);
	--gutter:         clamp(1.25rem, 4vw, 2rem);

	/* ---- Radius --------------------------------------------------------- */
	--radius-xs: 6px;  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px;
	--radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px;

	/* ---- Shadows (Deep-Blue tinted, warm & soft) ----------------------- */
	--shadow-xs:  0 1px 2px rgba(2, 31, 40, 0.05);
	--shadow-sm:  0 2px 8px rgba(2, 31, 40, 0.05);
	--shadow-md:  0 8px 24px rgba(2, 31, 40, 0.07);
	--shadow-lg:  0 18px 48px rgba(2, 31, 40, 0.10);
	--shadow-xl:  0 32px 70px rgba(2, 31, 40, 0.14);
	--shadow-brand:    0 6px 20px rgba(255, 140, 85, 0.32);
	--shadow-brand-lg: 0 12px 30px rgba(255, 140, 85, 0.40);

	/* ---- Motion --------------------------------------------------------- */
	--ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
	--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast:  0.18s;
	--dur-base:  0.25s;
	--dur-slow:  0.45s;

	/* ---- Astra global palette mapping (so theme + blocks inherit brand) - */
	--ast-global-color-0: var(--ff-orange);          /* primary CTA, links, energy */
	--ast-global-color-1: var(--ff-deep-blue);        /* headings, structure, trust */
	--ast-global-color-2: var(--ff-blue-mid);         /* body text */
	--ast-global-color-3: var(--ff-blue-light);       /* secondary text */
	--ast-global-color-4: var(--ff-off-white);        /* page background */
	--ast-global-color-5: var(--ff-cultured);         /* secondary bg, cards */
	--ast-global-color-6: var(--ff-orange-tint-light);/* input fields, highlights */
	--ast-global-color-7: var(--ff-orange-tint-mid);  /* borders, subtle accents */
	--ast-global-color-8: var(--ff-deep-blue);        /* dark section backgrounds */

	/* ---- Legacy aliases kept for existing markup ----------------------- */
	--ff-sky-blue:        var(--ff-sky);
	--ff-font-heading:    var(--font-display);
	--ff-font-body:       var(--font-body);
	--ff-section-padding: var(--section-pad);
	--ff-content-max-width: var(--content-max);
	--ff-border-radius:    var(--radius-md);
	--ff-border-radius-sm: var(--radius-sm);
	--ff-border-radius-lg: var(--radius-lg);
}

/* ==========================================================================
   2. Base Typography
   ========================================================================== */

body,
body.flavor-flavor {
	font-family: var(--font-body);
	color: var(--text-body);
	background-color: var(--surface-page);
	line-height: var(--lh-body);
	font-size: var(--text-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-archive-title,
.page-title {
	font-family: var(--font-display);
	color: var(--text-heading);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-heading);
	font-weight: var(--fw-bold);
	text-wrap: balance;
}

h1 { font-size: var(--text-h1); letter-spacing: var(--ls-display); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { margin-bottom: 1.15em; text-wrap: pretty; }

::selection { background: var(--ff-orange-tint-mid); color: var(--text-heading); }

/* Shared eyebrow / kicker label */
.ff-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	font-size: var(--text-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--brand);
}

/* ==========================================================================
   3. Links & Buttons
   ========================================================================== */

a:where(:not(.wp-block-button__link):not(.wp-element-button):not(.ast-custom-button)) {
	color: var(--link);
	transition: color var(--dur-fast) var(--ease-soft);
}

a:where(:not(.wp-block-button__link):not(.wp-element-button):not(.ast-custom-button)):hover,
a:where(:not(.wp-block-button__link):not(.wp-element-button):not(.ast-custom-button)):focus {
	color: var(--link-hover);
}

/* Primary CTA — full pill, white text always, warm orange glow */
.wp-block-button__link,
.wp-element-button,
.ast-custom-button,
.uagb-buttons-repeater,
.uagb-infobox-cta-link,
.button,
input[type="submit"],
.wpforms-submit {
	background-color: var(--brand) !important;
	color: var(--text-on-brand) !important;
	border: none !important;
	border-radius: var(--radius-pill) !important;
	padding: 14px 32px !important;
	font-family: var(--font-display);
	font-size: 16px !important;
	font-weight: var(--fw-bold);
	letter-spacing: 0;
	line-height: 1.2;
	transition: background-color var(--dur-base) var(--ease-soft),
	            transform var(--dur-base) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-soft);
	box-shadow: var(--shadow-brand);
	cursor: pointer;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.ast-custom-button:hover,
.uagb-buttons-repeater:hover,
.uagb-infobox-cta-link:hover,
.button:hover,
input[type="submit"]:hover,
.wpforms-submit:hover {
	background-color: var(--brand-hover) !important;
	color: var(--text-on-brand) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-brand-lg);
}

.wp-block-button__link:active,
.wp-element-button:active,
.button:active,
input[type="submit"]:active,
.wpforms-submit:active {
	transform: translateY(0);
	box-shadow: var(--shadow-brand);
}

/* UAG nests divs/spans inside the link — keep inner text white */
.wp-block-button__link *,
.uagb-buttons-repeater *,
.uagb-infobox-cta-link * {
	color: var(--text-on-brand) !important;
}

/* Secondary / outline button */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button {
	background-color: transparent !important;
	color: var(--text-heading) !important;
	border: 2px solid var(--text-heading) !important;
	box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-element-button:hover {
	background-color: var(--text-heading) !important;
	color: var(--ff-white) !important;
	border-color: var(--text-heading) !important;
}

/* Outline buttons on dark sections */
.ff-dark-section .wp-block-button.is-style-outline .wp-block-button__link,
.ff-dark-section .wp-block-button.is-style-outline .wp-element-button {
	color: var(--ff-white) !important;
	border-color: var(--ff-cultured) !important;
}

.ff-dark-section .wp-block-button.is-style-outline .wp-block-button__link:hover,
.ff-dark-section .wp-block-button.is-style-outline .wp-element-button:hover {
	background-color: var(--ff-cultured) !important;
	color: var(--text-heading) !important;
}

/* ==========================================================================
   4. Header & Navigation
   ========================================================================== */

.ast-primary-header-bar,
.ast-main-header-bar-alignment {
	background-color: var(--ff-white);
	box-shadow: var(--shadow-sm);
}

.ast-header-break-point .ast-primary-header-bar {
	background-color: var(--ff-white);
}

.ast-header-sections-navigation .menu-item > a,
.main-header-menu .menu-item > a {
	color: var(--text-heading);
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 15px;
	margin: 0 12px;
	transition: color var(--dur-fast) var(--ease-soft);
}

.ast-header-sections-navigation .menu-item > a:hover,
.main-header-menu .menu-item > a:hover,
.main-header-menu .current-menu-item > a {
	color: var(--brand);
}

/* Header CTA button (last nav item or custom button) — pill */
.ast-header-button-1 .ast-custom-button,
.menu-item.highlight > a {
	background-color: var(--brand);
	color: var(--ff-white);
	border-radius: var(--radius-pill);
	padding: 10px 24px;
}

/* ==========================================================================
   5. Sections & Layout
   ========================================================================== */

.ff-hero,
.wp-block-cover.ff-hero {
	padding: var(--section-pad) var(--gutter);
	background: var(--ff-gradient-soft);
	text-align: center;
}

.ff-hero-gradient { background: var(--ff-gradient-hero); }

.ff-section {
	padding: var(--section-pad) var(--gutter);
	max-width: var(--content-max);
	margin: 0 auto;
}

.ff-section-narrow { max-width: var(--content-narrow); }

/* Card-style blocks — soft tinted shadow, lift on hover */
.ff-card,
.wp-block-group.ff-card {
	background-color: var(--surface-card);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
	box-shadow: var(--shadow-md);
	transition: transform var(--dur-base) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-soft);
}

.ff-card:hover,
.wp-block-group.ff-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

/* Feature grid cards — depth via tone & soft shadow, quiet hairline */
.ff-feature-card {
	background-color: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	text-align: center;
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur-base) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-soft);
}

.ff-feature-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

/* Dark sections */
.ff-dark-section,
.wp-block-group.ff-dark-section {
	background-color: var(--surface-ink);
	color: var(--text-on-dark);
	padding: var(--section-pad) var(--gutter);
}

.ff-dark-section h1,
.ff-dark-section h2,
.ff-dark-section h3,
.ff-dark-section h4 {
	color: var(--ff-white);
}

.ff-dark-section a {
	color: var(--brand);
}

/* ==========================================================================
   6. Forms (WPForms)
   ========================================================================== */

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container textarea,
.wpforms-container select {
	background-color: var(--surface-input) !important;
	border: 1px solid var(--border-warm) !important;
	border-radius: var(--radius-sm) !important;
	padding: 12px 16px !important;
	font-family: var(--font-body);
	font-size: 16px !important;
	color: var(--text-body) !important;
	transition: border-color var(--dur-fast) var(--ease-soft),
	            box-shadow var(--dur-fast) var(--ease-soft);
}

.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
	border-color: var(--brand) !important;
	box-shadow: 0 0 0 3px var(--focus-ring) !important;
	outline: none;
}

.wpforms-container .wpforms-field-label {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	color: var(--text-heading);
	margin-bottom: 6px;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.ast-footer-overlay,
.site-footer,
.ast-small-footer {
	background-color: var(--surface-ink);
	color: var(--text-on-dark);
}

.site-footer a {
	color: var(--text-on-dark-muted);
	transition: color var(--dur-fast) var(--ease-soft);
}

.site-footer a:hover {
	color: var(--brand);
}

.site-footer .widget-title,
.ast-footer-copyright {
	color: var(--ff-white);
}

/* ==========================================================================
   8. Utility Classes (for use in Gutenberg blocks)
   ========================================================================== */

/* Background variants */
.ff-bg-cultured     { background-color: var(--surface-muted); }
.ff-bg-orange-tint  { background-color: var(--surface-tint); }
.ff-bg-page         { background-color: var(--surface-page); }
.ff-bg-gradient-hero  { background: var(--ff-gradient-hero); }
.ff-bg-gradient-soft  { background: var(--ff-gradient-soft); }
.ff-bg-gradient-fresh { background: var(--ff-gradient-fresh); }
.ff-bg-gradient-calm  { background: var(--ff-gradient-calm); }

/* Text colors */
.ff-text-orange { color: var(--brand); }
.ff-text-dark   { color: var(--text-heading); }
.ff-text-white  { color: var(--ff-white); }
.ff-text-muted  { color: var(--text-muted); }

/* Spacing helpers */
.ff-py-section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.ff-py-small   { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* Border radius */
.ff-rounded     { border-radius: var(--radius-md); }
.ff-rounded-lg  { border-radius: var(--radius-lg); }
.ff-rounded-xl  { border-radius: var(--radius-xl); }

/* Trust badge / social proof bar */
.ff-trust-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	flex-wrap: wrap;
	padding: var(--space-5) var(--space-6);
	opacity: 0.7;
}

.ff-trust-bar img {
	height: 32px;
	width: auto;
	filter: grayscale(100%);
	transition: filter var(--dur-slow) var(--ease-soft);
}

.ff-trust-bar img:hover { filter: grayscale(0%); }

/* Stats / numbers display */
.ff-stat { text-align: center; padding: var(--space-5); }

.ff-stat-number {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--fw-extra);
	color: var(--brand);
	line-height: 1;
	margin-bottom: var(--space-1);
}

.ff-stat-label {
	font-size: var(--text-sm);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
}

/* ==========================================================================
   9. Responsive Adjustments
   ========================================================================== */

@media (max-width: 921px) {
	.ff-card,
	.wp-block-group.ff-card { padding: var(--space-6); }

	.wp-block-button__link,
	.ast-custom-button,
	input[type="submit"],
	.wpforms-submit {
		padding: 12px 24px !important;
		font-size: 15px !important;
	}
}

@media (max-width: 544px) {
	.ff-hero,
	.wp-block-cover.ff-hero { padding: var(--space-8) var(--space-4); }

	.ff-card,
	.wp-block-group.ff-card {
		padding: var(--space-5);
		border-radius: var(--radius-md);
	}

	.ff-trust-bar { gap: var(--space-4); }
	.ff-trust-bar img { height: 24px; }

	.wp-block-button__link,
	.ast-custom-button,
	input[type="submit"],
	.wpforms-submit {
		width: 100% !important;
		text-align: center;
	}
}

/* ==========================================================================
   10. Accessibility & Motion
   ========================================================================== */

:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.wp-block-button__link:hover,
	.ff-card:hover,
	.ff-feature-card:hover { transform: none; }
}

/* ==========================================================================
   11. Marketing Page Layout (.ffp-*) — implements ui_kits/website
   --------------------------------------------------------------------------
   Rich landing-page components ported from the design-system UI kit:
   two-column hero + product mock, stat band, icon feature cards, numbered
   steps, dashboard mock, founder quote, dark CTA, value cards, contact grid.
   Used inside the home/about/contact block patterns (wp:html). Icons render
   via Lucide (enqueued in freeflow-brand.php).
   ========================================================================== */

.ffp { font-family: var(--font-body); color: var(--text-body); }
.ffp *, .ffp *::before, .ffp *::after { box-sizing: border-box; }
.ffp h1, .ffp h2, .ffp h3, .ffp h4 { font-family: var(--font-display); color: var(--text-heading); }
.ffp p { margin: 0 0 1em; }
.ffp [data-lucide] { display: inline-block; vertical-align: middle; }

/* Containers & sections */
.ffp-section { padding: var(--section-pad) var(--gutter); position: relative; }
.ffp-section--tight { padding: var(--space-6) var(--gutter); }
/* Pull the section after the stat band up a little so the chunks sit closer */
.ffp-section--tight + .ffp-section { padding-top: var(--space-6); }
.ffp-inner { max-width: var(--content-max); margin: 0 auto; position: relative; }
.ffp-inner--narrow { max-width: var(--content-narrow); }
.ffp-bg-muted { background: var(--surface-muted); }
.ffp-overflow { position: relative; overflow: hidden; }

/* Decorative soft blobs (size/position set inline per instance) */
.ffp-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }

/* Eyebrow / kicker */
.ffp-eyebrow {
	display: inline-flex; align-items: center; gap: var(--space-2);
	font-family: var(--font-body); font-weight: var(--fw-bold);
	font-size: var(--text-eyebrow); letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase; color: var(--brand); margin: 0 0 14px;
}
.ffp-eyebrow [data-lucide] { width: 15px; height: 15px; }
/* Darker eyebrow on the warm gradient hero for legibility */
.ffp-hero .ffp-eyebrow { color: var(--ff-orange-shade); }

/* Section heads */
.ffp-head { text-align: center; max-width: 660px; margin: 0 auto 48px; }
.ffp-head h2 { margin: 0 0 12px; }
.ffp-head p { color: var(--text-body); font-size: var(--text-body-lg); margin: 0; }

/* Hero */
.ffp-hero { background: var(--ff-gradient-soft); }
.ffp-hero__inner {
	display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px;
	align-items: center; padding: var(--space-10) var(--gutter);
	max-width: var(--content-max); margin: 0 auto; position: relative; z-index: 1;
}
.ffp-display { font-size: var(--text-display); line-height: 1.04; margin: 0; letter-spacing: var(--ls-display); }
.ffp-lead { font-size: var(--text-lead); color: var(--text-body); margin: 20px 0 0; max-width: 520px; }
.ffp-btn-row { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.ffp-microtrust { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 14px; color: var(--text-muted); }
.ffp-microtrust [data-lucide] { width: 18px; height: 18px; color: var(--ff-orange-shade); flex-shrink: 0; }
.ffp-hero__art { position: relative; }

/* Buttons (standalone, used inside .ffp markup) */
.ffp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 16px;
	line-height: 1.2; border-radius: var(--radius-pill); padding: 14px 28px;
	border: 2px solid transparent; cursor: pointer; text-decoration: none;
	transition: background-color var(--dur-base) var(--ease-soft),
	            transform var(--dur-base) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-soft), color var(--dur-base);
}
.ffp-btn [data-lucide] { width: 18px; height: 18px; }
.ffp-btn--lg { padding: 16px 34px; font-size: 17px; }
.ffp-btn--full { width: 100%; }
.ffp-btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.ffp-btn--primary:hover { background: var(--brand-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-brand-lg); }
.ffp-btn--outline { background: transparent; color: var(--text-heading); border-color: var(--text-heading); }
.ffp-btn--outline:hover { background: var(--text-heading); color: #fff; }
.ffp-btn--outline-dark { background: transparent; color: #fff; border-color: var(--border-on-dark); }
.ffp-btn--outline-dark:hover { background: #fff; color: var(--text-heading); border-color: #fff; }

/* Badges */
.ffp-badge {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
	border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--fw-bold);
}
.ffp-badge [data-lucide] { width: 13px; height: 13px; }
.ffp-badge--green  { background: var(--ff-green-tint);  color: #1B7A55; }
.ffp-badge--orange { background: var(--ff-orange-tint-light); color: var(--ff-orange-shade); }
.ffp-badge--sky    { background: var(--ff-sky-tint);    color: #2C7E91; }

/* Stat band */
.ffp-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ffp-stat__value { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); line-height: 1; color: var(--brand); }
.ffp-stat__label { margin-top: 8px; font-size: 14px; color: var(--text-muted); }

/* Feature / value grid */
.ffp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ffp-card {
	background: var(--surface-card); border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-soft);
}
.ffp-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ffp-card h3 { font-size: 1.2rem; margin: 0 0 8px; }
.ffp-card p { margin: 0; color: var(--text-body); font-size: 0.97rem; }

.ffp-icon-tile {
	width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
	margin-bottom: 16px;
}
.ffp-icon-tile [data-lucide] { width: 25px; height: 25px; }
.ffp-icon-tile--orange { background: var(--ff-orange-tint-light); color: var(--ff-orange-shade); }
.ffp-icon-tile--green  { background: var(--ff-green-tint);  color: #1B7A55; }
.ffp-icon-tile--sky    { background: var(--ff-sky-tint);    color: #2C7E91; }

/* Numbered steps */
.ffp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ffp-step__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ffp-step__num { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 46px; color: var(--brand); line-height: 1; }
.ffp-step__icon { width: 46px; height: 46px; border-radius: 14px; background: var(--brand-soft); display: grid; place-items: center; color: var(--brand); }
.ffp-step__icon [data-lucide] { width: 22px; height: 22px; }
.ffp-step h3 { font-size: 1.3rem; margin: 0 0 8px; }
.ffp-step p { margin: 0; color: var(--text-body); }

/* Showcase (two-column) */
.ffp-showcase { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.ffp-showcase--reverse { grid-template-columns: 1fr 1fr; }
.ffp-checklist { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; }
.ffp-checklist li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--text-heading); font-weight: var(--fw-medium); }
.ffp-check { width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--ff-green-tint); color: #1B7A55; display: grid; place-items: center; flex-shrink: 0; }
.ffp-check [data-lucide] { width: 15px; height: 15px; }

/* Founder quote */
.ffp-quote { max-width: 820px; margin: 0 auto; text-align: center; }
.ffp-quote [data-lucide].ffp-quote__mark { width: 40px; height: 40px; color: var(--ff-orange-tint-mid); }
.ffp-quote__text { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); line-height: 1.4; color: var(--text-heading); margin: 16px 0 24px; letter-spacing: var(--ls-heading); }
.ffp-quote__who { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ffp-avatar { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--ff-gradient-hero); color: #fff; display: grid; place-items: center; font-weight: var(--fw-extra); font-family: var(--font-display); }
.ffp-quote__name { font-weight: var(--fw-bold); color: var(--text-heading); text-align: left; }
.ffp-quote__role { font-size: 13.5px; color: var(--text-muted); text-align: left; }

/* Dark final CTA */
.ffp-cta-dark { background: var(--surface-ink); }
.ffp-cta-dark .ffp-inner { text-align: center; max-width: 760px; }
.ffp-cta-dark h2 { color: #fff; margin: 0 0 14px; font-size: var(--text-h1); }
.ffp-cta-dark p { color: var(--text-on-dark); font-size: 1.15rem; margin: 0 0 30px; }
.ffp-cta-dark .ffp-btn-row { justify-content: center; }

/* "A real look" feature chips */
.ffp-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.ffp-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-heading); background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); padding: 8px 15px; border-radius: var(--radius-pill); }
.ffp-chip [data-lucide] { width: 15px; height: 15px; color: var(--brand); }

/* ---- Product mock: browser frame ------------------------------------- */
.ffp-browser { max-width: 560px; margin: 0 auto; background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; border: 1px solid var(--border-subtle); }
.ffp-browser__bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: var(--surface-muted); border-bottom: 1px solid var(--border-subtle); }
.ffp-dot { width: 10px; height: 10px; border-radius: var(--radius-pill); }
.ffp-browser__url { margin-left: 12px; font-size: 12px; color: var(--text-muted); background: var(--surface-page); padding: 4px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); }

/* ---- Conversation app mock ------------------------------------------- */
.ffp-conv { background: var(--surface-page); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; width: 100%; }
.ffp-hero__art .ffp-conv, .ffp-browser .ffp-conv { box-shadow: none; border-radius: 0; }
.ffp-conv__head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--surface-muted); }
.ffp-conv__phase { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--fw-bold); background: var(--ff-green-tint); color: #1a7a56; }
.ffp-conv__phase span { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--ff-green); }
.ffp-progress { flex: 1; display: flex; align-items: center; gap: 10px; }
.ffp-progress__track { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--ff-orange-tint-light); overflow: hidden; }
.ffp-progress__fill { width: 60%; height: 100%; border-radius: var(--radius-pill); background: var(--ff-gradient-soft); }
.ffp-progress__pct { font-size: 11px; font-weight: var(--fw-bold); color: var(--ff-orange-shade); }
.ffp-conv__body { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 13px; background: var(--surface-page); }

.ffp-turn-ai { display: flex; align-items: flex-start; gap: 9px; }
.ffp-ai-ava { width: 30px; height: 30px; border-radius: var(--radius-pill); flex-shrink: 0; background: var(--ff-orange-tint-mid); display: grid; place-items: center; }
.ffp-ai-ava [data-lucide] { width: 16px; height: 16px; color: var(--ff-orange-shade); }
.ffp-bubble-ai { max-width: 290px; padding: 10px 14px; border-radius: 15px 15px 15px 4px; background: var(--surface-muted); color: var(--text-heading); font-size: 13.5px; line-height: 1.5; }
.ffp-bubble-tools { display: flex; gap: 5px; margin-top: 5px; }
.ffp-bubble-tools span { width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--ff-orange-tint-mid); display: grid; place-items: center; }
.ffp-bubble-tools [data-lucide] { width: 12px; height: 12px; color: var(--ff-orange-shade); }

.ffp-turn-me { display: flex; justify-content: flex-end; }
.ffp-bubble-me { max-width: 290px; padding: 10px 14px; border-radius: 15px 15px 4px 15px; background: var(--ff-deep-blue); color: #fff; font-size: 13.5px; line-height: 1.5; }
.ffp-vocab { display: flex; justify-content: center; margin-top: 8px; }
.ffp-vocab span.ffp-vocab__pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--ff-green-tint); }
.ffp-vocab__dot { width: 15px; height: 15px; border-radius: var(--radius-pill); background: var(--ff-green); display: grid; place-items: center; }
.ffp-vocab__dot [data-lucide] { width: 9px; height: 9px; color: #fff; }
.ffp-vocab__word { font-size: 11.5px; font-weight: var(--fw-bold); color: var(--ff-green); }

.ffp-turn-teacher { display: flex; justify-content: center; }
.ffp-bubble-teacher { max-width: 320px; text-align: center; padding: 10px 15px; border-radius: 14px; background: var(--ff-orange-tint-light); border: 1px solid var(--ff-orange-tint-mid); }
.ffp-bubble-teacher__label { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ff-orange-shade); margin-bottom: 3px; }
.ffp-bubble-teacher__label [data-lucide] { width: 12px; height: 12px; }
.ffp-bubble-teacher__text { font-size: 13px; color: var(--text-heading); line-height: 1.45; }

.ffp-conv__input { padding: 12px 16px 14px; background: var(--surface-muted); }
.ffp-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 22px; margin-bottom: 10px; }
.ffp-wave span { width: 3.5px; border-radius: var(--radius-pill); }
.ffp-conv__row { display: flex; align-items: center; gap: 9px; }
.ffp-conv__field { flex: 1; padding: 9px 14px; border-radius: var(--radius-pill); background: var(--ff-orange-tint-light); color: var(--text-muted); font-size: 12.5px; }
.ffp-conv__send { padding: 9px 16px; border-radius: var(--radius-pill); border: none; background: var(--brand); color: #fff; font-weight: var(--fw-bold); font-size: 12.5px; box-shadow: var(--shadow-brand); }
.ffp-conv__mic { width: 38px; height: 38px; border-radius: var(--radius-pill); border: none; flex-shrink: 0; background: var(--ff-deep-blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.ffp-conv__mic svg, .ffp-conv__mic [data-lucide] { width: 17px; height: 17px; display: block; }

/* ---- Teacher dashboard mock ------------------------------------------ */
.ffp-dash { background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; width: 100%; position: relative; z-index: 1; }
.ffp-dash__head { padding: 18px 20px 14px; border-bottom: 1px solid var(--border-subtle); }
.ffp-dash__title { display: flex; align-items: center; gap: 9px; }
.ffp-dash__title b { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 17px; color: var(--text-heading); }
.ffp-dash__title span.ffp-dash__when { margin-left: auto; font-size: 11.5px; color: var(--text-muted); font-weight: var(--fw-regular); }
.ffp-dash__stats { display: flex; gap: 26px; margin-top: 14px; }
.ffp-dash__stat b { display: block; font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 22px; line-height: 1; }
.ffp-dash__stat span { display: block; font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; }
.ffp-dash__rows { padding: 8px 12px 12px; }
.ffp-dash__row { display: flex; align-items: center; gap: 13px; padding: 11px 10px; border-radius: 12px; }
.ffp-dash__row--flag { background: var(--ff-orange-tint-light); }
.ffp-dash__ava { width: 34px; height: 34px; border-radius: var(--radius-pill); flex-shrink: 0; background: var(--surface-muted); color: var(--text-heading); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: 12.5px; }
.ffp-dash__ava--flag { background: radial-gradient(ellipse at 30% 25%, #FFB088, #FF8C55 60%, #E87A48); color: #fff; }
.ffp-dash__name { font-weight: var(--fw-bold); font-size: 13.5px; color: var(--text-heading); }
.ffp-dash__meta { font-size: 11.5px; color: var(--text-muted); }
.ffp-dash__rate { text-align: right; flex-shrink: 0; }
.ffp-dash__rate b { display: block; font-weight: var(--fw-extra); font-size: 13.5px; font-family: var(--font-display); line-height: 1.1; }
.ffp-dash__rate span { display: block; margin-top: 2px; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ffp-dash__done { font-size: 11.5px; font-weight: var(--fw-bold); color: var(--text-muted); flex-shrink: 0; width: 26px; text-align: right; }
.ffp-dash__alert { width: 8px; height: 8px; border-radius: var(--radius-pill); flex-shrink: 0; background: #E54D4D; box-shadow: 0 0 0 3px rgba(229,77,77,0.2); }

/* ---- Dashboard carousel ---------------------------------------------- */
.ffp-car { position: relative; max-width: 660px; margin: 0 auto; }
.ffp-car__track {
	display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
	scrollbar-width: none; -ms-overflow-style: none;
	transition: height var(--dur-slow) var(--ease-out);
}
.ffp-car__track::-webkit-scrollbar { display: none; }
.ffp-car__slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; box-sizing: border-box; padding: 6px 6px 16px; }
.ffp-dashcard { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }

/* Carousel controls */
.ffp-car__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; }
.ffp-car__btn {
	width: 44px; height: 44px; border-radius: var(--radius-pill); flex-shrink: 0;
	border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-heading);
	cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-xs);
	transition: border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.ffp-car__btn:hover { border-color: var(--brand); color: var(--brand); }
.ffp-car__btn [data-lucide] { width: 19px; height: 19px; }
.ffp-car__dots { display: flex; align-items: center; gap: 8px; }
.ffp-car__dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: var(--radius-pill); background: var(--ff-orange-tint-mid); cursor: pointer; transition: background var(--dur-fast) var(--ease-soft), width var(--dur-fast) var(--ease-soft); }
.ffp-car__dot.is-active { background: var(--brand); width: 28px; }
.ffp-car__caption { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 12px; }
.ffp-car__caption b { color: var(--text-heading); font-weight: var(--fw-bold); }

/* Panel scaffolding (shared by carousel slides) */
.ffp-panel { padding: 22px 24px 24px; }
.ffp-panel__eyebrow { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand); margin-bottom: 8px; }
.ffp-panel__eyebrow [data-lucide] { width: 14px; height: 14px; }
.ffp-panel__title { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 1.15rem; color: var(--text-heading); margin: 0 0 4px; }
.ffp-panel__sub { font-size: 12.5px; color: var(--text-muted); margin: 0 0 18px; line-height: 1.5; }

/* Panel: class at a glance */
.ffp-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ffp-stattile { background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 15px; }
.ffp-stattile__label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ffp-stattile__label [data-lucide] { width: 13px; height: 13px; }
.ffp-stattile__value { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 1.85rem; line-height: 1.05; margin-top: 6px; color: var(--text-heading); }

/* Panel: grammar concepts */
.ffp-gram { display: flex; flex-direction: column; gap: 13px; }
.ffp-gram__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ffp-gram__name { font-size: 13px; font-weight: var(--fw-bold); color: var(--text-heading); }
.ffp-gram__count { font-size: 11.5px; color: var(--text-muted); }
.ffp-gram__bar { height: 9px; border-radius: var(--radius-pill); background: var(--surface-muted); overflow: hidden; }
.ffp-gram__fill { height: 100%; border-radius: var(--radius-pill); }

/* Panel: needs attention */
.ffp-attn { display: grid; gap: 10px; }
.ffp-attn__card { background: var(--surface-page); border: 1px solid #FBD9CF; border-radius: var(--radius-md); padding: 13px 15px; }
.ffp-attn__row { display: flex; align-items: center; gap: 11px; }
.ffp-attn__ava { width: 34px; height: 34px; border-radius: var(--radius-pill); flex-shrink: 0; background: var(--surface-muted); color: var(--text-heading); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: 12px; }
.ffp-attn__name { font-weight: var(--fw-bold); font-size: 13.5px; color: var(--text-heading); }
.ffp-attn__meta { font-size: 11.5px; color: var(--text-muted); }
.ffp-attn__reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ffp-attn__pill { font-size: 11px; font-weight: var(--fw-semibold); color: #E54D4D; background: #FEE8E8; padding: 3px 9px; border-radius: var(--radius-pill); }

/* Panel: student detail */
.ffp-sd__head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.ffp-sd__ava { width: 48px; height: 48px; border-radius: var(--radius-pill); flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 16px; color: #fff; background: radial-gradient(ellipse at 30% 25%, #FFB088, #FF8C55 60%, #E87A48); }
.ffp-sd__nrow { display: flex; align-items: center; gap: 8px; }
.ffp-sd__name { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 1.1rem; color: var(--text-heading); }
.ffp-sd__flag { font-size: 10.5px; font-weight: var(--fw-bold); color: #E54D4D; background: #FEE8E8; padding: 2px 8px; border-radius: var(--radius-pill); }
.ffp-sd__meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ffp-sd__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.ffp-sd__metric { background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px 14px; }
.ffp-sd__mval { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 1.4rem; line-height: 1; }
.ffp-sd__mkey { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 4px; }
.ffp-sd__errlabel { font-size: 11.5px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 9px; }
.ffp-sd__errs { display: flex; flex-wrap: wrap; gap: 7px; }
.ffp-sd__err { font-size: 12px; font-weight: var(--fw-semibold); color: #E54D4D; background: #FEE8E8; padding: 5px 11px; border-radius: var(--radius-pill); }

/* Panel: trends over time */
.ffp-trend { display: flex; align-items: flex-end; gap: 12px; height: 160px; padding: 4px 4px 0; }
.ffp-trend__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.ffp-trend__val { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 12px; }
.ffp-trend__bar { width: 100%; border-radius: 8px 8px 3px 3px; }
.ffp-trend__wk { font-size: 10.5px; color: var(--text-muted); }

/* ---- Character avatar photo in conversation mock ---------------------- */
.ffp-ai-photo {
	width: 30px; height: 30px; border-radius: var(--radius-pill);
	flex-shrink: 0; object-fit: cover;
}
.ffp-ai-name {
	font-size: 11.5px; font-weight: var(--fw-bold); color: var(--text-heading);
	margin-bottom: 4px;
}
.ffp-ai-spacer { width: 30px; flex-shrink: 0; }

/* ---- Disclaimer text -------------------------------------------------- */
.ffp-disclaimer {
	text-align: center; font-size: var(--text-xs); color: var(--text-muted);
	margin: 20px 0 0; font-style: italic;
}

/* ---- Green eyebrow variant ------------------------------------------- */
.ffp-eyebrow--green { color: #1B7A55; }
.ffp-eyebrow--green [data-lucide] { color: #1B7A55; }

/* ---- Cast (character cards) ------------------------------------------ */
.ffp-cast__card { text-align: center; }
.ffp-cast__avatar {
	width: 88px; height: 88px; border-radius: var(--radius-pill);
	object-fit: cover; margin: 0 auto 16px; display: block;
}
.ffp-cast__name {
	font-family: var(--font-display); font-weight: var(--fw-extra);
	font-size: 1.2rem; color: var(--text-heading);
}
.ffp-cast__meta {
	font-size: 12.5px; color: var(--text-muted); margin: 4px 0 12px;
}
.ffp-cast__blurb {
	font-size: 14.5px; color: var(--text-body); line-height: 1.55; margin: 0;
}

/* ---- Contact ---------------------------------------------------------- */
.ffp-contact-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 40px; align-items: start; }
.ffp-form-card { background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-7); }
.ffp-form-card h2 { font-size: 1.6rem; margin: 0 0 6px; }
.ffp-form-card > p { color: var(--text-muted); font-size: 14.5px; margin: 0 0 24px; }
.ffp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ffp-field { display: block; margin-bottom: 18px; }
.ffp-field__label { display: block; font-weight: var(--fw-semibold); color: var(--text-heading); margin-bottom: 6px; font-size: 14.5px; }
.ffp-field__label .ffp-req { color: var(--brand); }
.ffp-field__hint { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }
.ffp-input {
	width: 100%; background: var(--surface-input); border: 1px solid var(--border-warm);
	border-radius: var(--radius-sm); padding: 12px 16px; font-family: var(--font-body);
	font-size: 16px; color: var(--text-body);
	transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ffp-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; }
textarea.ffp-input { resize: vertical; min-height: 110px; }
.ffp-side-stack { display: flex; flex-direction: column; gap: 18px; }
.ffp-side-card { border-radius: var(--radius-lg); padding: var(--space-5); }
.ffp-side-card h3 { font-size: 1.2rem; margin: 12px 0 8px; display: flex; align-items: center; gap: 8px; }
.ffp-side-card h3 [data-lucide] { width: 18px; height: 18px; color: var(--brand); }
.ffp-side-card p { color: var(--text-body); font-size: 14.5px; margin: 0 0 16px; }
.ffp-side-card--tint { background: var(--surface-tint); }
.ffp-side-card--card { background: var(--surface-card); box-shadow: var(--shadow-sm); }
.ffp-side-card--muted { background: var(--surface-muted); }
.ffp-side-card--muted p { margin: 0; }

/* ---- Embedded tool (Test Your Spanish iframe) ------------------------- */
.ffp-embed {
	max-width: 980px; margin: 0 auto; background: var(--surface-card);
	border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg); overflow: hidden;
}
.ffp-embed iframe { display: block; width: 100%; border: 0; }

/* ---- FAQ accordion ---------------------------------------------------- */
.ffp-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ffp-faq details {
	background: var(--surface-card); border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md); box-shadow: var(--shadow-xs); overflow: hidden;
}
.ffp-faq summary {
	list-style: none; cursor: pointer; display: flex; align-items: center;
	justify-content: space-between; gap: 16px; padding: 18px 22px;
	font-family: var(--font-display); font-weight: var(--fw-bold);
	color: var(--text-heading); font-size: 1.05rem;
}
.ffp-faq summary::-webkit-details-marker { display: none; }
.ffp-faq summary [data-lucide] {
	width: 20px; height: 20px; color: var(--brand); flex-shrink: 0;
	transition: transform var(--dur-base) var(--ease-soft);
}
.ffp-faq details[open] summary [data-lucide] { transform: rotate(180deg); }
.ffp-faq__a { padding: 0 22px 20px; color: var(--text-body); }
.ffp-faq__a p { margin: 0; }
.ffp-faq__a a { font-weight: var(--fw-semibold); }

/* ---- Founders (About) ------------------------------------------------- */
.ffp-founders { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ffp-founder { text-align: center; }
.ffp-founder__photo {
	width: 100%; max-width: 240px; aspect-ratio: 1; object-fit: cover;
	border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin: 0 auto 14px;
	display: block; border: 4px solid var(--surface-card);
}
.ffp-founder__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.15rem; color: var(--text-heading); }
.ffp-founder__role { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
/* Stack the founder photos on phones */
@media (max-width: 600px) { .ffp-founders { grid-template-columns: 1fr; gap: 30px; } }

/* ---- Editorial label/body rows (Mission / Team / Philosophy) ---------- */
.ffp-editorial__row {
	display: grid; grid-template-columns: 1fr 2fr; gap: 40px;
	padding: 40px 0; border-top: 1px solid var(--border-subtle);
}
.ffp-editorial__row:last-child { border-bottom: 1px solid var(--border-subtle); }
.ffp-editorial__row h3 { font-size: 1.35rem; margin: 0; }
.ffp-editorial__row p { margin: 0; color: var(--text-body); font-size: 1.0625rem; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 880px) {
	.ffp-hero__inner,
	.ffp-showcase,
	.ffp-showcase--reverse,
	.ffp-contact-grid,
	.ffp-editorial__row { grid-template-columns: 1fr; gap: 40px; }
	.ffp-hero__inner { padding: var(--space-8) var(--gutter); }
	.ffp-grid-3,
	.ffp-steps,
	.ffp-stat-row { grid-template-columns: 1fr; gap: 20px; }
	.ffp-editorial__row { gap: 12px; padding: 28px 0; }
	.ffp-form-row { grid-template-columns: 1fr; }
	.ffp-cast__grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
	.ffp-statgrid { grid-template-columns: repeat(2, 1fr); }
	.ffp-panel { padding: 20px 18px 22px; }
	.ffp-trend { gap: 7px; }
}

/* ==========================================================================
   12. Site Header (Astra) — align with the brand / preview
   --------------------------------------------------------------------------
   The header is built by Astra, not the page patterns. These rules tidy it to
   match the redesign: hide the redundant site-title text (the logo already
   carries the wordmark), keep the logo a sensible size, and style the
   "Book a Demo" nav item (class ff-nav-cta) as a brand pill.
   ========================================================================== */

/* Hide the "freeflowls.com" site title text next to the logo */
.site-header .site-title,
.ast-site-title-wrap .site-title { display: none; }

/* Keep the logo a reasonable height */
.site-header .custom-logo-link img,
.ast-logo-title-inline .site-logo-img img,
.site-header .site-logo-img img {
	max-height: 48px !important;
	width: auto !important;
}

/* Nav links: smooth hover to Bird of Paradise orange */
.site-header .main-header-menu .menu-item > a,
.site-header .ast-header-navigation-wrap .menu-item > a,
.site-header .menu-link {
	transition: color var(--dur-fast) var(--ease-soft) !important;
}
.site-header .main-header-menu .menu-item:not(.ff-nav-cta) > a:hover,
.site-header .ast-header-navigation-wrap .menu-item:not(.ff-nav-cta) > a:hover,
.site-header .menu-item:not(.ff-nav-cta) > a:hover,
.site-header .menu-item:not(.ff-nav-cta).current-menu-item > a {
	color: var(--brand) !important;
}

/* "Book a Demo" CTA item in the nav, styled as a compact pill */
.main-header-menu .menu-item.ff-nav-cta > a,
.ast-header-sections-navigation .menu-item.ff-nav-cta > a,
.menu-item.ff-nav-cta > a {
	background-color: var(--brand);
	color: #fff !important;
	border-radius: var(--radius-pill);
	padding: 6px 16px;
	font-size: 14px;
	transition: background-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-out);
}
.menu-item.ff-nav-cta > a:hover { background-color: var(--brand-hover); color: #fff !important; transform: translateY(-1px); }

/* "Sign In" nav item — plain text link, no pill */
.menu-item.ff-nav-signin > a {
	color: var(--deep) !important;
	font-size: 14px;
	font-weight: 600;
	transition: color var(--dur-fast) var(--ease-soft);
}
.menu-item.ff-nav-signin > a:hover { color: var(--brand) !important; }

/* In the mobile dropdown menu, keep the CTA a contained pill (not a full-width bar) */
@media (max-width: 921px) {
	.ast-builder-menu-mobile .menu-item.ff-nav-cta > a,
	.ast-mobile-header-content .menu-item.ff-nav-cta > a {
		display: inline-flex;
		margin: 10px 20px;
	}
}

/* Astra Header Builder button ("Book a Demo") — brand pill on ALL screens.
   Production uses Astra's native header button (.ast-custom-button-link), not
   the .ff-nav-cta menu item, so Astra would otherwise style its mobile state
   (white). Force the brand orange everywhere. */
.ast-custom-button-link,
.ast-mobile-header-content .ast-custom-button-link {
	background-color: var(--brand) !important;
	color: #fff !important;
	border-color: var(--brand) !important;
	border-radius: var(--radius-pill) !important;
}
.ast-custom-button-link .ast-custom-button { color: #fff !important; }
.ast-custom-button-link:hover,
.ast-custom-button-link:focus {
	background-color: var(--brand-hover) !important;
	border-color: var(--brand-hover) !important;
	color: #fff !important;
}