/* ============================================================
   ERAS® SOCIETY – JOIN / MEMBERSHIP
   Complete replacement for /assets/css/join.css
   ============================================================ */

.eras-join {
	--join-blue: #064487;
	--join-blue-dark: #043565;
	--join-blue-deep: #14213d;
	--join-sky: #78c7e8;
	--join-light: #f4f8fb;
	--join-border: #dfe8ee;
	--join-text: #344b5e;
	--join-muted: #718393;

	background: #fff;
	color: var(--join-text);
}


/* ============================================================
   SHARED
   ============================================================ */

.eras-join-kicker,
.eras-join-section-kicker {
	display: flex;
	align-items: center;
	gap: 10px;

	margin: 0 0 15px;

	color: var(--join-blue);

	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.eras-join-kicker span {
	display: block;

	width: 28px;
	height: 2px;

	background: var(--join-blue);
}

.eras-join-kicker--light {
	color: #b7e4f5;
}

.eras-join-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	min-height: 50px;
	padding: 0 20px;

	border: 1px solid transparent;
	border-radius: 7px;

	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;

	transition:
		background-color .18s ease,
		border-color .18s ease,
		color .18s ease,
		transform .18s ease,
		box-shadow .18s ease;
}

.eras-join-button svg,
.eras-join-plan__button svg,
.eras-join-plans__account svg {
	width: 16px;
	height: 16px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition: transform .18s ease;
}

.eras-join-button:hover svg,
.eras-join-plan__button:hover svg,
.eras-join-plans__account a:hover svg {
	transform: translateX(3px);
}


/* ============================================================
   HERO
   ============================================================ */

.eras-join-hero {
	position: relative;

	padding: clamp(62px, 6vw, 92px) 0 clamp(68px, 6.5vw, 98px);

	background:
		linear-gradient(
			135deg,
			#f8fbfd 0%,
			#edf6fa 100%
		);

	overflow: hidden;
}

.eras-join-hero .eras-container {
	position: relative;
	z-index: 2;
}

/*
 * Keep this old class harmless if it still exists in page-join.php.
 * The illustration is now a real <img>, not a background image.
 */
.eras-join-hereo-background {
	background: none;
}

.eras-join-hero__grid {
	position: relative;
	z-index: 2;

	display: grid;
	grid-template-columns:
		minmax(0, .92fr)
		minmax(430px, .88fr);
	gap: clamp(55px, 6vw, 105px);
	align-items: center;
}

.eras-join-hero__content {
	max-width: 690px;
}

.eras-join-hero h1 {
	margin: 0;

	color: var(--join-blue);

	font-size: clamp(55px, 5.1vw, 76px);
	font-weight: 500;
	line-height: .98;
	letter-spacing: -.045em;
}

.eras-join-hero h1 sup {
	position: relative;
	top: -.28em;

	font-size: .39em;
}

.eras-join-hero__content > p {
	max-width: 640px;

	margin: 27px 0 0;

	color: #52697b;

	font-size: 17px;
	line-height: 1.7;
}

.eras-join-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;

	margin-top: 31px;
}

.eras-join-button--primary {
	background: var(--join-blue);
	color: #fff;

	box-shadow:
		0 11px 28px rgba(6, 68, 135, .16);
}

.eras-join-button--primary:hover {
	background: var(--join-blue-dark);

	transform: translateY(-2px);
}

.eras-join-button--ghost {
	border-color: #c9dce7;

	background: rgba(255,255,255,.72);
	color: var(--join-blue);
}

.eras-join-button--ghost:hover {
	border-color: #a9cadb;

	background: #fff;

	transform: translateY(-2px);
}


/* Hero illustration */

.eras-join-hero__visual {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 430px;
}

.eras-join-hero__image {
	position: relative;
	z-index: 3;

	display: block;

	width: min(100%, 590px);
	max-width: 590px;
	height: auto;

	margin: 0 auto;

	filter: drop-shadow(0 18px 35px rgba(29, 69, 99, .05));
}

