/**
 * Greenway Tech Education — Custom Styles
 *
 * Utility classes, animations, and component styles.
 * Core design tokens are in theme.json.
 */

/* ========================================
   GLOBAL STYLES
   ======================================== */

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-feature-settings: "kern", "liga", "calt";
}

/* ========================================
   TYPOGRAPHY UTILITIES
   ======================================== */

.font-display {
	font-family: 'Fraunces', ui-serif, Georgia, serif;
	font-feature-settings: "ss01";
	letter-spacing: -0.02em;
}

.eyebrow {
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--forest);
}

/* ========================================
   BACKGROUND UTILITIES
   ======================================== */

.hero-gradient {
	background:
		radial-gradient(1200px 600px at 85% -10%, rgba(63,163,77,0.22), transparent 60%),
		radial-gradient(900px 500px at 10% 110%, rgba(11,79,63,0.18), transparent 60%),
		linear-gradient(180deg, #F7F4EC 0%, #EFE9D9 100%);
}

.leaf-grid-bg {
	background-image:
		linear-gradient(rgba(11,79,63,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(11,79,63,0.06) 1px, transparent 1px);
	background-size: 48px 48px;
}

.placeholder-img {
	background:
		repeating-linear-gradient(45deg, rgba(11,79,63,0.08) 0 12px, rgba(11,79,63,0.02) 12px 24px),
		linear-gradient(180deg, #EFE9D9, #F7F4EC);
}

.underline-wave {
	background-image: linear-gradient(transparent 62%, rgba(63,163,77,0.35) 62%, rgba(63,163,77,0.35) 88%, transparent 88%);
}

/* ========================================
   DIVIDERS
   ======================================== */

.dotted-divider {
	background-image: radial-gradient(circle, #0B4F3F 1px, transparent 1px);
	background-size: 14px 14px;
	background-position: center;
	opacity: 0.25;
	height: 1px;
}

/* ========================================
   COMPONENT: CHIPS / BADGES
   ======================================== */

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* ========================================
   COMPONENT: BUTTONS
   ======================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.35rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	text-decoration: none;
	border: none;
	cursor: pointer;
}

.btn:active {
	transform: translateY(1px);
}

.btn-primary,
.wp-block-button.is-style-primary .wp-block-button__link {
	background: var(--wp--preset--color--leaf);
	color: #fff;
	box-shadow: 0 6px 20px -6px rgba(63,163,77,0.5);
}

.btn-primary:hover,
.wp-block-button.is-style-primary .wp-block-button__link:hover {
	background: var(--wp--preset--color--leaf-dark);
	box-shadow: 0 10px 28px -8px rgba(46,139,61,0.55);
	color: #fff;
}

.btn-ghost,
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--forest);
	border: 1px solid rgba(11,79,63,0.22);
}

.btn-ghost:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: rgba(11,79,63,0.06);
	border-color: rgba(11,79,63,0.45);
	color: var(--wp--preset--color--forest);
}

.btn-dark,
.wp-block-button.is-style-dark .wp-block-button__link {
	background: var(--wp--preset--color--forest);
	color: #fff;
}

.btn-dark:hover,
.wp-block-button.is-style-dark .wp-block-button__link:hover {
	background: var(--wp--preset--color--forest-deep);
	color: #fff;
}

/* ========================================
   COMPONENT: LINK ARROW
   ======================================== */

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--forest);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.link-arrow svg {
	transition: transform 0.2s ease;
}

.link-arrow:hover svg {
	transform: translateX(3px);
}

.link-arrow:hover {
	color: var(--wp--preset--color--forest);
}

/* ========================================
   COMPONENT: CARDS
   ======================================== */

.card,
.wp-block-group.is-style-card {
	background: #fff;
	border: 1px solid rgba(11,79,63,0.08);
	border-radius: 1.25rem;
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

.card:hover,
.wp-block-group.is-style-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 6px rgba(11,79,63,0.06), 0 24px 48px -16px rgba(11,79,63,0.18);
	border-color: rgba(11,79,63,0.18);
}

/* ========================================
   COMPONENT: ICON TILES
   ======================================== */

.icon-tile,
.wp-block-group.is-style-icon-tile {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(63,163,77,0.12);
	color: var(--wp--preset--color--forest);
}

.icon-tile-lg,
.wp-block-group.is-style-icon-tile-lg {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--forest);
	color: #fff;
}

/* ========================================
   COMPONENT: FORM FIELDS
   ======================================== */

input,
select,
textarea {
	font-family: inherit;
}

.field,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: 0.9rem 1rem;
	border-radius: 0.85rem;
	border: 1px solid rgba(11,79,63,0.18);
	background: #fff;
	font-size: 0.95rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--leaf);
	box-shadow: 0 0 0 4px rgba(63,163,77,0.15);
}

