/**!
 * @file IndexHome.css
 * @desc  Modern shell for the public-facing students home page (index.php).
 *
 *        Two hero variants:
 *          - .home-hero--guest    : two-column marketing hero with the
 *                                   poster-girl image on the right
 *          - .home-hero--loggedin : compact, friendly greeting bar
 *
 *        Below the guest hero, .home-features renders three discovery
 *        cards (Lessons / Flashcards / Quizzes).
 *
 *        Layout grid for the existing panel content uses CSS grid with
 *        responsive reordering — no .visible_1 / .visible_2 duplicate
 *        markup needed.
 *
 *        All rules scoped under body.home-page so nothing leaks.
 */
/************************************************************************************************************************************/

body.home-page {
	--home-brand:        var(--sw-brand-color, #0e6630);
	--home-brand-dark:   #084a22;
	--home-brand-soft:   #e8f3ec;
	--home-brand-tint:   #f4f9f5;
	--home-ink:          #14211a;
	--home-ink-soft:     #4a5b51;
	--home-card:         #ffffff;
	--home-border:       #e0e8e3;
	--home-radius:       18px;
	--home-radius-sm:    12px;
	--home-max-width:    1400px;
	--home-shadow-card:  0 1px 2px rgba(20, 50, 30, 0.04),
	                     0 8px 28px rgba(20, 50, 30, 0.08);
	--home-shadow-tile:  0 1px 2px rgba(20, 50, 30, 0.04),
	                     0 4px 18px rgba(20, 50, 30, 0.06);

	/* Override sw_common.css body green so sections sit on a neutral page
	   instead of green stripes between cards. Scoped to .home-page only. */
	background-color: var(--home-brand-tint) !important;
}

/* ------------------------------------------------------------------ */
/* HERO — shared shell                                                 */
/* ------------------------------------------------------------------ */

body.home-page .home-hero {
	background: var(--home-card);
	color: var(--home-ink);
	margin: 18px auto;
	max-width: var(--home-max-width);
	border-radius: var(--home-radius);
	box-shadow: var(--home-shadow-card);
	overflow: hidden;
	position: relative;
}

body.home-page .home-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--home-brand-dark);
	background: var(--home-brand-soft);
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 16px;
}

body.home-page .home-hero__title {
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 14px 0;
	color: var(--home-ink);
	letter-spacing: -0.01em;
}

body.home-page .home-hero__subtitle {
	margin: 0 0 22px 0;
	font-size: clamp(0.98rem, 1.15vw, 1.1rem);
	line-height: 1.6;
	color: var(--home-ink-soft);
	max-width: 56ch;
}

body.home-page .home-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

body.home-page .home-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: transform 0.1s ease, background 0.15s ease,
	            border-color 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
	white-space: nowrap;
}

body.home-page .home-hero__btn--primary {
	background: var(--home-brand);
	color: #fff;
	box-shadow: 0 3px 10px rgba(24, 130, 62, 0.25);
}

