/*
	The home page of 1.1.0 (lib/home-2027.php). Loaded on the home page only.

	The page is a column of full-width bands inside the main element; each band centers its content
	in .eg-h-wrap. 1.1.2: Inter throughout, as on the rest of the site (1.1.0 and 1.1.1 set the
	headline and the section titles in a serif). One gold button per screen (the signup); the other
	actions are green.
*/

/* The frame: the page's main element carries the bands edge to edge. */
.eg-home-27 .site-inner {
	max-width: none;
	margin: 0;
	padding: 0;
}

.eg-home-27 .site-inner > .wrap,
.eg-home-27 .content-sidebar-wrap {
	max-width: none;
	margin: 0;
	padding: 0;
}

.eg-home-27 .site-inner .content {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.eg-home-27 .site-inner .content::before {
	content: none;
}

.eg-h-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--eg-wrap);
	margin: 0 auto;
	padding: 0 var(--eg-gutter);
}

.eg-home-27 .content > section {
	padding: 76px 0;
}

.eg-h-eyebrow {
	margin: 0 0 14px;
	color: var(--eg-moss);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.eg-h-title {
	max-width: 22em;
	margin: 0 0 16px;
	color: var(--eg-ink);
	font-size: 37px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.032em;
	text-wrap: balance;
}

.eg-h-lead {
	max-width: 34em;
	margin: 0 0 24px;
	color: var(--eg-text);
	font-size: 19px;
	line-height: 1.55;
}

.eg-h-arrowlink,
.eg-h-textlink {
	font-weight: 650;
}

.eg-h-arrowlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.eg-h-arrowlink svg {
	width: 18px;
	height: 18px;
	transition: transform 160ms var(--eg-ease);
}

.eg-h-arrowlink:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eg-h-arrowlink:hover svg {
	transform: translateX(3px);
}

.eg-button--ghost {
	border-color: var(--eg-rule-strong);
	background: var(--eg-page);
	color: var(--eg-moss-dark);
}

a.eg-button--ghost:focus,
.eg-button--ghost:hover,
.eg-button--ghost:focus-visible {
	border-color: var(--eg-moss);
	background: var(--eg-tint);
	color: var(--eg-moss-dark);
}


/* 1. Hero
---------------------------------------------------------------------------------------------------- */

.eg-home-27 .content > .eg-h-hero {
	position: relative;
	padding: 60px 0 62px;
	border-bottom: 1px solid var(--eg-rule);
	background:
		radial-gradient(720px 460px at 84% 30%, rgba(175, 202, 0, 0.16), rgba(175, 202, 0, 0) 70%),
		radial-gradient(620px 380px at 4% -12%, rgba(68, 105, 49, 0.09), rgba(68, 105, 49, 0) 70%),
		linear-gradient(180deg, #eef4e6 0%, #f8faf3 62%, var(--eg-page) 100%);
	overflow: hidden;
}

.eg-h-hero::before {
	position: absolute;
	top: -120px;
	right: max(-80px, calc((100% - var(--eg-wrap)) / 2 - 180px));
	width: 620px;
	height: 620px;
	background: var(--eg-pages) center / contain no-repeat;
	content: "";
	opacity: 0.85;
	pointer-events: none;
}

.eg-h-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 64px;
	align-items: center;
}

/* 1.1.2: "Start here" and the follower counts under it, the card of the classic home page
   (lib/router.php; its styles are in style.css). There it sits in a named grid area. */
.eg-h-hero__grid > .eg-hero__router {
	grid-area: auto;
	align-self: center;
	min-width: 0;
}

.eg-h-hero__title {
	margin: 0 0 20px;
	color: var(--eg-ink);
	font-size: 60px;
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.eg-h-hero__title--member {
	font-size: 42px;
	letter-spacing: -0.035em;
}

/* The marker: a stroke of highlighter under the words, like a teacher's pen. */
.eg-h-hero__title mark {
	padding: 0 0.08em;
	margin: 0 -0.08em;
	background: linear-gradient(180deg, transparent 58%, var(--eg-marker) 58%, var(--eg-marker) 92%, transparent 92%);
	color: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.eg-h-hero__lead {
	max-width: 30em;
	margin: 0 0 28px;
	color: var(--eg-text);
	font-size: 20.5px;
	line-height: 1.5;
}

.eg-h-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin: 0 0 20px;
}

.eg-h-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	color: var(--eg-text);
	font-size: 15.5px;
}

.eg-h-hero__points li {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.eg-h-hero__points svg,
.eg-h-join__points svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	color: var(--eg-moss);
	stroke-width: 2.6;
}

.eg-h-hero__points a {
	font-weight: 650;
}

/* 1.1.8: under the hero's form, two lines in place of four. The first says what signing up costs,
   with the form's small print; the second has the two other ways on, side by side with a hairline
   between them, one under the other where they don't fit (the hairline of a line's first item is
   cut off by the list's edge). */
.eg-h-hero__notes {
	max-width: 620px;
	margin: 14px 0 0;
}

.eg-h-hero__trust {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	color: var(--eg-muted);
	font-size: 14.5px;
	line-height: 1.5;
}

.eg-h-hero__trust svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	color: var(--eg-moss);
	stroke-width: 2.6;
}

