/**
 * Curatery Club page — the rebrand.
 *
 * page-curatery-club.php, built to the mockup's club.html. Eyebrows, section
 * headings and small links are in components.css.
 */

.cur-club {
	/* Blocksy colors every link through these; inherit instead. */
	--theme-link-initial-color: currentColor;
	--theme-link-hover-color: var(--cur-tomato);
	color: var(--cur-ink);
	font-family: var(--cur-sans);
}

.cur-club :where(a) {
	text-decoration: none;
}

.cur-club :is(h1, h2, h3) {
	color: inherit;
	font-family: var(--cur-serif);
	font-weight: 400;
}

.cur-club :is(ul, ol, dl) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Qualified with p, so this beats a single class: any <p> with its own class
   below is scoped to .cur-club as well, or it would lose these margins. */
.cur-club p {
	margin: 0 0 1rem;
}

.cur-club__button {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 48px;
	padding: 0.9rem 1.25rem;
	border: 2px solid var(--cur-tomato);
	background: var(--cur-tomato);
	color: #ffffff;
	font: 700 0.76rem/1.2 var(--cur-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.cur-club .cur-club__button:hover,
.cur-club .cur-club__button:focus-visible {
	border-color: var(--cur-tomato-hover);
	background: var(--cur-tomato-hover);
	color: #ffffff;
}


/* ── Hero ─────────────────────────────────────────────────── */

.cur-club__hero {
	padding: 4rem var(--cur-gutter) 4.8rem;
	background: var(--cur-peach);
}

.cur-club__hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
	max-width: var(--cur-max-width);
	margin: 0 auto;
}

.cur-club .cur-club__hero-inner h1 {
	margin: 0.5rem 0 1rem;
	font-size: clamp(3.2rem, 7vw, 7rem);
	line-height: 0.88;
	letter-spacing: -0.045em;
}

.cur-club .cur-club__lede {
	max-width: 600px;
	font-size: 1.05rem;
}

.cur-club .cur-club__already {
	color: var(--cur-green);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Two Goods leaning against each other, with a stamp over them. */
.cur-club__stack {
	position: relative;
	min-height: 420px;
}

.cur-club__stack-card {
	position: absolute;
	width: 72%;
	height: 310px;
	overflow: hidden;
	border: 10px solid var(--cur-paper);
	border-radius: 8px;
	background: var(--cur-cream);
	box-shadow: 0 18px 35px rgba(36, 27, 22, 0.18);
}

.cur-club__stack-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cur-club__stack-card:first-child {
	top: 55px;
	left: 0;
	transform: rotate(-6deg);
}

.cur-club__stack-card:nth-child(2) {
	top: 0;
	right: 0;
	transform: rotate(5deg);
}

.cur-club__stack-badge {
	position: absolute;
	right: 6%;
	bottom: 0;
	display: grid;
	place-items: center;
	width: 118px;
	height: 118px;
	border: 5px solid var(--cur-paper);
	border-radius: 50%;
	background: var(--cur-blue);
	color: var(--cur-ink);
	font: 700 0.7rem/1.3 var(--cur-sans);
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(-5deg);
}


/* ── The promises strip ───────────────────────────────────── */

.cur-club__strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	padding: 1rem var(--cur-gutter);
	background: var(--cur-ink);
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cur-club__strip a {
	color: var(--cur-mustard);
	/* Underlined: the mustard alone is too close to the white text around it
	   for anyone who doesn't see colour differences. */
	text-decoration: underline;
	text-underline-offset: 0.25em;
}


/* ── What you get ─────────────────────────────────────────── */

.cur-club__benefits {
	padding: 4.5rem var(--cur-gutter) 5rem;
	background: var(--cur-paper);
}

.cur-club .cur-club__benefit-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.4rem;
}

.cur-club__benefit {
	padding: 1.8rem 1.6rem;
	border: 1px solid var(--cur-line);
	border-radius: var(--cur-radius-panel);
	background: var(--cur-cream);
}

.cur-club__benefit-icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--cur-butter);
	color: var(--cur-ink);
}

.cur-club__benefit-icon svg {
	width: 22px;
	height: 22px;
}

