/**
 * Login / Join Now + Partner Program.
 *
 * Palette is taken from the site's existing tokens so these pages sit inside
 * the brand rather than beside it:
 *   #8224e3 purple (theme buttons) · #780479 deep purple (Elementor kit primary)
 *   #F8ECFF primary-light tint · #382844 ink · #f8f4fb page background
 */

.meetem-jn,
.meetem-pp {
	--meetem-purple: #8224e3;
	--meetem-purple-deep: #780479;
	--meetem-purple-tint: #f8ecff;
	--meetem-pink: #df1756;
	--meetem-ink: #382844;
	--meetem-body: rgba(56, 40, 68, 0.72);
	--meetem-line: #e9e0f2;
	--meetem-card: #ffffff;
	--meetem-radius: 18px;
	--meetem-shadow: 0 4px 24px rgba(56, 40, 68, 0.07);

	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px 72px;
	color: var(--meetem-ink);
}

/* -------------------------------------------------------------------------
 * Shared buttons
 * ---------------------------------------------------------------------- */

.meetem-jn__btn,
.meetem-pp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 30px !important;
	border: 2px solid var(--meetem-purple);
	border-radius: 999px !important;
	background: var(--meetem-purple);
	color: #fff;
	font-size: 15px !important;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.meetem-jn__btn:hover,
.meetem-pp__btn:hover {
	background: var(--meetem-purple-deep);
	border-color: var(--meetem-purple-deep);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(130, 36, 227, 0.24);
}

.meetem-jn__btn:focus-visible,
.meetem-pp__btn:focus-visible {
	outline: 3px solid var(--meetem-purple-deep);
	outline-offset: 3px;
}

.meetem-jn__btn--outline,
.meetem-pp__btn--ghost {
	background: transparent;
	color: var(--meetem-purple);
}

/* A plain text action — no button chrome, so it stays secondary to "Log In". */
.meetem-jn__link {
	margin-top: 14px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--meetem-body);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.meetem-jn__link:hover {
	color: var(--meetem-purple);
}

/* -------------------------------------------------------------------------
 * Hero — shared shape, both pages
 * ---------------------------------------------------------------------- */

.meetem-jn__hero,
.meetem-pp__hero {
	max-width: 720px;
	margin: 0 auto;
	padding: 56px 0 44px;
	text-align: center;
}

/* Out of sight, still read aloud and still indexed. Used for the sign-up
   page's h1 and the "Membership Options" h2, both of which Howard crossed out
   on 2026-10-11 — removing the elements outright would leave the page with no
   title and a section with no heading. */
.meetem-jn__sr-only,
.meetem-jn__hero--quiet .meetem-jn__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Nothing visible left in it, so it keeps only enough air to separate the VIP
   panel above from the two cards below. */
.meetem-jn__hero--quiet {
	padding: 0 0 8px;
}