.eg-h-hero__trust strong {
	display: block; /* 1.1.9: the form's small print on a line of its own under it (one long line in 1.1.8) */
	color: var(--eg-text);
	font-weight: 600;
}

.eg-h-hero__paths {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--eg-rule);
	overflow: hidden;
	list-style: none;
	color: var(--eg-text);
	font-size: 15px;
	line-height: 1.5;
}

.eg-h-hero__paths li {
	margin: 0 0 0 -17px;
	padding: 0 34px 0 16px;
	border-left: 1px solid var(--eg-rule-strong);
}

.eg-h-hero__paths li:last-child {
	padding-right: 0;
}

.eg-h-hero__paths a {
	font-weight: 650;
	white-space: nowrap;
}

/* The signup: EG Account's form, laid out as one line (the address and the button). */
.eg-h-signup {
	max-width: 520px;
}

.eg-h-signup .ega-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 10px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.eg-h-signup .ega-form > * {
	grid-column: 1 / -1;
}

/* 1.1.5: the address and the button are set in the first row by name. With Cloudflare Turnstile on
   (EG Account's settings) its box stands between the two in the form; left to the grid it took the
   second row and sent the button to the third, below and to the right of the address. The box now
   follows them: out of sight it has no height, and when Cloudflare asks for a click it shows under
   the two. */
.eg-h-signup .ega-form > .ega-field {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.eg-h-signup .ega-form > .ega-actions {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

.eg-h-signup .ega-form .ega-field input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 58px;
	padding: 0 18px;
	border: 1px solid var(--eg-rule-strong);
	border-radius: 10px;
	background: var(--eg-page);
	color: var(--eg-ink);
	font-size: 17.5px;
	box-shadow: 0 1px 2px rgba(31, 44, 30, 0.05), 0 10px 24px -18px rgba(52, 84, 32, 0.5);
}

.eg-h-signup .ega-form .ega-field input[type="email"]:focus {
	border-color: var(--eg-moss);
	outline: none;
	box-shadow: var(--eg-focus);
}

.eg-h-signup .ega-form button.ega-button {
	width: auto;
	height: 58px;
	min-height: 0;
	margin: 0;
	padding: 0 28px;
	border: 1px solid var(--eg-pro-line);
	border-radius: 10px;
	background: var(--eg-pro-gradient);
	color: var(--eg-pro-ink);
	font-size: 17.5px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: var(--eg-pro-shadow), 0 10px 22px -16px rgba(140, 105, 25, 0.8);
}

.eg-h-signup .ega-form button.ega-button:hover,
.eg-h-signup .ega-form button.ega-button:focus-visible {
	border-color: var(--eg-pro-deep-line);
	background: var(--eg-pro-gradient-hover);
	color: var(--eg-pro-ink);
}

.eg-h-signup .ega-form .ega-fine,
.eg-h-signup .ega-form .ega-switch {
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--eg-muted);
	font-size: 13.5px;
	line-height: 1.45;
	text-align: left;
}

