/**
 * Software page styles.
 *
 * @package Blaze_Blocksy_Child
 */

/* ==========================================================================
   DESIGN TOKENS — Extracted from Figma bcPR2ysxSznTXEF4VdBsfH
   Desktop: 21790:38737, Tablet: 22332:28247, Mobile: 22332:29023
   ========================================================================== */

:root {
	/* Colors — From Figma CSS_FIX_PLAN.md */
	--text-primary: rgba(29,29,31,0.9);
	--bg-white: #FFFFFF;
	--bg-light: #F4F5F7;
	--bg-dark: #363636;
	--accent-purple: #9747FF;
	--accent-blue: #06A1F1;
	--card-shadow: 0 8px 40px rgba(0,0,0,0.12);
	--purple-glow: 0 4px 94px rgba(127,70,201,1);

	/* Legacy color tokens (maintain backward compat) */
	--sfsp-sw-color-white: #FFFFFF;
	--sfsp-sw-color-primary: #1246D5;
	--sfsp-sw-color-text: rgba(29, 29, 31, 0.9);
	--sfsp-sw-color-text-dark: #1D1D1F;
	--sfsp-sw-color-text-faq: #091E42;
	--sfsp-sw-color-card-bg: rgba(29, 29, 31, 0.05);
	--sfsp-sw-color-divider: #E4E5E7;
	--sfsp-sw-color-section-bg: #F4F4F4;
	--sfsp-sw-color-testimonial-tint: rgba(6, 161, 241, 0.1);

	/* Typography — CORRECTED to plain Rubik per CSS_FIX_PLAN.md */
	--font-rubik: "Rubik", sans-serif;
	--sfsp-sw-font: "Rubik", sans-serif;
	--sfsp-sw-fw-regular: 400;
	--sfsp-sw-fw-semibold: 600;
	--sfsp-sw-fw-bold: 700;

	/* Font Sizes — Desktop (Figma specs) */
	--h4-size: 30px;
	--h5-size: 28px;
	--h6-size: 24px;
	--p-big-size: 20px;
	--body-size: 14px;
	--sfsp-sw-fs-h1: 60px;
	--sfsp-sw-fs-h2: 48px;
	--sfsp-sw-fs-h4: 30px;
	--sfsp-sw-fs-h5: 28px;
	--sfsp-sw-fs-h6: 24px;
	--sfsp-sw-fs-body: 18px;
	--sfsp-sw-fs-body-sm: 16px;
	--sfsp-sw-fs-button: 16px;

	/* Line Heights — CORRECTED per CSS_FIX_PLAN.md */
	--h4-lh: 1.2;
	--h5-lh: 1.14;
	--h6-lh: 1.185;
	--p-big-lh: 1.6;
	--body-lh: 1.71;
	--sfsp-sw-lh-h1: 1;
	--sfsp-sw-lh-h2: 1;
	--sfsp-sw-lh-h4: 1.2;
	--sfsp-sw-lh-h5: 1.14;
	--sfsp-sw-lh-h6: 1.185;
	--sfsp-sw-lh-body: 1.6;
	--sfsp-sw-lh-body-sm: 1.5;
	--sfsp-sw-lh-button: 1.75;

	/* Spacing — From Figma AccuRIP Desktop */
	--section-gap-desktop: 60px;
	--section-padding-desktop: 64px;
	--card-gap-desktop: 34px;
	--sfsp-sw-section-pad-y: 64px;
	--sfsp-sw-section-pad-x: 64px;
	--sfsp-sw-card-pad: 40px;
	--sfsp-sw-card-radius: 24px;
	--sfsp-sw-card-gap: 16px;
	--sfsp-sw-testimonial-pad: 60px;
	--sfsp-sw-testimonial-inner-width: 1384px;
	--sfsp-sw-testimonial-gap: 44px;
	--sfsp-sw-faq-pad: 64px;

	/* Shadows */
	--sfsp-sw-shadow-faq: 0px 8px 16px 0px rgba(9, 30, 66, 0.15);
}

/* ==========================================================================
   FULL-WIDTH OVERRIDE — Break out of Blocksy content constraint
   ========================================================================== */

/* Hide Blocksy page title on software pages */
.page-id-24622 .entry-title,
.page-id-24622 .hero-section,
.page-id-43628 .page-title,
.page-id-46915 .page-title,
.page-id-44620 .page-title,
.page-id-47165 .page-title {
	display: none !important;
}

/* Break entry-content out of Blocksy constraint */
.page-id-24622 .entry-content {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Break sfsp-software wrapper out of is-layout-constrained */
.sfsp-software {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-bottom: 80px;
	font-family: var(--sfsp-sw-font);
	color: var(--sfsp-sw-color-text);
	overflow-x: hidden;
	--wp--style--block-gap: 0px !important;
}
/* Figma: sections flush — no gap between them */
.sfsp-software > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
/* Override Blocksy's .is-layout-flow margin-block-end: var(--theme-content-spacing) */
.sfsp-software .is-layout-flow > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.sfsp-software *,
.sfsp-software *::before,
.sfsp-software *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   SECTION 1: HERO HEADER
   ========================================================================== */

.sfsp-software__hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 543px;
	background-image: url('/wp-content/uploads/software/hero-bg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--sfsp-sw-color-white);
	padding: 40px 20px;
}

.sfsp-software__hero-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 23px;
	max-width: 598px;
	width: 100%;
}
/* Remove WordPress default margins on hero content children to honor gap */
.sfsp-software__hero-content > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.sfsp-software__hero-product {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
}

.sfsp-software__hero h1 {
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-bold);
	font-size: var(--sfsp-sw-fs-h1);
	line-height: var(--sfsp-sw-lh-h1);
	text-align: center;
	color: var(--sfsp-sw-color-text);
	text-transform: capitalize;
	margin: 0;
}

.sfsp-software__hero-divider-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 23px;
	width: 100%;
	max-width: 623px;
}

.sfsp-software__hero-divider,
.sfsp-software__hero-divider-row .wp-block-separator.sfsp-software__hero-divider {
	flex: 1;
	min-height: 1px !important;
	height: 1px !important;
	background-color: var(--sfsp-sw-color-divider);
	border: none !important;
	margin: 0;
	padding: 0;
	opacity: 1;
	overflow: visible;
}

.sfsp-software__hero-divider-row p,
.sfsp-software__hero-divider-text {
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-regular);
	font-size: var(--sfsp-sw-fs-body);
	line-height: var(--sfsp-sw-lh-body);
	text-align: center;
	color: var(--sfsp-sw-color-text);
	margin: 0;
	flex-shrink: 0;
	max-width: 410px;
}

.sfsp-software__hero-subtitle {
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-regular);
	font-size: var(--sfsp-sw-fs-h6);
	line-height: var(--sfsp-sw-lh-h6);
	text-align: center;
	color: var(--sfsp-sw-color-text);
	margin: 0;
}

/* ==========================================================================
   SECTION 2: CATEGORY CARDS
   ========================================================================== */

.sfsp-software__cards {
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	align-items: stretch;
	gap: 16px;
	padding: var(--sfsp-sw-section-pad-y) 128px;
	background-color: #ffffff;
}

.sfsp-software__cards-inner {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: var(--sfsp-sw-card-gap);
	width: 100%;
}

/* Override Gutenberg is-layout-flow block gap on cards */
.sfsp-software__cards-inner > .sfsp-software__card {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.sfsp-software__card {
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--sfsp-sw-color-card-bg);
	border-radius: var(--sfsp-sw-card-radius);
	overflow: hidden;
}

.sfsp-software__card-inner {
	display: flex;
	flex-direction: column;
	gap: var(--sfsp-sw-card-gap);
	padding: var(--sfsp-sw-card-pad);
	flex: 1;
}

.sfsp-software__card-product-info {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 20px;
}

.sfsp-software__card-top {
	display: flex;
	flex-direction: row;
	gap: 24px;
}

.sfsp-software__card-top-left {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1;
}

.sfsp-software__card h2,
.sfsp-software__card-h2 {
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-bold);
	font-size: var(--sfsp-sw-fs-h2);
	line-height: var(--sfsp-sw-lh-h2);
	color: var(--sfsp-sw-color-text-dark);
	margin: 0;
}

.sfsp-software__card-badges {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.sfsp-software__card-badges-icons {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.sfsp-software__card-badges-icons:empty::before {
	content: '';
	display: inline-block;
	width: 34px;
	height: 34px;
	background: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.8868 30.1934C23.3446 31.6884 21.6608 31.4523 20.0399 30.7442C18.3246 30.0203 16.7509 29.9888 14.9411 30.7442C12.675 31.7198 11.479 31.4366 10.1256 30.1934C2.44602 22.2777 3.57908 10.2232 12.2973 9.78261C14.4218 9.89276 15.9011 10.9471 17.1443 11.0416C19.0012 10.6639 20.7795 9.57803 22.7624 9.71966C25.1386 9.9085 26.9326 10.8527 28.1129 12.5523C23.203 15.4951 24.3675 21.963 28.8683 23.7727C27.9713 26.1332 26.8068 28.478 24.8711 30.2091L24.8868 30.1934ZM16.9869 9.68818C16.7509 6.17885 19.5992 3.28326 22.8725 3C23.3289 7.06012 19.1901 10.0816 16.9869 9.68818Z' fill='%231D1D1F'/%3E%3C/svg%3E") no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

.sfsp-software__card-badges-icons:empty::after {
	content: '';
	display: inline-block;
	width: 34px;
	height: 34px;
	background: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.20708 3.06033C10.2526 2.72883 11.6607 2.47949 13.4585 2.47949C15.7563 2.47949 17.751 3.41591 19.4581 4.43024L16.0354 15.2876C14.1045 14.167 11.886 13.1725 9.35016 13.1725C7.26341 13.1725 5.63424 13.4629 4.42866 13.844L4.31533 13.8808L6.76616 4.68524C6.81461 4.50456 6.9099 4.33987 7.04241 4.20783C7.44616 3.80266 8.19133 3.38191 9.20708 3.06033ZM3.60558 16.5328L1.09808 25.9338C1.03812 26.1596 1.05428 26.3989 1.14404 26.6147C1.2338 26.8304 1.39216 27.0105 1.59462 27.1271C1.79707 27.2438 2.03232 27.2904 2.26396 27.2598C2.4956 27.2293 2.71071 27.1232 2.87599 26.9581C2.94399 26.8915 3.33074 26.6039 4.18074 26.3347C4.99958 26.0755 6.18958 25.8531 7.79183 25.8531C9.37708 25.8531 10.8235 26.4396 12.2657 27.2527L15.3795 17.3687C13.4486 16.2084 11.5092 15.3003 9.35016 15.3003C7.45891 15.3003 6.04791 15.5624 5.06899 15.8712C4.29408 16.1177 3.82941 16.3784 3.60699 16.5371L3.60558 16.5328ZM14.1328 28.396L14.2419 28.4668C15.0409 28.9797 15.8654 29.5067 16.6701 29.9203C17.6433 30.4176 18.7044 30.8114 19.8335 30.8114C22.2036 30.8114 25.2112 30.3241 26.4167 30.0818C26.6113 30.043 26.7911 29.9506 26.9358 29.8149C27.0805 29.6792 27.1844 29.5057 27.2356 29.314L29.5787 20.5222C27.8759 20.7956 25.4591 21.1002 23.4432 21.1002C22.1625 21.1002 20.9498 20.6539 19.8236 20.0759C18.9679 19.6382 18.0967 19.0885 17.2396 18.5388L14.1328 28.396ZM30.1822 18.264L32.9022 8.06399C32.9486 7.88952 32.9497 7.70611 32.9055 7.53108C32.8613 7.35605 32.7733 7.19516 32.6497 7.0636C32.526 6.93204 32.3709 6.83415 32.199 6.77916C32.027 6.72418 31.8439 6.71391 31.6669 6.74933C30.5109 6.98024 27.6634 7.43641 25.5002 7.43641C24.8584 7.43641 24.1487 7.20974 23.3057 6.77908C22.6711 6.45324 22.0237 6.04666 21.3182 5.59474L17.9012 16.4393L18.1746 16.615C19.1096 17.2128 19.9596 17.7582 20.7926 18.1847C21.7899 18.6961 22.6498 18.9752 23.4417 18.9752C25.7127 18.9752 28.6154 18.5502 30.1822 18.264Z' fill='%231D1D1F'/%3E%3C/svg%3E") no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

.sfsp-software__card-badges-icons svg {
	width: 34px;
	height: 34px;
}

/* wp:image icon blocks inside badges */
.sfsp-software__card-icon {
	margin: 0 !important;
}
.sfsp-software__card-icon img {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.sfsp-software__card-badges p,
.sfsp-software__card-badges-text {
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-regular);
	font-size: var(--sfsp-sw-fs-body-sm);
	line-height: var(--sfsp-sw-lh-body-sm);
	color: var(--sfsp-sw-color-text-dark);
	margin: 0;
}

figure.sfsp-software__card-product-img,
.sfsp-software__card-product-img {
	width: 184px;
	height: 127px;
	flex-shrink: 0;
	margin: 0 !important;
}
.sfsp-software__card-product-img img,
img.sfsp-software__card-product-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Buy button — wp:button block wrapper resets */
.sfsp-software__card-buy-wrap {
	margin: 0 !important;
}
.sfsp-software__card-buy-btn {
	margin: 0 !important;
}
.sfsp-software__card-buy-btn .wp-block-button__link,
a.sfsp-software__card-buy-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 178px;
	height: 40px;
	padding: 8px 24px;
	background-color: var(--sfsp-sw-color-primary) !important;
	color: var(--sfsp-sw-color-white) !important;
	border-radius: 9999px !important;
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-semibold);
	font-size: var(--sfsp-sw-fs-button);
	line-height: var(--sfsp-sw-lh-button);
	text-decoration: none;
	border: none;
	cursor: pointer;
	text-align: center;
}

.sfsp-software__card-buy-btn .wp-block-button__link:hover,
a.sfsp-software__card-buy-btn:hover {
	opacity: 0.9;
}

.sfsp-software__card-description {
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-regular);
	font-size: var(--sfsp-sw-fs-body);
	line-height: var(--sfsp-sw-lh-body);
	color: var(--sfsp-sw-color-text-dark);
	margin: 0;
}

.sfsp-software__card-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 36px;
}

/* Trial button — wp:button block wrapper resets */
.sfsp-software__card-trial-wrap {
	margin: 0 !important;
}
.sfsp-software__card-trial-btn {
	margin: 0 !important;
}
.sfsp-software__card-trial-btn .wp-block-button__link,
a.sfsp-software__card-trial-btn {
	display: inline-flex !important;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 270px !important;
	height: 40px;
	padding: 8px 24px;
	background-color: var(--sfsp-sw-color-primary) !important;
	color: var(--sfsp-sw-color-white) !important;
	border-radius: 9999px !important;
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-semibold);
	font-size: var(--sfsp-sw-fs-button);
	line-height: var(--sfsp-sw-lh-button);
	text-decoration: none;
	border: none;
	cursor: pointer;
}

.sfsp-software__card-trial-btn .wp-block-button__link:hover,
a.sfsp-software__card-trial-btn:hover {
	opacity: 0.9;
}

/* Learn more link — wp:button block wrapper resets */
.sfsp-software__card-learn-wrap {
	margin: 0 !important;
}
.sfsp-software__card-learn-link {
	margin: 0 !important;
}
.sfsp-software__card-learn-link .wp-block-button__link,
a.sfsp-software__card-learn-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-semibold);
	font-size: var(--sfsp-sw-fs-button);
	line-height: 17px;
	color: #56C5FF !important;
	text-decoration: none;
	background: none !important;
	border: none !important;
	padding: 0 !important;
}

.sfsp-software__card-learn-link .wp-block-button__link::after,
a.sfsp-software__card-learn-link::after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.4297 5.92969L20.4997 11.9997L14.4297 18.0697' stroke='%2356C5FF' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 12H20.33' stroke='%2356C5FF' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
	flex-shrink: 0;
}

.sfsp-software__card-learn-link .wp-block-button__link:hover,
a.sfsp-software__card-learn-link:hover {
	opacity: 0.7;
}

/* ==========================================================================
   SECTION 3: INSPIRED
   ========================================================================== */

.sfsp-software__inspired {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	padding: var(--sfsp-sw-section-pad-y);
	background-color: var(--sfsp-sw-color-white);
}

.sfsp-software__inspired-inner {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 60px;
	width: 100%;
}

.sfsp-software__inspired h4,
.sfsp-software__inspired .wp-block-heading {
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-bold);
	font-size: var(--sfsp-sw-fs-h4);
	line-height: var(--sfsp-sw-lh-h4);
	text-align: center;
	color: var(--sfsp-sw-color-text);
	text-transform: capitalize;
	margin: 0;
	max-width: 970px;
	width: 100%;
}

.sfsp-software__inspired-media {
	width: 587px;
	max-width: 100%;
	height: 330px;
	overflow: hidden;
	border-radius: var(--sfsp-sw-card-radius);
}

.sfsp-software__inspired-media .wp-block-image {
	height: 100%;
	margin: 0;
}

.sfsp-software__inspired-media img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   SECTION 4: TESTIMONIALS CAROUSEL
   ========================================================================== */