.meetem-jn__eyebrow,
.meetem-pp__eyebrow {
	margin: 0 0 12px;
	color: var(--meetem-purple);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.meetem-jn__title,
.meetem-pp__title {
	margin: 0 0 16px;
	color: var(--meetem-ink);
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.meetem-jn__lede,
.meetem-pp__lede {
	margin: 0;
	color: var(--meetem-body);
	font-size: 17px;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * The two paths
 * ---------------------------------------------------------------------- */

.meetem-jn__paths {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	/* 48px here plus 128px on .meetem-jn__memberships below was the second gap
	   Howard marked "close spacing gaps" — nearly a phone screen of nothing
	   between the Join card and the prices it points at. */
	margin: 0 auto 28px;
	max-width: 860px;
}

.meetem-jn__path {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 32px;
	border: 1px solid var(--meetem-line);
	border-radius: var(--meetem-radius);
	background: var(--meetem-card);
	box-shadow: var(--meetem-shadow);
}

/* The join path is the one we want new visitors to take. */
.meetem-jn__path--join {
	border-color: var(--meetem-purple);
	background: linear-gradient(180deg, var(--meetem-purple-tint) 0%, #fff 60%);
}

.meetem-jn__badge {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--meetem-purple);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.meetem-jn__path-title {
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 800;
	color: var(--meetem-ink);
}

.meetem-jn__path-text {
	margin: 0 0 24px;
	color: var(--meetem-body);
	font-size: 15px;
	line-height: 1.6;
	/* Push the buttons onto a shared baseline however long the copy runs. */
	flex: 1 1 auto;
}

/* Howard wrote the Join Here copy as three separate promises, so each one gets
   its own line instead of running together into a paragraph. */
.meetem-jn__path-text--join span {
	display: block;
}

.meetem-jn__path-text--join span:first-child {
	font-weight: 700;
	color: var(--meetem-ink);
}

/* -------------------------------------------------------------------------
 * The inline login/register form
 *
 * WP Dating styles .wpee-register-form as a fixed, hidden, scaled-to-zero
 * modal. On this page it is a plain block in the flow, so every one of those
 * modal properties has to be unwound.
 * ---------------------------------------------------------------------- */

/* Sits below Membership Options, so it needs its own breathing room rather
   than leaning on the section above it. */
.meetem-jn__form {
	max-width: 570px;
	margin: 44px auto 0;
}

.meetem-jn__form .wpee-register-form,
.meetem-jn__form .wpee-register-form::after {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: none;
	content: none;
}

.meetem-jn__form .wpee-register-form {
	display: block;
	z-index: auto;
}

.meetem-jn__form .wpee-register-form-wrap {
	width: 100%;
	opacity: 1;
	visibility: visible;
	transform: none;
	border: 1px solid var(--meetem-line);
	border-radius: var(--meetem-radius);
	box-shadow: var(--meetem-shadow);
	overflow: hidden;
}

/* Nothing to close — this form is the page. */
.meetem-jn__form .form-close {
	display: none;
}

/* -------------------------------------------------------------------------
 * Membership options
 * ---------------------------------------------------------------------- */

.meetem-jn__memberships {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--meetem-line);
}

.meetem-jn__section-head {
	max-width: 640px;
	/* The heading above this is off screen now, so the block is one line of
	   copy and does not need a heading's worth of space under it. */
	margin: 0 auto 22px;
	text-align: center;
}

.meetem-jn__section-title,
.meetem-pp__section-title {
	margin: 0 0 12px;
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--meetem-ink);
}

.meetem-jn__section-text {
	margin: 0;
	color: var(--meetem-body);
	font-size: 16px;
	line-height: 1.6;
}

.meetem-jn__plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.meetem-jn__plan {
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
	border: 1px solid var(--meetem-line);
	border-radius: var(--meetem-radius);
	background: var(--meetem-card);
	box-shadow: var(--meetem-shadow);
	text-align: center;
	list-style: none;
}

.meetem-jn__plan-name {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: var(--meetem-ink);
}

.meetem-jn__plan-price {
	margin: 0 0 16px;
}

/* The price this plan used to be. Drawn small and faded above the real
   number, so the eye lands on what is being charged today, not on the old
   figure. Comes from meetem-signup, which owns the limited-time offer. */
.meetem-jn__plan-was {
	display: block;
	margin-bottom: 2px;
	color: var(--meetem-body);
	/* Howard circled this and wrote "make bigger" — at 16px against a 34px
	   price it read as a footnote rather than as the saving. */
	font-size: 25px;
	font-weight: 700;
	line-height: 1.1;
	opacity: 0.6;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.meetem-jn__plan-tag {
	display: inline-block;
	margin-top: 8px;
	padding: 2px 9px;
	border-radius: 11px;
	background: var(--meetem-pink, #df1756);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.meetem-jn__plan-amount {
	display: block;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--meetem-purple);
}

.meetem-jn__plan-term {
	display: block;
	margin-top: 4px;
	color: var(--meetem-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.meetem-jn__plan-desc {
	margin: 0 0 22px;
	color: var(--meetem-body);
	font-size: 14px;
	line-height: 1.55;
	flex: 1 1 auto;
}

/* What's included. A tick list rather than prose, so three cards can be
   compared down the column instead of read. Grows to fill the card so every
   button sits on the same line. */
.meetem-jn__plan-features {
	flex: 1 1 auto;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	text-align: left;
	color: var(--meetem-body);
	font-size: 14px;
	line-height: 1.5;
}

.meetem-jn__plan-features li {
	position: relative;
	margin-bottom: 9px;
	padding-left: 24px;
}

.meetem-jn__plan-features li:last-child {
	margin-bottom: 0;
}

.meetem-jn__plan-features li::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 4px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--meetem-purple);
	border-bottom: 2px solid var(--meetem-purple);
	transform: rotate(-45deg);
}

.meetem-jn__plan-btn {
	width: 100%;
	min-height: 44px;
	padding: 0 16px !important;
	font-size: 14px !important;
	white-space: normal;
}

.meetem-jn__secure {
	margin: 0;
	color: var(--meetem-body);
	font-size: 14px;
	text-align: center;
}

.meetem-jn__signed-in {
	max-width: 640px;
	margin: 0 auto 16px;
	padding: 32px;
	border: 1px solid var(--meetem-line);
	border-radius: var(--meetem-radius);
	background: var(--meetem-card);
	box-shadow: var(--meetem-shadow);
	text-align: center;
}

.meetem-jn__signed-in-title {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 800;
}

.meetem-jn__signed-in p {
	margin: 0 0 20px;
	color: var(--meetem-body);
}

/* -------------------------------------------------------------------------
 * Partner Program
 * ---------------------------------------------------------------------- */

.meetem-pp__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

.meetem-pp__cta-note {
	flex: 1 0 100%;
	margin: 6px 0 0;
	color: var(--meetem-body);
	font-size: 14px;
	line-height: 1.55;
}

.meetem-pp__section {
	max-width: 860px;
	margin: 0 auto;
	padding-top: 48px;
}

.meetem-pp__section-title {
	text-align: center;
}

.meetem-pp__list {
	max-width: 640px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.meetem-pp__list li {
	position: relative;
	padding: 12px 0 12px 34px;
	border-bottom: 1px solid var(--meetem-line);
	color: var(--meetem-body);
	font-size: 16px;
	line-height: 1.55;
}

.meetem-pp__list li:last-child {
	border-bottom: 0;
}

.meetem-pp__list li::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 20px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--meetem-purple);
}

.meetem-pp__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.meetem-pp__step {
	padding: 28px 24px;
	border: 1px solid var(--meetem-line);
	border-radius: var(--meetem-radius);
	background: var(--meetem-card);
	box-shadow: var(--meetem-shadow);
	list-style: none;
}

.meetem-pp__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--meetem-purple-tint);
	color: var(--meetem-purple-deep);
	font-size: 17px;
	font-weight: 800;
}

