/**
 * Trial Pages — club trial offer landing page layout.
 *
 * Palette is the main site's (black surfaces, brand blue #0075E7, off-white
 * bands) to match the location pages.
 *
 * Elementor puts a widget's CSS class on the widget WRAPPER, so headings and
 * text hand `font`/`color: inherit` to their inner element.
 *
 * Date Created: 10072026
 */

/* ─── FONTS ────────────────────────────────────────────── */
@font-face {
	font-family: 'Pickler Social';
	src: url('https://thepicklr.com/wp-content/uploads/2025/01/PicklrSocial-Regular-1.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Pickler Social';
	src: url('https://thepicklr.com/wp-content/uploads/2025/01/PicklrSocial-Bold-1.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Pickler Social Condensed';
	src: url('https://thepicklr.com/wp-content/uploads/2025/01/PicklrSocialCondensed-Black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ─── TOKENS ───────────────────────────────────────────── */
.tr-page {
	--tr-blue: #0075E7;
	--tr-blue-dark: #0063c7;
	--tr-blue-soft: rgba(0, 117, 231, 0.1);
	--tr-black: #000000;
	--tr-white: #ffffff;
	--tr-offwhite: #F4F6F8;
	--tr-muted: #667085;
	--tr-body: #344054;
	--tr-border: #e2e8f0;
	--tr-radius: 12px;
	--tr-radius-lg: 20px;

	/* Both spellings of each family genuinely exist on the site. */
	--tr-font: 'Pickler Social', 'Picklr Social', 'Montserrat', 'Inter', sans-serif;
	--tr-font-condensed: 'Picklr Social Condensed', 'Pickler Social Condensed', 'Pickler Social', 'Montserrat', sans-serif;

	font-family: var(--tr-font);
	color: var(--tr-black);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: clip;
	/* Sections butt together — no container gap between bands. */
	gap: 0 !important;
}

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

.tr-page img { max-width: 100%; height: auto; }

.tr-page .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	line-height: inherit;
	margin: 0;
}

.tr-page .elementor-widget-text-editor,
.tr-page .elementor-widget-text-editor p { font-family: var(--tr-font); }

.tr-page .elementor-widget-text-editor .elementor-widget-container > *:last-child { margin-bottom: 0; }

/* ─── SHARED TYPE ──────────────────────────────────────── */
.tr-page .tr-eyebrow {
	font-family: var(--tr-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--tr-blue);
	margin: 0 0 16px;
}

.tr-page .tr-h1 {
	font-family: var(--tr-font-condensed);
	font-weight: 900;
	font-size: clamp(54px, 8vw, 110px);
	line-height: 0.9;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--tr-white);
	margin: 0 0 20px;
	overflow-wrap: break-word;
}

.tr-page .tr-h2 {
	font-family: var(--tr-font-condensed);
	font-weight: 900;
	font-size: clamp(36px, 5vw, 64px);
	line-height: 0.98;
	text-transform: uppercase;
	color: var(--tr-black);
	margin: 0 0 20px;
}

.tr-page .tr-body {
	font-size: clamp(16px, 1.8vw, 19px);
	line-height: 1.65;
	color: var(--tr-body);
}

.tr-page .tr-body a,
.tr-page .tr-steps a,
.tr-page .tr-info a,
.tr-page .tr-fine__text a {
	color: var(--tr-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tr-head { text-align: center; }
.tr-head .tr-body { max-width: 60ch; margin: 0 auto; }

/* ─── BUTTONS ──────────────────────────────────────────── */
.tr-page .tr-cta .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 19px 44px;
	font-family: var(--tr-font);
	font-size: clamp(15px, 1.6vw, 17px);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.15;
	text-transform: uppercase;
	text-align: center;
	color: var(--tr-white);
	background-color: var(--tr-blue);
	border: 0;
	border-radius: 100px;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tr-page .tr-cta .elementor-button:hover,
.tr-page .tr-cta .elementor-button:focus {
	color: var(--tr-white);
	background-color: var(--tr-blue-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 117, 231, 0.34);
}

.tr-page .tr-cta .elementor-button:focus-visible {
	outline: 3px solid var(--tr-white);
	outline-offset: 3px;
}

/* White button on the blue closing band. */
.tr-page .tr-cta--light .elementor-button {
	color: var(--tr-black);
	background-color: var(--tr-white);
}

.tr-page .tr-cta--light .elementor-button:hover,
.tr-page .tr-cta--light .elementor-button:focus {
	color: var(--tr-white);
	background-color: var(--tr-black);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* ─── HERO ─────────────────────────────────────────────── */
.tr-hero {
	position: relative;
	color: var(--tr-white);
	background-color: var(--tr-black);
	overflow: hidden;
	isolation: isolate;
}

/* Dark on the left for the copy, opening up to the player on the right. */
.tr-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.78) 42%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.1) 100%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 40%);
}

.tr-hero > * { position: relative; z-index: 1; }

.tr-hero__copy { max-width: 620px; }

/* $49 with "inc. GST" beside it. */
.tr-page .tr-price p {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0 0 14px;
	color: var(--tr-white);
}

.tr-page .tr-price strong {
	font-family: var(--tr-font-condensed);
	font-weight: 900;
	font-size: clamp(56px, 6.5vw, 84px);
	line-height: 0.9;
	color: var(--tr-blue);
}

.tr-page .tr-price span {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.tr-page .tr-hero__lede {
	font-size: clamp(17px, 1.9vw, 20px);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
	max-width: 46ch;
	margin: 0 0 20px;
}

/* "Starts on a Monday" pill. */
.tr-page .tr-badge { margin: 0 0 28px; }

.tr-page .tr-badge .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tr-white);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.08);
}

