/* PPF Squad Blocks — Elementor bridge.
   The mockup CSS was written for sections sitting directly in the page flow.
   Elementor wraps every widget in .elementor-element > .elementor-widget-container,
   which adds two block boxes between the container and our <section>. These rules
   make those wrappers transparent so layout, sticky pinning and full-bleed
   backgrounds behave exactly as they do in the mockups. */

.elementor-element[class*="elementor-widget-ppf-"],
.elementor-element[class*="elementor-widget-ppf-"] > .elementor-widget-container {
	display: contents;
}

/* Containers that host a squad section: no max-width, padding or flex gap,
   so the section controls its own full-bleed geometry. */
.e-con.ppf-section-host,
.e-con-inner.ppf-section-host,
.elementor-element.ppf-section-host {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
	gap: 0;
	--content-width: 100%;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

/* Hello Elementor + Elementor Canvas both leave a wrapper around the content;
   make sure nothing clips the pinned horizontal-scroll section. */
.ppf-section-host,
.elementor-widget-ppf-h-scroll {
	overflow: visible;
}

/* Hello Elementor's reset.css styles every link — `a:active, a:hover { color:#336 }`.
   The pricing card is an <a> whose white text comes from `.price-join { color:#fff }`,
   which loses to that on hover, so the card flips to navy. Restore white.
   :focus and :active are included because the same reset rule hits them. */
.page-refined .closing-cta .price-join:hover,
.page-refined .closing-cta .price-join:focus,
.page-refined .closing-cta .price-join:active {
	color: #fff !important;
}

/* Same reset, different victim — `[type=button],[type=submit],button
   { border-radius: 3px }`. Every other button on these pages is an <a>, so only the
   waitlist submit is hit: `.btn-blue` restyles its border and background but never
   its radius, leaving it rounded beside a square email field. */
.page-refined form.offseason-waitlist button {
	border-radius: 0;
}

.page-refined form.offseason-waitlist button[disabled] {
	opacity: 0.65;
	cursor: progress;
}

/* Outcome line the waitlist script appends under the field. The mockup only ever
   showed the success state, which it swaps in for the whole form; this is the
   other half — the message that has to sit alongside a form still on screen. */
.page-refined .offseason-waitlist__note {
	margin: 8px 0 0;
	font-family: "Bornia-Medium", serif;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	color: rgba(255, 255, 255, 0.86);
}

.page-refined .offseason-waitlist__note--error {
	color: #ffb4a8;
}

/* ——— Design tweaks on top of the pinned mockup stylesheets ———
   Kept here rather than edited into pp-mockup-vertical.css so a re-sync of that
   file cannot silently revert them. */

/* Stat pills: drop the 4.75rem floor on the number column so a short number sits
   tight against its label instead of being padded out to a fixed width.

   `:not(.is-counting)` matters. The pill collapses to a single centred column
   while the number counts up, and that rule carries the same specificity as the
   one being overridden here — it only wins on source order. Without the guard
   this override would out-specify it and the count-up would run off-centre.

   `:not(.page-off-season)` likewise: Off-Season is a vertical page too, but its
   pills carry a heading and a sentence rather than a number, and it sets its own
   single-column track. */
:is(.page-tri-squad-vertical, .page-run-squad-vertical).page-refined:not(.page-off-season)
	.stats-section__grid
	.stat-pill--light:not(.is-counting) {
	grid-template-columns: minmax(0px, max-content) minmax(0, 1fr);
}

/* ——— Compatibility: rules the newer refined stylesheet dropped ———
   The re-sync moved pp-mockup-refined.css forward, and the newer revision deleted
   styling for markup the redesigned mockups no longer produce. Three pages here
   still render that markup, so the rules are carried over verbatim rather than
   left to fall away:

     .hero__subpanel*        Run Squad still uses the hero subpanel; the current
                             Run mockup replaced it with .hero__editorial-blocks.
     .podcast-section*       Run Squad still has the podcast section.
     .h-scroll__header       hides a heading decoration on the pinned scroller.
     .value-rows__row order  mobile photo-above-copy ordering. Scoped away from the
                             vertical pages, which order by overlay title instead.

   Delete each of these as the page that needs it is rebuilt against its current
   mockup. Verified against the pre-sync render: without them Run Squad loses its
   entire subpanel treatment. */

.page-refined .hero.hero--run .hero__subpanel-title {
	text-transform: uppercase;
}

.page-refined .h-scroll__header .heading::after {
	display: none;
}

.page-refined .hero.hero--run .hero__subpanel {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: clamp(48px, 7vh, 72px) 24px;
	background: #fff;
	color: var(--pp-ink);
	overflow: hidden;
}

.page-refined.page-run-squad .hero.hero--run .hero__subpanel,
.page-refined.page-run-squad-overlap .hero.hero--run .hero__subpanel,
.page-refined .hero__subpanel--cta {
	background: var(--pp-pattern-grad) !important;
	color: #fff;
}

.page-refined.page-run-squad .hero.hero--run .hero__subpanel::before,
.page-refined.page-run-squad-overlap .hero.hero--run .hero__subpanel::before,
.page-refined .hero__subpanel--cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--pp-pattern-tile);
	background-repeat: repeat;
	opacity: 0.4;
	pointer-events: none;
}

