/*
Theme Name: BoxCart Marketing
Theme URI: https://boxcart.dev
Author: Norwich Website Design
Author URI: https://norwichwebsite.design
Description: Custom marketing theme for the BoxCart WordPress plugin website.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary
Text Domain: boxcart-marketing
*/

/* Rendered screenshot container (replaces the dashed .screenshot-placeholder boxes) */
.screenshot {
	width: 100%;
	margin: 0;
	padding: 0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	border: 1px solid #e5e7eb;
	background: #fff;
}
.screenshot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}
.browser-frame .screenshot {
	border: none;
	border-radius: 0;
	box-shadow: none;
}
.browser-frame .screenshot img {
	border-radius: 0;
}

/* Pricing tier badge — full-width pill with centered text.
   Defined in raw CSS because not every Tailwind utility we need
   is present in the compiled theme.css (e.g. bg-gray-100 wasn't). */
.boxcart-pricing-tier-badge {
	display: block;
	text-align: center;
	width: 100%;
}
.boxcart-pricing-tier-badge--free {
	background-color: #f3f4f6;
	color: #374151;
}
.boxcart-pricing-tier-badge--pro {
	background-color: #e8f3ee;
	color: #267949;
}
.boxcart-pricing-tier-badge--popular {
	background-color: #267949;
	color: #ffffff;
}

/* Tier tags — small pill badges indicating whether a section/feature is
   available in Free, Pro, or both builds. Used on the features page, home
   page cards, and changelog entries. */
.boxcart-tier-tag,
.boxcart-pro-tag {
	display: inline-block;
	vertical-align: middle;
	padding: 4px 10px;
	margin-left: 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}
h1 .boxcart-tier-tag,
h2 .boxcart-tier-tag,
h3 .boxcart-tier-tag,
h1 .boxcart-pro-tag,
h2 .boxcart-pro-tag,
h3 .boxcart-pro-tag {
	font-size: 0.45em;
	padding: 5px 12px;
}

/* Free — neutral grey pill */
.boxcart-tier-tag--free {
	background-color: #f3f4f6;
	color: #4b5563;
}

/* Pro — brand green filled pill (matches existing .boxcart-pro-tag) */
.boxcart-tier-tag--pro,
.boxcart-pro-tag {
	background-color: #e8f3ee;
	color: #267949;
}

/* Free + Pro — outlined green to signal a mix of both builds */
.boxcart-tier-tag--both {
	background-color: #ffffff;
	color: #267949;
	box-shadow: inset 0 0 0 1px #267949;
}

/* Mobile: simplify the scroll-in animation to a subtle opacity fade only.
   Dropping the Y-translate prevents the "jumping" feel when users flick-scroll
   quickly on a phone and also reduces the cumulative layout shift metric. */
@media (max-width: 768px) {
	.animate-on-scroll {
		transform: none !important;
		transition: opacity 0.3s ease !important;
		transition-delay: 0s !important;
	}
	.animate-on-scroll.is-visible {
		transform: none !important;
	}
}

/* Users who have requested reduced motion get no animation at all. */
@media (prefers-reduced-motion: reduce) {
	.animate-on-scroll,
	.animate-on-scroll.is-visible {
		transform: none !important;
		transition: none !important;
		opacity: 1 !important;
	}
}

/* Feature comparison table: on mobile the three columns can overflow the
   viewport. Allow horizontal scroll inside the rounded card so the table stays
   readable without breaking the whole page layout. */
@media (max-width: 640px) {
	.boxcart-compare-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.boxcart-compare-table {
		min-width: 560px;
	}
}

/* Info-icon tooltip (used on feature comparison table) */
.boxcart-info-trigger {
	position: relative;
	flex-shrink: 0;
	margin-top: 2px;
	margin-left: 0.375rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	padding: 0;
	background: none;
	border: 0;
	color: #9ca3af;
	cursor: pointer;
	transition: color 0.15s ease;
}
.boxcart-info-trigger:hover,
.boxcart-info-trigger:focus-visible,
.boxcart-info-trigger[data-open] {
	color: #267949;
	outline: none;
}
.boxcart-info-trigger svg {
	width: 1rem;
	height: 1rem;
	display: block;
}
.boxcart-info-tooltip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	width: 16rem;
	max-width: min(80vw, 20rem);
	background: #111827;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.55;
	text-align: left;
	border-radius: 0.5rem;
	padding: 0.75rem 0.875rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
	z-index: 30;
	pointer-events: none;
	white-space: normal;
}
.boxcart-info-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #111827;
}
.boxcart-info-trigger:hover .boxcart-info-tooltip,
.boxcart-info-trigger:focus-visible .boxcart-info-tooltip,
.boxcart-info-trigger[data-open] .boxcart-info-tooltip {
	opacity: 1;
	visibility: visible;
}