.tr-page .tr-badge .elementor-heading-title::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tr-blue);
	flex: none;
}

/* Key facts — visible without scrolling. */
.tr-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

.tr-facts li {
	padding: 16px 18px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--tr-radius);
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(6px);
}

.tr-facts span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tr-blue);
	margin: 0 0 6px;
}

.tr-facts strong {
	display: block;
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 1.3;
	color: var(--tr-white);
}

/* ─── WHAT'S INCLUDED ──────────────────────────────────── */
.tr-cards {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px !important;
	margin: 40px 0 0;
}

.tr-card {
	padding: 32px 28px !important;
	background: var(--tr-offwhite);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius-lg);
	gap: 0 !important;
}

.tr-page .tr-card__num {
	display: block;
	font-family: var(--tr-font-condensed);
	font-weight: 900;
	font-size: 15px;
	letter-spacing: 0.1em;
	color: var(--tr-blue);
	margin: 0 0 18px;
}

.tr-page .tr-card__title {
	font-family: var(--tr-font-condensed);
	font-weight: 900;
	font-size: clamp(26px, 2.6vw, 32px);
	line-height: 1;
	text-transform: uppercase;
	color: var(--tr-black);
	margin: 0 0 12px;
}

.tr-page .tr-card__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--tr-body);
}

.tr-page .tr-note {
	margin: 28px 0 0;
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
	color: var(--tr-muted);
}

.tr-page .tr-note strong { color: var(--tr-black); }

/* ─── SPLIT (how it works / first visit) ───────────────── */
.tr-split > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 64px;
}

.tr-page .tr-photo img {
	display: block;
	width: 100%;
	border-radius: var(--tr-radius-lg);
	object-fit: cover;
}

.tr-how { background: var(--tr-offwhite); }

.tr-page .tr-how .tr-photo img { aspect-ratio: 4 / 5; object-position: 30% center; }

/* Numbered steps — an ordinary <ol> so the copy stays editable. */
.tr-page .tr-steps ol {
	counter-reset: tr-step;
	margin: 8px 0 32px;
	padding: 0;
	list-style: none;
}

.tr-page .tr-steps li {
	counter-increment: tr-step;
	position: relative;
	padding: 18px 0 18px 64px;
	border-top: 1px solid var(--tr-border);
	font-size: clamp(16px, 1.7vw, 18px);
	line-height: 1.5;
	color: var(--tr-body);
}

.tr-page .tr-steps li:first-child { border-top: 0; }

.tr-page .tr-steps li::before {
	content: counter(tr-step);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-family: var(--tr-font-condensed);
	font-weight: 900;
	font-size: 22px;
	line-height: 1;
	color: var(--tr-white);
	background: var(--tr-blue);
	border-radius: 50%;
}

.tr-page .tr-steps strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tr-black);
	margin: 0 0 2px;
}

/* ─── CONVERSION BANNER ────────────────────────────────── */
.tr-offer {
	background: var(--tr-blue);
	color: var(--tr-white);
	text-align: center;
}

.tr-page .tr-offer .elementor-widget { text-align: center; }

.tr-page .tr-offer__text p {
	margin: 0;
	font-size: clamp(16px, 2vw, 20px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--tr-white);
}

.tr-page .tr-offer__text strong {
	font-family: var(--tr-font-condensed);
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-right: 8px;
}

