@layer base, ui, navigation, modules, theme, pages, utilities;

@layer base {
	/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */

:root {
    /* Primary Brand Colors - Green Spectrum */
    --color-green-bright: #7ED957;
    --color-green-lime: #9ACD32;
    --color-green-forest: #2D7D4A;
    --color-green-dark: #1B5E20;
    
    /* Teal/Cyan Spectrum (Secondary Brand) */
    --color-teal: #14B8A6;
    --color-teal-light: #5EEAD4;
    --color-teal-medium: #0D9488;
    --color-teal-dark: #0F766E;
    --color-teal-darker: #115E59;
    --color-cyan: #00897B;
    --color-cyan-dark: #00695C;
    --color-cyan-darker: #004D40;
    
    /* Blue Spectrum */
    --color-blue-navy: #2C3E50;
    --color-blue-dark: #1E3A5F;
    --color-blue-deeper: #1A365D;
    --color-blue-deepest: #0F2B4A;
    --color-blue-medium: #2563EB;
    --color-blue-light: #64B5F6;
    
    /* Accent Colors */
    --color-lime-accent: #9ACD32;
    --color-orange: #FF7043;
    --color-orange-dark: #F4511E;
    --color-coral: #FF6B6B;
    
    /* Neutral Colors */
    --color-black: #1A202C;
    --color-gray-900: #2D3748;
    --color-gray-800: #374151;
    --color-gray-700: #4A5568;
    --color-gray-600: #718096;
    --color-gray-500: #A0AEC0;
    --color-gray-400: #CBD5E0;
    --color-gray-300: #E2E8F0;
    --color-gray-200: #EDF2F7;
    --color-gray-100: #F5F7FA;
    --color-white: #FFFFFF;
    
    /* Badge Background Colors */
    --badge-violet-bg: #E9D5FF;
    --badge-violet-text: #7C3AED;
    --badge-blue-bg: #DBEAFE;
    --badge-blue-text: #2563EB;
    --badge-orange-bg: #FED7AA;
    --badge-orange-text: #EA580C;
    --badge-green-bg: #D1FAE5;
    --badge-green-text: #059669;
    --badge-teal-bg: #CCFBF1;
    --badge-teal-text: #0F766E;
    
    /* Gradients - Green/Teal Dominant */
    --gradient-green-teal: linear-gradient(135deg, #7ED957, #14B8A6);
    --gradient-forest-lime: linear-gradient(116.97deg, #02826D 0%, #9ECC4F 100%);
    --gradient-lime-forest: linear-gradient(135deg, #9ACD32, #2D7D4A);
    --gradient-teal-cyan: linear-gradient(135deg, #14B8A6, #00897B);
    --gradient-teal-dark: linear-gradient(135deg, #0D9488, #115E59);
    --gradient-cyan-deep: linear-gradient(135deg, #00897B, #004D40);
    --gradient-navy-teal: linear-gradient(135deg, #2C3E50, #14B8A6);
    --gradient-green-blue: linear-gradient(135deg, #7ED957, #2563EB);
    --gradient-lime-teal: linear-gradient(135deg, #9ACD32, #0D9488);
    --gradient-forest-cyan: linear-gradient(135deg, #2D7D4A, #00897B);
    --gradient-teal-navy: linear-gradient(135deg, #14B8A6, #1E3A5F);
    --gradient-white-lgray: linear-gradient(135deg, #FFFFFF, var(--color-gray-100));
    --gradient-navy-violet: linear-gradient(135deg, #1E3A5F, #7C3AED);

    /* Footer */
    --footer-gradient: linear-gradient(104.3deg, #30444F 71.64%, #02826D 100.45%);
    
    /* Gradient overlays */
    --gradient-overlay-dark: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    --gradient-overlay-teal: linear-gradient(to top, rgba(20, 184, 166, 0.8), transparent);
    --gradient-overlay-subtle: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.05));
    
    /* Typography - Theme Fields */
    --font-header: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Typography - Legacy/Aliases */
    --font-family-primary: var(--font-header);
    --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    
    /* Font Sizes */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.75rem;     /* 28px */
    --text-4xl: 2rem;        /* 32px */
    --text-5xl: 2.5rem;      /* 40px */
    --text-6xl: 3rem;        /* 48px */
    --text-7xl: 3.5rem;      /* 56px */
    --text-8xl: 4.5rem;      /* 72px */
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.1;
    --leading-snug: 1.2;
    --leading-normal: 1.3;
    --leading-relaxed: 1.4;
    --leading-comfortable: 1.5;
    --leading-loose: 1.6;
    --leading-extra-loose: 1.7;
    
    /* Letter Spacing */
    --tracking-tighter: -0.02em;
    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
    
    /* Spacing */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-base: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* Shadows - Teal tinted */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 16px rgba(20, 184, 166, 0.2);
    --shadow-xl: 0 12px 24px rgba(20, 184, 166, 0.15);
    --shadow-2xl: 0 16px 32px rgba(20, 184, 166, 0.2);
    --shadow-button: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-button-hover: 0 6px 12px rgba(0, 0, 0, 0.15);
    --shadow-green: 0 8px 16px rgba(126, 217, 87, 0.15);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-all: all 0.2s ease;
    --transition-colors: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    --transition-transform: transform 0.3s ease;

    --container-width: 1400px;
    --container-width-xsmall: 576px;
    --container-width-small: 768px;
    --container-width-medium: 1200px;
    --container-width-large: 1600px;
    --container-width-xlarge: 1900px;

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

img {
    display: block;
    max-width: 100%;
}

body {
    padding: var(--space-4);
    margin: 0;
    padding-top: calc(97px + var(--space-4));
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}
    
::-webkit-scrollbar {
    width: 10px;
    padding: 3px;
}

::-webkit-scrollbar-track {
    background: var(--color-gray-300);
}

::-webkit-scrollbar-thumb {
    background-image: 
        linear-gradient(
            to bottom, 
            var(--color-green-lime), 
            var(--color-green-forest), 
            var(--color-blue-dark), 
            var(--color-blue-deepest)
        );
    border-radius: 1rem;
}

/* Selection Color */
::selection {
    background: var(--color-blue-navy);
    color: var(--color-green-bright);
}
}

@layer ui {
	/* ============================================
   GRADIENT BACKGROUNDS
   ============================================ */

.bg-gradient-green-teal {
    background: var(--gradient-green-teal);
}

.bg-gradient-lime-forest {
    background: var(--gradient-lime-forest);
}

.bg-gradient-teal-cyan {
    background: var(--gradient-teal-cyan);
}

.bg-gradient-teal-dark {
    background: var(--gradient-teal-dark);
}

.bg-gradient-cyan-deep {
    background: var(--gradient-cyan-deep);
}

.bg-gradient-navy-teal {
    background: var(--gradient-navy-teal);
}

.bg-gradient-green-blue {
    background: var(--gradient-green-blue);
}

.bg-gradient-lime-teal {
    background: var(--gradient-lime-teal);
}

.bg-gradient-forest-cyan {
    background: var(--gradient-forest-cyan);
}

.bg-gradient-teal-navy {
    background: var(--gradient-teal-navy);
}

.footer-gradient {
    background: var(--gradient-green-teal);
}

.gradient-light-grey {
    background: var(--gradient-white-lgray);
}
	/* Background Colors */
.bg-white { background: var(--color-white); }
.bg-gray-100 { background: var(--color-gray-100); }
.bg-gray-200 { background: var(--color-gray-200); }
.bg-teal { background: var(--color-teal); }
.bg-green { background: var(--color-green-bright); }
.bg-lime { background: var(--color-lime-accent); }
.bg-navy { background: var(--color-blue-navy); }
.bg-orange { background: var(--color-orange); }
	/* ============================================
   TYPOGRAPHY SYSTEM
   ============================================ */

/* Apply Typography */
body {
	font-family: var(--font-body), sans-serif;
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	color: var(--color-blue-navy);
    text-wrap: pretty; 
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-header), sans-serif;
	font-weight: var(--font-weight-header);
	color: var(--color-header);
    text-wrap: balance;
}


/* Display Styles */
.display-xl {
    font-size: var(--text-8xl);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
}

.display-lg {
    font-size: var(--text-7xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
}

.display-md {
    font-size: var(--text-6xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.display-sm {
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
}

/* Heading Styles */
.h1,
h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-normal);
}

.h2,
h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-normal);
}

.h3,
h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-relaxed);
}

.h4,
h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-relaxed);
}

.h5,
h5 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: var(--leading-comfortable);
}

.h6,
h6 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-comfortable);
}

:where(h1, h2, h3, h4, h5, h6) {
    margin-block: 0;
}

:where(h1, h2, h3, h4, h5, h6):has(+ p) {
	margin-bottom: var(--space-4);
}
:where(h1, h2, h3, h4, h5, h6) + p {
	margin-top: 0; 
}

/* Body Text Styles */
.body-xl {
    font-size: var(--text-xl);
    font-weight: var(--font-normal);
    line-height: var(--leading-extra-loose);
    color: var(--color-gray-700);
}

.body-lg {
    font-size: var(--text-lg);
    font-weight: var(--font-normal);
    line-height: var(--leading-extra-loose);
    color: var(--color-gray-700);
}

.body-md,
p {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-loose);
}

.body-sm {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    line-height: var(--leading-loose);
}

.body-xs {
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    line-height: var(--leading-comfortable);
}

/* Anchor Styles */
a {
	color: var(--color-green-forest);
}
a:hover {
	color: oklch(from var(--color-green-bright) 0.65 c h / 1);
    text-decoration: none;
}

:where(ul,ol) li {
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-2);
}

blockquote {
    font-size: var(--text-lg);
    font-weight: var(--font-normal);
    font-style: italic;
    line-height: var(--leading-relaxed);
    border-left: 3px solid var(--color-green-bright);
    padding-left: var(--space-4);
}

/* Label Styles */
.label-lg {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-relaxed);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.label-md {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: var(--leading-relaxed);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.label-sm {
    font-size: 0.625rem;
    font-weight: var(--font-medium);
    line-height: var(--leading-relaxed);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* Eyebrow Text */
.eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin: 0 0 var(--space-2) 0
}

.eyebrow-lg {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* Read Time / Meta Text */
.read-time {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

/* Monospace Text */
.text-mono {
    font-family: var(--font-family-mono);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.text-center {
    text-align: center;
}

/* Text Colors */
.text-green { color: var(--color-green-bright); }
.text-lime { color: var(--color-lime-accent); }
.text-teal { color: var(--color-teal); }
.text-cyan { color: var(--color-cyan); }
.text-navy { color: var(--color-blue-navy); }
.text-orange { color: var(--color-orange); }
.text-black { color: var(--color-black); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-500 { color: var(--color-gray-500); }
.text-white { color: var(--color-white); }


@media (max-width: 768px) {
    .display-xl { font-size: var(--text-5xl); }
    .display-lg { font-size: var(--text-4xl); }
    .display-md { font-size: var(--text-3xl); }
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-sm);
    color: var(--color);
    background: var(--color-bg);
}
	/* ============================================
   BUTTON STYLES
   ============================================ */
/* Button Group */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Base Button */
.btn,
.hs-button {
    display: inline-block;
    padding: 12px 24px;
    font-family: var(--font-family-primary);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: var(--transition-all);
    white-space: nowrap;
}

.btn:hover,
.hs-button:hover {
    transform: translateY(-2px);
}

.btn:active,
.hs-button:active {
    transform: translateY(0);
}

/* Button Sizes */
.btn-sm,
.hs-button-sm {
    padding: 8px 16px;
    font-size: var(--text-sm);
}

.btn-md,
.hs-button-md {
    padding: 10px 20px;
    font-size: var(--text-sm);
}

.btn-lg,
.hs-button-lg,
.hs-button.large {
    padding: 16px 32px;
    font-size: var(--text-base);
}

.btn-xl,
.hs-button-xl {
    padding: 18px 36px;
    font-size: var(--text-lg);
}

/* Primary Button - Lime/Green */
.btn-primary,
.hs-button-primary,
.hs-button.primary {
    background: var(--color-lime-accent);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

.btn-primary:hover,
.hs-button-primary:hover {
    background: var(--color-green-bright);
    box-shadow: var(--shadow-button-hover);
}

/* Secondary Button - Teal */
.btn-secondary,
.hs-button-secondary {
    background: var(--color-teal);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

.btn-secondary:hover,
.btn-secondary:hover {
    background: var(--color-teal-dark);
    box-shadow: var(--shadow-button-hover);
}

/* Tertiary Button - Green */
.btn-tertiary, 
.hs-button-tertiary {
    background: var(--color-green-bright);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

.btn-tertiary:hover,
.hs-button-tertiary:hover {
    background: var(--color-green-forest);
    box-shadow: var(--shadow-button-hover);
}

/* Dark Button - Navy */
.btn-dark,
.hs-button-dark {
    background: var(--color-blue-navy);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

.btn-dark:hover,
.hs-button-dark:hover {
    background: var(--color-blue-dark);
    box-shadow: var(--shadow-button-hover);
}

/* Accent Button - Orange */
.btn-accent,
.hs-button-accent {
    background: var(--color-orange);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

.btn-accent:hover,
.hs-button-accent:hover {
    background: var(--color-orange-dark);
    box-shadow: var(--shadow-button-hover);
}

/* Outline Buttons */
.btn-outline,
.hs-button-outline {
    background: transparent;
    color: var(--color-teal);
    border: 2px solid var(--color-teal);
    box-shadow: none;
}

.btn-outline:hover,
.hs-button-outline:hover {
    background: var(--color-teal);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

.btn-outline-green,
.hs-button-outline-green {
    background: transparent;
    color: var(--color-green-bright);
    border: 2px solid var(--color-green-bright);
    box-shadow: none;
}

.btn-outline-green:hover,
.hs-button-outline-green:hover {
    background: var(--color-green-bright);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

/* White Button */
.btn-white,
.hs-button-white {
    background: var(--color-white);
    color: var(--bg-color, var(--color-green-lime));
    box-shadow: var(--shadow-button);
}

.btn-white:hover,
.hs-button-white:hover {
    box-shadow: var(--shadow-button-hover);
}

/* Ghost Button */
.btn-ghost,
.hs-button-ghost {
    background: rgba( from var(--color-white) r g b / 0.25);
    color: var(--color-white);
    border-color: var(--color-white);
    box-shadow: none;
}

.btn-ghost:hover,
.hs-button-ghost:hover {
    background: var(--color-gray-100);
}

/* Text Button */
.btn-text,
.hs-button-text {
    background: transparent;
    color: var(--bg-color, var(--color-green-lime));
    padding: 0;
    box-shadow: none;
    font-weight: var(--font-medium);
}

.btn-text:hover,
.hs-button-text:hover {
    color: currentColor;
    text-decoration: underline;
    transform: none;
}

/* Full Width Button */
.btn-full,
.hs-button-full {
    width: 100%;
}

/* Disabled Button */
.btn:disabled,
.btn-disabled,
.hs-button-disabled,
.hs-button:disabled {
    background: var(--color-gray-200);
    color: var(--color-gray-700);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
	/* ============================================
   BADGE / TAG STYLES
   ============================================ */

.badge {
	display: inline-block;
	padding: 4px 12px;
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	border-radius: var(--radius-sm);
}

/* Badge Variants - Based on Actual Designs */
.badge-violet {
	background: var(--badge-violet-bg);
	color: var(--badge-violet-text);
}

.badge-blue {
	background: var(--badge-blue-bg);
	color: var(--badge-blue-text);
}

.badge-orange {
	background: var(--badge-orange-bg);
	color: var(--badge-orange-text);
}

.badge-green {
	background: var(--badge-green-bg);
	color: var(--badge-green-text);
}

.badge-teal {
	background: var(--badge-teal-bg);
	color: var(--badge-teal-text);
}

.badge-gray {
	background: var(--color-gray-200);
	color: var(--color-gray-700);
}

.badge-cyan {
	background: var(--color-cyan);
	color: var(--color-white);
}

.badge-blue-navy {
	background: var(--color-blue-navy);
	color: var(--color-white);
}

.badge-green-forest {
	background: var(--color-green-forest);
	color: var(--color-white);
}

.badge-blue-medium {
	background: var(--color-blue-medium);
	color: var(--color-white);
}

.badge-dark-teal {
	background: var(--color-teal-dark);
	color: var(--color-white);
}

/* Badge with transparent background */
.badge-outline {
	background: transparent;
	color: var(--color-green-lime);
}
	/* ============================================
   TOOLTIP COMPONENT STYLES
   ============================================ */

/* Tooltip Base */
.tooltip {
	position: relative;
	cursor: pointer;
}

/* Tooltip Bubble */
.tooltip::before {
	content: attr(data-tip);
	position: absolute;
	left: -50%;
	bottom: auto;
	top: calc(100% + 12px);
	transform: translate3d(0, 0, 0);
	padding: var(--space-2) var(--space-3);
	background: var(--footer-gradient);
	color: var(--color-white);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	line-height: var(--leading-tight);
	white-space: nowrap;
	border-radius: var(--radius-base);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: 
		opacity 0.2s ease, 
		visibility 0.2s ease, 
		transform 0.2s ease;
	pointer-events: none;
	z-index: 1000;
}

/* Tooltip Arrow */
.tooltip::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: auto;
	top: calc(100% + 4px);
	transform: translate3d(10px, 0, 0);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid var(--color-blue-navy);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	pointer-events: none;
	z-index: 1000;
}

/* Show tooltip on hover and focus */
.tooltip:where(:hover,:focus-visible)::before,
.tooltip:where(:hover,:focus-visible)::after {
	opacity: 1;
	visibility: visible;
}


/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.tooltip::before,
	.tooltip::after {
		transition: opacity 0.01ms, visibility 0.01ms;
	}
}
	.avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--gradient-forest-lime);
    border-radius: var(--radius-full);
    color: var(--color-white);
    font-weight: var(--font-medium);
    text-decoration: none;
    text-transform: uppercase;
	font-size: var(--text-sm);
	margin-left: var(--space-4);
}

.avatar:hover,
a:where(:hover,:focus-visible) > .avatar {
    background: var(--color-lime-accent);
    color: var(--color-white);
}
	/* Dividers */
.divider {
    height: 1px;
    background: var(--color-gray-300);
    margin: var(--space-8) 0;
}

.divider-thick {
    height: 2px;
    background: var(--color-gray-400);
}
	/* ============================================
   ICON COMPONENT STYLES
   ============================================ */

/* Base Icon Container */
.icon {
    display: inline-grid;
    place-items: center;
    width: calc(var(--icon-size) + 2rem);
    height: calc(var(--icon-size) + 2rem);
    background: var(--icon-background, transparent);
    border-radius: var(--icon-radius, 100%);
}

/* SVG Styling */
.icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
    fill: var(--color-white);
	mix-blend-mode: overlay;
}
	/* ============================================
   HUBSPOT FORM STYLES
   ============================================ */

/* HubSpot Form Base */
.hs-form {
	max-width: 100%;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* Fieldsets */
.hs-form fieldset {
	border: none;
	padding: 0;
	margin: 0 0 var(--space-6) 0;
}

/* Form Columns */
.hs-form [class*='form-columns-'] {
	display: flex;
	gap: var(--space-4);
	max-width: 100% !important ;
}

/* Form Fields */
.hs-form .hs-form-field {
	margin-bottom: 0;
	flex: 1;
	width: 100% !important;
}

.hs-form .input {
	width: 100%;
	margin: 0;
}

/* Labels */
.hs-form label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: currentColor;
}

.hs-form label strong {
	font-weight: var(--font-medium);
}

.hs-form .hs-form-required {
	color: var(--color-orange);
	margin-left: var(--space-1);
}

/* Input Fields */
.hs-form .hs-input {
	width: 100% !important;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-black);
	background: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-base);
	transition: var(--transition-base);
	box-sizing: border-box;
}

.hs-form .hs-input:where([type='checkbox'], [type='radio']) {
	width: auto !important;
}

.hs-form .hs-input:focus {
	outline: none;
	border-color: var(--color-teal);
	box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.hs-form .hs-input::placeholder {
	color: var(--color-gray-500);
}

/* Textarea */
.hs-form .hs-fieldtype-textarea .hs-input {
	min-height: 120px;
	resize: vertical;
}

/* Checkbox */
.hs-form .hs-form-booleancheckbox-display {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--text-base);
	color: currentColor;
	font-weight: var(--font-normal);
	cursor: pointer;
}

.hs-form .hs-form-booleancheckbox input[type='checkbox'] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--color-green-bright);
	cursor: pointer;
	flex-shrink: 0;
}

.hs-form .inputs-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Error States */
.hs-form .hs-input.error,
.hs-form .hs-input.invalid {
	border-color: var(--color-orange);
}

.hs-form .hs-error-msgs {
	margin-top: var(--space-2);
	list-style: none;
	padding: 0;
}

.hs-form .hs-error-msg {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-orange);
	font-weight: var(--font-normal);
}

.no-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

#hs-register-widget-explicit-consent {
	display: inline;
	margin-right: var(--space-2);
}

#hs-register-widget-checkbox-consent {
	display: inline;
}

/* Submit Button */
.hs-form .hs-submit {
	margin-top: var(--space-6);
}

.hs-form .hs-submit .actions {
	display: flex;
	justify-content: flex-start;
}
	/* ============================================
   CARD STYLES
   ============================================ */

/* Base Card */
.card {
	background: var(--color-white);
	border-radius: var(--radius-base);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	position: relative;
}

.card:hover,
.card:focus-within {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

/* Card with no hover effect */
.card-static {
	box-shadow: var(--shadow-base);
}

.card-static:hover {
	transform: none;
}

/* Card Color Variants - Border colors from badge backgrounds */
.card--violet {
	border-left: 2px solid var(--badge-violet-text) !important;
}

.card--blue {
	border-left: 2px solid var(--badge-blue-text) !important;
}

.card--orange {
	border-left: 2px solid var(--badge-orange-text) !important;
}

.card--green {
	border-left: 2px solid var(--badge-green-text) !important;
}

.card--teal {
	border-left: 2px solid var(--badge-teal-text) !important;
}

.card--gray {
	border-left: 2px solid var(--color-gray-700) !important;
}

.card--cyan {
	border-left: 2px solid var(--color-cyan) !important;
}

.card--blue-navy {
	border-left: 2px solid var(--color-blue-navy) !important;
}

.card--green-forest {
	border-left: 2px solid var(--color-green-forest) !important;
}

.card--blue-medium {
	border-left: 2px solid var(--color-blue-medium) !important;
}

.card--dark-teal {
	border-left: 2px solid var(--color-teal-dark) !important;
}

/* Card Header */
.card-header {
	padding: var(--space-6);
	border-bottom: 1px solid var(--color-gray-200);
}

/* Card Body */
.card-body {
	padding: var(--space-6);
}

/* Card Footer */
.card-footer {
	padding: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-gray-200);
}

/* Article Card (Standard) */
.article-card {
	background: var(--color-white);
	border-radius: var(--radius-base);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: var(--transition-all);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-gray-200);
}

.article-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
	border-color: var(--color-gray-300);
}

.article-card--media .article-card-image::before {
	content: '';
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-width: 8px;
	border-bottom-width: 8px;
	border-left-color: var(--color-white);
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 1));
}

