/*
 * zyBooks "Home 2026" homepage.
 * Loaded only on the Home 2026 template (see setup.php).
 *
 * Everything is scoped under #top .zb-home. Enfold gives <body> the id "top"
 * and styles headings, paragraphs and links through .main_color rules, so the
 * #top prefix makes these rules win without !important and keeps them from
 * leaking into the header, footer or any other page.
 *
 * Colour and type values were measured from Tom's Figma exports; refine them
 * against Figma's inspect panel.
 *
 * Breakpoints follow Enfold's (989px / 767px) so the page changes layout at
 * the same widths as the header.
 */

/* ------------------------------------------------------------------ Tokens */

#top .zb-home {
	--zb-orange: #ff6f00;          /* brand orange, buttons only */
	--zb-orange-hover: #e66400;
	--zb-orange-text: #c1560b;     /* passes AA for small orange text */
	--zb-blue: #0277bd;            /* links and eyebrows, 4.9:1 on white */
	--zb-ink: #252b2e;             /* card titles, strong text */
	--zb-heading: #37474f;         /* section titles */
	--zb-body: #546e7a;            /* body copy, 5.5:1 on white */
	--zb-line: #ebeef0;
	--zb-surface: #f5f5f5;         /* media boxes, grey bands; matches the animations */
	--zb-cream: #fff8e1;           /* announcement bar, zyLabs band */
	--zb-on-dark: #ffffff;
	--zb-on-dark-muted: #cfd8dc;
	--zb-on-dark-eyebrow: #81d4fa;

	--zb-font: "Roboto", "Helvetica Neue", Arial, sans-serif;
	--zb-radius: 6px;
	--zb-section-space: clamp(64px, 7vw, 96px);
	--zb-card-gap: 32px;

	font-family: var(--zb-font);
	color: var(--zb-body);
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------- Shared resets */

#top .zb-home h1,
#top .zb-home h2,
#top .zb-home h3,
#top .zb-home p {
	margin: 0;
	padding: 0;
	font-family: var(--zb-font);
	letter-spacing: normal;
	text-transform: none;
}

#top .zb-home img,
#top .zb-home video {
	display: block;
	max-width: 100%;
}

#top .zb-home .zb-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------- Eyebrow */

#top .zb-home .zb-eyebrow {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zb-blue);
}

#top .zb-home .zb-eyebrow--small {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

#top .zb-home .zb-eyebrow--on-dark {
	color: var(--zb-on-dark-eyebrow);
}

/* --------------------------------------------------- Buttons and links */

#top .zb-home .zb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

#top .zb-home .zb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-family: var(--zb-font);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#top .zb-home .zb-btn--primary {
	background: var(--zb-orange);
	color: #fff;
}

#top .zb-home .zb-btn--primary:hover {
	background: var(--zb-orange-hover);
	color: #fff;
}

#top .zb-home .zb-btn--outline-light {
	border-color: rgba(255, 255, 255, 0.85);
	background: transparent;
	color: #fff;
}

#top .zb-home .zb-btn--outline-light:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

#top .zb-home .zb-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	color: var(--zb-blue);
	text-decoration: none;
}

#top .zb-home .zb-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

#top .zb-home .zb-arrow {
	display: inline-block;
	transition: transform 0.15s ease;
}

#top .zb-home .zb-btn:hover .zb-arrow,
#top .zb-home .zb-link:hover .zb-arrow {
	transform: translateX(3px);
}

/* Visible keyboard focus on every interactive element. */
#top .zb-home a:focus-visible,
#top .zb-home button:focus-visible {
	outline: 3px solid var(--zb-blue);
	outline-offset: 3px;
}

#top .zb-home .zb-hero a:focus-visible {
	outline-color: #fff;
}

/* ------------------------------------------------------------------ Hero */

