/* ---------------------------------------------------------------------------
 * Teach for Poland case study — from Paper artboard
 * "Blinq — Case Study · Teach for Poland (Navy)"
 * Fonts: Society (self-hosted) + Geist / Geist Mono (Google, via layout)
 * ------------------------------------------------------------------------- */

/* Society — display serif (licensed: Allcaps). The case_study layout doesn't
 * load application.css, so the faces used on this page are declared here. */
@font-face {
	font-family: "Society";
	src: url(/assets/Society-Regular.otf) format( "opentype" );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Society";
	src: url(/assets/Society-Book.otf) format( "opentype" );
	font-weight: 450;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Society";
	src: url(/assets/Society-BookItalic.otf) format( "opentype" );
	font-weight: 450;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Society";
	src: url(/assets/Society-Medium.otf) format( "opentype" );
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

.tfp-cs {
	--tfp-bg: #0a1525;
	--tfp-band: #0b1828;
	--tfp-band-deep: #0c1b2e;
	--tfp-wash: #0b1728;
	--tfp-wash-deep: #091425;
	--tfp-line: #16263f;
	--tfp-arrow: #35506f;
	--tfp-ink: #f2efe6;
	--tfp-ink-soft: #eaf1f8;
	--tfp-body: #b6c4d6;
	--tfp-muted: #8fa3bd;
	--tfp-slate: #5a6e89;
	--tfp-teal: #2bb3b3;
	--tfp-teal-deep: #1f8a8a;
	--tfp-red: #ee5a52;
	--tfp-amber: #f4a261;
	--tfp-cream: #f6f3ec;
	--tfp-cream-line: #e7e1d5;
	--tfp-cream-line-soft: #eae4d8;
	--tfp-cream-hairline: #e3dcce;
	--tfp-cream-track: #e7e0d2;
	--tfp-cream-muted: #8a8578;
	--tfp-cream-ink: #14181c;
	--tfp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--tfp-font-sans: "Geist", system-ui, sans-serif;
	--tfp-font-mono: "Geist Mono", ui-monospace, monospace;
	--tfp-font-serif: "Society", Georgia, serif;
	--tfp-gutter: clamp(20px, 4.44vw, 64px);
	--tfp-max: 1312px;
	/* Gutter that also centers the 1312px column on very wide screens. */
	--tfp-pad: max(var(--tfp-gutter), calc((100vw - var(--tfp-max)) / 2));

	background: var(--tfp-bg);
	color: var(--tfp-ink);
	font-family: var(--tfp-font-sans);
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

.tfp-cs *,
.tfp-cs *::before,
.tfp-cs *::after {
	box-sizing: border-box;
}

.tfp-cs h1,
.tfp-cs h2,
.tfp-cs h3,
.tfp-cs p,
.tfp-cs blockquote,
.tfp-cs ul {
	margin: 0;
	padding: 0;
}

.tfp-cs ul {
	list-style: none;
}

.tfp-cs a {
	color: inherit;
	text-decoration: none;
}

.tfp-cs :focus-visible {
	outline: 2px solid var(--tfp-teal);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- Shared atoms --------------------------------------------------------- */

.tfp-cs__square {
	display: inline-block;
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	background: var(--tfp-teal);
}

.tfp-cs__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-teal);
}

.tfp-cs__eyebrow--red {
	color: var(--tfp-red);
}

.tfp-cs__eyebrow--red .tfp-cs__square {
	background: var(--tfp-red);
}

.tfp-cs__fig-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 100px;
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 14px;
	text-transform: uppercase;
	white-space: nowrap;
}

.tfp-cs__badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
	background: currentcolor;
}

.tfp-cs__badge--red {
	color: var(--tfp-red);
	background: rgb(238 90 82 / 10%);
	border: 1px solid rgb(238 90 82 / 28%);
}

.tfp-cs__badge--teal {
	gap: 7px;
	color: var(--tfp-teal-deep);
	background: rgb(31 138 138 / 10%);
	border: 1px solid rgb(31 138 138 / 30%);
}

.tfp-cs__badge--delta {
	align-self: flex-start;
	letter-spacing: 0.06em;
	color: var(--tfp-teal-deep);
	background: rgb(31 138 138 / 8%);
	border: 1px solid rgb(31 138 138 / 24%);
}

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

.tfp-cs__hero {
	position: relative;
	padding: 72px var(--tfp-pad) 96px;
	overflow: clip;
	background: var(--tfp-bg);
}

.tfp-cs__hero-dots {
	position: absolute;
	top: 0;
	right: 0;
	width: min(820px, 100%);
	height: 560px;
	pointer-events: none;
	background-image: radial-gradient(circle, rgb(43 179 179 / 50%) 1.5px, transparent 1.6px);
	background-size: 24px 24px;
}

.tfp-cs__hero-dots::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(225deg, rgb(11 23 40 / 0%) 0%, rgb(11 23 40 / 45%) 55%, #0b1728 100%);
	background: linear-gradient(in oklab 225deg, oklab(19.5% -0.008 -0.035 / 0%) 0%, oklab(19.5% -0.008 -0.035 / 45%) 55%, oklab(19.5% -0.008 -0.035) 100%);
}

.tfp-cs__hero-inner {
	position: relative;
	max-width: var(--tfp-max);
	margin-inline: auto;
}

.tfp-cs__hero-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 56px;
}

.tfp-cs__hero-location {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__hero-title {
	padding-bottom: 44px;
}

.tfp-cs__hero-title h1 {
	font-family: var(--tfp-font-serif);
	font-size: clamp(58px, 11.8vw, 170px);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--tfp-ink);
}

.tfp-cs__hero-title h1 span {
	display: block;
}

.tfp-cs__hero-title h1 span:first-child {
	line-height: 0.885;
}

.tfp-cs__hero-tagline {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 640px;
	padding-bottom: 64px;
}

.tfp-cs__hero-tagline-serif {
	font-family: var(--tfp-font-serif);
	font-size: clamp(24px, 2.08vw, 30px);
	font-style: italic;
	font-weight: 450;
	letter-spacing: -0.02em;
	line-height: 1.27;
	color: var(--tfp-body);
}

.tfp-cs__hero-lede {
	font-size: 16px;
	line-height: 26px;
	color: var(--tfp-muted);
}

/* --- Case film ------------------------------------------------------------- */

.tfp-cs__film {
	padding-bottom: 106px;
}

.tfp-cs__film .tfp-cs__fig-row {
	margin-bottom: 14px;
}

.tfp-cs__film-frame {
	position: relative;
	aspect-ratio: 1312 / 720;
	border: 1px solid var(--tfp-line);
	border-radius: 16px;
	overflow: hidden;
	background: var(--tfp-bg);
}

.tfp-cs__film-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tfp-cs__film-vignette {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 300px;
	pointer-events: none;
	background: linear-gradient(180deg, rgb(11 23 40 / 0%) 0%, rgb(11 23 40 / 55%) 55%, rgb(11 23 40 / 90%) 100%);
	background: linear-gradient(in oklab 180deg, oklab(19.5% -0.008 -0.035 / 0%) 0%, oklab(19.5% -0.008 -0.035 / 55%) 55%, oklab(19.5% -0.008 -0.035 / 90%) 100%);
}

