/* ==========================================================================
   PROCELL MICROCHANNELING (/procell-microchanneling/)
   Same tokens, type scale, buttons and motion language as the homepage.
   ========================================================================== */

/* --- Bands ---------------------------------------------------------------- */
.e-con.gfe-pc-cream {
	--padding-top: clamp(54px, 5vw, 86px);
	--padding-bottom: clamp(54px, 5vw, 86px);
	background-color: #EBE8DE;
	background-image:
		radial-gradient(52% 78% at 22% 20%, rgba(250, 248, 242, .85) 0%, rgba(250, 248, 242, 0) 70%),
		linear-gradient(180deg, #EFECE3 0%, #E9E6DC 52%, #E4E1D4 100%);
}
.e-con.gfe-pc-cream--deep {
	background-color: #E4E1D4;
	background-image:
		radial-gradient(56% 74% at 78% 14%, rgba(250, 248, 242, .7) 0%, rgba(250, 248, 242, 0) 70%),
		linear-gradient(180deg, #E5E2D5 0%, #E1DED0 55%, #DCD9CA 100%);
}
.e-con.gfe-pc-sage {
	--padding-top: clamp(54px, 5vw, 86px);
	--padding-bottom: clamp(54px, 5vw, 86px);
	background-color: #62674F;
	background-image:
		radial-gradient(50% 80% at 26% 12%, rgba(132, 137, 109, .28) 0%, rgba(132, 137, 109, 0) 68%),
		linear-gradient(180deg, #63684F 0%, #5F644C 55%, #595E47 100%);
	border-top: 1px solid rgba(255, 255, 255, .06);
}
.e-con.gfe-pc-sage--deep {
	background-color: #585D46;
	background-image:
		radial-gradient(60% 90% at 50% 0%, rgba(132, 137, 109, .26) 0%, rgba(132, 137, 109, 0) 70%),
		linear-gradient(180deg, #5B6049 0%, #545942 60%, #4F5440 100%);
}

/* --- Typography ----------------------------------------------------------- */
.gfe-sec .gfe-pc-h1 .elementor-heading-title {
	font-family: var(--gfe-serif);
	font-size: clamp(36px, 4.1vw, 58px);
	line-height: 1.07;
	color: var(--gfe-paper);
	text-wrap: pretty;
}
.gfe-sec .gfe-pc-h2 .elementor-heading-title {
	font-family: var(--gfe-serif);
	font-size: clamp(28px, 2.9vw, 42px);
	line-height: 1.13;
	color: var(--gfe-ink);
	text-wrap: pretty;
}
.gfe-sec .gfe-pc-h2--light .elementor-heading-title { color: var(--gfe-paper); }
.gfe-sec .gfe-pc-h3 .elementor-heading-title {
	font-family: var(--gfe-serif);
	font-size: clamp(19px, 1.5vw, 23px);
	line-height: 1.2;
	color: var(--gfe-ink);
}
.gfe-sec .gfe-pc-h3--light .elementor-heading-title { color: var(--gfe-paper); }
.gfe-sec .gfe-pc-eyebrow .elementor-heading-title {
	font-family: var(--gfe-sans);
	font-size: 11.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 500;
	color: #7A5F33;
}
.gfe-sec .gfe-pc-eyebrow--light .elementor-heading-title { color: var(--gfe-champagne); }
.gfe-sec .gfe-pc-lead.elementor-widget-text-editor {
	margin-top: 22px;
	font-size: 16.5px;
	line-height: 1.78;
	color: var(--gfe-paper);
	max-width: 34em;
}
.gfe-sec .gfe-pc-text.elementor-widget-text-editor {
	margin-top: 18px;
	font-size: 15.5px;
	line-height: 1.8;
	color: #565A4B;
	max-width: 36em;
}
.gfe-sec .gfe-pc-text--light.elementor-widget-text-editor { color: var(--gfe-paper); }
.gfe-sec .gfe-pc-note.elementor-widget-text-editor {
	margin-top: 22px;
	font-size: 13.5px;
	line-height: 1.7;
	color: #5E6252;
	max-width: 44em;
}
.gfe-sec .gfe-pc-note--light.elementor-widget-text-editor { color: rgba(244, 240, 235, .88); }

/* --- Hero ----------------------------------------------------------------- */
.e-con.gfe-pc-hero {
	--padding-top: calc(var(--gfe-header-h) + clamp(48px, 5vw, 88px));
	--padding-bottom: clamp(56px, 5vw, 92px);
	background-color: #62674F;
	background-image:
		radial-gradient(54% 70% at 24% 14%, rgba(133, 138, 110, .34) 0%, rgba(133, 138, 110, 0) 66%),
		linear-gradient(180deg, #666B52 0%, #61664E 55%, #5A5F48 100%);
}
.e-con.gfe-pc-hero > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
	gap: clamp(34px, 4.6vw, 78px);
	align-items: center;
}
.e-con.gfe-pc-hero__copy { --gap: 0px; padding: 0; max-width: 640px; }
.gfe-pc-hero .e-con.gfe-actions { margin-top: 32px; padding: 0; flex-wrap: wrap; gap: 14px; justify-content: flex-start; }

/* Certification plate: a designed position awaiting the authentic badge. */
.e-con.gfe-pc-cert {
	--gap: 0px;
	--padding-top: clamp(28px, 2.8vw, 40px);
	--padding-bottom: clamp(28px, 2.8vw, 40px);
	--padding-left: clamp(24px, 2.4vw, 34px);
	--padding-right: clamp(24px, 2.4vw, 34px);
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 340px;
	text-align: center;
	background-image: linear-gradient(180deg, rgba(244, 240, 235, .1) 0%, rgba(244, 240, 235, .05) 100%);
	border: 1px solid rgba(242, 231, 205, .38);
	border-radius: 4px;
	box-shadow: 0 26px 54px -38px rgba(30, 33, 24, .9);
}
.gfe-pc-cert__mark {
	display: block;
	width: 76px;
	height: 76px;
	margin: 0 auto 18px;
	color: var(--gfe-gold-lt);
}
.gfe-pc-cert__mark svg { display: block; width: 100%; height: 100%; }
.gfe-sec .gfe-pc-cert__label .elementor-heading-title {
	font-family: var(--gfe-sans);
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--gfe-champagne);
}
.gfe-sec .gfe-pc-cert__title .elementor-heading-title {
	margin-top: 10px;
	font-family: var(--gfe-serif);
	font-size: clamp(21px, 1.7vw, 25px);
	line-height: 1.2;
	color: var(--gfe-paper);
}
.gfe-sec .gfe-pc-cert__text.elementor-widget-text-editor {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--gfe-paper);
}

/* --- Split layout --------------------------------------------------------- */
.e-con.gfe-pc-split > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(34px, 4.4vw, 76px);
	align-items: center;
}
.e-con.gfe-pc-col { --gap: 0px; padding: 0; }
.e-con.gfe-pc-media { --gap: 0px; padding: 0; width: 100%; }
.gfe-pc-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
	object-fit: cover;
	box-shadow: 0 28px 56px -38px rgba(40, 44, 33, .8);
}
.gfe-pc-img--portrait img { aspect-ratio: 4 / 5; }
.gfe-pc-img--wide img { aspect-ratio: 3 / 2; }