body.home-page .home-hero__btn--primary:hover {
	background: var(--home-brand-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(24, 130, 62, 0.3);
}

body.home-page .home-hero__btn--secondary {
	background: transparent;
	color: var(--home-brand-dark);
	border-color: #c8d5cd;
}

body.home-page .home-hero__btn--secondary:hover {
	background: var(--home-brand-soft);
	color: var(--home-brand-dark);
	border-color: var(--home-brand);
	transform: translateY(-1px);
}

body.home-page .home-hero__trust {
	font-size: 0.86rem;
	color: var(--home-ink-soft);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Soft text-only link rendered below the two primary hero buttons. Routes
   undecided visitors to the About page instead of forcing them into a
   register/sign-in choice. */
body.home-page .home-hero__link-soft {
	display: inline-block;
	margin-top: 6px;
	margin-bottom: 4px;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--home-brand);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.12s ease, color 0.12s ease;
}

body.home-page .home-hero__link-soft:hover,
body.home-page .home-hero__link-soft:focus-visible {
	color: #084a22;
	border-bottom-color: currentColor;
	text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* HERO — GUEST (two-column marketing)                                 */
/* ------------------------------------------------------------------ */

body.home-page .home-hero--guest {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: stretch;
}

body.home-page .home-hero--guest .home-hero__body {
	padding: 48px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

/* Visual column — matches the source image's 2:1 aspect ratio exactly so
   the image fills the column with zero cropping, preserving the in-image
   title ("Let's Study English!" / etc). Hero height is driven by the
   image's natural shape; text column stretches to match. */
body.home-page .home-hero--guest .home-hero__visual {
	position: relative;
	overflow: hidden;
	aspect-ratio: 2 / 1;
}

body.home-page .home-hero--guest .home-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* ------------------------------------------------------------------ */
/* HERO — LOGGED IN (compact greeting)                                 */
/* ------------------------------------------------------------------ */

body.home-page .home-hero--loggedin {
	padding: 32px 36px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 20px;
	align-items: center;
	border-left: 6px solid var(--home-brand);
}

body.home-page .home-hero--loggedin .home-hero__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--home-brand-soft);
	color: var(--home-brand-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	flex: 0 0 auto;
}

body.home-page .home-hero--loggedin .home-hero__body {
	min-width: 0;
}

body.home-page .home-hero--loggedin .home-hero__eyebrow {
	margin-bottom: 4px;
	padding: 4px 10px;
	font-size: 0.72rem;
}

body.home-page .home-hero--loggedin .home-hero__title {
	font-size: clamp(1.3rem, 1.8vw, 1.6rem);
	margin: 0 0 4px 0;
}

body.home-page .home-hero--loggedin .home-hero__subtitle {
	margin: 0;
	font-size: 0.95rem;
}

body.home-page .home-hero--loggedin .home-hero__actions {
	margin-bottom: 0;
	flex-wrap: nowrap;
}

body.home-page .home-hero--loggedin .home-hero__btn {
	padding: 10px 18px;
	font-size: 0.92rem;
}

/* ------------------------------------------------------------------ */
/* HERO SEARCH BAR — passive search "input" (actually a button) that  */
/* opens the global search overlay. Lives above the trust strip so   */
/* every audience sees it as an above-the-fold entry point.          */
/* ------------------------------------------------------------------ */

body.home-page .home-search-bar {
	max-width: var(--home-max-width);
	margin: 18px auto 6px auto;
	padding: 0 18px;
}

body.home-page .home-search-bar__field {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px 11px 14px;
	background: #fff;
	color: var(--home-ink-soft);
	border: 1px solid rgba(14, 102, 48, 0.22);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(8, 74, 34, 0.06);
	font-size: 0.95rem;
	text-align: left;
	cursor: text;       /* I-beam so it really feels like an input */
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

body.home-page .home-search-bar__field:hover,
body.home-page .home-search-bar__field:focus-visible {
	border-color: var(--home-brand);
	box-shadow: 0 2px 10px rgba(14, 102, 48, 0.14);
	outline: none;
}

body.home-page .home-search-bar__icon {
	color: var(--home-brand);
	font-size: 0.95rem;
	flex-shrink: 0;
}

body.home-page .home-search-bar__placeholder {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.home-page .home-search-bar__kbd {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--home-ink-soft);
	background: rgba(14, 102, 48, 0.08);
	border: 1px solid rgba(14, 102, 48, 0.18);
	border-radius: 5px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
	flex-shrink: 0;
}

@media (max-width: 600px) {
	body.home-page .home-search-bar {
		margin: 12px auto 4px auto;
		padding: 0 12px;
	}
	body.home-page .home-search-bar__field {
		padding: 9px 12px;
		font-size: 0.88rem;
		gap: 8px;
	}
	body.home-page .home-search-bar__kbd {
		display: none;   /* no keyboard on phones — hide the shortcut hint */
	}
}

/* ------------------------------------------------------------------ */
/* TRUST STRIP — three live library counts (guests only)               */
/* Sits between the hero/join-strip block and .home-content. Gives    */
/* guests a "real library, growing weekly" signal before they have    */
/* to scroll into the lesson grid.                                     */
/* ------------------------------------------------------------------ */

body.home-page .home-trust-strip {
	max-width: var(--home-max-width);
	margin: 18px auto 6px auto;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: linear-gradient(90deg,
		rgba(14, 102, 48, 0.07) 0%,
		rgba(14, 102, 48, 0.12) 50%,
		rgba(14, 102, 48, 0.07) 100%);
	border-radius: var(--home-radius-sm);
	border: 1px solid rgba(14, 102, 48, 0.18);
}

body.home-page .home-trust-strip__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 2px 8px;
	text-align: center;
}

body.home-page .home-trust-strip__count {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--home-brand);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

body.home-page .home-trust-strip__label {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--home-ink-soft);
}

body.home-page .home-trust-strip__divider {
	width: 1px;
	height: 36px;
	background: rgba(14, 102, 48, 0.20);
	flex-shrink: 0;
}

@media (max-width: 600px) {
	body.home-page .home-trust-strip {
		margin: 12px auto 4px auto;
		padding: 10px 8px;
		gap: 0;
	}
	body.home-page .home-trust-strip__count {
		font-size: 1.3rem;
	}
	body.home-page .home-trust-strip__label {
		font-size: 0.68rem;
		letter-spacing: 0.02em;
	}
	body.home-page .home-trust-strip__divider {
		height: 28px;
	}
}

/* ------------------------------------------------------------------ */
/* JOIN STRIP — slim persistent CTA for returning guests               */
/* Replaces the suppressed full hero for visitors who've dismissed the */
/* cookie banner. Lives just above .home-content so it sits at the top */
/* of the scroll area, narrow enough not to compete with content.      */
/* ------------------------------------------------------------------ */

body.home-page .home-join-strip {
	max-width: var(--home-max-width);
	margin: 24px auto 6px auto;
	padding: 10px 14px 10px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: linear-gradient(90deg, rgba(14, 102, 48, 0.10) 0%, rgba(14, 102, 48, 0.04) 100%);
	border: 1px solid rgba(14, 102, 48, 0.20);
	border-radius: var(--home-radius-sm);
}

body.home-page .home-join-strip__body {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

body.home-page .home-join-strip__icon {
	color: var(--home-brand);
	font-size: 1rem;
	flex-shrink: 0;
}

body.home-page .home-join-strip__text {
	font-size: 0.92rem;
	color: var(--home-ink, #1f2937);
	line-height: 1.4;
}

body.home-page .home-join-strip__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

body.home-page .home-join-strip__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--home-brand);
	color: #fff;
	border-radius: 999px;
	font-size: 0.86rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.15s ease;
}

body.home-page .home-join-strip__btn:hover,
body.home-page .home-join-strip__btn:focus-visible {
	background: #084a22;
	color: #fff;
	text-decoration: none;
}

body.home-page .home-join-strip__dismiss {
	background: transparent;
	border: 0;
	padding: 6px 8px;
	cursor: pointer;
	color: var(--home-ink-soft);
	border-radius: 6px;
	font-size: 0.92rem;
	line-height: 1;
	transition: background 0.12s ease, color 0.12s ease;
}

body.home-page .home-join-strip__dismiss:hover,
body.home-page .home-join-strip__dismiss:focus-visible {
	background: rgba(14, 102, 48, 0.10);
	color: var(--home-brand);
}

@media (max-width: 600px) {
	body.home-page .home-join-strip {
		margin: 16px auto 4px auto;
		padding: 8px 10px 8px 12px;
		gap: 8px;
	}
	body.home-page .home-join-strip__text {
		font-size: 0.84rem;
	}
	body.home-page .home-join-strip__btn {
		padding: 7px 10px;
		font-size: 0.80rem;
	}
}

/* ------------------------------------------------------------------ */
/* CONTINUE LEARNING — logged-in students only                         */
/* Surfaces the most recent lesson view as a horizontal "resume" card. */
/* Lives between the .home-hero--loggedin block and .home-content.     */
/* ------------------------------------------------------------------ */

body.home-page .home-resume {
	max-width: var(--home-max-width);
	margin: 4px auto 24px auto;
	padding: 0 18px;
}

body.home-page .home-resume__card {
	display: grid;
	grid-template-columns: 140px 1fr auto;
	align-items: center;
	gap: 18px;
	padding: 12px 18px 12px 12px;
	background: var(--home-card);
	border-radius: var(--home-radius-sm);
	box-shadow: var(--home-shadow-tile);
	border-left: 4px solid var(--home-brand);
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.home-page .home-resume__card:hover,
body.home-page .home-resume__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(8, 74, 34, 0.18);
	text-decoration: none;
}

body.home-page .home-resume__media {
	width: 140px;
	height: 90px;
	border-radius: 8px;
	overflow: hidden;
	background: #e6efe9;
}

body.home-page .home-resume__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body.home-page .home-resume__body {
	min-width: 0;
}

body.home-page .home-resume__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--home-brand);
	margin-bottom: 4px;
}

