/*
	Homepage breakpoint map:
	- 1440px and up: 1260px content width, default/base styles
	- 1200px to 1439px: 1040px content width
	- 900px to 1199px: 850px content width
	- 600px to 899px: 550px content width
	- 0px to 599px: mobile/full-width layout

	The media queries are based on viewport width.
	The max-width values inside each breakpoint are the intended content widths.
*/

html,
body
	{
	margin: 0;
	padding: 0;
	background: #ffffff;
}

.tt-homepage {
	background: #ffffff;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.tt-home-hero {
	position: relative;
	min-height: auto;
	background: #ffffff;
	--hero-progress: 0;
	--hero-settle-progress: 0;
	--hero-animation-distance: 0.28;
	--hero-settled-width: 1260px;
	--hero-settled-height: 680px;
	--hero-visual-width: 1260px;
	--hero-visual-height: 680px;
	--hero-video-blur: 0px;
	--hero-video-scale: 1;
	overflow: clip;
}

.tt-home-hero__sticky {
	position: relative;
	top: auto;
	height: auto;
	overflow: visible;
}

.tt-home-hero__inner {
	position: relative;
	width: 100%;
	max-width: 1728px;
	margin: 0 auto;
	padding: 72px 22px 0;
	box-sizing: border-box;
}

/* ==========================================================================
   Hero text
   ========================================================================== */

.tt-home-hero__text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	color: #1a252f;
}

.tt-home-hero__title {
	margin: 0;
	font-family: var(--tt-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 72px;
	line-height: 125%;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #1a252f;
}

.tt-home-hero__title-line {
	display: block;
	margin: 0;
}

.tt-home-hero__title-line:first-child {
	margin-bottom: 0;
}

.tt-home-hero__copy {
	width: 502px;
	max-width: 100%;
	margin: 0;
	font-family: var(--tt-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 24px;
	line-height: 140%;
	font-weight: 500;
	color: #1a252f;
}

.tt-home-hero__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.tt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 16px;
	border-radius: 8px;
	font-family: var(--tt-font-family);
	font-size: var(--tt-type-md-size);
	font-style: normal;
	font-weight: 600;
	line-height: var(--tt-type-md-line);
	letter-spacing: var(--tt-type-md-track);
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
}

.tt-btn--primary {
	background: #5c57f5;
	color: #ffffff;
}

.tt-btn--primary:hover,
.tt-btn--primary:focus {
	background: #4f4ae7;
	color: #ffffff;
}

.tt-btn--secondary {
	background: #EEEFFF;
	color: #3F41B5;
	border: 1px solid #CCCCFF;
}

.tt-btn--secondary:hover,
.tt-btn--secondary:focus {
	background-color: #e3e5ff;
	border-color: #bfc2ff;
	color: #3f41b5;
}

/* ==========================================================================
   Hero placeholder block
   ========================================================================== */

.tt-home-hero__visual-wrap {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	width: min(100vw, 1920px);
	margin: 120px auto 0;
	left: 50%;
	transform: translateX(-50%);
	transform-origin: center top;
}

.tt-home-hero__visual-placeholder {
	position: relative;
	width: var(--hero-visual-width);
	max-width: none;
	height: var(--hero-visual-height);
	margin: 0 auto;
	border-radius: calc(22px * var(--hero-settle-progress));
	background: #cfd6e2;
	box-shadow: 0 10px 30px rgba(24, 35, 47, 0.08);
	overflow: hidden;
	border: 1px solid #9091FF;
	box-sizing: border-box;
	flex: 0 0 auto;
}

.tt-home-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: blur(var(--hero-video-blur));
	transform: scale(var(--hero-video-scale));
	transform-origin: center;
	will-change: filter, transform;
}

.tt-home-hero::after {
	content: "";
	display: block;
	height: 0;
}

/* ==========================================================================
   Text fill section
   ========================================================================== */

.tt-home-text-fill {
	position: relative;
	padding: 512px 22px;
	background: #ffffff;
}

.tt-home-text-fill__inner {
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
}

.tt-home-text-fill__text {
	max-width: 1260px;
	margin: 0 auto;
	text-align: left;
	font-feature-settings: 'liga' off;
	font-family: var(--tt-font-family, "Plus Jakarta Sans", sans-serif);
	font-size: 60px;
	font-style: normal;
	font-weight: 600;
	line-height: 135%;
	letter-spacing: -0.01em;
}

.tt-home-text-fill__word {
	display: inline;
	color: #EEEFFF;
	transition: color 0.16s linear;
	will-change: color;
}

.tt-home-text-fill__word.is-next {
	color: #CCF;
}

.tt-home-text-fill__word.is-filled {
	color: #3F41B5;
}

/* ==========================================================================
   Text fill - 1440 to 1919 design
   ========================================================================== */

@media (max-width: 1439px) and (min-width: 1200px) {
	.tt-home-text-fill {
		padding-top: 448px;
		padding-bottom: 448px;
	}

	.tt-home-text-fill__inner {
		max-width: 1040px;
	}

	.tt-home-text-fill__text {
		max-width: 1040px;
		font-size: 48px;
		line-height: 135%;
		letter-spacing: -0.02em;
	}
}

/* ==========================================================================
   Text fill - 1200 to 1439 design
   ========================================================================== */

@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-text-fill {
		padding-top: 384px;
		padding-bottom: 384px;
	}

	.tt-home-text-fill__inner {
		max-width: 850px;
	}

	.tt-home-text-fill__text {
		max-width: 850px;
		font-size: 42px;
		line-height: 135%;
		letter-spacing: -0.02em;
	}
}

/* ==========================================================================
   Text fill - 900 to 1199 design
   ========================================================================== */

@media (max-width: 899px) and (min-width: 600px) {
	.tt-home-text-fill {
		padding-top: 256px;
		padding-bottom: 256px;
	}

	.tt-home-text-fill__inner {
		max-width: 550px;
	}

	.tt-home-text-fill__text {
		max-width: 550px;
		font-size: 36px;
		line-height: 140%;
		letter-spacing: -0.02em;
	}
}

/* ==========================================================================
   Text fill - mobile under 900 design
   ========================================================================== */

@media (max-width: 599px) {
	.tt-home-text-fill {
		padding: 192px 20px;
	}

	.tt-home-text-fill__inner {
		max-width: 100%;
	}

	.tt-home-text-fill__text {
		max-width: 100%;
		font-size: 30px;
		line-height: 140%;
		letter-spacing: 0;
	}
}

/* ==========================================================================
   Audience section
   ========================================================================== */

.tt-home-audience {
	padding: 0 22px;
	background: #ffffff;
}

.tt-home-audience__inner {
	width: 100%;
	max-width: 1728px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
}

.tt-home-audience__main {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}

.tt-home-audience-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.tt-home-audience-intro__pill {
	height: 32px;
	border-radius: 9999px;
	background: #eeefff;
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	box-sizing: border-box;
}

.tt-home-audience-intro__pill-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.tt-home-audience-intro__pill-label {
	color: #3f41b5;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 150%;
	white-space: nowrap;
}

.tt-home-audience-intro__title {
	width: 100%;
	max-width: 725px;
	margin: 0;
	color: #1a252f;
	text-align: center;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 48px;
	font-weight: 600;
	line-height: 135%;
	letter-spacing: -0.02em;
}

.tt-home-audience-cards-wrap {
	width: 100%;
}

.tt-home-audience-cards {
	width: 862px;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.tt-home-audience-cards a {
	display: block;
	flex: 1 1 0;
	text-decoration: none;
	border-radius: 24px;
	transition: transform 0.25s ease;
}

.tt-home-audience-cards a:hover {
	transform: translateY(-24px);
}

.tt-home-audience-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	height: 394px;
	padding: 32px;
	box-sizing: border-box;
	border-radius: 24px;
	overflow: hidden;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	transform: translateY(0);
	transition: transform 0.25s ease;
}

.tt-home-audience-card__overlay {
	background: linear-gradient(180deg, rgba(33, 48, 60, 0), rgba(33, 48, 60, 0.9));
	z-index: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(176px + 80px);
	transform: translateY(80px);
	backdrop-filter: blur(2px);
	mask: linear-gradient(to bottom, transparent, black 35%);
}

.tt-home-audience-card__title {
	position: relative;
	z-index: 1;
	align-self: stretch;
	margin: 0;
	color: #f8f9fc;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 150%;
}

.tt-home-audience-card__description {
	position: relative;
	z-index: 1;
	align-self: stretch;
	margin: 0;
	color: #f8f9fc;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 150%;
}

.tt-home-audience__controls {
	display: none;
}

/* Placeholder backgrounds */
.tt-home-audience-card--students {
	background-image: url("/wp-content/uploads/2026/06/tt-students-card.png");
}

.tt-home-audience-card--professionals {
	background-image: url("/wp-content/uploads/2026/06/tt-professionals-card.png");
}

.tt-home-audience-card--organisations {
	background-image: url("/wp-content/uploads/2026/06/tt-organisations.png");
}

/* Logos */
.tt-home-audience-logos {
	display: none;
	width: 100%;
	max-width: 1260px;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.tt-home-audience-logos__title {
	margin: 0;
	color: #596977;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 150%;
}

.tt-home-audience-logos__marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.tt-home-audience-logos__marquee::before,
.tt-home-audience-logos__marquee::after {
	content: "";
	position: absolute;
	top: 0;
	width: 100px;
	height: 48px;
	z-index: 2;
	pointer-events: none;
}

.tt-home-audience-logos__marquee::before {
	left: 0;
	background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.tt-home-audience-logos__marquee::after {
	right: 0;
	background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.tt-home-audience-logos__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: tt-home-logo-marquee 18s linear infinite;
}

.tt-home-audience-logos__group {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-shrink: 0;
}

.tt-home-audience-logos__group + .tt-home-audience-logos__group {
	margin-left: 24px;
}

.tt-home-audience-logos__item {
	width: 136.5px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 8px;
	background: #eaecee;
}

@keyframes tt-home-logo-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-50% - 12px));
	}
}

/* 1200 to 1439 */
@media (max-width: 1439px) and (min-width: 1200px) {
	.tt-home-audience__main {
		gap: 48px;
	}

	.tt-home-audience-intro__title {
		max-width: 725px;
		font-size: 42px;
		line-height: 135%;
	}

	.tt-home-audience-cards {
		width: 850px;
	}

	.tt-home-audience-card {
		flex: 0 0 267.3px;
		width: 267.3px;
		height: 390px;
	}

	.tt-home-audience-card__title {
		font-size: 16px;
	}

	.tt-home-audience-logos {
		max-width: 850px;
	}
}

/* 900 to 1199 */
@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-audience__main {
		gap: 48px;
	}

	.tt-home-audience-intro__title {
		max-width: 725px;
		font-size: 42px;
		line-height: 135%;
	}

	.tt-home-audience-cards {
		width: 850px;
	}

	.tt-home-audience-card {
		flex: 0 0 267.3px;
		width: 267.3px;
		height: 390px;
	}

	.tt-home-audience-card__title {
		font-size: 16px;
	}

	.tt-home-audience-logos {
		max-width: 850px;
	}
}

/* 600 to 899 */
@media (max-width: 899px) and (min-width: 600px) {
	.tt-home-audience__inner {
		max-width: 550px;
	}

	.tt-home-audience__main {
		gap: 40px;
	}

	.tt-home-audience-intro {
		width: 100%;
	}

	.tt-home-audience-intro__title {
		max-width: 550px;
		font-size: 36px;
		line-height: 140%;
	}

	.tt-home-audience-cards-wrap {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tt-home-audience-cards {
		width: 100%;
		max-width: none;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		align-content: center;
		gap: 24px;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		overflow-x: visible;
		overflow-y: visible;
	}

	.tt-home-audience-cards a {
		flex: 0 0 215px;
	}

	.tt-home-audience-card {
		width: 215px;
		height: 314px;
		padding: 24px;
	}

	.tt-home-audience-card__overlay {
		height: 176px;
	}

	.tt-home-audience-card__title {
		font-size: 16px;
	}

	.tt-home-audience-logos {
		max-width: 550px;
	}

	.tt-home-audience__controls {
		display: none;
	}
}

/* XS carousel controls */
@media (max-width: 599px) {
	.tt-home-audience__controls {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
	}

	.tt-home-audience__button {
		width: 36px;
		height: 36px;
		border: 1px solid #eaecee;
		border-radius: 8px;
		background: #f8f9fc;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 8px;
		box-sizing: border-box;
		cursor: pointer;
		transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
	}

	.tt-home-audience__button:disabled {
		opacity: 0.45;
		cursor: default;
		border: 0;
	}

	.tt-home-audience__button:not(:disabled):hover,
	.tt-home-audience__button:not(:disabled):focus-visible {
		background: #eeefff;
		border-color: #ccccff;
		outline: none;
	}

	.tt-home-audience__button-icon {
		position: relative;
		display: block;
		width: 20px;
		height: 20px;
	}

	.tt-home-audience__button-icon::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 7px;
		height: 7px;
		border-top: 2px solid #1a252f;
		border-right: 2px solid #1a252f;
		transform-origin: center;
	}

	.tt-home-audience__button:disabled .tt-home-audience__button-icon::before {
		border-color: #8b98a4;
	}

	.tt-home-audience__button-icon--left::before {
		transform: translate(-35%, -50%) rotate(-135deg);
	}

	.tt-home-audience__button-icon--right::before {
		transform: translate(-65%, -50%) rotate(45deg);
	}
}

/* Mobile under 900 */
@media (max-width: 599px) {
	.tt-home-audience {
		padding: 0 20px;
		overflow-x: hidden;
	}

	.tt-home-audience__inner {
		max-width: 100%;
		gap: 48px;
	}

	.tt-home-audience__main {
		gap: 40px;
	}

	.tt-home-audience-intro {
		width: 100%;
	}

	.tt-home-audience-intro__title {
		max-width: 100%;
		font-size: 30px;
		line-height: 140%;
		letter-spacing: 0;
	}

	.tt-home-audience-cards-wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.tt-home-audience-cards {
		width: 100vw;
		max-width: none;
		justify-content: flex-start;
		gap: 16px;
		margin: -24px 0 0 calc(50% - 50vw);
		padding: 24px 20px 0;
		box-sizing: border-box;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		cursor: grab;
		touch-action: pan-y;
	}

	.tt-home-audience-cards.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
		user-select: none;
	}

	.tt-home-audience-cards.audience-scrolled-right {
		margin-left: calc(50% - 50vw);
	}

	.tt-home-audience-cards::-webkit-scrollbar {
		display: none;
	}

	.tt-home-audience-cards a {
		flex: 0 0 236px;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.tt-home-audience-card {
		width: 236px;
		height: 344px;
		padding: 24px;
	}

	.tt-home-audience-card__title {
		font-size: 16px;
	}

	.tt-home-audience-logos {
		width: 100%;
		max-width: 100%;
	}

	.tt-home-audience-logos__group {
		gap: 16px;
	}

	.tt-home-audience-logos__group + .tt-home-audience-logos__group {
		margin-left: 16px;
	}

	.tt-home-audience-logos__marquee::before,
	.tt-home-audience-logos__marquee::after {
		width: 48px;
	}
}
/* Organisation page styles for audience section */
.tt-org__section-logos {
	padding-top: 192px;
}

