/* Site navigation — extracted from index.html so /support renders the identical bar. */
:root {
--primary-color: #28a745;
--secondary-color: #20c997;
--accent-color: #17a2b8;
--dark-color: #1a1a2e;
--light-gray: #f8f9fa;
--gradient-primary: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}
		/* Navigation Styles
		   ────────────────────────────────────────────────────────────────
		   The bar is laid out with flex. It used to rely on Bootstrap's
		   float-based navbar, but this page loads a Tailwind build instead —
		   so `.navbar-brand` stayed `display:inline`, stretched to the full
		   1233px of the container, and its 60px line-height box sat directly
		   on top of the menu. That is why the logo overlapped "HOME".
		   Sizing the brand to its content fixes it at the root. */
		.navbar-fixed-top {
			background: rgba(255,255,255,0.95) !important;
			backdrop-filter: blur(10px);
			border-bottom: 1px solid rgba(0,0,0,0.1);
			transition: all 0.3s ease;
			/* Without an explicit position, z-index does nothing (it only
			   applies to positioned elements) — the bar painted in normal
			   document flow, so .hero-section, coming right after it in the
			   DOM, rendered on top of the mobile dropdown every time it
			   opened. `relative` is enough to make the z-index below actually
			   take effect without changing how the bar scrolls. */
			position: relative;
			z-index: 1000;
			min-height: 72px;
		}

		#main-nav > .container {
			display: flex;
			align-items: center;
			gap: 24px;
			min-height: 72px;
		}

		.navbar-header {
			display: flex;
			align-items: center;
			flex: 0 0 auto;
		}

		/* Below the desktop breakpoint #navigation collapses away entirely, so
		   .navbar-header (logo + hamburger) becomes the ONLY content in the
		   bar. Letting it fill the row and pinning the toggle to the far end
		   is what puts the hamburger at the right edge instead of stranding it
		   immediately next to the logo. */
		@media (max-width: 991px) {
			.navbar-header {
				flex: 1 1 auto;
				justify-content: space-between;
			}
		}

		.navbar-brand {
			display: inline-flex !important;
			align-items: center;
			width: auto;
			height: auto;
			line-height: 1;
			padding: 0 !important;
			margin: 0;
			flex: 0 0 auto;
		}

		/* One source of truth for the logo size — the inline height="40" on the
		   <img> was fighting a 35px rule here and winning at a size that made
		   the bar taller than its own min-height. */
		.navbar-brand img {
			height: 30px;
			width: auto;
			display: block;
		}

		/* Logo left / links centred / actions right — a 3-zone bar. #navigation
		   fills the space after the logo; centring #main-menu WITHIN that
		   remaining width (rather than the full page) is what every "centred
		   nav" pattern actually does — a true page-centre would drift left or
		   right depending on how wide the logo happens to be. .navbar-actions
		   takes an auto start-margin, which consumes the row's free space and
		   pins it to the far end regardless of how many links are in the menu. */
		#navigation {
			flex: 1 1 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 24px;
		}

		#main-menu { flex: 0 0 auto; }

		.navbar-actions {
			display: flex;
			align-items: center;
			gap: 14px;
			margin-inline-start: auto;
			flex: 0 0 auto;
		}

		.nav-login-link {
			padding: 8px 4px;
			font-weight: 600;
			color: #333;
			border-radius: 8px;
			transition: color 0.2s ease;
		}
		.nav-login-link:hover,
		.nav-login-link:focus {
			color: var(--primary-color);
		}
		.nav-login-link:focus-visible {
			outline: 2px solid var(--primary-color);
			outline-offset: 3px;
		}

		/* Below the desktop breakpoint the bar collapses to the hamburger. The
		   menu was only being hidden with `visibility: collapse`, which still
		   reserves layout — the links kept their boxes out to x=874 on a 768px
		   screen, so every tablet got a stray horizontal scrollbar and ~23px of
		   dead space to swipe into. display:none removes them from layout
		   entirely. `:not(.in)` keeps the opened state working. */
		@media (max-width: 991px) {
			#main-nav #navigation.collapse:not(.in) {
				display: none !important;
			}

			/* Open state. The hamburger markup is Bootstrap's
			   (data-toggle="collapse"), but Bootstrap's JS is not on this page —
			   only jQuery, slicknav, wow and a few plugins — and slicknav was
			   deliberately disabled further down ("Hide SlickNav completely").
			   So nothing was listening to the button and the menu could never
			   open on a phone. A ~15-line handler at the end of <body> now
			   toggles `.in`; this styles what that reveals.

			   `visibility: visible` is load-bearing, not defensive: this page
			   compiles Tailwind into app.css, and Tailwind ships a utility
			   named `.collapse { visibility: collapse }` for table rows. The
			   markup here is Bootstrap's, using the same class name for an
			   unrelated purpose (`class="navbar-collapse collapse"`), so
			   Tailwind's rule was silently applying `visibility: collapse` to
			   the nav menu at all times — including with `.in` present and
			   `display: block` correctly winning. The menu occupied layout
			   and never rendered a single pixel of it. */
			#main-nav #navigation.collapse.in {
				display: block !important;
				visibility: visible !important;
				position: absolute;
				top: 100%;
				inset-inline: 0;
				background: rgba(255,255,255,0.98);
				backdrop-filter: blur(10px);
				border-bottom: 1px solid rgba(0,0,0,0.1);
				box-shadow: 0 12px 24px rgba(0,0,0,0.08);
				padding: 8px 16px 16px;
				max-height: calc(100vh - 72px);
				overflow-y: auto;
			}

			#main-nav #navigation.in #main-menu {
				flex-direction: column;
				align-items: stretch;
				gap: 2px;
			}

			/* custom.css puts 30px block padding on every .navbar-nav li, which
			   is right for a horizontal bar and enormous in a stacked list. */
			#main-nav #navigation.in #main-menu > li {
				padding: 0;
				margin: 0;
			}

			#main-nav #navigation.in #main-menu > li > a {
				display: flex;
				width: 100%;
				padding: 13px 14px !important;
			}

			/* Login + Support live in .navbar-actions, pinned right on desktop
			   via the auto start-margin. Inside the mobile panel that margin
			   would just shove them to one side of a narrow column, so it's
			   cancelled and they're stacked full-width under a divider instead —
			   the same pattern as the links above them. */
			#main-nav #navigation.in .navbar-actions {
				flex-direction: column;
				align-items: stretch;
				gap: 8px;
				margin-inline-start: 0;
				margin-top: 12px;
				padding-top: 12px;
				border-top: 1px solid rgba(0,0,0,0.08);
			}

			#main-nav #navigation.in .nav-login-link {
				text-align: center;
				padding: 12px 14px;
				border: 1.5px solid rgba(0,0,0,0.12);
				border-radius: 10px;
			}

			#main-nav #navigation.in .navbar-actions .btn-login {
				margin-left: 0 !important;
				text-align: center;
			}
		}

		#main-menu {
			display: flex;
			align-items: center;
			gap: 4px;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		#main-menu > li { float: none; }

		#main-menu > li > a {
			display: inline-flex;
			align-items: center;
			padding: 10px 14px;
			border-radius: 8px;
			line-height: 1.2;
			transition: background-color 0.2s ease, color 0.2s ease;
		}

		/* Keyboard users need to see where they are; the bar had no focus
		   treatment at all. */
		
		.navbar-default .navbar-nav > li > a {
			color: #333 !important;
			font-weight: 600;
			transition: all 0.3s ease;
		}
		
		.navbar-default .navbar-nav > li > a:hover,
		.navbar-default .navbar-nav > li > a:focus {
			color: var(--primary-color) !important;
			background-color: transparent !important;
		}
		
		.navbar-default .navbar-nav > .active > a,
		.navbar-default .navbar-nav > .active > a:hover,
		.navbar-default .navbar-nav > .active > a:focus {
			color: var(--primary-color) !important;
			background-color: transparent !important;
		}
		
		.btn-login {
			background: var(--gradient-primary) !important;
			color: white !important;
			padding: 8px 20px !important;
			border-radius: 25px !important;
			font-weight: 600 !important;
			margin-left: 10px !important;
		}
		
		.btn-login:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
		}
		
		/* NOTE: a `.navbar-brand { left:50%; transform:translateX(-50%) }` rule
		   used to live here. It was a centring hack that only works with the
		   `position:absolute` directly above it — and that line had been
		   commented out. `left` is inert on a static element, but the transform
		   is not: it dragged the logo 129px left of its own box, off the edge
		   of the page, and left the gap the menu then rendered into. That is
		   what made the logo sit on top of "HOME". The bar is laid out with
		   flex now (see the Navigation Styles block above), so nothing needs
		   to be nudged. Do not reintroduce it. */

		.navbar-nav > li > a {
			padding-top: 15px !important;
			padding-bottom: 15px !important;
		}

		/* Medium desktop nav compaction */
		@media (min-width: 992px) and (max-width: 1200px) {
			#main-nav .navbar-nav > li > a {
				padding: 15px 10px !important;
				font-size: 13px;
			}

			#main-nav .navbar-nav > li > a.btn-login {
				padding: 8px 14px !important;
				margin-left: 6px !important;
				white-space: nowrap;
			}
		}
		
		/* Ensure hamburger is visible and styled */
		.navbar-toggle {
			border: none !important;
			background: transparent !important;
			margin-top: 13px;
			margin-bottom: 13px;
			position: relative;
			z-index: 1001;
			padding: 9px 10px;
			float: right;
			display: block !important;
		}
		
		.navbar-toggle .icon-bar {
			background-color: #333 !important;
			height: 3px !important;
			width: 25px !important;
			border-radius: 2px;
			display: block;
			margin: 4px 0;
		}
		
		.navbar-toggle:hover .icon-bar,
		.navbar-toggle:focus .icon-bar,
		.navbar-toggle:active .icon-bar {
			background-color: var(--primary-color) !important;
		}
		
		.navbar-toggle.collapsed .icon-bar {
			background-color: #333 !important;
		}
		
		/* Hide SlickNav completely - use Bootstrap collapse */
		#responsive-menu {
			display: none !important;
		}
		
		/* An unconditional `#main-nav .navbar-collapse { display: block
		   !important; }` used to live here, meant to fight custom.css hiding
		   the menu. It's gone: being unconditional AND !important, it beat
		   this file's own `#navigation { display: flex }` at every desktop
		   width with nothing in this stylesheet able to out-rank it short of
		   matching !important — which is what silently collapsed the 3-zone
		   logo/links/actions layout into a stacked block layout above 991px.
		   #navigation's display is now owned entirely by the rules around
		   line 191 (flex, always) and the max-width:991px collapse block
		   below (none when closed, block when `.in`) — nothing else should
		   set `display` on it again. */
		
		/* Desktop styles - navigation visible.
		   NOTE: this was `min-width: 769px`, which hid the hamburger a full
		   223px before #navigation's own collapse breakpoint (991px) let go —
		   a dead zone from 769-991px with the menu collapsed AND no button to
		   open it, so tablets had no way to navigate the site at all. Moved to
		   match the 992px breakpoint used everywhere else in this nav. */
		@media (min-width: 992px) {
			.navbar-toggle {
				display: none !important;
			}

			/* `display: block !important` used to live here too — same bug as
			   the rule removed above, just re-introduced by this block's own
			   breakpoint fix. It doesn't need to force a display value at all:
			   above 991px nothing hides #navigation in the first place, so it
			   falls through to the base `display: flex` rule on its own.
			   visibility/height stay, defensively, in case something upstream
			   ever sets them again. */
			#main-nav .navbar-collapse {
				visibility: visible !important;
				height: auto !important;
			}
		}

		/* The "Tablet fixes (769px - 991px)" block that used to live here is
		   gone. It was written for the old assumption that #navigation was
		   desktop-visible in that range; now that range is mobile-collapsed
		   (see the 991px breakpoint above), and its `padding-left: 15px
		   !important` on .navbar-brand was winning over this file's own
		   `padding: 0 !important` — same specificity, declared later — which
		   nudged the logo 15px right only between 769 and 991px. Positioning
		   is fully owned by the flex rules above now; nothing else is needed. */

		/* Mobile styles */
		@media (max-width: 768px) {
			.navbar-brand {
				position: static;
				transform: none;
				float: left;
			}
			
			.navbar-header {
				width: 100%;
				position: relative;
				padding-right: 52px;
			}
			
			/* Ensure Bootstrap toggle is visible and working */
			.navbar-toggle {
				display: block !important;
				float: none !important;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				margin: 0 !important;
				visibility: visible !important;
				opacity: 1 !important;
				z-index: 1100;
			}
			
			/* The open/close mechanics for #navigation (max-height/.open toggle)
			   used to live here, but they fought the working `.in`-based
			   collapse defined above (@media max-width:991px, around line 238) —
			   same selector weight, declared later, so THIS block always won
			   and #navigation stayed pinned at max-height:0 regardless of the
			   `.in` class our click handler actually toggles. The hamburger
			   looked clickable but nothing ever opened. That mechanism now
			   lives solely in the 991px block; this one only keeps the
			   layout tweaks (brand, toggle position, link spacing) below. */

			.navbar-nav {
				margin: 0;
				padding: 0;
			}
			
			.navbar-nav > li {
				float: none !important;
				display: block;
				margin: 0;
				padding: 0;
			}
			
			.navbar-nav > li > a {
				padding: 8px 0 !important;
				text-align: left;
				display: block;
				font-size: 14px;
			}
			
			.navbar-nav > li:first-child > a {
				padding-top: 5px !important;
			}
			
			.navbar-nav > li:last-child > a {
				padding-bottom: 5px !important;
			}

			/* Mobile nav CTA button styling */
			.navbar-nav > li > a.btn-login {
				display: inline-block;
				width: auto;
				margin: 10px 0 6px 0 !important;
				padding: 8px 14px !important;
				text-align: center;
				border-radius: 20px !important;
				font-size: 14px;
				line-height: 1.3;
			}

			.navbar-nav > li > a.btn-login:hover,
			.navbar-nav > li > a.btn-login:focus {
				color: #fff !important;
				transform: none;
			}
		}

		@media (max-width: 480px) {
			.navbar-brand {
				max-width: calc(100% - 60px);
				overflow: hidden;
			}

			.navbar-brand img {
				height: 26px !important;
				width: auto;
			}
		}