body.home-page .home-resume__title {
	margin: 0 0 4px 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--home-ink, #1f2937);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

body.home-page .home-resume__meta {
	margin: 0;
	font-size: 0.82rem;
	color: var(--home-ink-soft);
	line-height: 1.4;
}

body.home-page .home-resume__meta i {
	color: var(--home-brand);
	margin-right: 4px;
	vertical-align: -0.05em;
}

body.home-page .home-resume__cta {
	display: flex;
	align-items: center;
}

body.home-page .home-resume__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--home-brand);
	color: #fff;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.15s ease;
}

body.home-page .home-resume__card:hover .home-resume__btn,
body.home-page .home-resume__card:focus-visible .home-resume__btn {
	background: #084a22;
}

@media (max-width: 600px) {
	body.home-page .home-resume {
		margin: 0 auto 14px auto;
		padding: 0 12px;
	}
	body.home-page .home-resume__card {
		grid-template-columns: 90px 1fr;
		grid-template-areas:
			"media body"
			"cta   cta";
		gap: 12px;
		padding: 10px 12px;
	}
	body.home-page .home-resume__media {
		grid-area: media;
		width: 90px;
		height: 70px;
	}
	body.home-page .home-resume__body {
		grid-area: body;
	}
	body.home-page .home-resume__cta {
		grid-area: cta;
		justify-content: flex-end;
	}
	body.home-page .home-resume__title {
		font-size: 1rem;
	}
}

/* ------------------------------------------------------------------ */
/* LOGGED-IN STUDENT ACTIVITY ZONE                                     */
/* "What's new since you were last here" + "Your recent quizzes"       */
/* Two paired panels sitting between the Continue Learning widget and  */
/* the home-content area. Only renders for logged-in students.          */
/* ------------------------------------------------------------------ */

body.home-page .home-stu-activity {
	max-width: var(--home-max-width);
	margin: 0 auto 18px auto;
	padding: 0 18px;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 14px;
}

body.home-page .home-stu-activity__panel {
	background: var(--home-card);
	border-radius: var(--home-radius-sm);
	box-shadow: var(--home-shadow-tile);
	padding: 14px 18px 16px 18px;
	min-width: 0;
}

body.home-page .home-stu-activity__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--home-brand-dark);
	margin: 0 0 10px 0;
}

body.home-page .home-stu-activity__title i {
	color: var(--home-brand);
}

/* ---- What's new panel ---- */

body.home-page .home-stu-whatsnew__count {
	font-size: 0.95rem;
	color: var(--home-ink);
	margin: 0 0 8px 0;
	line-height: 1.4;
}

body.home-page .home-stu-whatsnew__number {
	display: inline-block;
	min-width: 1.4em;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--home-brand);
	color: #fff;
	font-weight: 800;
	margin-right: 6px;
	font-variant-numeric: tabular-nums;
}

body.home-page .home-stu-whatsnew__cta {
	display: inline-block;
	margin-top: 2px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--home-brand);
	text-decoration: none;
}

body.home-page .home-stu-whatsnew__cta:hover {
	text-decoration: underline;
}

body.home-page .home-stu-whatsnew__empty {
	margin: 0;
	color: var(--home-ink-soft);
	font-size: 0.92rem;
	font-style: italic;
}

/* ---- Your recent quizzes panel ---- */

body.home-page .home-stu-quizzes__empty {
	margin: 0;
	color: var(--home-ink-soft);
	font-size: 0.92rem;
	font-style: italic;
}

body.home-page .home-stu-quizzes__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.home-page .home-stu-quiz {
	padding: 8px 0;
	border-bottom: 1px solid var(--home-border);
}

body.home-page .home-stu-quiz:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

body.home-page .home-stu-quiz:first-child {
	padding-top: 0;
}

body.home-page .home-stu-quiz__name {
	display: block;
	font-weight: 600;
	color: var(--home-ink);
	text-decoration: none;
	font-size: 0.95rem;
	line-height: 1.3;
	margin-bottom: 4px;
}

body.home-page .home-stu-quiz__name:hover {
	color: var(--home-brand-dark);
	text-decoration: underline;
}

body.home-page .home-stu-quiz__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

body.home-page .home-stu-quiz__score {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.home-page .home-stu-quiz__score--good {
	background: #def4e4;
	color: #1a6a35;
}

body.home-page .home-stu-quiz__score--mid {
	background: #fdf3d4;
	color: #8a5200;
}

body.home-page .home-stu-quiz__score--low {
	background: #fde0de;
	color: #a32a1f;
}

body.home-page .home-stu-quiz__time {
	color: var(--home-ink-soft);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}

body.home-page .home-stu-quiz__retry {
	margin-left: auto;
	font-size: 0.82rem;
	color: var(--home-brand);
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

body.home-page .home-stu-quiz__retry:hover {
	text-decoration: underline;
}

@media (max-width: 720px) {
	body.home-page .home-stu-activity {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	body.home-page .home-stu-quiz__retry {
		margin-left: 0;
	}
}

/* ------------------------------------------------------------------ */
/* FEATURE TILES (guest only)                                          */
/* ------------------------------------------------------------------ */

body.home-page .home-features {
	max-width: var(--home-max-width);
	margin: 0 auto 28px auto;
	padding: 0 18px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

body.home-page .home-feature {
	background: var(--home-card);
	border-radius: var(--home-radius-sm);
	box-shadow: var(--home-shadow-tile);
	padding: 22px 22px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 3px solid var(--home-brand);
	transition: transform 0.12s ease, box-shadow 0.15s ease, border-top-color 0.15s ease;
	text-decoration: none;
	color: inherit;
}

body.home-page .home-feature:hover {
	transform: translateY(-2px);
	box-shadow: 0 1px 3px rgba(20, 50, 30, 0.05),
	            0 10px 28px rgba(20, 50, 30, 0.1);
	border-top-color: var(--home-brand-dark);
	text-decoration: none;
	color: inherit;
}

body.home-page .home-feature__cta {
	margin-top: auto;
	padding-top: 6px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--home-brand-dark);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color 0.12s ease, transform 0.15s ease;
	text-decoration: none;
}

body.home-page .home-feature:hover .home-feature__cta {
	color: var(--home-brand);
	transform: translateX(2px);
}

/* List-style tile (live recent content). The tile is no longer a single
   link — each list item is its own link, and the bottom CTA goes to the
   browse-all page for that type. */

body.home-page .home-feature--list {
	cursor: default;
	padding-bottom: 14px;
}

body.home-page .home-feature--list:hover {
	transform: none;
	box-shadow: var(--home-shadow-tile);
}

body.home-page .home-feature__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}

body.home-page .home-feature--list .home-feature__title {
	margin: 0;
}

body.home-page .home-feature__list {
	list-style: none;
	margin: 4px -8px 4px -8px;
	padding: 0;
}

body.home-page .home-feature__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 6px;
	color: var(--home-ink);
	text-decoration: none;
	font-size: 0.9rem;
	line-height: 1.35;
	transition: background 0.12s ease, color 0.12s ease;
}

body.home-page .home-feature__item:hover {
	background: var(--home-brand-soft);
	color: var(--home-brand-dark);
	text-decoration: none;
}

body.home-page .home-feature__thumb {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--home-brand-soft);
}