.eras-join-hero__circle {
	position: absolute;
	z-index: 1;

	border: 1px solid rgba(6,68,135,.075);
	border-radius: 50%;

	pointer-events: none;
}

.eras-join-hero__circle--one {
	width: 360px;
	height: 360px;
}

.eras-join-hero__circle--two {
	width: 500px;
	height: 500px;
}

.eras-join-hero__shape {
	position: absolute;

	border: 1px solid rgba(6,68,135,.055);
	border-radius: 50%;

	pointer-events: none;
}

.eras-join-hero__shape--one {
	top: -330px;
	right: -170px;

	width: 700px;
	height: 700px;
}

.eras-join-hero__shape--two {
	bottom: -390px;
	left: -250px;

	width: 600px;
	height: 600px;
}


/* ============================================================
   BENEFITS
   ============================================================ */

.eras-join-benefits {
	padding: 92px 0 102px;
}

.eras-join-benefits__header {
	max-width: 690px;

	margin-bottom: 38px;
}

.eras-join-benefits__header h2 {
	margin: 0;

	color: var(--join-blue);

	font-size: clamp(36px, 3.8vw, 50px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.03em;
}

.eras-join-benefits__header h2 sup {
	font-size: .44em;
}

.eras-join-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 780px);
	gap: 0;

	margin-bottom: 8px;
}

.eras-join-intro__grid p {
	margin: 0 0 15px;

	color: var(--join-text);

	font-size: 16px;
	line-height: 1.75;
}

.eras-join-intro__grid hr {
	width: 110px;
	height: 2px;

	margin: 28px 0 45px;
	padding: 0;

	border: 0;

	background: #d6e0e7;
}

.eras-join-benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.eras-join-benefit {
	padding: 31px 29px;

	border: 1px solid var(--join-border);
	border-radius: 12px;

	background: #fff;

	box-shadow:
		0 12px 32px rgba(25,55,80,.045);

	transition:
		transform .2s ease,
		border-color .2s ease,
		box-shadow .2s ease;
}

.eras-join-benefit:hover {
	border-color: rgba(6,68,135,.2);

	transform: translateY(-4px);

	box-shadow:
		0 20px 42px rgba(25,55,80,.08);
}

.eras-join-benefit__icon {
	display: grid;
	place-items: center;

	width: 50px;
	height: 50px;

	margin-bottom: 22px;

	border-radius: 50%;

	background: #e3f3fa;
	color: var(--join-blue);

	font-size: 20px;
}