.page-refined .hero.hero--run .hero__subpanel-title {
	max-width: var(--pp-max);
	margin: 0 auto;
	font-family: "Bornia-Black", serif;
	font-size: clamp(26px, 4vw, 40px);
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	position: relative;
	z-index: 1;
}

.page-refined.page-run-squad .hero.hero--run .hero__subpanel-title,
.page-refined.page-run-squad-overlap .hero.hero--run .hero__subpanel-title,
.page-refined .hero__subpanel--cta .hero__subpanel-title {
	color: #fff;
}

.page-refined .hero.hero--run .hero__subpanel-lead {
	max-width: var(--pp-max);
	margin: 16px auto 0;
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.2;
	color: var(--pp-muted);
	position: relative;
	z-index: 1;
}

.page-refined.page-run-squad .hero.hero--run .hero__subpanel-lead,
.page-refined.page-run-squad-overlap .hero.hero--run .hero__subpanel-lead,
.page-refined .hero__subpanel--cta .hero__subpanel-lead {
	color: var(--pp-on-dark-muted);
}

.page-refined.page-strength-squad .hero.hero--run .hero__subpanel-lead {
	max-width: 62ch;
	line-height: 1.45;
}

.page-refined.page-strength-squad .hero.hero--run .hero__subpanel-lead + .hero__subpanel-lead {
	margin-top: 14px;
}

.page-refined.page-strength-squad .hero.hero--run .hero__subpanel-lead + .hero__subpanel-title {
	margin-top: clamp(24px, 4vh, 36px);
}

.page-refined .podcast-section__inner .heading {
	text-transform: capitalize;
	letter-spacing: 0.01em;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.page-refined .hero.hero--run .hero__subpanel {
		padding-top: var(--pp-hero-pad-y);
		padding-bottom: var(--pp-hero-pad-y);
	}

}

@media (max-width: 767px) {
	.page-refined .hero.hero--run .hero__subpanel {
		padding-top: clamp(36px, 6vh, 48px);
		padding-bottom: clamp(36px, 6vh, 48px);
	}

	.page-refined.page-tri-squad-overlap:not(.page-tri-squad-vertical) .value-rows__row .value-rows__media,
	.page-refined.page-tri-squad-overlap:not(.page-tri-squad-vertical) .value-rows__row--reverse .value-rows__media {
		order: -1;
	}

	.page-refined.page-tri-squad-overlap:not(.page-tri-squad-vertical) .value-rows__row .value-rows__copy,
	.page-refined.page-tri-squad-overlap:not(.page-tri-squad-vertical) .value-rows__row--reverse .value-rows__copy {
		order: 1;
	}

}

@media (min-width: 1025px) {
	.page-refined .scroll-scene--podcast .heading,
	.page-refined .podcast-section__inner .heading {
		font-size: var(--pp-fs-title);
		line-height: 1.2;
		text-transform: capitalize;
		letter-spacing: 0.01em;
		font-family: "Bornia-Bold", serif;
	}

	.page-refined .hero.hero--run .hero__subpanel-title {
		font-size: var(--pp-fs-title);
		line-height: 1.2;
	}

	.page-refined .hero.hero--run .hero__subpanel-lead {
		font-size: var(--pp-fs-subtitle);
		line-height: 1.2;
	}

}

/* ——— Editor only ———
   display:contents removes the box Elementor draws selection handles on, which
   makes widgets impossible to click in the editor. Restore a real box there. */
body.elementor-editor-active .elementor-element[class*="elementor-widget-ppf-"] {
	display: block;
	width: 100%;
}

body.elementor-editor-active .elementor-element[class*="elementor-widget-ppf-"] > .elementor-widget-container {
	display: block;
}

/* The pinned section relies on the viewport for its scroll maths, which the
   editor's zoomed preview cannot reproduce. Flatten it so the panels stay
   readable and editable while editing. */
body.elementor-editor-active .h-scroll,
body.elementor-editor-active .tb-scroll,
body.elementor-editor-active .coach-scroll {
	height: auto;
}

body.elementor-editor-active .h-scroll__pin,
body.elementor-editor-active .coach-scroll__pin {
	position: static;
	height: auto;
}

body.elementor-editor-active .h-scroll__track {
	transform: none;
	flex-wrap: wrap;
}

body.elementor-editor-active .h-scroll__viewport {
	overflow: visible;
}

/* Reveal animations start hidden and are switched on by IntersectionObserver,
   which does not fire reliably inside the editor iframe. Show everything. */
body.elementor-editor-active .reveal,
body.elementor-editor-active [data-rs-motion] {
	opacity: 1;
	transform: none;
	visibility: visible;
}

/* The sticky CTA would cover the editor's own controls. */
body.elementor-editor-active .sticky-cta {
	position: static;
	transform: none;
	opacity: 1;
}