/* Game-style landing: hero, player-select carousel, loading takeover, play view.
   Brand: Montserrat, Arccos green #56c271. Light page; the phone (the app) stays dark. */

:root {
	--g-bg: #f4f5f3;
	--g-surface: #ffffff;
	--g-surface-2: #eceeeb;
	--g-line: rgba(0, 0, 0, 0.1);
	--g-text: #151816;
	--g-muted: #5f6763;
	--g-green: #56c271;
	--g-green-deep: #2f8f4a;
	--tier-gold: #d4a43c;
	--tier-silver: #9aa9b2;
	--tier-bronze: #bf7f4f;
	--tier-icon: #56c271;
	--sg-good: #3fbf6a;
	--sg-mid: #f2c94c;
	--sg-bad: #e5484d;
}

html,
body {
	background: var(--g-bg);
	color: var(--g-text);
}
body {
	min-height: 100vh;
}

/* ---------- Top bar ---------- */
.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px clamp(16px, 4vw, 40px);
	background: rgba(244, 245, 243, 0.86);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--g-line);
}
.topbar__logo {
	height: 22px;
	width: auto;
}
.topbar__switch {
	appearance: none;
	border: 1px solid var(--g-line);
	background: transparent;
	color: var(--g-text);
	border-radius: 999px;
	padding: 8px 16px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	margin: 16px clamp(16px, 3vw, 32px) 0;
	min-height: clamp(380px, 52vw, 560px);
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	align-items: center;
	isolation: isolate;
}
.hero picture,
.hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 50%;
	z-index: -2;
}
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(8, 9, 8, 0.92) 0%, rgba(8, 9, 8, 0.65) 38%, rgba(8, 9, 8, 0) 70%);
}
.hero__content {
	max-width: 760px;
	padding: clamp(28px, 6vw, 72px);
}
.hero__eyebrow,
.select__eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--g-green);
}
.hero h1 {
	margin: 0 0 16px;
	font-size: clamp(34px, 5.4vw, 64px);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}
.hero__reassure {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 16px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: #c4cbc7;
}
.hero__reassure span::before {
	content: '✓';
	margin-right: 6px;
	color: var(--g-green);
	font-weight: 800;
}
.hero__lede {
	margin: 0 0 28px;
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.55;
	color: #d6dbd8;
	max-width: 44ch;
}
.hero__cta,
.pc__cta,
.select-cta__btn,
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 15px 26px;
	background: var(--g-green);
	color: #07150c;
	font: inherit;
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform 0.15s,
		background 0.15s;
}
.hero__cta:hover,
.pc__cta:hover,
.btn:hover {
	background: #6bd184;
	transform: translateY(-1px);
}
.btn--ghost {
	background: transparent;
	color: var(--g-text);
	border: 1px solid var(--g-line);
}
.btn--ghost:hover {
	background: var(--g-surface-2);
}
@media (prefers-reduced-motion: no-preference) {
	.hero__img {
		animation: hero-zoom 9s ease-out both;
	}
	@keyframes hero-zoom {
		from {
			transform: scale(1.08);
		}
	}
}

/* ---------- Player select ---------- */
.select {
	padding: clamp(36px, 6vw, 64px) clamp(16px, 3vw, 32px) 56px;
	scroll-margin-top: 60px;
	overflow: hidden;
}
.select__head {
	max-width: 1180px;
	margin: 0 auto 20px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.select h2 {
	margin: 0;
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 800;
	letter-spacing: -0.01em;
}
.chips {
	display: flex;
	gap: 6px;
	padding: 4px;
	border-radius: 999px;
	background: var(--g-surface);
	border: 1px solid var(--g-line);
}
.chip {
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 8px 14px;
	background: transparent;
	color: var(--g-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}
/* Six filters: on a narrow phone the row scrolls sideways instead of wrapping labels. */
@media (max-width: 520px) {
	.chips {
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.chips::-webkit-scrollbar {
		display: none;
	}
}
.chip.is-active {
	background: var(--g-text);
	color: var(--g-bg);
}
.select__hint {
	text-align: center;
	color: var(--g-muted);
	font-size: 13px;
	margin: 14px 0 0;
}

.deck {
	position: relative;
	height: 660px;
	max-width: 1180px;
	margin: 0 auto;
	perspective: 1400px;
}
.deck__track {
	position: absolute;
	inset: 0;
	touch-action: pan-y;
}
.deck__slot {
	position: absolute;
	left: 50%;
	top: 10px;
	width: 320px;
	margin-left: -160px;
	transition:
		transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.45s,
		filter 0.45s;
	cursor: pointer;
}
.deck__slot.is-active {
	cursor: default;
}
.deck__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}
.deck__nav {
	width: 44px;
	height: 44px;
	padding: 0 0 3px;
	border-radius: 50%;
	border: 1px solid var(--g-line);
	background: rgba(255, 255, 255, 0.95);
	color: var(--g-text);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.deck__nav:hover {
	background: var(--g-surface-2);
}
.deck__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
}
.deck__dots button {
	appearance: none;
	border: 0;
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition:
		width 0.25s,
		background 0.25s;
}
.deck__dots button.is-active {
	width: 24px;
	background: var(--g-green);
}

/* ---------- Loading takeover ---------- */
.loader {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	background:
		radial-gradient(60% 50% at 50% 40%, rgba(86, 194, 113, 0.16), transparent 70%),
		#f4f5f3;
	text-align: center;
}
.loader[hidden] {
	display: none;
}
.loader__inner {
	width: min(420px, 86vw);
}
.loader__kicker {
	margin: 34px 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--g-green);
}
.loader__name {
	margin: 0 0 26px;
	font-size: clamp(30px, 5vw, 44px);
	font-weight: 800;
}
.loader__bar {
	height: 6px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.08);
	overflow: hidden;
}
.loader__bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--g-green-deep), var(--g-green));
	transition: width 0.35s ease-out;
}
.loader__step {
	min-height: 1.4em;
	margin: 16px 0 0;
	font-size: 14px;
	color: var(--g-muted);
}
@media (prefers-reduced-motion: no-preference) {
	.loader:not([hidden]) .loader__inner {
		animation: loader-in 0.4s ease-out both;
	}
	@keyframes loader-in {
		from {
			opacity: 0;
			transform: translateY(12px) scale(0.98);
		}
	}
}

