/**
 * Certifyi visual system v3 (2026-10-26): Stripe-inspired editorial precision.
 *
 * Loaded after certifyi-ui.css on every front-end page (certifyi-system.php).
 * Builds on v2's flat editorial direction, adding:
 *   - Oversized light-weight display typography
 *   - Systematic spacing rhythm (8px base, 64-96px sections)
 *   - Multi-layered navy-tinted shadows (Stripe pattern)
 *   - Subtle hover micro-interactions (2px lift, shadow deepen)
 *   - Staggered scroll reveal timing
 *   - Refined section alternation (white / paper)
 *
 *   Surfaces   paper #F8FAFC, white #FFFFFF, hairlines #E2E8F0. No tinted fills.
 *   Ink        #1E293B headings, #475569 body, #64748B labels.
 *   Navy       #123C20 for marks, rules and large type only; #123C20 for links and buttons.
 *   Dark       flat #1E293B. No glows, no gradients.
 *
 * Every selector starts with :root so it outranks certifyi-ui.css rules.
 * Delete this file and certifyi-system.php to roll back.
 */
:root {
	--cfy-green-light: #F1F5F9;
	--cfy-glow: transparent;
}

/* ================================================================
   TYPOGRAPHY — Oversized editorial, lighter weights
   ================================================================ */

/* Hero headline: the h1 only, at the same size as the templated pages' heroes. Matching every
   heading widget in the hero also blew the eyebrow (a <p> heading widget) up to display size. */
:root .e-con.e-parent.cfy-hero h1.elementor-heading-title,
:root .cfy-page > section.hero h1 {
	font-size: var(--cfy-t-h1, clamp(2.25rem, 1.5rem + 3vw, 3.25rem)) !important;
	font-weight: 500 !important;
	letter-spacing: -.03em !important;
	line-height: 1.05 !important;
	text-wrap: balance !important;
}

/* Section headings: clean and authoritative */
:root .cfy-section-head .elementor-heading-title,
:root main .e-con.e-parent:not(.cfy-band) h2.elementor-heading-title {
	font-size: var(--cfy-t-h2, clamp(1.75rem, 1.25rem + 2vw, 2.5rem)) !important;
	font-weight: 500 !important;
	letter-spacing: -.02em !important;
	line-height: 1.12 !important;
	color: #1E293B !important;
}

/* Subsection heads */
:root main .e-con.e-parent:not(.cfy-band) h3.elementor-heading-title {
	font-size: var(--cfy-t-h3, clamp(1.125rem, 1rem + .5vw, 1.375rem)) !important;
	font-weight: 600 !important;
	letter-spacing: -.01em !important;
	line-height: 1.25 !important;
}

/* Body text: generous line height */
:root .e-con.e-parent:not(.cfy-hero):not(.cfy-band) .elementor-widget-text-editor {
	color: #475569 !important;
	line-height: 1.65 !important;
	font-size: var(--cfy-t-body, 1rem) !important;
}

/* Lead / hero description */
:root .e-con.e-parent.cfy-hero .elementor-widget-text-editor {
	color: #475569 !important;
	line-height: 1.55 !important;
	font-size: var(--cfy-t-lead, clamp(1.0625rem, 1rem + .25vw, 1.1875rem)) !important;
}

/* Eyebrow tags */
:root .cfy-eyebrow .elementor-heading-title,
:root .cfy-tag .elementor-heading-title,
:root .e-con.e-parent.cfy-hero .cfy-eyebrow .elementor-heading-title {
	line-height: 1.4 !important;
	font-size: var(--cfy-t-micro, .75rem) !important;
	font-weight: 600 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: #123C20 !important;
}

/* cfy-page typography */
:root .cfy-page h2 {
	font-size: var(--cfy-t-h2, clamp(1.75rem, 1.25rem + 2vw, 2.5rem)) !important;
	font-weight: 500 !important;
	letter-spacing: -.02em !important;
	line-height: 1.15 !important;
}
:root .cfy-page h3 {
	font-weight: 600 !important;
	letter-spacing: -.01em !important;
	line-height: 1.25 !important;
}
:root .cfy-page > section:not(.hero):not(.cta-end):not(.band):not(.s-green):not(.stats-band):not(.msg-band) p {
	color: #475569 !important;
	line-height: 1.65 !important;
}

/* ================================================================
   HEROES — Clean paper, no decorative grid
   ================================================================ */