.article-card--media .article-card-image::after {
	content: '';
	position: absolute;
	top: calc(1rem - 8px);
	right: 18px;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.35);
	box-shadow: var(--shadow-sm);
}

.article-card-image {
	width: 100%;
	height: 220px;
	background: var(--gradient-green-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--color-white);
	font-size: var(--text-lg);
	font-weight: var(--font-medium);
}

.article-card-image picture,
.article-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-card-content {
	padding: var(--space-4);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.article-card-meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}
å .article-card-date {
	font-size: var(--text-sm);
	color: var(--color-gray-z00);
	font-weight: var(--font-normal);
}

.article-card-title {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	line-height: var(--leading-snug);
	color: var(--color-gray-900);
	margin-bottom: var(--space-3);
}

.article-card-title a {
	color: inherit;
	text-decoration: none;
	transition: var(--transition-colors);
}

.article-card-title a:hover {
	color: var(--color-teal);
}

.article-card-excerpt {
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-gray-600);
	margin-bottom: var(--space-5);
	flex: 1;
}

.article-card-footer {
	margin-block: auto 0;
	border-top: 1px solid var(--color-gray-200);
	padding-top: var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.article-card-author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.article-card-author-link {
	width: fit-content;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: currentColor;
	text-decoration: none;
	font-size: var(--text-sm);
}

.article-card-author-avatar {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	overflow: hidden;
	border: 2px solid var(--color-gray-200);
	color: var(--color-white);
	margin: 0;
}

.article-card-read-time,
.article-card-date {
	font-size: var(--text-sm);
	color: var(--color-gray-500);
	white-space: nowrap;
}

/* Featured Card (Large Hero) */
.featured-card {
	background: var(--gradient);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: var(--transition-all);
	padding: var(--space-8);
	color: var(--color-white);
	position: relative;
	min-height: 400px;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-4);
}

