/*
 * LUGBN: Public / marketing design system.
 *
 * Mirrors the live waitlist site (golfbusinessnetwork.co.uk) so every
 * marketing page reads as one brand. Internal member pages use
 * lu-internal.css instead — see the design-system-scope note: no Anton
 * anywhere behind the login.
 */

/* The @font-face declarations live in custom.css — it is the only child-theme
 * stylesheet enqueued site-wide, so internal pages get the same webfonts. */

.lu-page {
	/* Brand palette — names and values match the live site's tokens. */
	--lu-color-void: #0F1014;
	--lu-color-deep-forest: #032E1C;
	--lu-color-fairway: #135226;
	--lu-color-electric-turf: #1FCB60;
	--lu-color-birdie-lime: #B5EB79;
	--lu-color-gold: #D6AE5D;
	--lu-color-white: #FFFFFF;
	--lu-color-green-white: #F2F5F0;
	--lu-color-green-tint: #E8EDE5;
	--lu-color-rough: #D4D8D0;
	--lu-color-graphite: #2A2D2F;
	--lu-color-caddy: #6B7570;

	/* Anton is the display face only. Section headings are Radio Canada Big. */
	--lu-font-display: 'Anton', sans-serif;
	--lu-font-heading: 'Radio Canada Big', 'Instrument Sans', sans-serif;
	--lu-font-body: 'Instrument Sans', sans-serif;

	--lu-space-1: 0.25rem;
	--lu-space-2: 0.5rem;
	--lu-space-3: 0.75rem;
	--lu-space-4: 1rem;
	--lu-space-6: 1.5rem;
	--lu-space-8: 2rem;
	--lu-space-12: 3rem;
	--lu-space-16: 4rem;
	--lu-space-24: 6rem;
	--lu-space-32: 8rem;

	--lu-radius-sm: 4px;
	--lu-radius-md: 8px;
	--lu-radius-lg: 12px;
	--lu-radius-full: 9999px;

	--lu-container-md: 768px;
	--lu-container-lg: 1140px;
	--lu-container-max: 1420px;

	--lu-gutter: 40px;

	font-family: var(--lu-font-body);
	color: var(--lu-color-graphite);
}

.lu-page * {
	box-sizing: border-box;
}

.lu-container {
	max-width: var(--lu-container-lg);
	margin: 0 auto;
	padding: 0 var(--lu-space-4);
}

.lu-container--md {
	max-width: var(--lu-container-md);
}

.lu-container--max {
	max-width: var(--lu-container-max);
	padding: 0 var(--lu-space-6);
}

/* Typography */

.lu-eyebrow {
	font-family: var(--lu-font-body) !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
	color: var(--lu-color-gold) !important;
	display: block;
	margin-bottom: var(--lu-space-4);
}

/* Anton, uppercase — the live site's `.display`. Hero titles only. */
.lu-h1 {
	font-family: var(--lu-font-display) !important;
	color: inherit !important;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 0.95;
	font-size: clamp(2.5rem, 8vw, 6.875rem);
	margin: 0 0 var(--lu-space-4);
}

.lu-h2 {
	font-family: var(--lu-font-heading) !important;
	color: inherit !important;
	font-weight: 400;
	line-height: 1;
	font-size: clamp(2rem, 5vw, 3rem);
	margin: 0 0 var(--lu-space-4);
}

.lu-h3 {
	font-family: var(--lu-font-heading) !important;
	color: inherit !important;
	font-weight: 400;
	line-height: 1.1;
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 var(--lu-space-3);
}

.lu-h4 {
	font-family: var(--lu-font-heading) !important;
	color: inherit !important;
	font-weight: 500;
	line-height: 1.1;
	font-size: 1.75rem;
	margin: 0 0 var(--lu-space-3);
}

.lu-h5 {
	font-family: var(--lu-font-heading) !important;
	color: inherit !important;
	font-weight: 500;
	line-height: 1.1;
	font-size: 1.5rem;
	margin: 0 0 var(--lu-space-3);
}

.lu-lede {
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	line-height: 1.5;
	max-width: 46ch;
	margin: 0 0 var(--lu-space-8);
}

.lu-large {
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
}

.lu-small {
	font-size: 0.8125rem;
}

.lu-page p {
	line-height: 1.3;
}

/*
 * Links inherit the section's colour rather than taking a fixed brand
 * green — the same link has to read on white, forest and lime. Only
 * links inside prose are underlined; card titles and standalone CTAs
 * would look shouty with a rule under every one.
 */