/* ---------- Play view ---------- */
.play {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 28px 16px 48px;
	overflow-x: clip;
}
.play[hidden] {
	display: none;
}
.play__card {
	width: min(380px, 100%);
}
.play__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 18px;
	margin-top: 16px;
}
.link {
	color: var(--g-text);
	font-size: 14px;
	font-weight: 600;
}
.play__status {
	min-height: 1.3em;
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--g-muted);
}
#phone-stage-section {
	width: 100%;
}
.iphone-frame {
	box-shadow:
		0 0 0 2px #050505,
		0 30px 70px rgba(10, 20, 15, 0.28),
		0 0 120px rgba(86, 194, 113, 0.1);
}
@media (min-width: 960px) {
	.play {
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		gap: 56px;
		padding-top: 36px;
	}
	.play__card {
		position: sticky;
		top: 84px;
		flex: 0 1 560px;
		min-width: 0;
	}
	#phone-stage-section {
		flex: 0 1 auto;
		width: auto;
	}
	@media (prefers-reduced-motion: no-preference) {
		.play:not([hidden]) .play__card {
			animation: slide-in-left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
		}
		@keyframes slide-in-left {
			from {
				opacity: 0;
				transform: translateX(-30px);
			}
		}
	}
}

.live-banner {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 40;
	max-width: 360px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #3a2f12;
	border: 1px solid #8a6d22;
	color: #f6e7b8;
	font-size: 13px;
}

/* ---------- Phones ---------- */
@media (max-width: 759px) {
	.hero {
		margin: 12px 12px 0;
		min-height: 420px;
		align-items: flex-end;
	}
	.hero::after {
		background: linear-gradient(0deg, rgba(8, 9, 8, 0.95) 0%, rgba(8, 9, 8, 0.6) 45%, rgba(8, 9, 8, 0) 75%);
	}
	.hero__content {
		padding: 24px;
	}
	.deck {
		height: 560px;
	}
	.deck__slot {
		width: 290px;
		margin-left: -145px;
	}
	/* The app first, the golfer's card underneath. */
	.play__card {
		order: 2;
	}
	.select__head {
		align-items: flex-start;
	}
}

/* Five filter chips on one line at phone width. */
@media (max-width: 420px) {
	.chip {
		padding: 8px 10px;
		font-size: 12px;
	}
}

/* Drag to browse, with the mouse too. */
.deck__track {
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}
.deck__track.is-dragging {
	cursor: grabbing;
}
.deck__track.is-dragging .deck__slot {
	transition: none;
}
.deck__track img {
	-webkit-user-drag: none;
}


/* ---------- Phones: full-screen app ----------
   On a phone, a phone-shaped frame inside the visitor's own phone wastes half the screen.
   The real app fills the viewport under a slim Arccos bar (with Switch golfer); the frame's
   bezel, fake status bar, side buttons and home indicator go, since the device has its own.
   The player card is hidden here: the app is the point, and Switch golfer is in the bar. */
@media (max-width: 759px) {
	body.is-playing {
		height: 100dvh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	body.is-playing .topbar {
		padding: 10px 14px;
	}
	body.is-playing .topbar__logo {
		height: 18px;
	}
	body.is-playing .topbar__switch {
		padding: 6px 12px;
		font-size: 12px;
	}
	body.is-playing .play {
		display: block;
		flex: 1;
		min-height: 0;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
	}
	body.is-playing .play__card {
		display: none;
	}
	body.is-playing #phone-stage-section {
		width: 100%;
		height: 100%;
	}
	body.is-playing .iphone-frame {
		width: 100%;
		height: 100%;
		padding: 0;
		border-radius: 0;
		background: #000;
		box-shadow: none;
		transform: none;
		animation: none;
	}
	body.is-playing .iphone-frame__screen {
		border-radius: 0;
	}
	body.is-playing .iphone-frame__side-btn,
	body.is-playing .status-bar,
	body.is-playing .home-indicator {
		display: none;
	}
	body.is-playing .tab-bar {
		padding-bottom: env(safe-area-inset-bottom);
		flex-basis: calc(49px + env(safe-area-inset-bottom));
	}
	/* A slim black bar that reads as part of the app: back, logo, Switch golfer. */
	body.is-playing .topbar {
		position: relative;
		gap: 8px;
		padding: calc(6px + env(safe-area-inset-top)) 10px 6px 4px;
		background: #000;
		border-bottom: 0;
		backdrop-filter: none;
	}
	body.is-playing .topbar__logo {
		height: 16px;
		margin-right: auto;
		content: url('/demo/img/logo-white.svg');
	}
	body.is-playing .topbar__switch {
		color: #fff;
		border-color: rgba(255, 255, 255, 0.28);
		padding: 5px 12px;
	}
	body.is-playing .topbar__back:not([hidden]) {
		display: inline-grid;
	}
}

/* ---------- Back button (phones only; on desktop the page itself is the way back) ---------- */
.topbar__back {
	display: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}
.topbar__back:active {
	background: rgba(255, 255, 255, 0.12);
}

/* ---------- Phones: "Demo as" pinned to the bottom of the select screen ---------- */
.select-cta {
	display: none;
}
@media (max-width: 759px) {
	.select-cta:not([hidden]) {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 25;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: linear-gradient(0deg, var(--g-bg) 60%, rgba(244, 245, 243, 0));
	}
	.select-cta__btn {
		width: 100%;
		box-shadow: 0 6px 18px rgba(47, 143, 74, 0.35);
	}
	.select-cta__btn:disabled {
		background: #dcdfdb;
		color: var(--g-muted);
		box-shadow: none;
	}

}