.featured-card:hover {
	box-shadow: var(--shadow-xl);
	transform: translateY(-2px);
}

.featured-card-info {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	justify-content: flex-start;
}

.featured-card-date {
	font-size: var(--text-sm);
}

.featured-card-title {
	line-height: var(--leading-tight);
	margin: 0;
	width: min(100%, 800px);
}

.featured-card-excerpt {
	margin-bottom: 0;
	max-width: 700px;
	width: min(100%, 600px);
}

.featured-card-footer {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-gray-200);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.featured-card-author {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	color: currentColor;

	position: relative;
	z-index: 1;
}

.featured-card-author-avatar {
	margin-left: 0;
}

.featured-card-read-time {
	font-size: var(--text-sm);
	margin-left: auto;
}

/* Compact Card */
.compact-card {
	background: var(--color-white);
	border-radius: var(--radius-base);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
	transition: var(--transition-all);
	border-left: 3px solid transparent;
}

.compact-card:hover {
	box-shadow: var(--shadow-md);
	border-left-color: var(--color-teal);
}

.compact-card-title {
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	color: var(--color-black);
	margin-bottom: var(--space-2);
}

.compact-card-excerpt {
	font-size: var(--text-sm);
	line-height: var(--leading-loose);
	color: var(--color-gray-600);
}