.eg-h-signup .ega-form .ega-switch {
	margin-top: 4px;
}

.eg-h-signup .ega-form .ega-status {
	margin-top: 10px;
}

.eg-h-signup .ega-form .ega-turnstile {
	margin: 0;
}

.eg-h-signup .ega-form .ega-turnstile.is-shown {
	margin: 10px 0 0;
}

/* A member's day in the hero (EG Account prints it). */
.eg-h-today {
	margin-top: 8px;
}


/* 2. Numbers
---------------------------------------------------------------------------------------------------- */

.eg-home-27 .content > .eg-h-numbers {
	padding: 0;
	border-top: 1px solid var(--eg-rule);
	border-bottom: 1px solid var(--eg-rule);
	background: var(--eg-page);
}

.eg-h-numbers__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	margin: 0 auto;
	padding-top: 0;
	padding-bottom: 0;
	list-style: none;
}

.eg-h-numbers__list li {
	margin: 0;
	border-left: 1px solid var(--eg-rule);
}

.eg-h-numbers__list li:first-child {
	border-left: 0;
}

.eg-h-numbers__list a {
	display: block;
	height: 100%;
	padding: 24px 22px 22px;
	color: inherit;
	text-decoration: none;
	transition: background-color 140ms ease;
}

.eg-h-numbers__list li:first-child a {
	padding-left: 0;
}

.eg-h-numbers__list strong {
	display: block;
	color: var(--eg-moss-dark);
	font-size: 31px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-variant-numeric: lining-nums;
}

.eg-h-numbers__list span {
	display: block;
	margin-top: 4px;
	color: var(--eg-text);
	font-size: 14.5px;
	line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
	.eg-h-numbers__list a:hover strong {
		color: var(--eg-moss);
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 5px;
	}
}


/* 2a. Exercises (1.1.4): the search and the levels of the classic hero, the latest exercises, and
   the Matches rankings beside them
---------------------------------------------------------------------------------------------------- */

.eg-home-27 .content > .eg-h-fresh {
	padding: 56px 0 64px;
	border-bottom: 1px solid var(--eg-rule);
	background: #fbfaf5;
}

.eg-h-fresh__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.eg-h-fresh--single .eg-h-fresh__grid {
	grid-template-columns: minmax(0, 1fr);
	max-width: 860px;
}

/* The search field, as in the classic hero (style.css sets it for .eg-hero). */
.eg-h-find {
	margin: 0 0 38px;
}

.eg-h-find .eg-search-form .search-form-input {
	height: 54px;
	padding-left: 20px;
	border: 1px solid var(--eg-rule-strong);
	background: var(--eg-page);
	color: var(--eg-text);
	font-size: 17px;
	box-shadow: 0 1px 2px rgba(31, 44, 30, 0.04);
}

.eg-h-find .eg-search-form .search-form-input::placeholder {
	color: #7b837a;
}

.eg-h-find .eg-search-form .search-form-input:focus {
	border-color: var(--eg-moss);
	background: var(--eg-page);
	box-shadow: var(--eg-focus);
}

.eg-h-find .eg-search-form .search-form-submit {
	top: 5px;
	right: 5px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background-color: var(--eg-moss);
	background-size: 20px;
}

.eg-h-find .eg-search-form .search-form-submit:hover,
.eg-h-find .eg-search-form .search-form-submit:focus-visible {
	background-color: var(--eg-moss-dark);
}

.eg-h-fresh .eg-latest {
	margin: 0;
}

.eg-h-fresh .eg-latest__head h2,
.eg-h-fresh__title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.eg-h-fresh__title {
	margin-bottom: 14px;
}