.sfsp-software__testimonials {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 60px;
	padding: var(--sfsp-sw-section-pad-y) 0;
	background-color: var(--sfsp-sw-color-section-bg);
}

.sfsp-software__testimonials-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--sfsp-sw-testimonial-gap);
	padding: var(--sfsp-sw-testimonial-pad);
	width: var(--sfsp-sw-testimonial-inner-width);
	max-width: 100%;
	border-radius: var(--sfsp-sw-card-radius);
	position: relative;
}

/* Gradient + blue tint overlay */
.sfsp-software__testimonials-inner::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--sfsp-sw-card-radius);
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 100%),
		var(--sfsp-sw-color-testimonial-tint);
	z-index: 1;
}

.sfsp-software__testimonials-inner > * {
	position: relative;
	z-index: 2;
}

/* Content row: [chevron-left] [center column] [chevron-right] — matches Figma layout */
.sfsp-sw-reviews__content {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 44px;
}

.sfsp-sw-reviews__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.sfsp-sw-reviews__nav svg {
	width: 52px;
	height: 52px;
}

.sfsp-sw-reviews__nav svg path {
	stroke: var(--sfsp-sw-color-white);
}

/* Fallback chevrons when WordPress strips inline SVGs from post content. */
.sfsp-sw-reviews__nav--prev:empty::before {
	content: '';
	display: block;
	width: 52px;
	height: 52px;
	background: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.0001 19.9201L8.48009 13.4001C7.71009 12.6301 7.71009 11.3701 8.48009 10.6001L15.0001 4.08008' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

.sfsp-sw-reviews__nav--next:empty::before {
	content: '';
	display: block;
	width: 52px;
	height: 52px;
	background: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.90991 19.9201L15.4299 13.4001C16.1999 12.6301 16.1999 11.3701 15.4299 10.6001L8.90991 4.08008' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

.sfsp-sw-reviews__nav:hover {
	opacity: 0.7;
}

/* Center column: title + review track */
.sfsp-sw-reviews__center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 34px;
	flex: 1;
	min-width: 0;
	max-width: 1072px;
}

.sfsp-sw-reviews__title {
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-regular);
	font-size: var(--sfsp-sw-fs-h5);
	line-height: var(--sfsp-sw-lh-h5);
	text-align: center;
	color: var(--sfsp-sw-color-white);
	margin: 0;
	width: 100%;
}

.sfsp-sw-reviews__track {
	display: flex;
	flex-direction: row;
	gap: 34px;
	width: 100%;
}

.sfsp-sw-reviews__slide {
	display: none;
	flex-direction: row;
	gap: 34px;
	width: 100%;
}

.sfsp-sw-reviews__slide--active {
	display: flex;
}

.sfsp-sw-reviews__review {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 34px;
	flex: 1;
}

.sfsp-sw-reviews__review-text {
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-regular);
	font-size: var(--sfsp-sw-fs-body);
	line-height: var(--sfsp-sw-lh-body);
	text-align: center;
	color: var(--sfsp-sw-color-white);
	margin: 0;
}

.sfsp-sw-reviews__review-author {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.sfsp-sw-reviews__review-author p {
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-regular);
	font-size: var(--sfsp-sw-fs-body);
	line-height: var(--sfsp-sw-lh-body);
	text-align: center;
	color: var(--sfsp-sw-color-white);
	margin: 0;
}

/* ==========================================================================
   SECTION 5: FAQ / CONTENT
   ========================================================================== */

.sfsp-software__faq {
	padding: var(--sfsp-sw-faq-pad);
	background-color: var(--sfsp-sw-color-white);
}

.sfsp-software__faq-inner {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.sfsp-software__faq-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
	padding: var(--sfsp-sw-faq-pad);
	background-color: var(--sfsp-sw-color-white);
	border-radius: 8px;
	box-shadow: var(--sfsp-sw-shadow-faq);
}

.sfsp-software__faq-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sfsp-software__faq-card h4,
.sfsp-software__faq-card .wp-block-heading {
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-bold);
	font-size: var(--sfsp-sw-fs-h4);
	line-height: var(--sfsp-sw-lh-h4);
	text-transform: capitalize;
	color: var(--sfsp-sw-color-text-faq);
	margin: 0;
}

.sfsp-software__faq-card p {
	font-family: var(--sfsp-sw-font);
	font-weight: var(--sfsp-sw-fw-regular);
	font-size: var(--sfsp-sw-fs-body-sm);
	line-height: var(--sfsp-sw-lh-body-sm);
	color: var(--sfsp-sw-color-text-faq);
	margin: 0;
}

/* ==========================================================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
	:root {
		--sfsp-sw-fs-h1: 48px;
		--sfsp-sw-fs-h2: 36px;
		--sfsp-sw-fs-h4: 28px;
		--sfsp-sw-fs-h5: 24px;
		--sfsp-sw-fs-h6: 20px;
		--sfsp-sw-fs-body: 16px;
		--sfsp-sw-fs-body-sm: 14px;
		--sfsp-sw-fs-button: 14px;
		--sfsp-sw-lh-h2: 1.111em;
		--sfsp-sw-lh-h4: 1.143em;
		--sfsp-sw-lh-h5: 1.167em;
		--sfsp-sw-lh-body: 1.5em;
		--sfsp-sw-lh-body-sm: 1.714em;
		--sfsp-sw-lh-button: 2em;
		--sfsp-sw-section-pad-x: 36px;
		--sfsp-sw-section-pad-y: 64px;
		--sfsp-sw-testimonial-inner-width: 682px;
		--sfsp-sw-faq-pad: 24px;
	}

	.sfsp-software__cards-inner {
		flex-direction: column;
	}

	.sfsp-software__cards {
		padding: var(--sfsp-sw-section-pad-y) var(--sfsp-sw-section-pad-x);
	}

	.sfsp-software__card {
		flex: none;
		width: 100%;
		height: auto;
	}

	.sfsp-software__inspired {
		gap: 24px;
		padding: 24px;
	}

	.sfsp-software__inspired-inner {
		gap: 24px;
	}

	.sfsp-software__inspired-media {
		width: 587px;
	}

	.sfsp-software__testimonials {
		padding: var(--sfsp-sw-section-pad-y) 0;
	}

	.sfsp-sw-reviews__content {
		gap: 44px;
	}

	/* Show only 1 review per slide on tablet (matches homepage) */
	.sfsp-sw-reviews__slide {
		flex-direction: column;
		gap: 0;
	}

	.sfsp-sw-reviews__review:not(:first-child) {
		display: none;
	}

	.sfsp-software__faq {
		padding: 24px;
	}

	.sfsp-software__faq-inner {
		gap: 24px;
	}

	.sfsp-software__faq-card {
		padding: 24px;
	}
}

/* ==========================================================================
   RESPONSIVE — MOBILE (max-width: 689px)
   ========================================================================== */

@media (max-width: 689px) {
	:root {
		--sfsp-sw-fs-h1: 36px;
		--sfsp-sw-fs-h2: 36px;
		--sfsp-sw-fs-h4: 24px;
		--sfsp-sw-fs-h5: 20px;
		--sfsp-sw-fs-h6: 18px;
		--sfsp-sw-fs-body-sm: 14px;
		--sfsp-sw-fs-button: 14px;
		--sfsp-sw-lh-h2: 1.111em;
		--sfsp-sw-lh-h4: 1.167em;
		--sfsp-sw-lh-h5: 1.2em;
		--sfsp-sw-lh-body: 1.25em;
		--sfsp-sw-lh-body-sm: 1.714em;
		--sfsp-sw-lh-button: 2em;
		--sfsp-sw-section-pad-x: 16px;
		--sfsp-sw-card-pad: 24px;
		--sfsp-sw-testimonial-pad: 30px;
	}

	.sfsp-software__hero {
		min-height: 543px;
		padding: 30px 16px;
	}

	.sfsp-software__hero-divider-row {
		flex-direction: column;
		gap: 12px;
	}

	.sfsp-software__hero-divider {
		width: 100%;
	}

	.sfsp-software__cards {
		padding: var(--sfsp-sw-section-pad-y) var(--sfsp-sw-section-pad-x);
	}

	.sfsp-software__card-top {
		flex-direction: column;
	}

	figure.sfsp-software__card-product-img,
	.sfsp-software__card-product-img {
		width: 120px;
		height: 83px;
	}

	.sfsp-software__card-actions {
		flex-direction: column;
		gap: 16px;
		align-items: flex-start;
	}

	.sfsp-software__card-trial-btn .wp-block-button__link,
	a.sfsp-software__card-trial-btn {
		width: 100% !important;
		max-width: 270px;
	}
	.sfsp-software__card-trial-wrap {
		width: 100%;
		max-width: 270px;
	}
	.sfsp-software__card-trial-btn {
		width: 100%;
	}

	.sfsp-software__inspired {
		gap: 20px;
		padding: 20px;
	}

	.sfsp-software__inspired-inner {
		gap: 20px;
	}

	.sfsp-software__inspired-media {
		width: 100%;
		height: 210px;
	}

	.sfsp-software__testimonials {
		padding: var(--sfsp-sw-section-pad-y) 30px;
	}

	.sfsp-software__testimonials-inner {
		padding: 60px 30px;
	}

	/* Mobile: negative gap overlaps chevrons into content per Figma */
	.sfsp-sw-reviews__content {
		gap: 0;
	}

	.sfsp-sw-reviews__nav {
		width: 52px;
		height: 52px;
		margin: 0 -18px;
		z-index: 3;
	}

	.sfsp-sw-reviews__nav svg {
		width: 52px;
		height: 52px;
	}

	/* Show only 1 review per slide on mobile */
	.sfsp-sw-reviews__slide {
		flex-direction: column;
		gap: 0;
	}

	.sfsp-sw-reviews__review:not(:first-child) {
		display: none;
	}

	.sfsp-software__faq {
		padding: 20px;
	}

	.sfsp-software__faq-inner {
		gap: 20px;
	}

	.sfsp-software__faq-card {
		padding: 20px;
	}

	.sfsp-sw-reviews__nav--prev:empty::before,
	.sfsp-sw-reviews__nav--next:empty::before {
		width: 52px;
		height: 52px;
	}
}

/* ==========================================================================
   INDIVIDUAL SOFTWARE PAGES — AccuRIP Emerald (43628) & Sep Studio NXT (46915)
   Figma: bcPR2ysxSznTXEF4VdBsfH
   AccuRIP Desktop: 20789:30120, Tablet: 20803:95016, Mobile: 20789:89958
   Sep Studio Desktop: 21408:96531, Tablet: 21408:101478, Mobile: 21408:100323
   ========================================================================== */

