/*
Theme Name: FIRECracker
Theme URI: 
Author: FIRECracker
Author URI: 
Description: 
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: firecracker
Tags: 
*/

/* === FIRECRACKER PUBLIC HEADER START === */

.fc-public-header {
	background: rgba(255, 255, 255, 0.96);
}

.fc-public-header .wp-block-site-logo {
	flex-shrink: 0;
}

.fc-public-header .wp-block-site-logo img {
	display: block;
	height: auto;
}

.fc-public-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 160ms ease;
}

.fc-public-header .wp-block-navigation-item__content:hover,
.fc-public-header .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--firecracker-orange);
}

.fc-public-header .fc-sign-in .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
}

.fc-public-header .fc-sign-in .wp-block-navigation-item__content:hover,
.fc-public-header .fc-sign-in .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--ink);
}

.fc-public-header .fc-header-cta .wp-block-button__link {
	white-space: nowrap;
	box-shadow: 0 5px 16px rgba(244, 93, 34, 0.18);
	transition:
		transform 160ms ease,
		box-shadow 160ms ease;
}

.fc-public-header .fc-header-cta .wp-block-button__link:hover,
.fc-public-header .fc-header-cta .wp-block-button__link:focus {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(244, 93, 34, 0.24);
}

@media (max-width: 782px) {
	.fc-public-header .wp-block-site-logo img {
		max-width: 165px;
	}

	.fc-public-header .wp-block-navigation__responsive-container-content {
		gap: 24px;
	}

	.fc-public-header .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		align-items: flex-start;
		gap: 22px;
	}

	.fc-public-header .wp-block-navigation__responsive-container-content .wp-block-buttons {
		margin-top: 8px;
	}
}

/* === FIRECRACKER PUBLIC HEADER END === */

/* === FIRECRACKER PUBLIC SHELL START === */

.fc-front-page-main {
	min-height: 55vh;
}

.fc-standard-page {
	min-height: 55vh;
}

.fc-public-footer {
	color: var(--wp--preset--color--ink);
}

.fc-public-footer .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 160ms ease;
}

.fc-public-footer .wp-block-navigation-item__content:hover,
.fc-public-footer .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--firecracker-orange);
}

.fc-footer-meta {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 1.5;
}

.fc-footer-meta p {
	margin: 0;
}

@media (max-width: 782px) {
	.fc-public-footer .alignwide {
		align-items: flex-start;
	}

	.fc-footer-nav .wp-block-navigation__container {
		gap: 16px 22px;
	}

	.fc-footer-meta {
		align-items: flex-start;
	}
}

/* === FIRECRACKER PUBLIC SHELL END === */

/* === FIRECRACKER HOMEPAGE HERO START === */

.fc-hero-v3 {
	overflow: hidden;
	background:
		radial-gradient(
			circle at 15% 24%,
			rgba(244, 93, 34, 0.055),
			transparent 31%
		),
		radial-gradient(
			circle at 82% 68%,
			rgba(155, 124, 245, 0.10),
			transparent 38%
		),
		#f8f9fc;
}

.fc-hero-inner-v3 {
	padding-top: clamp(54px, 5.5vw, 78px);
	padding-bottom: clamp(72px, 7vw, 104px);
}

.fc-hero-copy-v3 {
	max-width: 920px;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}

.fc-eyebrow {
	margin: 0 auto 17px;
	color: var(--wp--preset--color--firecracker-orange);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1.3;
}

.fc-hero-title-v3 {
	max-width: 850px;
	margin: 0 auto 22px;
	font-size: clamp(38px, 4vw, 52px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.fc-hero-lede-v3 {
	max-width: 820px;
	margin: 0 auto;
	color: var(--wp--preset--color--muted);
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.62;
	text-wrap: balance;
}

.fc-hero-visual-v3 {
	position: relative;
	width: min(1280px, calc(100vw - 64px));
	max-width: none !important;
	margin-top: 22px !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 50% !important;
	transform: translateX(-50%);
}

.fc-hero-accent-v3 {
	position: relative;
	width: 100%;
	padding: 0;
	border-radius: 0;
	background: transparent;
}

.fc-hero-accent-v3::before {
	content: "";
	position: absolute;
	width: 250px;
	height: 250px;
	right: -70px;
	top: -75px;
	border-radius: 999px;
	background: rgba(244, 93, 34, 0.085);
	z-index: 0;
}

.fc-hero-accent-v3::after {
	content: "";
	position: absolute;
	width: 195px;
	height: 195px;
	left: -52px;
	bottom: -60px;
	border-radius: 999px;
	background: rgba(155, 124, 245, 0.10);
	z-index: 0;
}

.fc-hero-image-frame-v3 {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	border: 0;
	border-radius: 18px;
	background: transparent;
	box-shadow:
		0 24px 60px rgba(15, 23, 42, 0.10),
		0 4px 12px rgba(15, 23, 42, 0.05);
}

.fc-hero-image-frame-v3 .wp-block-image {
	width: 100%;
	max-width: none;
	margin: 0;
}

.fc-hero-image-frame-v3 img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	border-radius: 18px;
}

@media (max-width: 782px) {
	.fc-hero-inner-v3 {
		padding-top: 44px;
		padding-bottom: 64px;
	}

	.fc-hero-title-v3 {
		font-size: clamp(34px, 9vw, 44px);
	}

	.fc-hero-lede-v3 {
		font-size: 17px;
	}

	.fc-hero-visual-v3 {
		width: calc(100vw - 24px);
		margin-top: 22px !important;
	}

	.fc-hero-image-frame-v3,
	.fc-hero-image-frame-v3 img {
		border-radius: 13px;
	}
}

/* === FIRECRACKER HOMEPAGE HERO END === */

/* === FIRECRACKER STICKY HEADER START === */

.fc-public-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	background: rgba(255, 255, 255, 0.96) !important;
	border-bottom: 1px solid rgba(197, 207, 221, 0.62);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 7px 24px rgba(15, 23, 42, 0.035);
}

.fc-public-header-inner {
	margin-left: auto !important;
	margin-right: auto !important;
}

.admin-bar .fc-public-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .fc-public-header {
		top: 46px;
	}
}

/* === FIRECRACKER STICKY HEADER END === */

/* === FIRECRACKER HOMEPAGE STORY START === */

html {
	scroll-behavior: smooth;
}

/* ---------- Sticky public header ---------- */

.fc-public-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	background: rgba(255, 255, 255, 0.96) !important;
	border-bottom: 1px solid rgba(197, 207, 221, 0.62);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 6px 22px rgba(15, 23, 42, 0.035);
}

.fc-public-header-inner {
	margin-left: auto !important;
	margin-right: auto !important;
}

.admin-bar .fc-public-header {
	top: 32px;
}

.fc-public-nav a {
	transition:
		color 160ms ease,
		opacity 160ms ease;
}

.fc-public-nav a:hover,
.fc-public-nav a:focus {
	color: var(--wp--preset--color--firecracker-orange);
}