.eg-h-fresh__side {
	padding: 24px 24px 22px;
	border: 1px solid var(--eg-panel-border);
	border-radius: var(--eg-panel-radius);
	background: var(--eg-page);
}


/* 3. Ten minutes a day
---------------------------------------------------------------------------------------------------- */

.eg-h-day__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 72px;
	align-items: center;
}

.eg-h-steps {
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.eg-h-steps li {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 2px 18px;
	margin: 0;
	padding: 18px 0;
	border-top: 1px solid var(--eg-rule);
}

.eg-h-steps li:last-child {
	border-bottom: 1px solid var(--eg-rule);
}

.eg-h-steps__time {
	grid-row: 1 / span 2;
	align-self: start;
	justify-self: start;
	width: 32px;
	margin-top: 2px;
	padding: 7px 0;
	border-radius: 999px;
	background: var(--eg-tint-deep);
	color: var(--eg-moss-dark);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

.eg-h-steps h3 {
	margin: 0;
	font-size: 19.5px;
	letter-spacing: -0.012em;
}

.eg-h-steps p {
	margin: 0;
	color: var(--eg-text);
	font-size: 16px;
	line-height: 1.5;
}

.eg-h-steps a {
	font-weight: 650;
	white-space: nowrap;
}

/* The example of the progress page: drawn, not a screenshot, so it is sharp at every size. */
.eg-h-example {
	margin: 0;
}

.eg-h-example__card {
	padding: 24px 26px;
	border: 1px solid var(--eg-panel-border);
	border-radius: 18px;
	background: var(--eg-page);
	box-shadow: 0 34px 60px -40px rgba(31, 60, 20, 0.6), 0 2px 4px rgba(31, 44, 30, 0.05);
}

.eg-h-example__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--eg-rule);
}