.tfp-cs__play {
	position: absolute;
	inset: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
}

.tfp-cs__play-rings {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 160px;
}

.tfp-cs__play-ring {
	position: absolute;
	border-radius: 999px;
}

.tfp-cs__play-ring--outer {
	inset: 0;
	background: rgb(43 179 179 / 8%);
	border: 1px solid rgb(43 179 179 / 30%);
}

.tfp-cs__play-ring--inner {
	inset: 20px;
	background: rgb(43 179 179 / 10%);
	border: 1px solid rgb(43 179 179 / 35%);
}

.tfp-cs__play-disc {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 999px;
	background: var(--tfp-teal);
	box-shadow: 0 18px 48px rgb(43 179 179 / 45%);
	transition: transform 220ms var(--tfp-ease-out);
}

.tfp-cs__play:hover .tfp-cs__play-disc,
.tfp-cs__play:focus-visible .tfp-cs__play-disc {
	transform: scale(1.06);
}

.tfp-cs__play-triangle {
	width: 0;
	height: 0;
	margin-left: 6px;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 24px solid var(--tfp-bg);
}

.tfp-cs__play-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgb(11 24 40 / 72%);
	border: 1px solid rgb(43 179 179 / 32%);
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-teal);
}

.tfp-cs__play-pill-dot {
	width: 5px;
	height: 5px;
	border-radius: 999px;
	flex-shrink: 0;
	background: var(--tfp-teal);
	box-shadow: 0 0 0 3px rgb(43 179 179 / 20%);
}

.tfp-cs__film-overlay {
	position: absolute;
	left: 32px;
	right: 32px;
	bottom: 28px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	pointer-events: none;
}

