/* Strivo design tokens (mirrors Elementor global colors/fonts of the same names) */
:root {
	--strivo-navy: #282C38;
	--strivo-navy-700: #1D2029;
	--strivo-gold: #FFCC00;
	--strivo-gold-600: #E6B800;
	--strivo-text: #282C38;
	--strivo-muted: #667085;
	--strivo-border: #E4E7EC;
	--strivo-surface: #FFFFFF;
	--strivo-bg: #FAFAFA;
	--strivo-success: #16A34A;
	--strivo-font-heading: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--strivo-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	font-family: var(--strivo-font-body);
	color: var(--strivo-text);
}

a {
	color: inherit;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Buttons */
.strivo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--strivo-font-heading);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	padding: 0.95em 1.6em;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.1s ease;
}
/* Double-class selectors deliberately out-specificity Hello Elementor's
   reset.css button/[type=submit] rules (border/background #c36 on hover),
   which otherwise tie on specificity and win by loading after this file.
   Navy (not gold) is the CTA color per the v2 mockup -- gold is reserved
   for accents ("Simplified", chart/legend highlights), not buttons. */
.strivo-btn.strivo-btn--primary {
	background: var(--strivo-gold);
	color: var(--strivo-navy);
	border: none;
	border-radius: 8px;
    padding: 15px;
    font-weight: bold;
}
.strivo-btn.strivo-btn--primary:hover,
.strivo-btn.strivo-btn--primary:focus,
.strivo-btn.strivo-btn--primary:focus-visible {
	background: var(--strivo-navy-700);
	color: #FFFFFF;
}
.strivo-btn:focus-visible {
	outline: 2px solid var(--strivo-navy);
	outline-offset: 2px;
}

/* Header (Elementor Pro Theme Builder template "Strivo Header") --
   layout/background/border/typography all live in the template's own
   Elementor container settings. Sticky positioning has no Elementor UI
   control for containers, so it's applied here. */
.strivo-header-pro {
	position: sticky !important;
	top: 0 !important;
	z-index: 100 !important;
}

/* Footer (Elementor Pro Theme Builder template "Strivo Footer") --
   layout/spacing/background/border all live in the template's own
   Elementor container settings. This just supplements per-state link
   color, which the Text Editor widget's Style tab doesn't expose. */
.strivo-footer-pro__contact a,
.strivo-footer-pro__legal a {
	color: var(--strivo-muted);
	text-decoration: none;
}
.strivo-footer-pro__contact a:hover,
.strivo-footer-pro__legal a:hover {
	color: var(--strivo-navy);
	text-decoration: underline;
	text-decoration-color: var(--strivo-gold);
	text-decoration-thickness: 2px;
}
.strivo-footer-pro__creditor-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--strivo-gold);
	margin-right: 7px;
	flex-shrink: 0;
}

/* Video placeholder (client revision) -- 16:9 frame via the classic
   padding-top trick, since Elementor containers have no native
   aspect-ratio control. Kept as plain CSS so the section stays fully
   Elementor-editable (swap the inner content for a Video widget later
   without touching this). */
.strivo-video-frame-ratio {
	position: relative;
	width: 100%;
	height: 0 !important;
	padding: 0 !important;
	padding-top: 56.25% !important;
	background: #FFFFFF;
	border: 1px solid var(--strivo-border);
	border-radius: 14px;
	box-shadow: 0 4px 20px rgba(40, 44, 56, 0.08);
	overflow: hidden;
}
.strivo-video-frame__inner {
	position: absolute !important;
	inset: 0 !important;
}

/* Feature card hover/focus motion (client revision: "more color and
   movement" on the feature icons). Border-color + icon transform only;
   the existing global prefers-reduced-motion rule above (transition-
   duration: 0.01ms on *) already neutralizes the perceived motion for
   users who request it, so no separate override is needed here. */
.strivo-feature-card {
	transition: border-color 250ms ease;
}
.strivo-feature-card:hover,
.strivo-feature-card:focus-visible {
	border-color: var(--strivo-gold);
}
.strivo-feature-card:focus-visible {
	outline: 2px solid var(--strivo-navy);
	outline-offset: 2px;
}
.strivo-feature-icon {
	transition: transform 250ms ease, background-color 250ms ease;
}
.strivo-feature-card:hover .strivo-feature-icon,
.strivo-feature-card:focus-visible .strivo-feature-icon {
	transform: translateY(-4px) scale(1.06);
	background-color: #FFE58A;
}