.label,
label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	margin-bottom: 0.4rem;
	display: block;
	letter-spacing: 0.01em;
}

/* ========================================
   COMPONENT: NAV LINKS
   ======================================== */

.nav-link {
	position: relative;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	font-size: 0.95rem;
	text-decoration: none;
	transition: color 0.2s ease;
}

.nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background: var(--wp--preset--color--leaf);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.nav-link:hover::after {
	transform: scaleX(1);
}

.nav-link:hover {
	color: var(--wp--preset--color--forest);
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* Scroll Reveal */
.scroll-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Float Animation */
@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

.float {
	animation: float 6s ease-in-out infinite;
}

/* Chevron Rotation (for details/accordion) */
.chev {
	transition: transform 0.2s ease;
}

details[open] summary .chev {
	transform: rotate(180deg);
}

/* ========================================
   SVG DECORATIONS
   ======================================== */

.circuit-line {
	stroke: var(--wp--preset--color--forest);
	stroke-width: 1.2;
	fill: none;
	opacity: 0.18;
}

/* ========================================
   HEADER / NAVIGATION
   ======================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(8px);
	background: rgba(247,244,236,0.8);
	border-bottom: 1px solid rgba(11,79,63,0.1);
}

/* ========================================
   SHADOW UTILITIES
   ======================================== */

.shadow-soft {
	box-shadow: 0 1px 2px rgba(11,79,63,0.04), 0 8px 24px -8px rgba(11,79,63,0.12);
}

.shadow-lift {
	box-shadow: 0 2px 6px rgba(11,79,63,0.06), 0 24px 48px -16px rgba(11,79,63,0.18);
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

.hidden {
	display: none !important;
}

/* Mobile: stack the header vertically — logo on top, nav wrapped below,
   CTA button full-width. Bumped specificity with `.site-header` so we
   beat WordPress's per-block flex-layout class (.wp-container-…) without
   resorting to !important. */
@media (max-width: 767px) {
	.site-header .site-header__bar {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.75rem;
	}

	.site-header .site-header__bar > * {
		flex-basis: 100%;
		max-width: 100%;
	}

	.site-header__logo {
		justify-content: center;
	}

	.site-header__nav .wp-block-navigation__container {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem 1.5rem;
	}

	.site-header__cta .wp-block-button,
	.site-header__cta .wp-block-button__link {
		width: 100%;
	}

	.site-header__cta .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* Mobile: adjust typography */
@media (max-width: 782px) {
	.font-display {
		letter-spacing: -0.01em;
	}

	h1, .wp-block-post-title {
		font-size: 2.25rem !important;
	}

	h2 {
		font-size: 2rem !important;
	}
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

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

.screen-reader-text:focus {
	background-color: #f7f4ec;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #0b4f3f;
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ========================================
   BLOCK EDITOR SPECIFIC
   ======================================== */

.editor-styles-wrapper {
	background: var(--wp--preset--color--cream);
}

/* ========================================
   WPFORMS COMPATIBILITY
   ======================================== */

.wpforms-container .wpforms-field {
	margin-bottom: 1.25rem;
}

.wpforms-container label.wpforms-field-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	margin-bottom: 0.4rem;
	display: block;
	letter-spacing: 0.01em;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container select,
.wpforms-container textarea {
	width: 100%;
	padding: 0.9rem 1rem;
	border-radius: 0.85rem;
	border: 1px solid rgba(11,79,63,0.18);
	background: #fff;
	font-size: 0.95rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--leaf);
	box-shadow: 0 0 0 4px rgba(63,163,77,0.15);
}

.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.35rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	background: var(--wp--preset--color--leaf);
	color: #fff;
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	box-shadow: 0 6px 20px -6px rgba(63,163,77,0.5);
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
	background: var(--wp--preset--color--leaf-dark);
	box-shadow: 0 10px 28px -8px rgba(46,139,61,0.55);
}

.wpforms-container button[type="submit"]:active,
.wpforms-container .wpforms-submit:active {
	transform: translateY(1px);
}

/* ==========================================================
   ▼▼▼ FRONT-PAGE BLOCK-RECOVERY FIX — appended 2026-05-08 ▼▼▼
   Supporting styles for the cleaned templates/front-page.html.
   These cover markup that was previously inlined inside block
   JSON, which was triggering "Attempt Block Recovery" prompts.
   Source: supporting-styles.css (in theme root, safe to delete
   once these are merged here).
   ========================================================== */

/* --- Stat grid (Market Context section) --- */
.stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}
.stat-card {
	padding: 1.25rem;
	border-radius: 1rem;
	background: rgba(247, 244, 236, 0.05);
	border: 1px solid rgba(247, 244, 236, 0.10);
}
.stat-card__value {
	font-family: 'Fraunces', serif;
	font-size: 2rem;
	color: var(--wp--preset--color--leaf);
	margin: 0;
}
.stat-card__label {
	font-size: 0.875rem;
	color: var(--wp--preset--color--cream);
	margin: 0.25rem 0 0;
}

/* --- How-it-works step circles --- */
.step-circle {
	width: 96px;
	height: 96px;
	margin: 0 auto 1.25rem;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 1px 2px rgba(11, 79, 63, 0.04),
		0 8px 24px -8px rgba(11, 79, 63, 0.12);
}
.step-circle span {
	font-family: 'Fraunces', serif;
	font-size: 2.25rem;
}
.step-circle--01 {
	background: var(--wp--preset--color--cream);
	border: 1px solid rgba(11, 79, 63, 0.15);
}
.step-circle--01 span { color: var(--wp--preset--color--forest); }

.step-circle--02 {
	background: var(--wp--preset--color--forest);
	box-shadow:
		0 2px 6px rgba(11, 79, 63, 0.06),
		0 24px 48px -16px rgba(11, 79, 63, 0.18);
}
.step-circle--02 span { color: var(--wp--preset--color--cream); }

.step-circle--03 {
	background: var(--wp--preset--color--leaf);
	box-shadow:
		0 2px 6px rgba(11, 79, 63, 0.06),
		0 24px 48px -16px rgba(11, 79, 63, 0.18);
}
.step-circle--03 span { color: #ffffff; }

/* --- Underline-wave color override for the Market Context heading
       (note: .underline-wave background-image is defined above). --- */
.underline-wave {
	color: #ffffff;
	/* extend in your theme as desired */
}

/* --- Ghost button on the leaf-green CTA band --- */
.is-style-ghost-on-leaf .wp-block-button__link {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.5);
}
/* ▲▲▲ END FRONT-PAGE BLOCK-RECOVERY FIX ▲▲▲ */

/* ==========================================================
   ▼▼▼ FOOTER BLOCK-RECOVERY FIX — appended 2026-05-09 ▼▼▼
   Supporting styles for the cleaned parts/footer.html. These
   cover link styling that was previously inlined on each <a>
   inside the footer lists and the bottom-row links.
   ========================================================== */

/* Footer column lists (Services / Company / Contact) */
.footer-link-list,
.footer-link-list a {
	color: rgba(247, 244, 236, 0.8);
	text-decoration: none;
}

/* Footer bottom row (Privacy · Terms · Accessibility) */
.footer-bottom-links a {
	color: inherit;
	text-decoration: none;
}
/* ▲▲▲ END FOOTER BLOCK-RECOVERY FIX ▲▲▲ */

/* ==========================================================
   ▼▼▼ FLUENT FORMS BUTTON OVERRIDE — appended 2026-05-09 ▼▼▼
   Force the Fluent Forms submit button to match the leaf-green
   primary button style instead of the plugin's default white.
   ========================================================== */

.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
	background-color: #3FA34D !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 0.85rem 1.75rem !important;
	font-weight: 600 !important;
	transition: background-color 0.2s ease;
}

.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
	background-color: #2E8B3D !important;
}
/* ▲▲▲ END FLUENT FORMS BUTTON OVERRIDE ▲▲▲ */