/* ---------- Design tokens (individual pages) ---------- */
:root {
	--sfsp-ip-color-dark-bg: #363636;
	--sfsp-ip-color-light-bg: #F4F5F7;
	--sfsp-ip-color-accent-blue: #06A1F1;
	--sfsp-ip-color-accent-purple: #9747FF;
	--sfsp-ip-color-white: #FFFFFF;
	--sfsp-ip-color-text: rgba(29, 29, 31, 0.9);
	--sfsp-ip-color-text-dark: #1D1D1F;
	--sfsp-ip-color-card-border: #EDEDED;
	--sfsp-ip-color-btn-primary: #1246D5;
	--sfsp-ip-color-btn-primary-hover: #0D38B0;
	--sfsp-ip-shadow-card: 0px 8px 40px rgba(0, 0, 0, 0.12);
	--sfsp-ip-shadow-content: 0px 8px 16px rgba(9, 30, 66, 0.15);
	--sfsp-ip-shadow-purple-glow: 0px 4px 94px rgba(127, 70, 201, 1);
	--sfsp-ip-radius-card: 8px;
	--sfsp-ip-radius-btn: 100px;
	--sfsp-ip-font: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Full-width layout for individual pages ---------- */
/* Page uses ct-container-full (Blocksy full-width template).
   Sections handle their own internal padding (64px) per Figma. */
.page-id-43628 .entry-content,
.page-id-46915 .entry-content,
.page-id-44620 .entry-content,
.page-id-47165 .entry-content {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ---------- Hide ticker & legacy testimonials on subpages ---------- */
.page-id-43628 .sfsp-ticker,
.page-id-46915 .sfsp-ticker,
.page-id-44620 .sfsp-ticker,
.page-id-47165 .sfsp-ticker,
.page-id-43628 .sfsp-testimonials-legacy,
.page-id-46915 .sfsp-testimonials-legacy,
.page-id-44620 .sfsp-testimonials-legacy,
.page-id-47165 .sfsp-testimonials-legacy {
	display: none !important;
}

.sfsp-product-page {
	font-family: var(--sfsp-ip-font);
	color: var(--sfsp-ip-color-text);
	line-height: 1.6;
	--wp--style--block-gap: 0px !important;
}
/* Figma: sections flush — no gap between them */
.sfsp-product-page > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* AccuRIP (43628) — wrapper is .sfsp-software (breaks out via max-width:none, width:100%).
   Cap to Blocksy wide width. overflow-x:visible allows .sfsp-videos breakout. */
.page-id-43628 .sfsp-software {
	max-width: 1384px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow-x: visible !important;
}
/* Sep Studio (46915) — wrapper is .sfsp-product-page.
   Gutenberg sets width:var(--theme-block-width)=1310px AND max-width:content-size.
   Both must be overridden to reach 1384px (Blocksy wide width). */
.page-id-46915 .sfsp-product-page {
	width: 100% !important;
	max-width: 1384px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* NXT Free Trial (47165) — wrapper is .gspb_container (Greenshift outer container).
   Greenshift sets width:90vw on this block; cap to Blocksy wide width and
   centre it, matching the AccuRIP/SepStudio pattern. */
.page-id-47165 .post-47165 .entry-content > .gspb_container {
	max-width: 1384px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Hero full-width breakout — Figma hero frame is width:1512 (full viewport).
   Break hero out of the 1384px wrapper so background spans edge-to-edge.
   calc(50% - 50vw): shifts left by (half-viewport − half-container) px.
   overflow-x:visible on parent allows this without scrollbar.
   Only applies at ≥1385px — at tablet/mobile the container is already
   narrower than 1384px so no breakout needed (and 100vw scrollbar
   discrepancy would create layout inconsistencies at those viewports). */
@media (min-width: 1385px) {
	.page-id-43628 .sfsp-hero,
	.page-id-46915 .sfsp-hero {
		width: 100vw;
		margin-left: calc(50% - 50vw);
	}
}

.sfsp-product-page *,
.sfsp-product-page *::before,
.sfsp-product-page *::after {
	box-sizing: border-box;
}

/* Page-level modifiers (shared base, override as needed) */
.sfsp-product-page--sepstudio {
	/* Sep Studio NXT — inherits .sfsp-product-page base */
}

/* ==========================================================================
   PHASE 1 CRITICAL FIXES — Typography Baseline
   Per CSS_FIX_PLAN.md: Fix font-family to plain "Rubik", apply correct line-heights
   ========================================================================== */

/* TYPOGRAPHY BASELINE — All software individual pages */
.page-id-43628 h1,
.page-id-43628 h2,
.page-id-43628 h3,
.page-id-43628 h4,
.page-id-43628 h5,
.page-id-43628 h6,
.page-id-46915 h1,
.page-id-46915 h2,
.page-id-46915 h3,
.page-id-46915 h4,
.page-id-46915 h5,
.page-id-46915 h6,
.page-id-44620 h1,
.page-id-44620 h2,
.page-id-44620 h3,
.page-id-44620 h4,
.page-id-44620 h5,
.page-id-44620 h6,
.page-id-47165 h1,
.page-id-47165 h2,
.page-id-47165 h3,
.page-id-47165 h4,
.page-id-47165 h5,
.page-id-47165 h6 {
	font-family: var(--font-rubik) !important;
}

/* H1 — 30px size with 1.2 line-height per Figma */
.page-id-43628 h1,
.page-id-46915 h1,
.page-id-44620 h1,
.page-id-47165 h1 {
	font-size: var(--h4-size) !important;
	line-height: var(--h4-lh) !important;
	font-weight: 700 !important;
}

/* H4 — 30px with 1.2 line-height */
.page-id-43628 h4,
.page-id-46915 h4,
.page-id-44620 h4,
.page-id-47165 h4 {
	font-size: var(--h4-size) !important;
	line-height: var(--h4-lh) !important;
	font-weight: 700 !important;
}

/* H5 — 28px with 1.14 line-height */
.page-id-43628 h5,
.page-id-46915 h5,
.page-id-44620 h5,
.page-id-47165 h5 {
	font-size: var(--h5-size) !important;
	line-height: var(--h5-lh) !important;
	font-weight: 700 !important;
}

/* H6 — 24px with 1.185 line-height */
.page-id-43628 h6,
.page-id-46915 h6,
.page-id-44620 h6,
.page-id-47165 h6 {
	font-size: var(--h6-size) !important;
	line-height: var(--h6-lh) !important;
	font-weight: 400 !important;
}

/* Paragraph/Big — 20px with 1.6 line-height */
.page-id-43628 .has-large-font-size,
.page-id-46915 .has-large-font-size,
.page-id-44620 .has-large-font-size,
.page-id-47165 .has-large-font-size {
	font-size: var(--p-big-size) !important;
	line-height: var(--p-big-lh) !important;
}

/* Body/Regular — 14px with 1.71 line-height */
.page-id-43628 p,
.page-id-43628 li,
.page-id-46915 p,
.page-id-46915 li,
.page-id-44620 p,
.page-id-44620 li,
.page-id-47165 p,
.page-id-47165 li {
	font-family: var(--font-rubik) !important;
	line-height: var(--body-lh) !important;
}

/* ==========================================================================
   PHASE 1 CRITICAL FIXES — Spacing Control
   Per CSS_FIX_PLAN.md: Figma shows 60px gaps between major sections
   ========================================================================== */

/* Remove WordPress automatic block gaps ONLY on deep nesting to prevent double-spacing */
.page-id-43628 .wp-block-group .wp-block-group > *,
.page-id-46915 .wp-block-group .wp-block-group > *,
.page-id-44620 .wp-block-group .wp-block-group > *,
.page-id-47165 .wp-block-group .wp-block-group > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Top-level sections flush — no gap between them per Figma */
.page-id-43628 .sfsp-software > .wp-block-group,
.page-id-46915 .sfsp-software > .wp-block-group,
.page-id-44620 .sfsp-software > .wp-block-group,
.page-id-47165 .sfsp-software > .wp-block-group {
	margin-bottom: 0 !important;
}

/* Bundles section — padding per page per Figma */
.page-id-43628 .sfsp-bundles {
	padding: 78px 64px !important;
	margin-bottom: 0 !important;
}
.page-id-46915 .sfsp-bundles,
.page-id-44620 .sfsp-bundles,
.page-id-47165 .sfsp-bundles {
	padding: 78px 64px !important;
	margin-bottom: 0 !important;
}

/* Feature sections — 64px gap between cards (Figma: layout gap 64px); Free Trial kept 0 */
.page-id-43628 .sfsp-feature-section,
.page-id-46915 .sfsp-feature-section {
	margin-bottom: 64px !important;
}
.page-id-44620 .sfsp-feature-section,
.page-id-47165 .sfsp-feature-section {
	margin-bottom: 0 !important;
}

/* Videos section — margin reset per page */
.page-id-43628 .sfsp-videos,
.page-id-46915 .sfsp-videos,
.page-id-44620 .sfsp-videos,
.page-id-47165 .sfsp-videos {
	margin-bottom: 0 !important;
}

/* ---------- HERO SECTION ---------- */
/* Figma: 20776:139144 — row, gap 60px, padding 70px 0, center/center,
   BG: purple gradient over white, width 1512 fixed */
.sfsp-hero {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 60px;
	padding: 70px 0px;
	min-height: 562px;
	background: #FFFFFF;
	position: relative;
	overflow: hidden;
}

/* Figma: 20776:139148 — left container, column, gap 23px, width 598px fixed.
   Uses flex-wrap so CTA + Learn More sit on same row. */
.sfsp-hero__inner {
	flex: 0 0 598px;
	max-width: 598px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 23px;
}

/* Default: all children take full width (column-like) */
.sfsp-hero__inner > * {
	flex: 0 0 100%;
}

/* Buttons share a row */
.sfsp-hero__inner > .sfsp-hero__cta,
.sfsp-hero__inner > .sfsp-hero__learn-more {
	flex: 0 0 auto;
}

.sfsp-hero__product {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* Figma: 128x128 */
.sfsp-hero__logo {
	max-width: 128px;
}

.sfsp-hero__logo img {
	width: 128px;
	height: 128px;
	display: block;
}

/* Figma: H1/Bold — Rubik 700, 60px, line-height 1em, TITLE case */
.sfsp-hero__product-name {
	font-family: var(--sfsp-ip-font);
	font-size: 60px;
	font-weight: 700;
	line-height: 1em;
	color: var(--sfsp-ip-color-text);
	margin: 0;
	text-transform: capitalize;
}

.sfsp-hero__product-name sup {
	font-size: 0.5em;
	vertical-align: super;
}

/* ® superscript — applied to all sup elements within software pages */
.sfsp-software sup,
.sfsp-product-page sup {
	font-size: 0.5em;
	vertical-align: super;
	line-height: 0;
}

/* Figma: Frame 1261154530 — column, gap 32px, fill width */
.sfsp-hero__info {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
}

/* Figma: Frame 1261154549 — column, gap 8px */
.sfsp-hero__price-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/* Figma: H6/regular — Rubik 400, 24px, 1.185em */
.sfsp-hero__tagline {
	font-family: var(--sfsp-ip-font);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.185em;
	color: var(--sfsp-ip-color-text);
	margin: 0;
}

/* Figma: no dividers — just tagline text below title */
.sfsp-hero__divider-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

/* Hide the divider lines — not in Figma design */
.sfsp-hero__divider {
	display: none;
}

.sfsp-hero__divider {
	flex: 1;
	height: 1px;
	background: #CCCCCC;
}

/* Figma: H6/regular — Rubik 400, 24px, 1.185em — "Film printing with ease" */
.sfsp-hero__subtitle,
.sfsp-hero__subtitle em {
	font-family: var(--sfsp-ip-font);
	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.185em;
	color: var(--sfsp-ip-color-text);
	margin: 0;
	white-space: nowrap;
}

/* Figma: price group — column, gap 8px, left-aligned */
.sfsp-hero__pricing {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

/* Figma: H4/Bold — Rubik 700, 30px, 1.2em */
.sfsp-hero__price {
	font-family: var(--sfsp-ip-font);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2em;
	color: var(--sfsp-ip-color-text);
	margin: 0;
}

/* Figma: Paragraph/Small/Regular — Rubik 400, 18px, 1.556em */
.sfsp-hero__price-sub {
	font-family: var(--sfsp-ip-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.556em;
	color: var(--sfsp-ip-color-text);
	margin: 0;
}

/* Sep Studio uses __title instead of __product-name for the h1 */
.sfsp-hero__title {
	font-family: var(--sfsp-ip-font);
	font-size: 60px;
	font-weight: 700;
	line-height: 1em;
	color: var(--sfsp-ip-color-text);
	margin: 0;
	text-transform: capitalize;
}

/* Sep Studio wraps CTA buttons in __actions instead of __cta */
.sfsp-hero__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

/* Figma: buttons row, gap 8px, hug content */
.sfsp-hero__cta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.sfsp-hero__cta--mobile {
	display: none;
}

/* Figma: 156x48, padding 8px 24px, purple gradient over blue, pill shape */
.sfsp-hero__add-to-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 24px;
	min-width: 156px;
	min-height: 48px;
	border-radius: 9999px;
	font-family: var(--sfsp-ip-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.75;
	text-decoration: none;
	cursor: pointer;
	border: none;
	background: linear-gradient(134deg, rgba(151, 71, 255, 0) 2%, rgba(151, 71, 255, 1) 100%), #1246D5;
	color: var(--sfsp-ip-color-white) !important;
	transition: opacity 0.2s ease;
	white-space: nowrap;
}

.sfsp-hero__add-to-cart:hover {
	opacity: 0.9;
	color: var(--sfsp-ip-color-white) !important;
}

/* Wrapper div — reset to plain container (class collides with inner <a>) */
div.sfsp-hero__learn-more {
	display: inline-flex;
	padding: 0;
	border: none;
	background: transparent;
}

/* Figma: 203x48, padding 8px 24px, 2px border dark text, pill shape — "Start FREE Trial" / "Learn More" */
a.sfsp-hero__learn-more,
div.sfsp-hero__learn-more a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 24px;
	min-width: 203px;
	min-height: 48px;
	border-radius: 9999px;
	font-family: var(--sfsp-ip-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.75;
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	color: var(--sfsp-ip-color-text) !important;
	border: 2px solid var(--sfsp-ip-color-text);
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

a.sfsp-hero__learn-more:hover,
div.sfsp-hero__learn-more a:hover {
	background: var(--sfsp-ip-color-text);
	color: var(--sfsp-ip-color-white) !important;
}

/* Figma: description card — column, gap 30px, padding 40px, radius 12px, white bg, shadow.
   Card width: inner text 564px fixed + 2×40px padding = 644px (box-sizing:border-box) */
.sfsp-hero__description-card {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 40px;
	border-radius: 12px;
	box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.12);
	background: var(--sfsp-ip-color-white);
	max-width: 644px;
}

/* Figma: Paragraph/Big/Regular — Rubik 400, 20px, 1.6em */
.sfsp-hero__description {
	font-family: var(--sfsp-ip-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6em;
	color: var(--sfsp-ip-color-text);
	margin: 0;
}

/* .page-id p { line-height: var(--body-lh) !important } has specificity 0,1,1 + !important.
   To override with !important, need higher specificity (0,2,0+) with !important. */
.page-id-43628 .sfsp-hero__description,
.page-id-46915 .sfsp-hero__description,
.page-id-44620 .sfsp-hero__description,
.page-id-47165 .sfsp-hero__description {
	line-height: 1.6em !important;
}

/* H6/regular — hero subtitle/tagline: 24px/1.185em. body-lh rule overrides to 1.71, fix with 0,2,0 */
.page-id-43628 .sfsp-hero__subtitle,
.page-id-43628 .sfsp-hero__subtitle em,
.page-id-46915 .sfsp-hero__subtitle,
.page-id-46915 .sfsp-hero__subtitle em,
.page-id-46915 .sfsp-hero__tagline {
	line-height: 1.185em !important;
}

/* Paragraph/Small/Regular — hero price-sub: 18px/1.556em. body-lh overrides to 1.71 */
.page-id-43628 .sfsp-hero__price-sub,
.page-id-46915 .sfsp-hero__price-sub {
	line-height: 1.556em !important;
}

/* H1/Bold — hero product name: 60px. Blocksy/WP wp-block-heading h1 overrides class selector.
   Specificity 0,2,0 + !important forces Figma value. */
.page-id-43628 .sfsp-hero__product-name,
.page-id-46915 .sfsp-hero__title {
	font-size: 60px !important;
	line-height: 1em !important;
}

/* H6/regular — Sep Studio tagline is H4 element; Blocksy h4.wp-block-heading overrides class
   selector. Force 24px/400/1.185em per Figma. */
.page-id-46915 .sfsp-hero__tagline {
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1.185em !important;
}

/* H4/Bold — hero price: P element gets body-lh (1.71) override. Force 1.2em per Figma. */
.page-id-43628 .sfsp-hero__price,
.page-id-46915 .sfsp-hero__price {
	line-height: 1.2em !important;
}

/* Paragraph/Small/Regular — Sep Studio feature section body text: 18px/1.556em.
   P elements get body-lh (1.71) override. */
.page-id-46915 .sfsp-feature-section__text {
	font-size: 18px !important;
	line-height: 1.556em !important;
}

/* Button/Small — videos more-link: 16px/600/1.75em. P wrapper gets body-lh override. */
.page-id-43628 .sfsp-videos__more-link,
.page-id-46915 .sfsp-videos__more-link {
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.75em !important;
}

/* Figma: "Learn more" link — row, gap 6px, Rubik 600 16px, #1246D5 */
.sfsp-hero__card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sfsp-ip-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #1246D5 !important;
	text-decoration: none;
	cursor: pointer;
}

.sfsp-hero__card-link:hover {
	text-decoration: underline;
}

.sfsp-hero__card-link svg,
.sfsp-hero__card-link img {
	width: 16px;
	height: 16px;
}

/* Figma: description card "Learn more" CTA — Rubik 600, 16px, #1246D5, inline flex with arrow */
.sfsp-hero__description-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sfsp-ip-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.71;
	color: #1246D5 !important;
	text-decoration: none;
	cursor: pointer;
}

.sfsp-hero__description-cta:hover {
	text-decoration: underline;
}

.sfsp-hero__description-cta svg {
	flex-shrink: 0;
}

/* ---------- BUTTONS (shared) ---------- */
.sfsp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	border-radius: var(--sfsp-ip-radius-btn);
	font-family: var(--sfsp-ip-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.75;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.sfsp-btn--primary {
	background: var(--sfsp-ip-color-btn-primary);
	color: var(--sfsp-ip-color-white);
}

.sfsp-btn--primary:hover {
	background: var(--sfsp-ip-color-btn-primary-hover);
}

.sfsp-btn--outline {
	background: transparent;
	color: var(--sfsp-ip-color-btn-primary);
	border: 2px solid var(--sfsp-ip-color-btn-primary);
}

.sfsp-btn--outline:hover {
	background: var(--sfsp-ip-color-btn-primary);
	color: var(--sfsp-ip-color-white);
}

.sfsp-btn--white {
	background: var(--sfsp-ip-color-white);
	color: var(--sfsp-ip-color-text-dark);
}

.sfsp-btn--white:hover {
	background: #F0F0F0;
}

/* Description is now inside .sfsp-hero__description-card — no separate section */

/* ---------- BUNDLES / PRICING SECTION ---------- */
/* Figma: 21015:50048 — White BG, flex row: title left + cards right */
.sfsp-bundles {
	background: #FFFFFF;
	padding: 78px 64px;
	display: flex !important;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 34px;
}

/* Reset WP block gap margins — flex gap handles spacing */
.sfsp-bundles > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.sfsp-bundles__title {
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	color: var(--sfsp-ip-color-text-dark);
	margin: 0;
	text-align: left;
	flex: 0 0 242px;
}

.sfsp-bundles__grid {
	display: flex;
	flex-direction: row;
	gap: 34px;
	justify-content: center;
	align-items: center;
	flex: 1;
}

/* Sep Studio bundles: cards are direct children of .sfsp-bundles (no grid wrapper) */
.sfsp-bundles__inner {
	display: flex;
	flex-direction: row;
	gap: 34px;
	justify-content: center;
	align-items: center;
	flex: 1;
}

.sfsp-product-page--sepstudio .sfsp-bundles {
	flex-wrap: wrap;
}

/* Reset WP block gap margins — flex gap handles spacing */
.sfsp-product-page--sepstudio .sfsp-bundles > * {
	margin-top: 0;
	margin-bottom: 0;
}

.sfsp-bundles__card {
	background: var(--sfsp-ip-color-white);
	border-radius: var(--sfsp-ip-radius-card);
	padding: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	box-shadow: var(--sfsp-ip-shadow-card);
	position: relative;
	overflow: hidden;
	flex: 1;
	min-width: 0;
}

.sfsp-bundles__card--featured {
	box-shadow: var(--sfsp-ip-shadow-purple-glow);
}

.sfsp-bundles__card-badge {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--sfsp-ip-color-accent-purple);
	color: var(--sfsp-ip-color-white);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 0 0 0 8px;
}

.sfsp-bundles__card-img,
.sfsp-bundles__card-logo {
	margin: 0 auto;
	max-width: 184px;
	height: 127px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sfsp-bundles__card-img img,
.sfsp-bundles__card-logo img {
	max-width: 100%;
	max-height: 127px;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	border-radius: var(--sfsp-ip-radius-card);
}

.sfsp-bundles__card-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	gap: 0;
	padding: 16px;
	text-align: center;
}

.sfsp-bundles__card-name,
.sfsp-bundles__card-title {
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.143 !important;
	color: var(--sfsp-ip-color-text-dark);
	margin: 0 0 6px 0;
	text-align: center;
}

.sfsp-bundles__card-pricing {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 17px;
}

.sfsp-bundles .sfsp-bundles__card-price {
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.143 !important;
	color: var(--sfsp-ip-color-text-dark);
	margin: 0;
}

.sfsp-bundles__card-period {
	font-size: 14px !important;
	font-weight: 400;
	line-height: 1.71 !important;
	color: var(--sfsp-ip-color-text);
	margin: 0;
}

.sfsp-bundles__card-value {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.71 !important;
	color: var(--sfsp-ip-color-text);
	margin: 0 0 17px 0;
}

.sfsp-bundles__card-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-self: stretch;
	text-align: left;
}

.sfsp-bundles__card-features li {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.185 !important;
	color: var(--sfsp-ip-color-text);
	padding-left: 16px;
	position: relative;
}

.sfsp-bundles__card-features li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: var(--sfsp-ip-color-text);
	font-weight: 400;
}

.sfsp-bundles__card-actions {
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: stretch;
	width: 100%;
}


.sfsp-bundles__card-actions .sfsp-btn,
.sfsp-bundles__add-to-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
	padding: 8px 24px;
	border-radius: 9999px;
	font-family: var(--sfsp-ip-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.75;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: background-color 0.2s ease;
}

.sfsp-bundles__add-to-cart {
	background: var(--sfsp-ip-color-btn-primary);
	color: var(--sfsp-ip-color-white) !important;
}

.sfsp-bundles__add-to-cart:hover {
	background: var(--sfsp-ip-color-btn-primary-hover);
	color: var(--sfsp-ip-color-white) !important;
}

.sfsp-bundles__learn-more {
	background: transparent;
	color: var(--sfsp-ip-color-btn-primary) !important;
	border: none;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.71;
	text-decoration: underline;
}

.sfsp-bundles__learn-more:hover {
	opacity: 0.8;
}

/* ---------- TABS NAVIGATION ---------- */
/* Mobile-first base (mobile) */
.sfsp-tabs {
	background: #ffffff;
	padding: 36px 6vw;
	position: relative;
	z-index: 100;
}

.sfsp-tabs__inner {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	padding: 0;
	gap: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	align-items: center;
	max-width: 1384px; /* wide width — content constraint */
}

.sfsp-tabs__tab {
	display: block;
	flex: 0 0 auto;
	padding: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.185em;
	color: var(--sfsp-ip-color-text);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

/* Tablet and up */
@media (min-width: 768px) {
	.sfsp-tabs {
		padding: 36px 5vw;
	}

	.sfsp-tabs__inner {
		flex-direction: row;
		gap: 16px;
		flex-wrap: wrap;
		justify-content: center;
		align-items: initial;
	}

	.sfsp-tabs__tab {
		font-size: 20px;
	}
}

/* Desktop */
@media (min-width: 1024px) {
	.sfsp-tabs {
		position: sticky;
		top: 100px !important;
	}

	.sfsp-tabs__tab {
		font-size: 24px;
		line-height: 1.185;
	}

	.sfsp-hero {
		padding: 64px;
	}
}

/* Large Screens */
@media (min-width: 1440px) {
	.sfsp-tabs {
		padding: 36px 0;
	}
	.sfsp-tabs__inner {
		flex-wrap: nowrap;
	}
}

.sfsp-tabs__tab:hover,
.sfsp-tabs__tab--active {
	border-bottom-color: var(--sfsp-ip-color-accent-blue);
}

/* ---------- FEATURE SECTIONS (two-column alternating) ---------- */
/* Figma: 20787:141747 (Power/Intro) & 20787:141765 (Features) — both column, gap 64px, padding 64px.
   Frontend merges both into one .sfsp-features container. */
.sfsp-features {
	display: flex;
	flex-direction: column;
	padding: 64px 0;
	gap: 64px;
}
/* Override WP block-gap and margin defaults */
.sfsp-features > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Individual feature sections — no outer padding (container handles it).
   Card padding lives on .sfsp-feature-section__row (64px). */
.sfsp-feature-section {
	padding: 0;
	background: #FFFFFF;
}

/* Dark variant — AccuRIP uses dark-bg token, Sep Studio uses black */
.sfsp-feature-section--dark {
	background: var(--sfsp-ip-color-dark-bg);
}

/* Light gray variant — Support section */
.sfsp-feature-section--light {
	background: var(--sfsp-ip-color-light-bg);
}

/* Medium dark variant — used by Sep Studio NXT */
.sfsp-feature-section--medium {
	background: #2D2D2D;
}

/* Dark/medium variants — white text overrides for dark backgrounds */
.sfsp-feature-section--dark .sfsp-feature-section__title,
.sfsp-feature-section--medium .sfsp-feature-section__title,
.sfsp-feature-section--dark .sfsp-feature-section__heading,
.sfsp-feature-section--medium .sfsp-feature-section__heading,
.sfsp-feature-section--dark .sfsp-feature-section__text,
.sfsp-feature-section--medium .sfsp-feature-section__text,
.sfsp-feature-section--dark .sfsp-feature-section__subtitle,
.sfsp-feature-section--medium .sfsp-feature-section__subtitle,
.sfsp-feature-section--dark .sfsp-feature-section__list li,
.sfsp-feature-section--medium .sfsp-feature-section__list li,
.sfsp-feature-section--dark .sfsp-power__list li,
.sfsp-feature-section--medium .sfsp-power__list li {
	color: var(--sfsp-ip-color-white);
}

.sfsp-feature-section--centered {
	text-align: center;
}

/* Figma: Type 2 sections — card wraps heading + text + image; shadow/bg/radius on __row */
.sfsp-feature-section__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 32px;
	padding: 64px;
	background: var(--sfsp-ip-color-white);
	border-radius: var(--sfsp-ip-radius-card);
	box-shadow: var(--sfsp-ip-shadow-content);
}

/* Power Delivered: no white card — transparent, no shadow, no border-radius; 60px col gap (Figma layout_CX6UUM) */
.sfsp-feature-section--power .sfsp-feature-section__row {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	gap: 60px;
}

/* Reimagined: Type 1 — card on __content only; __row transparent (no shadow) */
#Reimagined .sfsp-feature-section__row {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	gap: 60px;
}
#Reimagined .sfsp-feature-section__content {
	padding: 44px;
	background: var(--sfsp-ip-color-white);
	border-radius: 4.8px;
	box-shadow: var(--sfsp-ip-shadow-content);
	order: 1;
}
#Reimagined .sfsp-feature-section__media {
	order: 2;
}

/* Dark centered sections (e.g. FLM) — content sits directly on dark bg, no white card */
.sfsp-feature-section--dark.sfsp-feature-section--centered .sfsp-feature-section__row {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}
.sfsp-feature-section--dark.sfsp-feature-section--centered .sfsp-feature-section__content {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

/* Dark sections WITH card rows — restore dark text inside white cards */
.sfsp-feature-section--dark .sfsp-feature-section__row .sfsp-feature-section__text,
.sfsp-feature-section--dark .sfsp-feature-section__row .sfsp-feature-section__heading,
.sfsp-feature-section--dark .sfsp-feature-section__row .sfsp-feature-section__subtitle,
.sfsp-feature-section--dark .sfsp-feature-section__row .sfsp-feature-section__list li,
.sfsp-feature-section--dark .sfsp-feature-section__row p {
	color: var(--sfsp-ip-color-text);
}

.sfsp-feature-section__media {
	flex: 1 1 50%;
	max-width: 50%;
}

.sfsp-feature-section__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--sfsp-ip-radius-card);
}

