/* 0.13.12: sales-letter elements written into the /pro page HTML.
   Loaded in the page head only when the page uses them. The saved Appearance CSS is not changed. */

/* Short story section.
   0.13.13: the story sits on its own warm panel, so the white opening does not run
   straight into another white section. The text keeps its readable column. */
.egpp-letter-page .egpp-letter--story {
	max-width: var(--egpp-letter-wide, 1000px);
	margin: 44px auto 36px;
	padding: 54px 40px 50px;
	border: 1px solid #ecdfb8;
	border-radius: 18px;
	background: #fffaf0;
	box-sizing: border-box;
}
.egpp-letter-page .egpp-letter--story > *,
.egpp-letter-page .egpp-letter.egpp-letter--story > p.egpp-program-eyebrow {
	max-width: var(--egpp-letter-measure, 680px);
	margin-left: auto !important;
	margin-right: auto !important;
}
.egpp-letter-page .egpp-letter--story .egpp-letter-scene {
	margin-top: 0 !important;
	margin-bottom: 22px !important;
	padding: 2px 0 2px 18px !important;
	border-left: 3px solid #e8d49a !important;
	background: none !important;
	color: inherit;
	font-style: normal;
}
.egpp-letter-page .egpp-letter--story .egpp-letter-scene p {
	margin: 0 0 12px;
}
.egpp-letter-page .egpp-letter--story .egpp-letter-scene p:last-child {
	margin-bottom: 0;
}

/* "A few things you will learn" list */
.egpp-letter-page .egpp-letter-secrets {
	max-width: var(--egpp-letter-measure, 680px);
	margin: 0 auto 64px;
	padding: 26px 28px 22px;
	border: 1px solid var(--egpp-letter-line, #dfe6d7);
	border-radius: 14px;
	background: #fffdf6;
	box-sizing: border-box;
}
.egpp-letter-page .egpp-letter-secrets__title {
	margin: 0 0 6px !important;
	color: var(--egpp-letter-ink, #1f2c1e);
	font-size: 22px;
	font-weight: 750;
	line-height: 1.3;
}
.egpp-letter-page .egpp-letter-secrets__intro {
	margin: 0 0 14px !important;
	color: var(--egpp-letter-muted, #5a6656);
	font-size: 16px;
	line-height: 1.5;
}
.egpp-letter-page ul.egpp-letter-secrets__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.egpp-letter-page ul.egpp-letter-secrets__list > li {
	position: relative;
	margin: 0 !important;
	padding: 11px 0 11px 32px !important;
	border-top: 1px solid #efe8d3;
	list-style: none !important;
	font-size: 17px;
	line-height: 1.5;
}
.egpp-letter-page ul.egpp-letter-secrets__list > li:first-child {
	border-top: 0;
}
.egpp-letter-page ul.egpp-letter-secrets__list > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 19px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--egpp-button-bg, #3f6f23);
}
.egpp-letter-page .egpp-letter-secrets__where {
	display: block;
	margin-top: 2px;
	color: var(--egpp-letter-muted, #5a6656);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
}
@media (max-width: 600px) {
	.egpp-letter-page .egpp-letter-secrets {
		margin-bottom: 52px;
		padding: 20px 18px 16px;
	}
	.egpp-letter-page .egpp-letter-secrets__title {
		font-size: 20px;
	}
	.egpp-letter-page ul.egpp-letter-secrets__list > li {
		padding-left: 26px !important;
		font-size: 16.5px;
	}
	.egpp-letter-page ul.egpp-letter-secrets__list > li::before {
		left: 2px;
	}
}

/* 0.13.13: headings break between sentences, never in the middle of one.
   Each sentence is wrapped in <span class="egpp-keep"> in the page HTML. */
.egpp-letter-page .egpp-keep {
	display: inline-block;
}
/* The offer heading may use the full width, so it fits on one line on a computer. */
.egpp-letter-page .egpp-letter-offer-head {
	max-width: var(--egpp-letter-wide, 1000px);
}

@media (max-width: 600px) {
	.egpp-letter-page .egpp-letter--story {
		margin: 30px auto 28px;
		padding: 30px 18px 28px;
		border-radius: 14px;
	}
	.egpp-letter-page .egpp-letter--story .egpp-letter-scene {
		padding-left: 14px !important;
	}
}
@media (max-width: 380px) {
	/* Small phones: a slightly smaller heading keeps each sentence on its own line. */
	.egpp-letter-page h2:has(.egpp-keep) {
		font-size: 25px !important;
	}
}

/* 0.13.14: the one-line summary under "EnglishGrammar Pro" in the offer card. */
.egpp-monthly-offer .egpp-monthly-card .egpp-monthly-card__summary {
	margin: 6px 0 0;
	color: #3b4839;
	font-size: 17.5px;
	line-height: 1.5;
}
@media (max-width: 600px) {
	.egpp-monthly-offer .egpp-monthly-card .egpp-monthly-card__summary {
		font-size: 16.5px;
	}
}

/* 0.13.15: the three public course stages have names, not module-like numbers.
   Module numbers, group membership, lesson titles and member navigation are unchanged. */
.egpp-program-outline.egpp-program-outline--named-stages .egpp-program-stage > h3.egpp-program-stage__heading {
	margin: 0 0 5px;
	color: #365821;
	font-size: 26px;
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -0.015em;
	overflow-wrap: break-word;
}
.egpp-program-outline.egpp-program-outline--named-stages .egpp-program-stage:nth-child(2) > h3.egpp-program-stage__heading {
	color: #24665e;
}
.egpp-program-outline.egpp-program-outline--named-stages .egpp-program-stage:nth-child(3) > h3.egpp-program-stage__heading {
	color: #795c14;
}
.egpp-program-outline.egpp-program-outline--named-stages .egpp-program-stage > p.egpp-program-stage__range {
	margin: 0 0 16px;
	color: var(--egpp-letter-muted, #5a6656);
	font-size: 14px;
	font-weight: 650;
	line-height: 1.5;
	letter-spacing: 0.015em;
}
@media (max-width: 380px) {
	.egpp-program-outline.egpp-program-outline--named-stages .egpp-program-stage > h3.egpp-program-stage__heading {
		font-size: 24px;
	}
}