/* --- Process flow (editorial, not an infographic) -------------------------- */
.e-con.gfe-pc-flow { --gap: 0px; padding: 0; margin-top: clamp(26px, 2.6vw, 36px); width: 100%; }
.gfe-pc-flow__list { list-style: none; margin: 0; padding: 0; }
.gfe-pc-flow__list li {
	position: relative;
	padding: 0 0 26px 34px;
	color: var(--gfe-ink);
}
.gfe-pc-flow__list li:last-child { padding-bottom: 0; }
.gfe-pc-flow__list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 7px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #8C6F3D;
}
.gfe-pc-flow__list li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 20px;
	bottom: 4px;
	width: 1px;
	background: linear-gradient(180deg, rgba(140, 111, 61, .55), rgba(140, 111, 61, .12));
}
.gfe-pc-flow__list b {
	display: block;
	font-family: var(--gfe-sans);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #7A5F33;
}
.gfe-pc-flow__list span {
	display: block;
	margin-top: 7px;
	font-size: 15px;
	line-height: 1.65;
	color: #565A4B;
}

/* --- Concern cards -------------------------------------------------------- */
.e-con.gfe-pc-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
	width: 100%;
	margin-top: clamp(26px, 2.6vw, 38px);
	padding: 0;
}
.e-con.gfe-pc-card {
	--gap: 0px;
	--padding-top: 24px; --padding-bottom: 26px;
	--padding-left: 22px; --padding-right: 22px;
	display: flex;
	flex-direction: column;
	background: rgba(252, 251, 247, .78);
	border: 1px solid rgba(59, 63, 49, .12);
	border-radius: 4px;
	box-shadow: 0 14px 30px -24px rgba(64, 68, 50, .55);
	transition: transform .55s var(--gfe-ease-out), box-shadow .55s var(--gfe-ease-out), border-color .5s;
}
.e-con.gfe-pc-card:hover { transform: translateY(-4px); border-color: rgba(140, 111, 61, .4); box-shadow: 0 26px 44px -28px rgba(64, 68, 50, .6); }
.gfe-pc-card__rule { display: block; width: 26px; height: 1px; background: #8C6F3D; margin-bottom: 16px; }
.gfe-sec .gfe-pc-card__title .elementor-heading-title { font-family: var(--gfe-serif); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.22; color: var(--gfe-ink); }
.gfe-sec .gfe-pc-card__text.elementor-widget-text-editor { margin-top: 10px; font-size: 13.5px; line-height: 1.62; color: #565A4B; }

/* --- Pillars (The ProCell System) ---------------------------------------- */
.e-con.gfe-pc-pillars {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 26px);
	width: 100%;
	margin-top: clamp(28px, 2.8vw, 40px);
	padding: 0;
}
.e-con.gfe-pc-pillar {
	--gap: 0px;
	--padding-top: 26px; --padding-bottom: 26px;
	--padding-left: 0px; --padding-right: clamp(10px, 1.2vw, 18px);
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(242, 231, 205, .3);
}
.gfe-sec .gfe-pc-pillar__num .elementor-heading-title {
	font-family: var(--gfe-serif);
	font-size: 28px;
	line-height: 1;
	color: var(--gfe-gold-lt);
}
.gfe-sec .gfe-pc-pillar__title .elementor-heading-title {
	margin-top: 14px;
	font-family: var(--gfe-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gfe-champagne);
}
.gfe-sec .gfe-pc-pillar__text.elementor-widget-text-editor {
	margin-top: 12px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--gfe-paper);
}