/* Feature comparison table — keep rounded corners without overflow:hidden
   so info tooltips can escape the table wrapper. */
.boxcart-compare-table {
	border-collapse: separate;
	border-spacing: 0;
}
.boxcart-compare-table thead th:first-child {
	border-top-left-radius: 1rem;
}
.boxcart-compare-table thead th:last-child {
	border-top-right-radius: 1rem;
}
.boxcart-compare-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 1rem;
}
.boxcart-compare-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 1rem;
}

/* =============================================================
   Gravity Forms overrides — match the hand-rolled form styling
   the theme used before migration (Tailwind classes hard-coded in
   the markup). Keep in sync with the reference classes:
     label:  text-sm font-medium text-dark mb-1.5
     input:  w-full border border-gray-300 rounded-lg px-4 py-3
             text-sm text-dark placeholder-gray-400
             focus:ring-2 focus:ring-primary focus:border-primary
     button: px-6 py-3 bg-primary text-white text-sm font-semibold
             rounded-lg hover:bg-primary-hover
   Scoped under .gform_wrapper.gravity-theme because that's the
   class GF's default theme outputs — also gives enough specificity
   to beat GF's own rules without resorting to !important on every
   declaration.
   ============================================================= */

.gform_wrapper.gravity-theme,
.gform_wrapper {
	font-family: inherit;
	color: #111827; /* text-dark */
}

/* Kill any leftover GF chrome we don't want. */
.gform_wrapper .gform_required_legend,
.gform_wrapper .gform_heading {
	display: none;
}

/* --- Container + fields layout ---------------------------------- */
.gform_wrapper,
.gform_wrapper.gravity-theme,
.gform_wrapper .gform-body,
.gform_wrapper .gform_body {
	width: 100%;
	box-sizing: border-box;
}

/* Flex wrap lets us mix full-width + half-width rows predictably,
   without grid's tendency to collapse fieldset children. */
.gform_wrapper.gravity-theme .gform_fields,
.gform_wrapper .gform_fields {
	display: flex !important;
	flex-wrap: wrap;
	gap: 1.25rem; /* space-y-5 + col gap */
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}

.gform_wrapper .gform_fields > .gfield,
.gform_wrapper .gform_fields > fieldset.gfield {
	flex: 1 1 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 0; /* reset default fieldset border */
}

/* Two consecutive .boxcart-half fields share a row on sm+ screens. */
@media (min-width: 640px) {
	.gform_wrapper .gform_fields > .gfield.boxcart-half,
	.gform_wrapper .gform_fields > fieldset.gfield.boxcart-half {
		flex: 0 1 calc(50% - 0.625rem);
		max-width: calc(50% - 0.625rem);
	}
}

/* --- Labels --- */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	display: block;
	width: 100%;
	float: none;
	font-size: 0.875rem; /* text-sm */
	font-weight: 500;
	color: #111827;
	margin: 0 0 0.375rem; /* mb-1.5 */
	padding: 0;
	line-height: 1.4;
}

/* GF wraps the input in a .ginput_container div — make sure it's
   full-width so the input inside can stretch. */
.gform_wrapper .ginput_container {
	width: 100%;
	box-sizing: border-box;
}

/* --- "(Required)" → red asterisk --- */
/* GF wraps the required marker as:
     <span class="gfield_required">
       <span class="gfield_required gfield_required_text">(Required)</span>
     </span>
   We hide the text and replace with a red asterisk.                */
.gform_wrapper .gfield_required {
	color: transparent !important; /* hide outer-span whitespace */
	font-size: 0;
}
.gform_wrapper .gfield_required .gfield_required_text {
	display: inline-block;
	font-size: 0; /* hide "(Required)" string */
}
.gform_wrapper .gfield_required .gfield_required_text::before {
	content: "*";
	color: #ef4444;
	font-size: 0.875rem;
	font-weight: normal;
	margin-left: 3px;
	vertical-align: middle;
}