#top .zb-home .zb-hero {
	position: relative;
	padding-block: clamp(56px, 6.5vw, 96px);
	color: var(--zb-on-dark);
	background-color: #0b3752;
	background-image:
		radial-gradient(55% 65% at 0% 0%, rgba(16, 18, 20, 0.95) 0%, rgba(16, 18, 20, 0) 70%),
		radial-gradient(55% 70% at 88% 8%, rgba(150, 210, 240, 0.8) 0%, rgba(150, 210, 240, 0) 65%),
		linear-gradient(100deg, #101214 0%, #0b3752 30%, #0468a6 58%, #129ee3 100%);
}

#top .zb-home .zb-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
}

#top .zb-home .zb-hero__title {
	margin-top: 32px;
	font-size: clamp(2.5rem, 1.25rem + 3.4vw, 4rem);
	font-weight: 300;
	line-height: 1.1;
	color: var(--zb-on-dark);
}

#top .zb-home .zb-hero__title span,
#top .zb-home .zb-hero__title strong {
	display: block;
}

#top .zb-home .zb-hero__title strong {
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--zb-on-dark);
}

#top .zb-home .zb-hero__lede {
	max-width: 36em;
	margin-top: 40px;
	font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--zb-on-dark-muted);
}

#top .zb-home .zb-hero .zb-actions {
	margin-top: 32px;
}

#top .zb-home .zb-hero__image {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 24px 48px rgba(0, 20, 40, 0.28);
}

/* ---------------------------------------------------------- Announcement */

#top .zb-home .zb-announce {
	padding-block: 16px;
	background: var(--zb-cream);
	border-bottom: 1px solid #f3e7bf;
}

#top .zb-home .zb-announce__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 6px 16px;
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
	color: var(--zb-body);
}

#top .zb-home .zb-announce__text strong {
	font-weight: 500;
	color: var(--zb-ink);
}

#top .zb-home .zb-announce .zb-link {
	font-size: 1rem;
}

/* -------------------------------------------------------------- Sections */

#top .zb-home .zb-section {
	padding-block: var(--zb-section-space);
	background: #fff;
}

#top .zb-home .zb-section__head {
	max-width: 760px;
	margin: 0 auto 48px;
	text-align: center;
}

#top .zb-home .zb-section__title {
	margin-top: 16px;
	font-size: clamp(2rem, 1.4rem + 1.7vw, 3rem);
	font-weight: 300;
	line-height: 1.2;
	color: var(--zb-heading);
}

#top .zb-home .zb-section__intro {
	max-width: 620px;
	margin: 16px auto 0;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--zb-body);
}

/* ---------------------------------------------------------------- Cards */

#top .zb-home .zb-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--zb-card-gap);
	row-gap: var(--zb-card-gap);
}

#top .zb-home .zb-card {
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--zb-line);
	border-radius: var(--zb-radius);
	box-shadow: 0 1px 3px rgba(38, 50, 56, 0.06);
}

/*
 * Subgrid lines up the animations across the row even when one card's text
 * runs a line longer (as in the design). Browsers without subgrid fall back
 * to the flex layout above.
 */
@supports (grid-template-rows: subgrid) {
	#top .zb-home .zb-cards {
		row-gap: 0;
		margin-bottom: calc(-1 * var(--zb-card-gap)); /* cancels the last row's margin */
	}

	#top .zb-home .zb-card {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		row-gap: 0;
		margin-bottom: var(--zb-card-gap);
	}
}

#top .zb-home .zb-card__title {
	margin-top: 10px;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--zb-ink);
}

#top .zb-home .zb-card__text {
	margin-top: 12px;
	margin-bottom: 24px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--zb-body);
}

#top .zb-home .zb-card__link {
	align-self: start;
	margin-top: 24px;
	font-size: 0.9375rem;
}

/* ------------------------------------------------- Feature animations */

#top .zb-home .zb-media {
	position: relative;
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--zb-surface);
	border: 1px solid var(--zb-line);
	border-radius: var(--zb-radius);
}

#top .zb-home .zb-media__video {
	width: 100%;
	height: 100%;
	object-fit: contain;   /* the AI Hints clip is 868 × 764; letterbox blends with the #f5f5f5 box */
	background: var(--zb-surface);
}