:root body:not(.home) .e-con.e-parent.cfy-hero,
:root body:not(.home) main .e-parent.cfy-hero:first-child,
:root .cfy-page section.hero.s-white,
:root .cfy-page > section.hero:first-of-type:not(.s-green) {
	background: #F8FAFC !important;
	background-image: none !important;
}
/* Buttons on these light heroes: solid green primary, white secondary. Pinned here, text span included,
   so a dark-hero rule (white text, translucent fill) can never leave them unreadable on the light ground. */
:root body:not(.home) .e-con.e-parent.cfy-hero .cfy-btn-primary .elementor-button {
	background: #123C20 !important;
	color: #fff !important;
	border: 1px solid #123C20 !important;
	opacity: 1 !important;
}
:root body:not(.home) .e-con.e-parent.cfy-hero .cfy-btn-primary .elementor-button:hover {
	background: #1A5230 !important;
	border-color: #1A5230 !important;
}
:root body:not(.home) .e-con.e-parent.cfy-hero .cfy-btn-ghost .elementor-button {
	background: #fff !important;
	color: #1E293B !important;
	border: 1px solid #CBD5E1 !important;
	opacity: 1 !important;
}
:root body:not(.home) .e-con.e-parent.cfy-hero .cfy-btn-ghost .elementor-button:hover {
	color: #123C20 !important;
	border-color: #123C20 !important;
}
:root body:not(.home) .e-con.e-parent.cfy-hero .elementor-button .elementor-button-text { color: inherit !important; }

/* ================================================================
   DARK BANDS — Flat ink
   ================================================================ */