body.home-page .home-feature__item-text {
	flex: 1;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.home-page .home-feature__item-meta {
	font-size: 0.78rem;
	color: var(--home-ink-soft);
	font-weight: 400;
}

body.home-page .home-feature__icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--home-brand-soft);
	color: var(--home-brand-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex: 0 0 auto;
}

body.home-page .home-feature__title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0;
	color: var(--home-ink);
}

body.home-page .home-feature__desc {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--home-ink-soft);
}

/* ------------------------------------------------------------------ */
/* SECTION WRAPPER (themes, lessons, courses, etc.)                   */
/* ------------------------------------------------------------------ */

body.home-page .home-section {
	max-width: var(--home-max-width);
	margin: 0 auto;
	padding: 28px 18px 12px 18px;
}

body.home-page .home-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

body.home-page .home-section__heading {
	min-width: 0;
}

body.home-page .home-section__title {
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	font-weight: 800;
	color: var(--home-ink);
	margin: 0;
	letter-spacing: -0.01em;
}

/* Featured section — used for Latest Lessons to give it extra emphasis
   relative to the surrounding sections. */
body.home-page .home-section--featured {
	padding-top: 36px;
	padding-bottom: 18px;
}

body.home-page .home-section--featured .home-section__title {
	font-size: clamp(1.7rem, 2.6vw, 2.2rem);
}

body.home-page .home-section--featured .home-section__subtitle {
	font-size: 1rem;
}

body.home-page .home-section__subtitle {
	font-size: 0.95rem;
	color: var(--home-ink-soft);
	margin: 4px 0 0 0;
}

/* Right-side actions in a section header (count chip + "Browse all" link).
   Balances the heading on the left so the header doesn't read as empty. */
body.home-page .home-section__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

body.home-page .home-section__count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--home-brand-dark);
	background: var(--home-brand-soft);
	border-radius: 999px;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

body.home-page .home-section__viewall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #fff;
	background: var(--home-brand);
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.12s ease, transform 0.12s ease;
}

body.home-page .home-section__viewall:hover {
	background: var(--home-brand-dark);
	color: #fff;
	text-decoration: none;
	transform: translateX(2px);
}

body.home-page .home-section__viewall i {
	font-size: 0.78rem;
	transition: transform 0.15s ease;
}

body.home-page .home-section__viewall:hover i {
	transform: translateX(2px);
}

/* ---- Mobile compression pass ----
   On narrow viewports the chunky headings and pills eat too much vertical
   space and push the actual lesson content below the fold. Tighten the
   type scale, drop the section paddings, slim the action pills, and stack
   the count + Browse-all button vertically on the right of the heading
   instead of wrapping below it. */
@media (max-width: 600px) {

	body.home-page .home-section {
		padding: 12px 14px 8px 14px;
	}

	body.home-page .home-section__header {
		margin-bottom: 6px;
		gap: 10px;
		align-items: flex-start;
		flex-wrap: nowrap;       /* keep title left + actions right on same row */
	}

	body.home-page .home-section__heading {
		flex: 1;
		min-width: 0;
	}

	/* Stack count pill above the Browse-all button on the right side. */
	body.home-page .home-section__actions {
		flex-direction: column;
		align-items: flex-end;
		gap: 6px;
	}

	body.home-page .home-section__title {
		font-size: 1.25rem;
		letter-spacing: -0.005em;
		line-height: 1.2;
	}

	body.home-page .home-section--featured {
		padding-top: 2px;        /* hugs the content wrapper top */
		padding-bottom: 8px;
	}

	body.home-page .home-section--featured .home-section__title {
		font-size: 1.4rem;
	}

	body.home-page .home-section--featured .home-section__subtitle {
		font-size: 0.86rem;
	}

	body.home-page .home-section__subtitle {
		font-size: 0.84rem;
		margin-top: 2px;
	}

	body.home-page .home-section__count,
	body.home-page .home-section__viewall {
		padding: 4px 10px;
		font-size: 0.78rem;
	}

	body.home-page .home-section__viewall {
		padding: 5px 12px;
	}

	/* Lesson card heading is also chunky on mobile — bring down. */
	body.home-page .home-lesson-card__title {
		font-size: 1.05rem;
	}
}

body.home-page .home-section__cta {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--home-brand-dark);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 4px;
	border-bottom: 1.5px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}

body.home-page .home-section__cta:hover {
	color: var(--home-brand-dark);
	border-bottom-color: var(--home-brand);
}

/* ------------------------------------------------------------------ */
/* CONTENT GRID — main column (lessons + curricula) + right rail       */
/* (themes panel with nested lesson links).                            */
/* ------------------------------------------------------------------ */