/* Horizontal Card */
.horizontal-card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-base);
	transition: var(--transition-all);
	display: grid;
	grid-template-columns: 240px 1fr;
}

.horizontal-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.horizontal-card-image {
	background: var(--gradient-teal-cyan);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Minimal Card */
.minimal-card {
	padding: var(--space-6) 0;
	border-bottom: 1px solid var(--color-gray-200);
	transition: var(--transition-all);
}

.minimal-card:hover {
	padding-left: var(--space-3);
}

.minimal-card-title {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	color: var(--color-black);
	margin-bottom: var(--space-2);
}

/* Content Type Cards (Homepage Grid) */
.content-card {
	background: var(--gradient);
	border-radius: var(--radius-md);
	padding: var(--space-24) var(--space-6) var(--space-6);
	min-height: 240px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-2);
	position: relative;
	overflow: hidden;
	transform: translateY(0px);
	transition: transform 0.6s ease-out, opacity 0.6s ease-out,
		box-shadow 0.6s ease-out;
}

.content-card--hidden {
	opacity: 0;
	transform: translateY(20px);
}

.content-card:hover,
.content-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.content-card-icon {
	position: relative;
	padding-bottom: var(--space-2);
	position: relative;
	mix-blend-mode: overlay;
}

.content-card-icon svg {
	opacity: 1;
	width: 60px;
	height: 60px;
	fill: currentColor;
	color: currentColor;
}