.sfsp-feature-section__content {
	flex: 1 1 50%;
	max-width: 50%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Figma: H4/Bold — Rubik 700, 30px, 1.2em, TITLE case, text-primary */
.sfsp-feature-section__title {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2 !important;
	color: var(--sfsp-ip-color-text);
	margin: 0 0 8px;
	text-transform: capitalize;
	text-align: left;
}

/* AccuRIP ONLY — center the Reimagined and Power Delivered section titles */
.page-id-43628 #Reimagined > .sfsp-feature-section__title,
.page-id-43628 #Power > .sfsp-feature-section__title {
	text-align: center;
	padding-bottom: 40px !important;
}

/* Figma: Body/Regular — Rubik 400, 16px, 1.5em, text-primary */
.sfsp-features .sfsp-feature-section__text {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5 !important;
	color: var(--sfsp-ip-color-text);
	margin: 0;
}

.sfsp-feature-section__text a {
	color: var(--sfsp-ip-color-accent-blue);
	text-decoration: none;
}

.sfsp-feature-section__text a:hover {
	text-decoration: underline;
}

/* N-Up section inline link should match surrounding text color, not accent blue */
#N-UP .sfsp-feature-section__text a {
	color: var(--sfsp-ip-color-text);
	text-decoration: underline;
}

#N-UP .sfsp-feature-section__text a:hover {
	opacity: 0.7;
	text-decoration: underline;
}

/* ABIvsST section inline link should match surrounding text color */
#ABIvsST .sfsp-feature-section__text a {
	color: var(--sfsp-ip-color-text);
	text-decoration: underline;
}

#ABIvsST .sfsp-feature-section__text a:hover {
	opacity: 0.7;
	text-decoration: underline;
}

/* ABIvsST: 'Check your printer's compatibility' link — no underline per Figma */
.page-id-43628 #ABIvsST .sfsp-feature-section__link {
	text-decoration: none;
}

.page-id-43628 #ABIvsST .sfsp-feature-section__link:hover {
	text-decoration: underline;
}

.sfsp-feature-section__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sfsp-features .sfsp-feature-section__list li {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5 !important;
	color: var(--sfsp-ip-color-text);
	padding-left: 24px;
	position: relative;
}

.sfsp-feature-section__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sfsp-ip-color-text);
}

.sfsp-feature-section__list li a {
	color: var(--sfsp-ip-color-accent-blue);
	text-decoration: none;
}

.sfsp-feature-section__list li a:hover {
	text-decoration: underline;
}

.sfsp-feature-section__link {
	color: var(--sfsp-ip-color-accent-blue);
	text-decoration: underline;
	font-size: 16px;
	font-weight: 400;
	display: inline-block;
	margin-top: 8px;
}

.sfsp-feature-section__link:hover {
	opacity: 0.7;
}

/* Figma 20787:141803 — Support section uses H6/regular (24px, 1.185) for text + list */
#Support .sfsp-feature-section__text,
#Support .sfsp-feature-section__list li {
	font-size: 24px;
	line-height: 1.185 !important;
}

/* Image #13: Support section bullets should not have accent color */
#Support .sfsp-feature-section__list li::before {
	background: var(--sfsp-ip-color-text);
}

/* Figma 20787:141803 — AccuRIP Support: image-left, content-right (DOM is [content, media]) */
.page-id-43628 #Support .sfsp-feature-section__row {
	flex-direction: row-reverse;
}

.sfsp-feature-section__video-centered {
	max-width: 864px;
	margin: 24px auto 0;
}

.sfsp-feature-section__video-centered img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--sfsp-ip-radius-card);
}

.sfsp-feature-section__image {
	margin: 0;
}

.sfsp-feature-section__image img {
	border-radius: var(--sfsp-ip-radius-card);
}

/* ---------- FEATURE SECTION VARIANTS (Sep Studio NXT uses these) ---------- */

/* Light gray background variant — Figma: #F4F5F7 */
.sfsp-feature-section--alt {
	background: #F4F5F7;
}

/* Subtitle (centered paragraph below section title) */
.sfsp-feature-section__subtitle {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.143;
	color: var(--sfsp-ip-color-text);
	text-align: center;
	margin: 0 auto 24px;
	max-width: 900px;
}

/* H3 heading within feature content */
.sfsp-feature-section__heading {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.185;
	color: var(--sfsp-ip-color-text);
	margin: 0 0 8px;
}

/* Explicit reverse row modifier (used alongside nth-child alternation) */
.sfsp-feature-section__row--reverse {
	flex-direction: row-reverse;
}

/* Full-width content (no media column — used on Flexibility, License Manager sections) */
.sfsp-feature-section__content--wide {
	flex: 1 1 100%;
	max-width: 900px;
	margin: 0 auto;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

/* License Manager: text-only card — Background+Shadow per Figma (no image column) */
#License_Manager.sfsp-feature-section {
	background: var(--sfsp-ip-color-white);
	border-radius: var(--sfsp-ip-radius-card);
	box-shadow: var(--sfsp-ip-shadow-content);
	padding: 64px;
}

#License_Manager .sfsp-feature-section__content--wide {
	max-width: none;
	margin: 0;
}

/* Video grid (6-video grid in Print Like You Have a Big Press section) */
/* Figma layout_7Z33GK: gap 64px — padding-top used (margin-top zeroed by is-layout-flow) */
.sfsp-feature-section__video-grid {
	padding-top: 64px;
}

.sfsp-feature-section__video-grid-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.sfsp-feature-section__video-item {
	overflow: hidden;
	border-radius: var(--sfsp-ip-radius-card);
}

.sfsp-feature-section__video-item a {
	display: block;
}

.sfsp-feature-section__video-item img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--sfsp-ip-radius-card);
	transition: transform 0.3s ease;
}

.sfsp-feature-section__video-item img:hover {
	transform: scale(1.03);
}

/* More videos link (centered below grid) */
.sfsp-feature-section__more-link {
	text-align: center;
	margin-top: 24px;
}

.sfsp-feature-section__more-link a {
	color: var(--sfsp-ip-color-accent-blue);
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
}

.sfsp-feature-section__more-link a:hover {
	text-decoration: underline;
}

/* Highlighted list variant (bolder bullets — used on Total Control section) */
.sfsp-feature-section__list--highlight li::before {
	background: var(--sfsp-ip-color-accent-purple);
}

/* OS compatibility text */
.sfsp-feature-section__compatibility {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.71;
	color: rgba(29, 29, 31, 0.6);
	margin: 8px 0 0;
}

/* Dark variant compatibility text */
.sfsp-feature-section--dark .sfsp-feature-section__compatibility,
.sfsp-feature-section--medium .sfsp-feature-section__compatibility {
	color: rgba(255, 255, 255, 0.6);
}

/* Platform icons (PC/Mac) — legacy image block */
.sfsp-feature-section__os-icons {
	margin: 8px 0 0;
}

.sfsp-feature-section__os-icons img {
	display: block;
}

/* OS icons row — SVG icons (Figma: node 21408:100315, row, gap:13px, padding-top:22px) */
.sfsp-feature-section__os-icons-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 13px;
	padding-top: 22px;
}

.sfsp-feature-section__os-icons-row svg {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

/* Support links (horizontal link group in Support section) */
.sfsp-feature-section__support-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 8px;
}

.sfsp-feature-section__support-links p {
	margin: 0;
}

.sfsp-feature-section__support-links a {
	color: var(--sfsp-ip-color-accent-blue);
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
}

.sfsp-feature-section__support-links a:hover {
	text-decoration: underline;
}

/* ---------- POWER DELIVERED (two-column list variant of feature-section) ---------- */
.sfsp-feature-section--power .sfsp-feature-section__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 60px;
	max-width: 100%;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

.sfsp-power__list-col {
	display: flex;
	flex-direction: column;
}

.sfsp-power__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sfsp-power__list li {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.556 !important;
	color: var(--sfsp-ip-color-text);
	padding-left: 24px;
	position: relative;
}

.sfsp-power__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sfsp-ip-color-text);
}

/* ---------- VIDEOS SECTION ---------- */
.sfsp-videos {
	background: var(--sfsp-ip-color-light-bg);
	padding: 64px;
}

/* POPULAR VIDEOS: break out of 1384px product page container → full viewport width background.
   calc(50% - 50vw): 50% = half of 1384px = 692px; 50vw = half viewport.
   At 1456px: 692 - 728 = -36px → section = 1456px (full viewport) ✓
   padding-left/right: 0 — horizontal constraint handled by .sfsp-videos__grid (max-width: 1384px) */
.page-id-43628 .sfsp-videos,
.page-id-46915 .sfsp-videos {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 0;
	padding-right: 0;
}

.sfsp-videos--medium {
	background: #2D2D2D;
}

/* Figma: H5/Bold — Rubik 700, 28px, 1.143em, centered */
/* Use padding-bottom not margin — Gutenberg is-layout-flow resets margin-block-end to 0 */
.sfsp-videos__title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.143;
	color: var(--sfsp-ip-color-text);
	text-align: center;
	margin: 0;
	padding-bottom: 24px;
}

.sfsp-videos__grid {
	max-width: 1384px; /* wide width — matches Figma 1384px */
	margin: 0 auto;
}

/* Figma: row, wrap, gap 24px, center-justified */
.sfsp-videos__grid-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.sfsp-videos__item {
	flex: 0 0 calc(33.333% - 16px);
	max-width: calc(33.333% - 16px);
	border-radius: var(--sfsp-ip-radius-card);
	overflow: hidden;
	box-shadow: var(--sfsp-ip-shadow-content);
}

.sfsp-videos__item a {
	display: block;
}

.sfsp-videos__item img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity 0.2s ease;
}

.sfsp-videos__item img:hover {
	opacity: 0.8;
}

/* Use padding-top not margin — Gutenberg is-layout-flow resets margin to 0 */
.sfsp-videos__more-link {
	text-align: center;
	padding-top: 32px;
}

.sfsp-videos__more-link a {
	color: var(--sfsp-ip-color-btn-primary);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sfsp-videos__more-link a::after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.4299 5.93005L20.4999 12.0001L14.4299 18.0701' stroke='%231246D5' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 12H20.33' stroke='%231246D5' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	flex-shrink: 0;
}

.sfsp-videos__more-link a:hover {
	text-decoration: underline;
}

/* ---------- YOUTUBE CTA ---------- */
.sfsp-youtube-cta {
	background: #000000;
	padding: 40px 64px;
	text-align: center;
}

.sfsp-youtube-cta img {
	max-width: 180px;
	height: auto;
	margin-bottom: 12px;
}

.sfsp-youtube-cta__logo {
	margin: 0 auto 12px;
}

.sfsp-youtube-cta__logo img {
	max-width: 180px;
	height: auto;
}

.sfsp-youtube-cta p {
	color: #999999;
	font-size: 16px;
	margin: 0;
}

.sfsp-youtube-cta__text {
	color: #999999;
	font-size: 16px;
	margin: 0;
}

/* ---------- TESTIMONIALS (individual pages) ---------- */
.sfsp-testimonials {
	background: #000000;
	padding: 64px;
}

.sfsp-testimonials--medium {
	background: #2D2D2D;
}

.sfsp-testimonials__title {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sfsp-ip-color-white);
	text-align: center;
	margin: 0 0 40px;
}

.sfsp-testimonials__ticker {
	color: var(--sfsp-ip-color-white);
	font-size: 20px;
	text-align: center;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Sep Studio NXT carousel testimonials (sfsp-testimonials__*) */
.sfsp-testimonials__inner {
	max-width: 1384px; /* wide width — was 1200px */
	margin: 0 auto;
}

.sfsp-testimonials__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	margin-bottom: 40px;
}