/* Soft fade where the hint text runs off the bottom of the frame. */
#top .zb-home .zb-media--fade::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 22%;
	background: linear-gradient(to bottom, rgba(245, 245, 245, 0), var(--zb-surface) 85%);
	pointer-events: none;
}

/* Pause / play button (WCAG 2.2.2). Shown by home.js once the clip can play. */
#top .zb-home .zb-media__toggle {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(38, 50, 56, 0.72);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

#top .zb-home .zb-media__toggle[hidden] {
	display: none;
}

#top .zb-home .zb-media__toggle:hover {
	background: rgba(38, 50, 56, 0.9);
}

/* Pause icon: two bars. */
#top .zb-home .zb-media__toggle::before {
	content: "";
	width: 10px;
	height: 12px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
	box-sizing: border-box;
}

/* Play icon: triangle, when paused. */
#top .zb-home .zb-media__toggle[data-state="paused"]::before {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent currentColor;
}

/* --------------------------------------------- Tablet: 768px – 989px */

@media (max-width: 989px) {
	#top .zb-home .zb-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	#top .zb-home .zb-hero__text {
		max-width: 680px;
	}

	#top .zb-home .zb-hero__title {
		margin-top: 24px;
	}

	#top .zb-home .zb-hero__lede {
		margin-top: 28px;
	}

	#top .zb-home .zb-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--zb-card-gap: 24px;
	}
}

/* --------------------------------------------------- Mobile: ≤ 767px */

@media (max-width: 767px) {
	#top .zb-home .zb-hero {
		padding-block: 48px 40px;
	}

	#top .zb-home .zb-hero__title {
		margin-top: 20px;
	}

	#top .zb-home .zb-hero__lede {
		margin-top: 20px;
		font-size: 1rem;
	}

	#top .zb-home .zb-hero .zb-actions {
		flex-direction: column;
		margin-top: 28px;
	}

	#top .zb-home .zb-hero .zb-btn {
		width: 100%;
	}

	#top .zb-home .zb-announce__text {
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}

	#top .zb-home .zb-section__head {
		margin-bottom: 32px;
	}

	#top .zb-home .zb-section__intro {
		font-size: 1rem;
	}

	#top .zb-home .zb-cards {
		grid-template-columns: minmax(0, 1fr);
		--zb-card-gap: 20px;
	}

	#top .zb-home .zb-card {
		padding: 20px;
	}
}

/* ------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	#top .zb-home .zb-arrow,
	#top .zb-home .zb-btn,
	#top .zb-home .zb-media__toggle {
		transition: none;
	}
}

/* ------------------------------------------- Space under the sticky header */

/*
 * Enfold's header is position: fixed (90px), so #main is pushed down to make
 * room for it. On ordinary pages the site pushes it down 165px, which leaves
 * a white band above our full-width hero. The live homepage avoids this
 * differently (#main has no padding there). On this template, reserve exactly
 * the header's height so the hero starts directly under it.
 *
 * Desktop and tablet only. Below 768px Enfold un-fixes the header and zeroes
 * this padding itself.
 *
 * Enfold writes its rules as #top #wrap_all #main, so the selector includes
 * #top to outrank them. !important because the 165px rule may itself be
 * !important; the selector only matches pages using this template.
 */
@media (min-width: 768px) {
	html.html_header_top.html_header_sticky body#top.zb-home-2026 #wrap_all #main {
		padding-top: 90px !important;
	}
}

/* ------------------------------------------- Static card illustrations */

#top .zb-home .zb-media--image {
	background: #f5f5f6; /* matches the illustrations' own background */
}

#top .zb-home .zb-media__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =================================================== Sections added 3 Nov */

#top .zb-home .zb-section--grey { background: var(--zb-surface); }
#top .zb-home .zb-section--cream { background: var(--zb-cream); }

#top .zb-home .zb-section__head--wide { max-width: 820px; }

#top .zb-home .zb-section__title em {
	font-style: italic;
	font-weight: 300;
}

#top .zb-home .zb-actions--center {
	justify-content: center;
	margin-top: 40px;
}