/* ==========================================================================
   Get started section
   ========================================================================== */

.tt-home-get-started {
	margin-top: 192px;
	padding: 0 22px;
	background: #ffffff;
}

.tt-home-get-started__inner {
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}

.tt-home-get-started__intro {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.tt-home-get-started__pill {
	height: 32px;
	border-radius: 9999px;
	background: #eeefff;
	display: flex;
	align-items: center;
	padding: 2px 8px;
	box-sizing: border-box;
}

.tt-home-get-started__pill-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.tt-home-get-started__pill-label {
	color: #3f41b5;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	white-space: nowrap;
}

.tt-home-get-started__title {
	margin: 0;
	color: #1a252f;
	text-align: center;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 600;
	line-height: 135%;
	letter-spacing: -0.02em;
}

.tt-home-get-started__frame {
	width: 100%;
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #1a252f;
}

.tt-home-get-started__visual {
	position: relative;
	width: 100%;
	height: 630px;
	border-radius: 24px;
	overflow: hidden;
	background: #eeefff;
	isolation: isolate;
	box-sizing: border-box;
}

.tt-home-get-started__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	background: #eeefff;
}

.tt-home-get-started__steps {
	width: 1046px;
	max-width: calc(100% - 48px);
	margin-top: -50px;
	position: relative;
	z-index: 3;
	display: flex;
	align-items: stretch;
	gap: 12px;
	border-radius: 16px;
}