.cur-club .cur-club__benefit h3 {
	margin: 0 0 0.5rem;
	font-size: 1.45rem;
	line-height: 1.05;
}

.cur-club__benefit p {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.55;
}


/* ── Plans ────────────────────────────────────────────────── */

.cur-club__plans {
	padding: 5rem var(--cur-gutter) 6rem;
	background: var(--cur-butter);
}

.cur-club__plans-inner {
	max-width: 1120px;
	margin: 0 auto;
}

.cur-club__plan-heading {
	max-width: 680px;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.cur-club .cur-club__plan-heading h2 {
	margin: 0.4rem 0;
	font-size: clamp(2.4rem, 5vw, 3.2rem);
	line-height: 0.98;
}

.cur-club .cur-club__notice {
	margin: 0 auto 1.8rem;
	padding: 1rem 1.2rem;
	max-width: 680px;
	border: 1px dashed var(--cur-line);
	border-radius: var(--cur-radius);
	background: var(--cur-paper);
	font-size: 0.88rem;
	text-align: center;
}

.cur-club__notice a {
	color: var(--cur-tomato);
	font-weight: 700;
}

.cur-club__plan-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.4rem;
}

.cur-club__plan {
	padding: 2.2rem;
	border: 1px solid var(--cur-line);
	border-radius: var(--cur-radius-panel);
	background: var(--cur-cream);
}

.cur-club__plan--featured {
	border-color: var(--cur-green);
	background: var(--cur-green);
	color: #ffffff;
}

.cur-club__plan--featured .cur-eyebrow {
	color: var(--cur-butter);
}

.cur-club .cur-club__plan h3 {
	margin: 0.45rem 0;
	font-size: 2.2rem;
	line-height: 1;
}

.cur-club .cur-club__price {
	margin: 1rem 0;
	font: 400 3rem/1 var(--cur-serif);
}

.cur-club__price small {
	font: 400 1rem/1 var(--cur-sans);
}

.cur-club .cur-club__plan-list {
	margin: 1.5rem 0 2rem;
}

.cur-club__plan-list li {
	padding: 0.7rem 0;
	border-bottom: 1px solid rgba(36, 27, 22, 0.14);
	font-size: 0.92rem;
}

.cur-club__plan--featured .cur-club__plan-list li {
	border-color: rgba(255, 255, 255, 0.22);
}

.cur-club__plan-list li::before {
	content: "✓";
	margin-right: 0.65rem;
	color: var(--cur-green);
	font-weight: 700;
}

.cur-club__plan--featured .cur-club__plan-list li::before {
	color: var(--cur-butter);
}

.cur-club .cur-club__plan-note {
	margin: 0.9rem 0 0;
	color: var(--cur-ink-muted);
	font-size: 0.75rem;
}

.cur-club .cur-club__plan--featured .cur-club__plan-note {
	color: #e7efdf;
}

/* GetPaid prints its own button; make it look like the page's. */
.cur-club__plan .getpaid-payment-button,
.cur-club__plan .wpi-payment-form button,
.cur-club__pass .getpaid-payment-button,
.cur-club__pass .wpi-payment-form button,
.cur-club__plan button[type="submit"],
.cur-club__pass button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.9rem 1.25rem;
	border: 2px solid var(--cur-tomato);
	border-radius: 0;
	background: var(--cur-tomato);
	color: #ffffff;
	font: 700 0.76rem/1.2 var(--cur-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.cur-club__plan--featured :is( .getpaid-payment-button, button[type="submit"] ) {
	border-color: var(--cur-mustard);
	background: var(--cur-mustard);
	color: var(--cur-ink);
}

/* ── The 7-day pass ───────────────────────────────────────── */

.cur-club__pass {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 1.8rem;
	padding: 2rem 2.2rem;
	border: 2px dashed var(--cur-line);
	border-radius: var(--cur-radius-panel);
	background: var(--cur-paper);
}

.cur-club .cur-club__pass h3 {
	margin: 0 0 0.4rem;
	font-size: 1.9rem;
	line-height: 1;
}

.cur-club__pass p {
	margin: 0;
	font-size: 0.88rem;
}

.cur-club__pass-buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
}