/* ==========================================================
   ▼▼▼ FOOTER FLUENT FORMS LABEL CONTRAST — appended 2026-05-12 ▼▼▼
   The Fluent Form 4 (newsletter signup) in the footer has labels
   in the plugin's default dark slate color, which fails contrast
   against the dark forest-green footer background. This forces
   labels in the footer-only scope to cream so they meet WCAG.
   Does NOT affect Fluent Forms elsewhere (contact form on
   homepage, /contact/, /newsletter/) which remain on light bg.
   ========================================================== */

footer .frm-fluent-form .ff-el-input--label label,
footer .frm-fluent-form label {
	color: #F7F4EC !important;
}

/* ▲▲▲ END FOOTER FLUENT FORMS LABEL CONTRAST ▲▲▲ */

/* ==========================================================
   ▼▼▼ HERO FLOATING CARDS — appended 2026-05-09 ▼▼▼
   Hero illustration for templates/front-page.html — three
   floating cards on a soft gradient background showing
   training progress, automation pipeline, and an AI chat.
   Pure CSS / SVG, no images.
   ========================================================== */

.hero-illustration {
	position: relative;
	height: 460px;
	border-radius: 1.5rem;
	overflow: hidden;
	background: linear-gradient(135deg, #F7F4EC 0%, #EFE9D9 100%);
	border: 1px solid rgba(11,79,63,0.1);
}
.hero-bg-leaf {
	position: absolute;
	top: -40px;
	right: -40px;
	opacity: 0.07;
	width: 300px;
	height: 300px;
}

/* Card 1: Training progress */
.hero-card-training {
	position: absolute;
	top: 60px;
	left: 32px;
	width: 230px;
	background: white;
	border-radius: 0.875rem;
	padding: 0.875rem 1rem;
	box-shadow:
		0 12px 32px -12px rgba(11,79,63,0.18),
		0 2px 4px rgba(11,79,63,0.04);
	transform: rotate(-4deg);
}
.hero-card-training .meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.65rem;
	font-size: 0.6rem;
	color: rgba(11,79,63,0.5);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.hero-card-training .dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #3FA34D;
}
.hero-card-training .title {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 0.95rem;
	font-weight: 500;
	color: #0B4F3F;
	margin-bottom: 0.65rem;
	line-height: 1.25;
}
.hero-card-training .progress-bar {
	height: 5px;
	background: rgba(11,79,63,0.08);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 0.5rem;
}
.hero-card-training .progress-fill {
	width: 68%;
	height: 100%;
	background: #3FA34D;
	border-radius: 999px;
}
.hero-card-training .progress-meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.65rem;
	color: rgba(11,79,63,0.55);
}
.hero-card-training .progress-meta strong {
	color: #3FA34D;
	font-weight: 500;
}