.eg-h-example__streak {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.eg-h-example__streak strong {
	color: var(--eg-moss-dark);
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
}

.eg-h-example__streak span {
	color: var(--eg-text);
	font-size: 15px;
	font-weight: 600;
}

.eg-h-example__week {
	display: flex;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eg-h-example__week li {
	display: grid;
	justify-items: center;
	gap: 5px;
	margin: 0;
	color: var(--eg-muted);
	font-size: 11.5px;
	font-weight: 600;
}

.eg-h-example__week i {
	display: block;
	width: 22px;
	height: 22px;
	border: 1.5px dashed var(--eg-rule-strong);
	border-radius: 50%;
}

.eg-h-example__week .is-done i {
	border: 0;
	background: var(--eg-moss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-8.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.eg-h-example__week .is-today i {
	border: 2px solid var(--eg-moss);
	box-shadow: 0 0 0 3px var(--eg-tint-deep);
}

.eg-h-example__week .is-today {
	color: var(--eg-moss-dark);
}

.eg-h-example__grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 6px;
	padding: 18px 0;
	border-bottom: 1px solid var(--eg-rule);
}

.eg-h-example__grid > div {
	display: grid;
	grid-template-rows: repeat(7, 1fr);
	gap: 6px;
}

.eg-h-example__grid i {
	display: block;
	aspect-ratio: 1.7;
	border-radius: 4px;
	background: #eef0e8;
}

.eg-h-example__grid .s1 { background: #cfe2bb; }
.eg-h-example__grid .s2 { background: #8fb96a; }
.eg-h-example__grid .s3 { background: var(--eg-moss); }

.eg-h-example__facts {
	margin: 0;
	padding: 6px 0 0;
	list-style: none;
}

.eg-h-example__facts li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 9px 0 0;
	color: var(--eg-text);
	font-size: 15px;
}

.eg-h-example__facts b {
	color: var(--eg-ink);
	font-weight: 650;
	text-align: right;
}

.eg-h-example figcaption {
	margin: 22px 4px 0;
	color: var(--eg-text);
	font-size: 16px;
	line-height: 1.5;
}

.eg-h-example figcaption strong {
	color: var(--eg-ink);
}

.eg-h-example__note {
	color: var(--eg-muted);
	font-size: 14px;
}

.eg-h-example figcaption .eg-h-arrowlink {
	display: flex;
	margin-top: 10px;
}


/* 4. Six ways in
---------------------------------------------------------------------------------------------------- */

.eg-home-27 .content > .eg-h-paths {
	border-top: 1px solid var(--eg-rule);
	background: linear-gradient(180deg, #f8f6ef 0%, var(--eg-page) 100%);
}

.eg-h-paths .eg-h-title {
	margin-bottom: 34px;
}

.eg-h-paths__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eg-h-paths__list li {
	margin: 0;
}

/* Five ways in (a site without the level test): three in a row, then two that share the next. */
.eg-h-paths__list--5 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.eg-h-paths__list--5 li {
	grid-column: span 2;
}

.eg-h-paths__list--5 li:nth-child(n + 4) {
	grid-column: span 3;
}

.eg-h-paths__list--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eg-h-path {
	position: relative;
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 26px 26px 24px;
	border: 1px solid var(--eg-panel-border);
	border-radius: var(--eg-panel-radius);
	background: var(--eg-page);
	color: inherit;
	text-decoration: none;
	transition: border-color 140ms ease, transform 180ms var(--eg-ease), box-shadow 180ms var(--eg-ease);
}

.eg-h-path__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0 0 18px;
	border-radius: 12px;
	background: var(--eg-tint);
	color: var(--eg-moss);
	transition: background-color 140ms ease, color 140ms ease;
}

.eg-h-path__icon svg {
	width: 24px;
	height: 24px;
}

.eg-h-path h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 21px;
	letter-spacing: -0.014em;
}

.eg-h-path h3::after {
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23355d20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	content: "";
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 140ms ease, transform 180ms var(--eg-ease);
}

.eg-h-path p {
	margin: 0 0 16px;
	color: var(--eg-text);
	font-size: 16px;
	line-height: 1.5;
}

.eg-h-path__meta {
	display: block;
	color: var(--eg-muted);
	font-size: 14px;
	font-weight: 650;
}

.eg-h-path:focus-visible {
	border-color: var(--eg-moss);
	outline: none;
	box-shadow: var(--eg-focus);
}

@media (hover: hover) and (pointer: fine) {
	.eg-h-path:hover {
		border-color: #c7d6b8;
		transform: translateY(-3px);
		box-shadow: 0 22px 36px -28px rgba(31, 60, 20, 0.6);
	}

	.eg-h-path:hover .eg-h-path__icon {
		background: var(--eg-moss);
		color: #fff;
	}

	.eg-h-path:hover h3 {
		color: var(--eg-moss-dark);
	}

	.eg-h-path:hover h3::after {
		opacity: 1;
		transform: none;
	}
}


/* 5. The grammar checker
---------------------------------------------------------------------------------------------------- */

.eg-home-27 .content > .eg-h-check {
	border-top: 1px solid #efe6c8;
	border-bottom: 1px solid #efe6c8;
	background:
		radial-gradient(560px 320px at 88% 110%, rgba(247, 226, 90, 0.22), rgba(247, 226, 90, 0) 70%),
		#fcf8ea;
}

.eg-h-check__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 72px;
	align-items: center;
}

.eg-h-check .eg-h-eyebrow {
	color: #7a5c12;
}

.eg-h-check__copy p:last-child {
	margin: 0;
}

.eg-h-check .eg-button {
	min-height: 54px;
	padding: 12px 28px;
	border-radius: 10px;
	font-size: 17.5px;
}

/* The sheet of paper with a corrected text: the mistakes struck out, the right forms marked. */
.eg-h-check__paper {
	position: relative;
	padding: 34px 36px 30px;
	border: 1px solid #e9e2cd;
	border-radius: 6px;
	background:
		repeating-linear-gradient(180deg, transparent 0, transparent 37px, rgba(68, 105, 49, 0.09) 37px, rgba(68, 105, 49, 0.09) 38px),
		#fffefa;
	background-position: 0 22px;
	color: var(--eg-ink);
	font-size: 19px;
	line-height: 38px;
	box-shadow: 0 30px 50px -36px rgba(90, 70, 20, 0.55), 0 2px 4px rgba(60, 50, 20, 0.05);
	transform: rotate(-1.2deg);
}

.eg-h-check__paper p {
	margin: 0;
}

.eg-h-check__paper p + p {
	margin-top: 38px;
}

.eg-h-check__paper del {
	color: var(--eg-wrong);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.eg-h-check__paper ins {
	padding: 0 0.12em;
	background: linear-gradient(180deg, transparent 55%, var(--eg-marker) 55%, var(--eg-marker) 94%, transparent 94%);
	color: var(--eg-moss-dark);
	font-weight: 600;
	text-decoration: none;
}


/* 6. The course (the panel is the classic one)
---------------------------------------------------------------------------------------------------- */

.eg-home-27 .content > .eg-h-course {
	padding-bottom: 20px;
}

.eg-h-course .eg-pro-panel {
	margin: 0;
	padding: 52px 56px;
	border-radius: 20px;
}

.eg-h-course .eg-pro-panel h2 {
	max-width: 18em;
	font-size: 35px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.eg-h-course .eg-pro-panel > p:not(.eg-pro-panel__note) {
	max-width: 38em;
	font-size: 18.5px;
}


/* 7. Teachers, speaking
---------------------------------------------------------------------------------------------------- */

.eg-h-audiences__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.eg-h-audience {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 22px;
	padding: 32px 34px 30px;
	border: 1px solid var(--eg-panel-border);
	border-radius: var(--eg-panel-radius);
	background: var(--eg-page);
}

.eg-h-audience__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--eg-tint);
	color: var(--eg-moss);
}

.eg-h-audience__icon svg {
	width: 26px;
	height: 26px;
}

.eg-h-audience .eg-h-eyebrow {
	margin-bottom: 8px;
}

.eg-h-audience__title {
	margin: 0 0 10px;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.022em;
}

.eg-h-audience p {
	margin: 0 0 14px;
	font-size: 16.5px;
	line-height: 1.55;
}

.eg-h-audience .eg-h-audience__action {
	margin: 0;
}

.eg-h-audience .eg-h-audience__note {
	margin: 10px 0 0;
	color: var(--eg-muted);
	font-size: 13.5px;
}


/* 8. Trust and questions
---------------------------------------------------------------------------------------------------- */

.eg-home-27 .content > .eg-h-trust {
	border-top: 1px solid var(--eg-rule);
	background: #fbfaf5;
}

.eg-h-trust__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 72px;
	align-items: start;
}

.eg-h-trust__points {
	margin: 26px 0 0;
}

.eg-h-trust__points > div {
	padding: 16px 0;
	border-top: 1px solid var(--eg-rule);
}

.eg-h-trust__points dt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
	color: var(--eg-ink);
	font-size: 18px;
	font-weight: 700;
}

