/* FLASK Research Area — mobile-first */

.flask-research {
	--ink: #1c1c1a;
	--mute: #6a6963;
	--paper: #f2f0eb;
	--card: #e4e0dc;
	--forest: #2e4b4a;
	--snow: #f7f8f3;
	background: var(--paper);
	color: var(--ink);
	font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* Hero — Frame 23 */
.flask-research__hero {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	padding: 24px 20px;
	gap: 24px;
	background: var(--paper);
	box-sizing: border-box;
}

.flask-research__hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.flask-research__hero-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.flask-research__hero-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
}

.flask-research__hero .flask-research__kicker {
	margin: 0;
	width: 100%;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #2e4b4a;
}

.flask-research__hero .flask-research__title {
	margin: 0;
	width: 100%;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-style: normal;
	font-weight: 300;
	font-size: 32px;
	line-height: 39px;
	letter-spacing: normal;
	color: #1c1c1a;
}

.flask-research__hero .flask-research__lead {
	margin: 0;
	width: 100%;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
	color: #1c1c1a;
}

.flask-research__badge {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 19px 31px 19px 18px;
	gap: 10px;
	background: #2e4b4a;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	color: #f7f8f3;
}

.flask-research__media {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

.flask-research__media img,
.flask-research__media-placeholder {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
	background: #e8e6e0;
}

.flask-research__media-placeholder svg {
	display: block;
	width: 100%;
	height: 260px;
}

.flask-research__caption {
	margin: 0;
	width: 100%;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #1c1c1a;
}

.flask-research__section {
	padding: 28px 20px;
	border-top: 1px solid rgba(28, 28, 26, 0.1);
}

.flask-research__kicker {
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #2e4b4a;
}

.flask-research__title {
	margin: 0 0 16px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 32px;
	font-weight: 300;
	line-height: 39px;
	color: #1c1c1a;
}

.flask-research__lead {
	margin: 0 0 20px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	color: #1c1c1a;
}

.flask-research__section-title {
	margin: 0 0 20px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 24px;
	font-weight: 300;
	line-height: 31px;
	letter-spacing: 0.02em;
}

/* Frame 76 — Area Scope + Materials stack */
.flask-research__stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 48px 20px;
	gap: 24px;
	background: #f2f0eb;
	box-sizing: border-box;
}

.flask-research__scope,
.flask-research__materials {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: 24px;
}

.flask-research__scope-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 0 0 24px;
	width: 100%;
	box-sizing: border-box;
}

.flask-research__scope-title {
	margin: 0;
	width: 100%;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 300;
	font-size: 24px;
	line-height: 31px;
	letter-spacing: 0.02em;
	color: #1c1c1a;
}

.flask-research__cover-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
	border-top: 1px solid #d6d3cb;
}

.flask-research__cover-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 31px;
	width: 100%;
	padding-bottom: 24px;
	border-bottom: 1px solid #d6d3cb;
	box-sizing: border-box;
}

.flask-research__cover-num {
	flex: 0 0 auto;
	width: 16px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 400;
	font-size: 12px;
	line-height: 26px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #2e4b4a;
}

.flask-research__cover-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.flask-research__cover-title {
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 400;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #1c1c1a;
}

.flask-research__cover-desc {
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
	color: #1c1c1a;
}

/* Materials */
.flask-research__materials-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 24px 0;
	width: 100%;
	box-sizing: border-box;
}

.flask-research__materials-title {
	margin: 0;
	width: 100%;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 300;
	font-size: 32px;
	line-height: 39px;
	color: #1c1c1a;
}

.flask-research__material-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.flask-research__material-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
	padding: 0 29px 0 0;
	background: #f7f8f3;
	color: inherit;
	text-decoration: none;
}

.flask-research__material-bar {
	flex: 0 0 6px;
	width: 6px;
	align-self: stretch;
	background: #4a5a6b;
}

.flask-research__material-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 24px 0;
}

.flask-research__material-top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.flask-research__material-cas {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #4a5a6b;
}

.flask-research__material-title {
	display: block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 300;
	font-size: 24px;
	line-height: 31px;
	letter-spacing: 0.02em;
	color: #1c1c1a;
}

.flask-research__material-docs {
	display: block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 300;
	font-size: 14px;
	line-height: 24px;
	color: #1c1c1a;
}

.flask-research__material-lot {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #1c1c1a;
}

.flask-research__material-foot {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 12px;
}

.flask-research__material-cta {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: auto;
}

.flask-research__material-cta-label {
	display: none;
}