body.home-page .home-content {
	max-width: var(--home-max-width);
	margin: 0 auto;
	padding: 10px 18px 12px 18px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 28px;
	align-items: start;
}

body.home-page .home-content__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

body.home-page .home-content__rail {
	/* No sticky — both columns scroll together naturally. */
}

/* When the rail lives inside the content grid, its section padding is
   already provided by the grid itself — strip the duplicate padding. */
body.home-page .home-content__main > .home-section {
	padding: 0;
	max-width: none;
}

/* ------------------------------------------------------------------ */
/* THEMES RAIL — sidebar listing of themes with nested lesson links    */
/* ------------------------------------------------------------------ */

/* Note: rail intentionally does NOT have overflow:hidden, so the custom
   tooltips on lesson links can pop outside the rail. The rounded corners
   are handled by the header (top) and last child (bottom) instead. */
body.home-page .home-themes-rail {
	background: var(--home-card);
	border-radius: var(--home-radius-sm);
	box-shadow: var(--home-shadow-tile);
}

body.home-page .home-themes-rail__header {
	padding: 18px 20px 14px 20px;
	background: var(--home-brand-soft);
	border-bottom: 1px solid var(--home-border);
	border-radius: var(--home-radius-sm) var(--home-radius-sm) 0 0;
}

body.home-page .home-themes-rail > .home-rail-theme:last-child {
	border-radius: 0 0 var(--home-radius-sm) var(--home-radius-sm);
}

body.home-page .home-themes-rail__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	color: var(--home-ink);
}

body.home-page .home-themes-rail__subtitle {
	font-size: 0.82rem;
	color: var(--home-ink-soft);
	margin: 3px 0 0 0;
}

/* Rail-theme card: image + name as a compact header row at top,
   lesson links span the full card width below to give titles more room. */
body.home-page .home-rail-theme {
	padding: 14px 14px 14px 14px;
	border-bottom: 1px solid var(--home-border);
	display: grid;
	grid-template-columns: 72px 1fr;
	grid-template-rows: auto auto;
	column-gap: 14px;
	row-gap: 10px;
	align-items: start;
}

body.home-page .home-rail-theme:last-child {
	border-bottom: none;
}

body.home-page .home-rail-theme__image {
	grid-column: 1;
	grid-row: 1;
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--home-brand-soft);
	flex: 0 0 auto;
}

body.home-page .home-rail-theme__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body.home-page .home-rail-theme__body {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	min-width: 0;
}

body.home-page .home-rail-theme__name {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0;
	color: var(--home-ink);
	text-decoration: none;
	line-height: 1.3;
	display: block;
}

body.home-page .home-rail-theme__name:hover {
	color: var(--home-brand-dark);
	text-decoration: underline;
}

body.home-page .home-rail-theme__meta {
	font-size: 0.76rem;
	color: var(--home-brand-dark);
	font-weight: 600;
	margin: 2px 0 0 0;
}

body.home-page .home-rail-theme__desc {
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--home-ink-soft);
	margin: 6px 0 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Lessons row — spans the full card width so titles have room to wrap. */
body.home-page .home-rail-theme__lessons {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.home-page .home-rail-theme__lesson-link {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 5px 8px;
	border-radius: 5px;
	color: var(--home-ink);
	text-decoration: none;
	font-size: 0.88rem;
	line-height: 1.35;
	transition: background 0.12s ease, color 0.12s ease;
	cursor: help;
}

body.home-page .home-rail-theme__lesson-link::before {
	content: "›";
	color: var(--home-brand);
	font-weight: 700;
	flex: 0 0 auto;
	line-height: 1.35;
}

body.home-page .home-rail-theme__lesson-link:hover {
	background: var(--home-brand-soft);
	color: var(--home-brand-dark);
}

body.home-page .home-rail-theme__lesson-text {
	flex: 1;
	min-width: 0;
	word-break: break-word;
}

body.home-page .home-rail-theme__more {
	display: block;
	margin-top: 4px;
	padding: 4px 8px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--home-brand-dark);
	text-decoration: none;
}

body.home-page .home-rail-theme__more:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* RAIL LESSON TOOLTIP — Wikipedia-style hovercard with image + intro  */
/* Pops to the LEFT of the lesson link (rail is on the right of the    */
/* page, so left is into the main content area where it has room).    */
/* Touch devices and narrow viewports skip this entirely.              */
/* ------------------------------------------------------------------ */

/* Outer tooltip is a transparent layout container that includes a 14px
   transparent right-edge "bridge" so the cursor stays inside the link's
   hover area when moving from the link toward the card. */
body.home-page .home-rail-tooltip {
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(8px);
	width: calc(340px + 14px);
	padding-right: 14px;
	font-size: 0.86rem;
	line-height: 1.55;
	text-align: left;
	color: var(--home-ink);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	z-index: 100;
}

body.home-page .home-rail-tooltip__card {
	position: relative;
	display: block;
	background: var(--home-card);
	border: 1px solid rgba(20, 50, 30, 0.1);
	border-radius: 10px;
	box-shadow: 0 14px 36px rgba(20, 50, 30, 0.18),
	            0 2px 6px rgba(20, 50, 30, 0.08);
}

/* Arrow attached to the card (not the outer container), pointing right
   across the bridge toward the link. */
body.home-page .home-rail-tooltip__card::before,
body.home-page .home-rail-tooltip__card::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

body.home-page .home-rail-tooltip__card::before {
	border-left: 8px solid rgba(20, 50, 30, 0.12);
	margin-left: 0;
}

body.home-page .home-rail-tooltip__card::after {
	border-left: 8px solid var(--home-card);
	margin-left: -1px;
}

/* --- inner pieces (all spans, because tooltip lives inside an <a>) --- */

body.home-page .home-rail-tooltip__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--home-brand-soft);
	overflow: hidden;
	border-radius: 10px 10px 0 0;
}

body.home-page .home-rail-tooltip__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body.home-page .home-rail-tooltip__body {
	display: block;
	padding: 14px 16px 14px 16px;
}

body.home-page .home-rail-tooltip__title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--home-ink);
	margin-bottom: 6px;
	line-height: 1.3;
}

body.home-page .home-rail-tooltip__intro {
	display: block;
	color: var(--home-ink-soft);
	font-size: 0.88rem;
	line-height: 1.55;
	/* Cap to a tidy block; PHP also caps at ~240 chars. */
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.home-page .home-rail-tooltip__cta {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--home-brand-dark);
}