.content-card-title {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	margin-block: 0;
	line-height: var(--leading-snug);
}

.content-card-link,
.content-card-link:hover {
	color: inherit;
	text-decoration: none;
}

.content-card-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.content-card-description {
	font-size: var(--text-sm);
	opacity: 0.95;
	line-height: var(--leading-relaxed);
	margin-block: 0;
}

.tag-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	max-width: 450px;
	padding: var(--space-4);
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
	border-radius: var(--radius-base);
	border: 1px solid var(--color-gray-200);
	border-left: 2px solid var(--badge, var(--badge-violet-text));
	position: relative;
	transform: translateY(0px);
	opacity: 0;
	transition: transform 0.6s ease-out, box-shadow 0.6s ease-out,
		opacity 0.6s ease-out;
}

.tag-card:hover,
.tag-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.tag-card--violet {
	--badge: var(--badge-violet-text);
	--badge-bg: var(--badge-violet-bg);
}
.tag-card--blue {
	--badge: var(--badge-blue-text);
	--badge-bg: var(--badge-blue-bg);
}
.tag-card--orange {
	--badge: var(--badge-orange-text);
	--badge-bg: var(--badge-orange-bg);
}
.tag-card--green {
	--badge: var(--badge-green-text);
	--badge-bg: var(--badge-green-bg);
}

.tag-card-tag {
	background-color: var(--badge-bg, var(--badge-violet-bg));
	color: var(--badge, var(--badge-violet-text));
	width: fit-content;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.tag-card-title {
	margin-top: var(--space-3);
}

.tag-card-text {
	font-size: var(--text-sm);
	font-weight: var(--font-light);
	color: var(--color-gray-700);
	line-height: var(--leading-loose);
}

.tag-card-link {
	color: inherit;
	text-decoration: none;
}

.tag-card-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Responsive Design Helpers */
@media (max-width: 1024px) {
	.featured-card,
	.horizontal-card {
		grid-template-columns: 1fr;
	}

	.featured-card-image,
	.horizontal-card-image {
		height: 240px;
	}

	.featured-card-content {
		padding: var(--space-6);
	}
}

@media (max-width: 768px) {
	.article-card-title {
		font-size: var(--text-xl);
	}
	.featured-card-title {
		font-size: var(--text-2xl);
	}
	.content-card {
		padding: var(--space-6);
		display: grid;
		align-items: start;
		min-height: auto;
		grid-template-columns: 40px 1fr;
		gap: 0 var(--space-6);
		grid-template-areas:
			'icon title'
			'icon description';
	}
	.content-card-icon {
		grid-area: icon;
		width: 40px;
		height: 40px;
	}
	.content-card-icon svg {
		width: 40px;
		height: 40px;
	}

	.content-card-title {
		grid-area: title;
	}
	.content-card-description {
		grid-area: description;
	}
}

/* Card Animation */
.card--visible {
	opacity: 1;
	transform: translateY(0px);
}
	/* ============================================
   AUTHOR / PROFILE ELEMENTS
   ============================================ */

.author-profile {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
}

.author-avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--gradient-green-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: var(--font-bold);
    font-size: var(--text-2xl);
    flex-shrink: 0;
}

.author-info h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-black);
    margin-bottom: var(--space-2);
}

.author-bio {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-gray-700);
}
	/* Section Container */
.section-container {
	width: calc(min(100%, var(--section-width, var(--container-width))) - var(--space-8)); /* 32px padding */
	margin: 0 auto;
	padding-block: var(--padding-top, var(--space-16)) var(--padding-bottom, var(--space-16));
}


/* ============================================
   FLUID GRID SYSTEM - 12 COLUMN
   ============================================ */

/* Grid Container */

.row-fluid {
	--grid-gap-desktop: var(--space-10);
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap-desktop, var(--space-6));
}

.row-fluid--start {
    align-items: flex-start;
}

.row-fluid--center {
    align-items: center;
}

.row-fluid--end {
    align-items: flex-end;
}


/* Column Base */
.row-fluid > [class*="span"] {
    flex-shrink: 0;
}

/* 12 Column Spans - Desktop */
.row-fluid > .span1 {
    flex: 0 0 calc((100% / 12 * 1) - (var(--grid-gap-desktop, var(--space-6)) * 11 / 12));
    max-width: calc((100% / 12 * 1) - (var(--grid-gap-desktop, var(--space-6)) * 11 / 12));
}

.row-fluid > .span2 {
    flex: 0 0 calc((100% / 12 * 2) - (var(--grid-gap-desktop, var(--space-6)) * 10 / 12));
    max-width: calc((100% / 12 * 2) - (var(--grid-gap-desktop, var(--space-6)) * 10 / 12));
}

.row-fluid > .span3 {
    flex: 0 0 calc((100% / 12 * 3) - (var(--grid-gap-desktop, var(--space-6)) * 9 / 12));
    max-width: calc((100% / 12 * 3) - (var(--grid-gap-desktop, var(--space-6)) * 9 / 12));
}

.row-fluid > .span4 {
    flex: 0 0 calc((100% / 12 * 4) - (var(--grid-gap-desktop, var(--space-6)) * 8 / 12));
    max-width: calc((100% / 12 * 4) - (var(--grid-gap-desktop, var(--space-6)) * 8 / 12));
}

.row-fluid > .span5 {
    flex: 0 0 calc((100% / 12 * 5) - (var(--grid-gap-desktop, var(--space-6)) * 7 / 12));
    max-width: calc((100% / 12 * 5) - (var(--grid-gap-desktop, var(--space-6)) * 7 / 12));
}

.row-fluid > .span6 {
    flex: 0 0 calc((100% / 12 * 6) - (var(--grid-gap-desktop, var(--space-6)) * 6 / 12));
    max-width: calc((100% / 12 * 6) - (var(--grid-gap-desktop, var(--space-6)) * 6 / 12));
}