#top .zb-home .zb-btn--outline-dark {
	border-color: #b0bec5;
	background: #fff;
	color: var(--zb-heading);
}

#top .zb-home .zb-btn--outline-dark:hover {
	border-color: var(--zb-heading);
	color: var(--zb-ink);
}

/* ------------------------------------------------------- Proven outcomes */

#top .zb-home .zb-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 auto;
	max-width: 1280px;
}

#top .zb-home .zb-stat {
	padding: 8px 24px;
	text-align: center;
}

#top .zb-home .zb-stat + .zb-stat {
	border-left: 1px solid #e0e4e6;
}

#top .zb-home .zb-stat__label {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #687e89;
}

#top .zb-home .zb-stat dd {
	margin: 0;
}

#top .zb-home .zb-stat__value {
	margin-top: 8px !important;
	font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem);
	font-weight: 700;
	line-height: 1.1;
	color: #2f7591;   /* design #39829e, darkened slightly to pass AA on grey */
}

#top .zb-home .zb-stat__text {
	margin-top: 10px !important;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--zb-body);
}

#top .zb-home .zb-proof__note {
	max-width: 520px;
	margin: 40px auto 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	text-align: center;
	color: var(--zb-body);
}

#top .zb-home .zb-proof__note .zb-link {
	display: inline-flex;
	margin-left: 4px;
}

/* -------------------------------------------------------- Student survey */

#top .zb-home .zb-survey__lead {
	margin-top: 28px;
	font-size: 0.9375rem;
	color: var(--zb-body);
}

#top .zb-home .zb-results {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto 48px;
	padding: 0;
	list-style: none;
}

#top .zb-home .zb-result {
	margin: 0;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--zb-line);
	border-radius: var(--zb-radius);
	box-shadow: 0 1px 3px rgba(38, 50, 56, 0.06);
}

#top .zb-home .zb-result__value {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
	color: #2f7591;
}

#top .zb-home .zb-result__bar {
	height: 8px;
	margin: 16px 0 20px;
	border-radius: 4px;
	background: #e3f2fd;
	overflow: hidden;
}

#top .zb-home .zb-result__bar span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, #3a819e, #8bd3f3);
}

#top .zb-home .zb-result__title {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--zb-ink);
}

#top .zb-home .zb-result__text {
	margin-top: 4px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--zb-body);
}

/* ----------------------------------------------- Click-to-play videos */

#top .zb-home .zb-video {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #1c2328;
	border-radius: var(--zb-radius);
}

#top .zb-home .zb-video--testimonial {
	max-width: 880px;
	margin: 0 auto;
}

#top .zb-home .zb-video__poster,
#top .zb-home .zb-video__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#top .zb-home .zb-video__player {
	z-index: 3;
	background: #000;
	object-fit: contain;
}

#top .zb-home .zb-video--testimonial .zb-video__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 48px 32px 24px;
	background: linear-gradient(to top, rgba(10, 16, 20, 0.75), rgba(10, 16, 20, 0));
	pointer-events: none;
}

#top .zb-home .zb-video__eyebrow {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zb-on-dark-eyebrow);
}

#top .zb-home .zb-video__name {
	margin-top: 4px;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
}

#top .zb-home .zb-video__role {
	font-size: 0.875rem;
	color: var(--zb-on-dark-muted);
}

#top .zb-home .zb-video--labs .zb-video__overlay {
	position: absolute;
	left: 16px;
	bottom: 16px;
	pointer-events: none;
}

#top .zb-home .zb-video__chip {
	padding: 6px 12px;
	border-radius: 4px;
	background: rgba(10, 16, 20, 0.8);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

/* The whole video is the click target; the round button sits in the middle. */
#top .zb-home .zb-video__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.12);   /* lifts the button off light frames */
	cursor: pointer;
	text-decoration: none;
}

#top .zb-home .zb-video__play::before {
	content: "";
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--zb-orange);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	transition: transform 0.15s ease;
}

#top .zb-home .zb-video__play::after {
	content: "";
	position: absolute;
	margin-left: 6px;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
}