/* Inputs, textarea, select — match Tailwind input spec.
   GF's default stylesheet sets `.medium { width: 50%; }` on text inputs —
   override explicitly with !important to force 100% of the container. */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input.medium,
.gform_wrapper input.large,
.gform_wrapper input.small,
.gform_wrapper textarea,
.gform_wrapper textarea.medium,
.gform_wrapper textarea.large,
.gform_wrapper textarea.small,
.gform_wrapper select,
.gform_wrapper select.medium,
.gform_wrapper select.large,
.gform_wrapper select.small {
	display: block;
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid #d1d5db; /* border-gray-300 */
	border-radius: 0.5rem; /* rounded-lg */
	padding: 0.75rem 1rem; /* py-3 px-4 */
	font-size: 0.875rem; /* text-sm */
	color: #111827; /* text-dark */
	background-color: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	outline: none;
	box-shadow: none;
	appearance: auto;
	font-family: inherit;
}

.gform_wrapper input[type="text"]::placeholder,
.gform_wrapper input[type="email"]::placeholder,
.gform_wrapper input[type="url"]::placeholder,
.gform_wrapper input[type="tel"]::placeholder,
.gform_wrapper input[type="number"]::placeholder,
.gform_wrapper textarea::placeholder {
	color: #9ca3af; /* placeholder-gray-400 */
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: #267949; /* primary */
	box-shadow: 0 0 0 2px rgba(38, 121, 73, 0.2);
}

.gform_wrapper textarea {
	resize: vertical;
	min-height: 6.5rem;
}

/* Checkbox — subscribe-to-newsletter opt-in.
   GF markup:
     .gfield_checkbox > .gchoice > input.gfield-choice-input + label */
.gform_wrapper .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
}
.gform_wrapper .gfield-choice-input {
	margin: 0.2rem 0 0 !important;
	width: 1rem !important;
	height: 1rem !important;
	accent-color: #267949;
	flex-shrink: 0;
}
.gform_wrapper .gchoice label,
.gform_wrapper .gchoice .gform-field-label--type-inline {
	font-size: 0.875rem;
	font-weight: normal;
	color: #4b5563; /* gray-600 */
	line-height: 1.45;
	margin: 0;
}

/* Submit button — match "px-6 py-3 bg-primary text-white text-sm font-semibold
   rounded-lg hover:bg-primary-hover". */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	padding-top: 0.25rem;
	margin-top: 0;
	display: flex;
	justify-content: flex-start;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"].gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem; /* py-3 px-6 */
	background-color: #267949; /* primary */
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 0.5rem;
	border: 0;
	cursor: pointer;
	transition: background-color 0.15s ease;
	text-decoration: none;
	box-shadow: none;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus {
	background-color: #1f6a3f; /* primary-hover */
	outline: none;
}

/* Contact/Get-Help modal — the original markup had a full-width submit
   button. Scope to the support modal so other forms keep inline buttons. */
#support-modal .gform_wrapper .gform_button {
	width: 100%;
}

/* Confirmation / success message — match the hidden success panels currently
   styled as "bg-primary-light text-primary rounded-lg p-4". Style only the
   inner message, not the wrapper — they're nested, so styling both would
   double the padding. */
.gform_confirmation_message {
	margin-top: 1.25rem;
	padding: 1rem;
	border-radius: 0.5rem;
	background-color: #e8f3ee; /* primary-light */
	color: #267949;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
}

/* Validation error bubble — tone it down to match gentle form styling. */
.gform_wrapper .validation_error {
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 0.5rem;
	color: #b91c1c;
	font-size: 0.8125rem;
	font-weight: 500;
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
}
.gform_wrapper .gfield_validation_message {
	margin-top: 0.25rem;
	color: #b91c1c;
	font-size: 0.8125rem;
}

/* Help text displayed below a field (GF "Description" in "Below input"
   position) — matches "text-xs text-gray-500". */
.gform_wrapper .gfield_description {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: #6b7280;
	line-height: 1.45;
}
.gform_wrapper .gfield_description.gfield_description--above {
	margin-bottom: 0.25rem;
	margin-top: 0;
}