.tfp-cs__film-overlay-copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tfp-cs__film-overlay-label {
	font-family: var(--tfp-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 12px;
	text-transform: uppercase;
	color: var(--tfp-teal);
}

.tfp-cs__film-overlay-copy p {
	max-width: 520px;
	font-size: 22px;
	font-weight: 500;
	line-height: 29px;
	color: var(--tfp-ink-soft);
}

.tfp-cs__film-overlay-meta {
	display: flex;
	gap: 28px;
	flex-shrink: 0;
}

.tfp-cs__film-overlay-meta span {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.tfp-cs__film-overlay-meta small {
	font-family: var(--tfp-font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	line-height: 12px;
	text-transform: uppercase;
	color: var(--tfp-muted);
}

.tfp-cs__film-overlay-meta strong {
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: var(--tfp-ink-soft);
}

.tfp-cs__film-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #000;
}

.tfp-cs__film-frame.is-playing .tfp-cs__play,
.tfp-cs__film-frame.is-playing .tfp-cs__film-overlay,
.tfp-cs__film-frame.is-playing .tfp-cs__film-vignette {
	display: none;
}

/* --- Dashboard showcase ----------------------------------------------------- */

.tfp-cs__showcase .tfp-cs__fig-row {
	margin-bottom: 14px;
}

.tfp-cs__showcase-mock {
	display: block;
	width: min(1286px, 100%);
	height: auto;
	margin-inline: auto;
	border: 1px solid var(--tfp-line);
	border-radius: 16px;
	box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
}

/* --- Meta strip -------------------------------------------------------------- */

.tfp-cs__meta-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	max-width: calc(var(--tfp-max) + 2 * var(--tfp-pad));
	margin-inline: auto;
	padding: 48px var(--tfp-pad);
	background: var(--tfp-band);
	border-top: 1px solid var(--tfp-line);
	border-bottom: 1px solid var(--tfp-line);
}

.tfp-cs__meta-item {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-inline: 32px;
	border-right: 1px solid var(--tfp-line);
}

.tfp-cs__meta-item:first-child {
	padding-left: 0;
}

.tfp-cs__meta-item:last-child {
	padding-right: 0;
	border-right: 0;
}

.tfp-cs__meta-label {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__meta-item strong {
	font-family: var(--tfp-font-serif);
	font-size: 24px;
	font-weight: 450;
	letter-spacing: -0.02em;
	line-height: 28px;
	color: var(--tfp-ink);
}

.tfp-cs__meta-item p {
	font-size: 13px;
	line-height: 18px;
	color: var(--tfp-muted);
}

/* --- Challenge ---------------------------------------------------------------- */

.tfp-cs__challenge {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: 130px var(--tfp-pad) 110px;
	background-image: linear-gradient(var(--tfp-wash), var(--tfp-wash)), url(/assets/case_studies/teach_for_poland/challenge-texture.jpg);
	background-blend-mode: hard-light, normal;
	background-size: cover;
	background-position: 50%;
}

.tfp-cs__challenge > * {
	width: 100%;
	max-width: var(--tfp-max);
	margin-inline: auto;
}

.tfp-cs__challenge-head {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.tfp-cs__challenge-head h2 {
	max-width: 1000px;
	font-family: var(--tfp-font-serif);
	font-size: clamp(38px, 4.45vw, 64px);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.09;
	color: var(--tfp-ink);
}

.tfp-cs__challenge-head h2 span {
	display: block;
}

.tfp-cs__challenge-head h2 span:first-child {
	line-height: 1.03;
}

.tfp-cs__challenge-head h2 em {
	margin-left: 0.22em;
	font-style: italic;
	font-weight: 450;
	letter-spacing: -0.02em;
	color: var(--tfp-red);
}

.tfp-cs__challenge-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	max-width: 1000px;
	margin-inline: 0;
	margin-right: auto;
}

.tfp-cs__challenge-body p {
	font-size: 17px;
	line-height: 28px;
	color: var(--tfp-muted);
}

.tfp-cs__challenge-body .tfp-cs__challenge-lead {
	color: var(--tfp-body);
}

.tfp-cs__workflow {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 36px 40px;
	background: var(--tfp-band);
	border: 1px solid var(--tfp-line);
	border-radius: 16px;
}

.tfp-cs__workflow-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.tfp-cs__workflow-label {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__flow-chain {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tfp-cs__flow-arrow {
	flex-shrink: 0;
}

.tfp-cs__flow-step {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px;
	background: var(--tfp-band-deep);
	border: 1px solid var(--tfp-line);
	border-radius: 10px;
}

.tfp-cs__flow-num {
	font-family: var(--tfp-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	line-height: 12px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__flow-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: var(--tfp-body);
}

.tfp-cs__flow-step--late {
	background: rgb(238 90 82 / 7%);
	border-color: rgb(238 90 82 / 28%);
}

.tfp-cs__flow-step--late .tfp-cs__flow-num {
	color: var(--tfp-red);
}

.tfp-cs__flow-step--late .tfp-cs__flow-name {
	color: var(--tfp-ink);
}

/* --- Approach ------------------------------------------------------------------ */

.tfp-cs__approach {
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding: 110px var(--tfp-pad) 120px;
	border-top: 1px solid var(--tfp-line);
}

.tfp-cs__approach > * {
	width: 100%;
	max-width: var(--tfp-max);
	margin-inline: auto;
}

.tfp-cs__approach-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.tfp-cs__approach-head-left {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 760px;
}

.tfp-cs__approach-head-left h2 {
	font-family: var(--tfp-font-serif);
	font-size: clamp(36px, 3.9vw, 56px);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.11;
	color: var(--tfp-ink);
}

.tfp-cs__approach-head-left h2 span {
	display: block;
}

.tfp-cs__approach-head-left h2 span:first-child {
	line-height: 1.035;
}

.tfp-cs__approach-head-left h2 em {
	margin-left: 0.2em;
	font-style: italic;
	font-weight: 450;
	letter-spacing: -0.02em;
	color: var(--tfp-teal);
}

.tfp-cs__approach-head-right {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 300px;
	padding-bottom: 6px;
}

.tfp-cs__approach-kicker {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__approach-head-right p {
	font-size: 14px;
	line-height: 22px;
	color: var(--tfp-muted);
}

.tfp-cs__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-top: 40px;
	border-top: 1px solid var(--tfp-line);
}

.tfp-cs__step {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-height: 380px;
	padding-inline: 32px;
	border-right: 1px solid var(--tfp-line);
}

.tfp-cs__step:first-child {
	padding-left: 0;
}

.tfp-cs__step:last-child {
	padding-right: 0;
	border-right: 0;
}

.tfp-cs__step-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
}

.tfp-cs__step-num {
	font-family: var(--tfp-font-serif);
	font-size: 80px;
	font-style: italic;
	font-weight: 450;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--tfp-teal);
}

.tfp-cs__step-tag {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__step-copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tfp-cs__step-copy h3 {
	font-family: var(--tfp-font-serif);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 30px;
	color: var(--tfp-ink);
}

.tfp-cs__step-copy p {
	font-size: 15px;
	line-height: 24px;
	color: var(--tfp-muted);
}

.tfp-cs__step-deliverable {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
}

.tfp-cs__step-deliverable span {
	font-family: var(--tfp-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 12px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__step-deliverable strong {
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: var(--tfp-body);
}

/* --- Features -------------------------------------------------------------------- */

.tfp-cs__feature {
	display: flex;
	justify-content: space-between;
	gap: clamp(48px, 6.6vw, 96px);
	max-width: calc(var(--tfp-max) + 2 * var(--tfp-pad));
	margin-inline: auto;
	padding: 110px var(--tfp-pad);
	border-top: 1px solid var(--tfp-line);
}

.tfp-cs__feature--import {
	align-items: flex-start;
	background-image: linear-gradient(var(--tfp-wash-deep), var(--tfp-wash-deep)), url(/assets/case_studies/teach_for_poland/feature-import-texture.jpg);
	background-blend-mode: hard-light, normal;
	background-size: cover;
	background-position: 50%;
}

.tfp-cs__feature--filter {
	align-items: center;
	background: var(--tfp-band);
	border-bottom: 1px solid var(--tfp-line);
}

.tfp-cs__feature--track {
	align-items: center;
	background-image: linear-gradient(var(--tfp-wash), var(--tfp-wash)), url(/assets/case_studies/teach_for_poland/feature-track-texture.jpg);
	background-blend-mode: hard-light, normal;
	background-size: cover;
	background-position: 50%;
}

.tfp-cs__feature-copy {
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 452px;
	flex-shrink: 0;
}

.tfp-cs__feature--filter .tfp-cs__feature-copy {
	width: auto;
	max-width: 624px;
	flex-shrink: 1;
}

.tfp-cs__feature-copy h2 {
	font-family: var(--tfp-font-serif);
	font-size: clamp(32px, 3.2vw, 46px);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.045;
	color: var(--tfp-ink);
}

.tfp-cs__feature-copy > p {
	font-size: 16px;
	line-height: 26px;
	color: var(--tfp-body);
}

.tfp-cs__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 8px;
}

.tfp-cs__spec {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 16px 16px 0;
	border-top: 1px solid var(--tfp-line);
}

.tfp-cs__spec:nth-child(even) {
	padding-right: 0;
	padding-left: 24px;
}

.tfp-cs__spec:nth-last-child(-n+2) {
	padding-bottom: 0;
}

.tfp-cs__spec span {
	font-family: var(--tfp-font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	line-height: 13px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__spec strong {
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	color: var(--tfp-ink);
}

.tfp-cs__example-qs {
	display: flex;
	flex-direction: column;
	margin-top: 8px;
}

.tfp-cs__example-q {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-block: 16px;
	border-top: 1px solid var(--tfp-line);
}

.tfp-cs__example-q svg {
	flex-shrink: 0;
}

.tfp-cs__example-q span {
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	color: var(--tfp-ink);
}

/* --- Cream product cards ------------------------------------------------------------ */

.tfp-cs__card {
	background: var(--tfp-cream);
	border: 1px solid var(--tfp-cream-line);
	border-radius: 16px;
	color: var(--tfp-cream-ink);
}

.tfp-cs__card--import {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 0 1 692px;
	padding: 28px;
}

.tfp-cs__card--filter {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 0 1 592px;
	min-width: 0;
	padding: 26px;
}

.tfp-cs__card--track {
	display: flex;
	flex-direction: column;
	gap: 22px;
	flex: 0 1 512px;
	min-width: 0;
	padding: 26px;
}

/* Import card */

.tfp-cs__card-import-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.tfp-cs__card-file {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tfp-cs__card-file-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 10px;
	background: rgb(31 138 138 / 10%);
}

.tfp-cs__card-file-name {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.tfp-cs__card-file-name strong {
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: var(--tfp-cream-ink);
}

.tfp-cs__card-file-name span {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-cream-muted);
}

.tfp-cs__card-progress {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tfp-cs__card-progress-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	line-height: 14px;
	text-transform: uppercase;
}

.tfp-cs__card-progress-row span {
	letter-spacing: 0.1em;
	color: var(--tfp-cream-muted);
}

.tfp-cs__card-progress-row strong {
	font-weight: 400;
	color: var(--tfp-teal-deep);
}

.tfp-cs__card-progress-track {
	height: 6px;
	border-radius: 100px;
	background: var(--tfp-cream-track);
}

.tfp-cs__card-progress-fill {
	width: 100%;
	height: 6px;
	border-radius: 100px;
	background: var(--tfp-teal-deep);
}

.tfp-cs__card-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.tfp-cs__card-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--tfp-cream-line-soft);
	border-radius: 12px;
}

.tfp-cs__card-stat span {
	font-family: var(--tfp-font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	line-height: 13px;
	text-transform: uppercase;
	color: var(--tfp-cream-muted);
}

.tfp-cs__card-stat strong {
	font-family: var(--tfp-font-serif);
	font-size: 34px;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 34px;
	color: var(--tfp-cream-ink);
}

.tfp-cs__card-stat strong.tfp-cs__card-stat--teal {
	color: var(--tfp-teal-deep);
}

.tfp-cs__card-stat strong.tfp-cs__card-stat--amber {
	color: var(--tfp-amber);
}

/* Filter card */

.tfp-cs__card-filter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	line-height: 14px;
	text-transform: uppercase;
}

.tfp-cs__card-filter-label {
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--tfp-teal-deep);
}

.tfp-cs__card-filter-meta {
	color: var(--tfp-cream-muted);
}

.tfp-cs__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tfp-cs__chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	background: #fff;
	border: 1px solid var(--tfp-cream-line);
	border-radius: 10px;
}

.tfp-cs__chip--active {
	border-color: rgb(31 138 138 / 50%);
}

.tfp-cs__chip-key {
	font-family: var(--tfp-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	line-height: 12px;
	text-transform: uppercase;
	color: var(--tfp-cream-muted);
}

.tfp-cs__chip-value {
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	color: var(--tfp-cream-ink);
}

.tfp-cs__chip-value--muted {
	font-weight: 500;
	color: var(--tfp-cream-muted);
}

.tfp-cs__chip .tfp-cs__chip-value:not(.tfp-cs__chip-value--muted) {
	font-weight: 600;
}

.tfp-cs__chip:not(.tfp-cs__chip--active) .tfp-cs__chip-value:not(.tfp-cs__chip-value--muted) {
	font-weight: 500;
}

.tfp-cs__chip-x {
	font-size: 11px;
	line-height: 12px;
	color: var(--tfp-teal-deep);
}

.tfp-cs__chip-caret {
	font-size: 10px;
	line-height: 12px;
	color: var(--tfp-cream-muted);
}

.tfp-cs__card-filter-foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--tfp-cream-hairline);
}

.tfp-cs__card-filter-count {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tfp-cs__card-filter-count > span {
	font-family: var(--tfp-font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	line-height: 13px;
	text-transform: uppercase;
	color: var(--tfp-teal-deep);
}

.tfp-cs__card-filter-count-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.tfp-cs__card-filter-count-row strong {
	font-family: var(--tfp-font-serif);
	font-size: 46px;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 44px;
	color: var(--tfp-cream-ink);
}

.tfp-cs__card-filter-count-row em {
	font-style: normal;
	font-size: 13px;
	line-height: 16px;
	color: var(--tfp-teal-deep);
}

.tfp-cs__card-filter-foot > p {
	max-width: 220px;
	font-size: 12px;
	line-height: 18px;
	text-align: right;
	color: var(--tfp-cream-muted);
}

/* Track card */

.tfp-cs__card-track-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.tfp-cs__card-track-mode {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tfp-cs__card-track-mode > span:first-child {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-teal-deep);
}

.tfp-cs__card-track-years {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 10px;
	background: #fff;
	border: 1px solid var(--tfp-cream-line);
	border-radius: 100px;
	font-family: var(--tfp-font-mono);
	font-size: 10px;
	line-height: 12px;
}

.tfp-cs__card-track-years small {
	font-size: 10px;
	color: var(--tfp-cream-muted);
}

.tfp-cs__card-track-years strong {
	font-weight: 400;
	color: var(--tfp-teal-deep);
}

.tfp-cs__card-export {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	background: #fff;
	border: 1px solid var(--tfp-cream-line);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: var(--tfp-cream-ink);
	white-space: nowrap;
}

.tfp-cs__card-track-question {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--tfp-cream-line-soft);
	border-radius: 12px;
}

.tfp-cs__donut {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.tfp-cs__donut > span {
	font-family: var(--tfp-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	line-height: 12px;
	text-transform: uppercase;
	color: var(--tfp-cream-muted);
}

.tfp-cs__donut--current > span {
	color: var(--tfp-teal-deep);
}

.tfp-cs__card-track-question-copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-grow: 1;
}

.tfp-cs__card-track-question-copy p {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--tfp-cream-ink);
}

.tfp-cs__card-track-shifts {
	display: flex;
	flex-direction: column;
}

.tfp-cs__card-track-shifts-label {
	padding-bottom: 6px;
	font-family: var(--tfp-font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	line-height: 13px;
	text-transform: uppercase;
	color: var(--tfp-teal-deep);
}

.tfp-cs__shift-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 14px;
	border-top: 1px solid var(--tfp-cream-hairline);
}

.tfp-cs__shift-row strong {
	width: 150px;
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: var(--tfp-cream-ink);
}

.tfp-cs__shift-track {
	flex-grow: 1;
	height: 6px;
	border-radius: 100px;
	background: var(--tfp-cream-track);
}

.tfp-cs__shift-fill {
	height: 6px;
	border-radius: 100px;
	background: var(--tfp-teal-deep);
}

.tfp-cs__shift-range,
.tfp-cs__shift-delta {
	flex-shrink: 0;
	font-family: var(--tfp-font-mono);
	font-size: 12px;
	line-height: 14px;
	text-align: right;
}

.tfp-cs__shift-range {
	width: 64px;
	color: var(--tfp-cream-muted);
}

.tfp-cs__shift-delta {
	width: 52px;
	font-weight: 500;
	color: var(--tfp-teal-deep);
}

/* --- Under the hood ----------------------------------------------------------------- */

.tfp-cs__hood {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: 110px var(--tfp-pad) 100px;
	background: var(--tfp-band);
	border-top: 1px solid var(--tfp-line);
	border-bottom: 1px solid var(--tfp-line);
}

.tfp-cs__hood > * {
	width: 100%;
	max-width: var(--tfp-max);
	margin-inline: auto;
}

.tfp-cs__hood-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.tfp-cs__hood-head-left {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 620px;
}

.tfp-cs__hood-head-left h2 {
	font-family: var(--tfp-font-serif);
	font-size: clamp(34px, 3.6vw, 52px);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.04;
	color: var(--tfp-ink);
}

.tfp-cs__hood-head-note {
	max-width: 340px;
	padding-bottom: 6px;
	font-size: 15px;
	line-height: 24px;
	color: var(--tfp-muted);
}

.tfp-cs__arch {
	display: flex;
	gap: 10px;
}

.tfp-cs__arch-arrow {
	flex-shrink: 0;
	align-self: center;
}

.tfp-cs__arch-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	background: var(--tfp-bg);
	border: 1px solid var(--tfp-line);
	border-radius: 12px;
}

.tfp-cs__arch-step {
	font-family: var(--tfp-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	line-height: 12px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__arch-card strong {
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: var(--tfp-ink);
}

.tfp-cs__arch-card p {
	font-size: 12px;
	line-height: 17px;
	color: var(--tfp-muted);
}

.tfp-cs__arch-card--store {
	border-color: rgb(43 179 179 / 32%);
}

.tfp-cs__arch-card--store .tfp-cs__arch-step {
	color: var(--tfp-teal);
}

.tfp-cs__built-with {
	display: flex;
	align-items: center;
	gap: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--tfp-line);
}

.tfp-cs__built-with-label {
	flex-shrink: 0;
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__built-with ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 20px;
	row-gap: 10px;
}

.tfp-cs__built-with li {
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: var(--tfp-body);
}

/* --- Results ---------------------------------------------------------------------------- */

.tfp-cs__results {
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding: 130px var(--tfp-pad) 120px;
}

.tfp-cs__results > * {
	width: 100%;
	max-width: var(--tfp-max);
	margin-inline: auto;
}

.tfp-cs__results-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.tfp-cs__results-head-left {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 820px;
}

.tfp-cs__results-head-left h2 {
	font-family: var(--tfp-font-serif);
	font-size: clamp(40px, 5vw, 72px);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.14;
	color: var(--tfp-ink);
}

.tfp-cs__results-head-left h2 span {
	display: block;
}

.tfp-cs__results-head-left h2 span:first-child {
	line-height: 1;
}

.tfp-cs__results-head-left h2 em {
	margin-left: 0.24em;
	font-size: 1.11em;
	font-style: italic;
	font-weight: 450;
	letter-spacing: -0.02em;
	color: var(--tfp-teal);
}

.tfp-cs__results-head-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	padding-bottom: 8px;
	text-align: right;
}

.tfp-cs__results-window-label {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__results-head-right strong {
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
	color: var(--tfp-ink);
}

.tfp-cs__results-head-right p {
	font-size: 13px;
	line-height: 16px;
	color: var(--tfp-muted);
}

.tfp-cs__stat-label {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__big-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-top: 48px;
	border-top: 1px solid var(--tfp-line);
}

.tfp-cs__big-stat {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.tfp-cs__big-stat:first-child {
	padding-right: 56px;
	border-right: 1px solid var(--tfp-line);
}

.tfp-cs__big-stat:last-child {
	padding-left: 56px;
}

.tfp-cs__big-stat-value {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.tfp-cs__big-stat-value strong {
	font-family: var(--tfp-font-serif);
	font-size: clamp(88px, 13.3vw, 192px);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 0.85;
	color: var(--tfp-ink);
}

.tfp-cs__big-stat-value em {
	font-family: var(--tfp-font-serif);
	font-size: clamp(40px, 5vw, 72px);
	font-style: normal;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.11;
	color: var(--tfp-teal);
}

.tfp-cs__big-stat-note {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tfp-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__big-stat-note--red {
	color: var(--tfp-red);
}

.tfp-cs__big-stat-note-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--tfp-arrow);
}

.tfp-cs__big-stat > p {
	font-size: 17px;
	line-height: 27px;
	color: var(--tfp-body);
}

.tfp-cs__small-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding-top: 40px;
	border-top: 1px solid var(--tfp-line);
}

.tfp-cs__small-stat {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-inline: 40px;
	border-right: 1px solid var(--tfp-line);
}

.tfp-cs__small-stat:first-child {
	padding-left: 0;
}

.tfp-cs__small-stat:last-child {
	padding-right: 0;
	border-right: 0;
}

.tfp-cs__small-stat strong {
	font-family: var(--tfp-font-serif);
	font-size: 56px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 56px;
	color: var(--tfp-ink);
}

.tfp-cs__small-stat p {
	font-size: 14px;
	line-height: 21px;
	color: var(--tfp-muted);
}

/* --- Testimonial --------------------------------------------------------------------------- */

.tfp-cs__testimonial {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 120px var(--tfp-pad);
	background-image: linear-gradient(var(--tfp-wash-deep), var(--tfp-wash-deep)), url(/assets/case_studies/teach_for_poland/testimonial-texture.jpg);
	background-blend-mode: hard-light, normal;
	background-size: cover;
	background-position: 50%;
	border-top: 1px solid var(--tfp-line);
	border-bottom: 1px solid var(--tfp-line);
	text-align: center;
}

.tfp-cs__eyebrow--quote {
	letter-spacing: 0.2em;
	color: var(--tfp-slate);
}

.tfp-cs__eyebrow--quote .tfp-cs__square {
	background: var(--tfp-teal);
}

.tfp-cs__quote {
	max-width: 1000px;
	font-family: var(--tfp-font-serif);
	font-size: clamp(26px, 2.9vw, 42px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.285;
	color: var(--tfp-ink);
}

.tfp-cs__quote-attribution {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding-top: 8px;
}

.tfp-cs__quote-attribution strong {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: var(--tfp-ink);
}

.tfp-cs__quote-attribution span {
	font-size: 13px;
	line-height: 18px;
	color: var(--tfp-muted);
}

/* --- Next / CTA ------------------------------------------------------------------------------ */

.tfp-cs__next {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.tfp-cs__next-case {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 100px 64px 100px var(--tfp-pad);
	border-right: 1px solid var(--tfp-line);
}

.tfp-cs__next-eyebrow {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__next-case h2 {
	font-family: var(--tfp-font-serif);
	font-size: clamp(40px, 4.45vw, 64px);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.09;
	color: var(--tfp-ink);
}

.tfp-cs__next-case h2 em {
	font-style: italic;
	font-weight: 450;
	letter-spacing: -0.02em;
	color: var(--tfp-teal);
}

.tfp-cs__next-case > p {
	max-width: 480px;
	font-size: 16px;
	line-height: 25px;
	color: var(--tfp-muted);
}

.tfp-cs__next-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-top: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	color: var(--tfp-ink);
}

.tfp-cs__next-cta svg {
	transition: transform 220ms var(--tfp-ease-out);
}

.tfp-cs__next-case:hover .tfp-cs__next-cta svg,
.tfp-cs__next-case:focus-visible .tfp-cs__next-cta svg {
	transform: translateX(4px);
}

.tfp-cs__next-contact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	padding: 100px var(--tfp-pad) 100px 64px;
}

.tfp-cs__next-contact-eyebrow {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-teal);
}

.tfp-cs__next-contact h2 {
	max-width: 592px;
	font-family: var(--tfp-font-serif);
	font-size: clamp(34px, 3.6vw, 52px);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: var(--tfp-ink);
}

.tfp-cs__next-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 8px;
}

.tfp-cs__cta-solid {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	border-radius: 100px;
	background: var(--tfp-teal);
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	color: var(--tfp-bg);
	transition: background 180ms var(--tfp-ease-out), transform 180ms var(--tfp-ease-out);
}

.tfp-cs__cta-solid:hover,
.tfp-cs__cta-solid:focus-visible {
	background: #37c6c6;
	transform: translateY(-1px);
}

.tfp-cs__cta-email {
	font-size: 14px;
	line-height: 18px;
	color: var(--tfp-muted);
	transition: color 180ms var(--tfp-ease-out);
}

.tfp-cs__cta-email:hover,
.tfp-cs__cta-email:focus-visible {
	color: var(--tfp-teal);
}

/* --- Footer ------------------------------------------------------------------------------------ */

.tfp-cs__footer {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: 64px var(--tfp-pad) 40px;
	border-top: 1px solid var(--tfp-line);
}

.tfp-cs__footer > * {
	width: 100%;
	max-width: var(--tfp-max);
	margin-inline: auto;
}

.tfp-cs__footer-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}

.tfp-cs__footer-brand {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tfp-cs__footer-brand span {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__footer-brand img {
	display: block;
	width: min(280px, 60vw);
	height: 61px;
	object-fit: contain;
	object-position: left center;
}

.tfp-cs__footer-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
}

.tfp-cs__footer-cols > div {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 90px;
}

.tfp-cs__footer-cols strong {
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__footer-cols a,
.tfp-cs__footer-cols > div > span {
	font-size: 14px;
	line-height: 20px;
	color: var(--tfp-body);
}

.tfp-cs__footer-cols a {
	transition: color 180ms var(--tfp-ease-out);
}

.tfp-cs__footer-cols a:hover,
.tfp-cs__footer-cols a:focus-visible {
	color: var(--tfp-teal);
}

.tfp-cs__footer-baseline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--tfp-line);
	font-family: var(--tfp-font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--tfp-slate);
}

.tfp-cs__footer-baseline nav {
	display: flex;
	gap: 22px;
}

.tfp-cs__footer-baseline a {
	color: var(--tfp-slate);
	transition: color 180ms var(--tfp-ease-out);
}

.tfp-cs__footer-baseline a:hover,
.tfp-cs__footer-baseline a:focus-visible {
	color: var(--tfp-teal);
}

/* --- Reveal animation ----------------------------------------------------------------------------- */

.tfp-cs__reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 520ms var(--tfp-ease-out),
		transform 520ms var(--tfp-ease-out);
	transition-delay: var(--tfp-reveal-delay, 0ms);
}