.sfsp-testimonials__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.sfsp-testimonials__nav--prev:empty::before {
	content: '';
	display: block;
	width: 52px;
	height: 52px;
	background: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.0001 19.9201L8.48009 13.4001C7.71009 12.6301 7.71009 11.3701 8.48009 10.6001L15.0001 4.08008' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

.sfsp-testimonials__nav--next:empty::before {
	content: '';
	display: block;
	width: 52px;
	height: 52px;
	background: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.90991 19.9201L15.4299 13.4001C16.1999 12.6301 16.1999 11.3701 15.4299 10.6001L8.90991 4.08008' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

.sfsp-testimonials__nav:hover {
	opacity: 0.7;
}

.sfsp-testimonials__title-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1;
}

.sfsp-testimonials__track {
	display: flex;
	flex-direction: row;
	gap: 34px;
	width: 100%;
}

.sfsp-testimonials__slide {
	display: none;
	flex-direction: row;
	gap: 34px;
	width: 100%;
}

.sfsp-testimonials__slide--active {
	display: flex;
}

.sfsp-testimonials__review {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	flex: 1;
}

.sfsp-testimonials__review-text {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
	color: var(--sfsp-ip-color-white);
	margin: 0;
}

.sfsp-testimonials__review-author {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.sfsp-testimonials__review-author p {
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.sfsp-testimonials__cta {
	text-align: center;
	margin-top: 32px;
}

.sfsp-testimonials__cta a {
	color: var(--sfsp-ip-color-accent-blue);
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
}

.sfsp-testimonials__cta a:hover {
	text-decoration: underline;
}

/* ---------- TESTIMONIALS LEGACY (shortcode-based) ---------- */
.sfsp-testimonials-legacy {
	background: #000000;
	padding: 64px;
}

.sfsp-testimonials-legacy__title {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sfsp-ip-color-white);
	text-align: center;
	margin: 0 0 40px;
}

/* ---------- TICKER (scrolling quotes) ---------- */
.sfsp-ticker {
	background: var(--sfsp-ip-color-dark-bg);
	padding: 24px 64px;
	overflow: hidden;
}

.sfsp-ticker__wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
}

.sfsp-ticker__text {
	color: var(--sfsp-ip-color-white);
	font-size: 18px;
	font-weight: 400;
	text-align: center;
	opacity: 1;
	transition: opacity 0.5s ease;
}

/* ==========================================================================
   FREE SOFTWARE TRIAL PAGES (44620 & 47165)
   Figma: Desktop 21316:77008, Tablet 21154:68056, Mobile 21169:81263
   ========================================================================== */

.sfsp-free-trial {
	font-family: var(--sfsp-ip-font);
	color: var(--sfsp-ip-color-text);
	line-height: 1.6;
}

.sfsp-free-trial *,
.sfsp-free-trial *::before,
.sfsp-free-trial *::after {
	box-sizing: border-box;
}

/* ---------- Free Trial Hero ---------- */
.sfsp-free-trial > *,
.sfsp-free-trial-hero > *,
.sfsp-free-trial-content > *,
.sfsp-free-trial-steps > *,
.sfsp-free-trial-steps__list > *,
.sfsp-free-trial-steps__notice > *,
.sfsp-free-trial-form > * {
	margin-top: 0;
	margin-bottom: 0;
}

.sfsp-free-trial-hero {
	padding: 0;
}

.sfsp-free-trial-hero__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	padding: 30px 64px;
}

.sfsp-free-trial-hero__logo {
	flex: 0 0 auto;
	width: 163px;
	height: 163px;
}

.sfsp-free-trial-hero__logo img {
	width: 100%;
	height: auto;
	display: block;
}

.sfsp-free-trial-hero__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* !important to override .page-id-* h1 { font-size: var(--h4-size) !important } */
.sfsp-free-trial-hero__text .sfsp-free-trial-hero__title {
	font-size: 60px !important;
	font-weight: 700;
	line-height: 1em !important;
	text-transform: capitalize;
	color: var(--sfsp-ip-color-white);
	margin: 0;
}

.sfsp-free-trial-hero__subtitle {
	font-size: 60px;
	font-weight: 700;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--sfsp-ip-color-white);
	margin: 0;
}

/* Fix CU-86ex67rg8: ALL text in dark hero section must be white — override Gutenberg inline styles + palette classes */
/* !important needed: Gutenberg DTG blocks apply inline color and .has-palette-color-3-color = rgb(34,34,34) */
.sps-blue-stripe *:not(input):not(textarea):not(select) {
	color: var(--sfsp-ip-color-white) !important;
}
/* Preserve dark text on white-bg form inputs */
.sps-blue-stripe input,
.sps-blue-stripe textarea,
.sps-blue-stripe select {
	color: var(--sfsp-ip-color-text-dark) !important;
}

.sfsp-free-trial-hero__tagline {
	font-size: 16px;
	font-weight: 400;
	color: var(--sfsp-ip-color-text);
	text-align: center;
	margin: 16px 0 0;
}

/* ---------- Free Trial Content Layout ---------- */
.sfsp-free-trial-content {
	padding: 0 64px;
}

.sfsp-free-trial-content__columns {
	gap: 64px;
}

/* ---------- Free Trial Steps (left column) ---------- */
.sfsp-free-trial-steps {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sfsp-free-trial-steps__highlight {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--sfsp-ip-color-white);
	margin: 0;
}

/* Overrides inline Gutenberg block style `html .sps-blue-stripe p { color: #222 !important }` */
/* html .sps-blue-stripe p.dtg-44620-4 {
	color: var(--sfsp-ip-color-white) !important;
} */

.sfsp-free-trial-steps__notice {
	margin: 0;
}

/* !important to override .page-id-* p { line-height: var(--body-lh) !important } */
.sfsp-free-trial-steps .sfsp-free-trial-steps__important {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.185 !important;
	margin: 0;
}

.sfsp-free-trial-steps__important a {
	color: var(--sfsp-ip-color-accent-blue);
	text-decoration: none;
}

.sfsp-free-trial-steps__important a:hover {
	text-decoration: underline;
}

.sfsp-free-trial-steps__video img {
	width: 100%;
	max-width: 660px;
	height: auto;
	display: block;
}

.sfsp-free-trial-steps__heading {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.111;
	text-transform: capitalize;
	color: var(--sfsp-ip-color-text-dark);
	margin: 0;
}

.sfsp-free-trial-steps__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* !important to override .page-id-* p { line-height: var(--body-lh) !important } */
.sfsp-free-trial-steps .sfsp-free-trial-steps__step {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.185 !important;
	color: var(--sfsp-ip-color-text);
}

.sfsp-free-trial-steps__step a {
	color: var(--sfsp-ip-color-accent-blue);
	text-decoration: none;
}

.sfsp-free-trial-steps__step a:hover {
	text-decoration: underline;
}

/* ---------- Free Trial Form (right column) ---------- */
.sfsp-free-trial-form {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 24px;
	border: 1px solid #EDEDED;
	background-color: #FFFFFF;
}

.sfsp-free-trial-form__heading {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sfsp-ip-color-text-dark);
	text-transform: capitalize;
	margin: 0;
}

/* Style Formidable Forms inside the form column */
.sfsp-free-trial-form .frm_forms .frm_form_field input[type="text"],
.sfsp-free-trial-form .frm_forms .frm_form_field input[type="email"],
.sfsp-free-trial-form .frm_forms .frm_form_field input[type="tel"],
.sfsp-free-trial-form .frm_forms .frm_form_field select,
.sfsp-free-trial-form .frm_forms .frm_form_field textarea {
	border: 1px solid var(--sfsp-ip-color-card-border);
	border-radius: 4px;
	padding: 10px 14px;
	font-family: var(--sfsp-ip-font);
	font-size: 16px;
}