:root .cfy-page .cta-end,
:root .cfy-page .band,
:root .cfy-page .s-green,
:root .cfy-page .stats-band,
:root .cfy-page .value-band,
:root .cfy-page .msg-band,
:root .cfy-page .cbp-cta,
:root .e-con.cfy-band,
:root main .e-parent.cfy-band,
:root .cfy-page .cbp-hero,
:root .cfy-page article > .wrap:first-child:has(> h1),
:root .home .e-con.e-parent.e-con-boxed.e-flex.cfy-credentials-auto {
	background: #123C20 !important;
	background-image: none !important;
}
:root .e-con.cfy-band .elementor-heading-title { color: #fff !important; }
:root .e-con.cfy-band .elementor-widget-text-editor { color: rgba(255,255,255,.75) !important; }

/* ================================================================
   CARDS — White, hairline, SUBTLE hover lift
   ================================================================ */
:root main .e-con.cfy-card,
:root .e-con.cfy-card,
:root a.e-con.cfy-card-link,
:root article.hfe-post-card,
:root .cfy-page .cbp-key {
	background: #FFFFFF !important;
	background-image: none !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: var(--cfy-radius-md, 8px) !important;
	box-shadow: var(--cfy-shadow-sm, 0 1px 3px rgba(18,60,32,0.06), 0 1px 2px rgba(0,0,0,0.04)) !important;
	backdrop-filter: none !important;
	transition: transform var(--cfy-duration-normal, 200ms) var(--cfy-ease, cubic-bezier(.2,.7,.2,1)),
	            box-shadow var(--cfy-duration-normal, 200ms) var(--cfy-ease, cubic-bezier(.2,.7,.2,1)),
	            border-color var(--cfy-duration-normal, 200ms) var(--cfy-ease, cubic-bezier(.2,.7,.2,1)) !important;
}
/* Raw-HTML card types */
:root main :is(.cfy-page .card, .cfy-page .pain-card, .cfy-page .sol-card, .cfy-page .value-card, .cfy-page .feat,
               .cfy-page .outcome, .cfy-page .compare-card, .cfy-page .tier, .cfy-page .chx-card,
               .cfy-page .member-card, .cfy-page .how-step, .cfy-bx) {
	background: #FFFFFF !important;
	background-image: none !important;
	border-color: #E2E8F0 !important;
	box-shadow: var(--cfy-shadow-sm) !important;
	border-radius: var(--cfy-radius-md, 8px) !important;
	transition: transform var(--cfy-duration-normal) var(--cfy-ease),
	            box-shadow var(--cfy-duration-normal) var(--cfy-ease),
	            border-color var(--cfy-duration-normal) var(--cfy-ease) !important;
}
/* Cards on dark bands */
:root main .cfy-page :is(.band, .cta-end, .s-green, .stats-band, .value-band, .msg-band)
     :is(.card, .pain-card, .sol-card, .value-card, .feat, .outcome, .tier, .how-step) {
	background: transparent !important;
	border-color: rgba(255, 255, 255, .18) !important;
	box-shadow: none !important;
}
/* Feature block cards */
:root main .e-parent.cfy-feat-block:nth-of-type(n) .e-con.cfy-card {
	background: #FFFFFF !important;
	border-color: #E2E8F0 !important;
}
:root main .e-parent.cfy-feat-block:nth-of-type(n) .e-con.cfy-card.cfy-proof {
	background: transparent !important;
	border-color: transparent transparent transparent #1E293B !important;
}

/* Subtle hover: 2px lift + shadow deepen */
:root .e-con.cfy-card:hover,
:root article.hfe-post-card:hover {
	transform: translateY(-2px) !important;
	box-shadow: var(--cfy-shadow-hover, 0 8px 24px rgba(18,60,32,0.12), 0 2px 6px rgba(0,0,0,0.05)) !important;
	border-color: #CBD5E1 !important;
}
:root a.e-con.cfy-card-link:hover {
	transform: translateY(-2px) !important;
	box-shadow: var(--cfy-shadow-hover) !important;
	border-color: #1E293B !important;
}
/* cfy-page card hover */
:root .cfy-page .card:hover,
:root .cfy-page .feat:hover,
:root .cfy-page .how-step:hover,
:root .cfy-page .value-card:hover,
:root .cfy-page .outcome:hover {
	transform: translateY(-2px) !important;
	box-shadow: var(--cfy-shadow-hover) !important;
	border-color: #CBD5E1 !important;
}
/* Featured card */
:root main .e-con.cfy-card.cfy-featured,
:root .e-con.cfy-card.cfy-featured {
	border-color: #1E293B !important;
	box-shadow: inset 0 3px 0 #123C20, var(--cfy-shadow-sm) !important;
}
/* Cards on dark bands stay transparent */
:root .e-con.cfy-band .e-con.cfy-card,
:root main .e-parent.cfy-band .e-con.cfy-card {
	background: transparent !important;
	border-color: rgba(255, 255, 255, .18) !important;
	box-shadow: none !important;
}
:root .e-con.cfy-band .e-con.cfy-card:hover {
	transform: translateY(-2px) !important;
	border-color: rgba(255, 255, 255, .32) !important;
}

/* Proof point: pull-quote */
:root main .e-con.cfy-card.cfy-proof,
:root .e-con.cfy-card.cfy-proof {
	background: transparent !important;
	border: 0 !important;
	border-top: 1px solid #1E293B !important;
	border-radius: 0 !important;
	padding: 20px 0 0 !important;
	box-shadow: none !important;
}
:root .e-con.cfy-card.cfy-proof:hover {
	transform: none !important;
	box-shadow: none !important;
}
:root .cfy-proof .cfy-proof-text,
:root .cfy-proof .cfy-proof-text p,
:root .cfy-proof .cfy-proof-text .elementor-widget-container {
	font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem) !important;
	line-height: 1.5 !important;
	color: #1E293B !important;
}

/* ================================================================
   LABELS — Plain small caps, no pill
   ================================================================ */
:root .elementor-widget.cfy-tag .elementor-heading-title,
:root .cfy-tag > p,
:root p.cfy-tag {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: #64748B !important;
}

/* Eyebrows: no square bullet */
:root .cfy-page .label::before,
:root .cfy-page .eyebrow::before,
:root .cfy-page .kicker::before,
:root .cfy-eyebrow .elementor-heading-title::before,
:root .cfy-eyebrow h6::before {
	content: none !important;
	display: none !important;
}

/* ================================================================
   LISTS — Short dash instead of green tick
   ================================================================ */
:root .elementor-widget.cfy-check-list .elementor-icon-list-icon svg,
:root .elementor-widget.cfy-check-list .elementor-icon-list-icon i { display: none !important; }
:root .elementor-widget.cfy-check-list .elementor-icon-list-icon { width: 14px !important; height: auto !important; align-self: flex-start !important; padding-top: .8em !important; }
:root .elementor-widget.cfy-check-list .elementor-icon-list-icon::before {
	content: ""; display: block; width: 10px; height: 1px; background: #64748B;
}
:root ul.cfy-check-list li::before {
	background: #64748B !important;
	width: 10px !important; height: 1px !important; top: .8em !important;
	border-radius: 0 !important; border: 0 !important;
}