/* ---------- Show me: shortcuts that drive the phone ---------- */
.showme {
	margin-top: 14px;
}
.showme__title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--g-muted);
}
.showme__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.showme__item {
	appearance: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 13px 10px;
	border: 1px solid var(--g-line);
	border-radius: 12px;
	background: var(--g-surface);
	color: var(--g-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition:
		border-color 0.15s,
		transform 0.15s,
		box-shadow 0.15s;
}
.showme__item:hover {
	border-color: var(--g-green);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(20, 32, 26, 0.08);
}
.showme__item.is-active {
	border-color: var(--g-green-deep);
	box-shadow: inset 0 0 0 1px var(--g-green-deep);
}
.showme__item b {
	font-size: 14px;
	font-weight: 800;
}
.showme__tab {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--g-green-deep);
}
.showme__text {
	overflow: hidden;
	font-size: 12px;
	line-height: 1.35;
	color: var(--g-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* The play column: tighter actions so the shortcuts sit above the fold. */
.pc--wide + .play__actions,
#play-card + .play__actions {
	margin-top: 12px;
}
.play__actions .btn {
	padding: 10px 18px;
	font-size: 14px;
}
.play__status:empty {
	display: none;
}

/* ---------- Desktop: a shorter select section ---------- */
@media (min-width: 760px) {
	.select {
		padding-top: clamp(28px, 4vw, 44px);
		padding-bottom: 36px;
	}
	.deck {
		height: 540px;
	}
}

/* ---------- Player card (Arccos Brand Guidelines 2026) ----------
   Montserrat only, never heavier than Medium 500: names Regular, numbers Light (data),
   labels Medium overlines. Breakfast Ball colours: a dark ArccosNavy-DarkGrey header with
   GreenFairway accents, neutral MG greys, GreenFairway 800 for green text on white, and the
   Strokes Gained colours (green gained, red lost, MG2 baseline) for the "Plays Like" bars.
   Cards: 16 radius; spacing in 4s; pill buttons with DarkGrey text on green. */
.pc {
	--b-green: #56c271;
	--b-green-800: #23693a;
	--b-red: #f26565;
	--b-mg4: #f2f2f2;
	--b-mg3: #d1d6da;
	--b-mg2: #a0adb7;
	--b-mg1: #626a77;
	--b-navy: #3d3f44;
	--b-dark: #252628;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--b-mg3);
	box-shadow:
		0 16px 40px rgba(37, 38, 40, 0.14),
		0 2px 6px rgba(37, 38, 40, 0.06);
	color: var(--b-navy);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	text-align: left;
}
.pc__head {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 16px 20px 14px;
	background: linear-gradient(180deg, var(--b-navy) 0%, var(--b-dark) 100%);
	color: #fff;
}
/* A GreenFairway line along the top of the header. */
.pc__head::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--b-green);
}
.pc__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--b-navy);
	box-shadow:
		0 0 0 2px var(--b-dark),
		0 0 0 4px var(--b-green);
	font-size: 22px;
	font-weight: 400;
	color: #fff;
}
.pc__avatar--photo {
	background: var(--b-mg1);
}
.pc__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
.pc__who {
	min-width: 0;
}
.pc__role {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--b-green);
}
.pc__name {
	margin: 0;
	font-size: 20px;
	line-height: 24px;
	font-weight: 400;
	color: #fff;
}
.pc__home {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 16px;
	color: var(--b-mg3);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* The handicap as a data figure: Light numerals, a Medium overline under it. */
.pc__hcp {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-left: 12px;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.pc__hcp b {
	font-size: 32px;
	line-height: 36px;
	font-weight: 300;
	letter-spacing: -0.02em;
	color: #fff;
}
.pc__hcp span {
	font-size: 10px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--b-green);
}
.pc__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 20px 0;
}
.pc__nums {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-radius: 12px;
	background: var(--b-mg4);
}
.pc__nums div {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 4px;
}
.pc__nums div + div {
	border-left: 1px solid var(--b-mg3);
}
.pc__nums b {
	font-size: 20px;
	line-height: 28px;
	font-weight: 300;
	color: var(--b-dark);
}
.pc__nums small {
	margin-left: 2px;
	font-size: 11px;
	font-weight: 500;
	color: var(--b-mg1);
}
.pc__nums span {
	font-size: 10px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--b-mg1);
}
.pc__facts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pc__facts:empty {
	display: none;
}
.pc__fact {
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--b-navy);
}
.pc__fact--loves {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.pc__label {
	display: block;
	font-size: 10px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--b-green-800);
}
.pc__plays {
	padding-top: 12px;
	border-top: 1px solid var(--b-mg4);
}
.pc__plays .pc__label {
	margin-bottom: 8px;
	color: var(--b-mg1);
}
.pc__facets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
}
.pc__facet {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 2px 6px;
	border-radius: 8px;
	background: var(--b-mg4);
}
.pc__flabel {
	font-size: 9px;
	line-height: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--b-mg1);
}
.pc__fbar {
	display: flex;
	align-items: flex-end;
	width: 36%;
	height: 28px;
	border-bottom: 1px solid var(--b-mg2);
}
.pc__fbar i {
	display: block;
	width: 100%;
	height: var(--h);
	border-radius: 3px 3px 0 0;
	background: var(--b-mg2);
}
.pc__facet--good .pc__fbar i {
	background: var(--b-green);
}
.pc__facet--bad .pc__fbar i {
	background: var(--b-red);
}
.pc__facet b {
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: var(--b-dark);
}
.pc__soon {
	margin: 0;
	padding: 12px;
	border-radius: 12px;
	border: 1px dashed var(--b-mg3);
	text-align: center;
	font-size: 12px;
	color: var(--b-mg1);
}
.pc__source {
	margin: -4px 0 0;
	font-size: 11px;
	line-height: 16px;
	color: var(--b-mg1);
}
.pc__cta {
	margin: 14px 20px 16px;
	width: auto;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--b-green);
	color: var(--b-dark);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}
.pc__cta:hover {
	background: #6bd184;
}
.pc > .pc__body:last-child {
	padding-bottom: 20px;
}
.pc__cta:disabled {
	background: var(--b-mg4);
	color: var(--b-mg1);
	cursor: not-allowed;
	transform: none;
}
/* Every card shows its Choose button; hidden cards (far off the edge) aren't clickable. */