/* --- Product / stage trio ------------------------------------------------- */
.e-con.gfe-pc-trio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 30px);
	width: 100%;
	margin-top: clamp(28px, 2.8vw, 40px);
	padding: 0;
}
.e-con.gfe-pc-stage { --gap: 0px; padding: 0; display: flex; flex-direction: column; }
.gfe-pc-stage__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: 0 22px 44px -32px rgba(40, 44, 33, .8);
}
.gfe-sec .gfe-pc-stage__label .elementor-heading-title {
	margin-top: 20px;
	font-family: var(--gfe-sans);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #7A5F33;
}
.gfe-sec .gfe-pc-stage__title .elementor-heading-title {
	margin-top: 10px;
	font-family: var(--gfe-serif);
	font-size: clamp(19px, 1.5vw, 23px);
	line-height: 1.2;
	color: var(--gfe-ink);
}
.gfe-sec .gfe-pc-stage__text.elementor-widget-text-editor {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.65;
	color: #565A4B;
}

/* --- Experience steps ----------------------------------------------------- */
.e-con.gfe-pc-steps { --gap: 0px; padding: 0; width: 100%; margin-top: clamp(26px, 2.6vw, 38px); }
.e-con.gfe-pc-step {
	--gap: 0px;
	--padding-top: 22px; --padding-bottom: 22px;
	--padding-left: 0px; --padding-right: 0px;
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	align-items: start;
	border-top: 1px solid rgba(242, 231, 205, .26);
}
.gfe-sec .gfe-pc-step__num .elementor-heading-title {
	font-family: var(--gfe-serif);
	font-size: clamp(26px, 2.2vw, 32px);
	line-height: 1;
	color: var(--gfe-gold-lt);
}
.e-con.gfe-pc-step__body { --gap: 0px; padding: 0; }
.gfe-sec .gfe-pc-step__title .elementor-heading-title {
	font-family: var(--gfe-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gfe-champagne);
}
.gfe-sec .gfe-pc-step__text.elementor-widget-text-editor {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.72;
	color: var(--gfe-paper);
	max-width: 46em;
}