.lu-page a:not(.lu-btn) {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.lu-page p a,
.lu-page li a,
.lu-page .lu-blog-card-link,
.lu-page .lu-insights-head a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.lu-page p a:hover,
.lu-page li a:hover,
.lu-page .lu-blog-card-link:hover,
.lu-page .lu-insights-head a:hover,
.lu-page .lu-h2 a:hover,
.lu-page .lu-h3 a:hover,
.lu-page .lu-h5 a:hover {
	color: var(--lu-color-electric-turf);
}

/* Colour utilities */

/*
 * Doubled-up `.lu-page` so a background utility beats `.lu-section`'s own
 * default white — both are single-class otherwise, and the utility loses.
 */
/*
 * !important because the .lu-h* classes carry `color: inherit !important`
 * to hold BuddyBoss's heading colours off — a plain utility can't win.
 */
.lu-page .lu-text-forest { color: var(--lu-color-deep-forest) !important; }
.lu-page .lu-text-caddy { color: var(--lu-color-caddy) !important; }
.lu-page .lu-text-white { color: var(--lu-color-white) !important; }
.lu-page .lu-text-lime { color: var(--lu-color-birdie-lime) !important; }
.lu-page .lu-text-turf { color: var(--lu-color-electric-turf) !important; }
.lu-page .lu-text-rough { color: var(--lu-color-rough) !important; }

.lu-page .lu-bg-void { background-color: var(--lu-color-void); }
.lu-page .lu-bg-forest { background-color: var(--lu-color-deep-forest); }
.lu-page .lu-bg-lime { background-color: var(--lu-color-birdie-lime); }
.lu-page .lu-bg-turf { background-color: var(--lu-color-electric-turf); }
.lu-page .lu-bg-rough { background-color: var(--lu-color-rough); }
.lu-page .lu-bg-offwhite { background-color: var(--lu-color-green-white); }
.lu-page .lu-bg-gold { background-color: var(--lu-color-gold); }
.lu-page .lu-bg-white { background-color: var(--lu-color-white); }

/*
 * Centres a block and anything inside it that would otherwise hang left —
 * measure-limited paragraphs and button rows both need the nudge.
 */
.lu-text-center {
	text-align: center;
}

.lu-text-center .lu-lede,
.lu-text-center .lu-large {
	margin-left: auto;
	margin-right: auto;
}

.lu-text-center .lu-hero-actions,
.lu-text-center .lu-btn-row {
	justify-content: center;
}

/* Tag / pill label */

.lu-tag {
	display: inline-block;
	padding: var(--lu-space-1) var(--lu-space-2);
	border-radius: var(--lu-radius-sm);
	font-family: var(--lu-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lu-color-deep-forest);
}

/*
 * Buttons
 *
 * Two forms share one set of variants through --lu-btn-bg / --lu-btn-fg:
 *
 *   plain  <a class="lu-btn lu-btn--primary">Label</a>
 *   arrow  <a class="lu-btn lu-btn--arrow lu-btn--primary">
 *              <span>Label</span><span class="lu-btn__arrow"></span>
 *          </a>
 *
 * In the arrow form the <a> is only a transparent shell — the first span
 * is the visible pill, and on hover the pill grows to the right while the
 * arrow slides out of it.
 */

.lu-btn {
	--lu-btn-bg: var(--lu-color-birdie-lime, #B5EB79);
	--lu-btn-fg: var(--lu-color-deep-forest, #032E1C);

	display: inline-flex;
	align-items: center;
	font-family: var(--lu-font-body, 'Instrument Sans');
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	padding: 1rem 2rem;
	border: none;
	border-radius: var(--lu-radius-full, 9999px);
	background: var(--lu-btn-bg);
	color: var(--lu-btn-fg);
	text-decoration: none!important;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.lu-btn:hover,
.lu-btn:focus {
	color: var(--lu-btn-fg);
	background: var(--lu-btn-bg);
	filter: brightness(1.06);
}

.lu-btn--primary {
	--lu-btn-bg: var(--lu-color-birdie-lime, #B5EB79);
	--lu-btn-fg: var(--lu-color-deep-forest, #032E1C);
}

.lu-btn--secondary {
	--lu-btn-bg: var(--lu-color-deep-forest, #032E1C);
	--lu-btn-fg: var(--lu-color-birdie-lime, #B5EB79);
}

.lu-btn--gold {
	--lu-btn-bg: var(--lu-color-gold, #D6AE5D);
	--lu-btn-fg: var(--lu-color-void, #0F1014);
}

.lu-btn--turf {
	--lu-btn-bg: var(--lu-color-electric-turf, #1FCB60);
	--lu-btn-fg: var(--lu-color-deep-forest, #032E1C);
}

.lu-btn--white {
	--lu-btn-bg: var(--lu-color-white, #FFFFFF);
	--lu-btn-fg: var(--lu-color-deep-forest, #032E1C);
}


/*
 * Outline takes its colour from whatever it sits on, so it stays legible
 * on the light pricing cards as well as on a dark band.
 */
.lu-btn--outline {
	--lu-btn-bg: transparent;
	--lu-btn-fg: currentColor;
	color: inherit;
	border: 1.5px solid currentColor;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.lu-btn--outline:hover,
.lu-btn--outline:focus {
	background: var(--lu-color-deep-forest, #032E1C);
	color: var(--lu-color-white, #FFFFFF);
	border-color: var(--lu-color-deep-forest, #032E1C);
	filter: none;
}

.lu-btn--light {
	--lu-btn-bg: var(--lu-color-white, #FFFFFF);
	--lu-btn-fg: var(--lu-color-deep-forest, #032E1C);
}

.lu-link {
	font-weight: 500;
	cursor: pointer;
	transition: opacity 0.3s ease-in-out;
}
.lu-link:hover {
	opacity: .7;
	transition: opacity 0.3s ease-in-out;
}

/* Arrow form */

.lu-btn--arrow {
	position: relative;
	padding: 0;
	background: transparent !important;
	border: none;
	transition: margin 0.3s ease-in-out;
}

.lu-btn--arrow > span:not(.lu-btn__arrow) {
	padding: 1rem 2rem;
	border-radius: var(--lu-radius-full, 9999px);
	background: var(--lu-btn-bg);
	color: var(--lu-btn-fg);
	margin: 0;
	transition: all 0.3s ease-in-out;
}

.lu-btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	inset-inline-end: 0;
	border-radius: var(--lu-radius-full, 9999px);
	width: 3rem;
	height: 3rem;
	transition: inset-inline-end 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.lu-btn--primary .lu-btn__arrow {
	background: var(--lu-color-birdie-lime, #B5EB79);
}

.lu-btn--secondary .lu-btn__arrow {
	background: var(--lu-color-deep-forest, #032E1C);
}

.lu-btn--gold  .lu-btn__arrow {
	background: var(--lu-color-gold, #D6AE5D);
}

.lu-btn--white  .lu-btn__arrow {
	background: var(--lu-color-white, #FFFFFF);
}

.lu-btn--turf .lu-btn__arrow {
	background: var(--lu-color-electric-turf, #1FCB60);
}

.lu-btn--primary .lu-btn__arrow::after,
.lu-btn--turf .lu-btn__arrow::after,
.lu-btn--white .lu-btn__arrow::after {
	background: var(--lu-color-deep-forest, #032E1C);
}

.lu-btn--secondary .lu-btn__arrow::after {
	background: var(--lu-color-birdie-lime, #B5EB79);
}

.lu-btn--gold  .lu-btn__arrow::after {
	background: var(--lu-color-graphite, #2A2D2F);
}

.lu-btn__arrow::after {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjI1NzQgMTMuMTY3TC02Ljg3NTY4ZS0wNSAxMy4xNjdMLTYuODU4ODJlLTA1IDEwLjE2NzVIMTguMjU3NEwxMC4yMTEzIDIuMTIxMzJMMTIuMzMyNiAtOS4wMTI0NmUtMDhMMjMuOTk5OCAxMS42NjczTDEyLjMzMjYgMjMuMzM0NUwxMC4yMTEzIDIxLjIxMzJMMTguMjU3NCAxMy4xNjdaIiBmaWxsPSIjMDMyRTFDIi8+Cjwvc3ZnPgo=");
	        mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjI1NzQgMTMuMTY3TC02Ljg3NTY4ZS0wNSAxMy4xNjdMLTYuODU4ODJlLTA1IDEwLjE2NzVIMTguMjU3NEwxMC4yMTEzIDIuMTIxMzJMMTIuMzMyNiAtOS4wMTI0NmUtMDhMMjMuOTk5OCAxMS42NjczTDEyLjMzMjYgMjMuMzM0NUwxMC4yMTEzIDIxLjIxMzJMMTguMjU3NCAxMy4xNjdaIiBmaWxsPSIjMDMyRTFDIi8+Cjwvc3ZnPgo=");
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	background-color: var(--lu-btn-arrow);
	transition: background-color 0.3s ease-in-out;
}

.lu-btn {
	--lu-btn-arrow: var(--lu-color-deep-forest, #032E1C);
}

.lu-hero .lu-btn,
.lu-cta-band .lu-btn,
.lu-page .lu-bg-forest .lu-btn,
.lu-page .lu-bg-void .lu-btn,
.lu-section--dark .lu-btn,
.lu-section--void .lu-btn {
	--lu-btn-arrow: var(--lu-color-birdie-lime, #B5EB79);
}

.lu-page .lu-pricing-card .lu-btn {
	--lu-btn-arrow: var(--lu-color-deep-forest, #032E1C);
}

.lu-page .lu-tier-jump .lu-btn {
	--lu-btn-arrow: var(--lu-color-birdie-lime, #B5EB79);
}

.lu-btn--arrow:hover,
.lu-btn--arrow:focus {
	filter: none;
}

.lu-btn--arrow:hover > span:not(.lu-btn__arrow),
.lu-btn--arrow:focus > span:not(.lu-btn__arrow) {
	padding-inline-end: 5rem;
	margin: 0 -3rem 0 0;
}

.lu-btn--arrow:hover .lu-btn__arrow,
.lu-btn--arrow:focus .lu-btn__arrow {
	transform: rotate(360deg);
}


.lu-btn:not(.lu-btn--arrow) span.lu-btn__arrow {
    display: none!important;
}

@media (max-width: 768px) {
	.lu-btn--arrow:hover,
	.lu-btn--arrow:focus {
		margin-inline-end: 0;
	}

	.lu-btn--arrow:hover > span:not(.lu-btn__arrow),
	.lu-btn--arrow:focus > span:not(.lu-btn__arrow) {
		padding-inline-end: 2rem;
	}

	.lu-btn--arrow:hover .lu-btn__arrow,
	.lu-btn--arrow:focus .lu-btn__arrow {
		inset-inline-end: 0;
	}
}

.lu-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lu-space-4);
	align-items: center;
}

/* 12-column grid */

.lu-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--lu-gutter);
}

.lu-grid--align-end { align-items: flex-end; }
.lu-grid--align-start { align-items: flex-start; }
.lu-grid--gap-sm { gap: var(--lu-space-4); }

.lu-col-3 { grid-column-end: span 3; }
.lu-col-4 { grid-column-end: span 4; }
.lu-col-5 { grid-column-end: span 5; }
.lu-col-6 { grid-column-end: span 6; }
.lu-col-7 { grid-column-end: span 7; }
.lu-col-8 { grid-column-end: span 8; }
.lu-col-9 { grid-column-end: span 9; }
.lu-col-12 { grid-column-end: span 12; }

.lu-col-start-3 { grid-column-start: 3; }
.lu-col-start-4 { grid-column-start: 4; }
.lu-col-start-5 { grid-column-start: 5; }
.lu-col-start-6 { grid-column-start: 6; }
.lu-col-start-7 { grid-column-start: 7; }
.lu-col-start-8 { grid-column-start: 8; }
.lu-col-start-9 { grid-column-start: 9; }

.lu-col-8-centered { grid-column: 3 / span 8; }
.lu-col-10-centered { grid-column: 2 / span 10; }

@media (max-width: 1024px) {
	.lu-grid {
		gap: var(--lu-space-6);
	}

	.lu-col-4,
	.lu-col-5,
	.lu-col-6 {
		grid-column-end: span 6;
	}

	.lu-col-3 {
		grid-column-end: span 6;
	}

	.lu-col-8,
	.lu-col-8-centered,
	.lu-col-10-centered {
		grid-column: 1 / span 12;
	}

	.lu-col-start-3,
	.lu-col-start-7,
	.lu-col-start-9 {
		grid-column-start: auto;
	}
}

@media (max-width: 768px) {
	.lu-grid {
		grid-template-columns: 1fr;
		gap: var(--lu-space-6);
	}

	.lu-col-3,
	.lu-col-4,
	.lu-col-5,
	.lu-col-6,
	.lu-col-7,
	.lu-col-8,
	.lu-col-9,
	.lu-col-10,
	.lu-col-11,
	.lu-col-12,
	.lu-col-8-centered,
	.lu-col-10-centered {
		grid-column: 1 / -1;
	}
}

/* Sections */

.lu-section {
	padding: var(--lu-space-24) 0;
	background: var(--lu-color-white);
}

.lu-section--sm {
	padding: var(--lu-space-12) 0;
}

.lu-section--tint {
	background: var(--lu-color-green-tint);
}

.lu-section--offwhite {
	background: var(--lu-color-green-white);
}

.lu-section--dark {
	background: var(--lu-color-deep-forest);
	color: var(--lu-color-white);
}

.lu-section--void {
	background: var(--lu-color-void);
	color: var(--lu-color-white);
}

.lu-section--dark .lu-eyebrow {
	color: var(--lu-color-birdie-lime);
}

.lu-section-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--lu-space-16);
}

/* Section intro paragraph sitting to the right of a heading. */
.lu-section-intro {
	padding-inline-start: 3rem;
	line-height: 1.3;
	margin: 0;
}

@media (max-width: 768px) {
	.lu-section-intro {
		padding-inline-start: 0;
		margin-top: var(--lu-space-4);
	}
}

body.lu-transparent-header #masthead {
	position: absolute !important;
	background: transparent !important;
	box-shadow: none !important;
	border-bottom: none !important;
}

body.lu-transparent-header #content {
	padding-top: 0 !important;
}

.lu-header--public .container {
	max-width: 1380px;
}
body.lu-transparent-header #content.site-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.lu-transparent-header #content > .container {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.lu-transparent-header #content > .container > .bb-grid {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.lu-transparent-header .lu-page {
	padding-left: 0;
	padding-right: 0;
}

body.lu-transparent-header #masthead .site-title a,
body.lu-transparent-header #masthead .bb-toggle-panel,
body.lu-transparent-header #masthead .more-button,
body.lu-transparent-header #masthead .signin-button {
	color: var(--lu-color-white, #fff) !important;
	border-color: var(--lu-color-white, #fff) !important;
}

body.lu-transparent-header #masthead .signup {
	background: var(--lu-color-birdie-lime, #B5EB79) !important;
    color: var(--lu-color-deep-forest, #032E1C) !important;
    border-color: transparent !important;
    padding: 14px 2rem;
    line-height: 1;
    font-size: 1rem;
    font-weight: 500 !important;
    font-family: var(--lu-font-body, 'Instrument Sans'); 
}

body.lu-transparent-header #masthead .signup:hover {
	background: var(--lu-color-white, #FFFFFF) !important;
	color: var(--lu-color-deep-forest, #032E1C) !important;
}

.lu-header--public .default-header {
	padding-top: 16px;
}

.lu-header--public #primary-navbar {
	justify-content: center;
}

.lu-header--public .primary-menu {
	margin: 0;
	list-style: none;
	vertical-align: middle;
	height: fit-content;
	white-space: nowrap;
	background-color: rgba(0, 0, 0, .4);
	padding: 0 .75rem;
	border-radius: 999px;
	backdrop-filter: blur(5px);
}

.lu-header--public .primary-menu > li {
	height: fit-content;
	line-height: normal;
	padding: 0 !important;
	vertical-align: middle;
}

/* BuddyBoss marks the current page with a border and an ::before underline.
 * The pill carries the active state instead, so both are suppressed. */
.lu-header--public .primary-menu > li.current_page_item > a {
	border: none !important;
}

.lu-header--public .primary-menu > li > a {
	font-weight: 400;
	height: fit-content;
	border-bottom: none !important;
	display: flex;
	padding: .75rem !important;
	opacity: 1 !important;
	font-family: 'Radio Canada Big';
	font-size: 1rem;
	letter-spacing: normal;
}

.lu-header--public .primary-menu a {
	font-size: 1rem;
	color: var(--bb-header-links);
	letter-spacing: -.24px;
	line-height: 1.6;
}

.lu-header--public .primary-menu > li.current-menu-ancestor > a:hover:before,
.lu-header--public .primary-menu > li.current-menu-item > a:hover:before,
.lu-header--public .primary-menu > li.current-menu-parent > a:hover:before,
.lu-header--public .primary-menu > li.current_page_item > a:hover:before,
.lu-header--public .primary-menu > li:hover > a:before {
	content: none !important;
	display: none !important;
	background: transparent;
}

.lu-header--public .primary-menu > li:hover > a {
	color: var(--lu-color-electric-turf, #1FCB60) !important;
}

/* Hero */

.lu-hero {
	position: relative;
	z-index: 2;
	background: var(--lu-color-deep-forest);
	color: var(--lu-color-white);
	padding: 140px 0 var(--lu-space-16);
	text-align: left;
}

.lu-hero > .lu-container {
	position: relative;
	z-index: 2;
}

.lu-hero--full {
	min-height: 95vh;
	display: flex;
	align-items: center;
}

.lu-hero--image {
	background: var(--lu-color-void);
}

.lu-hero--image::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url('../images/lug-hero.avif');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.8;
}

.lu-hero--image::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 50vh;
	z-index: 2;
	opacity: 0.6;
	background: linear-gradient(180deg, rgba(3, 46, 28, 1) 0%, rgba(3, 46, 28, 0) 100%);
}

.lu-hero--photo {
	background: var(--lu-color-void);
	min-height: 60vh;
	display: flex;
	align-items: center;
}

.lu-hero--photo::before,
.lu-hero--photo::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.lu-hero--photo::before {
	background-image: var(--lu-hero-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.lu-hero--photo::after {
	background: rgba(15, 16, 20, 0.62);
}

.lu-hero .lu-h1 {
	color: var(--lu-color-green-white) !important;
}

.lu-hero:not(.lu-hero--full) .lu-h1 {
	font-size: clamp(2.25rem, 5vw, 4.5rem);
}

.lu-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lu-space-2);
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
}

.lu-hero--centered {
	text-align: center;
}

.lu-hero--centered .lu-lede,
.lu-hero--centered .lu-large {
	margin-left: auto;
	margin-right: auto;
}

.lu-hero--centered .lu-hero-actions {
	justify-content: center;
}

.lu-heading-how::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    /* z-index: 1; */
    background-image: url(../images/lug-how.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;}

@media (max-width: 480px) {
	.lu-hero {
		padding: 160px 0 var(--lu-space-16);
	}
}

/* Stat bar */

.lu-stat-bar {
	background: var(--lu-color-birdie-lime);
	color: var(--lu-color-deep-forest);
	padding: var(--lu-space-4) 0;
}

.lu-stat-bar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem var(--lu-space-4);
	font-weight: 600;
	text-align: center;
}

/* Two-column */

.lu-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--lu-space-16);
	align-items: start;
}

@media (max-width: 768px) {
	.lu-two-col {
		grid-template-columns: 1fr;
	}
}

/*
 * Intro boxes — the problem / fix pair. The tag's ::before is the
 * cross or tick bullet that hangs outside the box's left padding.
 */

.lu-introbox {
	border: 1.5px solid var(--lu-color-rough);
	padding: var(--lu-space-4);
	height: 100%;
	border-radius: var(--lu-radius-lg, 12px);
}

.lu-introbox--fix {
	border-color: var(--lu-color-electric-turf);
}

.lu-introbox .lu-h5 {
	color: var(--lu-color-deep-forest);
	font-weight: 500;
	line-height: 1.1;
	margin-bottom: var(--lu-space-4);
}

.lu-introbox p {
	color: var(--lu-color-caddy);
	line-height: 1;
	margin: 0;
}

.lu-introbox p.lu-bg-turf {
	color: var(--lu-color-deep-forest);
}

.lu-introbox .lu-tag {
	position: relative;
	margin: 0 0 var(--lu-space-4) 20px;
}

.lu-introbox .lu-tag::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: -20px;
	width: 20px;
	height: 20px;
}

.lu-introbox--problem .lu-tag::before {
	content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMDkxMzcgMS4wMTAxNUw1LjU1NTg0IDQuNTQ1NjlMOS4wOTEzNyA4LjA4MTIyTDguMDgxMjIgOS4wOTEzN0w0LjU0NTY5IDUuNTU1ODRMMS4wMTAxNSA5LjA5MTM3TDAgOC4wODEyMkwzLjUzNTUzIDQuNTQ1NjlMMCAxLjAxMDE1TDEuMDEwMTUgMEw0LjU0NTY5IDMuNTM1NTNMOC4wODEyMiAwTDkuMDkxMzcgMS4wMTAxNVoiIGZpbGw9IiNENEQ4RDAiLz4KPC9zdmc+Cg==");
	padding: 5.5px;
	background-color: var(--lu-color-deep-forest);
    border-radius: var(--lu-radius-full);
}

.lu-introbox--fix .lu-tag::before {
	content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zLjU3MTQzIDcuNTY0NzZMMCAzLjk5MzMzTDEuMTM2MTkgMi44NTcxNEwzLjU3MTQzIDUuMjkyMzhMOC44NjQ3NiAwTDEwLjAwMzggMS4xMzMzM0wzLjU3MTQzIDcuNTY0NzZaIiBmaWxsPSIjMUZDQjYwIi8+Cjwvc3ZnPgo=");
	padding: 4.5px 5px;
	background-color: var(--lu-color-deep-forest);
    border-radius: var(--lu-radius-full);
}

/* How it works */

.lu-how-row {
	list-style: none;
	margin: var(--lu-space-24) 0 0;
	padding: 0;
}

.lu-how-step {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: nowrap;
	border-inline-end: 1px solid rgba(212, 216, 208, 0.4);
	height: 100%;
}

.lu-how-row > li:last-child .lu-how-step {
	border-inline-end: 0;
}

.lu-how-no {
	display: inline-block;
	width: 32px;
	padding: 7px 8px;
	margin-inline-end: 12px;
	background: var(--lu-color-electric-turf);
	color: var(--lu-color-deep-forest);
	border-radius: var(--lu-radius-full);
	font-family: var(--lu-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.lu-how-step .lu-h4 {
	margin-bottom: var(--lu-space-2);
}

.lu-how-step p {
	max-width: 360px;
	margin-bottom: var(--lu-space-2);
	line-height: 1.3;
}

.lu-how-step p.lu-small {
	margin-bottom: 0;
}

.lu-how-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	margin-top: var(--lu-space-24);
	padding: var(--lu-space-4) var(--lu-space-1);
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--lu-radius-full);
}

.lu-how-bar p {
	margin: 0 0 0 32px;
	font-weight: 600;
}

.lu-how-bar .lu-btn--arrow {
	margin-inline-end: 10px;
}

@media (max-width: 768px) {
	.lu-how-step {
		border-inline-end: 0;
		border-block-end: 1px solid rgba(212, 216, 208, 0.4);
		padding-block-end: var(--lu-space-4);
	}

	.lu-how-step p {
		max-width: none;
	}
}

@media (max-width: 480px) {
	.lu-how-row {
		margin-top: var(--lu-space-12);
	}

	.lu-how-bar {
		flex-direction: column;
		justify-content: center;
		margin-top: var(--lu-space-12);
		padding: 0;
		background: transparent;
	}

	.lu-how-bar p {
		margin: 0 0 var(--lu-space-6);
	}
}

/* Feature boxes */

.lu-features {
	list-style: none;
	margin: var(--lu-space-16) 0 0;
	padding: 0;
	position: relative;
	z-index: 2;
}

.lu-features-box {
	display: flex;
	flex-direction: column;
	gap: var(--lu-space-3);
	height: 100%;
	padding: var(--lu-space-6);
	border: 1.5px solid var(--lu-color-rough);
	border-radius: var(--lu-radius-lg);
}

.lu-features-box .lu-h5 {
	font-weight: 500;
	margin-bottom: var(--lu-space-3);
}

.lu-features-box p {
	color: var(--lu-color-caddy);
	line-height: 1.3;
	margin: 0;
}

@media (max-width: 480px) {
	.lu-features {
		margin-top: var(--lu-space-6);
	}
}

/* Membership tier tables */

.lu-membership {
	position: relative;
	z-index: 2;
}

.lu-membership > .lu-container {
	position: relative;
	z-index: 2;
}

.lu-membership--image::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url('../images/lug-levels.avif');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.5;
}

.lu-tier-table {
	margin-top: var(--lu-space-16);
	display: flex;
	flex-direction: column;
	gap: 0;
}

.lu-tier-table p {
	margin: 0;
	line-height: 1;
}

.lu-tier-table .lu-h4 {
	margin: 0 0 var(--lu-space-2);
	line-height: 1;
}

.lu-tier-table .lu-tag {
	margin: 0 0 var(--lu-space-2);
}

.lu-tier,
.lu-tier-price,
.lu-tier-includes,
.lu-tier-jump {
	padding: var(--lu-space-4);
	background: var(--lu-color-white);
	border-radius: var(--lu-radius-lg);
}

.lu-tier-price-inner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: var(--lu-space-2);
	padding: var(--lu-space-4) var(--lu-space-2);
	border-radius: var(--lu-radius-md);
	background: var(--lu-color-rough);
	color: var(--lu-color-deep-forest);
	font-weight: 500;
}

.lu-tier-price-inner--lime {
	background: var(--lu-color-birdie-lime);
}

.lu-tier-includes {
	flex-grow: 1;
}

.lu-tier-includes ul {
	list-style: none;
	padding: 0;
	margin: var(--lu-space-2) 0 0;
}

.lu-tier-includes li {
	position: relative;
	padding: var(--lu-space-3) 0 var(--lu-space-3) 24px;
	border-block-end: 1px solid var(--lu-color-rough);
	color: var(--lu-color-deep-forest);
	font-weight: 500;
	line-height: 1.2;
}

.lu-tier-includes li::before {
	content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuODU3MTQgMTEuMjM2OUw0IDguMzc5NzJMNC45MDg5NSA3LjQ3MDc3TDYuODU3MTQgOS40MTg5NkwxMS4wOTE4IDUuMTg1MDZMMTIuMDAzIDYuMDkxNzJMNi44NTcxNCAxMS4yMzY5WiIgZmlsbD0iIzFGQ0I2MCIvPgo8L3N2Zz4K");
	position: absolute;
	inset-block-start: 11px;
	inset-inline-start: 0;
	width: 20px;
	height: 20px;
}

.lu-tier-includes li:last-of-type {
	border: none;
	padding-block-end: 0;
}

.lu-tier-jump {
	background: var(--lu-color-deep-forest);
	text-align: center;
}

.lu-tier-jump p {
	color: var(--lu-color-white);
	margin-bottom: var(--lu-space-4);
}

.lu-tier-jump .lu-btn--arrow > span:not(.lu-btn__arrow) {
	padding: 1rem;
}

.lu-tier-jump .lu-btn--arrow:hover > span:not(.lu-btn__arrow) {
	padding: 1rem 4rem 1rem 1rem;
}

@media (max-width: 768px) {
	.lu-tier-table {
		margin-top: var(--lu-space-12);
	}
}

/* Founder quote */
.lu-video .lu-grid {
	align-content: center;
    align-items: center;
}

.video-wrapper {
	padding:24px;
	border-radius: var(--lu-radius-md);
}

.video-wrapper .fluid-width-video-wrapper {
    padding-top: 0 !important;
}
.video-wrapper .fluid-width-video-wrapper {
    padding-top: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.video-wrapper .fluid-width-video-wrapper iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.lu-founder {
	margin: 0;
}

.lu-founder blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

.lu-founder blockquote p {
	display: block;
	margin: 0;
	padding: var(--lu-space-6);
	border-radius: var(--lu-radius-lg);
	background: var(--lu-color-white);
	color: var(--lu-color-deep-forest);
	font-family: var(--lu-font-heading);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.2;
}

.lu-founder figcaption {
	display: block;
	position: relative;
	margin: 0 0 0 86px;
	padding: var(--lu-space-6);
	border-radius: var(--lu-radius-lg);
	background: var(--lu-color-white);
	color: var(--lu-color-deep-forest);
	font-family: var(--lu-font-heading);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1;
}

.lu-founder figcaption span {
	display: block;
	font-size: 1rem;
	margin-top: var(--lu-space-1);
	font-weight: 400;
}

.lu-founder figcaption::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: -86px;
	width: 86px;
	height: 86px;
	border-radius: var(--lu-radius-full);
	background-color: var(--lu-color-deep-forest);
	background-image: url('../images/dan-francis-founder.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media (max-width: 480px) {
	.lu-founder blockquote p {
		font-size: 1.5rem;
	}
}

/* Pricing cards (membership page) */

.lu-pricing-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--lu-space-8);
	align-items: stretch;
}

/* .lu-pricing-grid--three lives in lu-public-content.css (auto-fit). */

@media (max-width: 768px) {
	.lu-pricing-grid {
		grid-template-columns: 1fr;
	}
}

.lu-pricing-card {
	background: var(--lu-color-white);
	border: 2px solid var(--lu-color-green-tint);
	border-radius: var(--lu-radius-lg);
	padding: var(--lu-space-8);
	display: flex;
	flex-direction: column;
	position: relative;
}

.lu-pricing-card--featured {
	border-color: var(--lu-color-electric-turf);
}

.lu-pricing-badge {
	position: absolute;
	top: -0.75rem;
	right: var(--lu-space-8);
	background: var(--lu-color-electric-turf);
	color: var(--lu-color-deep-forest);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.25rem 0.75rem;
	border-radius: var(--lu-radius-sm);
}

.lu-pricing-price {
	font-family: var(--lu-font-heading);
	font-weight: 600;
	font-size: 2.5rem;
	margin: 0.5rem 0 1rem;
}

.lu-pricing-price small {
	font-family: var(--lu-font-body);
	font-size: 1rem;
	font-weight: 400;
}

.lu-pricing-features {
	list-style: none;
	margin: 0 0 var(--lu-space-8);
	padding: 0;
	flex-grow: 1;
}

/* Tick bullets, same mark as the tier tables use. */
.lu-pricing-features li {
	position: relative;
	padding: var(--lu-space-3) 0 var(--lu-space-3) 24px;
	border-bottom: 1px solid var(--lu-color-rough);
	color: var(--lu-color-deep-forest);
	font-weight: 500;
	line-height: 1.2;
}

.lu-pricing-features li::before {
	content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuODU3MTQgMTEuMjM2OUw0IDguMzc5NzJMNC45MDg5NSA3LjQ3MDc3TDYuODU3MTQgOS40MTg5NkwxMS4wOTE4IDUuMTg1MDZMMTIuMDAzIDYuMDkxNzJMNi44NTcxNCAxMS4yMzY5WiIgZmlsbD0iIzFGQ0I2MCIvPgo8L3N2Zz4K");
	position: absolute;
	inset-block-start: 11px;
	inset-inline-start: 0;
	width: 20px;
	height: 20px;
}

.lu-pricing-features li:last-child {
	border-bottom: none;
}

/* Steps (legacy — how-it-works page) */

.lu-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lu-space-8);
}

@media (max-width: 768px) {
	.lu-steps {
		grid-template-columns: 1fr;
	}
}

.lu-step-number {
	font-family: var(--lu-font-display);
	font-size: 2.5rem;
	color: var(--lu-color-electric-turf);
	line-height: 1;
	margin-bottom: 0.5rem;
}

/* Comparison table */

.lu-compare-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--lu-color-white);
}

.lu-compare-table th,
.lu-compare-table td {
	padding: 0.85rem var(--lu-space-4);
	text-align: center;
	border-bottom: 1px solid var(--lu-color-green-tint);
}

.lu-compare-table th:first-child,
.lu-compare-table td:first-child {
	text-align: left;
}

.lu-compare-table thead th {
	font-family: var(--lu-font-heading) !important;
	color: inherit !important;
	font-weight: 600;
}

/*
 * FAQ accordion — <details>/<summary> so it works with JS off. The
 * chevron rotates and the plus/minus flips on open.
 */

.lu-accordion {
	margin-top: var(--lu-space-16);
}

.lu-faq-item {
	border-block-start: 1px solid var(--lu-color-rough);
	border-bottom: none;
	padding: 0;
}

.lu-faq-item:last-of-type {
	border-block-end: 1px solid var(--lu-color-rough);
}

.lu-faq-item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--lu-space-4);
	padding: var(--lu-space-6) 0;
	color: var(--lu-color-deep-forest);
	font-family: var(--lu-font-heading);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	list-style: none;
	transition: color 0.2s ease;
}

.lu-faq-item summary::-webkit-details-marker {
	display: none;
}

.lu-faq-item summary:hover {
	color: var(--lu-color-caddy);
}

.lu-faq-item summary::after {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-image: url('../images/icons/faq-arrow-icon.svg');
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(0deg);
	transition: transform 0.3s ease-in-out;
}

.lu-faq-item[open] summary::after {
	transform: rotate(90deg);
}

.lu-faq-item p {
	max-width: 1056px;
	margin: 0;
	padding-block-end: var(--lu-space-6);
	color: var(--lu-color-caddy);
	font-weight: 500;
}

@media (max-width: 480px) {
	.lu-accordion {
		margin-top: var(--lu-space-8);
	}

	.lu-faq-item summary {
		font-size: 1.125rem;
	}
}

/* Testimonial */

.lu-testimonial {
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}

.lu-testimonial blockquote {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	line-height: 1.4;
	margin: 0 0 var(--lu-space-4);
}

/* Insights cards */

.lu-insights-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--lu-space-4);
	margin-bottom: var(--lu-space-8);
}

.lu-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--lu-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--lu-color-graphite);
	transition: transform 0.2s ease;
}

.lu-post-card:hover {
	color: var(--lu-color-graphite);
}

.lu-post-card-thumb {
	aspect-ratio: 16 / 9;
	background: var(--lu-color-green-tint);
	object-fit: cover;
	width: 100%;
	border-radius: var(--lu-radius-lg);
}

.lu-post-card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--lu-space-6);
	border-radius: var(--lu-radius-lg);
	background: var(--lu-color-white);
}

.lu-post-card-title {
	margin-bottom: var(--lu-space-3);
}

.lu-post-card-body p {
	color: var(--lu-color-caddy);
	line-height: 1.4;
	margin: 0;
}

.lu-insights-head a.lu-link {
	font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-void);
	text-decoration: none;
}

/* CTA band */

.lu-cta-band {
	background: var(--lu-color-deep-forest);
	color: var(--lu-color-white);
	text-align: center;
	padding: var(--lu-space-24) 0;
	position: relative;
}

.lu-cta-band::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url('../images/lug-cta.avif');
	background-size: initial;
	background-position: 40% 100%;
	background-repeat: no-repeat;
	opacity: 0.6;
}

.lu-cta-band > .lu-container {
	position: relative;
	z-index: 2;
}

.lu-cta-band .lu-lede {
	margin-left: auto;
	margin-right: auto;
}

.lu-cta-band .lu-hero-actions {
	justify-content: center;
}

/* A centred button row inside any otherwise left-aligned section. */
.lu-btn-row--center {
	justify-content: center;
}