/* ---------- Shared story layout ---------- */

.fc-home-story {
	margin-top: 0 !important;
}

.fc-story-section,
.fc-final-cta {
	position: relative;
	overflow: hidden;
	scroll-margin-top: 90px;
}

.fc-story-inner {
	padding-top: clamp(84px, 8vw, 124px);
	padding-bottom: clamp(84px, 8vw, 124px);
}

.fc-story-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	align-items: center;
	gap: clamp(52px, 7vw, 100px);
}

.fc-story-reverse .fc-story-copy {
	order: 2;
}

.fc-story-reverse .fc-story-media {
	order: 1;
}

.fc-story-forecast-grid {
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.fc-story-copy {
	max-width: 550px;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.fc-story-eyebrow,
.fc-final-eyebrow {
	margin: 0 0 16px;
	color: var(--fc-accent);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1.3;
}

.fc-story-title {
	max-width: 610px;
	margin-top: 0;
	margin-bottom: 22px;
	font-size: clamp(34px, 3.4vw, 48px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.024em;
	text-wrap: balance;
}

.fc-story-lede {
	margin-top: 0;
	margin-bottom: 26px;
	color: var(--wp--preset--color--muted);
	font-size: clamp(17px, 1.45vw, 19px);
	line-height: 1.68;
}

.fc-story-points {
	margin: 0 0 26px;
	padding-left: 1.2em;
	color: var(--wp--preset--color--ink);
	font-size: 16px;
	line-height: 1.65;
}

.fc-story-points li {
	margin-bottom: 9px;
	padding-left: 4px;
}

.fc-story-points li::marker {
	color: var(--fc-accent);
}

.fc-story-link {
	margin: 28px 0 0;
}

.fc-story-link a {
	color: var(--wp--preset--color--ink);
	font-weight: 800;
	text-decoration: none;
}

.fc-story-link a:hover,
.fc-story-link a:focus {
	color: var(--fc-accent);
}

.fc-story-note {
	margin: 24px 0 0;
	padding: 14px 16px;
	border-left: 3px solid var(--fc-accent);
	border-radius: 0 10px 10px 0;
	background: rgba(255, 255, 255, 0.58);
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 1.55;
}

.fc-story-actions {
	margin-top: 30px;
}

/* ---------- Screenshot placeholders / real screenshots ---------- */

.fc-story-media {
	position: relative;
	width: 100%;
}

.fc-story-placeholder {
	position: relative;
	min-height: 390px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(30px, 4vw, 54px);
	border: 1.5px dashed rgba(15, 23, 42, 0.18);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.78);
	box-shadow:
		0 24px 60px rgba(15, 23, 42, 0.07),
		0 3px 10px rgba(15, 23, 42, 0.035);
}

.fc-story-placeholder::before {
	content: "";
	position: absolute;
	inset: -16px;
	z-index: -1;
	border-radius: 34px;
	background: var(--fc-placeholder-wash);
}

.fc-story-placeholder-large {
	min-height: 470px;
}

.fc-placeholder-title {
	margin: 0 0 8px;
	color: var(--wp--preset--color--ink);
	font-size: 17px;
}

.fc-placeholder-help {
	max-width: 420px;
	margin: 0 auto;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 1.55;
}

/*
 * Once a placeholder is replaced with an Image block, the image
 * automatically adopts the same polished screenshot treatment.
 */
.fc-story-media .wp-block-image {
	width: 100%;
	max-width: none;
	margin: 0;
}

.fc-story-media .wp-block-image img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	border: 1px solid rgba(197, 207, 221, 0.70);
	border-radius: 20px;
	background: #ffffff;
	box-shadow:
		0 26px 62px rgba(15, 23, 42, 0.10),
		0 4px 14px rgba(15, 23, 42, 0.05);
}

/* ---------- FIRECracker product colour journey ---------- */

/*
 * Each section moves gently from the previous product colour
 * into the next one. The effect should feel like the page
 * atmosphere changing rather than a loud gradient.
 */

.fc-story-dashboard {
	--fc-accent: #D69D00;
	--fc-placeholder-wash: rgba(244, 180, 0, 0.12);
	background:
		linear-gradient(
			180deg,
			#f8f9fc 0%,
			#fff9e8 22%,
			#fff9e8 78%,
			#eef9fe 100%
		);
}

.fc-story-assets {
	--fc-accent: #238EB9;
	--fc-placeholder-wash: rgba(53, 181, 232, 0.12);
	background:
		linear-gradient(
			180deg,
			#eef9fe 0%,
			#edf8fd 20%,
			#edf8fd 80%,
			#fff1f3 100%
		);
}

.fc-story-liabilities {
	--fc-accent: #D56572;
	--fc-placeholder-wash: rgba(240, 138, 148, 0.13);
	background:
		linear-gradient(
			180deg,
			#fff1f3 0%,
			#fff5f6 20%,
			#fff5f6 80%,
			#effaf4 100%
		);
}

.fc-story-money-flow {
	--fc-accent: #319A60;
	--fc-placeholder-wash: rgba(82, 194, 129, 0.13);
	background:
		linear-gradient(
			180deg,
			#effaf4 0%,
			#eef9f3 20%,
			#eef9f3 80%,
			#f5f1ff 100%
		);
}

.fc-story-forecasts {
	--fc-accent: #7659D8;
	--fc-placeholder-wash: rgba(155, 124, 245, 0.13);
	background:
		linear-gradient(
			180deg,
			#f5f1ff 0%,
			#f6f3ff 20%,
			#f6f3ff 80%,
			#fff3eb 100%
		);
}

.fc-story-demo {
	--fc-accent: #F45D22;
	--fc-placeholder-wash: rgba(244, 93, 34, 0.11);
	background:
		linear-gradient(
			180deg,
			#fff3eb 0%,
			#fff8f3 24%,
			#fff8f3 78%,
			#fff4e9 100%
		);
}

/* ---------- Final CTA ---------- */

.fc-final-cta {
	--fc-accent: var(--wp--preset--color--firecracker-orange);
	background:
		radial-gradient(
			circle at 20% 20%,
			rgba(244, 180, 0, 0.11),
			transparent 30%
		),
		radial-gradient(
			circle at 80% 80%,
			rgba(155, 124, 245, 0.10),
			transparent 32%
		),
		#fff4e9;
}

.fc-final-cta-inner {
	max-width: 880px;
	padding-top: clamp(84px, 9vw, 132px);
	padding-bottom: clamp(84px, 9vw, 132px);
	text-align: center;
}

.fc-final-eyebrow {
	text-align: center;
}

.fc-final-title {
	max-width: 800px;
	margin: 0 auto 22px;
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.024em;
	text-wrap: balance;
}

.fc-final-copy {
	max-width: 660px;
	margin: 0 auto;
	color: var(--wp--preset--color--muted);
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.65;
}

.fc-final-actions {
	justify-content: center;
	margin-top: 30px;
}

.fc-final-signin {
	margin: 18px auto 0;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}

.fc-final-signin a {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 782px) {

	.admin-bar .fc-public-header {
		top: 46px;
	}

	.fc-story-section,
	.fc-final-cta {
		scroll-margin-top: 82px;
	}

	.fc-story-inner {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	.fc-story-grid,
	.fc-story-forecast-grid {
		grid-template-columns: 1fr;
		gap: 42px;
	}

	.fc-story-reverse .fc-story-copy,
	.fc-story-reverse .fc-story-media {
		order: initial;
	}

	.fc-story-copy {
		max-width: 680px;
	}

	.fc-story-media {
		max-width: 760px;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.fc-story-placeholder {
		min-height: 300px;
		border-radius: 18px;
	}

	.fc-story-placeholder-large {
		min-height: 340px;
	}

	.fc-story-title {
		font-size: clamp(32px, 8vw, 42px);
	}

	.fc-final-cta-inner {
		padding-top: 72px;
		padding-bottom: 72px;
	}
}

@media screen and (max-width: 600px) {

	.fc-public-header-inner {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}

	.fc-story-inner {
		padding-top: 58px;
		padding-bottom: 58px;
	}

	.fc-story-grid {
		gap: 34px;
	}

	.fc-story-placeholder {
		min-height: 250px;
		padding: 24px;
	}

	.fc-story-placeholder::before {
		inset: -8px;
		border-radius: 24px;
	}

	.fc-story-media .wp-block-image img {
		border-radius: 14px;
	}
}

/* === FIRECRACKER HOMEPAGE STORY END === */

/* === FIRECRACKER FIXED HEADER REFINEMENT START === */

:root {
	--fc-public-header-height: 78px;
}

/*
 * Use a true fixed header rather than relying on sticky positioning.
 * This keeps navigation permanently available throughout the
 * long-form homepage.
 */
.fc-public-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9990;
	width: 100%;
	margin: 0 !important;
	background: rgba(255, 255, 255, 0.97) !important;
	border-bottom: 1px solid rgba(197, 207, 221, 0.55);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 5px 18px rgba(15, 23, 42, 0.035);
}

/*
 * WordPress removes fixed elements from normal document flow,
 * so reserve exactly one header's worth of space for the page.
 */
.wp-site-blocks {
	padding-top: var(--fc-public-header-height);
}

/*
 * Remove the default block gap WordPress can insert between
 * template parts and the page content.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.fc-front-page-main,
.fc-hero-v3 {
	margin-block-start: 0 !important;
}

/*
 * Bring the opening proposition closer to the header now that
 * the unwanted template gap has been removed.
 */
.fc-hero-inner-v3 {
	padding-top: clamp(28px, 3vw, 42px);
}

/*
 * Keep anchor navigation clear of the fixed header.
 */
.fc-story-section,
.fc-final-cta,
#product,
#how-it-works,
#assets,
#liabilities,
#money-flow,
#forecasts,
#learn,
#get-started {
	scroll-margin-top: calc(var(--fc-public-header-height) + 18px);
}

/*
 * WordPress admin toolbar sits above our fixed public header
 * while logged in.
 */
.admin-bar .fc-public-header {
	top: 32px !important;
}

@media screen and (max-width: 782px) {

	:root {
		--fc-public-header-height: 70px;
	}

	.admin-bar .fc-public-header {
		top: 46px !important;
	}

	.fc-hero-inner-v3 {
		padding-top: 28px;
	}
}

/* === FIRECRACKER FIXED HEADER REFINEMENT END === */

/* === FIRECRACKER HOMEPAGE SECTION GAP FIX START === */

/*
 * WordPress applies its normal block spacing between the sibling
 * Groups inside the homepage story. That exposes a thin strip of
 * the page canvas between our colour-transition sections.
 *
 * The product-story sections should meet directly so each colour
 * flows cleanly into the next.
 */
.fc-home-story {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.fc-home-story > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.fc-home-story > * + * {
	margin-block-start: 0 !important;
}

.fc-story-section,
.fc-final-cta {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* === FIRECRACKER HOMEPAGE SECTION GAP FIX END === */

/* === FIRECRACKER DEMO JOURNEY START === */

/* Homepage screenshot CTAs */

.fc-story-media-actions {
	justify-content: center;
	margin-top: 22px;
}

.fc-story-media-actions .wp-block-button__link {
	padding: 0.72rem 1.08rem;
	font-size: 14px;
}


/* Demo Profiles page */

.fc-demo-page-main,
.fc-demo-page,
.fc-demo-page > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.fc-demo-page {
	overflow: hidden;
}

.fc-demo-hero {
	background:
		radial-gradient(
			circle at 22% 30%,
			rgba(244, 93, 34, 0.08),
			transparent 31%
		),
		radial-gradient(
			circle at 80% 72%,
			rgba(155, 124, 245, 0.10),
			transparent 35%
		),
		#f8f9fc;
}

.fc-demo-hero-inner {
	max-width: 900px;
	padding-top: clamp(72px, 8vw, 112px);
	padding-bottom: clamp(72px, 8vw, 112px);
}

.fc-demo-eyebrow,
.fc-demo-profile-eyebrow {
	margin: 0 0 16px;
	color: var(--fc-demo-accent, var(--wp--preset--color--firecracker-orange));
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1.3;
}

.fc-demo-eyebrow {
	text-align: center;
}

.fc-demo-title {
	max-width: 820px;
	margin: 0 auto 24px;
	font-size: clamp(40px, 4.7vw, 58px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.fc-demo-lede {
	max-width: 760px;
	margin: 0 auto;
	color: var(--wp--preset--color--muted);
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.65;
}

.fc-demo-profile-section {
	position: relative;
	overflow: hidden;
	margin: 0 !important;
}

.fc-demo-profile-inner {
	padding-top: clamp(84px, 8vw, 124px);
	padding-bottom: clamp(84px, 8vw, 124px);
}

.fc-demo-actions {
	margin-top: 30px;
}


/*
 * Give each profile a slightly different FIRECracker atmosphere
 * without implying the colour has financial meaning.
 */

.fc-demo-maya {
	--fc-demo-accent: #D69D00;
	--fc-placeholder-wash: rgba(244, 180, 0, 0.12);
	background:
		linear-gradient(
			180deg,
			#f8f9fc 0%,
			#fff9e8 18%,
			#fff9e8 82%,
			#eef9fe 100%
		);
}

.fc-demo-chris {
	--fc-demo-accent: #238EB9;
	--fc-placeholder-wash: rgba(53, 181, 232, 0.12);
	background:
		linear-gradient(
			180deg,
			#eef9fe 0%,
			#edf8fd 18%,
			#edf8fd 82%,
			#f5f1ff 100%
		);
}

.fc-demo-priya {
	--fc-demo-accent: #7659D8;
	--fc-placeholder-wash: rgba(155, 124, 245, 0.13);
	background:
		linear-gradient(
			180deg,
			#f5f1ff 0%,
			#f7f4ff 18%,
			#f7f4ff 82%,
			#effaf4 100%
		);
}

.fc-demo-blank {
	--fc-demo-accent: #319A60;
	--fc-placeholder-wash: rgba(82, 194, 129, 0.13);
	background:
		linear-gradient(
			180deg,
			#effaf4 0%,
			#f0faf5 18%,
			#f0faf5 82%,
			#fff4e9 100%
		);
}

.fc-demo-profile-section .fc-story-placeholder::before {
	background: var(--fc-placeholder-wash);
}


/* Responsive */

@media screen and (max-width: 782px) {

	.fc-demo-hero-inner {
		padding-top: 58px;
		padding-bottom: 64px;
	}

	.fc-demo-profile-inner {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	.fc-demo-title {
		font-size: clamp(36px, 9vw, 48px);
	}
}

@media screen and (max-width: 600px) {

	.fc-demo-profile-inner {
		padding-top: 58px;
		padding-bottom: 58px;
	}

	.fc-story-media-actions {
		margin-top: 18px;
	}
}

/* === FIRECRACKER DEMO JOURNEY END === */

/* === FIRECRACKER PUBLIC DEMOS PAGE START === */

.fc-demo-page-main,
.fc-demos-page,
.fc-demos-page > *,
.fc-demo-section {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.fc-demos-page {
	overflow: hidden;
}


/* Intro */

.fc-demos-hero {
	background:
		radial-gradient(
			circle at 19% 26%,
			rgba(244, 93, 34, 0.07),
			transparent 31%
		),
		radial-gradient(
			circle at 82% 72%,
			rgba(155, 124, 245, 0.10),
			transparent 34%
		),
		#f8f9fc;
}

.fc-demos-hero-inner {
	max-width: 940px;
	padding-top: clamp(72px, 8vw, 112px);
	padding-bottom: clamp(80px, 8vw, 120px);
}

.fc-demos-eyebrow {
	margin: 0 auto 17px;
	color: var(--wp--preset--color--firecracker-orange);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1.3;
}

.fc-demos-title {
	max-width: 880px;
	margin: 0 auto 24px;
	font-size: clamp(40px, 4.7vw, 58px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.026em;
	text-wrap: balance;
}

.fc-demos-lede {
	max-width: 780px;
	margin: 0 auto;
	color: var(--wp--preset--color--muted);
	font-size: clamp(18px, 1.6vw, 20px);
	line-height: 1.65;
}

.fc-demos-help {
	max-width: 700px;
	margin: 20px auto 0;
	color: var(--wp--preset--color--muted);
	font-size: 15px;
	line-height: 1.6;
}


/* Profiles */

.fc-demo-section {
	position: relative;
	overflow: hidden;
}

.fc-demo-inner {
	padding-top: clamp(84px, 8vw, 124px);
	padding-bottom: clamp(84px, 8vw, 124px);
}

.fc-demo-profile-label {
	margin: 0 0 16px;
	color: var(--fc-demo-accent);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1.3;
}

.fc-demo-actions {
	margin-top: 30px;
}


/* Maya */

.fc-demo-maya {
	--fc-demo-accent: #D69D00;
	--fc-placeholder-wash: rgba(244, 180, 0, 0.12);

	background:
		linear-gradient(
			180deg,
			#f8f9fc 0%,
			#fff9e8 20%,
			#fff9e8 80%,
			#eef9fe 100%
		);
}


/* Chris */

.fc-demo-chris {
	--fc-demo-accent: #238EB9;
	--fc-placeholder-wash: rgba(53, 181, 232, 0.12);

	background:
		linear-gradient(
			180deg,
			#eef9fe 0%,
			#edf8fd 20%,
			#edf8fd 80%,
			#f5f1ff 100%
		);
}


/* Priya */

.fc-demo-priya {
	--fc-demo-accent: #7659D8;
	--fc-placeholder-wash: rgba(155, 124, 245, 0.13);

	background:
		linear-gradient(
			180deg,
			#f5f1ff 0%,
			#f7f4ff 20%,
			#f7f4ff 80%,
			#effaf4 100%
		);
}


/* Blank */

.fc-demo-blank {
	--fc-demo-accent: #319A60;
	--fc-placeholder-wash: rgba(82, 194, 129, 0.13);

	background:
		linear-gradient(
			180deg,
			#effaf4 0%,
			#f0faf5 20%,
			#f0faf5 80%,
			#fff4e9 100%
		);
}

.fc-demo-section .fc-story-placeholder::before {
	background: var(--fc-placeholder-wash);
}


/* Closing */

.fc-demos-close {
	background:
		radial-gradient(
			circle at 22% 24%,
			rgba(244, 180, 0, 0.10),
			transparent 30%
		),
		radial-gradient(
			circle at 82% 76%,
			rgba(244, 93, 34, 0.08),
			transparent 31%
		),
		#fff4e9;
}

.fc-demos-close-inner {
	max-width: 820px;
	padding-top: clamp(84px, 8vw, 124px);
	padding-bottom: clamp(84px, 8vw, 124px);
}

.fc-demos-home-link {
	margin-top: 28px;
}

.fc-demos-home-link a {
	color: var(--wp--preset--color--ink);
	font-weight: 800;
	text-decoration: none;
}

.fc-demos-home-link a:hover,
.fc-demos-home-link a:focus {
	color: var(--wp--preset--color--firecracker-orange);
}


/* Mobile */

@media screen and (max-width: 782px) {

	.fc-demos-hero-inner {
		padding-top: 58px;
		padding-bottom: 70px;
	}

	.fc-demos-title {
		font-size: clamp(36px, 9vw, 48px);
	}

	.fc-demo-inner {
		padding-top: 70px;
		padding-bottom: 70px;
	}
}

@media screen and (max-width: 600px) {

	.fc-demo-inner {
		padding-top: 58px;
		padding-bottom: 58px;
	}

	.fc-demos-close-inner {
		padding-top: 68px;
		padding-bottom: 68px;
	}
}

/* === FIRECRACKER PUBLIC DEMOS PAGE END === */

/* ==========================================================
   FIRECracker demo profiles page
   ========================================================== */

.fc-demo-hero {
  padding: 88px 24px 72px;
  background:
    radial-gradient(circle at 82% 26%, rgba(244, 112, 47, 0.08) 0, rgba(244, 112, 47, 0.08) 92px, transparent 93px),
    linear-gradient(135deg, #f7f3ef 0%, #f3f4fb 52%, #eff0ff 100%);
  border-top: 1px solid #eef1f6;
}

.fc-demo-hero__inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.fc-demo-eyebrow {
  margin: 0 0 10px;
  color: #f4702f;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fc-demo-hero h1 {
  margin: 0;
  color: #0f1830;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.fc-demo-hero__lede {
  max-width: 760px;
  margin: 18px auto 0;
  color: #5e667d;
  font-size: 1.06rem;
  line-height: 1.7;
}

.fc-demo-section {
  padding: 82px 24px;
  border-top: 1px solid rgba(15, 24, 48, 0.05);
}

.fc-demo-section--maya {
  background: #f8f5e8;
}

.fc-demo-section--chris {
  background: #ebf5fb;
}

.fc-demo-section--priya {
  background: #f4eefb;
}

.fc-demo-section--blank {
  background: #edf7f2;
}

.fc-demo-section--cta {
  background: #fbf1e6;
  padding: 88px 24px;
}

.fc-demo-section__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.fc-demo-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 72px;
  align-items: center;
}

.fc-demo-story.is-reversed {
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
}

.fc-demo-story.is-reversed .fc-demo-story__visual {
  order: 1;
}

.fc-demo-story.is-reversed .fc-demo-story__copy {
  order: 2;
}

.fc-demo-story__copy {
  max-width: 520px;
}

.fc-demo-story__copy h2 {
  margin: 0 0 14px;
  color: #0f1830;
  font-size: clamp(1.95rem, 3vw, 2.85rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.fc-demo-story__copy p {
  margin: 0 0 18px;
  color: #5e667d;
  line-height: 1.7;
  font-size: 1rem;
}

.fc-demo-story__copy ul {
  margin: 0 0 22px 1.15rem;
  padding: 0;
  color: #44506a;
  line-height: 1.75;
}

.fc-demo-story__copy li {
  margin-bottom: 0.35rem;
}

.fc-demo-story__eyebrow {
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fc-demo-section--maya .fc-demo-story__eyebrow {
  color: #cf9a00;
}

.fc-demo-section--chris .fc-demo-story__eyebrow {
  color: #2fa3de;
}

.fc-demo-section--priya .fc-demo-story__eyebrow {
  color: #8f63e6;
}

.fc-demo-section--blank .fc-demo-story__eyebrow {
  color: #27a55d;
}

.fc-demo-story__actions {
  margin-top: 18px;
}

.fc-demo-story__actions .wp-block-button__link,
.fc-demo-story__actions a,
.fc-demo-cta__actions .wp-block-button__link,
.fc-demo-cta__actions a {
  display: inline-block;
  padding: 12px 18px;
  background: #f4702f;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(244, 112, 47, 0.18);
}

.fc-demo-story__actions a:hover,
.fc-demo-cta__actions a:hover {
  filter: brightness(0.98);
}

.fc-profile-card {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 24, 48, 0.06);
  border-radius: 24px;
  padding: 28px 28px 24px;
  box-shadow: 0 22px 48px rgba(24, 36, 68, 0.12);
  overflow: hidden;
}

.fc-profile-card::before,
.fc-profile-card::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.fc-profile-card::before {
  width: 120px;
  height: 120px;
  right: -28px;
  top: -24px;
  opacity: 0.16;
}

.fc-profile-card::after {
  width: 84px;
  height: 84px;
  left: -18px;
  bottom: -18px;
  opacity: 0.15;
}

.fc-profile-card--maya::before,
.fc-profile-card--maya::after {
  background: #f4c84d;
}

.fc-profile-card--chris::before,
.fc-profile-card--chris::after {
  background: #47b1e8;
}

.fc-profile-card--priya::before,
.fc-profile-card--priya::after {
  background: #a77bf1;
}

.fc-profile-card--blank::before,
.fc-profile-card--blank::after {
  background: #4fc37b;
}

.fc-profile-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.fc-profile-card__name {
  margin: 0;
  color: #0f1830;
  font-size: 1.3rem;
  font-weight: 800;
}

.fc-profile-card__label {
  margin: 4px 0 0;
  color: #7b849c;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fc-profile-card__age {
  text-align: right;
}

.fc-profile-card__age-number {
  display: block;
  color: #0f1830;
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.fc-profile-card__age-text {
  display: block;
  color: #6b748b;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fc-profile-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

.fc-profile-card__metric {
  background: rgba(243, 246, 251, 0.9);
  border: 1px solid rgba(15, 24, 48, 0.06);
  border-radius: 14px;
  padding: 12px 12px 10px;
}

.fc-profile-card__metric-label {
  display: block;
  color: #7a8298;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fc-profile-card__metric-value {
  display: block;
  margin-top: 6px;
  color: #0f1830;
  font-size: 1.15rem;
  font-weight: 800;
}

.fc-profile-card__timeline {
  position: relative;
  margin: 18px 0 18px;
  padding: 16px 0 10px;
}

.fc-profile-card__timeline-track {
  height: 6px;
  border-radius: 999px;
  background: #dce3ef;
  position: relative;
}

.fc-profile-card__timeline-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 6px;
  border-radius: 999px;
}

.fc-profile-card--maya .fc-profile-card__timeline-fill {
  width: 78%;
  background: linear-gradient(90deg, #e2b226, #f3cc62);
}

.fc-profile-card--chris .fc-profile-card__timeline-fill {
  width: 52%;
  background: linear-gradient(90deg, #2fa3de, #63c4f1);
}

.fc-profile-card--priya .fc-profile-card__timeline-fill {
  width: 24%;
  background: linear-gradient(90deg, #8f63e6, #c39cff);
}

.fc-profile-card--blank .fc-profile-card__timeline-fill {
  width: 35%;
  background: linear-gradient(90deg, #27a55d, #62cf87);
}

.fc-profile-card__timeline-points {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: #6a7389;
  font-size: 0.78rem;
  font-weight: 700;
}

.fc-profile-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fc-profile-card__tag {
  padding: 7px 11px;
  border-radius: 999px;
  background: #f2f5fb;
  border: 1px solid rgba(15, 24, 48, 0.06);
  color: #38435f;
  font-size: 0.82rem;
  font-weight: 700;
}

.fc-profile-card__bridge {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(47, 163, 222, 0.08);
  color: #275d7f;
  font-size: 0.9rem;
  font-weight: 700;
}

.fc-profile-card__blank-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.fc-profile-card__blank-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: rgba(243, 246, 251, 0.9);
  border: 1px dashed rgba(15, 24, 48, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
  color: #46516b;
  font-size: 0.92rem;
  font-weight: 700;
}

.fc-demo-cta {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.fc-demo-cta h2 {
  margin: 0 0 12px;
  color: #0f1830;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.fc-demo-cta p {
  margin: 0 auto 22px;
  max-width: 660px;
  color: #5e667d;
  line-height: 1.75;
}

.fc-demo-cta__back {
  margin-top: 18px;
  font-size: 0.95rem;
}

.fc-demo-cta__back a {
  color: #0f1830;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 900px) {
  .fc-demo-section {
    padding: 68px 20px;
  }

  .fc-demo-story,
  .fc-demo-story.is-reversed {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .fc-demo-story.is-reversed .fc-demo-story__visual,
  .fc-demo-story.is-reversed .fc-demo-story__copy {
    order: unset;
  }

  .fc-profile-card__metrics {
    grid-template-columns: 1fr;
  }

  .fc-demo-hero {
    padding: 72px 20px 60px;
  }
}


/* === FIRECRACKER DEMO CARD CONSISTENCY START === */

/*
 * Remove decorative bubbles. Profile visuals should communicate
 * the planning scenario rather than add unrelated decoration.
 */
.fc-profile-card::before,
.fc-profile-card::after {
	display: none !important;
}

.fc-demo-hero {
	background: #f6f6fb !important;
}

/*
 * Keep all profile sections on the same structural grid.
 */
.fc-demo-story,
.fc-demo-story.is-reversed {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 400px !important;
	gap: clamp(52px, 7vw, 86px) !important;
	align-items: center !important;
}

.fc-demo-story.is-reversed {
	grid-template-columns: 400px minmax(0, 1fr) !important;
}

.fc-demo-story__copy {
	width: 100%;
	max-width: 520px;
}

.fc-demo-story__visual {
	width: 100%;
	max-width: 400px;
	align-self: center;
	justify-self: center;
}

/*
 * Explicit alternating positions prevent individual profile
 * sections drifting out of alignment.
 */
.fc-demo-story:not(.is-reversed) .fc-demo-story__copy {
	grid-column: 1;
	grid-row: 1;
}

.fc-demo-story:not(.is-reversed) .fc-demo-story__visual {
	grid-column: 2;
	grid-row: 1;
}

.fc-demo-story.is-reversed .fc-demo-story__visual {
	grid-column: 1;
	grid-row: 1;
	order: initial !important;
}

.fc-demo-story.is-reversed .fc-demo-story__copy {
	grid-column: 2;
	grid-row: 1;
	order: initial !important;
}


/* ---------- Consistent profile visual ---------- */

.fc-profile-card {
	box-sizing: border-box;
	width: 400px;
	max-width: 100%;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid rgba(15, 24, 48, 0.07);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow:
		0 20px 44px rgba(24, 36, 68, 0.10),
		0 4px 12px rgba(24, 36, 68, 0.04);
}

.fc-profile-card__top {
	min-height: 60px;
	margin-bottom: 20px;
}

.fc-profile-card__name {
	font-size: 1.25rem;
	line-height: 1.15;
}

.fc-profile-card__label {
	margin-top: 5px;
	font-size: 0.72rem;
}

.fc-profile-card__age-number {
	font-size: 2.15rem;
}

.fc-profile-card__age-text {
	margin-top: 4px;
	font-size: 0.68rem;
}


/*
 * Every card gets exactly three metric cells of the same size.
 */
.fc-profile-card__metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}

.fc-profile-card__metric {
	box-sizing: border-box;
	min-height: 68px;
	padding: 11px;
}

.fc-profile-card__metric-label {
	min-height: 18px;
	font-size: 0.64rem;
	line-height: 1.25;
}

.fc-profile-card__metric-value {
	margin-top: 5px;
	font-size: 1.05rem;
}


/*
 * Reserve the same vertical space for the timeline in every profile.
 */
.fc-profile-card__timeline {
	box-sizing: border-box;
	min-height: 72px;
	margin: 0 0 16px;
	padding-top: 12px;
}

.fc-profile-card__timeline-track {
	height: 5px;
}

.fc-profile-card__timeline-fill {
	height: 5px;
}

.fc-profile-card__timeline-points {
	margin-top: 9px;
	font-size: 0.66rem;
}


/*
 * Tags always occupy the bottom of the card.
 */
.fc-profile-card__tags {
	margin-top: auto;
	min-height: 58px;
	align-content: flex-end;
	gap: 7px;
}

.fc-profile-card__tag {
	padding: 6px 9px;
	font-size: 0.7rem;
}


/* Chris' bridge message must not make his card taller. */
.fc-profile-card__bridge {
	box-sizing: border-box;
	min-height: 44px;
	margin: -3px 0 12px;
	padding: 9px 11px;
	font-size: 0.72rem;
	line-height: 1.35;
}


/*
 * The blank profile uses the same three-cell metric layout rather
 * than a structurally different card.
 */
.fc-profile-card--blank .fc-profile-card__blank-list {
	display: none;
}

.fc-profile-card--blank .fc-profile-card__timeline-fill {
	width: 0;
}

.fc-profile-card--blank .fc-profile-card__timeline-track {
	background:
		repeating-linear-gradient(
			90deg,
			#dce3ef 0,
			#dce3ef 9px,
			transparent 9px,
			transparent 14px
		);
}


/* ---------- Slightly tighter section rhythm ---------- */

.fc-demo-section {
	padding-top: 68px !important;
	padding-bottom: 68px !important;
}

.fc-demo-section--cta {
	padding-top: 72px !important;
	padding-bottom: 72px !important;
}


/*
 * Preserve the two-column story at common laptop/tablet-landscape
 * widths. Only stack when space genuinely becomes constrained.
 */
@media (max-width: 760px) {

	.fc-demo-story,
	.fc-demo-story.is-reversed {
		grid-template-columns: 1fr !important;
		gap: 34px !important;
	}

	.fc-demo-story .fc-demo-story__copy,
	.fc-demo-story .fc-demo-story__visual,
	.fc-demo-story.is-reversed .fc-demo-story__copy,
	.fc-demo-story.is-reversed .fc-demo-story__visual {
		grid-column: 1 !important;
	}

	.fc-demo-story .fc-demo-story__copy,
	.fc-demo-story.is-reversed .fc-demo-story__copy {
		grid-row: 1 !important;
	}

	.fc-demo-story .fc-demo-story__visual,
	.fc-demo-story.is-reversed .fc-demo-story__visual {
		grid-row: 2 !important;
	}

	.fc-demo-story__visual {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	.fc-profile-card {
		width: 100%;
	}

	.fc-demo-section {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
}

/* === FIRECRACKER DEMO CARD CONSISTENCY END === */

/* === FIRECRACKER HOMEPAGE MEDIA POLISH START === */


/* ----------------------------------------------------------
   Feature-section proportions
   ---------------------------------------------------------- */

/*
 * Give the long-form homepage a little more horizontal room.
 * The copy remains compact while the actual FIRECracker product
 * screens become the dominant evidence in each section.
 */
.fc-story-inner {
	width: min(1280px, calc(100% - 64px));
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.fc-story-grid {
	grid-template-columns:
		minmax(0, 0.78fr)
		minmax(0, 1.22fr) !important;

	gap: clamp(44px, 5vw, 72px) !important;
}

/*
 * Forecast is the strongest product story, so give its visual
 * slightly more of the available width.
 */
.fc-story-forecast-grid {
	grid-template-columns:
		minmax(0, 0.70fr)
		minmax(0, 1.30fr) !important;
}


/* ----------------------------------------------------------
   Real product screenshots
   ---------------------------------------------------------- */

.fc-story-media {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.fc-story-media .wp-block-image {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.fc-story-media .wp-block-image img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	object-fit: contain;
	border-radius: 18px;
}

/*
 * If an Image block was inserted inside one of the original
 * screenshot placeholder Groups, remove that placeholder's
 * padding/frame so the screenshot can use the full media width.
 */
.fc-story-placeholder:has(.wp-block-image) {
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.fc-story-placeholder:has(.wp-block-image)::before {
	display: none !important;
}

/*
 * Keep the CTA clearly subordinate to the product itself.

 /
.fc-story-media-actions {
	justify-content: center;
	margin-top: 16px !important;
}

.fc-story-media-actions .wp-block-button__link {
	padding: 0.68rem 1rem;
	font-size: 13px;
}


/* ----------------------------------------------------------
   Homepage Demo Profiles preview
   ---------------------------------------------------------- */

.fc-demo-preview {
	width: 100%;
	box-sizing: border-box;
	padding: clamp(20px, 2.5vw, 28px);
	border: 1px solid rgba(15, 23, 42, 0.07);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.82);
	box-shadow:
		0 24px 54px rgba(15, 23, 42, 0.08),
		0 4px 12px rgba(15, 23, 42, 0.035);
}

.fc-demo-preview__header {
	margin-bottom: 18px;
}

.fc-demo-preview__header strong {
	display: block;
	margin-top: 4px;
	color: var(--wp--preset--color--ink);
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.2;
}

.fc-demo-preview__eyebrow {
	color: var(--wp--preset--color--firecracker-orange);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.fc-demo-preview__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.fc-demo-preview-card {
	box-sizing: border-box;
	min-height: 148px;
	display: flex;
	flex-direction: column;
	padding: 15px;
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: 15px;
	color: var(--wp--preset--color--ink) !important;
	text-decoration: none !important;
	transition:
		transform 150ms ease,
		box-shadow 150ms ease,
		border-color 150ms ease;
}

.fc-demo-preview-card:hover,
.fc-demo-preview-card:focus {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
	border-color: rgba(15, 23, 42, 0.12);
}

.fc-demo-preview-card--maya {
	background: rgba(244, 180, 0, 0.09);
}

.fc-demo-preview-card--chris {
	background: rgba(53, 181, 232, 0.09);
}

.fc-demo-preview-card--priya {
	background: rgba(155, 124, 245, 0.09);
}

.fc-demo-preview-card--blank {
	background: rgba(82, 194, 129, 0.09);
}

.fc-demo-preview-card__top strong {
	display: block;
	font-size: 16px;
	line-height: 1.15;
}

.fc-demo-preview-card__top span {
	display: block;
	min-height: 30px;
	margin-top: 3px;
	color: var(--wp--preset--color--muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
}

.fc-demo-preview-card small {
	display: block;
	margin-top: auto;
	color: var(--wp--preset--color--muted);
	font-size: 10px;
	font-weight: 700;
}


/* Maya / Priya simple time-to-retirement visual */

.fc-demo-preview-card__journey {
	position: relative;
	height: 5px;
	margin: 15px 0 12px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.10);
	overflow: hidden;
}

.fc-demo-preview-card__journey span {
	display: block;
	height: 100%;
	border-radius: inherit;
}

.fc-demo-preview-card__journey--long span {
	width: 72%;
	background: #D69D00;
}

.fc-demo-preview-card__journey--short span {
	width: 24%;
	background: #7659D8;
}


/* Chris bridge visual */

.fc-demo-preview-card__bridge {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 7px;
	margin: 13px 0 12px;
	color: var(--wp--preset--color--muted);
	font-size: 9px;
	font-weight: 700;
}

.fc-demo-preview-card__bridge i {
	display: block;
	height: 4px;
	border-radius: 999px;
	background: #238EB9;
}


/* Blank-profile visual */

.fc-demo-preview-card__blank {
	display: grid;
	gap: 5px;
	margin: 13px 0 12px;
}

.fc-demo-preview-card__blank i {
	display: block;
	height: 8px;
	border-radius: 6px;
	background:
		repeating-linear-gradient(
			90deg,
			rgba(49, 154, 96, 0.30) 0,
			rgba(49, 154, 96, 0.30) 10px,
			transparent 10px,
			transparent 15px
		);
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media screen and (max-width: 1000px) {

	.fc-story-inner {
		width: min(100% - 40px, 1100px);
	}

	.fc-story-grid,
	.fc-story-forecast-grid {
		grid-template-columns:
			minmax(0, 0.88fr)
			minmax(0, 1.12fr) !important;

		gap: 40px !important;
	}
}

@media screen and (max-width: 782px) {

	.fc-story-inner {
		width: min(100% - 32px, 760px);
	}

	.fc-story-grid,
	.fc-story-forecast-grid {
		grid-template-columns: 1fr !important;
		gap: 38px !important;
	}

	.fc-story-reverse .fc-story-copy,
	.fc-story-reverse .fc-story-media {
		order: initial;
	}

	.fc-story-media {
		max-width: 720px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

@media screen and (max-width: 520px) {

	.fc-story-inner {
		width: calc(100% - 24px);
	}

	.fc-demo-preview {
		padding: 16px;
	}

	.fc-demo-preview__grid {
		grid-template-columns: 1fr;
	}

	.fc-demo-preview-card {
		min-height: 130px;
	}
}


/* === FIRECRACKER HOMEPAGE MEDIA POLISH END === */

/* === FIRECRACKER REVERSED STORY MEDIA WIDTH FIX START === */

/*
 * Standard feature sections use approximately:
 *
 *     42% copy | 58% screenshot
 *
 * Assets and Money Flow reverse the visual order, so their
 * column proportions must reverse too. Previously only the
 * content order changed, leaving their screenshots trapped
 * inside the smaller 42% column.
 */

.fc-story-assets .fc-story-grid,
.fc-story-money-flow .fc-story-grid {
	grid-template-columns:
		minmax(0, 1.22fr)
		minmax(0, 0.78fr) !important;
}

/*
 * Give the shallow Assets screenshot a touch more visual presence.
 * Its natural aspect ratio means it remains physically shorter
 * than Liabilities even when both receive comparable width.
 */
.fc-story-assets .fc-story-media {
	transform: scale(1.04);
	transform-origin: center;
}

/*
 * Money Flow benefits from the full reversed media column but
 * doesn't need additional scaling beyond that.
 */
.fc-story-money-flow .fc-story-media {
	transform: none;
}


/* Tablet / narrower desktop */
@media screen and (max-width: 1000px) {

	.fc-story-assets .fc-story-grid,
	.fc-story-money-flow .fc-story-grid {
		grid-template-columns:
			minmax(0, 1.12fr)
			minmax(0, 0.88fr) !important;
	}

	.fc-story-assets .fc-story-media {
		transform: none;
	}
}


/* Mobile returns to the normal stacked layout */
@media screen and (max-width: 782px) {

	.fc-story-assets .fc-story-grid,
	.fc-story-money-flow .fc-story-grid {
		grid-template-columns: 1fr !important;
	}

	.fc-story-assets .fc-story-media,
	.fc-story-money-flow .fc-story-media {
		transform: none;
	}
}

/* === FIRECRACKER REVERSED STORY MEDIA WIDTH FIX END === */

/* === FIRECRACKER PUBLIC LEGAL + FOOTER START === */


/* ----------------------------------------------------------
   Remove WordPress' duplicate page title on our custom
   Legal and Contact layouts.
   ---------------------------------------------------------- */

body:has(.fc-legal-shell) .wp-block-post-title,
body:has(.fc-contact-shell) .wp-block-post-title {
	display: none !important;
}


/* ----------------------------------------------------------
   Legal
   ---------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

.fc-legal-shell {
	box-sizing: border-box;
	width: 100%;
	padding:
		clamp(104px, 10vw, 132px)
		24px
		clamp(72px, 8vw, 96px);
	background: #F3F5F8;
}

.fc-legal-page {
	width: min(800px, 100%);
	margin: 0 auto;
	color: #0F172A;
}

.fc-legal-intro {
	margin-bottom: 50px;
}

.fc-legal-kicker,
.fc-section-label {
	margin: 0 0 9px;
	color: #F45D22;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.fc-legal-intro h1,
.fc-contact-intro h1 {
	margin: 0;
	font-size: clamp(38px, 5vw, 52px);
	line-height: 1.04;
	letter-spacing: -0.035em;
}

.fc-legal-lead {
	max-width: 620px;
	margin: 16px 0 0;
	color: #5B6472;
	font-size: clamp(18px, 2vw, 21px);
	line-height: 1.5;
}

.fc-legal-updated {
	margin: 16px 0 0;
	color: #7A8492;
	font-size: 12px;
	font-weight: 600;
}

.fc-legal-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 26px 0 0;
}

.fc-legal-nav a {
	display: inline-flex;
	align-items: center;
	padding: 8px 11px;
	border: 1px solid #D4DAE3;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	color: #0F172A !important;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none !important;
}

.fc-legal-nav a:hover,
.fc-legal-nav a:focus {
	border-color: #F45D22;
	background: #FFFFFF;
}

.fc-legal-section {
	scroll-margin-top: 110px;
	padding: 50px 0;
	border-top: 1px solid #D8DEE7;
	font-size: 16px;
	line-height: 1.68;
}

.fc-legal-section:first-of-type {
	border-top: 0;
}

.fc-legal-section h2 {
	margin: 0 0 18px;
	font-size: clamp(27px, 3vw, 33px);
	line-height: 1.16;
	letter-spacing: -0.025em;
}

.fc-legal-section h3 {
	margin: 28px 0 8px;
	font-size: 18px;
	line-height: 1.3;
}

.fc-legal-section p {
	margin: 0 0 15px;
}

.fc-legal-section a,
.fc-legal-meta a {
	color: inherit;
	font-weight: 700;
	text-decoration-color: #F45D22;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.fc-legal-section code {
	padding: 2px 5px;
	border-radius: 5px;
	background: #E8EDF5;
	font-size: 0.9em;
}

.fc-legal-callout {
	margin: 20px 0 26px;
	padding: 18px 20px;
	border: 1px solid #DCE2EA;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.75);
}

.fc-legal-callout--accent {
	border-left: 3px solid #F45D22;
}

.fc-legal-callout strong {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
}

.fc-legal-callout p {
	margin: 0;
	color: #5B6472;
	font-size: 14px;
	line-height: 1.55;
}

.fc-legal-meta {
	margin-top: 22px;
	padding-top: 24px;
	border-top: 1px solid #D8DEE7;
	color: #6A7482;
	font-size: 12px;
	line-height: 1.6;
}

.fc-legal-meta p {
	margin: 3px 0;
}


/* ----------------------------------------------------------
   Contact
   ---------------------------------------------------------- */

.fc-contact-shell {
	box-sizing: border-box;
	width: 100%;
	min-height: 620px;
	padding:
		clamp(118px, 11vw, 150px)
		24px
		clamp(90px, 10vw, 130px);
	background: #F3F5F8;
}

.fc-contact-page {
	width: min(680px, 100%);
	margin: 0 auto;
	color: #0F172A;
}

.fc-contact-intro {
	margin-bottom: 32px;
}

.fc-contact-lead {
	max-width: 560px;
	margin: 16px 0 0;
	color: #5B6472;
	font-size: 19px;
	line-height: 1.55;
}

.fc-contact-primary {
	display: inline-block;
	margin-bottom: 40px;
	color: #0F172A !important;
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 800;
	letter-spacing: -0.025em;
	text-decoration-color: #F45D22;
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}

.fc-contact-types {
	display: grid;
	grid-template-columns:
		repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.fc-contact-types > div {
	padding: 18px;
	border: 1px solid #DCE2EA;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.72);
}

.fc-contact-types strong {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
}

.fc-contact-types span {
	display: block;
	color: #5B6472;
	font-size: 12px;
	line-height: 1.45;
}


/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */

.fc-site-footer {
	box-sizing: border-box;
	width: 100%;
	padding: 48px 24px 24px;
	background: #0F172A;
	color: rgba(255, 255, 255, 0.76);
}

.fc-footer-inner {
	width: min(1200px, 100%);
	margin: 0 auto;
}

.fc-footer-top {
	display: grid;
	grid-template-columns:
		minmax(220px, 1fr)
		auto;
	gap: 42px;
	align-items: start;
}

.fc-footer-wordmark {
	display: inline-block;
	color: #FFFFFF !important;
	font-size: 23px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	text-decoration: none !important;
}

.fc-footer-wordmark span {
	color: #F45D22;
}

.fc-footer-brand p {
	margin: 11px 0 0;
	color: rgba(255, 255, 255, 0.58);
	font-size: 13px;
	line-height: 1.45;
}

.fc-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px 21px;
	max-width: 650px;
}

.fc-footer-links a {
	color: rgba(255, 255, 255, 0.80) !important;
	font-size: 13px;
	font-weight: 650;
	text-decoration: none !important;
}

.fc-footer-links a:hover,
.fc-footer-links a:focus {
	color: #FFFFFF !important;
	text-decoration: underline !important;
	text-decoration-color: #F45D22 !important;
	text-underline-offset: 4px;
}

.fc-footer-rule {
	height: 1px;
	margin: 28px 0 18px;
	background: rgba(255, 255, 255, 0.09);
}

.fc-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
}

.fc-footer-bottom p {
	margin: 0;
	color: rgba(255, 255, 255, 0.42);
	font-size: 11px;
}

.fc-footer-bottom a {
	color: rgba(255, 255, 255, 0.56) !important;
	text-decoration: none !important;
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media screen and (max-width: 760px) {

	.fc-legal-shell,
	.fc-contact-shell {
		padding-left: 18px;
		padding-right: 18px;
	}

	.fc-contact-types {
		grid-template-columns: 1fr;
	}

	.fc-footer-top {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.fc-footer-links {
		justify-content: flex-start;
	}
}

@media screen and (max-width: 520px) {

	.fc-legal-nav {
		display: grid;
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.fc-legal-nav a {
		justify-content: center;
		text-align: center;
	}

	.fc-footer-links {
		display: grid;
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.fc-footer-bottom {
		display: grid;
	}
}


/* === FIRECRACKER PUBLIC LEGAL + FOOTER END === */