/* --- Katherinne trust band ------------------------------------------------ */
.e-con.gfe-pc-kath > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(34px, 4.4vw, 72px);
	align-items: center;
}
.e-con.gfe-pc-kath__media {
	--gap: 0px;
	padding: 0;
	position: relative;
	width: 100%;
	max-width: 420px;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 30px 60px -40px rgba(40, 44, 33, .85);
}
.gfe-pc-kath__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 46% 34%;
}
.gfe-pc-kath__cred {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.gfe-pc-kath__cred li {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.6;
	color: #565A4B;
}
.gfe-pc-kath__cred li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 11px;
	height: 7px;
	border-left: 1.5px solid #8C6F3D;
	border-bottom: 1.5px solid #8C6F3D;
	transform: rotate(-45deg);
}
.gfe-pc-kath .e-con.gfe-actions { margin-top: 30px; padding: 0; justify-content: flex-start; }

/* --- FAQ ------------------------------------------------------------------ */
.gfe-pc-faq { margin-top: clamp(26px, 2.6vw, 38px); width: 100%; }
.gfe-pc-faq details {
	border-top: 1px solid rgba(59, 63, 49, .16);
	padding: 0;
}
.gfe-pc-faq details:last-of-type { border-bottom: 1px solid rgba(59, 63, 49, .16); }
.gfe-pc-faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 2px;
	cursor: pointer;
	list-style: none;
	font-family: var(--gfe-serif);
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.35;
	color: var(--gfe-ink);
	transition: color .35s var(--gfe-ease);
}
.gfe-pc-faq summary::-webkit-details-marker { display: none; }
.gfe-pc-faq summary:hover { color: #7A5F33; }
.gfe-pc-faq summary:focus-visible { outline: 2px solid #3B3F31; outline-offset: 3px; }
.gfe-pc-faq summary::after {
	content: "";
	flex: none;
	width: 13px;
	height: 13px;
	margin-top: 6px;
	background: #8C6F3D;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v14H7z'/%3E%3Cpath d='M1 7h14v2H1z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v14H7z'/%3E%3Cpath d='M1 7h14v2H1z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .4s var(--gfe-ease);
}
.gfe-pc-faq details[open] summary::after { transform: rotate(45deg); }
.gfe-pc-faq .gfe-pc-faq__a {
	margin: 0;
	padding: 0 40px 22px 2px;
	font-size: 15px;
	line-height: 1.75;
	color: #565A4B;
	max-width: 52em;
}
.gfe-pc-faq .gfe-pc-faq__a a { color: #7A5F33; text-decoration: underline; text-underline-offset: 3px; }
.gfe-pc-faq .gfe-pc-faq__a a:hover { color: #3B3F31; }

/* --- Final CTA ------------------------------------------------------------ */
.e-con.gfe-pc-cta > .e-con-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gfe-pc-cta .gfe-pc-text { text-align: center; margin-left: auto; margin-right: auto; }
.gfe-pc-cta .e-con.gfe-actions { margin-top: 32px; padding: 0; justify-content: center; flex-wrap: wrap; gap: 14px; }
.gfe-pc-nap {
	font-style: normal;
	margin-top: clamp(28px, 2.8vw, 40px);
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--gfe-paper);
	text-align: center;
}
.gfe-pc-nap strong { display: block; font-weight: 500; letter-spacing: .02em; }
.gfe-pc-nap a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(244, 240, 235, .3); }
.gfe-pc-nap a:hover { border-bottom-color: var(--gfe-gold-lt); }

/* --- Anchor offset for the in-page jump ----------------------------------- */
#how-it-works { scroll-margin-top: calc(var(--gfe-header-h) - 8px); }

/* --- Motion (matches the homepage reveal language) ------------------------ */
.gfe-js .gfe-pc-cards > .e-con,
.gfe-js .gfe-pc-trio > .e-con,
.gfe-js .gfe-pc-pillars > .e-con {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition: opacity .9s var(--gfe-ease-out), transform 1s var(--gfe-ease-out), box-shadow .55s, border-color .5s;
}
.gfe-js .gfe-sec.is-in .gfe-pc-cards > .e-con,
.gfe-js .gfe-sec.is-in .gfe-pc-trio > .e-con,
.gfe-js .gfe-sec.is-in .gfe-pc-pillars > .e-con { opacity: 1; transform: none; }
.gfe-js .gfe-pc-cards > .e-con:nth-child(2), .gfe-js .gfe-pc-trio > .e-con:nth-child(2), .gfe-js .gfe-pc-pillars > .e-con:nth-child(2) { transition-delay: .09s; }
.gfe-js .gfe-pc-cards > .e-con:nth-child(3), .gfe-js .gfe-pc-trio > .e-con:nth-child(3), .gfe-js .gfe-pc-pillars > .e-con:nth-child(3) { transition-delay: .18s; }
.gfe-js .gfe-pc-cards > .e-con:nth-child(4), .gfe-js .gfe-pc-pillars > .e-con:nth-child(4) { transition-delay: .27s; }
.gfe-js .gfe-sec.is-in .gfe-pc-cards > .e-con:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
	.gfe-js .gfe-pc-cards > .e-con,
	.gfe-js .gfe-pc-trio > .e-con,
	.gfe-js .gfe-pc-pillars > .e-con { opacity: 1; transform: none; transition: none; }
	.gfe-pc-faq summary::after { transition: none; }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
	.e-con.gfe-pc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.e-con.gfe-pc-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.e-con.gfe-pc-hero > .e-con-inner,
	.e-con.gfe-pc-split > .e-con-inner,
	.e-con.gfe-pc-kath > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 38px; }
	.e-con.gfe-pc-cert { justify-self: start; max-width: 320px; }
	.e-con.gfe-pc-kath__media { max-width: 340px; }
	.e-con.gfe-pc-media { max-width: 520px; }
	.e-con.gfe-pc-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 600px) {
	.e-con.gfe-pc-cards,
	.e-con.gfe-pc-pillars,
	.e-con.gfe-pc-trio { grid-template-columns: minmax(0, 1fr); }
	.e-con.gfe-pc-step { grid-template-columns: minmax(0, 1fr); }
	.gfe-sec .gfe-pc-step__num .elementor-heading-title { margin-bottom: 8px; }
	.e-con.gfe-pc-cert { max-width: none; }
	.e-con.gfe-pc-kath__media { max-width: none; }
	.gfe-pc-hero .e-con.gfe-actions > .elementor-widget,
	.gfe-pc-cta .e-con.gfe-actions > .elementor-widget { width: 100%; }
	.gfe-pc-hero .e-con.gfe-actions .elementor-button,
	.gfe-pc-cta .e-con.gfe-actions .elementor-button {
		width: 100%;
		white-space: normal;
		text-align: center;
		line-height: 1.4;
		padding: 14px 22px;
	}
	.gfe-pc-faq .gfe-pc-faq__a { padding-right: 6px; }
}