/* ================================================================
   TABLES — Light header row
   ================================================================ */
:root .cfy-page table th,
:root .cfy-table th,
:root .cfy-page thead td {
	background: #F1F5F9 !important;
	color: #1E293B !important;
	border-bottom: 1px solid #E2E8F0 !important;
}
:root main .e-parent.cfy-band .cfy-table th { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }

/* ================================================================
   SPACING — Systematic rhythm
   ================================================================ */
:root main .e-con.e-parent:not(.cfy-hero):not(.cfy-band) {
	--padding-top: var(--cfy-sp-section, clamp(4rem, 3rem + 3vw, 6rem)) !important;
	--padding-bottom: var(--cfy-sp-section, clamp(4rem, 3rem + 3vw, 6rem)) !important;
}
:root .e-con.e-parent.cfy-hero {
	--padding-top: clamp(3rem, 2rem + 3vw, 5rem) !important;
	--padding-bottom: clamp(3rem, 2rem + 3vw, 4rem) !important;
}

/* ================================================================
   SECTION ALTERNATION — White / paper rhythm
   ================================================================ */
:root main .e-con.e-parent:not(.cfy-band):not(.cfy-hero):nth-of-type(even) {
	background-color: #F8FAFC !important;
}
:root main .e-con.e-parent:not(.cfy-band):not(.cfy-hero):nth-of-type(odd) {
	background-color: #FFFFFF !important;
}

/* ================================================================
   STAGGERED REVEAL — Timing for scroll-triggered elements
   ================================================================ */
:root .cfy-rise { --cfy-stagger: 0; }
:root .cfy-rise:nth-child(1) { --cfy-stagger: 0ms; }
:root .cfy-rise:nth-child(2) { --cfy-stagger: 60ms; }
:root .cfy-rise:nth-child(3) { --cfy-stagger: 120ms; }
:root .cfy-rise:nth-child(4) { --cfy-stagger: 180ms; }
:root .cfy-rise:nth-child(5) { --cfy-stagger: 240ms; }
:root .cfy-rise:nth-child(6) { --cfy-stagger: 300ms; }

/* ================================================================
   LINK UNDERLINE REVEAL — Stripe-style
   ================================================================ */
:root .cfy-page a:not(.btn):not(.skip),
:root main .elementor-widget a:not(.elementor-button):not(.cfy-btn) {
	text-decoration: none !important;
	background-image: linear-gradient(currentColor, currentColor) !important;
	background-size: 0% 1px !important;
	background-position: left bottom !important;
	background-repeat: no-repeat !important;
	transition: background-size var(--cfy-duration-normal, 200ms) var(--cfy-ease, cubic-bezier(.2,.7,.2,1)) !important;
}
:root .cfy-page a:not(.btn):not(.skip):hover,
:root main .elementor-widget a:not(.elementor-button):not(.cfy-btn):hover {
	background-size: 100% 1px !important;
}

/* ================================================================
   BUTTONS — Refined radius and shadow
   ================================================================ */
:root .e-con .elementor-button,
:root .cfy-page a.btn,
:root .cfy-page .btn {
	border-radius: var(--cfy-radius-sm, 6px) !important;
	font-weight: 600 !important;
	letter-spacing: -.01em !important;
	box-shadow: var(--cfy-shadow-sm) !important;
	transition: all var(--cfy-duration-fast, 150ms) var(--cfy-ease) !important;
}
:root .e-con .elementor-button:hover,
:root .cfy-page .btn:hover {
	box-shadow: var(--cfy-shadow-md) !important;
}

/* ================================================================
   REDUCED MOTION — Disable transitions and stagger
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
	:root .e-con.cfy-card,
	:root .cfy-page .card,
	:root .cfy-page .feat,
	:root .cfy-page .how-step,
	:root .cfy-page .value-card,
	:root .cfy-page .outcome,
	:root article.hfe-post-card,
	:root a.e-con.cfy-card-link,
	:root .cfy-page a,
	:root main .elementor-widget a,
	:root .e-con .elementor-button,
	:root .cfy-page .btn {
		transition: none !important;
	}
	:root .e-con.cfy-card:hover,
	:root .cfy-page .card:hover,
	:root .cfy-page .feat:hover,
	:root article.hfe-post-card:hover,
	:root a.e-con.cfy-card-link:hover {
		transform: none !important;
	}
	:root .cfy-rise {
		--cfy-stagger: 0ms !important;
	}
}