/* ─── FIRST VISIT ──────────────────────────────────────── */
.tr-page .tr-info ul {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.tr-page .tr-info li {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid var(--tr-border);
	font-size: clamp(16px, 1.7vw, 18px);
	line-height: 1.5;
	color: var(--tr-body);
}

.tr-page .tr-info li:first-child { border-top: 0; }

.tr-page .tr-info li > strong {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 2.1;
	text-transform: uppercase;
	color: var(--tr-black);
}

.tr-visit__media {
	gap: 16px !important;
}

.tr-page .tr-visit .tr-photo img { aspect-ratio: 16 / 10; }

.tr-page .tr-map iframe {
	display: block;
	width: 100%;
	height: 300px;
	border: 0;
	border-radius: var(--tr-radius-lg);
}

/* ─── FAQ ──────────────────────────────────────────────── */
.tr-faq { max-width: 820px; margin: 32px auto 0; width: 100%; }

.tr-faq details { border-bottom: 1px solid var(--tr-border); }
.tr-faq details:first-child { border-top: 1px solid var(--tr-border); }

.tr-faq summary {
	position: relative;
	display: block;
	padding: 22px 46px 22px 0;
	font-size: clamp(16px, 1.9vw, 19px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--tr-black);
	cursor: pointer;
	list-style: none;
}

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

.tr-faq summary:focus-visible {
	outline: 3px solid var(--tr-blue);
	outline-offset: 2px;
}

.tr-faq summary::before,
.tr-faq summary::after {
	content: '';
	position: absolute;
	right: 8px;
	top: 50%;
	background: var(--tr-blue);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.tr-faq summary::before { width: 16px; height: 2.5px; margin-top: -1.25px; }
.tr-faq summary::after { width: 2.5px; height: 16px; margin-top: -8px; right: 14.75px; }

.tr-faq details[open] summary::after { transform: rotate(90deg); opacity: 0; }

.tr-faq details > *:not(summary) {
	margin: 0 0 22px;
	padding-right: 46px;
	font-size: clamp(15px, 1.7vw, 17px);
	line-height: 1.65;
	color: var(--tr-body);
}

/* ─── CLOSING CTA ──────────────────────────────────────── */
.tr-closing {
	background: var(--tr-black);
	color: var(--tr-white);
	text-align: center;
}

.tr-page .tr-closing .elementor-widget { text-align: center; }

.tr-page .tr-closing .tr-h2 {
	color: var(--tr-white);
	font-size: clamp(44px, 7vw, 88px);
}

.tr-page .tr-closing .tr-body {
	color: rgba(255, 255, 255, 0.85);
	max-width: 52ch;
	margin: 0 auto 30px;
}

/* ─── FINE PRINT ───────────────────────────────────────── */
.tr-fine { background: var(--tr-offwhite); }

.tr-page .tr-fine__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tr-black);
	margin: 0 0 12px;
}

.tr-page .tr-fine__text,
.tr-page .tr-fine__text p,
.tr-page .tr-fine__text li {
	font-size: 14px;
	line-height: 1.65;
	color: var(--tr-muted);
}

.tr-page .tr-fine__text ul { margin: 0 0 14px; padding-left: 18px; }

/* ─── MOBILE STICKY BAR ────────────────────────────────── */
/* Desktop doesn't need it: the CTA repeats down the page. */
.tr-sticky { display: none !important; }

/* ─── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1024px) {
	.tr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tr-split > .e-con-inner { gap: 40px; }
	.tr-cards { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 767px) {
	.tr-hero::before {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.82) 45%, rgba(0, 0, 0, 0.94) 100%);
	}

	.tr-facts { gap: 10px; margin-top: 32px; }
	.tr-facts li { padding: 12px 14px; }

	.tr-split > .e-con-inner { grid-template-columns: 1fr; gap: 32px; }

	/* Copy first, then the photo, in How it works. */
	.tr-how .tr-photo { order: 2; }
	.tr-page .tr-how .tr-photo img { aspect-ratio: 4 / 3; }

	.tr-card { padding: 26px 22px !important; }

	.tr-page .tr-steps li { padding-left: 58px; }
	.tr-page .tr-info li { grid-template-columns: 1fr; gap: 2px; }
	.tr-page .tr-info li > strong { line-height: 1.6; }
	.tr-page .tr-map iframe { height: 240px; }

	/* Full-width, easy-to-tap CTAs. */
	.tr-page .tr-cta .elementor-button {
		display: flex;
		width: 100%;
		padding: 18px 22px;
	}

	.tr-faq summary { padding-right: 40px; }
	.tr-faq details > *:not(summary) { padding-right: 0; }

	.tr-sticky {
		display: block !important;
		position: fixed !important;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
		background: rgba(0, 0, 0, 0.92);
		backdrop-filter: blur(8px);
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		transform: translateY(110%);
		transition: transform 0.25s ease;
	}

	.tr-sticky.is-visible { transform: translateY(0); }

	.tr-page .tr-sticky .elementor-button { padding: 16px 22px; }

	/* Keep the footer's last line clear of the bar. */
	body.tr-sticky-on { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
	.tr-page *,
	.tr-page *::before,
	.tr-page *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}