@media (hover: hover) {
	body.home-page .home-rail-theme__lesson-link:hover .home-rail-tooltip {
		opacity: 1;
		visibility: visible;
		transform: translateY(-50%) translateX(0);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
	}
}

/* At narrow widths the rail goes full-width below the main content, so a
   tooltip popping to the LEFT would push off-screen. Just hide tooltips. */
@media (max-width: 1100px) {
	body.home-page .home-rail-tooltip { display: none; }
	body.home-page .home-rail-theme__lesson-link { cursor: pointer; }
}

/* ------------------------------------------------------------------ */
/* THEMES SHOWCASE — legacy row layout (kept for reference)            */
/* ------------------------------------------------------------------ */

body.home-page .home-themes {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.home-page .home-theme-row {
	background: var(--home-card);
	border-radius: var(--home-radius-sm);
	box-shadow: var(--home-shadow-tile);
	overflow: hidden;
	display: grid;
	grid-template-columns: 200px minmax(180px, 1fr) minmax(260px, 1.4fr);
	gap: 0;
	align-items: stretch;
	transition: box-shadow 0.15s ease;
}

body.home-page .home-theme-row:hover {
	box-shadow: 0 1px 3px rgba(20, 50, 30, 0.05),
	            0 10px 24px rgba(20, 50, 30, 0.1);
}

body.home-page .home-theme-row__image {
	display: block;
	overflow: hidden;
	background: var(--home-brand-soft);
}

body.home-page .home-theme-row__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

body.home-page .home-theme-row:hover .home-theme-row__image img {
	transform: scale(1.04);
}

body.home-page .home-theme-row__info {
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	border-right: 1px solid var(--home-border);
}

body.home-page .home-theme-row__name {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0;
	color: var(--home-ink);
	text-decoration: none;
	line-height: 1.3;
}

body.home-page .home-theme-row__name:hover {
	color: var(--home-brand-dark);
	text-decoration: underline;
}

body.home-page .home-theme-row__meta {
	font-size: 0.85rem;
	color: var(--home-brand-dark);
	font-weight: 600;
	margin: 6px 0 0 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

body.home-page .home-theme-row__lessons {
	padding: 16px 22px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

body.home-page .home-theme-row__lesson-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 6px;
	color: var(--home-ink);
	text-decoration: none;
	font-size: 0.93rem;
	line-height: 1.35;
	transition: background 0.12s ease, color 0.12s ease;
}

body.home-page .home-theme-row__lesson-link::before {
	content: "›";
	color: var(--home-brand);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1;
	flex: 0 0 auto;
}

body.home-page .home-theme-row__lesson-link:hover {
	background: var(--home-brand-soft);
	color: var(--home-brand-dark);
}

body.home-page .home-theme-row__lesson-text {
	flex: 1;
	min-width: 0;
	word-break: break-word;
}

body.home-page .home-theme-row__more {
	margin-top: 4px;
	padding: 7px 10px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--home-brand-dark);
	text-decoration: none;
	border-top: 1px dashed var(--home-border);
	padding-top: 10px;
}

body.home-page .home-theme-row__more:hover {
	color: var(--home-brand-dark);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* LESSONS PREVIEW                                                     */
/* ------------------------------------------------------------------ */

body.home-page .home-lessons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

body.home-page .home-lesson-card {
	background: var(--home-card);
	border-radius: var(--home-radius-sm);
	overflow: hidden;
	box-shadow: var(--home-shadow-tile);
	text-decoration: none;
	color: var(--home-ink);
	display: flex;
	flex-direction: column;
	transition: transform 0.12s ease, box-shadow 0.15s ease;
}

body.home-page .home-lesson-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 3px rgba(20, 50, 30, 0.05),
	            0 14px 32px rgba(20, 50, 30, 0.12);
	color: var(--home-ink);
}

body.home-page .home-lesson-card__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--home-brand-soft);
	overflow: hidden;
	position: relative;
}

body.home-page .home-lesson-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body.home-page .home-lesson-card__body {
	padding: 22px 26px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}

body.home-page .home-lesson-card__title {
	font-size: clamp(1.15rem, 1.4vw, 1.35rem);
	font-weight: 700;
	margin: 0;
	color: var(--home-ink);
	line-height: 1.3;
	word-break: break-word;
}

body.home-page .home-lesson-card__meta {
	margin: 0;
	font-size: 0.82rem;
	color: var(--home-ink-soft);
	line-height: 1.5;
}

body.home-page .home-lesson-card__meta i {
	color: var(--home-brand);
	margin-right: 4px;
	vertical-align: -0.05em;
}

body.home-page .home-lesson-card__intro {
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--home-ink-soft);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.home-page .home-lesson-card__readmore {
	margin-top: auto;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--home-brand-dark);
	padding-top: 8px;
}

/* ------------------------------------------------------------------ */
/* CURRICULA SHOWCASE                                                  */
/* ------------------------------------------------------------------ */

body.home-page .home-curricula {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
}

body.home-page .home-curriculum-card {
	background: var(--home-card);
	border-radius: var(--home-radius-sm);
	overflow: hidden;
	box-shadow: var(--home-shadow-tile);
	text-decoration: none;
	color: var(--home-ink);
	display: flex;
	flex-direction: column;
	transition: transform 0.12s ease, box-shadow 0.15s ease;
	border-top: 3px solid var(--home-brand);
}

body.home-page .home-curriculum-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 3px rgba(20, 50, 30, 0.05),
	            0 14px 32px rgba(20, 50, 30, 0.12);
	color: var(--home-ink);
}

body.home-page .home-curriculum-card__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--home-brand-soft);
	overflow: hidden;
	position: relative;
}

body.home-page .home-curriculum-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body.home-page .home-curriculum-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--home-brand-dark);
	font-size: 2rem;
}

body.home-page .home-curriculum-card__body {
	padding: 16px 18px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
}

body.home-page .home-curriculum-card__title {
	font-size: 1.08rem;
	font-weight: 700;
	margin: 0;
	color: var(--home-ink);
	line-height: 1.35;
	word-break: break-word;
}