.tfp-cs__reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.tfp-cs__reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.tfp-cs__play-disc,
	.tfp-cs__next-cta svg,
	.tfp-cs__cta-solid {
		transition: none;
	}
}

/* --- Motion ------------------------------------------------------------------------------------------
 * Scroll-triggered choreography. Everything here is gated behind
 * prefers-reduced-motion: no-preference — reduced-motion users get the page in
 * its final, static state (the JS also skips straight to final values).
 * -------------------------------------------------------------------------- */

.tfp-cs__chip {
	transition: border-color 180ms var(--tfp-ease-out);
}

.tfp-cs__chip:hover {
	border-color: rgb(31 138 138 / 65%);
}

.tfp-cs__arch-card {
	transition: border-color 200ms var(--tfp-ease-out);
}

.tfp-cs__arch-card:hover {
	border-color: #24405f;
}

.tfp-cs__arch-card--store:hover {
	border-color: rgb(43 179 179 / 55%);
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes tfp-fade-in {
		from { opacity: 0; }
	}

	@keyframes tfp-ring-ripple {
		0% { transform: scale(0.68); opacity: 0; }
		35% { opacity: 1; }
		100% { transform: scale(1.04); opacity: 0; }
	}

	@keyframes tfp-dot-pulse {
		0%, 100% { box-shadow: 0 0 0 3px rgb(43 179 179 / 20%); }
		50% { box-shadow: 0 0 0 6px rgb(43 179 179 / 8%); }
	}

	@keyframes tfp-blink {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.35; }
	}

	@keyframes tfp-late-flash {
		0% { box-shadow: 0 0 0 0 rgb(238 90 82 / 35%); }
		100% { box-shadow: 0 0 0 14px rgb(238 90 82 / 0%); }
	}

	/* Hero — dot field fades in, headline rises line by line. */

	.tfp-cs__hero-dots {
		animation: tfp-fade-in 1400ms var(--tfp-ease-out) both;
	}

	.tfp-cs__hero-title h1 span {
		opacity: 0;
		transform: translateY(28px);
		transition:
			opacity 680ms var(--tfp-ease-out),
			transform 680ms var(--tfp-ease-out);
	}

	.tfp-cs__hero-title h1 span:last-child {
		transition-delay: 90ms;
	}

	.tfp-cs__hero-title.is-visible h1 span {
		opacity: 1;
		transform: none;
	}

	/* Film — idle ripple invites the click; poster eases in on hover. */

	.tfp-cs__play-ring--outer {
		animation: tfp-ring-ripple 3200ms var(--tfp-ease-out) infinite;
	}

	.tfp-cs__play-ring--inner {
		animation: tfp-ring-ripple 3200ms var(--tfp-ease-out) 480ms infinite;
	}

	.tfp-cs__play-pill-dot {
		animation: tfp-dot-pulse 2200ms ease-in-out infinite;
	}

	.tfp-cs__film-poster {
		transition: transform 900ms var(--tfp-ease-out);
	}

	.tfp-cs__film-frame:not(.is-playing):hover .tfp-cs__film-poster {
		transform: scale(1.025);
	}

	.tfp-cs__play:active .tfp-cs__play-disc {
		transform: scale(0.96);
	}

	/* Challenge — the old workflow lights up step by step, landing on "Late". */

	.tfp-cs__badge--red .tfp-cs__badge-dot {
		animation: tfp-blink 1800ms ease-in-out infinite;
	}

	.tfp-cs__flow-chain > * {
		opacity: 0;
		transform: translateY(10px);
		transition:
			opacity 420ms var(--tfp-ease-out),
			transform 420ms var(--tfp-ease-out);
	}

	.tfp-cs__workflow.is-visible .tfp-cs__flow-chain > * {
		opacity: 1;
		transform: none;
	}

	.tfp-cs__workflow.is-visible .tfp-cs__flow-chain > :nth-child(1) { transition-delay: 120ms; }
	.tfp-cs__workflow.is-visible .tfp-cs__flow-chain > :nth-child(2) { transition-delay: 180ms; }
	.tfp-cs__workflow.is-visible .tfp-cs__flow-chain > :nth-child(3) { transition-delay: 240ms; }
	.tfp-cs__workflow.is-visible .tfp-cs__flow-chain > :nth-child(4) { transition-delay: 300ms; }
	.tfp-cs__workflow.is-visible .tfp-cs__flow-chain > :nth-child(5) { transition-delay: 360ms; }
	.tfp-cs__workflow.is-visible .tfp-cs__flow-chain > :nth-child(6) { transition-delay: 420ms; }
	.tfp-cs__workflow.is-visible .tfp-cs__flow-chain > :nth-child(7) { transition-delay: 480ms; }
	.tfp-cs__workflow.is-visible .tfp-cs__flow-chain > :nth-child(8) { transition-delay: 540ms; }
	.tfp-cs__workflow.is-visible .tfp-cs__flow-chain > :nth-child(9) { transition-delay: 600ms; }
	.tfp-cs__workflow.is-visible .tfp-cs__flow-chain > :nth-child(10) { transition-delay: 660ms; }
	.tfp-cs__workflow.is-visible .tfp-cs__flow-chain > :nth-child(11) { transition-delay: 720ms; }

	.tfp-cs__workflow.is-visible.is-filled .tfp-cs__flow-step--late {
		animation: tfp-late-flash 900ms var(--tfp-ease-out) 1250ms both;
	}

	/* Feature 01 — the import bar fills, then the badge confirms. */

	.tfp-cs__card-progress-fill {
		transform-origin: left center;
		transition: transform 1200ms var(--tfp-ease-out) 200ms;
	}

	.tfp-cs__card--import:not(.is-filled) .tfp-cs__card-progress-fill {
		transform: scaleX(0);
	}

	.tfp-cs__card--import .tfp-cs__badge--teal {
		opacity: 0;
		transform: scale(0.92);
		transition:
			opacity 360ms var(--tfp-ease-out) 1250ms,
			transform 360ms var(--tfp-ease-out) 1250ms;
	}

	.tfp-cs__card--import.is-filled .tfp-cs__badge--teal {
		opacity: 1;
		transform: none;
	}

	/* Feature 02 — filter chips land one by one, count fades in after. */

	.tfp-cs__card--filter .tfp-cs__chip {
		opacity: 0;
		transform: translateY(8px) scale(0.97);
		transition:
			opacity 380ms var(--tfp-ease-out),
			transform 380ms var(--tfp-ease-out),
			border-color 180ms var(--tfp-ease-out);
	}

	.tfp-cs__card--filter.is-visible .tfp-cs__chip {
		opacity: 1;
		transform: none;
	}

	.tfp-cs__card--filter.is-visible .tfp-cs__chip:nth-child(1) { transition-delay: 150ms, 150ms, 0ms; }
	.tfp-cs__card--filter.is-visible .tfp-cs__chip:nth-child(2) { transition-delay: 220ms, 220ms, 0ms; }
	.tfp-cs__card--filter.is-visible .tfp-cs__chip:nth-child(3) { transition-delay: 290ms, 290ms, 0ms; }
	.tfp-cs__card--filter.is-visible .tfp-cs__chip:nth-child(4) { transition-delay: 360ms, 360ms, 0ms; }
	.tfp-cs__card--filter.is-visible .tfp-cs__chip:nth-child(5) { transition-delay: 430ms, 430ms, 0ms; }

	.tfp-cs__card-filter-count-row em {
		opacity: 0;
		transition: opacity 420ms var(--tfp-ease-out) 900ms;
	}

	.tfp-cs__card--filter.is-visible .tfp-cs__card-filter-count-row em {
		opacity: 1;
	}

	.tfp-cs__feature--filter .tfp-cs__example-q {
		opacity: 0;
		transform: translateX(-10px);
		transition:
			opacity 420ms var(--tfp-ease-out),
			transform 420ms var(--tfp-ease-out);
	}

	.tfp-cs__feature--filter .tfp-cs__feature-copy.is-visible .tfp-cs__example-q {
		opacity: 1;
		transform: none;
	}

	.tfp-cs__feature--filter .tfp-cs__feature-copy.is-visible .tfp-cs__example-q:nth-of-type(1) { transition-delay: 200ms; }
	.tfp-cs__feature--filter .tfp-cs__feature-copy.is-visible .tfp-cs__example-q:nth-of-type(2) { transition-delay: 290ms; }
	.tfp-cs__feature--filter .tfp-cs__feature-copy.is-visible .tfp-cs__example-q:nth-of-type(3) { transition-delay: 380ms; }

	/* Feature 03 — donut arcs sweep round, bars fill, deltas confirm. */

	.tfp-cs__donut-arc {
		transition: stroke-dasharray 1100ms var(--tfp-ease-out) 250ms;
	}

	.tfp-cs__donut-rest {
		transition: opacity 500ms var(--tfp-ease-out) 1150ms;
	}

	.tfp-cs__card--track:not(.is-filled) .tfp-cs__donut-arc {
		stroke-dasharray: 0 339.3;
	}

	.tfp-cs__card--track:not(.is-filled) .tfp-cs__donut-rest {
		opacity: 0;
	}

	.tfp-cs__badge--delta {
		opacity: 0;
		transform: translateY(6px) scale(0.94);
		transition:
			opacity 400ms var(--tfp-ease-out) 1250ms,
			transform 400ms var(--tfp-ease-out) 1250ms;
	}

	.tfp-cs__card--track.is-filled .tfp-cs__badge--delta {
		opacity: 1;
		transform: none;
	}

	.tfp-cs__shift-fill {
		transform-origin: left center;
		transition: transform 900ms var(--tfp-ease-out);
	}

	.tfp-cs__card--track:not(.is-filled) .tfp-cs__shift-fill {
		transform: scaleX(0);
	}

	.tfp-cs__shift-row:nth-of-type(1) .tfp-cs__shift-fill { transition-delay: 350ms; }
	.tfp-cs__shift-row:nth-of-type(2) .tfp-cs__shift-fill { transition-delay: 470ms; }
	.tfp-cs__shift-row:nth-of-type(3) .tfp-cs__shift-fill { transition-delay: 590ms; }

	.tfp-cs__shift-range {
		opacity: 1;
		transition: opacity 420ms var(--tfp-ease-out) 950ms;
	}

	.tfp-cs__card--track:not(.is-filled) .tfp-cs__shift-range {
		opacity: 0;
	}

	/* Under the hood — the pipeline assembles left to right. */

	.tfp-cs__arch > * {
		opacity: 0;
		transform: translateX(-10px);
		transition:
			opacity 420ms var(--tfp-ease-out),
			transform 420ms var(--tfp-ease-out),
			border-color 200ms var(--tfp-ease-out);
	}

	.tfp-cs__arch.is-visible > * {
		opacity: 1;
		transform: none;
	}

	.tfp-cs__arch.is-visible > :nth-child(1) { transition-delay: 100ms, 100ms, 0ms; }
	.tfp-cs__arch.is-visible > :nth-child(2) { transition-delay: 170ms, 170ms, 0ms; }
	.tfp-cs__arch.is-visible > :nth-child(3) { transition-delay: 240ms, 240ms, 0ms; }
	.tfp-cs__arch.is-visible > :nth-child(4) { transition-delay: 310ms, 310ms, 0ms; }
	.tfp-cs__arch.is-visible > :nth-child(5) { transition-delay: 380ms, 380ms, 0ms; }
	.tfp-cs__arch.is-visible > :nth-child(6) { transition-delay: 450ms, 450ms, 0ms; }
	.tfp-cs__arch.is-visible > :nth-child(7) { transition-delay: 520ms, 520ms, 0ms; }
	.tfp-cs__arch.is-visible > :nth-child(8) { transition-delay: 590ms, 590ms, 0ms; }
	.tfp-cs__arch.is-visible > :nth-child(9) { transition-delay: 660ms, 660ms, 0ms; }

	.tfp-cs__built-with li {
		opacity: 0;
		transform: translateY(6px);
		transition:
			opacity 360ms var(--tfp-ease-out),
			transform 360ms var(--tfp-ease-out);
	}

	.tfp-cs__built-with.is-visible li {
		opacity: 1;
		transform: none;
	}

	.tfp-cs__built-with.is-visible li:nth-child(1) { transition-delay: 120ms; }
	.tfp-cs__built-with.is-visible li:nth-child(2) { transition-delay: 160ms; }
	.tfp-cs__built-with.is-visible li:nth-child(3) { transition-delay: 200ms; }
	.tfp-cs__built-with.is-visible li:nth-child(4) { transition-delay: 240ms; }
	.tfp-cs__built-with.is-visible li:nth-child(5) { transition-delay: 280ms; }
	.tfp-cs__built-with.is-visible li:nth-child(6) { transition-delay: 320ms; }
	.tfp-cs__built-with.is-visible li:nth-child(7) { transition-delay: 360ms; }
	.tfp-cs__built-with.is-visible li:nth-child(8) { transition-delay: 400ms; }
	.tfp-cs__built-with.is-visible li:nth-child(9) { transition-delay: 440ms; }
	.tfp-cs__built-with.is-visible li:nth-child(10) { transition-delay: 480ms; }

	/* Results — units settle in once the numbers have counted up. */

	.tfp-cs__big-stat-value em {
		opacity: 0;
		transform: translateY(6px);
		transition:
			opacity 480ms var(--tfp-ease-out) 900ms,
			transform 480ms var(--tfp-ease-out) 900ms;
	}

	.tfp-cs__big-stat.is-visible .tfp-cs__big-stat-value em {
		opacity: 1;
		transform: none;
	}

	/* CTA — press feedback. */

	.tfp-cs__cta-solid:active {
		transform: translateY(0) scale(0.98);
	}
}