.eg-h-trust__points dt svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	padding: 3px;
	border-radius: 50%;
	background: var(--eg-moss);
	color: #fff;
	stroke-width: 3;
}

.eg-h-trust__points dd {
	margin: 0 0 0 36px;
	color: var(--eg-text);
	font-size: 16px;
	line-height: 1.55;
}

.eg-h-faq__title {
	margin: 0 0 14px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.eg-h-faq details {
	border-top: 1px solid var(--eg-rule);
}

.eg-h-faq details:last-child {
	border-bottom: 1px solid var(--eg-rule);
}

.eg-h-faq summary {
	position: relative;
	padding: 16px 40px 16px 0;
	color: var(--eg-ink);
	font-size: 17.5px;
	font-weight: 650;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

.eg-h-faq summary::-webkit-details-marker {
	display: none;
}

.eg-h-faq summary::after {
	position: absolute;
	top: 50%;
	right: 6px;
	width: 11px;
	height: 11px;
	margin-top: -8px;
	border-right: 2px solid var(--eg-moss);
	border-bottom: 2px solid var(--eg-moss);
	content: "";
	transform: rotate(45deg);
	transition: transform 180ms var(--eg-ease), margin-top 180ms var(--eg-ease);
}

.eg-h-faq details[open] summary::after {
	margin-top: -3px;
	transform: rotate(-135deg);
}

.eg-h-faq summary:focus-visible {
	border-radius: var(--eg-radius);
	outline: none;
	box-shadow: var(--eg-focus);
}

.eg-h-faq details p {
	max-width: 36em;
	margin: -4px 0 18px;
	color: var(--eg-text);
	font-size: 16px;
	line-height: 1.6;
}


/* 9. The signup again
---------------------------------------------------------------------------------------------------- */

.eg-home-27 .content > .eg-h-join {
	padding: 68px 0;
	border-top: 1px solid var(--eg-tint-deep);
	background:
		radial-gradient(620px 360px at 92% 0%, rgba(175, 202, 0, 0.18), rgba(175, 202, 0, 0) 70%),
		linear-gradient(180deg, #eef4e6 0%, #f4f8ee 100%);
}

.eg-h-join__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: 64px;
	align-items: center;
}

.eg-h-join .eg-h-title {
	font-size: 40px;
}

.eg-h-join__points {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 17px;
}

.eg-h-join__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px;
}

.eg-h-join__points svg {
	margin-top: 5px;
}


/* Narrower screens
---------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1179px) {
	.eg-h-hero__grid {
		gap: 44px;
	}

	.eg-h-hero__title {
		font-size: 50px;
	}

	.eg-h-day__grid,
	.eg-h-check__grid,
	.eg-h-trust__grid {
		gap: 48px;
	}

	.eg-h-numbers__list strong {
		font-size: 27px;
	}
}

@media only screen and (max-width: 960px) {
	.eg-home-27 .content > section {
		padding: 60px 0;
	}

	.eg-home-27 .content > .eg-h-hero {
		padding: 44px 0 48px;
	}

	.eg-home-27 .content > .eg-h-fresh {
		padding: 46px 0 54px;
	}

	.eg-h-hero__grid,
	.eg-h-day__grid,
	.eg-h-check__grid,
	.eg-h-trust__grid,
	.eg-h-join__grid,
	.eg-h-fresh__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.eg-h-hero::before {
		top: -60px;
		right: -160px;
		width: 460px;
		height: 460px;
		opacity: 0.6;
	}

	.eg-h-hero__grid > .eg-hero__router,
	.eg-h-example {
		max-width: 620px;
	}

	.eg-h-paths__list,
	.eg-h-paths__list--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.eg-h-paths__list--5 li,
	.eg-h-paths__list--5 li:nth-child(n + 4) {
		grid-column: auto;
	}

	.eg-h-paths__list--5 li:last-child {
		grid-column: 1 / -1;
	}

	.eg-home-27 .content > .eg-h-numbers {
		padding: 0;
	}

	/* The numbers two to a row; an odd last one takes the whole row. */
	.eg-h-numbers__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.eg-h-numbers__list li:nth-child(odd) {
		border-left: 0;
	}

	.eg-h-numbers__list li:nth-child(n + 3) {
		border-top: 1px solid var(--eg-rule);
	}

	.eg-h-numbers__list li:nth-child(odd) a {
		padding-left: 0;
	}

	.eg-h-numbers__list li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.eg-h-check__paper {
		max-width: 560px;
	}

	.eg-h-course .eg-pro-panel {
		padding: 40px 36px;
	}

	.eg-h-audiences__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media only screen and (max-width: 600px) {
	.eg-home-27 .content > section {
		padding: 48px 0;
	}

	.eg-home-27 .content > .eg-h-hero {
		padding: 30px 0 36px;
	}

	.eg-home-27 .content > .eg-h-fresh {
		padding: 36px 0 44px;
	}

	.eg-h-find {
		margin-bottom: 30px;
	}

	.eg-h-find .eg-search-form .search-form-input {
		height: 50px;
		padding-left: 16px;
		font-size: 16px;
	}

	.eg-h-hero::before {
		top: -40px;
		right: -200px;
		width: 380px;
		height: 380px;
		opacity: 0.4;
	}

	.eg-h-hero__title {
		margin-bottom: 14px;
		font-size: 39px;
		line-height: 1.05;
	}

	.eg-h-hero__title--member {
		font-size: 31px;
	}

	.eg-h-hero__lead {
		margin-bottom: 22px;
		font-size: 18px;
	}

	.eg-h-title,
	.eg-h-join .eg-h-title {
		font-size: 29px;
	}

	.eg-h-lead {
		font-size: 17.5px;
	}

	/* One column: the address, Turnstile's box (when it shows), the button. 1.1.5: the space between
	   them is each one's own margin, not the grid's gap, so the box adds none while it is out of sight. */
	.eg-h-signup .ega-form {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.eg-h-signup .ega-form > .ega-field,
	.eg-h-signup .ega-form > .ega-actions {
		grid-column: 1;
		grid-row: auto;
	}

	.eg-h-signup .ega-form > .ega-actions {
		margin-top: 10px;
	}

	.eg-h-signup .ega-form button.ega-button {
		width: 100%;
	}

	.eg-h-signup .ega-form .ega-fine {
		margin-top: 12px;
	}

	.eg-h-signup .ega-form .ega-switch {
		margin-top: 14px;
	}

	.eg-h-signup .ega-form .ega-status {
		margin-top: 12px;
	}

	.eg-h-hero__points {
		flex-direction: column;
		gap: 6px;
		margin-top: 14px;
	}

	.eg-h-numbers__list a {
		padding: 18px 16px 16px;
	}

	.eg-h-numbers__list li:nth-child(odd) a {
		padding-left: 0;
	}

	.eg-h-numbers__list strong {
		font-size: 25px;
	}

	.eg-h-steps li {
		grid-template-columns: 32px minmax(0, 1fr);
		gap: 2px 14px;
	}

	.eg-h-example__card {
		padding: 18px 18px 20px;
	}

	.eg-h-example__top {
		flex-wrap: wrap;
	}

	.eg-h-example__week {
		gap: 7px;
	}

	.eg-h-paths__list,
	.eg-h-paths__list--5,
	.eg-h-paths__list--4 {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.eg-h-paths__list--5 li:last-child {
		grid-column: auto;
	}

	.eg-h-path {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 0 16px;
		padding: 18px 18px 16px;
	}

	.eg-h-path__icon {
		grid-row: 1 / span 3;
		width: 44px;
		height: 44px;
		margin: 0;
	}

	.eg-h-path h3 {
		margin-bottom: 4px;
		font-size: 19px;
	}

	.eg-h-path p {
		margin-bottom: 8px;
		font-size: 15.5px;
	}

	.eg-h-check__paper {
		padding: 26px 22px 22px;
		font-size: 17px;
		transform: rotate(-0.8deg);
	}

	.eg-h-course .eg-pro-panel {
		padding: 30px 22px;
		border-radius: 16px;
	}

	.eg-h-course .eg-pro-panel h2 {
		font-size: 27px;
	}

	.eg-h-audience {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 24px 20px 22px;
	}

	.eg-h-audience__title {
		font-size: 23px;
	}

	.eg-h-fresh__side {
		padding: 20px 18px;
	}
}

@media print {
	.eg-h-find,
	.eg-h-signup,
	.eg-h-join,
	.eg-h-example {
		display: none;
	}
}

/* 1.1.1: the progress card a visitor sees is an example, and says so on the card itself. */
.eg-h-example__card {
	position: relative;
}

.eg-h-example__tag {
	position: absolute;
	top: -11px;
	left: 22px;
	padding: 3px 10px;
	border: 1px solid var(--eg-rule-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--eg-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}