body.home-page .home-curriculum-card__meta {
	font-size: 0.8rem;
	color: var(--home-brand-dark);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

body.home-page .home-curriculum-card__intro {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--home-ink-soft);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.home-page .home-curriculum-card__readmore {
	margin-top: auto;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--home-brand-dark);
	padding-top: 6px;
}

/* ------------------------------------------------------------------ */
/* CLOSING CTA BANNER (guest only)                                     */
/* ------------------------------------------------------------------ */

body.home-page .home-cta-banner {
	max-width: var(--home-max-width);
	margin: 18px auto 32px auto;
	padding: 40px 36px;
	/* Same layered gradient as the navbar (.nav.navbar): a soft brand-green
	   radial highlight in the upper-right over the 135deg dark brand
	   linear gradient. Keeps header / CTA / footer visually consistent. */
	background:
		radial-gradient(ellipse 60% 180% at 85% -30%,
			rgba(74, 184, 110, 0.28) 0%,
			rgba(74, 184, 110, 0.10) 45%,
			transparent 75%),
		linear-gradient(135deg, var(--home-brand) 0%, var(--home-brand-dark) 100%);
	color: #fff;
	border-radius: var(--home-radius);
	box-shadow: var(--home-shadow-card);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
}

body.home-page .home-cta-banner__heading {
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	font-weight: 800;
	margin: 0 0 4px 0;
	color: #fff;
	letter-spacing: -0.01em;
}

body.home-page .home-cta-banner__subtitle {
	font-size: 1rem;
	margin: 0;
	opacity: 0.92;
}

body.home-page .home-cta-banner__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	background: #fff;
	color: var(--home-brand-dark);
	white-space: nowrap;
	transition: transform 0.1s ease, box-shadow 0.15s ease;
}

body.home-page .home-cta-banner__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
	color: var(--home-brand-dark);
}

/* ------------------------------------------------------------------ */
/* RESPONSIVE                                                          */
/* ------------------------------------------------------------------ */