.flask-research__material-arrow,
.flask-research__outline-arrow {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.flask-research__empty {
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 14px;
	line-height: 24px;
	color: #1c1c1a;
}

.flask-research__outline-cta {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 16px 17px 16px 16px;
	border: 1px solid #1c1c1a;
	background: transparent;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #1c1c1a;
	text-decoration: none;
}

.flask-research__outline-cta:hover {
	background: #1c1c1a;
	color: #f7f8f3;
}

.flask-research__outline-cta:hover path {
	stroke: #f7f8f3;
}

/* Frame 89 — How to read a record */
.flask-research__dossier {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: 32px 14px;
	gap: 24px;
	background: #e3e1da;
	border-top: none;
}

.flask-research__dossier-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	max-width: 350px;
}

.flask-research__dossier-title {
	margin: 0;
	width: 100%;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 300;
	font-size: 24px;
	line-height: 31px;
	letter-spacing: 0.02em;
	color: #1c1c1a;
}

.flask-research__dossier-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
	max-width: 350px;
}

.flask-research__dossier-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 31px;
	width: 100%;
	padding: 0;
	border: none;
}

.flask-research__dossier-num {
	flex: 0 0 auto;
	width: 16px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 400;
	font-size: 12px;
	line-height: 26px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #2e4b4a;
}

.flask-research__dossier-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.flask-research__dossier-label {
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 400;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #1c1c1a;
}

.flask-research__dossier-desc {
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
	color: #1c1c1a;
}

.flask-research__dossier-cta {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 350px;
	min-height: 52px;
	padding: 16px 17px 16px 16px;
	background: #1c1c1a;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #f7f8f3;
	text-decoration: none;
}

.flask-research__dossier-cta:hover {
	background: #2e4b4a;
	color: #f7f8f3;
}

.flask-research__dossier-arrow {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

/* Frame 79 — Related documents */
.flask-research__related {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
	padding: 48px 20px;
	gap: 48px;
	background: #f2f0eb;
}

.flask-research__related-kicker {
	margin: 0;
	width: 100%;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #1c1c1a;
}

.flask-research__related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	border-top: 1px solid #d6d3cb;
	border-bottom: 1px solid #d6d3cb;
}

.flask-research__related-list li {
	width: 100%;
	padding: 16px 0;
	border-bottom: 1px solid #d6d3cb;
	box-sizing: border-box;
}

.flask-research__related-list li:last-child {
	border-bottom: none;
}

.flask-research__related-link {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 24px;
	padding: 0;
	border: none;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 300;
	font-size: 14px;
	line-height: 24px;
	text-transform: none;
	letter-spacing: normal;
	color: #1c1c1a;
	text-decoration: none;
}

.flask-research__related-label {
	flex: 1 1 auto;
	min-width: 0;
}