/* Inline "(optional)" marker we attach via GF's "Custom CSS Class" on labels
   that aren't required. Set the label's CSS class to `boxcart-optional`. */
.gform_wrapper .boxcart-optional .gfield_label::after {
	content: " (optional)";
	font-weight: normal;
	color: #9ca3af;
}

/* ==========================================================================
   Home v3 — impeccable redesign (added 2026-04-23)
   Site-wide typography refresh + home-page components.
   Components are intentionally namespaced (.bento, .step, .marquee etc.)
   to avoid collisions with classes elsewhere in the theme.
   ========================================================================== */

/* --- Variable fonts (self-hosted) --- */
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/bricolage-grotesque-var-latin.woff2') format('woff2-variations'),
	     url('assets/fonts/bricolage-grotesque-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/bricolage-grotesque-var-latin-ext.woff2') format('woff2-variations'),
	     url('assets/fonts/bricolage-grotesque-var-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('assets/fonts/figtree-var-latin.woff2') format('woff2-variations'),
	     url('assets/fonts/figtree-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('assets/fonts/figtree-var-latin-ext.woff2') format('woff2-variations'),
	     url('assets/fonts/figtree-var-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Typography overrides --- */
body {
	font-family: 'Figtree', Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-feature-settings: 'ss01', 'cv11';
}
h1, h2, h3, .hero-h1, .font-display {
	font-family: 'Bricolage Grotesque', 'Figtree', Inter, system-ui, sans-serif;
	font-optical-sizing: auto;
	letter-spacing: -0.02em;
}
.hero-h1 {
	font-size: clamp(2.75rem, 4.5vw + 1rem, 5rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	font-weight: 800;
}
.eyebrow {
	display: inline-block;
	font-family: 'Figtree', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #2d7d5f;
}

/* --- Brand-tinted shadow utilities --- */
.shadow-soft {
	box-shadow: 0 1px 2px 0 rgba(17, 24, 39, 0.04),
	            0 2px 8px -2px rgba(17, 24, 39, 0.06);
}
.shadow-card {
	box-shadow: 0 1px 3px 0 rgba(17, 24, 39, 0.05),
	            0 8px 24px -6px rgba(45, 125, 95, 0.10);
}
.shadow-lift {
	box-shadow: 0 12px 32px -8px rgba(45, 125, 95, 0.18),
	            0 4px 12px -4px rgba(17, 24, 39, 0.06);
}
.shadow-glow {
	box-shadow: 0 0 0 1px rgba(45, 125, 95, 0.12),
	            0 24px 48px -12px rgba(45, 125, 95, 0.28);
}

/* --- Tier tags (standalone-class variant, distinct from .boxcart-tier-tag) --- */
.tier-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.3;
	font-family: 'Figtree', sans-serif;
}
.tier-tag--free { background: #f3f4f6; color: #4b5563; }
.tier-tag--pro  { background: #e8f5f0; color: #2d7d5f; }
.tier-tag--both { background: #fff; color: #2d7d5f; box-shadow: inset 0 0 0 1px #2d7d5f; }

/* --- Chip component --- */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: #2d7d5f;
	background: #e8f5f0;
}
.chip--outline {
	background: #fff;
	box-shadow: inset 0 0 0 1px #d1d5db;
	color: #374151;
}

/* --- Hero gradient + grid overlay --- */
.gradient-hero {
	background:
		radial-gradient(1200px 600px at 50% -200px, rgba(45, 125, 95, 0.18), transparent 60%),
		radial-gradient(700px 400px at 90% 200px, rgba(45, 125, 95, 0.08), transparent 60%),
		linear-gradient(180deg, #f6fbf8 0%, #ffffff 70%);
}
.grid-bg {
	background-image:
		linear-gradient(to right, rgba(17, 24, 39, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(17, 24, 39, 0.05) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 40%, transparent 80%);
	mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 40%, transparent 80%);
}

/* --- Video hero frame + play button --- */
.video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #0b1220;
	display: flex;
	align-items: center;
	justify-content: center;
}
.video-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(45, 125, 95, 0.35), transparent 55%),
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect width="40" height="40" fill="%23102030"/><path d="M0 0L40 40M40 0L0 40" stroke="%23152742" stroke-width="0.5"/></svg>');
}
.play-btn {
	position: relative;
	z-index: 2;
	width: 88px;
	height: 88px;
	border-radius: 999px;
	background: #fff;
	color: #2d7d5f;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 20px 50px -10px rgba(45, 125, 95, 0.55), 0 0 0 10px rgba(255, 255, 255, 0.12);
	transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 200ms ease;
	cursor: pointer;
	border: none;
}
.play-btn:hover { transform: scale(1.04); }
.play-btn::before {
	content: '';
	position: absolute;
	inset: -12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	animation: boxcart-pulse 2.4s ease-out infinite;
	z-index: -1;
}
@keyframes boxcart-pulse {
	0%   { transform: scale(1);   opacity: .8; }
	100% { transform: scale(1.6); opacity: 0;  }
}

/* --- Industry marquee --- */
.marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
	display: flex;
	gap: 64px;
	animation: boxcart-marquee 40s linear infinite;
	width: max-content;
}
@keyframes boxcart-marquee {
	to { transform: translateX(-50%); }
}

/* --- Bento grid (features) --- */
.bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}
.bento > .item {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 20px;
	padding: 28px;
	transition: all 250ms cubic-bezier(0.25, 1, 0.5, 1);
	display: flex;
	flex-direction: column;
}
.bento > .item:hover {
	border-color: #2d7d5f;
	box-shadow: 0 10px 30px -10px rgba(45, 125, 95, 0.25);
	transform: translateY(-2px);
}
.bento .span-3 { grid-column: span 3; }
.bento .span-2 { grid-column: span 2; }
.bento .span-6 { grid-column: span 6; }
@media (max-width: 900px) {
	.bento { grid-template-columns: repeat(2, 1fr); }
	.bento .span-3,
	.bento .span-2,
	.bento .span-6 { grid-column: span 2; }
}

/* --- How it works steps (equal-height) --- */
.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	grid-auto-rows: 1fr;
}
@media (max-width: 768px) {
	.steps { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
.step { display: flex; flex-direction: column; text-align: center; position: relative; }
.step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #2d7d5f;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	margin: 0 auto 16px;
	box-shadow: 0 0 0 8px #fff;
	position: relative;
	z-index: 1;
	font-family: 'Figtree', sans-serif;
}
.step__card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.step__visual {
	flex: 1;
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.step__title { font-weight: 600; color: #1a2332; margin-bottom: 4px; }
.step__body  { font-size: 13px; color: #4b5563; line-height: 1.5; }

/* --- Admin preview tab buttons --- */
.tab-btn {
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
	cursor: pointer;
	border: none;
	background: transparent;
	transition: background 200ms ease, color 200ms ease;
	font-family: 'Figtree', sans-serif;
}
.tab-btn[aria-selected="true"] { background: #e8f5f0; color: #2d7d5f; }

/* --- Home-specific button helpers --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 600;
	border-radius: 10px;
	transition: all 200ms cubic-bezier(0.25, 1, 0.5, 1);
	padding: 14px 22px;
	font-size: 15px;
	min-height: 48px;
	font-family: 'Figtree', sans-serif;
	text-decoration: none;
}
.btn--primary {
	background: #2d7d5f;
	color: #fff;
	box-shadow: 0 6px 16px -6px rgba(45, 125, 95, 0.5);
}
.btn--primary:hover {
	background: #246850;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -8px rgba(45, 125, 95, 0.6);
}
.btn--ghost {
	background: #fff;
	color: #1a2332;
	box-shadow: inset 0 0 0 1px #e5e7eb;
}
.btn--ghost:hover {
	box-shadow: inset 0 0 0 1px #2d7d5f;
	color: #2d7d5f;
}

/* --- Timing utility classes --- */
.ease-out-quart { transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
.ease-out-expo  { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; }
	.play-btn::before { animation: none; }
}

/* --- Missing Tailwind utilities required by front-page.php.
       The compiled theme.css is pre-built and doesn't include every utility
       we reach for. These are the exact set of classes v3 uses that aren't
       already in theme.css. Hand-written to avoid rebuilding Tailwind. --- */

/* Positioning */
.-bottom-2 { bottom: -0.5rem; }
.-bottom-40 { bottom: -10rem; }
.-left-40 { left: -10rem; }
.-right-40 { right: -10rem; }
.-top-3 { top: -0.75rem; }
.-top-40 { top: -10rem; }
.bottom-4 { bottom: 1rem; }
.left-4 { left: 1rem; }
.left-6 { left: 1.5rem; }
.left-\[12\.5\%\] { left: 12.5%; }
.right-\[12\.5\%\] { right: 12.5%; }
.top-5 { top: 1.25rem; }
.z-10 { z-index: 10; }

/* Display / flex / alignment */
.inline-block { display: inline-block; }
.align-top { vertical-align: top; }
.flex-wrap { flex-wrap: wrap; }
.items-baseline { align-items: baseline; }
.items-end { align-items: flex-end; }
.self-start { align-self: flex-start; }
.leading-none { line-height: 1; }
.line-through { text-decoration-line: line-through; }
.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }

/* Grid */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aspect-square { aspect-ratio: 1 / 1; }

/* Sizing */
.h-3 { height: 0.75rem; }
.h-3\.5 { height: 0.875rem; }
.h-96 { height: 24rem; }
.h-px { height: 1px; }
.w-3 { width: 0.75rem; }
.w-3\.5 { width: 0.875rem; }
.w-96 { width: 24rem; }
.max-w-6xl { max-width: 72rem; }

/* Spacing — margins */
.mb-8 { margin-bottom: 2rem; }
.ml-1 { margin-left: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-14 { margin-top: 3.5rem; }

/* Spacing — padding */
.p-3 { padding: 0.75rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-24 { padding-top: 6rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-28 { padding-top: 7rem; padding-bottom: 7rem; }

/* Spacing — gap */
.gap-1\.5 { gap: 0.375rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-16 { column-gap: 4rem; }
.gap-y-2 { row-gap: 0.5rem; }

/* Spacing — space-y (adjacent siblings) */
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }

/* Colors */
.bg-gray-100 { background-color: #f3f4f6; }

/* Borders */
.rounded-md { border-radius: 0.375rem; }

/* Typography */
.font-extrabold { font-weight: 800; }
.text-\[10px\] { font-size: 10px; }

/* Transitions */
.duration-200 { transition-duration: 200ms; }

/* Hover */
.hover\:shadow-lift:hover {
	box-shadow: 0 12px 32px -8px rgba(45, 125, 95, 0.18),
	            0 4px 12px -4px rgba(17, 24, 39, 0.06);
}
.hover\:shadow-xl:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
	            0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.hover\:text-primary-hover:hover { color: #246850; }

/* Group hover — requires .group on the parent */
.group:hover .group-hover\:translate-x-1 {
	--tw-translate-x: 0.25rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y, 0))
	           rotate(var(--tw-rotate, 0))
	           skewX(var(--tw-skew-x, 0))
	           skewY(var(--tw-skew-y, 0))
	           scaleX(var(--tw-scale-x, 1))
	           scaleY(var(--tw-scale-y, 1));
}

/* Responsive — sm: (640px+) */
@media (min-width: 640px) {
	.sm\:text-xl { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); }
	.sm\:text-4xl { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
	.sm\:text-5xl { font-size: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem); }
}

/* Responsive — md: (768px+) */
@media (min-width: 768px) {
	.md\:block { display: block; }
	.md\:items-end { align-items: flex-end; }
	.md\:justify-between { justify-content: space-between; }
}

/* Responsive — lg: (1024px+) */
@media (min-width: 1024px) {
	.lg\:text-5xl { font-size: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem); }
	.lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
	.lg\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
	.lg\:py-36 { padding-top: 9rem; padding-bottom: 9rem; }
}

/* --- Utilities used by other page templates (changelog, roadmap, support) --- */
.align-middle { vertical-align: middle; }
.w-28 { width: 7rem; }
.space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 2.5rem; }
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; border-bottom-width: 0; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #f3f4f6; }
.border-primary-light { border-color: #e8f5f0; }
.bg-primary-light\/40 { background-color: rgba(232, 245, 240, 0.4); }
.hover\:bg-gray-50\/50:hover { background-color: rgba(249, 250, 251, 0.5); }
.hover\:no-underline:hover { text-decoration-line: none; }