/* Tablet */
@media (max-width: 1100px) {
	body.home-page .home-hero--guest {
		grid-template-columns: 1.3fr 1fr;
		min-height: 320px;
	}
	body.home-page .home-hero--guest .home-hero__body { padding: 36px 32px; }

	body.home-page .home-features {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}

	body.home-page .home-content {
		grid-template-columns: 1fr;
		gap: 24px;
		padding-top: 8px;        /* was 28px — pull content close to navbar */
	}

	/* Themes rail moves below the main content at this breakpoint and the
	   default single-column stack reads as one theme per row taking the
	   full width — too sparse. Flip the rail into a responsive card grid
	   so themes flow 2–3 per row depending on viewport. Header spans the
	   full row; individual themes become standalone cards with their own
	   background + border instead of inheriting the rail's container card. */
	body.home-page .home-themes-rail {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 12px;
		padding: 12px;
		background: var(--home-card);
		box-shadow: var(--home-shadow-tile);
		border-radius: var(--home-radius-sm);
	}

	body.home-page .home-themes-rail__header {
		grid-column: 1 / -1;
		background: transparent;
		border-bottom: 0;
		padding: 4px 6px 8px 6px;
		border-radius: 0;
	}

	body.home-page .home-rail-theme {
		background: #fafbfc;
		border: 1px solid var(--home-border);
		border-radius: 10px;
		padding: 12px;
	}

	body.home-page .home-themes-rail > .home-rail-theme:last-child {
		border-radius: 10px;
		border-bottom: 1px solid var(--home-border);
	}

	body.home-page .home-hero {
		margin: 8px auto;        /* was 18px — only matters when hero shows */
	}

	body.home-page .home-theme-row {
		grid-template-columns: 160px 1fr;
	}
	body.home-page .home-theme-row__info {
		grid-column: 2;
		border-right: none;
		border-bottom: 1px solid var(--home-border);
		padding: 16px 18px 12px 18px;
	}
	body.home-page .home-theme-row__lessons {
		grid-column: 2;
		padding: 10px 18px 14px 18px;
	}
	body.home-page .home-theme-row__image {
		grid-row: 1 / span 2;
	}

	body.home-page .home-lessons {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
}

/* Phone */
@media (max-width: 768px) {
	body.home-page .home-hero {
		margin: 12px;
		border-radius: 14px;
	}

	body.home-page .home-hero--guest {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	body.home-page .home-hero--guest .home-hero__body  { padding: 32px 24px 28px 24px; text-align: left; }
	body.home-page .home-hero--guest .home-hero__visual { display: none; }

	body.home-page .home-hero--loggedin {
		grid-template-columns: 1fr;
		padding: 22px 22px 20px 22px;
		text-align: left;
		border-left: none;
		border-top: 5px solid var(--home-brand);
	}
	body.home-page .home-hero--loggedin .home-hero__actions {
		flex-wrap: wrap;
	}

	body.home-page .home-features {
		grid-template-columns: 1fr;
		padding: 0 12px;
		margin-bottom: 18px;
	}

	body.home-page .home-section {
		padding: 22px 12px 8px 12px;
	}

	body.home-page .home-theme-row {
		grid-template-columns: 1fr;
	}
	body.home-page .home-theme-row__image {
		grid-row: 1;
		aspect-ratio: 16 / 9;
	}
	body.home-page .home-theme-row__info {
		grid-column: 1;
		border-bottom: 1px solid var(--home-border);
	}
	body.home-page .home-theme-row__lessons {
		grid-column: 1;
	}

	body.home-page .home-lessons,
	body.home-page .home-curricula {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	body.home-page .home-cta-banner {
		grid-template-columns: 1fr;
		padding: 28px 22px;
		margin: 12px;
		text-align: center;
		justify-items: center;
	}
}

/* =========================================================================
   PIZZAZZ — decorative background blobs, fade-up entrances, count-up pill.
   Designed to add depth + motion without the generic "WordPress template"
   look: blobs are asymmetric and placed deliberately, animations are
   subtle, and everything honors prefers-reduced-motion.
   ========================================================================= */

/* (A) Decorative organic background blobs. Two soft brand-tinted shapes
   sit behind the home content to add depth. Fixed position so they don't
   scroll with content, blur softens edges, and asymmetric placement
   avoids the symmetric-corners cliché. */
body.home-page::before,
body.home-page::after {
	content: "";
	position: fixed;
	pointer-events: none;
	z-index: 0;
	border-radius: 50%;
	filter: blur(70px);
}

body.home-page::before {
	top: 60px;
	right: -180px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle at 40% 40%, rgba(14, 102, 48, 0.55) 0%, rgba(14, 102, 48, 0.18) 45%, transparent 75%);
}

body.home-page::after {
	bottom: -200px;
	left: -180px;
	width: 640px;
	height: 640px;
	background: radial-gradient(circle at 60% 60%, rgba(8, 74, 34, 0.45) 0%, rgba(8, 74, 34, 0.15) 50%, transparent 75%);
}

/* Keep the actual content above the decorative layer */
body.home-page .home-content,
body.home-page .home-hero,
body.home-page .home-section,
body.home-page .home-features,
body.home-page .home-cta-banner {
	position: relative;
	z-index: 1;
}

/* (B) Scroll-triggered fade-up. Sections start lifted + transparent; the
   .is-in class (added by IntersectionObserver) animates them in. */
body.home-page .home-hero,
body.home-page .home-section,
body.home-page .home-features > *,
body.home-page .home-cta-banner {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}

body.home-page .home-hero.is-in,
body.home-page .home-section.is-in,
body.home-page .home-features > .is-in,
body.home-page .home-cta-banner.is-in {
	opacity: 1;
	transform: none;
}

/* If JS doesn't run for any reason, make sure content is still visible. */
body.home-page.no-anim .home-hero,
body.home-page.no-anim .home-section,
body.home-page.no-anim .home-features > *,
body.home-page.no-anim .home-cta-banner {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	body.home-page .home-hero,
	body.home-page .home-section,
	body.home-page .home-features > *,
	body.home-page .home-cta-banner {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	body.home-page::before,
	body.home-page::after {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* SAMRAISMS PROMO CARD (right rail, under themes rail)                */
/* ------------------------------------------------------------------ */

body.home-page .home-samraisms-card {
	margin-top: 22px;
	background: #ffffff;
	border: 1px solid #e0e8e3;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 50, 30, 0.04),
	            0 6px 18px rgba(20, 50, 30, 0.07);
	display: block;
}

body.home-page .home-samraisms-card__image {
	display: block;
	width: 100%;
	overflow: hidden;
	background: #e8f3ec;
}

body.home-page .home-samraisms-card__image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.4s ease;
}

body.home-page .home-samraisms-card:hover .home-samraisms-card__image img {
	transform: scale(1.04);
}

body.home-page .home-samraisms-card__body {
	padding: 16px 18px 18px 18px;
}

body.home-page .home-samraisms-card__title {
	margin: 0 0 8px 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: #0e6630;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

body.home-page .home-samraisms-card__blurb {
	margin: 0 0 14px 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #4a5b51;
}

/* Policy-sourced blurbs ship wrapped in <p> tags — flatten the default
   browser margins so the card padding is the only spacing in play. */
body.home-page .home-samraisms-card__blurb p {
	margin: 0;
}

body.home-page .home-samraisms-card__blurb p + p {
	margin-top: 0.5em;
}

body.home-page .home-samraisms-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: #0e6630;
	color: #fff;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.05s ease;
}

body.home-page .home-samraisms-card__cta:hover {
	background: #084a22;
	color: #fff;
	text-decoration: none;
}

body.home-page .home-samraisms-card__cta:active {
	transform: translateY(1px);
}

body.home-page .home-samraisms-card__cta i {
	font-size: 0.78rem;
}

/* ------------------------------------------------------------------ */
/* SPLASH HERO — first-time guest only, typography-first design.       */
/* No photo — brand-green gradient + bold headline + CTA pill.         */
/* Auto-dismisses after 6s via JS; gates visibility on the existing    */
/* sw_cookie_banner_flag cookie (set when guest clicks "Got It").      */
/* ------------------------------------------------------------------ */

body.home-page .home-splash {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: clamp(380px, 58vh, 580px);
	background:
		radial-gradient(ellipse 50% 70% at 80% 15%, rgba(255, 255, 255, 0.10) 0%, transparent 55%),
		radial-gradient(ellipse 40% 60% at 15% 90%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
		linear-gradient(135deg, #0e6630 0%, #084a22 100%);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 24px;
	overflow: hidden;
	margin-top: 0;
	margin-bottom: 24px;
	transition: opacity 0.6s ease,
	            min-height 0.6s ease 0.2s,
	            padding 0.6s ease 0.2s,
	            margin-bottom 0.6s ease 0.2s;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.home-page .home-splash.is-dismissing {
	opacity: 0;
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
	pointer-events: none;
}

body.home-page .home-splash__content {
	max-width: 760px;
	text-align: center;
}

body.home-page .home-splash__eyebrow {
	display: inline-block;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 22px 0;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

body.home-page .home-splash__title {
	font-size: clamp(2.4rem, 6vw, 4.2rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 22px 0;
	color: #ffffff;
}

body.home-page .home-splash__lead {
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	margin: 0 0 36px 0;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

body.home-page .home-splash__actions {
	display: flex;
	justify-content: center;
	margin: 0 0 18px 0;
}

body.home-page .home-splash__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 38px;
	background: #ffffff;
	color: #084a22;
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	font-weight: 700;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28),
	            0 2px 6px rgba(0, 0, 0, 0.10);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

body.home-page .home-splash__cta:hover,
body.home-page .home-splash__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32),
	            0 2px 6px rgba(0, 0, 0, 0.12);
	background: #f4f9f5;
	color: #084a22;
	text-decoration: none;
	outline: none;
}

body.home-page .home-splash__cta i {
	font-size: 0.85em;
}

body.home-page .home-splash__signin {
	display: inline-block;
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.92rem;
	text-decoration: underline;
	text-underline-offset: 4px;
}

body.home-page .home-splash__signin:hover,
body.home-page .home-splash__signin:focus-visible {
	color: #ffffff;
	text-decoration: underline;
	outline: none;
}

@media (max-width: 600px) {
	body.home-page .home-splash {
		min-height: clamp(320px, 50vh, 480px);
		padding: 44px 20px;
	}
	body.home-page .home-splash__cta {
		padding: 14px 28px;
		font-size: 0.98rem;
	}
}