/* --- Responsive ------------------------------------------------------------------------------------ */

@media (max-width: 1180px) {
	.tfp-cs__meta-strip {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 0;
	}

	.tfp-cs__meta-item:nth-child(even) {
		padding-right: 0;
		border-right: 0;
	}

	.tfp-cs__meta-item:nth-child(odd) {
		padding-left: 0;
	}

	.tfp-cs__meta-item:nth-child(5) {
		border-right: 1px solid var(--tfp-line);
		padding-right: 32px;
	}

	.tfp-cs__meta-item:last-child {
		border-right: 0;
		padding-right: 0;
	}

	.tfp-cs__steps {
		grid-template-columns: 1fr 1fr;
		gap: 48px 0;
	}

	.tfp-cs__step {
		min-height: 0;
	}

	.tfp-cs__step:nth-child(even) {
		padding-right: 0;
		border-right: 0;
	}

	.tfp-cs__step:nth-child(odd) {
		padding-left: 0;
	}

	.tfp-cs__step-deliverable {
		margin-top: 0;
	}

	.tfp-cs__feature {
		flex-direction: column;
		align-items: stretch;
	}

	.tfp-cs__feature--filter {
		flex-direction: column-reverse;
	}

	.tfp-cs__feature-copy,
	.tfp-cs__feature--filter .tfp-cs__feature-copy {
		width: 100%;
		max-width: 640px;
	}

	.tfp-cs__card--import,
	.tfp-cs__card--filter,
	.tfp-cs__card--track {
		flex-basis: auto;
		width: 100%;
		max-width: 692px;
	}

	.tfp-cs__arch {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.tfp-cs__arch-arrow {
		display: none;
	}

	.tfp-cs__big-stats {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.tfp-cs__big-stat:first-child {
		padding-right: 0;
		padding-bottom: 48px;
		border-right: 0;
		border-bottom: 1px solid var(--tfp-line);
	}

	.tfp-cs__big-stat:last-child {
		padding-left: 0;
	}

	.tfp-cs__next {
		grid-template-columns: 1fr;
	}

	.tfp-cs__next-case {
		padding: 80px var(--tfp-pad);
		border-right: 0;
		border-bottom: 1px solid var(--tfp-line);
	}

	.tfp-cs__next-contact {
		padding: 80px var(--tfp-pad);
	}
}

@media (max-width: 900px) {
	.tfp-cs__hero {
		padding-top: 56px;
	}

	.tfp-cs__hero-dots {
		height: 380px;
	}

	.tfp-cs__hero-meta {
		padding-bottom: 40px;
	}

	.tfp-cs__hero-title {
		padding-bottom: 32px;
	}

	.tfp-cs__hero-tagline {
		padding-bottom: 48px;
	}

	.tfp-cs__challenge-body {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.tfp-cs__approach-head,
	.tfp-cs__hood-head,
	.tfp-cs__results-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.tfp-cs__results-head-right {
		align-items: flex-start;
		text-align: left;
		padding-bottom: 0;
	}

	.tfp-cs__hood-head-note {
		padding-bottom: 0;
	}

	.tfp-cs__challenge,
	.tfp-cs__approach,
	.tfp-cs__feature,
	.tfp-cs__hood,
	.tfp-cs__results,
	.tfp-cs__testimonial {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.tfp-cs__flow-chain {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.tfp-cs__flow-arrow {
		display: none;
	}

	.tfp-cs__film {
		padding-bottom: 72px;
	}

	.tfp-cs__film-frame {
		min-height: 520px;
	}

	.tfp-cs__play {
		gap: 16px;
	}

	.tfp-cs__play-rings {
		width: 120px;
		height: 120px;
	}

	.tfp-cs__play-ring--inner {
		inset: 15px;
	}

	.tfp-cs__play-disc {
		width: 68px;
		height: 68px;
	}

	.tfp-cs__play-triangle {
		border-top-width: 12px;
		border-bottom-width: 12px;
		border-left-width: 19px;
		margin-left: 5px;
	}

	.tfp-cs__play-pill {
		margin-bottom: 120px;
	}

	.tfp-cs__film-overlay {
		left: 20px;
		right: 20px;
		bottom: 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.tfp-cs__film-overlay-copy p {
		font-size: 18px;
		line-height: 25px;
	}

	.tfp-cs__film-overlay-meta {
		gap: 20px;
	}

	.tfp-cs__film-overlay-meta span {
		align-items: flex-start;
	}
}

@media (max-width: 680px) {
	.tfp-cs__meta-strip {
		grid-template-columns: 1fr;
		gap: 0;
		padding-block: 40px;
	}

	.tfp-cs__meta-item,
	.tfp-cs__meta-item:nth-child(even),
	.tfp-cs__meta-item:nth-child(5) {
		padding: 24px 0;
		border-right: 0;
		border-bottom: 1px solid var(--tfp-line);
	}

	.tfp-cs__meta-item:first-child {
		padding-top: 0;
	}

	.tfp-cs__meta-item:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.tfp-cs__steps {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.tfp-cs__step,
	.tfp-cs__step:nth-child(odd) {
		padding-inline: 0;
		border-right: 0;
	}

	.tfp-cs__film-frame {
		aspect-ratio: auto;
		min-height: 440px;
	}

	.tfp-cs__play-rings {
		width: 120px;
		height: 120px;
	}

	.tfp-cs__play-ring--inner {
		inset: 15px;
	}

	.tfp-cs__play-disc {
		width: 68px;
		height: 68px;
	}

	.tfp-cs__play-triangle {
		border-top-width: 12px;
		border-bottom-width: 12px;
		border-left-width: 19px;
		margin-left: 5px;
	}

	.tfp-cs__workflow {
		padding: 24px 20px;
	}

	.tfp-cs__workflow-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.tfp-cs__flow-chain {
		grid-template-columns: 1fr;
	}

	.tfp-cs__arch {
		grid-template-columns: 1fr;
	}

	.tfp-cs__built-with {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.tfp-cs__small-stats {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tfp-cs__small-stat,
	.tfp-cs__small-stat:first-child,
	.tfp-cs__small-stat:last-child {
		padding-inline: 0;
		border-right: 0;
	}

	.tfp-cs__card--import,
	.tfp-cs__card--filter,
	.tfp-cs__card--track {
		padding: 20px;
	}

	.tfp-cs__card-stats {
		grid-template-columns: 1fr;
	}

	.tfp-cs__card-filter-foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.tfp-cs__card-filter-foot > p {
		max-width: none;
		text-align: left;
	}

	.tfp-cs__card-track-head {
		flex-wrap: wrap;
	}

	.tfp-cs__card-track-question {
		flex-wrap: wrap;
		padding: 18px;
	}

	.tfp-cs__shift-row {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.tfp-cs__shift-row strong {
		width: 100%;
	}

	.tfp-cs__next-actions {
		flex-direction: column;
		align-items: flex-start;
	}

	.tfp-cs__footer-top {
		flex-direction: column;
	}

	.tfp-cs__footer-cols {
		gap: 48px;
	}

	.tfp-cs__footer-baseline {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

@media (max-width: 460px) {
	.tfp-cs__hero-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.tfp-cs__film-frame {
		min-height: 380px;
	}

	.tfp-cs__fig-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.tfp-cs__specs {
		grid-template-columns: 1fr;
	}

	.tfp-cs__spec:nth-child(even) {
		padding-left: 0;
	}
}