.sfsp-free-trial-form .frm_forms .frm_submit button,
.sfsp-free-trial-form .frm_forms .frm_submit input[type="submit"] {
	background: var(--sfsp-ip-color-btn-primary);
	color: var(--sfsp-ip-color-white);
	border: none;
	border-radius: var(--sfsp-ip-radius-btn);
	padding: 12px 32px;
	font-family: var(--sfsp-ip-font);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sfsp-free-trial-form .frm_forms .frm_submit button:hover,
.sfsp-free-trial-form .frm_forms .frm_submit input[type="submit"]:hover {
	background: var(--sfsp-ip-color-btn-primary-hover);
}

/* ---------- Page 47165 uses Greenshift blocks — override spacing ---------- */
.page-id-47165 .gspb_container {
	max-width: 100%;
}


/* ==========================================================================
   RESPONSIVE — LAPTOP (min-width: 769px) and (max-width: 1024px)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {

	/* Hero — stack column layout at tablet-laptop range (matches 768px approach) */
	.sfsp-hero {
		flex-direction: column;
		align-items: center;
		padding: 40px 5vw;
		gap: 30px;
	}

	.sfsp-hero__inner {
		flex: 0 0 auto;
		width: 100%;
		max-width: 598px;
		justify-content: center;
	}

	.sfsp-hero__description-card {
		width: 680px;
		max-width: 100%;
		padding: 32px;
	}

	/* Videos — reset full-width breakout at laptop; section fills parent (= viewport) naturally.
	   50vw includes scrollbar width causing ~7.5px overflow — remove at sub-1025px viewports. */
	.page-id-43628 .sfsp-videos {
		margin-left: 0;
		margin-right: 0;
		padding-left: 5vw;
		padding-right: 5vw;
	}

	/* Bundles — switch to column layout at medium desktop (769–1024px).
	   The desktop row layout (title 242px fixed + cards grid) leaves cards ~100–180px wide
	   at this range — too narrow for readable content. Column layout gives cards full width. */
	.sfsp-bundles,
	.page-id-43628 .sfsp-bundles {
		padding: 40px 5vw !important;
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.sfsp-bundles__title {
		flex: none;
		text-align: center;
	}

	.sfsp-bundles__grid {
		width: 100%;
		justify-content: center;
		gap: 20px;
	}

	.page-id-43628 .sfsp-bundles__card {
		flex: 1;
		max-width: 240px;
		min-width: 0;
		height: auto;
	}

	.sfsp-bundles__card-name,
	.sfsp-bundles__card-title { font-size: 18px !important; line-height: 1.3em !important; }

	/* Hero — typography */
	.sfsp-hero__logo { max-width: 128px; }
	.page-id-43628 .sfsp-hero__product-name,
	.page-id-46915 .sfsp-hero__title { font-size: 48px !important; line-height: 1em !important; }
	.sfsp-hero__subtitle { font-size: 20px; line-height: 1.185em; text-align: center; }
	.sfsp-hero__price { font-size: 28px; line-height: 1.143em; }
	.sfsp-hero__description { font-size: 18px; text-align: center; }
	.sfsp-hero__product { align-items: center; gap: 23px; }
	.sfsp-hero__divider-row { justify-content: center; }
	.sfsp-hero__pricing { align-items: center; padding-top: 4px; padding-bottom: 28px; }
	.sfsp-hero__cta:not(.sfsp-hero__cta--mobile),
	.sfsp-hero__actions { justify-content: center; }
	.sfsp-hero__product-name,
	.sfsp-hero__title,
	.sfsp-hero__subtitle,
	.sfsp-hero__tagline,
	.sfsp-hero__price,
	.sfsp-hero__price-sub { text-align: center; }

	/* Feature sections */
	.sfsp-features { padding: 24px 5vw; gap: 24px; }
	.sfsp-feature-section { padding: 0 5vw; }
	.sfsp-feature-section__row { flex-wrap: wrap; gap: 32px; padding: 24px; justify-content: center; }
	#License_Manager.sfsp-feature-section { padding: 24px; margin-left: 5vw; margin-right: 5vw; }
	.page-id-43628 #Support .sfsp-feature-section__row { flex-direction: column-reverse; }
	.page-id-43628 #Support .sfsp-feature-section__media { width: 100%; }
	#Support .sfsp-feature-section__text,
	#Support .sfsp-feature-section__list li { font-size: 20px; line-height: 1.185 !important; }
	#Reimagined .sfsp-feature-section__row { gap: 24px; }
	body.page-id-46915 #Reimagined .sfsp-feature-section__row { padding: 24px; }
	#Reimagined .sfsp-feature-section__content { padding: 24px; }
	.sfsp-feature-section__row:nth-child(even) { flex-direction: row; flex-wrap: wrap; }
	.sfsp-feature-section__media,
	.sfsp-feature-section__content { flex: 1 1 auto; max-width: 100%; }
	.sfsp-feature-section__title { font-size: 28px; line-height: 1.143em !important; }
	.sfsp-feature-section__text,
	.sfsp-features .sfsp-feature-section__text,
	.sfsp-feature-section__list li { font-size: 20px; line-height: 1.6em !important; }
	.sfsp-feature-section__row--reverse { flex-direction: row; flex-wrap: wrap; }
	.sfsp-feature-section__content--wide { max-width: 100%; }
	.sfsp-feature-section__subtitle { font-size: 16px; margin-bottom: 20px; }
	.sfsp-feature-section__heading { font-size: 20px; }
	.sfsp-feature-section__video-grid-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.sfsp-feature-section__more-link a { font-size: 14px; }
	.sfsp-feature-section__compatibility { font-size: 13px; }
	.sfsp-feature-section__support-links a { font-size: 16px; }
	.sfsp-feature-section--power .sfsp-feature-section__row { grid-template-columns: 1fr; gap: 24px 60px; }
	body.page-id-43628 .sfsp-feature-section--power .sfsp-feature-section__row { padding: 24px !important; }
	.sfsp-power__list li { font-size: 16px; }

	/* Videos */
	.sfsp-videos { padding: 24px 5vw; }
	.sfsp-videos__title { font-size: 24px; line-height: 1.167em; }
	.sfsp-videos__grid-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.sfsp-youtube-cta { padding: 30px 5vw; }

	/* Testimonials */
	.sfsp-testimonials { padding: 24px 5vw; }
	.sfsp-testimonials__title { font-size: 24px; }
	.sfsp-testimonials__header { gap: 16px; margin-bottom: 30px; }
	.sfsp-testimonials__nav { width: 40px; height: 40px; }
	.sfsp-testimonials__track { gap: 20px; }
	.sfsp-testimonials__slide { gap: 20px; }
	.sfsp-testimonials__review-text { font-size: 14px; }
	.sfsp-testimonials__cta a { font-size: 16px; }
	.sfsp-testimonials-legacy { padding: 24px; }
	.sfsp-testimonials-legacy__title { font-size: 24px; }

	/* Ticker */
	.sfsp-ticker { padding: 20px 5vw; }
	.sfsp-ticker__text { font-size: 16px; }

	/* Sep Studio NXT overrides */
	.sfsp-product-page--sepstudio .sfsp-hero__description-card { gap: 30px; }
	.sfsp-product-page--sepstudio .sfsp-hero__pricing { gap: 8px; }
	.sfsp-product-page--sepstudio .sfsp-bundles { flex-direction: column; align-items: center; gap: 34px; }
	.sfsp-product-page--sepstudio .sfsp-bundles__inner { flex-direction: column; gap: 24px; }
	.sfsp-product-page--sepstudio .sfsp-bundles__card { width: 336px; height: auto; }
	.sfsp-product-page--sepstudio .sfsp-tabs__tab { font-size: 16px; line-height: 1.185em; }
	.sfsp-product-page--sepstudio .sfsp-feature-section__text,
	.sfsp-product-page--sepstudio .sfsp-feature-section__list li { font-size: 14px !important; line-height: 1.714em !important; }
	.sfsp-product-page--sepstudio .sfsp-feature-section { gap: 24px; }
	.sfsp-product-page--sepstudio .sfsp-videos__grid-inner { grid-template-columns: 1fr; gap: 50px; }

	/* Free Trial pages */
	.sfsp-free-trial-hero__row { padding: 30px 5vw; gap: 24px; }
	.sfsp-free-trial-hero__text .sfsp-free-trial-hero__title { font-size: 48px !important; }
	.sfsp-free-trial-hero__subtitle { font-size: 48px; }
	.sfsp-free-trial-content { padding: 0 5vw; }
	.sfsp-free-trial-content__columns { flex-direction: column; gap: 64px; }

}

/* ==========================================================================
   RESPONSIVE — TABLET (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {

	/* Hero — Figma Tablet: padding 31px 0, gap 30px, column, container 660px, logo 128px */
	.sfsp-hero {
		flex-direction: column;
		align-items: center;
		padding: 31px 5vw;
		gap: 30px;
	}

	.sfsp-hero__inner {
		width: 100%;
		max-width: 598px;
		justify-content: center;
		gap: 4px; /* Figma t2/t3: 4px gap between product row and subtitle row */
		flex: 0 0 auto; /* Override desktop flex: 0 0 598px — release height lock */
		align-content: flex-start; /* Pack rows at top, prevent space distribution */
	}

	.sfsp-hero__logo {
		max-width: 128px;
	}

	.page-id-43628 .sfsp-hero__product-name,
	.page-id-46915 .sfsp-hero__title {
		font-size: 48px !important;
		line-height: 1em !important;
	}

	.sfsp-hero__subtitle {
		font-size: 20px;
		line-height: 1.185em;
		text-align: center;
	}

	.sfsp-hero__price {
		font-size: 28px;
		line-height: 1.143em;
	}

	/* Specificity (0,2,0) + !important beats desktop .page-id-* rule (0,2,0 !important) — later rule wins */
	.page-id-43628 .sfsp-hero__price,
	.page-id-46915 .sfsp-hero__price {
		line-height: 1.143em !important;
	}

	.sfsp-hero__description {
		font-size: 18px;
		text-align: center;
	}
	/* Specificity (0,2,0) + !important beats .page-id p { 0,1,1 + !important } */
	.page-id-43628 .sfsp-hero__description,
	.page-id-46915 .sfsp-hero__description,
	.page-id-44620 .sfsp-hero__description,
	.page-id-47165 .sfsp-hero__description {
		line-height: 1.556em !important;
	}

	.sfsp-hero__description-card {
		width: 680px;
		max-width: 100%;
		padding: 40px;
		gap: 10px;
		align-items: center;
	}

	.page-id-46915 .sfsp-hero__description-card {
		gap: 30px; /* Figma t3: Sep Studio description card gap 30px (AccuRIP stays 10px) */
	}

	.sfsp-hero__cta--mobile {
		display: none;
	}

	.sfsp-hero__title {
		font-size: 48px;
		line-height: 1em;
	}

	.sfsp-hero__product {
		align-items: center;
		gap: 23px; /* Figma: Container gap between logo and product name */
	}

	.sfsp-hero__divider-row {
		justify-content: center;
	}

	.sfsp-hero__pricing {
		align-items: center;
		padding-top: 4px;     /* 4px gap + 4px padding = 8px visual gap subtitle→pricing (Figma Frame1261154549 gap:8px) */
		padding-bottom: 28px; /* 28px padding + 4px gap = 32px visual gap pricing→CTA (Figma Frame1261154530 gap:32px) */
	}

	.sfsp-hero__cta:not(.sfsp-hero__cta--mobile),
	.sfsp-hero__actions {
		justify-content: center;
		/* R13: removed padding-top — gap handled by pricing.padding-bottom above; no padding keeps CTA buttons vertically aligned */
	}

	.sfsp-hero__product-name,
	.sfsp-hero__title,
	.sfsp-hero__subtitle,
	.sfsp-hero__tagline,
	.sfsp-hero__price,
	.sfsp-hero__price-sub {
		text-align: center;
	}

	/* Bundles — Figma Tablet: padding 28px 24px, gap 34px, cards row gap 14px, card 221×559 */
	/* !important required: page-specific rules use !important to override base */
	.sfsp-bundles,
	.page-id-43628 .sfsp-bundles,
	.page-id-46915 .sfsp-bundles,
	.page-id-44620 .sfsp-bundles,
	.page-id-47165 .sfsp-bundles {
		padding: 28px 5vw !important;
		flex-direction: column;
		align-items: center;
	}

	.sfsp-bundles__title {
		font-size: 36px;
		line-height: 1.111em;
		flex: none;
		text-align: center;
	}

	.sfsp-bundles__grid {
		flex-direction: row;
		gap: 14px;
		width: 100%;
		justify-content: center;
	}

	.sfsp-bundles__card {
		width: 221px;
		height: 559px;
		padding: 16px;
		gap: 28px;
	}

	/* AccuRIP: override fixed 559px height at tablet — let content define card height */
	.page-id-43628 .sfsp-bundles__card {
		height: auto;
	}

	/* Feature Sections — Figma Tablet: container padding 24px, gap 24px */
	.sfsp-features {
		padding: 24px 5vw;
		gap: 24px;
	}
	.sfsp-feature-section {
		padding: 0 5vw;
	}

	.sfsp-feature-section__row {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 32px;
		padding: 24px;
		justify-content: center;
	}

	/* License Manager: card padding at tablet — ID rule (1,1,0) overrides general section (0,1,0),
	   so margin provides the physical 5vw inset from viewport edges */
	#License_Manager.sfsp-feature-section {
		padding: 24px;
		margin-left: 5vw;
		margin-right: 5vw;
	}

	/* FLM/Support: image-first at tablet — column-reverse so image appears on top (DOM is [content, media]) */
	.page-id-43628 #Support .sfsp-feature-section__row {
		flex-direction: column-reverse;
	}

	/* FLM/Support: image fills full container width at tablet (Figma: sizing horizontal=fill) */
	.page-id-43628 #Support .sfsp-feature-section__media {
		width: 100%;
	}

	/* FLM/Support: tablet typography — H6/regular 20px (Figma 20803:96095) */
	#Support .sfsp-feature-section__text,
	#Support .sfsp-feature-section__list li {
		font-size: 20px;
		line-height: 1.185 !important;
	}

	/* Reimagined: Type 1 — update row gap and content padding at tablet */
	#Reimagined .sfsp-feature-section__row {
		gap: 24px;
	}
	/* Sep Studio: override desktop padding:64px — body prefix boosts to (1,2,1) > desktop (1,2,0) */
	body.page-id-46915 #Reimagined .sfsp-feature-section__row {
		padding: 24px;
	}
	#Reimagined .sfsp-feature-section__content {
		padding: 24px;
	}

	.sfsp-feature-section__row:nth-child(even) {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.sfsp-feature-section__media,
	.sfsp-feature-section__content {
		flex: 1 1 auto;
		max-width: 100%;
	}

	.sfsp-feature-section__title {
		font-size: 28px;
		line-height: 1.143em !important;
	}

	.sfsp-feature-section__text,
	.sfsp-features .sfsp-feature-section__text,
	.sfsp-feature-section__list li {
		font-size: 20px;
		line-height: 1.6em !important;
	}

	.sfsp-feature-section__row--reverse {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.sfsp-feature-section__content--wide {
		max-width: 100%;
	}

	.sfsp-feature-section__subtitle {
		font-size: 16px;
		margin-bottom: 20px;
	}

	.sfsp-feature-section__heading {
		font-size: 20px;
	}

	.sfsp-feature-section__video-grid-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.sfsp-feature-section__more-link a {
		font-size: 14px;
	}

	.sfsp-feature-section__compatibility {
		font-size: 13px;
	}

	.sfsp-feature-section__support-links a {
		font-size: 16px;
	}

	/* Power — Figma Tablet: row wrap, gap 60px */
	.sfsp-feature-section--power .sfsp-feature-section__row {
		grid-template-columns: 1fr;
		gap: 24px 60px;
	}
	/* AccuRIP: override desktop padding:64px — body prefix boosts to (0,3,1) > desktop (0,3,0) */
	body.page-id-43628 .sfsp-feature-section--power .sfsp-feature-section__row {
		padding: 24px !important;
	}

	.sfsp-power__list li {
		font-size: 16px;
	}

	/* Videos — Figma Tablet: bg #F4F5F7, padding 24px, gap 24px, title H5 24px */
	.sfsp-videos {
		padding: 24px 5vw;
	}

	/* AccuRIP: override desktop padding: 0 — breakout not needed at tablet (parent = viewport width) */
	.page-id-43628 .sfsp-videos {
		margin-left: 0;
		margin-right: 0;
		padding-left: 5vw;
		padding-right: 5vw;
	}

	.sfsp-videos__title {
		font-size: 24px;
		line-height: 1.167em;
	}

	.sfsp-videos__grid-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	/* YouTube CTA */
	.sfsp-youtube-cta {
		padding: 30px 5vw;
	}

	/* Testimonials */
	.sfsp-testimonials {
		padding: 24px 5vw;
	}

	.sfsp-testimonials__title {
		font-size: 24px;
	}

	.sfsp-testimonials__header {
		gap: 16px;
		margin-bottom: 30px;
	}

	.sfsp-testimonials__nav {
		width: 40px;
		height: 40px;
	}

	.sfsp-testimonials__track {
		gap: 20px;
	}

	.sfsp-testimonials__slide {
		gap: 20px;
	}

	.sfsp-testimonials__review-text {
		font-size: 14px;
	}

	.sfsp-testimonials__cta a {
		font-size: 16px;
	}

	.sfsp-testimonials-legacy {
		padding: 24px;
	}

	.sfsp-testimonials-legacy__title {
		font-size: 24px;
	}

	/* Ticker */
	.sfsp-ticker {
		padding: 20px 5vw;
	}

	.sfsp-ticker__text {
		font-size: 16px;
	}

	/* ---------- SEP STUDIO NXT — TABLET OVERRIDES ---------- */
	/* Hero: desc card gap 30px (layout_GHQMJ4), pricing gap 8px (Figma Frame1261154549 gap:8px — R13 fix was 32px wrong) */
	.sfsp-product-page--sepstudio .sfsp-hero__description-card {
		gap: 30px;
	}
	.sfsp-product-page--sepstudio .sfsp-hero__pricing {
		gap: 8px;
	}

	/* Figma Tablet Sep Studio: bundles section gap 34px (layout_AT9WGL), card 336px */
	.sfsp-product-page--sepstudio .sfsp-bundles {
		flex-direction: column;
		align-items: center;
		gap: 34px;
	}

	/* Cards inside __inner stack vertically at tablet */
	.sfsp-product-page--sepstudio .sfsp-bundles__inner {
		flex-direction: column;
		gap: 24px;
	}

	.sfsp-product-page--sepstudio .sfsp-bundles__card {
		width: 336px;
		height: auto;
	}

	/* Figma Tablet Sep Studio: tab text 16px (AccuRIP uses 20px) */
	.sfsp-product-page--sepstudio .sfsp-tabs__tab {
		font-size: 16px;
		line-height: 1.185em;
	}

	/* Figma Tablet Sep Studio: feature body text 14px/1.714 */
	.sfsp-product-page--sepstudio .sfsp-feature-section__text,
	.sfsp-product-page--sepstudio .sfsp-feature-section__list li {
		font-size: 14px !important;
		line-height: 1.714em !important;
	}

	/* Figma Tablet Sep Studio: feature card padding 24px, gap 24px */
	.sfsp-product-page--sepstudio .sfsp-feature-section {
		gap: 24px;
	}

	/* Figma Tablet Sep Studio: videos grid column gap 50px */
	.sfsp-product-page--sepstudio .sfsp-videos__grid-inner {
		grid-template-columns: 1fr;
		gap: 50px;
	}

	/* Free Trial — Figma Tablet: hero 30px 24px, title 48px, content 0 24px, columns stacked 64px gap */
	.sfsp-free-trial-hero__row {
		padding: 30px 5vw;
		gap: 24px;
	}

	/* !important to override .page-id-* h1 { font-size: var(--h4-size) !important } */
	.sfsp-free-trial-hero__text .sfsp-free-trial-hero__title {
		font-size: 48px !important;
	}

	.sfsp-free-trial-hero__subtitle {
		font-size: 48px;
	}

	.sfsp-free-trial-content {
		padding: 0 5vw;
	}

	.sfsp-free-trial-content__columns {
		flex-direction: column;
		gap: 64px;
	}
}

/* ==========================================================================
   RESPONSIVE — SMALL TABLET / LARGE MOBILE (max-width: 700px)
   ========================================================================== */
@media (max-width: 700px) {

	.sfsp-bundles__grid {
		flex-direction: column;
		gap: 24px;
		align-items: center;
		width: 100%;
	}

	.sfsp-bundles__card {
		width: 100%;
		max-width: 336px;
		height: auto;
		border: 1px solid #D7D7D7;
	}

	/* AccuRIP: match auto height already set at ≤768px */
	.page-id-43628 .sfsp-bundles__card {
		height: auto;
	}

}

/* ==========================================================================
   RESPONSIVE — MOBILE (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {

	/* Hero — Figma Mobile: padding 31px 0, gap 30px, container 365px, H1 36px, logo 128px */
	.sfsp-hero {
		padding: 31px 6vw;
		gap: 30px;
	}

	.sfsp-hero__inner {
		flex: 0 0 auto;    /* override flex-basis:598px so max-width can take effect */
		width: 100%;       /* fill parent, capped by max-width */
		max-width: 365px;
		gap: 4px;          /* match Figma Frame1261154531 internal gap: h1→subtitle = 4px */
	}

	/* Buttons: same row on bigger mobile (375px+), proportional to Figma widths (156px:203px).
	   Wrap only on very small screens (≤360px) */
	/* AccuRIP: .sfsp-hero__cta and div.sfsp-hero__learn-more are siblings in .sfsp-hero__inner.
	   Use > combinator to match desktop specificity (.sfsp-hero__inner > .sfsp-hero__cta). */
	.sfsp-hero__inner > .sfsp-hero__cta {
		flex: 156 1 0;
		min-width: 0;
		justify-content: center;
	}
	.sfsp-hero__inner > div.sfsp-hero__learn-more {
		flex: 203 1 0;
		min-width: 0;
		justify-content: center;
	}

	/* Sep Studio: .sfsp-hero__actions wraps both buttons — fill the row */
	.sfsp-hero__actions {
		width: 100%;
		justify-content: center;
	}

	/* Add to Cart — flex-grow proportional to Figma 156px; padding 8px 24px per Figma */
	.sfsp-hero__add-to-cart {
		flex: 156 1 0;
		min-width: 0;
		padding: 8px 24px;
	}

	/* Start FREE Trial — flex-grow proportional to Figma 203px; padding 8px 24px per Figma */
	a.sfsp-hero__learn-more,
	div.sfsp-hero__learn-more a {
		flex: 203 1 0;
		min-width: 0;
		padding: 8px 24px;
	}

	.sfsp-hero__logo {
		max-width: 128px;
	}

	.page-id-43628 .sfsp-hero__product-name,
	.page-id-46915 .sfsp-hero__title {
		font-size: 36px !important;
		line-height: 1.11em !important;
	}

	.sfsp-hero__subtitle {
		font-size: 18px;
		line-height: 1.185em;
		white-space: normal;
		text-align: center;
	}

	.sfsp-hero__divider-row {
		justify-content: center;
	}

	.sfsp-hero__price {
		font-size: 24px;
		line-height: 1.167em;
	}

	.sfsp-hero__description {
		font-size: 18px;
	}

	.sfsp-hero__description-card {
		width: 390px;
		max-width: 100%;
		padding: 40px;
		gap: 30px; /* Reset from tablet 10px back to Figma mobile 30px */
	}

	.page-id-46915 .sfsp-hero__description-card {
		gap: 10px; /* Mobile: override high-specificity tablet 30px rule — Sep Studio mobile gap = 10px */
	}

	/* Specificity (0,2,0) + !important beats .page-id p { 0,1,1 + !important } */
	.page-id-43628 .sfsp-hero__description,
	.page-id-46915 .sfsp-hero__description,
	.page-id-44620 .sfsp-hero__description,
	.page-id-47165 .sfsp-hero__description {
		line-height: 1.333em !important;
	}

	.sfsp-hero__title {
		font-size: 36px;
		line-height: 1.11em;
	}

	/* Bundles — Figma Mobile: padding 28px 20px, column, gap 24px, card 336px, border 1px #D7D7D7 */
	/* !important required: tablet MQ uses !important on all page-id selectors */
	.sfsp-bundles,
	.page-id-43628 .sfsp-bundles,
	.page-id-46915 .sfsp-bundles,
	.page-id-44620 .sfsp-bundles,
	.page-id-47165 .sfsp-bundles {
		padding: 28px 6vw !important;
	}

	.sfsp-bundles__title {
		font-size: 30px;
		line-height: 1.2em;
	}

	.sfsp-bundles__grid {
		flex-direction: column;
		gap: 24px;
		align-items: center;
		width: 100%;
	}

	.sfsp-bundles__card {
		width: 100%;
		max-width: 336px;
		height: auto;
		padding: 16px;
		gap: 28px;
		border: 1px solid #D7D7D7;
	}

	/* Feature Sections — Figma Mobile: container padding 20px, gap 20px */
	.sfsp-features {
		padding: 20px 6vw;
		gap: 20px;
	}
	.sfsp-feature-section {
		padding: 0 6vw;
	}

	.sfsp-feature-section__row {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 20px;
		padding: 20px;
	}

	/* License Manager: card padding at mobile — ID rule (1,1,0) overrides general section (0,1,0),
	   so margin provides the physical 6vw inset from viewport edges */
	#License_Manager.sfsp-feature-section {
		padding: 20px;
		margin-left: 6vw;
		margin-right: 6vw;
	}

	/* FLM/Support: image-first at mobile — column-reverse so image appears on top (DOM is [content, media]) */
	.page-id-43628 #Support .sfsp-feature-section__row {
		flex-direction: column-reverse;
	}

	/* FLM/Support: image fills full container width at mobile (Figma: sizing horizontal=fill) */
	.page-id-43628 #Support .sfsp-feature-section__media {
		width: 100%;
	}

	/* FLM/Support: mobile typography — H6/regular 18px (Figma 20789:90192) */
	#Support .sfsp-feature-section__text,
	#Support .sfsp-feature-section__list li {
		font-size: 18px;
		line-height: 1.185 !important;
	}

	/* Reimagined: Type 1 — update row gap and content padding at mobile */
	#Reimagined .sfsp-feature-section__row {
		gap: 20px;
	}
	/* Sep Studio: override desktop padding:64px at mobile — (1,2,1) > desktop (1,2,0) */
	body.page-id-46915 #Reimagined .sfsp-feature-section__row {
		padding: 20px;
	}
	/* AccuRIP: override desktop padding:64px at mobile — (0,3,1) > desktop (0,3,0) */
	body.page-id-43628 .sfsp-feature-section--power .sfsp-feature-section__row {
		padding: 20px !important;
	}
	#Reimagined .sfsp-feature-section__content {
		padding: 20px;
	}

	.sfsp-feature-section__row:nth-child(even) {
		flex-direction: column;
	}

	.sfsp-feature-section__row--reverse {
		flex-direction: column;
	}

	.sfsp-feature-section__title {
		font-size: 24px;
		line-height: 1.167em;
	}

	.sfsp-feature-section__text,
	.sfsp-feature-section__list li {
		font-size: 20px;
		line-height: 1.6em;
	}

	.sfsp-feature-section__link {
		font-size: 14px;
	}

	.sfsp-feature-section__subtitle {
		font-size: 14px;
		margin-bottom: 16px;
	}

	.sfsp-feature-section__heading {
		font-size: 18px;
	}

	.sfsp-feature-section__video-grid-inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.sfsp-feature-section__more-link a {
		font-size: 14px;
	}

	.sfsp-feature-section__compatibility {
		font-size: 12px;
	}

	.sfsp-feature-section__support-links {
		flex-direction: column;
		gap: 10px;
	}

	.sfsp-feature-section__support-links a {
		font-size: 14px;
	}

	/* Power */
	.sfsp-power__list li {
		font-size: 14px;
	}

	/* Videos — Figma Mobile: bg #F4F5F7, padding 20px, gap 20px, title 20px */
	.sfsp-videos {
		padding: 20px 6vw;
		gap: 20px;
	}

	/* AccuRIP: override desktop padding: 0 — reset breakout at mobile; 2-column grid */
	.page-id-43628 .sfsp-videos {
		margin-left: 0;
		margin-right: 0;
		padding-left: 6vw;
		padding-right: 6vw;
	}

	/* Switch AccuRIP videos to 2-column at mobile (3 columns too narrow at ≤480px) */
	.page-id-43628 .sfsp-videos .sfsp-videos__item {
		flex: 0 0 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}

	.sfsp-videos__title {
		font-size: 20px;
		line-height: 1.2em;
	}

	.sfsp-videos__grid-inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* YouTube CTA */
	.sfsp-youtube-cta {
		padding: 24px 6vw;
	}

	.sfsp-youtube-cta img {
		max-width: 140px;
	}

	/* Testimonials — Figma Mobile: padding 20px, gap 64px, card padding 20px */
	.sfsp-testimonials {
		padding: 20px 6vw;
	}

	.sfsp-testimonials__title {
		font-size: 20px;
	}

	.sfsp-testimonials__ticker {
		font-size: 16px;
	}

	.sfsp-testimonials__header {
		gap: 12px;
		margin-bottom: 24px;
	}

	.sfsp-testimonials__nav {
		width: 36px;
		height: 36px;
	}

	.sfsp-testimonials__track {
		gap: 16px;
	}

	.sfsp-testimonials__slide {
		flex-direction: row;
		gap: 32px;
	}

	.sfsp-testimonials__review-text {
		font-size: 13px;
	}

	.sfsp-testimonials__review-author p {
		font-size: 12px;
	}

	.sfsp-testimonials__cta {
		margin-top: 24px;
	}

	.sfsp-testimonials__cta a {
		font-size: 14px;
	}

	.sfsp-testimonials-legacy {
		padding: 20px;
	}

	.sfsp-testimonials-legacy__title {
		font-size: 20px;
	}

	/* Ticker — Figma Mobile: padding 20px */
	.sfsp-ticker {
		padding: 20px 6vw;
	}

	.sfsp-ticker__text {
		font-size: 14px;
	}

	/* ---------- SEP STUDIO NXT — MOBILE OVERRIDES ---------- */
	/* Figma Mobile Sep Studio: bundles title 36px (shared uses 30px) */
	.sfsp-product-page--sepstudio .sfsp-bundles__title {
		font-size: 36px;
		line-height: 1.111em;
	}

	/* Constrain __inner so align-items:center on parent doesn't let card's fixed width push it out */
	.sfsp-product-page--sepstudio .sfsp-bundles__inner {
		width: 100%;
	}

	/* Figma Mobile Sep Studio: card 390px, padding 20px, gap 32px, box-shadow */
	.sfsp-product-page--sepstudio .sfsp-bundles__card {
		width: 390px;
		max-width: 100%;
		padding: 20px;
		gap: 32px;
		box-shadow: 0px 8px 16px 0px rgba(9, 30, 66, 0.15);
	}

	/* Figma Mobile Sep Studio: tab text 16px (shared uses 18px) */
	.sfsp-product-page--sepstudio .sfsp-tabs__tab {
		font-size: 16px;
		line-height: 1.185em;
	}

	/* Figma Mobile Sep Studio: feature body text 14px/1.714 */
	.sfsp-product-page--sepstudio .sfsp-feature-section__text,
	.sfsp-product-page--sepstudio .sfsp-feature-section__list li {
		font-size: 14px;
		line-height: 1.714em;
	}

	/* Figma Mobile Sep Studio: feature section gap 20px (between sections) */
	.sfsp-product-page--sepstudio .sfsp-feature-section {
		gap: 20px;
	}

	/* Figma Mobile Sep Studio: feature row gap 32px (layout_NRN19V) — between stacked image+content */
	.sfsp-product-page--sepstudio .sfsp-feature-section__row {
		gap: 32px;
	}

	/* Figma Mobile Sep Studio: videos title 28px (shared uses 20px) */
	.sfsp-product-page--sepstudio .sfsp-videos__title {
		font-size: 28px;
		line-height: 1.14em;
	}

	/* Figma Mobile Sep Studio: videos grid gap 32px */
	.sfsp-product-page--sepstudio .sfsp-videos__grid-inner {
		gap: 32px;
	}

	/* Free Trial — Figma Mobile: hero 30px 20px, title 36px, content 0 20px, columns wrap 64px gap */
	.sfsp-free-trial-hero__row {
		padding: 30px 6vw;
		gap: 24px;
	}

	/* !important to override .page-id-* h1 { font-size: var(--h4-size) !important } */
	.sfsp-free-trial-hero__text .sfsp-free-trial-hero__title {
		font-size: 36px !important;
		line-height: 1.111 !important;
	}

	.sfsp-free-trial-hero__subtitle {
		font-size: 36px;
		line-height: 1.111;
	}

	.sfsp-free-trial-content {
		padding: 0 6vw;
	}

	.sfsp-free-trial-content__columns {
		gap: 64px;
	}

	/* ---- Mobile font fixes: page-id + !important beats global 0,2,0 !important rules ---- */

	/* Hero price line-height: Figma H4/Bold mobile = 1.167em (global forces 1.2em) */
	.page-id-43628 .sfsp-hero__price,
	.page-id-46915 .sfsp-hero__price {
		line-height: 1.167em !important;
	}

	/* Hero price-sub: Figma Paragraph/Small mobile = 16px/400/1.25em (global forces 18px/1.556em) */
	.page-id-43628 .sfsp-hero__price-sub,
	.page-id-46915 .sfsp-hero__price-sub {
		font-size: 16px !important;
		line-height: 1.25em !important;
	}

	/* Sep Studio tagline: Figma H6/regular mobile = 18px/1.185em (global forces 24px) */
	.page-id-46915 .sfsp-hero__tagline {
		font-size: 18px !important;
		line-height: 1.185em !important;
	}

	/* Sep Studio feature text: Figma mobile = 14px/1.714em (global forces 18px/1.556em) */
	.page-id-46915 .sfsp-feature-section__text,
	.page-id-46915 .sfsp-feature-section__list li {
		font-size: 14px !important;
		line-height: 1.714em !important;
	}

	/* Videos more-link: Figma Button/Small mobile = 14px/600/2em (global + direct a rule forces 16px/1.75em) */
	.page-id-43628 .sfsp-videos__more-link a,
	.page-id-46915 .sfsp-videos__more-link a {
		font-size: 14px !important;
		line-height: 2em !important;
	}
}