/* Card 2: Automation pipeline */
.hero-card-pipeline {
	position: absolute;
	top: 28px;
	right: 24px;
	width: 240px;
	background: #0B4F3F;
	border-radius: 0.875rem;
	padding: 1rem;
	box-shadow:
		0 16px 40px -12px rgba(11,79,63,0.25),
		0 2px 6px rgba(11,79,63,0.08);
	transform: rotate(3deg);
}
.hero-card-pipeline .meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.85rem;
	font-size: 0.6rem;
	color: rgba(247,244,236,0.6);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.hero-card-pipeline .dot-live {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #3FA34D;
	box-shadow: 0 0 0 3px rgba(63,163,77,0.3);
}
.hero-card-pipeline .pipeline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.4rem;
}
.hero-card-pipeline .step {
	background: rgba(247,244,236,0.08);
	border-radius: 0.4rem;
	padding: 0.5rem;
	border: 1px solid rgba(247,244,236,0.1);
}
.hero-card-pipeline .step-num {
	font-size: 0.55rem;
	color: rgba(247,244,236,0.45);
	text-transform: uppercase;
	margin-bottom: 0.15rem;
}
.hero-card-pipeline .step-name {
	color: #F7F4EC;
	font-size: 0.65rem;
}
.hero-card-pipeline .step-progress {
	height: 2.5px;
	background: #3FA34D;
	border-radius: 999px;
	margin-top: 0.5rem;
}
.hero-card-pipeline .step-progress.partial {
	background: rgba(63,163,77,0.5);
	width: 60%;
}

/* Card 3: AI conversation */
.hero-card-chat {
	position: absolute;
	bottom: 32px;
	left: 70px;
	width: 270px;
	background: white;
	border-radius: 0.875rem;
	padding: 1rem 1rem 0.85rem;
	box-shadow:
		0 20px 48px -12px rgba(11,79,63,0.22),
		0 4px 8px rgba(11,79,63,0.06);
	transform: rotate(-2deg);
}
.hero-card-chat .header {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.7rem;
}
.hero-card-chat .avatar {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: #3FA34D;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 0.55rem;
	font-weight: 600;
}
.hero-card-chat .name {
	font-size: 0.65rem;
	color: rgba(11,79,63,0.55);
	font-weight: 500;
}
.hero-card-chat .msg-user {
	background: #F7F4EC;
	border-radius: 0.5rem 0.5rem 0.5rem 0.15rem;
	padding: 0.6rem 0.75rem;
	font-size: 0.7rem;
	color: #1C1C1C;
	line-height: 1.55;
	margin-bottom: 0.45rem;
}
.hero-card-chat .msg-user div {
	padding: 0.05rem 0;
}
.hero-card-chat .msg-ai {
	background: #0B4F3F;
	border-radius: 0.5rem 0.5rem 0.15rem 0.5rem;
	padding: 0.6rem 0.75rem;
	font-size: 0.75rem;
	color: #F7F4EC;
	line-height: 1.4;
	margin-left: 1.5rem;
}

/* Connection lines */
.hero-connections {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.hero-connections line {
	stroke: #3FA34D;
	stroke-width: 1;
	stroke-dasharray: 3,3;
	opacity: 0.25;
}
/* ▲▲▲ END HERO FLOATING CARDS ▲▲▲ */