.eras-join-benefit h3 {
	margin: 0 0 12px;

	color: var(--join-blue);

	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.eras-join-benefit p {
	margin: 0;

	color: var(--join-muted);

	font-size: 13px;
	line-height: 1.65;
}


/* ============================================================
   MEMBERSHIP PLANS
   ============================================================ */

.eras-join-plans {
	padding: 100px 0 105px;

	background: var(--join-light);
}

.eras-join-plans__header {
	max-width: 680px;

	margin: 0 auto 52px;

	text-align: center;
}

.eras-join-plans__header .eras-join-section-kicker {
	justify-content: center;
}

.eras-join-plans__header h2 {
	margin: 0;

	color: var(--join-blue);

	font-size: clamp(38px, 4vw, 52px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.035em;
}

.eras-join-plans__header p {
	margin: 17px 0 0;

	color: var(--join-muted);

	font-size: 14px;
	line-height: 1.65;
}

.eras-join-plans__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.eras-join-plan {
	position: relative;

	display: flex;
	flex-direction: column;

	min-height: 450px;

	padding: 30px 24px 23px;

	border: 1px solid var(--join-border);
	border-radius: 12px;

	background: #fff;

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;
}

.eras-join-plan:hover {
	border-color: rgba(6,68,135,.21);

	transform: translateY(-4px);

	box-shadow:
		0 18px 44px rgba(20,50,75,.075);
}

.eras-join-plan--featured {
	border-color: rgba(6,68,135,.32);

	box-shadow:
		0 14px 40px rgba(6,68,135,.09);
}

.eras-join-plan__badge {
	position: absolute;
	top: -12px;
	left: 50%;

	padding: 6px 10px;

	border-radius: 999px;

	background: var(--join-blue);
	color: #fff;

	font-size: 9px;
	font-weight: 700;
	letter-spacing: .045em;
	text-transform: uppercase;

	transform: translateX(-50%);
}

.eras-join-plan__icon {
	height: 30px;

	margin-bottom: 14px;

	color: #5798ef;

	font-size: 26px;
}

.eras-join-plan h3 {
	min-height: 42px;

	margin: 0;

	color: #263e52;

	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.eras-join-plan__price {
	display: flex;
	align-items: baseline;
	gap: 5px;

	margin: 22px 0 25px;
}

.eras-join-plan__price strong {
	color: var(--join-blue);

	font-size: 38px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.04em;
}

.eras-join-plan__price span {
	color: var(--join-muted);

	font-size: 11px;
}

.eras-join-plan ul {
	display: grid;
	gap: 11px;

	margin: 0 0 27px;
	padding: 0;

	list-style: none;
}

.eras-join-plan li {
	display: flex;
	align-items: center;
	gap: 9px;

	color: #617485;

	font-size: 12px;
}

.eras-join-plan li i {
	color: #4ba3c9;

	font-size: 11px;
}

.eras-join-plan__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 42px;

	margin-top: auto;
	padding: 0 13px;

	border-radius: 5px;

	background: #e7f2ff;
	color: var(--join-blue);

	font-size: 11px;
	font-weight: 600;
	text-decoration: none;

	transition:
		background .18s ease,
		color .18s ease;
}

.eras-join-plan--featured .eras-join-plan__button {
	background: var(--join-blue);
	color: #fff;
}

.eras-join-plan__button:hover {
	background: #d8eaff;
}

.eras-join-plan--featured .eras-join-plan__button:hover {
	background: var(--join-blue-dark);
}

.eras-join-plans__account {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	margin-top: 37px;

	color: var(--join-muted);

	font-size: 11px;
}

.eras-join-plans__account a {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	color: var(--join-blue);

	font-weight: 600;
	text-decoration: none;
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.eras-join-cta {
	position: relative;

	padding: 82px 0;

	background:
		linear-gradient(
			125deg,
			#073d78 0%,
			#14213d 100%
		);

	overflow: hidden;
}

.eras-join-cta__circle {
	position: absolute;
	top: -260px;
	right: -130px;

	width: 520px;
	height: 520px;

	border: 1px solid rgba(255,255,255,.07);
	border-radius: 50%;
}

.eras-join-cta__inner {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

.eras-join-cta h2 {
	max-width: 730px;

	margin: 0;

	color: #fff;

	font-size: clamp(31px, 3.5vw, 46px);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -.03em;
}

.eras-join-button--white {
	flex: 0 0 auto;

	background: #fff;
	color: var(--join-blue);
}

.eras-join-button--white:hover {
	background: #eaf5fb;

	transform: translateY(-2px);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

	.eras-join-hero {
		padding: 60px 0 72px;
	}

	.eras-join-hero__grid {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(330px, .75fr);

		gap: 40px;
	}

	.eras-join-hero__visual {
		min-height: 360px;
	}

	.eras-join-hero__image {
		width: min(100%, 480px);
	}

	.eras-join-hero__circle--one {
		width: 300px;
		height: 300px;
	}

	.eras-join-hero__circle--two {
		width: 420px;
		height: 420px;
	}

	.eras-join-plans__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


@media (max-width: 800px) {

	.eras-join-benefits__grid {
		grid-template-columns: 1fr;
	}

	.eras-join-cta__inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 30px;
	}

}


/* ============================================================
   MOBILE
   Desired order:
   Membership
   Heading
   Intro
   Illustration
   Buttons
   ============================================================ */

@media (max-width: 580px) {

	.eras-join-hero {
		padding: 30px 0 34px;
	}


	/*
	 * One vertical mobile flow.
	 */
	.eras-join-hero__grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}


	/*
	 * The actions currently live inside .eras-join-hero__content.
	 * display: contents allows the visual to be placed before them
	 * without duplicating markup.
	 */
	.eras-join-hero__content {
		display: contents;
	}


	.eras-join-kicker {
		order: 1;

		margin: 0 0 13px;
	}


	.eras-join-hero h1 {
		order: 2;

		margin: 0;

		font-size: clamp(43px, 12vw, 52px);
		line-height: .99;
		letter-spacing: -.045em;
	}


	.eras-join-hero__content > p {
		order: 3;

		margin: 20px 0 0;

		font-size: 16px;
		line-height: 1.62;
	}


	/*
	 * Illustration sits between intro and CTAs.
	 */
	.eras-join-hero__visual {
		order: 4;

		position: relative;

		display: flex;
		align-items: flex-end;
		justify-content: center;

		width: calc(100% + 36px);
		min-height: 0;

		margin: 7px -18px 0;

		overflow: hidden;
	}


	.eras-join-hero__image {
		position: relative;
		z-index: 3;

		display: block;

		width: min(100%, 390px);
		max-width: 390px;
		height: auto;

		margin: -2px auto -17px;
	}


	/*
	 * The circles should support the illustration,
	 * not make the hero taller.
	 */
	.eras-join-hero__circle--one {
		top: 24px;
		left: 50%;

		width: 215px;
		height: 215px;

		transform: translateX(-50%);
	}

	.eras-join-hero__circle--two {
		top: -15px;
		left: 50%;

		width: 315px;
		height: 315px;

		transform: translateX(-50%);
	}


	/*
	 * CTAs directly below the illustration.
	 */
	.eras-join-hero__actions {
		order: 5;

		display: grid;
		grid-template-columns: 1fr;
		gap: 9px;

		width: 100%;

		margin: 8px 0 0;
	}


	.eras-join-button {
		width: 100%;
		min-height: 54px;

		border-radius: 8px;
	}


	.eras-join-button--primary {
		box-shadow:
			0 11px 28px rgba(6, 68, 135, .17);
	}


	.eras-join-button--ghost {
		min-height: 50px;

		background: rgba(255,255,255,.76);

		box-shadow:
			inset 0 0 0 1px rgba(6,68,135,.06);

		backdrop-filter: blur(8px);
	}


	/*
	 * Keep decorative hero shapes subtle.
	 */
	.eras-join-hero__shape--one {
		top: -410px;
		right: -430px;
	}

	.eras-join-hero__shape--two {
		bottom: -430px;
		left: -430px;
	}


	/* Benefits */

	.eras-join-benefits {
		padding: 68px 0 72px;
	}

	.eras-join-benefits__header {
		margin-bottom: 28px;
	}

	.eras-join-benefits__header h2 {
		font-size: 34px;
	}

	.eras-join-intro__grid p {
		font-size: 15px;
	}

	.eras-join-intro__grid hr {
		width: 90px;

		margin: 27px 0 37px;
	}

	.eras-join-benefit {
		padding: 25px 23px;
	}


	/* Plans */

	.eras-join-plans {
		padding: 70px 0 74px;
	}

	.eras-join-plans__header {
		margin-bottom: 41px;
	}

	.eras-join-plans__header h2 {
		font-size: 38px;
	}

	.eras-join-plans__grid {
		grid-template-columns: 1fr;
		gap: 17px;
	}

	.eras-join-plan {
		min-height: 0;

		padding: 27px 23px 22px;
	}

	.eras-join-plan h3 {
		min-height: 0;
	}

	.eras-join-plans__account {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;

		margin-top: 28px;
	}


	/* Final CTA */

	.eras-join-cta {
		padding: 66px 0;
	}

	.eras-join-cta h2 {
		font-size: 34px;
	}

	.eras-join-cta__inner {
		gap: 27px;
	}

}