/* ==========================================================================
   RESPONSIVE — MOBILE SMALL (max-width: 360px)
   ========================================================================== */
@media (max-width: 360px) {

	/* Buttons: stack vertically on very small screens */
	/* AccuRIP: override the 480px flex-grow rules — use same specificity to win */
	.sfsp-hero__inner > .sfsp-hero__cta,
	.sfsp-hero__inner > div.sfsp-hero__learn-more {
		flex: 0 0 100%;
	}

	/* Sep Studio: wrap buttons inside .sfsp-hero__actions */
	.sfsp-hero__actions {
		flex-wrap: wrap;
	}

	.sfsp-hero__add-to-cart,
	a.sfsp-hero__learn-more,
	div.sfsp-hero__learn-more a {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* ============================================================
   REVISION 7 — TODO.md Visual Fixes
   AccuRIP Emerald (43628) + Sep Studio NXT (46915)
   ============================================================ */

/* === ACCURIP FIXES === */

/* A1a: Bundle card — reduce internal gap (Figma: 16px vs current 28px) */
.page-id-43628 .sfsp-bundles__card {
	gap: 16px;
}

/* A1b: Bundle card — gap above Add to Cart button per Figma (padding — is-layout-flow resets margin) */
.page-id-43628 .sfsp-bundles__card-actions {
	padding-top: 16px !important;
}

/* A2: Reimagined heading — increase spacing below (use padding — is-layout-flow resets margin) */
.page-id-43628 #Reimagined > .sfsp-feature-section__title {
	padding-bottom: 48px;
}

/* A3a: Power Delivered — add shadow container to __row */
.page-id-43628 .sfsp-feature-section--power .sfsp-feature-section__row {
	background: var(--sfsp-ip-color-white) !important;
	box-shadow: var(--sfsp-ip-shadow-content) !important;
	border-radius: var(--sfsp-ip-radius-card) !important;
	padding: 64px !important;
}

/* A3b: Power Delivered bullets — increase left indent */
.page-id-43628 .sfsp-power__list li {
	padding-left: 32px;
}

/* A4: FLM/Support bullets — increase left indent */
.page-id-43628 #Support .sfsp-feature-section__list li {
	padding-left: 32px;
}

/* === SEP STUDIO FIXES === */

/* S1a: Bundle cards — remove shadow */
.sfsp-product-page--sepstudio .sfsp-bundles__card {
	box-shadow: none !important;
}

/* S1b: Bundle pricing — stack vertically, centered */
.sfsp-product-page--sepstudio .sfsp-bundles__card-pricing {
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

/* S1c: Bundle price and period — tighten line-height when stacked */
.sfsp-product-page--sepstudio .sfsp-bundles__card-price,
.sfsp-product-page--sepstudio .sfsp-bundles__card-period {
	line-height: 1.1 !important;
}

/* S1d: Bundle value — center text */
.sfsp-product-page--sepstudio .sfsp-bundles__card-value {
	text-align: center;
}

/* S1e: Bundle feature list — reduce item gap */
.sfsp-product-page--sepstudio .sfsp-bundles__card-features {
	gap: 6px;
}

/* S3a: Print Like Big Press — remove shadow from __row */
#Print_Like_You_Have_A_Big_Press .sfsp-feature-section__row {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	gap: 60px;
}

/* S3b: Print Like Big Press — shadow on __content (left column) only */
#Print_Like_You_Have_A_Big_Press .sfsp-feature-section__content {
	padding: 44px;
	background: var(--sfsp-ip-color-white);
	border-radius: 4.8px;
	box-shadow: 0px 8px 16px 0px rgba(9, 30, 66, 0.15);
}

/* S3c: Print Like Big Press — center title and subtitle (outside __row) */
#Print_Like_You_Have_A_Big_Press > .sfsp-feature-section__title,
#Print_Like_You_Have_A_Big_Press > .sfsp-feature-section__subtitle {
	text-align: center;
}

/* S4: More Videos link — spacing above + arrow icon */
.sfsp-feature-section__more-link {
	text-align: center;
	padding-top: 32px;
}

.sfsp-feature-section__more-link a {
	color: var(--sfsp-ip-color-btn-primary);
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sfsp-feature-section__more-link a::after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.43 5.93L20.5 12L14.43 18.07' stroke='%231246D5' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 12H20.33' stroke='%231246D5' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	flex-shrink: 0;
}

.sfsp-feature-section__more-link a:hover {
	text-decoration: underline;
}

/* S5: Sep Studio Reimagined — center heading */
.page-id-46915 #Reimagined > .sfsp-feature-section__title {
	text-align: center;
	margin-bottom: 8px;
}

/* S5b: Sep Studio Reimagined subtitle "Reimagined and Redesigned" */
.page-id-46915 #Reimagined > .sfsp-feature-section__tagline {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.143em;
	text-align: center;
	color: var(--sfsp-ip-color-text);
	margin-bottom: 16px;
}

/* S6a: Sep Studio Reimagined — __row gets shadow (Includes container) */
.page-id-46915 #Reimagined .sfsp-feature-section__row {
	background: var(--sfsp-ip-color-white);
	box-shadow: var(--sfsp-ip-shadow-content);
	border-radius: var(--sfsp-ip-radius-card);
	padding: 64px;
}

/* S6b: Sep Studio Reimagined — __content resets (no shadow, full width) */
.page-id-46915 #Reimagined .sfsp-feature-section__content {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	flex: 1 1 100%;
	max-width: 100%;
}

/* S6c: Sep Studio Reimagined — hide media (pileup.png) column */
.page-id-46915 #Reimagined .sfsp-feature-section__media {
	display: none;
}

/* S6d: Reimagined — "Separation Studio NXT Includes:" heading above container */
.page-id-46915 #Reimagined > .sfsp-feature-section__heading {
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	padding-bottom: 32px !important;
}

/* Sep Studio feature section list bullets — padding-left (no .sfsp-features wrapper here) */
.sfsp-product-page--sepstudio .sfsp-feature-section__list li {
	padding-left: 24px;
	position: relative;
}

/* Sep Studio feature section list bullets — dot visibility */
.sfsp-product-page--sepstudio .sfsp-feature-section__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sfsp-ip-color-text);
}

/* S7: Nucleus Workflow — paragraph gap between texts */
.page-id-46915 #Workflow .sfsp-feature-section__content {
	gap: 16px;
}

/* S8: Flexibility — heading spacing below (use padding — is-layout-flow resets margin) */
.page-id-46915 #Flexibility > .sfsp-feature-section__title {
	padding-bottom: 32px;
}

/* S13: Cloud Activation (Downtime) — heading spacing below (use padding — is-layout-flow resets margin) */
.page-id-46915 #Cloud_Activation > .sfsp-feature-section__title {
	padding-bottom: 32px;
}

/* ── Plan detail popups — match live site enterprise-blue-2 (theme-25131) ── */
.pum-container.theme-25131 .pum-content h2 {
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 29px !important;
	margin-bottom: 14px !important;
}

.pum-container.theme-25131 .pum-content ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.pum-container.theme-25131 .pum-content li {
	line-height: 24px !important;
	list-style: none !important;
}

/* Circle bullets on content list items (replaces WPBakery mk-moon-circle-small SVG) */
.pum-container.theme-25131 .pum-content > ul > li > ul > li {
	padding-left: 22px !important;
	position: relative;
}

.pum-container.theme-25131 .pum-content > ul > li > ul > li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgb(238, 238, 238);
}

/* Sub-items (annual billing note etc.) — indent only, no bullet */
.pum-container.theme-25131 .pum-content > ul > li > ul > li > ul {
	padding-left: 16px !important;
}

.pum-container.theme-25131 .pum-content > ul > li > ul > li > ul > li {
	padding-left: 0 !important;
	font-size: 13px !important;
	opacity: 0.85;
}

.pum-container.theme-25131 .pum-content p {
	font-size: 14px !important;
	line-height: 21px !important;
}

/* ── Rev 11 fixes ── */

/* Hide "View Cart" link injected by WooCommerce after AJAX add-to-cart (cart page disabled) */
.added_to_cart.wc-forward {
	display: none !important;
}

/* AccuRIP: remove shadow from bundle/pricing cards (not in Figma) */
.page-id-43628 .sfsp-bundles__card {
	box-shadow: none !important;
}

/* AccuRIP Reimagined: shadow card aligns to top of video, not vertically centered */
.page-id-43628 #Reimagined .sfsp-feature-section__row {
	align-items: flex-start;
}

/* OS requirements text: full opacity (rgba 0.9) not muted (0.6) */
.sfsp-feature-section__compatibility {
	color: rgba(29, 29, 31, 0.9) !important;
}

/* Sep Studio: "Take full control" and similar feature section headings — H4/Bold = 30px per Figma */
.page-id-46915 .sfsp-feature-section__heading {
	font-size: 30px !important;
	font-weight: 700 !important;
}

/* Sep Studio Reimagined: long description paragraph — Paragraph/Small/Regular = 18px per Figma */
.page-id-46915 #Reimagined .sfsp-feature-section__subtitle {
	font-size: 18px !important;
	line-height: 1.556em !important;
	text-align: center;
}

/* Sep Studio Flexibility: paragraph container stretches to full width aligned with heading */
.page-id-46915 #Flexibility .sfsp-feature-section__content--wide {
	max-width: none !important;
	width: 100% !important;
}

/* Sep Studio Cloud Activation: paragraph container stretches to full width aligned with heading */
.page-id-46915 #Cloud_Activation .sfsp-feature-section__content--wide {
	max-width: none !important;
	width: 100% !important;
}

/* Hero "Learn more" arrow SVG: must match link color #1246D5 per Figma */
.sfsp-hero__description-cta svg path {
	stroke: #1246D5 !important;
}

/* Sep Studio Print Like Big Press: title and subtitle spacing above content row */
.page-id-46915 #Print_Like_You_Have_A_Big_Press > .sfsp-feature-section__title {
	padding-bottom: 10px !important;
}
.page-id-46915 #Print_Like_You_Have_A_Big_Press > .sfsp-feature-section__subtitle {
	padding-bottom: 50px !important;
}