/* --- Hero subheadline ----------------------------------------------------- */
.gfe-sec .gfe-pc-lead .gfe-pc-sub {
	margin: 0 0 14px;
	font-family: var(--gfe-serif);
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.25;
	color: var(--gfe-champagne);
}

/* --- Inner split (used inside the sage system band) ----------------------- */
.e-con.gfe-pc-split-w {
	--gap: 0px;
	padding: 0;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
	gap: clamp(34px, 4.4vw, 72px);
	align-items: center;
}
@media (max-width: 900px) {
	.e-con.gfe-pc-split-w { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* --- Results: structure reserved, not rendered until authentic client
   photographs with written permission are supplied. ------------------------- */
.e-con.gfe-pc-results {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 26px);
	width: 100%;
	margin-top: clamp(26px, 2.6vw, 38px);
	padding: 0;
}
.e-con.gfe-pc-result { --gap: 0px; padding: 0; }
.gfe-pc-result__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gfe-pc-result__pair img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; }
.gfe-pc-result__cap { margin-top: 12px; font-size: 13px; line-height: 1.6; color: #565A4B; }
@media (max-width: 900px) { .e-con.gfe-pc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .e-con.gfe-pc-results { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   QA: WCAG AA corrections (measured against the rendered backgrounds).
   Same palette family; only luminance is adjusted.
   ========================================================================== */
.e-con.gfe-pc-hero {
	background-image:
		radial-gradient(54% 70% at 24% 14%, rgba(133, 138, 110, .2) 0%, rgba(133, 138, 110, 0) 66%),
		linear-gradient(180deg, #63684F 0%, #5E634B 55%, #585D46 100%);
}
.e-con.gfe-pc-cert {
	background-image: linear-gradient(180deg, rgba(244, 240, 235, .06) 0%, rgba(244, 240, 235, .03) 100%);
}

/* Small uppercase labels on sage: a brighter champagne clears 4.5:1 on every
   sage tone used on this page. */
.gfe-sec .gfe-pc-eyebrow--light .elementor-heading-title,
.gfe-sec .gfe-pc-cert__label .elementor-heading-title,
.gfe-sec .gfe-pc-pillar__title .elementor-heading-title,
.gfe-sec .gfe-pc-step__title .elementor-heading-title { color: #F9F2E2; }

/* Large serif numerals on sage need 3:1. */
.gfe-sec .gfe-pc-step__num .elementor-heading-title,
.gfe-sec .gfe-pc-pillar__num .elementor-heading-title { color: #E0C493; }

/* Bronze small text on the deeper cream band. */
.gfe-sec .gfe-pc-eyebrow:not(.gfe-pc-eyebrow--light) .elementor-heading-title,
.gfe-sec .gfe-pc-stage__label .elementor-heading-title { color: #6B5329; }
.gfe-pc-flow__list b { color: #6B5329; }
.gfe-pc-faq .gfe-pc-faq__a a { color: #6B5329; }
.gfe-pc-faq summary:hover { color: #6B5329; }

/* Body-size disclaimers on the deeper cream band. */
.gfe-sec .gfe-pc-note.elementor-widget-text-editor:not(.gfe-pc-note--light) { color: #565A4B; }

/* ==========================================================================
   Approved ProCell illustration -- "What Is ProCell Microchanneling?"
   Scoped to #how-it-works so no other section or page can be affected.

   The approved artwork is a 6:5 landscape study drawn on warm cream paper
   (edge tone ~#F5EFE3). The band behind it runs #EFECE3 -> #E4E1D4, i.e.
   slightly cooler and darker, so a hard rectangle edge would read as a pasted
   image. Integration is done with (a) a pool of the artwork's own paper tone
   behind it and (b) a soft feathered edge mask. The artwork itself is not
   cropped, recoloured, scaled non-uniformly or altered in any way; it is shown
   whole, at its natural aspect ratio.
   ========================================================================== */
#how-it-works .e-con.gfe-pc-media { position: relative; }

/* Paper-tone pool: the illustration sits in its own light, rather than on a
   visible edge. Insets stay under the page gutter at every width so no
   horizontal overflow can be introduced. */
#how-it-works .e-con.gfe-pc-media::before {
	content: "";
	position: absolute;
	inset: -11% -5% -12%;
	/* 50%/50% radii mean the gradient reaches full transparency exactly at the
	   element's own edges -- there is no clipped step anywhere. */
	background: radial-gradient(50% 50% at 50% 48%,
		rgba(250, 246, 236, .95) 0%,
		rgba(250, 246, 236, .84) 44%,
		rgba(250, 246, 236, .38) 74%,
		rgba(250, 246, 236, 0) 100%);
	pointer-events: none;
	z-index: 0;
}

#how-it-works .gfe-pc-art { position: relative; z-index: 1; }

#how-it-works .gfe-pc-art img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 6 / 5;   /* the artwork's true ratio -- reserves space, never crops */
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
	/* Asymmetric feather: gentler on the right, where the hair runs closest to
	   the sheet edge. The treatment device and its contact point on the face sit
	   well inside the frame and are never touched by the mask. */
	-webkit-mask-image:
		linear-gradient(to right, rgba(0,0,0,0) 0%, #000 14%, #000 93%, rgba(0,0,0,0) 100%),
		linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 9%, #000 89%, rgba(0,0,0,0) 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, rgba(0,0,0,0) 0%, #000 14%, #000 93%, rgba(0,0,0,0) 100%),
		linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 9%, #000 89%, rgba(0,0,0,0) 100%);
	mask-composite: intersect;
}


/* ---- THE PROCELL SYSTEM illustration -- section 3 has no #id, scoped by widget class ---- */
.gfe-pc-sysart img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 6 / 5;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
	/* light feather only: the artwork ground (#5C6149) sits ~3 levels from the
	   band (#5F644C), so a gentle edge fade dissolves the rectangle with no pool.
	   Pen + vials are central; only the faint outer splatter/leaf tips fade. */
	-webkit-mask-image:
		linear-gradient(to right, rgba(0,0,0,0) 0%, #000 5%, #000 95%, rgba(0,0,0,0) 100%),
		linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 5%, #000 95%, rgba(0,0,0,0) 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, rgba(0,0,0,0) 0%, #000 5%, #000 95%, rgba(0,0,0,0) 100%),
		linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 5%, #000 95%, rgba(0,0,0,0) 100%);
	mask-composite: intersect;
}