.tt-home-get-started__step {
	--step-icon-width: 48px;

	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	min-height: 99px;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var(--stroke-invertible-neutral-on-theme-medium--default, #EAECEE);
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(16px);
	box-sizing: border-box;
	padding: 0;
	color: #1a252f;
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition:
		border-color 1s ease,
		background-color 1s ease,
		box-shadow 1s ease,
		color 1s ease;
}

.tt-home-get-started__step:hover,
.tt-home-get-started__step:focus-visible {
	border-color: #CCF;
	background: rgba(255, 255, 255, 0.86);
	box-shadow:
		0 4px 8px 3px rgba(0, 0, 0, 0.04),
		0 1px 3px rgba(0, 0, 0, 0.08);
	outline: none;
}

.tt-home-get-started__step--active {
	border-color: #3f41b5;
	background:
		linear-gradient(
			90deg,
			#5153e8 0 var(--step-icon-width),
			rgba(247, 247, 255, 0.86) var(--step-icon-width) 100%
		);
	color: #25266b;
	box-shadow:
		0 4px 8px 3px rgba(0, 0, 0, 0.04),
		0 1px 3px rgba(0, 0, 0, 0.08);
}

.tt-home-get-started__step--active .tt-home-get-started__step-fill,
.tt-home-get-started__step.is-complete .tt-home-get-started__step-fill {
	opacity: 0.4;
}

.tt-home-get-started__step.is-complete:not(.tt-home-get-started__step--active) {
	color: #1a252f;
	border-color: #EAECEE;
	background: rgba(255, 255, 255, 0.75);
}

.tt-home-get-started__step.is-complete:not(.tt-home-get-started__step--active) .tt-home-get-started__step-fill {
	background: rgba(255, 255, 255, 0.75);
}

.tt-home-get-started__step-icon-wrap {
	position: relative;
	z-index: 1;
	align-self: stretch;
	width: var(--step-icon-width);
	flex-shrink: 0;
	border-right: 1px solid #eaecee;
	/*background: rgba(238, 239, 255, 0.5);*/
	background: rgba(255, 255, 255, 0.75);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #3F41B5;
	transition:
		background-color 1s ease,
		border-color 1s ease,
		color 1s ease;
}

.tt-home-get-started__step:hover .tt-home-get-started__step-icon-wrap,
.tt-home-get-started__step:focus-visible .tt-home-get-started__step-icon-wrap {
	border-right-color: #CCF;
	background: rgba(238, 239, 255, 0.50);
}

.tt-home-get-started__step--active .tt-home-get-started__step-icon-wrap {
	border-right-color: transparent;
	background: transparent;
	color: #ffffff;
}

.tt-home-get-started__step-svg {
	width: 20px;
	height: 20px;
	display: block;
	color: inherit;
}

.tt-home-get-started__step:not(:first-child) .tt-home-get-started__step-svg path {
	fill: #3F41B5;
}

.tt-home-get-started__step:not(:first-child).tt-home-get-started__step--active .tt-home-get-started__step-svg path {
	fill: #ffffff;
}

.tt-home-get-started__step-content {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 16px 20px 16px 16px;
	gap: 4px;
}

.tt-home-get-started__step-title {
	width: 100%;
	margin: 0;
	color: inherit;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.tt-home-get-started__step-copy {
	width: 100%;
	margin: 0;
	color: #2b3e4d;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.tt-home-get-started__step--active .tt-home-get-started__step-copy {
	color: #25266b;
}

/* ==========================================================================
   Get started - 1440 to 1919 design
   1040px content width
   ========================================================================== */

@media (max-width: 1439px) and (min-width: 1200px) {
	.tt-home-get-started {
		margin-top: 176px;
		padding: 0 24px;
	}

	.tt-home-get-started__inner {
		max-width: 1040px;
		gap: 64px;
	}

	.tt-home-get-started__title {
		font-size: 48px;
		line-height: 135%;
	}

	.tt-home-get-started__visual {
		height: 530px;
		border-radius: 24px;
	}

	.tt-home-get-started__steps {
		width: 100%;
		max-width: 100%;
		margin-top: -50px;
		padding: 0 22px;
		box-sizing: border-box;
		gap: 12px;
	}

	.tt-home-get-started__step {
		min-height: 99px;
		border-radius: 16px;
	}

	.tt-home-get-started__step-content {
		padding: 16px 20px 16px 16px;
	}

	.tt-home-get-started__step-title,
	.tt-home-get-started__step-copy {
		font-size: 14px;
		line-height: 150%;
	}
}

/* ==========================================================================
   Get started - 1200 to 1439 design
   850px content width
   ========================================================================== */

@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-get-started {
		margin-top: 160px;
		padding: 0 24px;
	}

	.tt-home-get-started__inner {
		max-width: 850px;
		gap: 56px;
	}

	.tt-home-get-started__title {
		font-size: 42px;
		line-height: 135%;
	}

	.tt-home-get-started__frame {
		width: 100%;
		border-radius: 24px;
	}

	.tt-home-get-started__visual {
		width: 100%;
		height: 433px;
		border-radius: 24px;
	}

	.tt-home-get-started__steps {
		width: 558px;
		max-width: 100%;
		margin-top: -50px;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

	.tt-home-get-started__step {
		min-height: 99px;
		border-radius: 16px;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) {
		flex: 0 0 48px;
		width: 48px;
		min-width: 48px;
		min-height: 99px;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-content {
		display: none;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-icon-wrap {
		width: 48px;
		border-right: 0;
	}

	.tt-home-get-started__step-content {
		padding: 16px 20px 16px 16px;
	}

	.tt-home-get-started__step-title,
	.tt-home-get-started__step-copy {
		font-size: 14px;
		line-height: 150%;
	}
}

/* ==========================================================================
   Get started - 900 to 1199 design
   550px content width
   ========================================================================== */

@media (max-width: 899px) and (min-width: 600px) {
	.tt-home-get-started {
		margin-top: 144px;
		padding: 0 24px;
	}

	.tt-home-get-started__inner {
		max-width: 550px;
		gap: 40px;
	}

	.tt-home-get-started__title {
		font-size: 36px;
		line-height: 140%;
		letter-spacing: -0.02em;
	}

	.tt-home-get-started__frame {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		border-radius: 19.24px;
	}

	.tt-home-get-started__visual {
		width: 550px;
		max-width: 100%;
		height: 347.2px;
		border-radius: 19.24px;
	}

	.tt-home-get-started__steps {
		width: 100%;
		max-width: 100%;
		margin-top: 0;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

	.tt-home-get-started__step {
		min-height: 99px;
		border-radius: 24px;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) {
		flex: 0 0 48px;
		width: 48px;
		min-width: 48px;
		min-height: 99px;
		border-radius: 24px;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-content {
		display: none;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-icon-wrap {
		width: 48px;
		border-right: 0;
	}

	.tt-home-get-started__step-content {
		padding: 16px 20px 16px 16px;
	}

	.tt-home-get-started__step-title,
	.tt-home-get-started__step-copy {
		font-size: 14px;
		line-height: 150%;
	}
}

/* ==========================================================================
   Get started - mobile under 900 design
   Based on 402px viewport / 362px content width
   ========================================================================== */

@media (max-width: 599px) {
	.tt-home-get-started {
		margin-top: 112px;
		padding: 0;
		overflow-x: hidden;
	}

	.tt-home-get-started__inner {
		max-width: 100%;
		gap: 40px;
	}

	.tt-home-get-started__title {
		max-width: 100%;
		font-size: 30px;
		line-height: 140%;
		letter-spacing: 0;
	}

	.tt-home-get-started__frame {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		border-radius: 0;
	}

	.tt-home-get-started__visual {
		width: 100%;
		max-width: 100%;
		height: 254px;
		margin: 0 auto;
		transform: none;
		border-radius: 0;
	}

	.tt-home-get-started__steps {
		width: 100%;
		margin-top: 0;
		padding: 0 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.tt-home-get-started__step {
		width: 100%;
		min-height: 56px;
		border-radius: 16px;
	}

	.tt-home-get-started__step--active {
		min-height: 96px;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) {
		box-shadow: none;
	}

	.tt-home-get-started__step-content {
		padding: 16px 20px 16px 16px;
		gap: 0;
	}

	.tt-home-get-started__step--active .tt-home-get-started__step-content {
		gap: 4px;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-copy {
		display: none;
	}

	.tt-home-get-started__step-title,
	.tt-home-get-started__step-copy {
		font-size: 14px;
		line-height: 150%;
	}
}

@media (max-width: 1199px) {
	.tt-home-get-started__visual {
		margin-left: auto;
		margin-right: auto;
	}

	.tt-home-get-started__video {
		object-position: center center;
	}
}

/* ==========================================================================
   Get started animated step expansion
   ========================================================================== */

/*
	Animation approach:
	- Use flex-grow for the tablet compact/expanded button movement.
	- Keep the row height fixed so nothing jumps vertically.
	- Reveal text early and quickly while the card is opening.
	- Hide the video progress fill only during the switch.
*/

/* Active hover safety - all breakpoints */
.tt-home-get-started__step.tt-home-get-started__step--active:hover,
.tt-home-get-started__step.tt-home-get-started__step--active:focus-visible {
	border-color: #3f41b5;
	background:
		linear-gradient(
			90deg,
			#5153e8 0 var(--step-icon-width),
			rgba(247, 247, 255, 0.86) var(--step-icon-width) 100%
		);
	color: #25266b;
	box-shadow:
		0 4px 8px 3px rgba(0, 0, 0, 0.04),
		0 1px 3px rgba(0, 0, 0, 0.08);
}

.tt-home-get-started__step.tt-home-get-started__step--active:hover .tt-home-get-started__step-icon-wrap,
.tt-home-get-started__step.tt-home-get-started__step--active:focus-visible .tt-home-get-started__step-icon-wrap {
	border-right-color: transparent;
	background: transparent;
	color: #ffffff;
}

.tt-home-get-started__step.tt-home-get-started__step--active:hover .tt-home-get-started__step-copy,
.tt-home-get-started__step.tt-home-get-started__step--active:focus-visible .tt-home-get-started__step-copy {
	color: #25266b;
}

/* Hide progress fill while the active card is changing */
.tt-home-get-started__steps.is-switching .tt-home-get-started__step-fill {
	opacity: 0 !important;
	transition:
		opacity 0.08s ease,
		transform 0s linear;
}

/* 850px and 550px content widths: one expanded card + two compact icon buttons */
@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-get-started__steps {
		--tt-collapsed-step-width: 48px;
		--tt-step-row-height: 99px;

		display: flex;
		align-items: stretch;
		justify-content: center;
		gap: 12px;
		height: var(--tt-step-row-height);
		min-height: var(--tt-step-row-height);
		max-height: var(--tt-step-row-height);
		overflow: visible;
	}

	.tt-home-get-started__step,
	.tt-home-get-started__step:not(.tt-home-get-started__step--active) {
		width: auto;
		min-width: 0;
		max-width: none;
		height: var(--tt-step-row-height);
		min-height: var(--tt-step-row-height);
		max-height: var(--tt-step-row-height);
		overflow: hidden;
	}

	.tt-home-get-started__step {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 0;
		transition:
			flex-grow 0.88s cubic-bezier(0.42, 0, 0.18, 1),
			flex-basis 0.88s cubic-bezier(0.42, 0, 0.18, 1),
			border-color 0.18s ease,
			box-shadow 0.18s ease,
			color 0.18s ease;
		will-change: flex-grow, flex-basis;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: var(--tt-collapsed-step-width);
		background: rgba(255, 255, 255, 0.75);
		border-color: #eaecee;
		box-shadow: none;
		color: #1a252f;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active):hover,
	.tt-home-get-started__step:not(.tt-home-get-started__step--active):focus-visible {
		background: rgba(255, 255, 255, 0.86);
		border-color: #ccccff;
		box-shadow:
			0 4px 8px 3px rgba(0, 0, 0, 0.04),
			0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.tt-home-get-started__step-icon-wrap,
	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-icon-wrap {
		width: var(--tt-collapsed-step-width);
		height: var(--tt-step-row-height);
		min-height: var(--tt-step-row-height);
		flex: 0 0 var(--tt-collapsed-step-width);
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-icon-wrap {
		border-right: 0;
	}

	.tt-home-get-started__step-content,
	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-content {
		display: flex;
		height: var(--tt-step-row-height);
		min-height: var(--tt-step-row-height);
		max-height: var(--tt-step-row-height);
		min-width: 0;
		overflow: hidden;
		box-sizing: border-box;
	}

	.tt-home-get-started__step-content {
		flex: 1 1 auto;
		opacity: 1;
		transform: translateX(0);
		transition:
			opacity 0.22s ease 0.12s,
			transform 0.36s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
		will-change: opacity, transform;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-content {
		flex: 0 0 0;
		width: 0;
		padding-right: 0;
		padding-left: 0;
		opacity: 0;
		transform: translateX(-6px);
		pointer-events: none;
		transition:
			opacity 0.1s ease,
			transform 0.14s ease;
	}

	.tt-home-get-started__step-title,
	.tt-home-get-started__step-copy {
		overflow: hidden;
	}

	.tt-home-get-started__step-title {
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tt-home-get-started__step-copy {
		display: -webkit-box;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-title,
	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-copy {
		white-space: nowrap;
	}
}

/* 850px content width */
@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-get-started__steps {
		width: 558px;
	}
}

/* 550px content width */
@media (max-width: 899px) and (min-width: 600px) {
	.tt-home-get-started__steps {
		width: 100%;
	}
}

/* Mobile: stacked layout, smoother copy reveal */
@media (max-width: 599px) {
	.tt-home-get-started__step {
		transition:
			min-height 0.42s cubic-bezier(0.42, 0, 0.18, 1),
			border-color 0.18s ease,
			box-shadow 0.18s ease,
			color 0.18s ease;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) {
		background: rgba(255, 255, 255, 0.75);
		border-color: #eaecee;
		box-shadow: none;
		color: #1a252f;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active):hover,
	.tt-home-get-started__step:not(.tt-home-get-started__step--active):focus-visible {
		background: rgba(255, 255, 255, 0.86);
		border-color: #ccccff;
		box-shadow:
			0 4px 8px 3px rgba(0, 0, 0, 0.04),
			0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.tt-home-get-started__step-copy,
	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-copy {
		display: block;
		overflow: hidden;
	}

	.tt-home-get-started__step-copy {
		max-height: 80px;
		opacity: 1;
		transform: translateY(0);
		transition:
			max-height 0.28s cubic-bezier(0.42, 0, 0.18, 1),
			opacity 0.18s ease 0.08s,
			transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
	}

	.tt-home-get-started__step:not(.tt-home-get-started__step--active) .tt-home-get-started__step-copy {
		max-height: 0;
		opacity: 0;
		transform: translateY(-4px);
		transition:
			max-height 0.2s cubic-bezier(0.42, 0, 0.18, 1),
			opacity 0.12s ease,
			transform 0.16s ease;
	}
}



/* ==========================================================================
   Key benefits section
   ========================================================================== */

.tt-home-key-benefits {
	margin-top: 193px;
	padding: 0 22px;
	background: #ffffff;
	overflow-x: clip;
}

.tt-home-key-benefits__inner {
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 64px;
}

.tt-home-key-benefits__intro {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.tt-home-key-benefits__pill {
	height: 32px;
	border-radius: 9999px;
	background: #eeefff;
	display: flex;
	align-items: center;
	padding: 2px 8px;
	box-sizing: border-box;
}

.tt-home-key-benefits__pill-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.tt-home-key-benefits__pill-label {
	color: #3f41b5;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	white-space: nowrap;
}

.tt-home-key-benefits__title {
	width: 100%;
	max-width: 668px;
	margin: 0;
	color: #1a252f;
	text-align: center;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 600;
	line-height: 135%;
	letter-spacing: -0.02em;
}

.tt-home-key-benefits__content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.tt-home-key-benefits__viewport {
	width: 100%;
	max-width: 1260px;
	overflow: visible;
	position: relative;
	outline: none;
	cursor: grab;
	touch-action: pan-y;
}

.tt-home-key-benefits__track {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	width: max-content;
	will-change: transform;
}

.tt-home-key-benefits-card {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.tt-home-key-benefits-card--small {
	width: 511px;
}

.tt-home-key-benefits-card--large {
	width: 725px;
}

.tt-home-key-benefits-card__media {
	width: 100%;
	height: 511px;
	border-radius: 24px;
	overflow: hidden;
	background: #f8f9fc;
}

.tt-home-key-benefits-card__media--placeholder {
	background:
		linear-gradient(135deg, rgba(92, 87, 245, 0.10) 0%, rgba(63, 65, 181, 0.20) 100%),
		#f8f9fc;
}

.tt-home-key-benefits-card__media-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 24px;
}

.tt-students .tt-home-key-benefits-card__media--student-email {
	position: relative;
	isolation: isolate;
	background-color: #eeefff;
	background-image: url("/wp-content/themes/talktype-2026/assets/images/Audience%20-%20Student/Works%20wherever%20you%20study/Drafting%20emails%20to%20tutors%20or%20admin%20bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.tt-students .tt-home-key-benefits-card__media--student-email .tt-home-key-benefits-card__media-image {
	position: relative;
	z-index: 1;
	object-fit: contain;
	object-position: center bottom;
}

.tt-home-key-benefits-card__media--workplace-reports {
	position: relative;
	background: #f8f9fc;
	overflow: hidden;
}

.tt-home-key-benefits-card__media-image--workplace-reports {
	position: absolute;
	left: 65px;
	top: 72px;
	width: 660px;
	height: auto;
	display: block;
	pointer-events: none;
}

.tt-home-key-benefits-card__body {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 20px 16px 8px;
	box-sizing: border-box;
}

.tt-home-key-benefits-card__title {
	width: 100%;
	margin: 0;
	color: #1a252f;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.tt-home-key-benefits-card__copy {
	width: 100%;
	margin: 0;
	color: #596977;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.tt-home-key-benefits__controls {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.tt-home-key-benefits__button {
	width: 36px;
	height: 36px;
	border: 1px solid #EAECEE;
	border-radius: 8px;
	background: #f8f9fc;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	box-sizing: border-box;
	cursor: pointer;
}

.tt-home-key-benefits__button:disabled {
	opacity: 0.45;
	cursor: default;
	border: 0;
}

.tt-home-key-benefits__button--outlined {
	border: 1px solid #eaecee;
}

.tt-home-key-benefits__button-icon {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
}

.tt-home-key-benefits__button-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-top: 2px solid #1a252f;
	border-right: 2px solid #1a252f;
	transform-origin: center;
}

.tt-home-key-benefits__button-icon--left::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

.tt-home-key-benefits__button-icon--right::before {
	transform: translate(-65%, -50%) rotate(45deg);
}

/* ==========================================================================
   Key benefits - 1440 to 1919 design
   ========================================================================== */

@media (max-width: 1439px) and (min-width: 1200px) {
	.tt-home-key-benefits {
		margin-top: 176px;
		padding: 0 24px;
	}

	.tt-home-key-benefits__inner {
		max-width: 1040px;
		gap: 48px;
	}

	.tt-home-key-benefits__viewport {
		max-width: 1040px;
	}

	.tt-home-key-benefits__title {
		max-width: 668px;
		font-size: 48px;
		line-height: 135%;
	}

	.tt-home-key-benefits-card--small {
		width: 416px;
	}

	.tt-home-key-benefits-card--large {
		width: 600px;
	}

	.tt-home-key-benefits-card__media {
		height: 416px;
	}

	.tt-home-key-benefits-card__media-image--workplace-reports {
		left: 40px;
		top: 52px;
		width: calc(100% - 40px);
	}
}

/* ==========================================================================
   Key benefits - 1200 to 1439 design
   ========================================================================== */

@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-key-benefits {
		margin-top: 160px;
		padding: 0 24px;
	}

	.tt-home-key-benefits__inner {
		max-width: 850px;
		gap: 48px;
	}

	.tt-home-key-benefits__viewport {
		max-width: 850px;
	}

	.tt-home-key-benefits__title {
		max-width: 658px;
		font-size: 42px;
		line-height: 135%;
	}

	.tt-home-key-benefits-card--small {
		width: 340px;
	}

	.tt-home-key-benefits-card--large {
		width: 486px;
	}

	.tt-home-key-benefits-card__media {
		height: 340px;
	}

	.tt-home-key-benefits-card__body {
		padding: 20px 16px 8px;
	}

	.tt-home-key-benefits-card__media-image--workplace-reports {
		left: 32px;
		top: 36px;
		width: calc(100% - 32px);
	}
}

/* ==========================================================================
   Key benefits - 900 to 1199 design
   ========================================================================== */

@media (max-width: 899px) and (min-width: 600px) {
	.tt-home-key-benefits {
		margin-top: 144px;
		padding: 0 24px;
		overflow-x: clip;
	}

	.tt-home-key-benefits__inner {
		max-width: 550px;
		gap: 40px;
	}

	.tt-home-key-benefits__viewport {
		max-width: 550px;
		overflow: visible;
	}

	.tt-home-key-benefits__title {
		max-width: 550px;
		font-size: 36px;
		line-height: 140%;
		letter-spacing: -0.02em;
	}

	.tt-home-key-benefits__track {
		gap: 24px;
	}

	.tt-home-key-benefits-card--small {
		width: 359px;
	}

	.tt-home-key-benefits-card--large {
		width: 550px;
	}

	.tt-home-key-benefits-card__media {
		height: 359px;
		border-radius: 24px;
	}

	.tt-home-key-benefits-card__body {
		padding: 20px 16px 8px;
	}

	.tt-home-key-benefits-card__media-image--workplace-reports {
		left: 32px;
		top: 36px;
		width: calc(100% - 32px);
	}
}

/* ==========================================================================
   Key benefits - mobile under 900 design
   ========================================================================== */

@media (max-width: 599px) {
	.tt-home-key-benefits {
		margin-top: 112px;
		padding: 0 20px;
		overflow-x: clip;
	}

	.tt-home-key-benefits__inner {
		max-width: 100%;
		gap: 40px;
	}

	.tt-home-key-benefits__title {
		max-width: 348px;
		font-size: 30px;
		line-height: 140%;
		letter-spacing: 0;
	}

	.tt-home-key-benefits__content {
		width: 100%;
		padding: 0 32px;
		box-sizing: border-box;
		gap: 24px;
	}

	.tt-home-key-benefits__viewport {
		width: 100%;
		max-width: 100%;
		overflow: visible;
		box-sizing: border-box;
	}

	.tt-home-key-benefits__track {
		gap: 16px;
		padding: 0;
		scroll-snap-type: none;
	}

	.tt-home-key-benefits-card,
	.tt-home-key-benefits-card--small,
	.tt-home-key-benefits-card--large {
		width: 299px;
		scroll-snap-align: none;
	}

	.tt-home-key-benefits-card__media {
		height: 299px;
		border-radius: 24px;
	}

	.tt-home-key-benefits-card__body {
		padding: 20px 16px 8px;
	}

	.tt-home-key-benefits-card__title,
	.tt-home-key-benefits-card__copy {
		font-size: 16px;
		line-height: 150%;
	}

	.tt-home-key-benefits__controls {
		justify-content: flex-end;
	}

	.tt-home-key-benefits-card__media-image--workplace-reports {
		left: 16px;
		top: 20px;
		width: calc(100% - 16px);
	}
}

/* ==========================================================================
   Features section
   ========================================================================== */

.tt-home-features {
	margin-top: 192px;
	padding: 0 22px;
	background: #ffffff;
	--feature-card-height: 532px;
	--feature-card-gap: 24px;
	--feature-lip-size: 20px;
	--feature-sticky-top: 64px;
}

.tt-home-features__inner {
	width: 100%;
	max-width: 862px;
	margin: 0 auto;
}

.tt-home-features__intro {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.tt-home-features__pill {
	height: 32px;
	border-radius: 9999px;
	background: #eeefff;
	display: flex;
	align-items: center;
	padding: 2px 8px;
	box-sizing: border-box;
}

.tt-home-features__pill-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.tt-home-features__pill-label {
	color: #3f41b5;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	white-space: nowrap;
}

.tt-home-features__title {
	width: 100%;
	max-width: 832px;
	margin: 0;
	color: #1a252f;
	text-align: center;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 600;
	line-height: 135%;
	letter-spacing: -0.02em;
}

/* ==========================================================================
   Feature sticky stack
   ========================================================================== */

.tt-home-features__scroll {
	position: relative;
	margin-top: 64px;
	margin-bottom: 0;
}

.tt-home-features__sticky {
	position: -webkit-sticky;
	position: sticky;
	display: block;
	pointer-events: none;
	overflow: visible;
}

.tt-home-features__stack {
	position: relative;
	width: 100%;
	overflow: visible;
}

.tt-home-feature-card {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: var(--feature-card-height);
	border-radius: 24px;
	background: #f8f9fc;
	padding: 40px;
	box-sizing: border-box;
	transform-origin: center top;
	will-change: transform, box-shadow;
	pointer-events: auto;
	box-shadow: 0 16px 40px rgba(24, 35, 47, 0);
	overflow: hidden;
	isolation: isolate;
}

.tt-home-feature-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.tt-home-feature-card__copy {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 578px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.tt-home-feature-card__heading {
	width: 100%;
	margin: 0;
	color: #1a252f;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.tt-home-feature-card__text {
	width: 100%;
	margin: 0;
	color: #596977;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

/* ==========================================================================
   Individual card backgrounds
   ========================================================================== */

.tt-home-feature-card--dictate::before {
	background: #f8f9fc;
}

.tt-home-feature-card__media--dictate {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 78%;
	pointer-events: none;
	z-index: 1;
}

.tt-home-feature-card__media--dictate img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
}

.tt-home-feature-card--writing-space {
	background-image: url("/wp-content/themes/talktype-2026/assets/images/Home/Feature%20highlights/A%20writing%20space%20that_s%20yours%20-%20bg.png");
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}

.tt-home-feature-card--writing-space::before {
	background: rgba(255, 255, 255, 0.01);
	backdrop-filter: blur(96px);
}

.tt-home-feature-card--writing-space::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #d9d9d9;
	mix-blend-mode: color-burn;
	pointer-events: none;
}

.tt-home-feature-card--capture::before {
	background-color: #000;
	background-image: url("/wp-content/themes/talktype-2026/assets/images/Home/Feature%20highlights/Capture%20first%2C%20polish%20after%20-%20bg.png");
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
}

.tt-home-feature-card--capture::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(81, 83, 232, 0.25);
	mix-blend-mode: plus-lighter;
	pointer-events: none;
}

.tt-home-feature-card__media--capture {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 65%;
	pointer-events: none;
	z-index: 2;
}

.tt-home-feature-card__media--capture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
}

.tt-home-feature-card--accessibility::before {
	background: transparent;
}

.tt-home-feature-card--accessibility::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(138.22deg, rgba(0,0,0,0.52) 25.819%, rgba(0,0,0,0.104) 49.127%, rgba(0,0,0,0) 84.705%);
	pointer-events: none;
}

.tt-home-feature-card__media--accessibility {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.tt-home-feature-card__media--accessibility img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.tt-home-feature-card__media--writing-space {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 78%;
	z-index: 0;
	pointer-events: none;
}

.tt-home-feature-card__media--writing-space img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
}

.tt-home-feature-card__media--dictionary {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 72%;
	z-index: 1;
	pointer-events: none;
}

.tt-home-feature-card__media--dictionary img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom right;
}

.tt-home-feature-card__media--up-running {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.tt-home-feature-card__media--up-running img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}

.tt-home-feature-card--dictionary::before {
	background: #f7f7ff;
}

.tt-home-feature-card--dictionary::after {
	content: none;
}

.tt-home-feature-card--up-running::before {
	background: transparent;
}

.tt-home-feature-card--up-running::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(154.93deg, rgba(0,0,0,0.75) 12.717%, rgba(0,0,0,0.45) 34.429%, rgba(0,0,0,0.15) 49.815%, rgba(0,0,0,0) 72.385%);
	pointer-events: none;
}

.tt-home-feature-card--writing-space .tt-home-feature-card__heading,
.tt-home-feature-card--writing-space .tt-home-feature-card__text {
	color: #262967;
}

.tt-home-feature-card--up-running .tt-home-feature-card__heading,
.tt-home-feature-card--up-running .tt-home-feature-card__text,
.tt-home-feature-card--capture .tt-home-feature-card__heading,
.tt-home-feature-card--capture .tt-home-feature-card__text {
	color: #ffffff;
}

.tt-home-feature-card--accessibility .tt-home-feature-card__heading,
.tt-home-feature-card--accessibility .tt-home-feature-card__text {
	color: #ffffff;
}

.tt-students .tt-home-feature-card--dictate::before,
.tt-students .tt-home-feature-card--writing-space::before {
	background: #f7f7ff;
}

.tt-students .tt-home-feature-card--writing-space {
	background: #f7f7ff;
}

.tt-students .tt-home-feature-card--writing-space::after {
	content: none;
}

.tt-students .tt-home-feature-card--writing-space .tt-home-feature-card__heading {
	color: #1a252f;
}

.tt-students .tt-home-feature-card--writing-space .tt-home-feature-card__text {
	color: #596977;
}

.tt-students .tt-home-feature-card__media--dictate {
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 60%;
	transform: none;
	z-index: 2;
}

.tt-students .tt-home-feature-card__media--writing-space,
.tt-students .tt-home-feature-card--accessibility .tt-home-feature-card__media--capture {
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 67.684%;
	transform: none;
	z-index: 2;
}

.tt-students .tt-home-feature-card__media--dictate img,
.tt-students .tt-home-feature-card__media--writing-space img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

.tt-students .tt-home-feature-card--capture {
	background-color: #000;
	background-image: url("/wp-content/themes/talktype-2026/assets/images/Audience%20-%20Student/Do%20these%20challenges%20sound%20familiar_/Existing%20tools%20make%20it%20harder%2C%20not%20easier.png");
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}

.tt-students .tt-home-feature-card--capture::before {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.65) 0%,
		rgba(0, 0, 0, 0.35) 40%,
		rgba(0, 0, 0, 0) 70%
	);
}

.tt-students .tt-home-feature-card--capture::after {
	content: none;
}

.tt-students .tt-home-feature-card--capture .tt-home-feature-card__media--accessibility {
	display: none;
}

.tt-students .tt-home-feature-card--accessibility {
	background-color: #5153e8;
	background-image: url("/wp-content/themes/talktype-2026/assets/images/Audience%20-%20Student/Do%20these%20challenges%20sound%20familiar_/The%20effort%20outweighs%20the%20output%20bg1%20%281%29.png");
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
}

.tt-students .tt-home-feature-card--accessibility::before {
	background: transparent;
}

.tt-students .tt-home-feature-card--accessibility::after {
	content: none;
}

.tt-students .tt-home-feature-card--accessibility .tt-home-feature-card__heading,
.tt-students .tt-home-feature-card--accessibility .tt-home-feature-card__text {
	color: #25266b;
}

.tt-students .tt-home-feature-card--accessibility .tt-home-feature-card__media--capture img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

/* ==========================================================================
   Organisations page: stacking cards (writing-not-bottleneck section)
   ========================================================================== */

.tt-organisations .tt-home-feature-card--dictate {
    background-image: url("/wp-content/themes/talktype-2026/assets/images/Audience%20-%20Organisations/What%20changes%20when%20writing%20not%20bottleneck/Support%20that%20doesn_t%20wait%20for%20disclosure%20-%20bg%20%281%29.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tt-organisations .tt-home-feature-card--dictate::before {
    background: transparent;
}

.tt-organisations .tt-home-feature-card--dictate .tt-home-feature-card__heading,
.tt-organisations .tt-home-feature-card--dictate .tt-home-feature-card__text {
    color: #25266b;
}

.tt-organisations .tt-home-feature-card--writing-space {
    background-image: none;
    background-color: #f7f7ff;
}

.tt-organisations .tt-home-feature-card--writing-space::before {
    background: #f7f7ff;
}

.tt-organisations .tt-home-feature-card--writing-space::after {
    content: none;
}

.tt-organisations .tt-home-feature-card--writing-space .tt-home-feature-card__heading {
    color: #1a252f;
}

.tt-organisations .tt-home-feature-card--writing-space .tt-home-feature-card__text {
    color: #596977;
}

.tt-organisations .tt-home-feature-card--writing-space .tt-home-feature-card__media--writing-space {
    height: 61%;
}

.tt-organisations .tt-home-feature-card--writing-space .tt-home-feature-card__media--writing-space img {
    object-fit: cover;
    object-position: top center;
}

.tt-organisations .tt-home-feature-card--capture {
    background-image: url("/wp-content/themes/talktype-2026/assets/images/Audience%20-%20Organisations/What%20changes%20when%20writing%20not%20bottleneck/Written%20tasks%20take%20less%20time.%20Everything%20else%20benefits.%20%281%29.png");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.tt-organisations .tt-home-feature-card--capture::before {
    background-color: transparent;
    background-image: none;
}

.tt-organisations .tt-home-feature-card--capture::after {
    content: none;
}

.tt-organisations .tt-home-feature-card--capture .tt-home-feature-card__heading,
.tt-organisations .tt-home-feature-card--capture .tt-home-feature-card__text {
    color: #ffffff;
}

.tt-organisations .tt-home-feature-card--capture .tt-home-feature-card__media--capture {
    display: none;
}

/* ==========================================================================
   Features - 1440 to 1919 design
   ========================================================================== */

@media (max-width: 1439px) and (min-width: 1200px) {
	.tt-home-features {
		margin-top: 176px;
		padding: 0 24px;
		--feature-card-height: 530px;
	}

	.tt-home-features__inner {
		max-width: 862px;
	}

	.tt-home-features__title {
		max-width: 832px;
		font-size: 48px;
		line-height: 135%;
	}

	.tt-home-features__scroll {
		margin-top: 64px;
	}
}

/* ==========================================================================
   Features - 1200 to 1439 design
   ========================================================================== */

@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-features {
		margin-top: 160px;
		padding: 0 24px;
		--feature-card-height: 523px;
	}

	.tt-home-features__inner {
		max-width: 850px;
	}

	.tt-home-features__title {
		max-width: 850px;
		font-size: 42px;
		line-height: 135%;
	}

	.tt-home-features__scroll {
		margin-top: 56px;
	}

	.tt-home-feature-card {
		padding: 40px;
	}

	.tt-home-feature-card__copy {
		max-width: 578px;
	}
}

/* ==========================================================================
   Features - 900 to 1199 design
   ========================================================================== */

@media (max-width: 899px) and (min-width: 600px) {
	.tt-home-features {
		margin-top: 144px;
		padding: 0 24px;
		--feature-card-height: 508px;
	}

	.tt-home-features__inner {
		max-width: 550px;
	}

	.tt-home-features__title {
		max-width: 550px;
		font-size: 36px;
		line-height: 140%;
		letter-spacing: -0.02em;
	}

	.tt-home-features__scroll {
		margin-top: 56px;
	}

	.tt-home-feature-card {
		padding: 32px;
	}

	.tt-home-feature-card--dictate,
	.tt-home-feature-card--writing-space {
		height: 508px;
	}

	.tt-home-feature-card--capture,
	.tt-home-feature-card--accessibility {
		height: 481px;
	}

	.tt-home-feature-card--dictionary,
	.tt-home-feature-card--up-running {
		height: 477px;
	}

	.tt-home-feature-card__copy {
		max-width: 100%;
	}

	.tt-home-feature-card__media--dictate {
		left: 0;
		width: 100%;
		height: 55%;
	}

	.tt-home-feature-card__media--dictate img {
		object-position: bottom center;
	}

	.tt-home-feature-card__media--capture {
		left: 0;
		width: 100%;
		height: 58%;
	}

	.tt-home-feature-card__media--accessibility {
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.tt-home-feature-card__media--writing-space,
	.tt-home-feature-card__media--dictionary {
		width: 100%;
		left: 0;
		right: auto;
		height: 55%;
	}

	.tt-home-feature-card__media--writing-space img,
	.tt-home-feature-card__media--dictionary img {
		object-position: bottom center;
	}

	.tt-home-feature-card__media--up-running {
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.tt-students .tt-home-feature-card__media--dictate,
	.tt-students .tt-home-feature-card__media--writing-space {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 58%;
		transform: none;
	}

	.tt-students .tt-home-feature-card__media--dictate img,
	.tt-students .tt-home-feature-card__media--writing-space img {
		object-fit: contain;
		object-position: center bottom;
	}
}

/* ==========================================================================
   Features - mobile under 900 design
   ========================================================================== */

@media (max-width: 599px) {
	.tt-home-features {
		margin-top: 112px;
		padding: 0 20px;
		--feature-card-height: 447px;
	}

	.tt-home-features__inner {
		max-width: 100%;
	}

	.tt-home-features__title {
		max-width: 100%;
		font-size: 30px;
		line-height: 140%;
		letter-spacing: 0;
	}

	.tt-home-features__scroll {
		margin-top: 56px;
	}

	.tt-home-feature-card {
		padding: 32px;
	}

	.tt-home-feature-card--dictate,
	.tt-home-feature-card--writing-space {
		height: 447px;
	}

	.tt-home-feature-card--capture,
	.tt-home-feature-card--accessibility {
		height: 420px;
	}

	.tt-home-feature-card--dictionary,
	.tt-home-feature-card--up-running {
		height: 393px;
	}

	.tt-home-feature-card__copy {
		max-width: 100%;
	}

	.tt-home-feature-card__heading,
	.tt-home-feature-card__text {
		font-size: 18px;
		line-height: 150%;
	}

	.tt-home-feature-card__media--dictate {
		left: 0;
		width: 100%;
		height: 50%;
	}

	.tt-home-feature-card__media--dictate img {
		object-position: bottom center;
	}

	.tt-home-feature-card__media--capture {
		left: 0;
		top: auto;
		width: 100%;
		height: 55%;
	}

	.tt-home-feature-card__media--accessibility {
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.tt-home-feature-card__media--writing-space,
	.tt-home-feature-card__media--dictionary {
		width: 100%;
		left: 0;
		right: auto;
		height: 50%;
	}

	.tt-home-feature-card__media--writing-space img,
	.tt-home-feature-card__media--dictionary img {
		object-position: bottom center;
	}

	.tt-home-feature-card__media--up-running {
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.tt-students .tt-home-feature-card__media--dictate,
	.tt-students .tt-home-feature-card__media--writing-space {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 52%;
		transform: none;
	}

	.tt-students .tt-home-feature-card__media--dictate img,
	.tt-students .tt-home-feature-card__media--writing-space img {
		object-fit: contain;
		object-position: center bottom;
	}
}

/* ==========================================================================
   Try TalkType panel
   ========================================================================== */

.tt-home-try-talktype-panel {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 688px;
	margin-top: 144px;
	padding: 144px 22px;
	box-sizing: border-box;
	background: #ffffff;
}

.tt-home-try-talktype-panel__inner {
	position: relative;
	z-index: 6;
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
	padding-top: 0;
	box-sizing: border-box;
}

.tt-home-try-talktype-panel__media,
.tt-home-try-talktype-panel__blur,
.tt-home-try-talktype-panel__burn {
	position: absolute;
	inset: 0;
}

.tt-home-try-talktype-panel__media {
	z-index: 0;
	background-image: url("/wp-content/uploads/2026/06/tt-home-mid-cta-bg.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.tt-home-try-talktype-panel__blur {
	z-index: 1;
	backdrop-filter: none;
	background: transparent;
}

.tt-home-try-talktype-panel__burn {
	display: none;
}

.tt-home-try-talktype-panel__top-cap,
.tt-home-try-talktype-panel__bottom-cap {
	position: absolute;
	left: 0;
	right: 0;
	height: 48px;
	background: #ffffff;
	overflow: hidden;
	pointer-events: none;
}

.tt-home-try-talktype-panel__top-cap {
	top: 0;
	z-index: 4;
	border-radius: 0 0 48px 48px;
}

.tt-home-try-talktype-panel__bottom-cap {
	bottom: 0;
	z-index: 5;
	border-radius: 48px 48px 0 0;
}

/* ==========================================================================
   Try TalkType cards
   ========================================================================== */

.tt-home-try-talktype-panel__cards {
	position: relative;
	z-index: 6;
	display: flex;
	justify-content: center;
	gap: 24px;
	width: 100%;
	max-width: 832px;
	margin: 0 auto;
}

.tt-home-try-talktype-card {
	flex: 1 1 0;
	min-width: 0;
	backdrop-filter: blur(32px);
	background: rgba(255, 255, 255, 0.75);
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px;
	gap: 8px;
	box-sizing: border-box;
}

.tt-home-try-talktype-card__media {
	align-self: stretch;
	height: 204px;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 8px;
	box-sizing: border-box;
	position: relative;
	isolation: isolate;
	background:
		linear-gradient(180deg, rgba(87, 99, 141, 0.10), rgba(45, 55, 72, 0.18)),
		linear-gradient(135deg, #d6d7e8 0%, #9fa7c9 100%);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.tt-home-try-talktype-card__media-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.tt-home-try-talktype-card__pill {
	height: 24px;
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 9999px;
	background: #eeefff;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}

.tt-home-try-talktype-card__pill-label {
	color: #3f41b5;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	white-space: nowrap;
}

.tt-home-try-talktype-card__body {
	align-self: stretch;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: 8px;
	gap: 8px;
	box-sizing: border-box;
}

.tt-home-try-talktype-card__title {
	width: 100%;
	margin: 0;
	color: #25266b;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.tt-home-try-talktype-card__text {
	width: 100%;
	margin: 0;
	color: #25266b;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	padding-bottom: 8px;
}

.tt-home-try-talktype-card__actions {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: auto;
}

.tt-home-try-talktype-card__button {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	box-sizing: border-box;
	text-decoration: none;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	transition: 0.2s ease;
}

.tt-home-try-talktype-card__button-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: 0.5;
}

.tt-home-try-talktype-card__button--primary {
	background: #5153e8;
	color: #f7f7ff;
}

.tt-home-try-talktype-card__button--primary:hover,
.tt-home-try-talktype-card__button--primary:focus {
	background: #4446da;
	color: #f7f7ff;
}

.tt-home-try-talktype-card__button--secondary {
	background: #eeefff;
	border: 1px solid #ccccff;
	color: #3f41b5;
}

.tt-home-try-talktype-card__button--secondary:hover,
.tt-home-try-talktype-card__button--secondary:focus {
	background: #e7e8ff;
	color: #3f41b5;
}

.tt-home-try-talktype-card__button--secondary .tt-home-try-talktype-card__button-icon {
	opacity: 1;
}

/* ==========================================================================
   Try TalkType panel - 1440 to 1919 design
   ========================================================================== */

@media (max-width: 1439px) and (min-width: 1200px) {
	.tt-home-try-talktype-panel {
		min-height: 687px;
		padding: 144px 24px;
	}

	.tt-home-try-talktype-panel__inner {
		max-width: 1040px;
	}

	.tt-home-try-talktype-panel__cards {
		max-width: 832px;
	}
}

/* ==========================================================================
   Try TalkType panel - 1200 to 1439 design
   ========================================================================== */

@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-try-talktype-panel {
		min-height: 684px;
		padding: 144px 24px;
	}

	.tt-home-try-talktype-panel__inner {
		max-width: 850px;
	}

	.tt-home-try-talktype-panel__cards {
		max-width: 832px;
	}

	.tt-home-try-talktype-card__title,
	.tt-home-try-talktype-card__text {
		font-size: 16px;
	}
}

/* ==========================================================================
   Try TalkType panel - 900 to 1199 design
   ========================================================================== */

@media (max-width: 899px) and (min-width: 600px) {
	.tt-home-try-talktype-panel {
		min-height: 710px;
		padding: 112px 20px;
		margin-top: 96px;
	}

	.tt-home-try-talktype-panel__inner {
		max-width: 550px;
	}

	.tt-home-try-talktype-panel__cards {
		max-width: 550px;
		flex-direction: column;
		gap: 24px;
	}

	.tt-home-try-talktype-card {
		width: 100%;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
	}

	.tt-home-try-talktype-card__media {
		width: 199px;
		height: auto;
		flex: 0 0 199px;
		aspect-ratio: 744 / 408;
	}

	.tt-home-try-talktype-card__body {
		align-self: stretch;
		justify-content: center;
		padding: 24px 12px;
	}

	.tt-home-try-talktype-card__title,
	.tt-home-try-talktype-card__text {
		font-size: 16px;
	}

	.tt-home-try-talktype-card__actions {
		margin-top: 0;
	}

	.tt-home-try-talktype-card__button {
		white-space: normal;
	}
}

/* ==========================================================================
   Try TalkType panel - mobile under 900 design
   ========================================================================== */

@media (max-width: 599px) {
	.tt-home-try-talktype-panel {
		min-height: 1064px;
		margin-top: 48px;
		padding: 112px 20px;
	}

	.tt-home-try-talktype-panel__inner {
		max-width: 100%;
	}

	.tt-home-try-talktype-panel__cards {
		max-width: 100%;
		flex-direction: column;
		gap: 24px;
	}

	.tt-home-try-talktype-card {
		width: 100%;
		flex-direction: column;
	}

	.tt-home-try-talktype-card__media {
		width: 100%;
		height: auto;
		flex: none;
		aspect-ratio: 744 / 408;
	}

	.tt-home-try-talktype-card__title,
	.tt-home-try-talktype-card__text {
		font-size: 16px;
	}

	.tt-home-try-talktype-card__button {
		width: 100%;
		white-space: normal;
	}
}

/* ==========================================================================
   Use cases section
   ========================================================================== */

.tt-home-use-cases {
	margin-top: 144px;
	padding: 0 22px;
	background: #ffffff;
	overflow-x: clip;
}

.tt-home-use-cases__inner {
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 64px;
}

.tt-home-use-cases__intro {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.tt-home-use-cases__pill {
	height: 32px;
	border-radius: 9999px;
	background: #eeefff;
	display: flex;
	align-items: center;
	padding: 2px 8px;
	box-sizing: border-box;
}

.tt-home-use-cases__pill-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.tt-home-use-cases__pill-label {
	color: #3f41b5;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	white-space: nowrap;
}

.tt-home-use-cases__title {
	width: 100%;
	max-width: 780px;
	margin: 0;
	color: #1a252f;
	text-align: center;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 600;
	line-height: 135%;
	letter-spacing: -0.02em;
}

.tt-home-use-cases__content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.tt-home-use-cases__viewport {
	width: 100%;
	max-width: 1260px;
	overflow: visible;
	position: relative;
	outline: none;
	cursor: grab;
	touch-action: pan-y;
}

.tt-home-use-cases__track {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	width: max-content;
	will-change: transform;
}

.tt-home-use-cases-card {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tt-home-use-cases-card--small {
	width: 511px;
}

.tt-home-use-cases-card--large {
	width: 725px;
}

.tt-home-use-cases-card__media {
	position: relative;
	width: 100%;
	height: 511px;
	border-radius: 24px;
	overflow: hidden;
	background: #f8f9fc;
	isolation: isolate;
}

.tt-home-use-cases-card__media--documents,
.tt-home-use-cases-card__media--emails {
	display: flex;
	align-items: flex-start;
	padding: 40px;
	box-sizing: border-box;
	background-color: #f8f9fc;
	background-repeat: no-repeat;
}

.tt-home-use-cases-card__media--documents {
	background-image:
		linear-gradient(rgba(89, 91, 255, 0.65), rgba(89, 91, 255, 0.65)),
		url("/wp-content/themes/talktype-2026/assets/images/Home/Use%20cases/Documents%20bg.png");
	background-position: center, 100% 37.6%;
	background-size: 100% 100%, 161.36% 148.92%;
	background-repeat: no-repeat;
}

.tt-home-use-cases-card__media--emails {
	background-image:
		linear-gradient(rgba(89, 91, 255, 0.6), rgba(89, 91, 255, 0.6)),
		url("/wp-content/themes/talktype-2026/assets/images/Home/Use%20cases/Email%20bg.png");
	background-position: center, center bottom;
	background-size: 100% 100%, cover;
	background-repeat: no-repeat;
}

.tt-home-use-cases-card__media--forms,
.tt-home-use-cases-card__media--anything {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	padding: 32px;
	box-sizing: border-box;
	background: #f8f9fc;
}

.tt-home-use-cases-card__media--studying {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	padding: 32px;
	box-sizing: border-box;
	background:
		linear-gradient(135deg, rgba(89, 91, 255, 0.14) 0%, rgba(89, 91, 255, 0.08) 100%);
}

.tt-home-use-cases-card__media-blur {
	position: absolute;
	inset: 0;
	z-index: 0;
	backdrop-filter: blur(96px);
	background: rgba(255, 255, 255, 0.01);
}

.tt-home-use-cases-card__media-burn {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #d9d9d9;
	mix-blend-mode: color-burn;
}

.tt-home-use-cases-card__graphic-label {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tt-home-use-cases-card__graphic-title,
.tt-home-use-cases-card__graphic-copy {
	color: #ff0000;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.tt-home-use-cases-card__media-placeholder {
	position: absolute;
	top: 0;
	left: 50%;
	width: 511px;
	height: 511px;
	transform: translateX(-50%);
	background: rgba(255, 0, 0, 0.5);
	z-index: 3;
}

.tt-home-use-cases-card__studying-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}

.tt-home-use-cases-card__media-placeholder--full {
	top: 0;
	left: 0;
	transform: none;
	width: 511px;
	height: 511px;
}

.tt-home-use-cases-card__media--expense-form {
	display: block;
	padding: 0;
	background: #f7f7ff;
}

.tt-home-use-cases-card__expense-form-image {
	position: absolute;
	left: calc(50% + 24px);
	top: calc(50% + 24px);
	transform: translate(-50%, -50%);
	z-index: 2;
	display: block;
	width: 90.606%;
	max-width: 463px;
	height: auto;
	pointer-events: none;
}

.tt-home-use-cases-card__static-image {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
}

.tt-home-use-cases-card__media--documents .tt-home-use-cases-card__static-image {
	object-position: right bottom;
}

.tt-home-use-cases-card__body {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 20px 16px 8px;
	box-sizing: border-box;
}

.tt-home-use-cases-card__title {
	width: 100%;
	margin: 0;
	color: #1a252f;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.tt-home-use-cases-card__copy {
	width: 100%;
	margin: 0;
	color: #596977;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.tt-home-use-cases__controls {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.tt-home-use-cases__button {
	width: 36px;
	height: 36px;
	border: 1px solid #eaecee;
	border-radius: 8px;
	background: #f8f9fc;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	box-sizing: border-box;
	cursor: pointer;
}

.tt-home-use-cases__button:disabled {
	opacity: 0.45;
	cursor: default;
	border: 0;
}


.tt-home-use-cases__button-icon {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
}

.tt-home-use-cases__button-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-top: 2px solid #1a252f;
	border-right: 2px solid #1a252f;
	transform-origin: center;
}

.tt-home-use-cases__button-icon--left::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

.tt-home-use-cases__button-icon--right::before {
	transform: translate(-65%, -50%) rotate(45deg);
}

/* ==========================================================================
   Use cases - 1440 to 1919 design
   ========================================================================== */

@media (max-width: 1439px) and (min-width: 1200px) {
	.tt-home-use-cases {
		padding: 0 24px;
	}

	.tt-home-use-cases__inner {
		max-width: 1040px;
		gap: 64px;
	}

	.tt-home-use-cases__title {
		max-width: 1040px;
		font-size: 48px;
		line-height: 135%;
		letter-spacing: -0.02em;
	}

	.tt-home-use-cases__viewport {
		max-width: 1040px;
	}

	.tt-home-use-cases-card--large {
		width: 597px;
	}

	.tt-home-use-cases-card--small {
		width: 419px;
	}

	.tt-home-use-cases-card__media {
		height: 419px;
	}

	.tt-home-use-cases-card__media-placeholder,
	.tt-home-use-cases-card__media-placeholder--full {
		width: 419px;
		height: 419px;
	}
}

/* ==========================================================================
   Use cases - 1200 to 1439 design
   ========================================================================== */

@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-use-cases {
		padding: 0 24px;
	}

	.tt-home-use-cases__inner {
		max-width: 850px;
		gap: 48px;
	}

	.tt-home-use-cases__title {
		max-width: 850px;
		font-size: 42px;
		line-height: 135%;
		letter-spacing: -0.02em;
	}

	.tt-home-use-cases__viewport {
		max-width: 850px;
	}

	.tt-home-use-cases-card--large {
		width: 486px;
	}

	.tt-home-use-cases-card--small {
		width: 340px;
	}

	.tt-home-use-cases-card__media {
		height: 340px;
	}

	.tt-home-use-cases-card__media-placeholder,
	.tt-home-use-cases-card__media-placeholder--full {
		width: 340px;
		height: 340px;
	}

	.tt-home-use-cases-card__title,
	.tt-home-use-cases-card__copy {
		font-size: 16px;
		line-height: 150%;
	}
}

/* ==========================================================================
   Use cases - 900 to 1199 design
   ========================================================================== */

@media (max-width: 899px) and (min-width: 600px) {
	.tt-home-use-cases {
		padding: 0 24px;
		margin-top: 96px;
	}

	.tt-home-use-cases__inner {
		max-width: 550px;
		gap: 40px;
	}

	.tt-home-use-cases__title {
		max-width: 550px;
		font-size: 36px;
		line-height: 140%;
		letter-spacing: -0.02em;
	}

	.tt-home-use-cases__viewport {
		max-width: 550px;
		overflow: visible;
	}

	.tt-home-use-cases__track {
		gap: 24px;
	}

	.tt-home-use-cases-card--large {
		width: 550px;
	}

	.tt-home-use-cases-card--small {
		width: 359px;
	}

	.tt-home-use-cases-card__media {
		height: 359px;
		border-radius: 24px;
	}

	.tt-home-use-cases-card__media-placeholder,
	.tt-home-use-cases-card__media-placeholder--full {
		width: 359px;
		height: 359px;
	}

	.tt-home-use-cases-card__body {
		padding: 20px 16px 8px;
	}

	.tt-home-use-cases-card__title,
	.tt-home-use-cases-card__copy {
		font-size: 16px;
		line-height: 150%;
	}
}

/* ==========================================================================
   Use cases - mobile under 900 design
   ========================================================================== */

@media (max-width: 599px) {
	.tt-home-use-cases {
		margin-top: 48px;
		padding: 0 20px;
		overflow-x: hidden;
	}

	.tt-home-use-cases__inner {
		max-width: 100%;
		gap: 40px;
	}

	.tt-home-use-cases__title {
		max-width: 100%;
		font-size: 36px;
		line-height: 140%;
		letter-spacing: -0.02em;
	}

	.tt-home-use-cases__content {
		width: 100%;
		padding: 0 32px;
		box-sizing: border-box;
		gap: 24px;
	}

	.tt-home-use-cases__viewport {
		width: 100%;
		max-width: 100%;
		overflow: visible;
	}

	.tt-home-use-cases__track {
		gap: 16px;
	}

	.tt-home-use-cases-card,
	.tt-home-use-cases-card--small,
	.tt-home-use-cases-card--large {
		width: 299px;
	}

	.tt-home-use-cases-card__media {
		height: 299px;
		border-radius: 24px;
	}

	.tt-home-use-cases-card__media--documents,
	.tt-home-use-cases-card__media--emails {
		padding: 40px;
	}

	.tt-home-use-cases-card__media--forms,
	.tt-home-use-cases-card__media--anything,
	.tt-home-use-cases-card__media--studying {
		padding: 32px;
	}

	.tt-home-use-cases-card__media--expense-form {
		padding: 0;
	}

	.tt-home-use-cases-card__expense-form-image {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.tt-home-use-cases-card__media-placeholder,
	.tt-home-use-cases-card__media-placeholder--full {
		width: 299px;
		height: 299px;
	}

	.tt-home-use-cases-card__body {
		padding: 20px 16px 8px;
	}

	.tt-home-use-cases-card__title,
	.tt-home-use-cases-card__copy {
		font-size: 16px;
		line-height: 150%;
	}

	.tt-home-use-cases__controls {
		justify-content: flex-end;
	}
}

/* ==========================================================================
   User stories section
   ========================================================================== */

.tt-home-user-stories {
	margin-top: 192px;
	padding: 0;
	background: #ffffff;
	overflow: hidden;
}

.tt-home-user-stories__inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}

.tt-home-user-stories__intro {
	width: 100%;
	max-width: 1260px;
	padding: 0 22px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.tt-home-user-stories__pill {
	height: 32px;
	border-radius: 9999px;
	background: #eeefff;
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	box-sizing: border-box;
}

.tt-home-user-stories__pill-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.tt-home-user-stories__pill-label {
	color: #3f41b5;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	white-space: nowrap;
}

.tt-home-user-stories__title {
	width: 100%;
	max-width: 760px;
	margin: 0;
	color: #1a252f;
	text-align: center;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 600;
	line-height: 135%;
	letter-spacing: -0.02em;
}

/*
	Important:
	The carousel is deliberately viewport width, not content width.
	This lets cards spill outside the central content area and clip at the page edge.
*/

.tt-home-user-stories__carousel {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
}

.tt-home-user-stories__track {
	display: flex;
	align-items: center;
	gap: 24px;
	width: max-content;
	padding: 0 max(214px, calc((100vw - 1012px) / 2));
	will-change: transform;
	user-select: none;
	touch-action: pan-y;
}

.tt-home-user-stories-card {
	position: relative;
	width: 862px;
	min-width: 862px;
	border-radius: 24px;
	background: #ffffff;
	border: 1px solid #eaecee;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	padding: 16px;
	gap: 24px;
	color: inherit;
	text-decoration: none;
	-webkit-user-drag: none;
}

.tt-home-user-stories-card:hover {
	border-color: #BFC5CA;
	box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

.tt-home-user-stories-card:hover .tt-home-user-stories-card__arrow svg path {
	fill: #596977;
}

.tt-home-user-stories-card__media {
	position: relative;
	width: 189px;
	height: 189px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
}

.tt-home-user-stories-card__media-bg {
	position: absolute;
	inset: 0;
}

.tt-home-user-stories-card__media-bg--peach {
	background: #ffdeb4;
}

.tt-home-user-stories-card__media-bg--lavender {
	background: #ccccff;
}

.tt-home-user-stories-card__media-bg--pink {
	background: #f5bbd2;
}

.tt-home-user-stories-card__media-bg--photo {
	background: linear-gradient(135deg, #d7deee 0%, #bcc8e2 100%);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.tt-home-user-stories-card__media-burn {
	position: absolute;
	inset: 0;
	background: #d9d9d9;
	mix-blend-mode: color-burn;
}

.tt-home-user-stories-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.tt-home-user-stories-card__content {
	position: relative;
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
}

.tt-home-user-stories-card__quote-wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.tt-home-user-stories-card__quote-icon {
	width: 24px;
	height: 20px;
	position: relative;
	flex-shrink: 0;
}

.tt-home-user-stories-card__quote {
	width: 100%;
	margin: 0;
	color: #1a252f;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 140%;
}

.tt-home-user-stories-card__quote p {
	margin: 0;
}

.tt-home-user-stories-card__quote p + p {
	margin-top: 12px;
}

.tt-home-user-stories-card__person {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tt-home-user-stories-card__name {
	color: #596977;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.tt-home-user-stories-card__role {
	color: #596977;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.tt-home-user-stories-card__arrow {
	position: absolute;
	top: 0;
	right: 0;
	width: 24px;
	height: 24px;
	text-align: end;
}

.tt-home-user-stories__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 240px;
	pointer-events: none;
	z-index: 2;
}

.tt-home-user-stories__fade--left {
	left: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

.tt-home-user-stories__fade--right {
	right: 0;
	background: linear-gradient(270deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

/* ==========================================================================
   User stories - 1440 to 1919 design
   ========================================================================== */

@media (max-width: 1439px) and (min-width: 1200px) {
	.tt-home-user-stories {
		margin-top: 176px;
	}

	.tt-home-user-stories__inner {
		gap: 64px;
	}

	.tt-home-user-stories__intro {
		max-width: 1040px;
		padding: 0 24px;
	}

	.tt-home-user-stories__title {
		max-width: 760px;
		font-size: 48px;
		line-height: 135%;
		letter-spacing: -0.02em;
	}

	.tt-home-user-stories__track {
		padding: 0 max(214px, calc((100vw - 1012px) / 2));
	}

	.tt-home-user-stories-card {
		width: 862px;
		min-width: 862px;
	}

	.tt-home-user-stories-card__quote {
		font-size: 20px;
		line-height: 140%;
	}
}

/* ==========================================================================
   User stories - 1200 to 1439 design
   ========================================================================== */

@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-user-stories {
		margin-top: 160px;
	}

	.tt-home-user-stories__inner {
		gap: 48px;
	}

	.tt-home-user-stories__intro {
		max-width: 850px;
		padding: 0 24px;
	}

	.tt-home-user-stories__title {
		max-width: 760px;
		font-size: 42px;
		line-height: 135%;
		letter-spacing: -0.02em;
	}

	.tt-home-user-stories__track {
		padding: 0 max(175px, calc((100vw - 850px) / 2));
	}

	.tt-home-user-stories-card {
		width: 704px;
		min-width: 704px;
	}

	.tt-home-user-stories-card__quote {
		font-size: 18px;
		line-height: 140%;
	}
}

/* ==========================================================================
   User stories - 900 to 1199 design
   ========================================================================== */

@media (max-width: 899px) and (min-width: 600px) {
	.tt-home-user-stories {
		margin-top: 144px;
	}

	.tt-home-user-stories__inner {
		gap: 40px;
	}

	.tt-home-user-stories__intro {
		max-width: 550px;
		padding: 0 24px;
	}

	.tt-home-user-stories__title {
		max-width: 550px;
		font-size: 36px;
		line-height: 140%;
		letter-spacing: -0.02em;
	}

	.tt-home-user-stories__track {
		align-items: flex-start;
		padding: 0 max(175px, calc((100vw - 550px) / 2));
	}

	.tt-home-user-stories-card {
		width: 550px;
		min-width: 550px;
		display: grid;
		grid-template-columns: 48px 1fr;
		grid-template-areas:
			"quote quote"
			"media person";
		column-gap: 12px;
		row-gap: 16px;
		align-items: center;
		padding: 24px;
	}

	.tt-home-user-stories-card__content {
		display: contents;
	}

	.tt-home-user-stories-card__quote-wrap {
		grid-area: quote;
		padding-right: 40px;
	}

	.tt-home-user-stories-card__media {
		grid-area: media;
		width: 48px;
		height: 48px;
		border-radius: 8px;
	}

	.tt-home-user-stories-card__person {
		grid-area: person;
		min-width: 0;
	}

	.tt-home-user-stories-card__arrow {
		top: 24px;
		right: 24px;
	}

	.tt-home-user-stories-card__quote {
		font-size: 18px;
		line-height: 140%;
	}

	.tt-home-user-stories__fade {
		width: 175px;
	}
}

/* ==========================================================================
   User stories - mobile under 900 design
   ========================================================================== */

@media (max-width: 599px) {
	.tt-home-user-stories {
		margin-top: 112px;
	}

	.tt-home-user-stories__inner {
		gap: 40px;
	}

	.tt-home-user-stories__intro {
		max-width: 100%;
		padding: 0 20px;
	}

	.tt-home-user-stories__title {
		max-width: 100%;
		font-size: 36px;
		line-height: 140%;
		letter-spacing: -0.02em;
	}

	.tt-home-user-stories__track {
		align-items: flex-start;
		padding: 0 max(51.5px, calc((100vw - 299px) / 2));
	}

	.tt-home-user-stories-card {
		width: 299px;
		min-width: 299px;
		display: grid;
		grid-template-columns: 48px 1fr;
		grid-template-areas:
			"quote quote"
			"media person";
		column-gap: 12px;
		row-gap: 16px;
		align-items: center;
		padding: 24px;
	}

	.tt-home-user-stories-card__content {
		display: contents;
	}

	.tt-home-user-stories-card__quote-wrap {
		grid-area: quote;
		padding-right: 36px;
	}

	.tt-home-user-stories-card__media {
		grid-area: media;
		width: 48px;
		height: 48px;
		border-radius: 8px;
	}

	.tt-home-user-stories-card__person {
		grid-area: person;
		min-width: 0;
	}

	.tt-home-user-stories-card__arrow {
		top: 24px;
		right: 24px;
	}

	.tt-home-user-stories-card__quote {
		font-size: 18px;
		line-height: 140%;
	}

	.tt-home-user-stories-card__name,
	.tt-home-user-stories-card__role {
		font-size: 14px;
		line-height: 150%;
	}

	.tt-home-user-stories__fade {
		width: 48px;
	}
}

/* ==========================================================================
   Final CTA + footer
   ========================================================================== */

.tt-home-final-footer {
	position: relative;
	margin-top: 192px;
	overflow: hidden;
	font-family: "Plus Jakarta Sans", sans-serif;
}

.tt-home-final-footer__cta-wrap {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1260px;
	margin: 0 auto -160px;
	padding: 0 22px;
	box-sizing: border-box;
}

.tt-home-final-footer__cta {
	position: relative;
	min-height: 320px;
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 60px;
	box-sizing: border-box;
	isolation: isolate;
	background-image: url("/wp-content/themes/talktype-2026/assets/images/Footer%20bgs/cta_block_bg_comp.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
}

.tt-home-final-footer__cta-blur {
	position: absolute;
	inset: 0;
	z-index: 0;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	background: rgba(255, 255, 255, 0.01);
}

.tt-home-final-footer__cta-burn {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #d9d9d9;
	mix-blend-mode: color-burn;
	pointer-events: none;
}

.tt-home-final-footer__cta-blur, .tt-home-final-footer__cta-burn {
	border-radius: 24px;
}

.tt-home-final-footer__cta-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.tt-home-final-footer__cta-copy {
	width: 100%;
	max-width: 702px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.tt-home-final-footer__cta-title {
	width: 100%;
	margin: 0;
	color: #25266b;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 600;
	line-height: 140%;
	letter-spacing: -0.02em;
}

.tt-home-final-footer__cta-text {
	width: 100%;
	max-width: 608px;
	margin: 0;
	color: #25266b;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.tt-home-final-footer__cta-text p {
	margin: 0;
}

.tt-home-final-footer__cta-text p + p {
	margin-top: 10px;
}

.tt-home-final-footer__cta-actions {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.tt-home-final-footer__cta-button {
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border-radius: 8px;
	box-sizing: border-box;
	text-decoration: none;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.tt-home-final-footer__cta-button--primary {
	background: #5153e8;
	color: #f7f7ff;
}

.tt-home-final-footer__cta-button--primary:hover,
.tt-home-final-footer__cta-button--primary:focus {
	background: #4446da;
	color: #f7f7ff;
}

.tt-home-final-footer__cta-button--secondary {
	background: #eeefff;
	border: 1px solid #ccccff;
	color: #3f41b5;
}

.tt-home-final-footer__cta-button--secondary:hover,
.tt-home-final-footer__cta-button--secondary:focus {
	background: #e7e8ff;
	color: #3f41b5;
}

.tt-home-final-footer__main {
	position: relative;
	z-index: 1;
	width: 100%;
	background: #ffffff;
	padding-top: 232px;
}

.tt-home-final-footer__main::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 48px 48px 0 0;
	background: #25266b;
	z-index: 0;
}

.tt-home-final-footer__nav-wrap {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 22px 48px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}

.tt-home-final-footer__nav {
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.tt-home-final-footer__menu {
	flex: 1 1 0;
	min-width: 92px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.tt-home-final-footer__menu-title {
	width: 100%;
	margin: 0;
	color: #ccccff;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.tt-home-final-footer__menu-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.tt-home-final-footer__menu-link {
	color: #f7f7ff;
	text-decoration: none;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.tt-home-final-footer__menu-link:hover,
.tt-home-final-footer__menu-link:focus,
.tt-home-final-footer__menu-link--active {
	text-decoration: underline;
}

.tt-footer-simple__brand {
	display: block;
	width: 100%;
	max-width: 1260px;
	height: auto;
	object-fit: contain;
	user-select: none;
}

.tt-home-final-footer__divider {
	width: 100%;
	height: 1px;
	background: rgba(204, 204, 255, 0.18);
}

.tt-home-final-footer__legal-row {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.tt-home-final-footer__legal-links {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 8px 16px;
}

.tt-home-final-footer__legal-text,
.tt-home-final-footer__legal-link {
	color: #ccccff;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.tt-home-final-footer__legal-link {
	text-decoration: underline;
}

.tt-home-final-footer__bottom {
	position: relative;
	z-index: 2;
	background: #050203;
	padding-top: 48px;
}

.tt-home-final-footer__bottom-inner {
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
	min-height: 84px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 22px;
	box-sizing: border-box;
	gap: 20px;
}

.tt-home-final-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.tt-home-final-footer__brand-title {
	color: #ffffff;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
}

.tt-home-final-footer__brand-text {
	color: #ffffff;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.tt-home-final-footer__brand-text .tt-footer-simple__heart {
	color: #ff2d2d;
	font-weight: 700;
}

.tt-home-final-footer__brand-link {
	color: #ffffff;
	text-decoration: underline;
}

.tt-home-final-footer__socials {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.tt-home-final-footer__social {
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	display: block;
	flex-shrink: 0;
}

/* ==========================================================================
   Final CTA + footer - 1440 to 1919 design
   ========================================================================== */

@media (max-width: 1439px) and (min-width: 1200px) {
	.tt-home-final-footer {
		margin-top: 176px;
	}

	.tt-home-final-footer__cta-wrap {
		max-width: 1040px;
		padding: 0;
		margin-bottom: -160px;
	}

	.tt-home-final-footer__cta {
		min-height: 320px;
		padding: 60px;
	}

	.tt-home-final-footer__main {
		padding-top: 232px;
	}

	.tt-home-final-footer__nav-wrap {
		max-width: 1040px;
		padding: 0 0 48px;
	}

	.tt-home-final-footer__bottom-inner {
		max-width: 1040px;
		padding: 24px 0;
	}

	.tt-footer-simple__brand {
		max-width: 1040px;
	}
}

/* ==========================================================================
   Final CTA + footer - 1200 to 1439 design
   ========================================================================== */

@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-final-footer {
		margin-top: 160px;
	}

	.tt-home-final-footer__cta-wrap {
		max-width: 850px;
		padding: 0;
		margin-bottom: -125px;
	}

	.tt-home-final-footer__cta {
		min-height: 250px;
		padding: 40px;
		gap: 20px;
	}

	.tt-home-final-footer__cta-copy {
		max-width: 702px;
		gap: 12px;
	}

	.tt-home-final-footer__cta-title {
		font-size: 24px;
		line-height: 140%;
		letter-spacing: 0;
	}

	.tt-home-final-footer__cta-text {
		max-width: 608px;
		font-size: 20px;
		line-height: 150%;
	}

	.tt-home-final-footer__main {
		padding-top: 175px;
	}

	.tt-home-final-footer__nav-wrap {
		max-width: 850px;
		padding: 0 0 48px;
		gap: 64px;
	}

	.tt-home-final-footer__nav {
		gap: 24px;
	}

	.tt-home-final-footer__legal-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.tt-home-final-footer__bottom-inner {
		max-width: 850px;
		padding: 24px 0;
	}

	.tt-footer-simple__brand {
		max-width: 850px;
	}
}

/* ==========================================================================
   Final CTA + footer - 900 to 1199 design
   ========================================================================== */

@media (max-width: 899px) and (min-width: 600px) {
	.tt-home-final-footer {
		margin-top: 144px;
	}

	.tt-home-final-footer__cta-wrap {
		max-width: 550px;
		padding: 0;
		margin-bottom: -102px;
	}

	.tt-home-final-footer__cta {
		min-height: 204px;
		padding: 32px;
		gap: 16px;
	}

	.tt-home-final-footer__cta-content {
		gap: 16px;
	}

	.tt-home-final-footer__cta-copy {
		gap: 8px;
	}

	.tt-home-final-footer__cta-title {
		font-size: 20px;
		line-height: 150%;
		letter-spacing: 0;
	}

	.tt-home-final-footer__cta-text {
		font-size: 16px;
		line-height: 150%;
	}

	.tt-home-final-footer__cta-text p + p {
		margin-top: 8px;
	}

	.tt-home-final-footer__cta-actions {
		gap: 12px;
	}

	.tt-home-final-footer__cta-button {
		height: 40px;
		padding: 0 12px;
		font-size: 14px;
	}

	.tt-home-final-footer__main {
		padding-top: 167px;
	}

	.tt-home-final-footer__nav-wrap {
		max-width: 550px;
		padding: 0 0 48px;
		gap: 64px;
	}

	.tt-home-final-footer__nav {
		flex-wrap: wrap;
		align-content: flex-start;
		gap: 40px 24px;
	}

	.tt-home-final-footer__menu {
		flex: 0 0 calc((100% - 24px) / 2);
		width: calc((100% - 24px) / 2);
	}

	.tt-home-final-footer__legal-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.tt-home-final-footer__bottom-inner {
		max-width: 550px;
		padding: 24px 0;
	}

	.tt-footer-simple__brand {
		max-width: 550px;
	}
}

/* ==========================================================================
   Final CTA + footer - mobile under 900 design
   ========================================================================== */

@media (max-width: 599px) {
	.tt-home-final-footer {
		margin-top: 112px;
	}

	.tt-home-final-footer__cta-wrap {
		max-width: 100%;
		padding: 0 20px;
		margin-bottom: -86px;
	}

	.tt-home-final-footer__cta {
		min-height: 0;
		padding: 24px;
		border-radius: 24px;
		gap: 16px;
	}

	.tt-home-final-footer__cta-content {
		width: 100%;
		gap: 16px;
	}

	.tt-home-final-footer__cta-copy {
		width: 100%;
		gap: 8px;
	}

	.tt-home-final-footer__cta-title {
		font-size: 20px;
		line-height: 150%;
		letter-spacing: 0;
	}

	.tt-home-final-footer__cta-text {
		font-size: 16px;
		line-height: 150%;
	}

	.tt-home-final-footer__cta-text p {
		display: inline;
		margin: 0;
	}

	.tt-home-final-footer__cta-text p + p {
		margin-top: 0;
	}

	.tt-home-final-footer__cta-actions {
		width: 100%;
		display: flex;
		align-items: flex-start;
		gap: 12px;
	}

	.tt-home-final-footer__cta-button {
		height: 40px;
		padding: 0 12px;
		font-size: 14px;
		white-space: nowrap;
	}

	.tt-home-final-footer__main {
		padding-top: 154px;
	}

	.tt-home-final-footer__main::before {
		border-radius: 0;
	}

	.tt-home-final-footer__nav-wrap {
		max-width: 100%;
		padding: 0 20px 48px;
		gap: 48px;
	}

	.tt-home-final-footer__nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	.tt-home-final-footer__menu {
		width: 100%;
		flex: none;
	}

	.tt-footer-simple__brand {
		max-width: 100%;
	}

	.tt-home-final-footer__divider {
		width: 100%;
	}

	.tt-home-final-footer__legal-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.tt-home-final-footer__legal-links {
		width: 100%;
		gap: 8px 16px;
	}

	.tt-home-final-footer__legal-text {
		width: 100%;
	}

	.tt-home-final-footer__bottom {
		padding-top: 0;
	}

	.tt-home-final-footer__bottom-inner {
		max-width: 100%;
		min-height: 132px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 24px 20px;
		gap: 16px;
		text-align: center;
	}

	.tt-home-final-footer__brand {
		align-items: center;
		text-align: center;
	}

	.tt-home-final-footer__socials {
		justify-content: center;
	}
}

/* ==========================================================================
   Final CTA + footer - narrow mobile safety
   ========================================================================== */

@media (max-width: 420px) {
	.tt-home-final-footer__cta-wrap {
		max-width: none;
	}

	.tt-home-final-footer__cta-actions {
		flex-wrap: wrap;
	}

	.tt-home-final-footer__cta-button {
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   Hero breakpoint adjustments
   ========================================================================== */

/* ==========================================================================
   Hero - 1440 to 1919 design
   ========================================================================== */

@media (max-width: 1439px) and (min-width: 1200px) {
	.tt-home-hero {
		--hero-animation-distance: 0.26;
		--hero-settled-width: 1040px;
		--hero-settled-height: 560px;
	}

	.tt-home-hero__inner {
		max-width: 1440px;
		padding: 72px 24px 0;
	}

}


@media (max-width: 1439px) and (min-width: 1200px) {
	.tt-home-hero__inner {
		max-width: 1440px;
		padding: 72px 24px 0;
	}

	.tt-home-hero__text {
		max-width: 1040px;
		gap: 32px;
	}

	.tt-home-hero__title {
		margin: 0;
		font-size: 60px;
		font-weight: 700;
		line-height: 125%;
		letter-spacing: -0.01em;
	}

	.tt-home-hero__copy {
		max-width: 502px;
		margin: 0 auto;
		font-size: 24px;
		font-weight: 500;
		line-height: 140%;
		letter-spacing: 0;
	}

	.tt-home-hero__actions {
		width: 100%;
		max-width: 400px;
		gap: 16px;
		margin: 0 auto;
	}

	.tt-home-hero__actions .tt-btn {
		height: 48px;
		padding: 0 16px;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		line-height: 150%;
		letter-spacing: 0;
	}

	.tt-home-hero__visual-wrap {
		width: min(100vw, 1440px);
		margin: 120px auto 0;
		left: 50%;
		transform: translateX(-50%);
		transform-origin: center top;
	}

	.tt-home-hero__visual-placeholder {
		width: var(--hero-visual-width);
		max-width: none;
		margin: 0 auto;
		border-radius: calc(24px * var(--hero-settle-progress));
	}
}

/* ==========================================================================
   Hero - 1200 to 1439 design
   ========================================================================== */

@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-hero {
		--hero-animation-distance: 0.24;
		--hero-settled-width: 850px;
		--hero-settled-height: 458px;
	}

	.tt-home-hero__inner {
		max-width: 1200px;
		padding: 72px 24px 0;
	}

}

@media (max-width: 1199px) and (min-width: 900px) {
	.tt-home-hero__inner {
		max-width: 1200px;
		padding: 72px 24px 0;
	}

	.tt-home-hero__text {
		max-width: 850px;
		gap: 24px;
	}

	.tt-home-hero__title {
		margin: 0;
		font-size: 48px;
		font-weight: 700;
		line-height: 125%;
		letter-spacing: -0.01em;
	}

	.tt-home-hero__copy {
		max-width: 502px;
		margin: 0 auto;
		font-size: 20px;
		font-weight: 500;
		line-height: 140%;
		letter-spacing: 0;
	}

	.tt-home-hero__actions {
		width: 100%;
		max-width: 400px;
		gap: 16px;
		margin: 0 auto;
	}

	.tt-home-hero__actions .tt-btn {
		height: 48px;
		padding: 0 16px;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		line-height: 150%;
		letter-spacing: 0;
	}

	.tt-home-hero__visual-wrap {
		width: min(100vw, 1200px);
		margin: 104px auto 0;
		left: 50%;
		transform: translateX(-50%);
		transform-origin: center top;
	}

	.tt-home-hero__visual-placeholder {
		width: var(--hero-visual-width);
		max-width: none;
		margin: 0 auto;
		border-radius: calc(24px * var(--hero-settle-progress));
		box-shadow: 0 10px 30px rgba(24, 35, 47, 0.08);
	}
}

/* ==========================================================================
   Hero - 900 to 1199 design
   ========================================================================== */

@media (max-width: 899px) and (min-width: 600px) {
	.tt-home-hero {
		min-height: auto;
		overflow: visible;
	}

	.tt-home-hero__sticky {
		position: relative;
		top: auto;
		height: auto;
		overflow: visible;
	}

	.tt-home-hero__inner {
		max-width: 900px;
		padding: 72px 24px 0;
	}
}


@media (max-width: 899px) and (min-width: 600px) {
	.tt-home-hero__inner {
		max-width: 900px;
		padding: 72px 24px 0;
	}

	.tt-home-hero__text {
		max-width: 550px;
		gap: 20px;
	}

	.tt-home-hero__title {
		margin: 0;
		font-size: 42px;
		font-weight: 700;
		line-height: 125%;
		letter-spacing: -0.01em;
	}

	.tt-home-hero__copy {
		max-width: 502px;
		margin: 0 auto;
		font-size: 18px;
		font-weight: 500;
		line-height: 150%;
		letter-spacing: 0;
		opacity: 1;
	}

	.tt-home-hero__actions {
		width: 100%;
		max-width: 400px;
		gap: 16px;
		margin: 4px auto 0;
	}

	.tt-home-hero__actions .tt-btn {
		height: 48px;
		padding: 0 16px;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		line-height: 150%;
		letter-spacing: 0;
	}

	.tt-home-hero__visual-wrap {
		width: 100%;
		max-width: 900px;
		margin: 131px auto 0;
		left: 50%;
		transform: translateX(-50%);
		transform-origin: center top;
	}

	.tt-home-hero__visual-placeholder {
		width: 100%;
		max-width: 900px;
		height: 380px;
		margin: 0 auto;
		border-radius: 24px;
		box-shadow: 0 10px 30px rgba(24, 35, 47, 0.08);
	}
}

/* ==========================================================================
   Hero - mobile under 900 design
   ========================================================================== */

@media (max-width: 599px) {
	.tt-home-hero {
		min-height: auto;
		overflow: visible;
	}

	.tt-home-hero__sticky {
		position: relative;
		top: auto;
		height: auto;
	}

	.tt-home-hero__inner {
		max-width: 100%;
		padding: 56px 0 0;
		box-sizing: border-box;
	}

	.tt-home-hero__text {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 20px;
		box-sizing: border-box;
		gap: 20px;
		align-items: center;
		text-align: center;
	}

	.tt-home-hero__title {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		font-size: 36px;
		font-weight: 700;
		line-height: 125%;
		letter-spacing: -0.01em;
		text-align: center;
	}

	.tt-home-hero__copy {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		font-size: 18px;
		font-weight: 500;
		line-height: 150%;
		letter-spacing: 0;
		text-align: center;
		opacity: 1;
	}

	.tt-home-hero__actions {
		width: 100%;
		max-width: 236px;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin: 4px auto 0;
	}

	.tt-home-hero__actions .tt-btn {
		width: 100%;
		height: 48px;
		padding: 0 16px;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		line-height: 150%;
		letter-spacing: 0;
		flex: none;
	}

	.tt-home-hero__visual-wrap {
		width: 100%;
		max-width: none;
		margin: 72px 0 0;
		left: auto;
		transform: none;
		transform-origin: center top;
	}

	.tt-home-hero__visual-placeholder {
		width: 100%;
		max-width: none;
		height: 254px;
		margin: 0;
		border-radius: 24px 24px 0 0;
		box-shadow: 0 10px 30px rgba(24, 35, 47, 0.08);
	}

	.tt-home-hero::after {
		display: none;
	}
}

/* ==========================================================================
   Hero mobile button centring fix
   ========================================================================== */

@media (max-width: 599px) {
	.tt-home-hero__actions {
		width: 100%;
		max-width: 236px;
		margin-left: auto;
		margin-right: auto;
		align-items: stretch;
		justify-content: center;
		text-align: center;
	}

	.tt-home-hero__actions .tt-btn {
		width: 100%;
		max-width: 236px;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
		text-align: center;
	}
}

/* ==========================================================================
   Workplace page: stacking cards (Do these challenges sound familiar?)
   ========================================================================== */

.tt-workplace .tt-home-features__inner {
    max-width: 832px;
}

/* Card 1: full-bleed photo bg, white text */
.tt-workplace .tt-home-feature-card--dictate {
    background-image: url("/wp-content/themes/talktype-2026/assets/images/Audience%20-%20Workplace/Do%20these%20challenges%20sound%20familiar/Emails%20and%20reports%20pile%20up%20because%20starting%20them%20is%20genuinely%20hard%20%281%29.png");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.tt-workplace .tt-home-feature-card--dictate::before {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 40%,
        rgba(0, 0, 0, 0) 70%
    );
}

.tt-workplace .tt-home-feature-card--dictate .tt-home-feature-card__heading,
.tt-workplace .tt-home-feature-card--dictate .tt-home-feature-card__text {
    color: #ffffff;
}

/* Card 2: #f7f7ff bg, dark text, Word UI screenshot at bottom */
.tt-workplace .tt-home-feature-card--writing-space {
    background: #f7f7ff;
    background-image: none;
}

.tt-workplace .tt-home-feature-card--writing-space::before {
    background: #f7f7ff;
    backdrop-filter: none;
}

.tt-workplace .tt-home-feature-card--writing-space::after {
    content: none;
}

.tt-workplace .tt-home-feature-card--writing-space .tt-home-feature-card__heading {
    color: #1a252f;
}

.tt-workplace .tt-home-feature-card--writing-space .tt-home-feature-card__text {
    color: #596977;
}

.tt-workplace .tt-home-feature-card__media--writing-space {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 377px;
    transform: none;
    overflow: hidden;
}

.tt-workplace .tt-home-feature-card__media--writing-space img {
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: initial;
    object-position: initial;
}

/* Card 3: #f7f7ff bg, dark text, meeting notes image at bottom */
.tt-workplace .tt-home-feature-card--capture {
    background: #f7f7ff;
    background-image: none;
    background-color: #f7f7ff;
}

.tt-workplace .tt-home-feature-card--capture::before {
    background: #f7f7ff;
    background-image: none;
    background-color: #f7f7ff;
    backdrop-filter: none;
}

.tt-workplace .tt-home-feature-card--capture::after {
    content: none;
}

.tt-workplace .tt-home-feature-card--capture .tt-home-feature-card__heading,
.tt-workplace .tt-home-feature-card--capture .tt-home-feature-card__text {
    color: #1a252f;
}

.tt-workplace .tt-home-feature-card--capture .tt-home-feature-card__text {
    color: #596977;
}

.tt-workplace .tt-home-feature-card__media--capture {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 377px;
    z-index: 2;
    overflow: hidden;
}

.tt-workplace .tt-home-feature-card__media--capture img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: initial;
}

/* Card 4: bg photo + blur/burn + dark blue text + widget image at right */
.tt-workplace .tt-home-feature-card--accessibility {
    background-image: url("/wp-content/themes/talktype-2026/assets/images/Audience%20-%20Workplace/Do%20these%20challenges%20sound%20familiar/The%20gap%20affects%20how%20you_re%20seen%20at%20work%20bg1%20%281%29.png");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.tt-workplace .tt-home-feature-card--accessibility::before {
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(96px);
}

.tt-workplace .tt-home-feature-card--accessibility::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #d9d9d9;
    mix-blend-mode: color-burn;
    pointer-events: none;
}

.tt-workplace .tt-home-feature-card--accessibility .tt-home-feature-card__heading,
.tt-workplace .tt-home-feature-card--accessibility .tt-home-feature-card__text {
    color: #25266b;
}

.tt-workplace .tt-home-feature-card--accessibility .tt-home-feature-card__copy {
    max-width: 685px;
}

.tt-workplace .tt-home-feature-card__media--accessibility {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 377px;
    overflow: hidden;
    z-index: 2;
}

.tt-workplace .tt-home-feature-card__media--accessibility img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: initial;
}

@media (min-width: 900px) {
    .tt-workplace .tt-home-features {
        --feature-card-height: 557px;
    }

    .tt-workplace .tt-home-feature-card--dictate {
        height: 530px;
    }
}

@media (max-width: 899px) {
    .tt-workplace .tt-home-feature-card__media--writing-space,
    .tt-workplace .tt-home-feature-card__media--capture,
    .tt-workplace .tt-home-feature-card__media--accessibility {
        height: auto;
        aspect-ratio: 832 / 377;
    }

    .tt-workplace .tt-home-feature-card__media--writing-space img {
        width: 100%;
        height: auto;
    }
}

/* ==========================================================================
   Workplace page: "Here's what changes" static cards
   ========================================================================== */

.tt-workplace .tt-global__static-cards--workplace-typing .tt-global__static-cards-card-img {
    background-color: #f7f7ff;
}

.tt-workplace .tt-global__static-cards--workplace-typing .tt-global__static-cards-card-img img {
    object-fit: contain;
    object-position: center;
}

/* ==========================================================================
   Workplace page: card explorer "Designed with professionals in mind"
   ========================================================================== */

.tt-card-explorer--audience-workplace {
    --tt-workplace-card-width: 1260px;
    --tt-workplace-viewport-width: 100vw;
    --tt-workplace-end-space: max(0px, calc(var(--tt-workplace-viewport-width) - var(--tt-workplace-card-width)));
    overflow: visible;
}

.tt-card-explorer--audience-workplace .tt-card-explorer__content {
    overflow: visible;
}

.tt-card-explorer--audience-workplace .tt-card-explorer__viewport {
    width: var(--tt-workplace-viewport-width);
    max-width: none;
    overflow: hidden;
    position: relative;
    cursor: grab;
    touch-action: pan-y;
    margin-left: min(0px, calc((1260px - 100vw) / 2));
}

.tt-card-explorer.tt-card-explorer--audience-workplace .tt-card-explorer__track {
    padding-left: max(0px, calc((100vw - var(--tt-workplace-card-width)) / 2));
    box-sizing: border-box;
}

.tt-card-explorer--audience-workplace .tt-card-explorer__viewport.is-dragging,
.tt-card-explorer--audience-workplace .js-card-explorer-viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.tt-card-explorer--audience-workplace .tt-card-explorer__track {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.tt-card-explorer--audience-workplace .tt-card-explorer__track::after {
    content: "";
    display: block;
    flex: 0 0 var(--tt-workplace-end-space);
    width: var(--tt-workplace-end-space);
    height: 1px;
    pointer-events: none;
}

.tt-card-explorer--audience-workplace .tt-card-explorer-card--large {
    position: relative;
    display: block;
    width: var(--tt-workplace-card-width);
    height: 680px;
    min-height: 0;
    padding: 40px;
    border-radius: 24px;
    overflow: hidden;
    flex: 0 0 auto;
    box-sizing: border-box;
    background: #f7f7ff;
}

.tt-card-explorer--audience-workplace .tt-card-explorer-card__body {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 578px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.tt-card-explorer--audience-workplace .tt-card-explorer-card__title,
.tt-card-explorer--audience-workplace .tt-card-explorer-card__copy {
    margin: 0;
}

/* Media: absolutely positioned at bottom, behind body text */
.tt-card-explorer--audience-workplace .tt-card-explorer-card__media {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 70%;
    min-width: 0;
    overflow: hidden;
    border-radius: 0;
}

.tt-card-explorer--audience-workplace .tt-card-explorer-card__media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    border-radius: 0;
    object-fit: contain;
    object-position: center bottom;
}

/* AI tools card: background image */
.tt-card-explorer--audience-workplace .tt-card-explorer-card--ai-tools {
    background-color: #f7f7ff;
    background-image: url("/wp-content/themes/talktype-2026/assets/images/Audience%20-%20Workplace/Designed%20with%20professionals%20in%20mind/AI%20writing%20tools%20bg%201%203%20%281%29.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tt-card-explorer--audience-workplace .tt-card-explorer-card--ai-tools .tt-card-explorer-card__title,
.tt-card-explorer--audience-workplace .tt-card-explorer-card--ai-tools .tt-card-explorer-card__copy {
    color: #ffffff;
}

/* Dedicated space card: full-bleed photo, dark bg, white text */
.tt-card-explorer--audience-workplace .tt-card-explorer-card--dedicated-space {
    background-color: #1a252f;
    background-image:
        linear-gradient(148.13deg, rgba(0, 0, 0, 0.75) 12.58%, rgba(0, 0, 0, 0.45) 34.27%, rgba(0, 0, 0, 0.15) 49.64%, rgba(0, 0, 0, 0) 72.19%),
        url("/wp-content/themes/talktype-2026/assets/images/Audience%20-%20Workplace/Designed%20with%20professionals%20in%20mind/iStock-2215311206%20%282%29%202%20%281%29.jpg");
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, center bottom;
}

.tt-card-explorer--audience-workplace .tt-card-explorer-card--dedicated-space .tt-card-explorer-card__body {
    position: relative;
    z-index: 1;
}

.tt-card-explorer--audience-workplace .tt-card-explorer-card--dedicated-space .tt-card-explorer-card__title,
.tt-card-explorer--audience-workplace .tt-card-explorer-card--dedicated-space .tt-card-explorer-card__copy {
    color: #ffffff;
}

/* Filter buttons */
.tt-card-explorer--audience-workplace .tt-card-explorer__filter {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: visible;
}

.tt-card-explorer--audience-workplace .tt-card-explorer__filter ul {
    width: auto;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.tt-card-explorer--audience-workplace .tt-card-explorer__filter ul li {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    margin: 0;
    border-radius: 8px;
    border: 1px solid #eaecee;
    background: #ffffff;
    box-sizing: border-box;
    color: #596977;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tt-card-explorer--audience-workplace .tt-card-explorer__filter ul li:not(:last-child) {
    margin-right: 0;
}

.tt-card-explorer--audience-workplace .tt-card-explorer__filter ul li.is-active,
.tt-card-explorer--audience-workplace .tt-card-explorer__filter ul li:hover {
    border-color: #5153e8;
    background: #5153e8;
    color: #f7f7ff;
}

.tt-card-explorer--audience-workplace .tt-card-explorer__filter ul li i {
    display: none;
}

.tt-card-explorer--audience-workplace .tt-card-explorer__filter ul li a,
.tt-card-explorer--audience-workplace .tt-card-explorer__filter ul li a:hover,
.tt-card-explorer--audience-workplace .tt-card-explorer__filter ul li.is-active a {
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: var(--typography-font-family, "Plus Jakarta Sans");
    font-size: 14px;
    font-weight: 600;
    line-height: 150%;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Responsive: 1440px to 1919px */
@media (max-width: 1439px) and (min-width: 1200px) {
    .tt-card-explorer--audience-workplace {
        --tt-workplace-card-width: 1040px;
        --tt-workplace-viewport-width: 100vw;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer__viewport {
        margin-left: calc((1040px - 100vw) / 2);
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer-card--large {
        height: 630px;
    }
}

/* Responsive: 900px to 1199px */
@media (max-width: 1199px) and (min-width: 900px) {
    .tt-card-explorer--audience-workplace {
        --tt-workplace-card-width: 850px;
        --tt-workplace-viewport-width: 100vw;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer__viewport {
        margin-left: calc((850px - 100vw) / 2);
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer-card--large {
        height: 580px;
    }
}

/* Responsive: 600px to 899px */
@media (max-width: 899px) and (min-width: 600px) {
    .tt-card-explorer--audience-workplace {
        --tt-workplace-card-width: 550px;
        --tt-workplace-viewport-width: 100vw;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer__viewport {
        margin-left: calc((550px - 100vw) / 2);
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer-card--large {
        height: 480px;
        padding: 40px;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer-card--dedicated-space {
        background-position: left top;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer__filter ul {
        width: 100%;
        max-width: 476px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Responsive: mobile below 600px */
@media (max-width: 599px) {
    .tt-card-explorer--audience-workplace {
        --tt-workplace-card-width: min(362px, calc(100vw - 40px));
        --tt-workplace-viewport-width: 100vw;
        --tt-workplace-end-space: 0px;
        padding-left: 20px;
        padding-right: 20px;
        overflow: hidden;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer__filter {
        overflow: visible;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer__filter ul {
        width: 100%;
        max-width: 362px;
        margin-left: auto;
        margin-right: auto;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer__viewport {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        overflow: hidden;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer__track {
        gap: 24px;
        padding-inline: 20px;
        box-sizing: border-box;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer__track::after {
        display: none;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer-card--large {
        height: 480px;
        padding: 32px;
        border-radius: 24px;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer-card__body {
        max-width: 100%;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer-card__title,
    .tt-card-explorer--audience-workplace .tt-card-explorer-card__copy {
        font-size: 18px;
        line-height: 150%;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer-card--dedicated-space {
        background-position: left top;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer__filter ul li {
        padding: 0 6px;
    }
    .tt-card-explorer--audience-workplace .tt-card-explorer__filter ul li a {
        padding: 0;
    }
}

/* ==========================================================================
   Workplace page: key benefits "How professionals use TalkType"
   ========================================================================== */

.tt-workplace .tt-home-key-benefits-card__media--workplace-emails,
.tt-workplace .tt-home-key-benefits-card__media--workplace-capture {
    background: #f8f9fc;
}

.tt-workplace .tt-home-key-benefits-card__media--workplace-emails .tt-home-key-benefits-card__media-image,
.tt-workplace .tt-home-key-benefits-card__media--workplace-capture .tt-home-key-benefits-card__media-image {
    object-fit: cover;
    object-position: center;
}

.tt-workplace .tt-home-key-benefits-card__media--workplace-reports {
    position: relative;
    background: #f7f7ff;
    overflow: hidden;
}

.tt-workplace .tt-home-key-benefits-card__media-image--workplace-reports {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Handling admin card: bg image + foreground positioned at bottom */
.tt-workplace .tt-home-key-benefits-card__media--workplace-admin {
    position: relative;
    background-color: #f7f7ff;
    background-image: url("/wp-content/themes/talktype-2026/assets/images/Audience%20-%20Workplace/How%20propfessionals%20use%20TT/Handling%20admin%20and%20forms%20-%20bg1%20%281%29.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.tt-workplace .tt-home-key-benefits-card__media-image--workplace-admin {
    position: absolute;
    left: 0;
    top: 0;
    width: 103.5225%;
    height: auto;
    max-width: none;
    display: block;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   Workplace page: secure and private static cards
   ========================================================================== */

.tt-workplace .tt-global__static-cards--workplace-secure .tt-global__static-cards-card-img {
    background-color: #f7f7ff;
}

.tt-workplace .tt-global__static-cards--workplace-secure .tt-global__static-cards-card-img img {
    object-fit: contain;
    object-position: center;
}

/* Nothing shared card: bg image + fg img on top */
.tt-workplace .tt-global__static-cards--workplace-secure .tt-global__static-cards-card-img--permission {
    position: relative;
    isolation: isolate;
    background-color: #eeefff;
    background-image: url("/wp-content/themes/talktype-2026/assets/images/Audience%20-%20Workplace/Secure%20and%20private/Nothing%20shared%20without%20your%20permission%20-%20bg%20%281%29%20%281%29.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tt-workplace .tt-global__static-cards--workplace-secure .tt-global__static-cards-card-img--permission img {
    position: relative;
    z-index: 1;
    object-fit: contain;
    object-position: center;
}