/* =============================================================================
   LEARN MORE OFF-CANVAS PANELS (Rev 1 — 86ewpet5b)
   Replaces PopupMaker modals with Blocksy ct-panel right-side drawers.
   Triggered by href="#sfsp-panel-{popup_id}" on Learn More buttons.
   ============================================================================= */

/* Panel container */
.sfsp-learn-more-panel {
	--side-panel-width: 480px;
	z-index: 10001 !important;
}

/* Panel inner: white card, full height flex column */
.sfsp-learn-more-panel .ct-panel-inner {
	background: #FFFFFF !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Header: title + close button row */
.sfsp-learn-more-panel .ct-panel-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid #EDEDED;
	flex-shrink: 0;
}

/* Panel heading / title */
.sfsp-learn-more-panel .ct-panel-heading {
	font-family: 'Rubik', sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: rgba(29, 29, 31, 0.9);
	line-height: 1.4;
}

/* Close button */
.sfsp-learn-more-panel .ct-toggle-close {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: rgba(29, 29, 31, 0.6);
	border-radius: 4px;
	transition: background 0.15s;
	flex-shrink: 0;
}

.sfsp-learn-more-panel .ct-toggle-close svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.sfsp-learn-more-panel .ct-toggle-close:hover {
	background: rgba(0, 0, 0, 0.06);
}

.sfsp-learn-more-panel .ct-toggle-close .ct-icon {
	width: 24px;
	height: 24px;
}

/* Scrollable content area */
.sfsp-learn-more-panel .ct-panel-content {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
}

/* Remove default inner padding if present */
.sfsp-learn-more-panel .ct-panel-content-inner {
	padding: 0 !important;
}

/* Panel body: content typography */

/* Override white inline color spans from popup source content */
.sfsp-learn-more-panel .sfsp-panel-body span[style] {
	color: inherit !important;
}

/* Headings */
.sfsp-learn-more-panel .sfsp-panel-body h2,
.sfsp-learn-more-panel .sfsp-panel-body h3,
.sfsp-learn-more-panel .sfsp-panel-body h4 {
	font-family: 'Rubik', sans-serif;
	font-weight: 500;
	color: rgba(29, 29, 31, 0.9);
	margin-top: 0;
	margin-bottom: 12px;
}

.sfsp-learn-more-panel .sfsp-panel-body h2 {
	font-size: 18px;
	line-height: 1.3;
}

.sfsp-learn-more-panel .sfsp-panel-body h4 {
	font-size: 24px !important;
	line-height: 1.2 !important;
	font-weight: 400;
	color: rgba(29, 29, 31, 0.75);
	margin-bottom: 20px;
}

/* Feature list */
.sfsp-learn-more-panel .sfsp-panel-body ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 0 8px !important;
}

/* Remove BR tags from WP content (create extra blank-line spacing around pricing) */
.sfsp-learn-more-panel .sfsp-panel-body br {
	display: none;
}

.sfsp-learn-more-panel .sfsp-panel-body li {
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(29, 29, 31, 0.9);
	padding-left: 20px;
	position: relative;
	margin-bottom: 8px;
}

/* Hide outer wrapper li (list-style-type: none pattern from popup source) */
.sfsp-learn-more-panel .sfsp-panel-body > ul > li[style*="list-style-type: none"] {
	padding-left: 0;
	margin-bottom: 0;
}

/* Bullet dots: top-level items */
.sfsp-learn-more-panel .sfsp-panel-body > ul > li:not([style*="list-style-type: none"])::before,
.sfsp-learn-more-panel .sfsp-panel-body > ul > li[style*="list-style-type: none"] > ul > li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(29, 29, 31, 0.25);
}

/* Sub-items: smaller, indented, no bullet */
.sfsp-learn-more-panel .sfsp-panel-body li ul li {
	font-size: 13px;
	color: rgba(29, 29, 31, 0.75);
	padding-left: 16px;
	margin-bottom: 4px;
}

.sfsp-learn-more-panel .sfsp-panel-body li:not([style*="list-style-type: none"]) ul li::before {
	display: none;
}

/* Paragraphs */
.sfsp-learn-more-panel .sfsp-panel-body p {
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(29, 29, 31, 0.75);
	margin-bottom: 12px;
}

/* Responsive: narrower panel on small screens */
@media (max-width: 540px) {
	.sfsp-learn-more-panel {
		--side-panel-width: 340px;
	}
}

/* ── Add to Cart ink kit popup — theme-25134 ── */

/* Center popup in viewport (override PopupMaker inline positioning) */
.pum-container.theme-25134 {
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
	max-width: 480px !important;
}

/* Content area padding */
.pum-container.theme-25134 .pum-content {
	padding: 32px;
}

/* Title */
.add-to-cart-popup .description {
	display: block;
	font-size: 20px;
	font-weight: 600;
	color: rgba(29, 29, 31, 0.9);
	margin-bottom: 24px;
}

/* Hide empty <p> tag injected after title */
.add-to-cart-popup > p:empty,
.add-to-cart-popup > p:first-of-type:empty {
	display: none;
}

/* Form row: label + select — flex replacing broken float layout */
.popup-dialog-select {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.popup-dialog-select .leftbox-no-padding {
	flex: 0 0 auto;
}

.popup-dialog-select .leftbox-no-padding label {
	font-size: 14px;
	font-weight: 400;
	color: rgba(29, 29, 31, 0.7);
	white-space: nowrap;
}

.popup-dialog-select .middlebox {
	flex: 1;
}

.popup-dialog-select .rightbox {
	display: none;
}

/* Error messages */
.ink-selection-error,
.film-selection-error {
	font-size: 13px;
	line-height: 1.4;
	color: #d63638;
	background: #fef0f0;
	border: 1px solid #f5c6cb;
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 12px;
}

.ink-selection-error a,
.film-selection-error a {
	color: #d63638;
	font-weight: 600;
	text-decoration: underline;
}

/* Button loading state during AJAX add-to-cart */
.add-to-cart-popup .single_add_to_cart_button.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* Hidden form inputs container — suppress <br> tags causing blank space */
.add-to-cart-popup .hidden-input {
	display: none;
}

/* Suppress legacy vertical spacer */
.add-to-cart-popup .v-spacer {
	display: none;
}

/* Button row: Cancel left, Add to Cart right */
.popup-button {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 24px;
}

/* Suppress <br> elements inside the button row */
.popup-button br {
	display: none;
}

.popup-button .pum-close.popmake-close {
	font-size: 14px;
	color: rgba(29, 29, 31, 0.5);
	cursor: pointer;
	text-decoration: underline;
	order: -1;
}

/* ── Responsive: mobile ── */
@media (max-width: 600px) {
	.pum-container.theme-25134 {
		width: 92% !important;
		max-width: 92% !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
	}

	.pum-container.theme-25134 .pum-content {
		padding: 24px;
	}

	.popup-dialog-select {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.popup-dialog-select .middlebox {
		width: 100%;
	}

	.popup-button {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-top: 20px;
	}

	.popup-button .pum-close.popmake-close {
		text-align: center;
		order: 1;
	}

	.popup-button .single_add_to_cart_button {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   TASK 86ewypn5w — Mobile overflow + hero height fixes
   ========================================================================== */
@media (max-width: 689px) {

	/* Hero: override desktop min-height (543px) and remove dark bg composite image */
	.sfsp-software__hero {
		min-height: auto;
		background-image: none;
	}

	/* Constrain GreenShift images on mobile — Divider.png is 1440px wide */
	.page-id-47165 .gspb_container img {
		max-width: 100%;
		height: auto;
	}
}

/* ==========================================================================
   TASK 86ewypn5w — Inline style override: hero background-image on mobile.
   WP block sets background-image as inline style; !important is required.
   ========================================================================== */
@media (max-width: 689px) {
	.sfsp-software__hero {
		background-image: none !important;
	}
}

/* ==========================================================================
   TASK 86ewypn82 — AccuRIP Emerald popup panel Add to Cart button styling
   Match hero blue pill button style inside .ct-panel popups
   ========================================================================== */
.ct-panel .single_add_to_cart_button.button {
	background-color: var(--sfsp-sw-color-primary, #1246d5) !important;
	border: none !important;
	border-radius: 9999px !important;
	color: #ffffff !important;
}

.ct-panel .single_add_to_cart_button.button:hover {
	background-color: #0d38b0 !important;
}

/* TASK 86ewypn82 — corrected selector: Popup Maker wraps in .pum-content, not .ct-panel */
.pum-content .single_add_to_cart_button.button,
.add-to-cart-popup .single_add_to_cart_button.button {
	background-color: var(--sfsp-sw-color-primary, #1246d5) !important;
	border: none !important;
	border-radius: 9999px !important;
	color: #ffffff !important;
}

.pum-content .single_add_to_cart_button.button:hover,
.add-to-cart-popup .single_add_to_cart_button.button:hover {
	background-color: #0d38b0 !important;
}

/* ── Issue 2: Card button height — match hero button 48px (Figma) ── */
.sfsp-software__card-buy-btn .wp-block-button__link,
a.sfsp-software__card-buy-btn {
	height: auto;
	min-height: 48px;
}
.sfsp-software__card-trial-btn .wp-block-button__link,
a.sfsp-software__card-trial-btn {
	height: auto;
	min-height: 48px;
}

/* ── Issue 3: "Print Like You Have a Big Press" section spacing on Sep Studio NXT page ── */
/* Add breathing room between sticky tab nav and first feature section */
.page-id-46915 .sfsp-feature-section:first-of-type {
	padding-top: 80px;
}

/* ==========================================================================
   TASK 86ewypn5w — Hero equal spacing fix (mobile)
   Equal visual space above/below hero text on mobile:
   padding-top: 64px matches adjacent .sfsp-software__cards { padding-top: 64px }
   padding-bottom: 0 removes the default 30px that was stacking with cards gap.
   ========================================================================== */
@media (max-width: 689px) {
	.sfsp-software__hero {
		padding-top: 64px !important;
		padding-bottom: 0 !important;
	}
}

/* =============================================================================
   TASK 86ewypn95 — Issue 3: "Print Like You Have a Big Press" dark bg section
   Overrides the earlier first-of-type rule — ID selector wins cascade.
   ============================================================================= */
.page-id-46915 #Print_Like_You_Have_A_Big_Press {
	background: #2D2D2D;
	padding: 80px 60px;
}
.page-id-46915 #Print_Like_You_Have_A_Big_Press > .sfsp-feature-section__title {
	font-size: 48px;
	color: #ffffff;
}
.page-id-46915 #Print_Like_You_Have_A_Big_Press > .sfsp-feature-section__subtitle {
	color: #ffffff;
}
@media (max-width: 767px) {
	.page-id-46915 #Print_Like_You_Have_A_Big_Press {
		padding: 60px 24px;
	}
	.page-id-46915 #Print_Like_You_Have_A_Big_Press > .sfsp-feature-section__title {
		font-size: 36px;
	}
}

/* =============================================================================
   TASK 86ewypn95 — Revert: remove dark bg + white text added in error.
   Padding (80px/60px) from the earlier rule is intentional and stays.
   ============================================================================= */
.page-id-46915 #Print_Like_You_Have_A_Big_Press {
	background: unset;
}
.page-id-46915 #Print_Like_You_Have_A_Big_Press > .sfsp-feature-section__title {
	font-size: unset;
	color: unset;
}
.page-id-46915 #Print_Like_You_Have_A_Big_Press > .sfsp-feature-section__subtitle {
	color: unset;
}
@media (max-width: 767px) {
	.page-id-46915 #Print_Like_You_Have_A_Big_Press > .sfsp-feature-section__title {
		font-size: unset;
	}
}

/* =============================================================================
   TASK 86ewypn95 — Issue 2b: Bundle card "Add to cart" buttons → 48px min-height
   to match hero banner button (.sfsp-hero__add-to-cart = 48px).
   Selector targets the <a> WC add-to-cart button directly.
   ============================================================================= */
.sfsp-bundles__add-to-cart {
	min-height: 48px;
	height: auto;
}

/* =============================================================================
   TASK 86ewypn95 — Fix: restore heading font-size after font-size:unset override.
   Round 2 revert accidentally cleared font-size; restore 48px desktop / 36px mobile.
   ============================================================================= */
.page-id-46915 #Print_Like_You_Have_A_Big_Press > .sfsp-feature-section__title {
	font-size: 48px;
}
@media (max-width: 767px) {
	.page-id-46915 #Print_Like_You_Have_A_Big_Press > .sfsp-feature-section__title {
		font-size: 36px;
	}
}

/* =============================================================================
   TASK 86ewypn95 — Issue 2d: Bundle "Add to cart" button width to match hero.
   Hero button: min-width 156px (desktop) / shrinks on mobile.
   Base rule sets width: 100% — override to auto-size like hero button.
   Desktop/tablet (≥768px): width auto + min-width 156px = matches hero exactly.
   Mobile (<768px): full-width card button for better tap target.
   ============================================================================= */
.page-id-46915 .sfsp-bundles__add-to-cart {
	width: auto;
	min-width: 156px;
}
@media (max-width: 767px) {
	.page-id-46915 .sfsp-bundles__add-to-cart {
		width: 100%;
		min-width: 0;
	}
}

/* =============================================================================
   TASK 86ewypn82 — Bundle card "Add to cart" gradient blend to match hero button.
   Hero uses: linear-gradient(134deg, rgba(151,71,255,0) 2%, rgba(151,71,255,1) 100%)
   layered over #1246D5. Bundle buttons had solid blue only — no gradient.
   ============================================================================= */
.sfsp-bundles__add-to-cart {
	background: linear-gradient(134deg, rgba(151, 71, 255, 0) 2%, rgba(151, 71, 255, 1) 100%), #1246D5 !important;
	transition: opacity 0.2s ease;
}
.sfsp-bundles__add-to-cart:hover {
	opacity: 0.9;
}

/* S-center: Sep Studio NXT bundle card — center Add to Cart button */
.sfsp-product-page--sepstudio .sfsp-bundles__card-actions {
	display: flex;
	justify-content: center;
}

/* Purchase-popup — remove dark gray background from Purchase header */
.add-to-cart-popup .description {
	background: transparent !important;
	position: static !important;
	padding: 0 0 16px 0 !important;
	color: rgba(29, 29, 31, 0.9) !important;
}

/* =============================================================================
   Round 5 — popup "Add to cart" button matches card/hero button (156×48px)
   Targets: #nxtemeraldsubwithinkoption, #emeraldsubwithinkoption popup buttons
   ============================================================================= */
.popup-button .single_add_to_cart_button {
	min-height: 48px;
	min-width: 156px;
	width: auto;
	height: auto;
}

@media (max-width: 600px) {
	.popup-button .single_add_to_cart_button {
		width: 100%;
		min-width: 0;
	}
}

/* Purchase-popup — fix spacing: override margin-bottom + popup-form padding-top */
.add-to-cart-popup .description {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.add-to-cart-popup .popup-form {
	padding-top: 16px !important;
}

/* =============================================================================
   TASK 86ewypn95 — Round 6a: Center "Add to cart" button in bundle cards.
   flex-direction is column so align-items (cross-axis) = horizontal centering.
   Overrides prior rule which used .sfsp-product-page--sepstudio (not on page).
   ============================================================================= */
.page-id-46915 .sfsp-bundles__card-actions {
	align-items: center;
}

/* =============================================================================
   TASK 86ewypn95 — Round 6b: Popup "Add to cart" font-size matches card button.
   Card button (.sfsp-bundles__add-to-cart) computed font-size: 16px.
   Popup button was inheriting 10px — force to match.
   ============================================================================= */
.popup-button .single_add_to_cart_button {
	font-size: 16px;
}

/* Round 6b override — force font-size despite higher-specificity WC/theme rule */
.add-to-cart-popup .popup-button .single_add_to_cart_button {
	font-size: 16px !important;
}

/* =============================================================================
   TASK 86ewypn95 — Round 7: Popup "Add to cart" hover matches card hover.
   Card hover: opacity:0.9 (bg stays, white text stays, slight fade).
   Popup hover: opacity:0.9 (black bg stays, white text stays, slight fade).
   Overrides R5 rules (lines 4931–4947) that incorrectly set bg to #0d38b0.
   Also overrides Perfmatters snippet which flipped bg to #fff / color to #000.
   ============================================================================= */
.ct-panel .single_add_to_cart_button.button:hover,
.pum-content .single_add_to_cart_button.button:hover,
.add-to-cart-popup .single_add_to_cart_button.button:hover,
.popup-button button.single_add_to_cart_button:hover {
	background: #000 !important;
	background-color: #000 !important;
	color: #fff !important;
	opacity: 0.9 !important;
}

/* =============================================================================
   TASK 86ewypn95 — "Separation Studio NXT Includes:" h3 spacing.
   Add top spacing to visually separate from preceding paragraph.
   Uses margin-block-start to beat the .wp-block-group > * reset rule (line 1227).
   Specificity (0,4,1) > (0,3,0) of the reset rule.
   ============================================================================= */
.page-id-46915 .wp-block-group .wp-block-group > h3.sfsp-feature-section__heading {
	margin-block-start: 40px !important;
}