#top .zb-home .zb-video--labs .zb-video__play::before {
	background: #fff;
}

#top .zb-home .zb-video--labs .zb-video__play::after {
	border-color: transparent transparent transparent var(--zb-ink);
}

#top .zb-home .zb-video__play:hover::before {
	transform: scale(1.06);
}

#top .zb-home .zb-video__play:focus-visible {
	outline-offset: -6px;
	outline-color: #fff;
}

#top .zb-home .zb-video.is-playing .zb-video__play,
#top .zb-home .zb-video.is-playing .zb-video__overlay {
	display: none;
}

/* -------------------------------------------------------- Course catalog */

#top .zb-home .zb-subjects {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

#top .zb-home .zb-subject {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 28px 24px;
	background: #fff;
	border: 1px solid var(--zb-line);
	border-radius: var(--zb-radius);
	box-shadow: 0 1px 3px rgba(38, 50, 56, 0.06);
}

#top .zb-home .zb-subject__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
}

#top .zb-home .zb-subject__icon svg { width: 30px; height: 30px; }
#top .zb-home .zb-subject__icon--ai   { color: #283593; }
#top .zb-home .zb-subject__icon--cs   { color: #00838f; }
#top .zb-home .zb-subject__icon--data { color: #37474f; }
#top .zb-home .zb-subject__icon--eng  { color: #a1532a; }
#top .zb-home .zb-subject__icon--it   { color: #5e35b1; }
#top .zb-home .zb-subject__icon--math { color: #c62828; }

#top .zb-home .zb-subject__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

#top .zb-home .zb-subject__name {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--zb-ink);
}

#top .zb-home .zb-subject__link {
	font-size: 1rem;
}

/* ---------------------------------------------------------------- zyLabs */

#top .zb-home .zb-labs__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 56px;
}

#top .zb-home .zb-labs__title {
	margin-top: 16px;
	font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem);
	font-weight: 300;
	line-height: 1.15;
	color: var(--zb-ink);
}

#top .zb-home .zb-highlight {
	color: var(--zb-blue);
}

#top .zb-home .zb-labs__lede {
	margin-top: 24px;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--zb-body);
}

#top .zb-home .zb-labs .zb-actions {
	margin-top: 28px;
}

#top .zb-home .zb-labs__features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

#top .zb-home .zb-labs__feature {
	margin: 0;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--zb-line);
	border-radius: var(--zb-radius);
	box-shadow: 0 1px 3px rgba(38, 50, 56, 0.06);
}

#top .zb-home .zb-labs__feature-icon {
	display: block;
	color: var(--zb-blue);
}

#top .zb-home .zb-labs__feature-title {
	margin-top: 16px;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--zb-ink);
}

#top .zb-home .zb-labs__feature-text {
	margin-top: 12px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--zb-body);
}

/* ------------------------------------------------ Tablet: 768px – 989px */

@media (max-width: 989px) {
	#top .zb-home .zb-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	#top .zb-home .zb-subjects {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	#top .zb-home .zb-labs__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	#top .zb-home .zb-labs__features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

/* ----------------------------------------------------- Mobile: ≤ 767px */

@media (max-width: 767px) {
	#top .zb-home .zb-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	#top .zb-home .zb-stat {
		padding: 24px 0;
	}

	#top .zb-home .zb-stat + .zb-stat {
		border-left: 0;
		border-top: 1px solid #e0e4e6;
	}

	#top .zb-home .zb-results,
	#top .zb-home .zb-subjects,
	#top .zb-home .zb-labs__features {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	#top .zb-home .zb-actions--center {
		flex-direction: column;
	}

	#top .zb-home .zb-actions--center .zb-btn,
	#top .zb-home .zb-labs .zb-btn {
		width: 100%;
	}

	#top .zb-home .zb-labs .zb-actions {
		flex-direction: column;
	}

	#top .zb-home .zb-video__play::before {
		width: 60px;
		height: 60px;
	}

	#top .zb-home .zb-video--testimonial .zb-video__overlay {
		padding: 32px 16px 14px;
	}
}