.row-fluid > .span7 {
    flex: 0 0 calc((100% / 12 * 7) - (var(--grid-gap-desktop, var(--space-6)) * 5 / 12));
    max-width: calc((100% / 12 * 7) - (var(--grid-gap-desktop, var(--space-6)) * 5 / 12));
}

.row-fluid > .span8 {
    flex: 0 0 calc((100% / 12 * 8) - (var(--grid-gap-desktop, var(--space-6)) * 4 / 12));
    max-width: calc((100% / 12 * 8) - (var(--grid-gap-desktop, var(--space-6)) * 4 / 12));
}

.row-fluid > .span9 {
    flex: 0 0 calc((100% / 12 * 9) - (var(--grid-gap-desktop, var(--space-6)) * 3 / 12));
    max-width: calc((100% / 12 * 9) - (var(--grid-gap-desktop, var(--space-6)) * 3 / 12));
}

.row-fluid > .span10 {
    flex: 0 0 calc((100% / 12 * 10) - (var(--grid-gap-desktop, var(--space-6)) * 2 / 12));
    max-width: calc((100% / 12 * 10) - (var(--grid-gap-desktop, var(--space-6)) * 2 / 12));
}

.row-fluid > .span11 {
    flex: 0 0 calc((100% / 12 * 11) - (var(--grid-gap-desktop, var(--space-6)) * 1 / 12));
    max-width: calc((100% / 12 * 11) - (var(--grid-gap-desktop, var(--space-6)) * 1 / 12));
}

.row-fluid > .span12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Variable-based Ordering */
.row-fluid > [class*="span"] {
    order: 0;
}

@media (max-width: 399px) {
    .row-fluid > [class*="span"] {
        flex: 100%;
        max-width: 100%;
    }
}

/* Mobile Breakpoint */
@media (min-width: 400px) and (max-width: 768px) {
    /* Change gap on mobile */
    .row-fluid {
		--grid-gap-mobile: var(--space-6);
        gap: var(--grid-gap-mobile, var(--space-4));
    }

    /* Mobile: Full width by default */
    .row-fluid > [class*="span"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Mobile Span Overrides (optional) */
    .row-fluid > .span1--sm {
        flex: 0 0 calc((100% / 12 * 1) - (var(--grid-gap-mobile, var(--space-4)) * 11 / 12));
        max-width: calc((100% / 12 * 1) - (var(--grid-gap-mobile, var(--space-4)) * 11 / 12));
    }

    .row-fluid > .span2--sm {
        flex: 0 0 calc((100% / 12 * 2) - (var(--grid-gap-mobile, var(--space-4)) * 10 / 12));
        max-width: calc((100% / 12 * 2) - (var(--grid-gap-mobile, var(--space-4)) * 10 / 12));
    }

    .row-fluid > .span3--sm {
        flex: 0 0 calc((100% / 12 * 3) - (var(--grid-gap-mobile, var(--space-4)) * 9 / 12));
        max-width: calc((100% / 12 * 3) - (var(--grid-gap-mobile, var(--space-4)) * 9 / 12));
    }

    .row-fluid > .span4--sm {
        flex: 0 0 calc((100% / 12 * 4) - (var(--grid-gap-mobile, var(--space-4)) * 8 / 12));
        max-width: calc((100% / 12 * 4) - (var(--grid-gap-mobile, var(--space-4)) * 8 / 12));
    }

    .row-fluid > .span5--sm {
        flex: 0 0 calc((100% / 12 * 5) - (var(--grid-gap-mobile, var(--space-4)) * 7 / 12));
        max-width: calc((100% / 12 * 5) - (var(--grid-gap-mobile, var(--space-4)) * 7 / 12));
    }

    .row-fluid > .span6--sm {
        flex: 0 0 calc((100% / 12 * 6) - (var(--grid-gap-mobile, var(--space-4)) * 6 / 12));
        max-width: calc((100% / 12 * 6) - (var(--grid-gap-mobile, var(--space-4)) * 6 / 12));
    }

    .row-fluid > .span7--sm {
        flex: 0 0 calc((100% / 12 * 7) - (var(--grid-gap-mobile, var(--space-4)) * 5 / 12));
        max-width: calc((100% / 12 * 7) - (var(--grid-gap-mobile, var(--space-4)) * 5 / 12));
    }

    .row-fluid > .span8--sm {
        flex: 0 0 calc((100% / 12 * 8) - (var(--grid-gap-mobile, var(--space-4)) * 4 / 12));
        max-width: calc((100% / 12 * 8) - (var(--grid-gap-mobile, var(--space-4)) * 4 / 12));
    }

    .row-fluid > .span9--sm {
        flex: 0 0 calc((100% / 12 * 9) - (var(--grid-gap-mobile, var(--space-4)) * 3 / 12));
        max-width: calc((100% / 12 * 9) - (var(--grid-gap-mobile, var(--space-4)) * 3 / 12));
    }

    .row-fluid > .span10--sm {
        flex: 0 0 calc((100% / 12 * 10) - (var(--grid-gap-mobile, var(--space-4)) * 2 / 12));
        max-width: calc((100% / 12 * 10) - (var(--grid-gap-mobile, var(--space-4)) * 2 / 12));
    }

    .row-fluid > .span11--sm {
        flex: 0 0 calc((100% / 12 * 11) - (var(--grid-gap-mobile, var(--space-4)) * 1 / 12));
        max-width: calc((100% / 12 * 11) - (var(--grid-gap-mobile, var(--space-4)) * 1 / 12));
    }

    .row-fluid > .span12--sm {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Mobile Ordering */
    .row-fluid > [class*="span"] {
        order: var(--order-on-mobile, var(--order-on-desktop, 0));
    }
}

/* Tablet Breakpoint (Optional) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Change gap on tablet */
    .row-fluid {
		--grid-gap-tablet: var(--space-6);
        gap: var(--grid-gap-tablet, var(--space-5));
    }

    /* Tablet Span Overrides (optional) */
    .row-fluid > .span1--md {
        flex: 0 0 calc((100% / 12 * 1) - (var(--grid-gap-tablet, var(--space-5)) * 11 / 12));
        max-width: calc((100% / 12 * 1) - (var(--grid-gap-tablet, var(--space-5)) * 11 / 12));
    }

    .row-fluid > .span2--md {
        flex: 0 0 calc((100% / 12 * 2) - (var(--grid-gap-tablet, var(--space-5)) * 10 / 12));
        max-width: calc((100% / 12 * 2) - (var(--grid-gap-tablet, var(--space-5)) * 10 / 12));
    }

    .row-fluid > .span3--md {
        flex: 0 0 calc((100% / 12 * 3) - (var(--grid-gap-tablet, var(--space-5)) * 9 / 12));
        max-width: calc((100% / 12 * 3) - (var(--grid-gap-tablet, var(--space-5)) * 9 / 12));
    }

    .row-fluid > .span4--md {
        flex: 0 0 calc((100% / 12 * 4) - (var(--grid-gap-tablet, var(--space-5)) * 8 / 12));
        max-width: calc((100% / 12 * 4) - (var(--grid-gap-tablet, var(--space-5)) * 8 / 12));
    }

    .row-fluid > .span5--md {
        flex: 0 0 calc((100% / 12 * 5) - (var(--grid-gap-tablet, var(--space-5)) * 7 / 12));
        max-width: calc((100% / 12 * 5) - (var(--grid-gap-tablet, var(--space-5)) * 7 / 12));
    }

    .row-fluid > .span6--md {
        flex: 0 0 calc((100% / 12 * 6) - (var(--grid-gap-tablet, var(--space-5)) * 6 / 12));
        max-width: calc((100% / 12 * 6) - (var(--grid-gap-tablet, var(--space-5)) * 6 / 12));
    }

    .row-fluid > .span7--md {
        flex: 0 0 calc((100% / 12 * 7) - (var(--grid-gap-tablet, var(--space-5)) * 5 / 12));
        max-width: calc((100% / 12 * 7) - (var(--grid-gap-tablet, var(--space-5)) * 5 / 12));
    }

    .row-fluid > .span8--md {
        flex: 0 0 calc((100% / 12 * 8) - (var(--grid-gap-tablet, var(--space-5)) * 4 / 12));
        max-width: calc((100% / 12 * 8) - (var(--grid-gap-tablet, var(--space-5)) * 4 / 12));
    }

    .row-fluid > .span9--md {
        flex: 0 0 calc((100% / 12 * 9) - (var(--grid-gap-tablet, var(--space-5)) * 3 / 12));
        max-width: calc((100% / 12 * 9) - (var(--grid-gap-tablet, var(--space-5)) * 3 / 12));
    }

    .row-fluid > .span10--md {
        flex: 0 0 calc((100% / 12 * 10) - (var(--grid-gap-tablet, var(--space-5)) * 2 / 12));
        max-width: calc((100% / 12 * 10) - (var(--grid-gap-tablet, var(--space-5)) * 2 / 12));
    }

    .row-fluid > .span11--md {
        flex: 0 0 calc((100% / 12 * 11) - (var(--grid-gap-tablet, var(--space-5)) * 1 / 12));
        max-width: calc((100% / 12 * 11) - (var(--grid-gap-tablet, var(--space-5)) * 1 / 12));
    }

    .row-fluid > .span12--md {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Tablet Ordering */
    .row-fluid > [class*="span"] {
        order: var(--order-on-ztablet, var(--order-on-mobile, var(--order-desktop, 0)));
    }
}
	.hs-video-wrapper {
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-base);
	overflow: hidden;
}

.iframe_wrapper iframe {
	display: block;
	max-width: 100% !important;
	width: 100% !important;
}

.content-image {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-base);
	overflow: hidden;
}