.cur-club .cur-club__pass .cur-club__price {
	margin: 0;
	font-size: 2.4rem;
}


/* ── Free against Club ────────────────────────────────────── */

.cur-club__compare {
	padding: 5rem var(--cur-gutter);
	background: var(--cur-paper);
}

.cur-club__compare-inner {
	max-width: 820px;
	margin: 0 auto;
}

.cur-club .cur-club__compare-inner h2 {
	margin: 0.4rem 0 0.6rem;
	font-size: 2.8rem;
	line-height: 1;
}

.cur-club__table {
	width: 100%;
	margin-top: 2rem;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.cur-club__table :is(th, td) {
	padding: 0.9rem 1rem;
	border-bottom: 1px solid var(--cur-line);
	text-align: center;
}

.cur-club__table tbody th {
	font-weight: 400;
	text-align: left;
}

.cur-club__table thead th {
	color: var(--cur-green);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cur-club__table tbody tr:nth-child(odd) {
	background: var(--cur-cream);
}

.cur-club__yes {
	color: var(--cur-green);
	font-weight: 700;
}

.cur-club__no {
	color: var(--cur-ink-muted);
}


/* ── Guarantee ────────────────────────────────────────────── */

.cur-club__guarantee {
	padding: 4.5rem var(--cur-gutter);
	background: var(--cur-green);
	color: #ffffff;
	text-align: center;
}

.cur-club__guarantee-inner {
	max-width: 620px;
	margin: 0 auto;
}

.cur-club__guarantee .cur-eyebrow {
	color: var(--cur-butter);
}

.cur-club .cur-club__guarantee h2 {
	margin: 0.4rem 0 1rem;
	font-size: 3rem;
	line-height: 1;
}

.cur-club__guarantee p {
	font-size: 0.95rem;
}

.cur-club__guarantee .cur-tiny-link {
	border-color: var(--cur-butter);
	color: var(--cur-butter);
}


/* ── Questions ────────────────────────────────────────────── */

.cur-club__questions {
	padding: 5rem var(--cur-gutter) 6rem;
	background: var(--cur-paper);
}

.cur-club__questions-inner {
	max-width: 760px;
	margin: 0 auto;
}

.cur-club .cur-club__questions-inner h2 {
	margin: 0.4rem 0 1.8rem;
	font-size: 2.8rem;
	line-height: 1;
}

.cur-club__faq-item {
	padding: 1.3rem 0;
	border-bottom: 1px solid var(--cur-line);
}

.cur-club__faq dt {
	margin-bottom: 0.4rem;
	font-family: var(--cur-serif);
	font-size: 1.3rem;
}

.cur-club__faq dd {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.65;
}

.cur-club__faq dd a {
	color: var(--cur-tomato);
	font-weight: 700;
}


/* ── Narrower screens ─────────────────────────────────────── */

@media (max-width: 1000px) {
	.cur-club__hero-inner {
		grid-template-columns: 1fr;
	}

	.cur-club__stack {
		max-width: 650px;
	}

	.cur-club .cur-club__benefit-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.cur-club__plan-grid,
	.cur-club .cur-club__benefit-grid {
		grid-template-columns: 1fr;
	}

	.cur-club__stack {
		min-height: 330px;
	}

	.cur-club__stack-card {
		height: 240px;
	}

	.cur-club__stack-badge {
		width: 88px;
		height: 88px;
	}

	.cur-club__pass {
		padding: 1.6rem;
	}
}

/* The buttons above lose to GetPaid's own blue "primary" button styling,
   which is written more specifically than the rule that dresses them as the
   page's buttons. White on that blue is only 3.32:1. Same look, said more
   specifically so it wins. */
.cur-club__plan .getpaid.bsui button.btn-primary,
.cur-club__pass .getpaid.bsui button.btn-primary {
	border: 2px solid var(--cur-tomato);
	background: var(--cur-tomato);
	color: #ffffff;
}

.cur-club__plan--featured .getpaid.bsui button.btn-primary {
	border-color: var(--cur-mustard);
	background: var(--cur-mustard);
	color: var(--cur-ink);
}