.meetem-pp__step-title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	color: var(--meetem-ink);
}

.meetem-pp__step p {
	margin: 0;
	color: var(--meetem-body);
	font-size: 15px;
	line-height: 1.6;
}

.meetem-pp__faq {
	max-width: 640px;
	margin: 0 auto;
}

.meetem-pp__faq dt {
	margin-top: 22px;
	font-size: 16px;
	font-weight: 700;
	color: var(--meetem-ink);
}

.meetem-pp__faq dd {
	margin: 6px 0 0;
	color: var(--meetem-body);
	font-size: 15px;
	line-height: 1.6;
}

.meetem-pp__foot {
	max-width: 860px;
	margin: 56px auto 0;
	padding: 44px 24px;
	border-radius: var(--meetem-radius);
	background: linear-gradient(135deg, var(--meetem-purple-tint) 0%, #fff 100%);
	border: 1px solid var(--meetem-line);
	text-align: center;
}

.meetem-pp__foot-title {
	margin: 0 0 22px;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 800;
	color: var(--meetem-ink);
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.meetem-jn__paths {
		grid-template-columns: 1fr;
	}

	.meetem-jn__hero,
	.meetem-pp__hero {
		padding: 36px 0 32px;
	}

	.meetem-jn__path {
		padding: 26px 22px;
	}

	.meetem-jn__btn,
	.meetem-pp__btn {
		width: 100%;
	}

	.meetem-jn__memberships {
		margin-top: 24px;
		padding-top: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.meetem-jn__btn:hover,
	.meetem-pp__btn:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * [meetem_partner_cta]
 *
 * Standalone — this sits underneath (or inside) the client's own Elementor
 * design, so it carries its own tokens and does not inherit .meetem-pp.
 * ---------------------------------------------------------------------- */

.meetem-pcta {
	--meetem-purple: #8224e3;
	--meetem-purple-deep: #780479;
	--meetem-purple-tint: #f8ecff;
	--meetem-ink: #382844;
	--meetem-body: rgba(56, 40, 68, 0.72);

	box-sizing: border-box;
	max-width: 1080px;
	margin: 0 auto;
	padding: 48px 20px 56px;
	color: var(--meetem-ink);
	text-align: center;
}

.meetem-pcta--left {
	text-align: left;
}

.meetem-pcta--right {
	text-align: right;
}

.meetem-pcta__title {
	margin: 0 0 22px;
	color: var(--meetem-ink);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	line-height: 1.25;
}

.meetem-pcta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.meetem-pcta--left .meetem-pcta__buttons {
	justify-content: flex-start;
}

.meetem-pcta--right .meetem-pcta__buttons {
	justify-content: flex-end;
}

.meetem-pcta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 12px 34px !important;
	border: 2px solid var(--meetem-purple);
	border-radius: 999px !important;
	background: var(--meetem-purple);
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.meetem-pcta__btn:hover {
	background: var(--meetem-purple-deep);
	border-color: var(--meetem-purple-deep);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(130, 36, 227, 0.24);
}

.meetem-pcta__btn:focus-visible {
	outline: 3px solid var(--meetem-purple-deep);
	outline-offset: 3px;
}

.meetem-pcta__btn--ghost {
	background: transparent;
	color: var(--meetem-purple) !important;
}

.meetem-pcta__btn--ghost:hover {
	background: var(--meetem-purple-deep);
	color: #fff !important;
}

.meetem-pcta__note {
	margin: 18px auto 0;
	max-width: 40em;
	color: var(--meetem-body);
	font-size: 15px;
	line-height: 1.6;
}

.meetem-pcta--left .meetem-pcta__note,
.meetem-pcta--right .meetem-pcta__note {
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 480px) {
	.meetem-pcta__buttons {
		flex-direction: column;
	}

	.meetem-pcta__btn {
		width: 100%;
		padding: 12px 20px !important;
	}
}

/* Just the button, sitting under the page's own heading — the surrounding
   Elementor container already supplies the breathing room. */
.meetem-pcta--bare {
	padding-top: 4px;
	padding-bottom: 8px;
}