.content-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: 0;
	padding: 0;
}
}

@layer navigation {
	/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.breadcrumb-item {
    color: var(--color-gray-600);
    text-decoration: none;
}

.breadcrumb-item:hover {
    color: var(--color-teal);
}

.breadcrumb-separator {
    color: var(--color-gray-500);
}

.breadcrumb-current {
    color: var(--color-black);
    font-weight: var(--font-medium);
}
	/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-block: var(--space-4) 0;
    padding-top: var(--space-4);
    border-top : 1px solid var(--color-gray-200);
}

.pagination-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 40px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-base);
    background: var(--color-white);
    color: var(--color-gray-700);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: var(--transition-colors);
}

.pagination-item:where(:hover,:focus-visible) {
    background: var(--color-green-bright);
    color: var(--color-white);
}

.pagination-item.active {
    background: var(--color-green-forest);
    color: var(--color-white);
}

.pagination-item svg,
.pagination-item:where(:hover,:focus-visible,.active) svg {
    fill: currentColor;
}

.pagination-prev,
.pagination-next {
    padding: 0 var(--space-4);
    width: auto;
}
	/* Table of Contents */
.toc {
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    position: sticky;
    top: 100px;
}

.toc-title {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-black);
    margin-bottom: var(--space-4);
}

.toc-list {
    list-style: none;
    display: flex;
    flex-flow: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0 0 0 var(--space-1);
}

.toc-item {
    margin-bottom: 0;
}

.toc-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-gray-700);
    text-decoration: none;
    transition: var(--transition-colors);
    padding: 0;
}

.toc-link:hover {
    color: var(--color-teal);
}

.toc-link.active {
    color: var(--color-green-forest);
    font-weight: var(--font-bold);
}

.toc-link::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-green-bright);
    flex-shrink: 0;
    transition: 
        color 0.2s ease,
}

.toc-link.active::before {
    width: 8px;
    height: 8px;
    background: var(--color-green-forest);
}
}

@layer modules {
	/* ============================================
   HEADER STYLES
   ============================================ */

.site-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-base);
	box-shadow: var(--shadow-sm);
    position: fixed;
    inset: var(--space-4) var(--space-4) auto var(--space-4);
    z-index: 1000;
    isolation: isolate;
    will-change: box-shadow height inset;
    transition: 
        box-shadow 0.2s ease,
        height 0.2s ease,   
        inset 0.2s ease;
	margin-bottom: var(--space-4);
}

.site-header.scrolled {
    box-shadow: var(--shadow-lg);
}

.header-container {
    width: min(100%, 1950px);
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo svg {
	display: block;
    height: 60px;
    width: auto;
    will-change: height width;
    transition: 
        height 0.2s ease;
}
.site-header.scrolled .site-logo svg {
    height: 40px;
}

/* Navigation */
.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border-radius: var(--radius-base);
    transition: 
        var(--transition-colors);
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--badge-green-text);
    background: var(--color-gray-100);
}

/* Dropdown/Submenu Styles */
.nav-links > li {
    position: relative;
    margin-bottom: 0;
}

.nav-sub-links {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    min-width: 200px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
    z-index: 1000;
}

.nav-links > li:hover .nav-sub-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-sub-links li {
    margin: 0;
}

.nav-sub-links .nav-link {
    display: block;
    padding: var(--space-2) var(--space-3);
    width: 100%;
    white-space: nowrap;
}

/* Current Issue Badge */
.nav-current-issue {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    color: var(--badge-green-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    border-radius: var(--radius-base);
    will-change: transform;
    transition: 
        var(--transition-colors),
        var(--transition-transform);
}

.nav-current-issue:hover {
    background: var(--color-gray-100);
    transform: translateY(-1px);
}

.header-search {
    transform: translateY(-1px);
    width: var(--space-6);
    height: var(--space-6);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(154, 205, 50, 0.7);
        opacity: 1;
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(154, 205, 50, 0.4),
            0 0 0 8px rgba(154, 205, 50, 0.2);
        opacity: 0.6;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(154, 205, 50, 0);
        opacity: 1;
    }
}