/* The play screen's card: wider, details in two columns. */
.play__card {
	width: min(560px, 100%);
}
.pc--wide .pc__avatar {
	width: 76px;
	height: 76px;
}
.pc--wide .pc__name {
	font-size: 24px;
	line-height: 32px;
}
.pc--wide .pc__hcp b {
	font-size: 40px;
	line-height: 44px;
}
.pc--wide .pc__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 12px 20px;
}
.pc--wide .pc__nums,
.pc--wide .pc__plays {
	grid-column: 1;
}
.pc--wide .pc__facts {
	grid-column: 2;
	grid-row: 1 / span 3;
}
.pc--wide .pc__plays {
	border-top: 0;
	padding-top: 0;
}
.pc--wide .pc__fact--loves {
	-webkit-line-clamp: unset;
}
@media (max-width: 520px) {
	.pc--wide .pc__body {
		grid-template-columns: 1fr;
	}
	.pc--wide .pc__facts {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Switch golfer sits in the card's bottom-right corner (room is kept for it below the card's
   content); the tour link sits under the Show me cards. */
.play__cardwrap {
	position: relative;
}
.play__cardwrap .pc {
	padding-bottom: 50px;
}
.play__switch {
	position: absolute;
	right: 14px;
	bottom: 12px;
	z-index: 2;
	padding: 7px 14px;
	font-size: 13px;
	background: #fff;
}
.play__switch:hover {
	background: var(--g-surface-2);
}
.showme + .play__actions {
	margin-top: 14px;
}

/* In the carousel, "Loves" keeps to two lines (the play screen shows it in full). */
.deck__slot .pc__fact--loves {
	-webkit-line-clamp: 2;
}

/* Phones: a compact card header so the name and home course fit beside the handicap. */
@media (max-width: 759px) {
	.deck__slot .pc__head {
		gap: 10px;
		padding: 14px 14px 12px;
	}
	.deck__slot .pc__avatar {
		width: 52px;
		height: 52px;
	}
	.deck__slot .pc__name {
		font-size: 17px;
		line-height: 22px;
	}
	.deck__slot .pc__home {
		font-size: 11px;
	}
	.deck__slot .pc__hcp {
		padding-left: 10px;
	}
	.deck__slot .pc__hcp b {
		font-size: 26px;
		line-height: 30px;
	}
	.deck__slot .pc__body {
		padding: 12px 14px 0;
	}
	.deck__slot .pc__cta {
		margin: 12px 14px 14px;
	}
}

/* ---------- Phones: Show me in the app bar, as a bottom sheet ---------- */
.topbar__showme {
	display: none;
}
@media (max-width: 759px) {
	body.is-playing .topbar__showme:not([hidden]) {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		appearance: none;
		margin-right: 6px;
		padding: 5px 12px;
		border: 0;
		border-radius: 999px;
		background: #56c271;
		color: #252628;
		font: inherit;
		font-size: 12px;
		font-weight: 500;
		cursor: pointer;
	}
}
.showme-sheet[hidden] {
	display: none;
}
.showme-sheet {
	position: fixed;
	inset: 0;
	z-index: 60;
}
.showme-sheet__scrim {
	position: absolute;
	inset: 0;
	background: rgba(37, 38, 40, 0.55);
}
.showme-sheet__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 80dvh;
	overflow-y: auto;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
	border-radius: 16px 16px 0 0;
	background: #f2f2f2;
	animation: sheet-up 0.22s ease-out;
}
@keyframes sheet-up {
	from {
		transform: translateY(24px);
		opacity: 0;
	}
}
.showme-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.showme-sheet__head h2 {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #626a77;
}
.showme-sheet__close {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: #d1d6da;
	color: #252628;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

/* Long descriptions cut off inside the shortcut card instead of running past its edge. */
.showme__item {
	min-width: 0;
	overflow: hidden;
}

/* ---------- 2 Nov round ---------- */
/* Hero: Choose a Golfer and Join Now side by side. */
.hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.hero__cta--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}
.hero__cta--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
}
/* Cards without portraits: name and home, then the handicap. */
.pc__head {
	grid-template-columns: 1fr auto;
}
/* Explore the Arccos app: clear space under the card, and the app's tab icons. */
.showme {
	margin-top: 32px;
}
.showme__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.showme__icon {
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.showme-sheet__head h2 {
	letter-spacing: 0.1em;
}

/* ---------- 3 Nov: in-app style bars, compact play card ---------- */
/* "Handicap by part of the game" tiles drawn like the app's Strokes Gained breakdown: a tall
   tile, label at the top, a wide flat-topped bar, the value underneath. */
.pc__facet {
	gap: 6px;
	padding: 10px 6px 8px;
}
.pc__fbar {
	width: 78%;
	height: 40px;
	border-bottom: 0;
}
.pc__fbar i {
	border-radius: 2px 2px 0 0;
}
.pc__facet b {
	font-size: 13px;
}
/* Demo screen: a compact golfer card (the app is the point). */
.play__card {
	width: min(500px, 100%);
}
@media (min-width: 960px) {
	.play__card {
		flex: 0 1 500px;
	}
}
.pc--wide .pc__head {
	padding: 14px 18px 12px;
}
.pc--wide .pc__name {
	font-size: 20px;
	line-height: 26px;
}
.pc--wide .pc__hcp b {
	font-size: 32px;
	line-height: 36px;
}
.pc--wide .pc__body {
	gap: 10px 16px;
	padding: 12px 18px 0;
}
.pc--wide .pc__fact--story {
	display: none;
}
.pc--wide .pc__fact--loves {
	-webkit-line-clamp: 3;
}
.pc--wide .pc__fbar {
	height: 30px;
}
.play__cardwrap .pc {
	padding-bottom: 44px;
}

.deck__controls {
	margin-top: 4px;
}

/* 3 Nov: Switch golfer beside the name in the dark header, so no room is kept under the card. */
.play__cardwrap .pc {
	padding-bottom: 0;
}
.pc__namerow {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.pc__namerow .play__switch {
	position: static;
	padding: 5px 12px;
	font-size: 12px;
	line-height: 16px;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	white-space: nowrap;
}
.pc__namerow .play__switch:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}
.play__cardwrap .pc--wide .pc__body {
	padding-bottom: 16px;
}

/* 3 Nov: "Loves" is never cut off; the carousel grows to fit (deck.js fitHeight). */
.pc__fact--loves,
.deck__slot .pc__fact--loves,
.pc--wide .pc__fact--loves {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
}

.deck {
	transition: height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* =====================================================================================
   Brand pass (3 Nov 2026) — Arccos Brand Guidelines 2026 (Breakfast Ball).
   Montserrat ≤ Medium 500 except buttons (uppercase Bold/SemiBold); headlines Light with
   Regular emphasis; Antonio Bold for numerals; palette tokens only; 4px spacing.
   ===================================================================================== */
:root {
	--g-bg: #f2f2f2; /* MG4 */
	--g-surface: #ffffff; /* WhiteTees */
	--g-surface-2: #e6e8ea; /* line / surface-2 */
	--g-line: #e6e8ea;
	--g-text: #252628; /* DarkGrey */
	--g-muted: #626a77; /* MG1 */
	--g-green: #56c271; /* GreenFairway (fills) */
	--g-green-deep: #23693a; /* GreenFairway 800 (green text on white) */
	--tier-gold: #eeda6f;
	--tier-silver: #a0adb7;
	--tier-bronze: #f49b5b;
	--tier-icon: #56c271;
	--sg-good: #56c271;
	--sg-mid: #eeda6f;
	--sg-bad: #f26565;
	--num: 'Antonio', 'Montserrat', system-ui, sans-serif;
}
.topbar {
	background: rgba(242, 242, 242, 0.86);
	border-bottom-color: var(--g-line);
}
/* Logo: at least 25px tall (guideline minimum). */
.topbar__logo {
	height: 28px;
}

/* ---------- Type ---------- */
.hero__eyebrow,
.select__eyebrow {
	margin: 0 0 4px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.16em;
}
.select__eyebrow {
	color: var(--g-green-deep);
}
.hero h1 {
	margin: 0 0 16px;
	font-size: 56px;
	line-height: 64px;
	font-weight: 300;
	letter-spacing: -2px;
}
.hero__em {
	font-weight: 400;
}
.select h2 {
	font-size: 40px;
	line-height: 48px;
	font-weight: 300;
	letter-spacing: -2px;
	color: var(--g-text);
}
@media (max-width: 639px) {
	.hero h1 {
		font-size: 40px;
		line-height: 48px;
	}
	.select h2 {
		font-size: 32px;
		line-height: 40px;
	}
}
.hero__lede {
	margin-bottom: 32px;
	color: #d1d6da; /* MG3 */
}
.hero__reassure {
	font-weight: 500;
	color: #d1d6da;
}
.hero__reassure span::before {
	font-weight: 500;
}
.link {
	font-weight: 500;
}
.showme__title {
	margin-bottom: 12px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.16em;
	color: var(--g-muted);
}
/* Hero photo: the brand filter colours (ArccosNavy → DarkGrey), run across the text side so
   the course still shows on the right. */
.hero::after {
	background: linear-gradient(90deg, rgba(37, 38, 40, 0.94) 0%, rgba(61, 63, 68, 0.6) 40%, rgba(61, 63, 68, 0) 72%);
}
@media (max-width: 759px) {
	.hero::after {
		background: linear-gradient(0deg, rgba(37, 38, 40, 0.96) 0%, rgba(61, 63, 68, 0.6) 48%, rgba(61, 63, 68, 0) 78%);
	}
}

/* ---------- Buttons ---------- */
/* Pill CTA: 52px, 16/28, Montserrat Bold 16, uppercase. */
.hero__cta {
	min-height: 52px;
	padding: 16px 28px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	text-transform: uppercase;
	background: var(--g-green);
	color: var(--g-text);
	transition: transform 0.2s;
}
.hero__cta:hover {
	background: var(--g-green);
	transform: translateY(-2px);
}
.hero__cta--ghost,
.hero__cta--ghost:hover {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 2px #fff;
}
@media (max-width: 620px) {
	.hero__cta {
		padding: 16px 24px;
	}
}
/* Arrow CTA on the cards: 40px, SemiBold 14, uppercase, +3% tracking, white arrow chip on green. */
.pc__cta {
	justify-content: space-between;
	gap: 8px;
	min-height: 40px;
	padding: 8px 8px 8px 16px;
	font-size: 14px;
	line-height: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: var(--g-green);
	color: #000;
	transition: transform 0.2s;
}
.pc__cta:hover {
	background: var(--g-green);
	transform: translateY(-2px);
}
.pc__cta:disabled {
	justify-content: center;
	padding: 8px 16px;
}
.pc__ctaic {
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	color: #000;
}
.pc__ctaic svg,
.deck__nav svg {
	width: 16px;
	height: 16px;
}
/* Secondary buttons (Switch golfer): arrow-CTA type, outline. */
.topbar__switch,
.pc__namerow .play__switch {
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.topbar__switch {
	padding: 8px 16px;
	color: var(--g-text);
	border: 0;
	box-shadow: inset 0 0 0 1px var(--g-text);
	background: transparent;
}
.pc__namerow .play__switch {
	padding: 6px 12px;
	border: 0;
	box-shadow: inset 0 0 0 1px #fff;
}
/* Filters: labels are Medium 500 14/20; DarkGrey when selected. */
.chip {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--g-muted);
}
.chip.is-active {
	background: var(--g-text);
	color: #fff;
}
@media (max-width: 420px) {
	.chip {
		font-size: 12px;
	}
}
/* Carousel arrows: the library arrow, DarkGrey on white. */
.deck__nav {
	display: inline-grid;
	place-items: center;
	padding: 0;
	border-color: var(--g-line);
	background: #fff;
	color: var(--g-text);
}

/* ---------- Explore the Arccos app ---------- */
.showme__item {
	gap: 4px;
	padding: 12px 16px;
	border-color: var(--g-line);
	border-radius: 16px;
	color: var(--g-text);
}
.showme__item b {
	font-weight: 500;
}
/* Icons: DarkGrey; GreenFairway only for the active tile. */
.showme__tab {
	font-weight: 500;
	color: var(--g-text);
}
.showme__item:hover {
	border-color: var(--g-green);
}
.showme__item.is-active .showme__tab {
	color: var(--g-green-deep);
}

/* ---------- Numerals: Antonio Bold ---------- */
.pc__hcp b,
.pc__nums b,
.pc__facet b {
	font-family: var(--num);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.pc__hcp b {
	font-size: 46px;
	line-height: 44px;
}
.pc--wide .pc__hcp b {
	font-size: 46px;
	line-height: 44px;
}
.pc__nums b {
	font-size: 24px;
	line-height: 28px;
}
.pc__nums small {
	font-family: 'Montserrat', system-ui, sans-serif;
	letter-spacing: 0;
}
.pc__facet b {
	font-size: 16px;
	line-height: 20px;
}
.pc__hcp span {
	margin-top: 2px;
}

/* Brand pass — phones. */
@media (max-width: 759px) {
	/* Hero: keep the shot tracer out from behind the copy (no text over the ball flight). */
	.hero::after {
		background: linear-gradient(0deg, #252628 0%, rgba(37, 38, 40, 0.94) 58%, rgba(61, 63, 68, 0.6) 82%, rgba(61, 63, 68, 0.25) 100%);
	}
	/* App bar: the crown alone at the 25px minimum (a full lockup won't fit beside the buttons). */
	body.is-playing .topbar__logo {
		height: 25px;
		content: url('/demo/img/crown.svg');
	}
	body.is-playing .topbar__switch {
		padding: 6px 12px;
		color: #fff;
		box-shadow: inset 0 0 0 1px #fff;
	}
	body.is-playing .topbar__showme:not([hidden]) {
		padding: 6px 12px;
		font-size: 12px;
		line-height: 16px;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}
}

/* Phones: the photo (with its shot tracer) as a band on top, the copy below it on DarkGrey,
   so no text sits over the ball flight. */
@media (max-width: 759px) {
	.hero {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		background: #252628;
	}
	.hero picture {
		position: relative;
		display: block;
		height: 190px;
		z-index: 0;
	}
	.hero__img {
		object-position: 62% 40%;
		z-index: 0;
	}
	.hero::after {
		inset: auto 0 auto 0;
		top: 110px;
		height: 92px;
		z-index: 1;
		background: linear-gradient(180deg, rgba(37, 38, 40, 0) 0%, #252628 100%);
	}
	.hero__content {
		position: relative;
		z-index: 2;
		padding: 8px 24px 28px;
	}
}

/* =====================================================================================
   4 Nov round: black hero overlay, Title Case buttons, centred card button, slightly
   smaller numerals, portraits back (smaller), Male / Female toggle.
   ===================================================================================== */
/* Hero: back to a black overlay. */
.hero::after {
	background: linear-gradient(90deg, rgba(8, 9, 8, 0.92) 0%, rgba(8, 9, 8, 0.65) 38%, rgba(8, 9, 8, 0) 70%);
}
@media (max-width: 759px) {
	.hero {
		background: #080908;
	}
	.hero::after {
		background: linear-gradient(180deg, rgba(8, 9, 8, 0) 0%, #080908 100%);
	}
}
/* Buttons: Title Case, as written. */
.hero__cta,
.pc__cta,
.topbar__switch,
.pc__namerow .play__switch,
body.is-playing .topbar__showme:not([hidden]) {
	text-transform: none;
	letter-spacing: 0;
}
/* Card button: centred label, no arrow chip. */
.pc__cta {
	justify-content: center;
	padding: 8px 16px;
	font-size: 15px;
	line-height: 20px;
}
/* Numerals: a touch smaller. */
.pc__hcp b,
.pc--wide .pc__hcp b {
	font-size: 40px;
	line-height: 40px;
}
.pc__nums b {
	font-size: 22px;
	line-height: 26px;
}
.pc__facet b {
	font-size: 14px;
	line-height: 18px;
}
/* Portraits: a 48px circle with the GreenFairway ring (smaller than the old 64px). */
.pc__head.pc__head--photo {
	grid-template-columns: auto 1fr auto;
	gap: 12px;
}
.pc__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	flex: none;
	background: var(--b-mg1, #626a77);
	box-shadow:
		0 0 0 2px var(--b-dark, #252628),
		0 0 0 4px var(--g-green);
}
.pc__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
@media (max-width: 759px) {
	.deck__slot .pc__avatar {
		width: 40px;
		height: 40px;
	}
	.deck__slot .pc__head.pc__head--photo {
		gap: 10px;
	}
}
/* Male / Female toggle beside the handicap chips. */
.select__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px 12px;
	min-width: 0;
	max-width: 100%;
}
.gtoggle {
	display: inline-flex;
	padding: 4px;
	border-radius: 999px;
	background: var(--g-surface);
	border: 1px solid var(--g-line);
}
.gtoggle__btn {
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 8px 14px;
	background: transparent;
	color: var(--g-muted);
	font: inherit;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	cursor: pointer;
}
.gtoggle__btn.is-active {
	background: var(--g-green);
	color: var(--g-text);
}
@media (max-width: 759px) {
	.select__filters {
		justify-content: flex-start;
		width: 100%;
	}
}
@media (max-width: 420px) {
	.gtoggle__btn {
		padding: 8px 12px;
		font-size: 12px;
	}
}
.pc--wide .pc__avatar {
	width: 48px;
	height: 48px;
}
.hero__lede {
	max-width: 62ch;
}

/* ---------- 4 Nov (b) ---------- */
/* Hero: clip to the rounded shape, so the zooming photo's layer can't show square corners
   (overflow + border-radius doesn't clip a composited, animating child in Safari/Chrome). */
.hero {
	clip-path: inset(0 round 24px);
}
/* Handicap chips: tighter, so the row is narrower. */
.chip {
	padding: 8px 10px;
}
@media (max-width: 420px) {
	.chip {
		padding: 8px 7px;
	}
}
/* Stat boxes: every number on one line, every label on one line, all three aligned. */
.pc__nums div {
	display: grid;
	grid-template-rows: 28px 16px;
	align-items: end;
	justify-items: center;
	row-gap: 2px;
	padding: 8px 4px;
}
.pc__nums b {
	display: block;
	line-height: 28px;
	white-space: nowrap;
}
.pc__nums small {
	line-height: 1;
}
.pc__nums span {
	align-self: start;
	line-height: 16px;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
/* The overlay and the zooming photo carry the hero's rounding themselves: once the zoom puts
   the photo on its own layer, Chrome/Safari can paint ::after unclipped (square dark corners). */
.hero picture {
	border-radius: inherit;
	overflow: hidden;
}
@media (min-width: 760px) {
	.hero::after {
		border-radius: inherit;
	}
}
/* 4 Nov (c): no gap between handicap chips; Male/Female selected state matches "All". */
.chips {
	gap: 0;
}
.gtoggle__btn.is-active {
	background: var(--g-text);
	color: #fff;
}
/* 5 Nov: no green line along the top of the player cards. */
.pc__head::before {
	content: none;
}

/* ---------- 5 Nov ---------- */
/* Switch Golfer back in the card's bottom-right corner (outline, DarkGrey on white). */
.play__cardwrap > .play__switch {
	position: absolute;
	right: 18px;
	bottom: 16px;
	z-index: 2;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--g-text);
	color: var(--g-text);
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.play__cardwrap > .play__switch:hover {
	background: var(--g-surface-2);
}
/* Explore the Arccos app: tab label and icon in the brand green, three tiles a row. */
.showme__tab,
.showme__item.is-active .showme__tab {
	color: var(--g-green-deep);
}
@media (min-width: 760px) {
	.showme__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.showme__item {
		padding: 12px 14px;
	}
	.showme__text {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
}
/* Descriptions wrap on every size (phones cut them off before). */
.showme__text {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

/* ---------- 5 Nov: motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	@keyframes rise {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
	}
	@keyframes fade {
		from {
			opacity: 0;
		}
	}
	/* Hero copy arrives a line at a time. */
	.hero__eyebrow,
	.hero h1,
	.hero__lede,
	.hero__ctas,
	.hero__reassure {
		animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}
	.hero h1 {
		animation-delay: 0.08s;
	}
	.hero__lede {
		animation-delay: 0.18s;
	}
	.hero__ctas {
		animation-delay: 0.28s;
	}
	.hero__reassure {
		animation-delay: 0.38s;
	}
	/* Golfer picker: heading, filters, then the cards rise in when the section comes into view. */
	html.motion .select:not(.is-in) .select__head,
	html.motion .select:not(.is-in) .deck,
	html.motion .select:not(.is-in) .deck__controls {
		opacity: 0;
	}
	html.motion .select.is-in .select__head {
		animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}
	html.motion .select.is-in .deck {
		animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s both;
	}
	html.motion .select.is-in .deck__controls {
		animation: fade 0.6s ease-out 0.3s both;
	}
	/* Cards re-deal when the filter or Male/Female changes (each render makes new cards). */
	.deck__slot .pc {
		animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}
	/* Filters and toggle ease between states. */
	.chip,
	.gtoggle__btn {
		transition:
			background-color 0.2s,
			color 0.2s;
	}
	/* Explore tiles cascade in on the demo screen. */
	.showme__item {
		animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}
	.showme__item:nth-child(2) { animation-delay: 0.04s; }
	.showme__item:nth-child(3) { animation-delay: 0.08s; }
	.showme__item:nth-child(4) { animation-delay: 0.12s; }
	.showme__item:nth-child(5) { animation-delay: 0.16s; }
	.showme__item:nth-child(6) { animation-delay: 0.2s; }
	.showme__item:nth-child(7) { animation-delay: 0.24s; }
	.showme__item:nth-child(8) { animation-delay: 0.28s; }
	.showme__item:nth-child(9) { animation-delay: 0.32s; }
	.showme__title {
		animation: fade 0.5s ease-out both;
	}
}

/* ---------- 5 Nov: header logo + site footer (match arccosgolf.com) ---------- */
/* Logo: links to arccosgolf.com, same size as there (180px wide desktop, 130px phones). */
.topbar__home {
	display: inline-flex;
	align-items: center;
}
.topbar__logo {
	width: 180px;
	height: auto;
}
@media (max-width: 759px) {
	.topbar__logo {
		width: 130px;
	}
	body.is-playing .topbar__logo {
		width: auto;
	}
}
.sf {
	margin-top: 64px;
	background: #252628;
	color: #fff;
}
.sf__inner {
	display: flex;
	gap: 48px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 64px 48px 72px;
}
.sf__brand {
	flex: 0 0 284px;
}
.sf__logo img {
	display: block;
	width: 211px;
	height: auto;
}
.sf__social {
	display: flex;
	gap: 28px;
	margin-top: 40px;
}
.sf__social a {
	display: inline-flex;
	color: #fff;
}
.sf__icon {
	width: 24px;
	height: 24px;
}
.sf__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 0 48px;
}
.sf__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	font-size: 21px;
	line-height: 25px;
	font-weight: 400;
	cursor: default;
	pointer-events: none;
}
.sf__head::-webkit-details-marker {
	display: none;
}
.sf__chev {
	display: none;
	width: 20px;
	height: 20px;
}
.sf__links {
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}
.sf__links a {
	color: #fff;
	font-size: 16.5px;
	line-height: 21px;
	text-decoration: none;
	/* arccosgolf.com footer: a 1px underline draws in from the left on hover, out to the right. */
	background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
	transition: background-size 0.5s cubic-bezier(0.3, 1, 0.3, 1);
}
.sf__social a {
	transition: opacity 0.3s;
}
@media (pointer: fine) {
	.sf__links a:hover {
		background-position-x: 0;
		background-size: 100% 1px;
	}
	.sf__social a:hover {
		opacity: 0.7;
	}
}
@media (max-width: 759px) {
	.sf {
		margin-top: 48px;
	}
	.sf__inner {
		flex-direction: column;
		gap: 40px;
		padding: 48px 20px 56px;
	}
	.sf__brand {
		flex: none;
	}
	.sf__logo img {
		width: 158px;
	}
	.sf__social {
		margin-top: 40px;
	}
	.sf__cols {
		flex-direction: column;
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: 8px;
	}
	.sf__col + .sf__col {
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}
	.sf__head {
		padding: 20px 20px;
		font-size: 16px;
		font-weight: 500;
		cursor: pointer;
		pointer-events: auto;
	}
	.sf__chev {
		display: block;
		transition: transform 0.2s;
	}
	.sf__col[open] .sf__chev {
		transform: rotate(180deg);
	}
	.sf__links {
		margin: 0;
		padding: 0 20px 20px;
		gap: 14px;
	}
	.sf__links a {
		font-size: 14px;
		line-height: 18px;
	}
	/* The demo screen on phones is the app, full-screen: no footer there. */
	body.is-playing .sf {
		display: none;
	}
}
/* Header bar matches arccosgolf.com: white, no rule, 108px with 48px sides (desktop); 92px with the
   logo centred (phones). The demo screen keeps its compact bar (the app bar on phones). */
body:not(.is-playing) .topbar {
	min-height: 108px;
	padding: 0 48px;
	background: #fff;
	border-bottom: 0;
	backdrop-filter: none;
}
@media (max-width: 759px) {
	body:not(.is-playing) .topbar {
		min-height: 92px;
		padding: 0 20px;
		justify-content: center;
	}
}

/* Header: Join Now, top right (best-sellers). Pushed right; on phones the logo stays centred. */
.topbar__home {
	margin-right: auto;
}
.topbar__switch + .topbar__join {
	margin-left: 12px;
}
.topbar__join {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--g-green);
	color: var(--g-text);
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s;
}
.topbar__join:hover {
	transform: translateY(-1px);
}
@media (max-width: 759px) {
	body:not(.is-playing) .topbar {
		position: sticky;
	}
	body:not(.is-playing) .topbar__home {
		margin-right: 0;
	}
	body:not(.is-playing) .topbar__join {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		min-height: 36px;
		padding: 8px 16px;
		font-size: 13px;
		line-height: 18px;
	}
	/* The app bar on the phone demo screen is already full (back, crown, Explore, Switch Golfer). */
	body.is-playing .topbar__join {
		display: none;
	}
}
/* 6 Nov: header at ~2/3 height, logo sized to the brand clearspace rule. Logo 25px tall (the
   brand minimum); desktop bar 75px = one crown height (25px) above and below; phones 61px =
   18px clear, above the minimum (centre pillar, ~15px at this size). */
.topbar__logo {
	width: auto;
	height: 25px;
}
body:not(.is-playing) .topbar {
	min-height: 75px;
}
@media (max-width: 759px) {
	.topbar__logo {
		width: auto;
		height: 25px;
	}
	body:not(.is-playing) .topbar {
		min-height: 61px;
	}
}

/* iOS: with viewport-fit=cover the page runs under the status bar, so the landing header on phones
   keeps clear of it (the demo screen's app bar already pads by env(safe-area-inset-top)). */
@media (max-width: 759px) {
	body:not(.is-playing) .topbar {
		padding-top: env(safe-area-inset-top);
		min-height: calc(61px + env(safe-area-inset-top));
	}
}
/* 6 Nov: header in the page colour (not white). At the top it sits flush with the page; once
   content scrolls under it, it fades to frosted page colour with a hairline. */
body:not(.is-playing) .topbar {
	background: rgba(242, 242, 242, 0);
	border-bottom: 1px solid transparent;
	backdrop-filter: none;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		backdrop-filter 0.25s ease;
}
body:not(.is-playing) .topbar:not(.is-scrolled) {
	background: var(--g-bg);
}
body:not(.is-playing) .topbar.is-scrolled {
	background: rgba(242, 242, 242, 0.82);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: var(--g-line);
}
/* Phones: logo on the left, Join Now on the right (like desktop). */
@media (max-width: 759px) {
	body:not(.is-playing) .topbar {
		justify-content: space-between;
	}
	body:not(.is-playing) .topbar__home {
		margin-right: auto;
	}
	body:not(.is-playing) .topbar__join {
		position: static;
		transform: none;
	}
}
/* 6 Nov: iOS 26 Safari floats its address bar over the bottom of the page and only reports the
   home-indicator inset, so a 100dvh shell put the tab bar under the bar. The small viewport
   height (svh) assumes the browser bars are showing, which they always are here (the page
   itself never scrolls). Black page behind the app so Safari tints its bars to match. */
@media (max-width: 759px) {
	html:has(body.is-playing),
	body.is-playing {
		background: #000;
	}
}

/* iOS 26 Safari: lift the app's tab bar clear of the floating address bar (main.js sets
   --ios-bottom on Safari 26+; the padding is the tab bar's own dark colour under the glass bar). */
@media (max-width: 759px) {
	body.is-playing .tab-bar {
		padding-bottom: calc(env(safe-area-inset-bottom) + var(--ios-bottom, 0px));
		flex-basis: calc(49px + env(safe-area-inset-bottom) + var(--ios-bottom, 0px));
	}
}
/* Phones: Male/Female on the same line as the handicap chips (the chips scroll if a screen is too
   narrow; the toggle never wraps). */
@media (max-width: 759px) {
	.select__filters {
		flex-wrap: nowrap;
		gap: 6px;
	}
	.select__filters .chips {
		flex: 1 1 auto;
		min-width: 0;
		padding: 3px;
	}
	.select__filters .chip {
		padding: 7px 6px;
		font-size: 12px;
		line-height: 16px;
	}
	.gtoggle {
		flex: none;
		padding: 3px;
	}
	.gtoggle__btn {
		padding: 7px 9px;
		font-size: 12px;
		line-height: 16px;
	}
}
@media (max-width: 759px) {
	.select__filters {
		flex: 1 1 100%;
		width: 100%;
	}
}
@media (max-width: 380px) {
	.select__filters .chip {
		padding: 7px 4px;
	}
	.gtoggle__btn {
		padding: 7px 7px;
	}
}

.deck__controls[hidden] {
	display: none;
}

/* Phones: the hero photo is the course crop (no dark band on the left), a little taller so both
   shot tracers are in frame, fading bottom-to-top into the copy. */
@media (max-width: 759px) {
	.hero picture {
		height: 236px;
	}
	.hero__img {
		object-position: 50% 42%;
	}
	.hero::after {
		top: 150px;
		height: 96px;
		background: linear-gradient(180deg, rgba(8, 9, 8, 0) 0%, rgba(8, 9, 8, 0.7) 55%, #080908 100%);
	}
}

/* Desktop: Switch Golfer lives on the golfer card (bottom right), not in the header. Phones keep it
   in the app bar, where it is the only way back to the golfers. */
@media (min-width: 760px) {
	.topbar__switch {
		display: none !important;
	}
}

/* 9 Nov: wider demo layout on desktop. The column lines up with the header (40px sides), the phone
   sits at the right edge and the golfer card + Explore tiles take the extra width. */
@media (min-width: 960px) {
	/* A 1080px column (a touch narrower than the homepage picker's 1180px), 32px sides. */
	.play {
		box-sizing: border-box;
		max-width: 1144px;
		padding-left: 32px;
		padding-right: 32px;
		justify-content: space-between;
		gap: 64px;
	}
	.play__card {
		flex: 1 1 auto;
		max-width: 860px;
	}
	/* The phone is scaled from its centre; size its box to the scaled phone so it lines up with the
	   header's right edge (the 428px frame overflows its box evenly and stays centred). */
	#phone-stage-section {
		width: calc(428px * var(--phone-scale));
		flex: 0 0 auto;
	}
}

/* Background open: the picker opens the golfer on show ahead of the click. The demo screen
   stays rendered (an iframe under display:none never starts the app) but is invisible,
   behind the page, unclickable and inert (main.js startOpen). */
body.is-prerendering #play-view[hidden] {
	display: flex !important;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

/* 10 Nov (QA 868mufr40 / 868mufubt / 868mufwyd): the page-wide min-height: 100vh beat the demo
   screen's height: 100dvh. On Android Chrome 100vh is the height with the address bar hidden, so
   the bottom (tab bar, shot-edit buttons) hung below the screen; on iPhone the extra height let
   the page scroll, sliding the top bar under iOS 26 Safari's status bar / Chrome's address bar.
   The demo screen is exactly the visible screen and the page behind it never scrolls. */
@media (max-width: 759px) {
	html:has(body.is-playing) {
		height: 100%;
		overflow: hidden;
		overscroll-behavior: none;
	}
	body.is-playing {
		min-height: 0;
		height: 100vh; /* browsers without dvh */
		height: 100dvh;
		overflow: hidden;
		overscroll-behavior: none;
	}
}