.flask-research__related-arrow {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.flask-research__related-link:hover {
	color: #2e4b4a;
}

.flask-research__related-link:hover path {
	stroke: #2e4b4a;
}

@media (min-width: 768px) {
	.flask-research__hero,
	.flask-research__stack,
	.flask-research__dossier,
	.flask-research__related,
	.flask-research__section {
		max-width: 390px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Desktop Research Area — Figma 03 Template HIFI (≥1025). Mobile + 768 stay. */
@media (min-width: 1025px) {
	.flask-research {
		width: 100%;
		max-width: none;
		background: #f2f0eb;
	}

	.flask-research__hero,
	.flask-research__stack,
	.flask-research__scope,
	.flask-research__materials,
	.flask-research__dossier,
	.flask-research__related,
	.flask-research__section {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.flask-research__hero {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		box-sizing: border-box;
		width: 100%;
		max-width: 1440px;
		min-height: 520px;
		margin: 0 auto;
		padding: 88px 64px 52px;
		gap: 0;
	}

	.flask-research__hero-main {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		gap: 92px;
		width: 668px;
		max-width: 668px;
		min-height: 380px;
	}

	.flask-research__hero-copy {
		gap: 16px;
		width: 100%;
	}

	.flask-research__hero-heading {
		gap: 8px;
	}

	.flask-research__hero .flask-research__title {
		font-size: 64px;
		line-height: 69px;
	}

	.flask-research__hero .flask-research__lead {
		max-width: 560px;
		font-size: 16px;
		line-height: 28px;
	}

	.flask-research__badge {
		width: 360px;
		justify-content: flex-start;
		text-align: left;
		padding: 19px 18px;
	}

	.flask-research__media {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		width: 534px;
		max-width: 534px;
	}

	.flask-research__media img,
	.flask-research__media-placeholder,
	.flask-research__media-placeholder svg {
		width: 534px;
		height: 348px;
	}

	.flask-research__stack {
		display: contents;
	}

	.flask-research__scope {
		box-sizing: border-box;
		width: 100%;
		padding: 48px 64px;
		gap: 48px;
		background: #f7f8f3;
	}

	.flask-research__scope-head {
		gap: 8px;
		padding: 0;
		max-width: 1312px;
		margin: 0 auto;
	}

	.flask-research__scope-title {
		font-size: 48px;
		line-height: 56px;
		letter-spacing: 0;
	}

	.flask-research__cover-list {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 24px;
		width: 100%;
		max-width: 1312px;
		margin: 0 auto;
		border-top: 0;
	}

	.flask-research__cover-item {
		flex: 0 1 333px;
		width: 333px;
		max-width: 333px;
		gap: 32px;
		padding: 16px 0 0;
		border-bottom: 0;
		border-top: 1px solid #2e4b4a;
	}

	.flask-research__cover-body {
		gap: 8px;
		width: 285px;
	}

	.flask-research__cover-desc {
		font-size: 14px;
		line-height: 24px;
	}

	.flask-research__materials {
		box-sizing: border-box;
		width: 100%;
		padding: 64px;
		gap: 24px;
		background: #f2f0eb;
	}

	.flask-research__materials-head {
		gap: 8px;
		padding: 0;
		max-width: 1312px;
	}

	.flask-research__materials-title {
		font-size: 48px;
		line-height: 56px;
	}

	.flask-research__material-list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 20px;
		max-width: 1312px;
	}

	.flask-research__material-list > li {
		flex: 0 0 424px;
		width: 424px;
		max-width: 424px;
	}

	.flask-research__material-card {
		flex-direction: row;
		height: 300px;
		padding: 0;
	}

	.flask-research__material-body {
		justify-content: flex-start;
		gap: 16px;
		padding: 32px 36px 32px 22px;
	}

	.flask-research__material-cas {
		color: #2e4b4a;
	}

	.flask-research__material-foot {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		margin-top: auto;
		padding-top: 16px;
		border-top: 1px solid #6b6862;
	}

	.flask-research__material-cta {
		order: 1;
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-left: 0;
	}

	.flask-research__material-cta-label {
		display: inline;
		font-family: "IBM Plex Mono", ui-monospace, monospace;
		font-weight: 400;
		font-size: 12px;
		line-height: 16px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #1c1c1a;
	}

	.flask-research__material-lot {
		order: 2;
		color: #2e4b4a;
	}

	.flask-research__material-arrow path {
		stroke: #2e4b4a;
	}

	.flask-research__outline-cta {
		display: none;
	}

	.flask-research__dossier {
		align-items: flex-start;
		box-sizing: border-box;
		width: 100%;
		padding: 64px;
		gap: 48px;
		background: #e3e1da;
	}

	.flask-research__dossier-head,
	.flask-research__dossier-list,
	.flask-research__dossier-cta {
		max-width: none;
	}

	.flask-research__dossier-head {
		gap: 8px;
		width: 864px;
		max-width: 864px;
	}

	.flask-research__dossier-title {
		font-size: 48px;
		line-height: 56px;
		letter-spacing: 0;
	}

	.flask-research__dossier-list {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 24px;
		width: 100%;
		max-width: 1312px;
	}

	.flask-research__dossier-item {
		flex: 0 1 333px;
		width: 333px;
		max-width: 333px;
		gap: 32px;
		padding-top: 16px;
		border-top: 1px solid #2e4b4a;
	}

	.flask-research__dossier-body {
		gap: 8px;
		width: 285px;
	}

	.flask-research__dossier-desc {
		font-size: 16px;
		line-height: 28px;
	}

	.flask-research__dossier-cta {
		width: 270px;
		max-width: 270px;
		align-self: center;
	}

	.flask-research__related {
		box-sizing: border-box;
		width: 100%;
		min-height: 300px;
		padding: 64px 64px 101px;
		gap: 38px;
		background: #f7f8f3;
	}

	.flask-research__related-kicker {
		max-width: 1312px;
		margin: 0 auto;
		width: 100%;
	}

	.flask-research__related-list {
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		gap: 32px;
		width: 100%;
		max-width: 1312px;
		margin: 0 auto;
		border-top: 0;
		border-bottom: 0;
	}

	.flask-research__related-list li {
		width: 392px;
		max-width: 392px;
		padding: 0;
		border-bottom: 0;
	}

	.flask-research__related-link {
		box-sizing: border-box;
		min-height: 81px;
		padding: 27px 0;
		border-top: 1px solid #1c1c1a;
		border-bottom: 1px solid #1c1c1a;
		font-size: 18px;
		line-height: 26px;
		font-weight: 300;
	}

	.flask-research__related-arrow path {
		stroke: #2e4b4a;
	}
}