.nav-current-issue-icon {
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: var(--radius-full);
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.nav-current-issue-icon::after {
    content: '';
    position: absolute;
    z-index: -1; 
    inset: 0;
    background: var(--color-lime-accent);
    border-radius: var(--radius-full);
    animation: pulse 2s ease-out infinite;
}

.nav-current-issue:hover .nav-current-issue-icon::after {
    animation: none;
}

/* Action Buttons */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border-left: 2px solid var(--color-gray-200);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-blue-dark);
}

.mobile-menu-toggle:hover {
    color: var(--color-green-bright);
}

/* Responsive */
@media (max-width: 1024px) {
    .nav-links {
        gap: var(--space-1);
    }

    .nav-link {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }

    .site-header.scrolled .site-logo svg,
    .site-logo svg {
        height: 40px;
    }

    .site-nav {
        position: fixed;
        top: 97px;
        right: calc(var(--space-4) + var(--space-5));
        border-radius: var(--radius-base);
        background: linear-gradient(to bottom, var(--color-white), var(--color-gray-100));
        border-bottom: 1px solid var(--color-gray-200);
        padding: var(--space-4);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-all);
        flex-direction: column;
        align-items: stretch;
        box-shadow: var(--shadow-lg);
        z-index: -1;
    }

    .site-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-links {
        flex-direction: column;
        align-items: start
        gap: var(--space-1);
        width: 100%;
    }

    .nav-link {
        justify-content: flex-start;
        width: 100%;
    }

    /* Mobile submenu styles */
    .nav-sub-links {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 0 none;
        margin-left: var(--space-4);
        padding-block: 0 var(--space-2);
        padding-inline: 0;
        background: transparent;
        display: block;
    }

    .nav-links > li:hover .nav-sub-links {
        display: block;
    }

    .nav-sub-links .nav-link {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }

    .header-actions {
        border-left: 0 none;
        border-top: 2px solid var(--color-gray-200);
        padding-top: var(--space-2);
        justify-content: space-between;
        display: flex;
    }   

    .header-actions .btn {
        padding-inline: 0;
    }

    .btn-subscribe,
    .btn-login {
        text-align: center;
    }
}
	/* ============================================
   FOOTER STYLES
   ============================================ */

.site-footer {
    background: var(--footer-gradient);
    color: var(--color-white);
    padding: var(--space-16) 0 var(--space-8);
	border-radius: var(--radius-base);
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* Footer Main Content */
.footer-main {
    display: grid;
    grid-template-columns: min(100%, 500px) auto;
    gap: var(--space-12) var(--space-24);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer Branding */
.footer-branding {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo svg {
    height: 45px;
    width: auto;
}

.footer-logo-text {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-white);
    font-family: var(--font-header);
}

.footer-tagline {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-light-grey);
    font-weight: var(--font-medium);
}

.footer-powered-by {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-light-grey);
}

/* Footer Navigation Grid */
.footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.footer-company-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav-link {
	display: block;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);	
}

a.footer-nav-link {
	text-decoration: none;
	color: var(--color-light-grey);
	border-left: 0px solid transparent;
	transition: 
		var(--transition-colors),
		border 0.2s ease,
		padding 0.2s ease;
}

a.footer-nav-link:hover {
	border-left: 3px solid var(--color-green-bright);
    color: var(--color-white);
    padding-left: var(--space-2);
}

/* Footer Company Section */
.footer-company {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.footer-company-title {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-green-bright);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-2);
}



/* Footer Bottom */
.footer-bottom {
    padding-top: var(--space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer-copyright {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
}

.footer-social {
    display: flex;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-base);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition-all);
}

.footer-social-link:hover {
    background: var(--color-teal);
    color: var(--color-white);
    transform: translateY(-2px);
}

.footer-social-link svg,
.footer-social-link i {
    width: 18px;
    height: 18px;
}

@media (max-width: 1224px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

/* Responsive */
@media (max-width: 1024px) {

    .footer-nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-cta-title {
        font-size: var(--text-4xl);
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: var(--space-12) 0 var(--space-6);
    }

    .footer-nav-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .footer-branding {
        text-align: center;
        align-items: center;
    }

    .footer-tagline {
        max-width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-cta-section {
        padding: var(--space-12) 0;
    }

    .footer-cta-title {
        font-size: var(--text-3xl);
    }

    .footer-cta-subtitle {
        font-size: var(--text-base);
    }
}
	.hero {
	padding-inline: var(--space-4);
}

.hero--home .hero-text {
	width: min(100%, 830px);
}

.hero--home .hero-title {
	margin-bottom: var(--space-2); 
	background: var(--gradient-color, linear-gradient(var(--color-blue-navy), var(--color-blue-navy)));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
}

@layer theme {}

@layer pages {}

@layer utilities {
	/* Border Radius */
.rounded-sm {
	border-radius: var(--radius-sm);
}
.rounded {
	border-radius: var(--radius-base);
}
.rounded-md {
	border-radius: var(--radius-md);
}
.rounded-lg {
	border-radius: var(--radius-lg);
}
.rounded-xl {
	border-radius: var(--radius-xl);
}
.rounded-full {
	border-radius: var(--radius-full);
}

/* Shadows */
.shadow-sm {
	box-shadow: var(--shadow-sm);
}
.shadow {
	box-shadow: var(--shadow-base);
}
.shadow-md {
	box-shadow: var(--shadow-md);
}
.shadow-lg {
	box-shadow: var(--shadow-lg);
}
.shadow-xl {
	box-shadow: var(--shadow-xl);
}
.shadow-green {
	box-shadow: var(--shadow-green);
}
.shadow-none {
	box-shadow: none;
}

/* Backgrounds Color, Gradient, Image */
.bg {
	background-color: var(--bg-color, var(--color-white));
	background-image: var(--gradient, linear-gradient(transparent, 0 0));
	position: relative;
	border-radius: var(--radius-base);
	/* overflow: clip; */
}

.bg:where(.bg--has-image) .bg--content {
	position: relative;
	z-index: 1;
}

.bg--has-image {
	background-image: var(--bg-desktop);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
}

.bg--has-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--gradient);
	border-radius: var(--radius-base);
	opacity: 0.85;
	backdrop-filter: grayscale(1);
	pointer-events: none;
}

@media (max-width: 768px) {
	.bg--has-image {
		background-image: var(--bg-mobile, var(--bg-desktop));
	}
}

/* Pull Up */
.pull-up {
	margin-block-start: var(--pull-up, 0);
	position: relative;
	z-index: 10;
	isolation: isolate;
}

@media (max-width: 768px) {
	.pull-up {
		margin-block-start: 0 !important;
	}
}

/* Bento Gap */
.bento-gap {
	margin-block-start: var(--space-4);
}

.sr-only {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
}