/*
 * LP の機能マップ（#features）・ファーストビューのボタン・ログインのリンク。
 * 設計書: fusegu-kun V2/lp-materials/2026-10-21-lp-feature-map-design.md
 * 大きさは今のLPと同じ換算：1921px以上は px、769〜1920px は 1920px 基準の vw、768px以下は 375px 基準の vw。
 * --u が「1px 相当」で、各寸法は calc(数字 * var(--u)) で書く。
 */
:root {
	--u: 1px;
	--lp-teal: #13b5b1;
	--lp-teal-dark: #0f9d99;
	--lp-teal-pale: #e7f6f6;
	--lp-orange: #ff9a29;
	--lp-text: #424343;
}

@media screen and (min-width: 769px) and (max-width: 1920px) {
	:root { --u: calc(100vw / 1920); }
}

@media screen and (max-width: 768px) {
	:root { --u: calc(100vw / 375); }
}

/*----------------------------------------------------
 機能マップ
----------------------------------------------------*/
.lp-features {
	padding: calc(110 * var(--u)) 0 calc(120 * var(--u));
	background: var(--lp-teal-pale);
	color: var(--lp-text);
}

.lp-features .inner {
	max-width: calc(1201 * var(--u));
}

.lp-features-head {
	text-align: center;
	margin: 0 0 calc(48 * var(--u));
}

.lp-features-head h2 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lp-features-head h2 small {
	font-family: 'Bebas Neue', cursive;
	font-size: calc(30 * var(--u));
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.025em;
	color: var(--lp-teal);
	margin: 0 0 calc(11 * var(--u));
}

.lp-features-head h2 b {
	font-size: calc(54 * var(--u));
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
}

.lp-features-lead {
	font-size: calc(20 * var(--u));
	font-weight: 500;
	line-height: 1.6;
	margin: calc(18 * var(--u)) 0 0;
}

/* タブ */
.lp-tablist {
	display: none;
}

.lp-features.is-ready .lp-tablist {
	display: flex;
	gap: calc(8 * var(--u));
}

.lp-tablist [role="tab"] {
	flex: 1 1 0;
	min-height: calc(64 * var(--u));
	padding: calc(10 * var(--u)) calc(8 * var(--u));
	border: 0;
	border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0;
	background: #fff;
	color: var(--lp-text);
	font-family: inherit;
	font-size: calc(19 * var(--u));
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.lp-tablist [role="tab"]:hover {
	color: var(--lp-teal);
}

.lp-tablist [role="tab"][aria-selected="true"] {
	background: var(--lp-teal);
	color: #fff;
}

.lp-tablist [role="tab"]:focus-visible,
.lp-more-toggle:focus-visible,
.lp-btn:focus-visible {
	outline: 2px solid var(--lp-orange);
	outline-offset: 3px;
}

/* パネル（JS が動かないときは全部縦に並ぶ） */
.lp-panel {
	display: flex;
	gap: calc(48 * var(--u));
	background: #fff;
	border-radius: calc(12 * var(--u));
	box-shadow: rgba(0, 0, 0, 0.08) 0 5px 15px 0;
	padding: calc(44 * var(--u)) calc(56 * var(--u));
	margin: 0 0 calc(24 * var(--u));
}

.lp-features.is-ready .lp-panel {
	border-top: calc(4 * var(--u)) solid var(--lp-teal);
	border-radius: 0 0 calc(12 * var(--u)) calc(12 * var(--u));
	margin: 0;
}

.lp-features.is-ready .lp-panel[hidden] {
	display: none;
}

.lp-features.is-ready .lp-panel-title {
	display: none;
}

.lp-panel-body {
	flex: 1 1 auto;
	min-width: 0;
}

.lp-panel-title {
	font-size: calc(28 * var(--u));
	font-weight: 700;
	color: var(--lp-teal);
	margin: 0 0 calc(12 * var(--u));
}

.lp-panel-lead {
	font-size: calc(24 * var(--u));
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 calc(22 * var(--u));
}

.lp-highlights {
	list-style: none;
	margin: 0 0 calc(22 * var(--u));
	padding: 0;
}

.lp-highlights li {
	position: relative;
	padding: calc(10 * var(--u)) 0 calc(10 * var(--u)) calc(36 * var(--u));
	font-size: calc(18 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	border-bottom: 1px solid #e3eeee;
}

.lp-highlights li::before {
	content: "";
	position: absolute;
	left: calc(4 * var(--u));
	top: calc(19 * var(--u));
	width: calc(16 * var(--u));
	height: calc(8 * var(--u));
	border-left: calc(3 * var(--u)) solid var(--lp-teal);
	border-bottom: calc(3 * var(--u)) solid var(--lp-teal);
	transform: rotate(-45deg);
}

/* ほかの機能 */
.lp-more-toggle {
	display: none;
}

.lp-features.is-ready .lp-more-toggle {
	display: inline-flex;
	align-items: center;
	gap: calc(10 * var(--u));
	padding: calc(6 * var(--u)) 0;
	border: 0;
	background: none;
	color: var(--lp-teal-dark);
	font-family: inherit;
	font-size: calc(17 * var(--u));
	font-weight: 700;
	cursor: pointer;
}

.lp-features.is-ready .lp-more-toggle::after {
	content: "";
	width: calc(9 * var(--u));
	height: calc(9 * var(--u));
	border-right: calc(2 * var(--u)) solid currentColor;
	border-bottom: calc(2 * var(--u)) solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s;
}

.lp-features.is-ready .lp-more-toggle[aria-expanded="true"]::after {
	transform: translateY(25%) rotate(-135deg);
}

.lp-more {
	list-style: none;
	margin: calc(10 * var(--u)) 0 0;
	padding: 0;
	columns: 2;
	column-gap: calc(32 * var(--u));
}

.lp-features.is-ready .lp-more[hidden] {
	display: none;
}

.lp-more li {
	position: relative;
	break-inside: avoid;
	padding: calc(5 * var(--u)) 0 calc(5 * var(--u)) calc(18 * var(--u));
	font-size: calc(15 * var(--u));
	line-height: 1.6;
}

.lp-more li::before {
	content: "";
	position: absolute;
	left: calc(2 * var(--u));
	top: calc(15 * var(--u));
	width: calc(6 * var(--u));
	height: calc(6 * var(--u));
	border-radius: 50%;
	background: var(--lp-teal);
}

/* バッジ */
.lp-badge {
	display: inline-block;
	margin: 0 0 0 calc(4 * var(--u));
	padding: calc(1 * var(--u)) calc(8 * var(--u));
	border-radius: calc(10 * var(--u));
	font-size: max(11px, calc(12 * var(--u)));
	font-weight: 700;
	line-height: 1.6;
	vertical-align: calc(2 * var(--u));
	white-space: nowrap;
}

.lp-badge--beta,
.lp-badge--req {
	background: #eceff1;
	color: #555;
}

.lp-badge--plan {
	border: 1px solid var(--lp-orange);
	color: #b35900;
	background: #fff;
}

.lp-note {
	margin: calc(16 * var(--u)) 0 0;
	font-size: max(12px, calc(13 * var(--u)));
	line-height: 1.6;
	color: #5f5f5f;
}

/* 申し込みのボタン（機能マップ・ファーストビュー共通） */
.lp-panel-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(12 * var(--u)) calc(16 * var(--u));
	margin: calc(30 * var(--u)) 0 0;
}

.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(240 * var(--u));
	height: calc(54 * var(--u));
	padding: 0 calc(28 * var(--u));
	border-radius: 50px;
	font-size: calc(18 * var(--u));
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s;
	box-sizing: border-box;
}

.lp-btn:hover {
	opacity: 0.85;
}

.lp-btn--primary,
.lp-btn--primary:visited {
	background: var(--lp-orange);
	color: #fff;
}

.lp-btn--secondary,
.lp-btn--secondary:visited {
	background: #fff;
	color: var(--lp-text);
	border: 2px solid var(--lp-teal);
}

.lp-cta-note {
	flex: 1 0 100%;
	margin: 0;
	font-size: calc(14 * var(--u));
	line-height: 1.6;
	color: #6b6b6b;
}

/* 製品画面 */
.lp-shot {
	flex: 0 0 auto;
	margin: 0;
	align-self: flex-start;
}

.lp-shot-images {
	display: flex;
	gap: calc(14 * var(--u));
	align-items: flex-start;
}

.lp-shot-images img {
	display: block;
	width: calc(214 * var(--u));
	height: auto;
	border: 1px solid #dfe6e6;
	border-radius: calc(8 * var(--u));
	box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px 0;
}

.lp-shot figcaption {
	margin: calc(10 * var(--u)) 0 0;
	font-size: calc(12 * var(--u));
	color: #6b6b6b;
	text-align: center;
}

/*----------------------------------------------------
 スマホ（768px以下）
----------------------------------------------------*/
@media screen and (max-width: 768px) {
	.lp-features {
		padding: calc(60 * var(--u)) 0 calc(64 * var(--u));
	}

	.lp-features-head {
		margin: 0 0 calc(24 * var(--u));
	}

	.lp-features-head h2 small {
		font-size: calc(20 * var(--u));
		margin: 0 0 calc(4 * var(--u));
	}

	.lp-features-head h2 b {
		font-size: calc(26 * var(--u));
		letter-spacing: 0.05em;
	}

	.lp-features-lead {
		font-size: calc(14 * var(--u));
		margin: calc(10 * var(--u)) 0 0;
	}

	/* タブは3＋2の2段。横スクロールにしない */
	.lp-features.is-ready .lp-tablist {
		flex-wrap: wrap;
		gap: calc(6 * var(--u));
		margin: 0 0 calc(6 * var(--u));
	}

	.lp-tablist [role="tab"] {
		flex: 1 1 calc(30% - 6 * var(--u));
		min-height: calc(46 * var(--u));
		padding: calc(6 * var(--u)) calc(4 * var(--u));
		border-radius: calc(8 * var(--u));
		font-size: calc(12.5 * var(--u));
	}

	.lp-panel {
		flex-direction: column;
		gap: calc(20 * var(--u));
		padding: calc(22 * var(--u)) calc(18 * var(--u));
		border-radius: calc(10 * var(--u));
	}

	.lp-features.is-ready .lp-panel {
		border-radius: calc(10 * var(--u));
	}

	.lp-panel-title {
		font-size: calc(20 * var(--u));
	}

	.lp-panel-lead {
		font-size: calc(16 * var(--u));
		margin: 0 0 calc(12 * var(--u));
	}

	.lp-highlights li {
		padding: calc(8 * var(--u)) 0 calc(8 * var(--u)) calc(26 * var(--u));
		font-size: calc(14 * var(--u));
	}

	.lp-highlights li::before {
		left: calc(3 * var(--u));
		top: calc(15 * var(--u));
		width: calc(12 * var(--u));
		height: calc(6 * var(--u));
	}

	.lp-features.is-ready .lp-more-toggle {
		font-size: calc(14 * var(--u));
	}

	.lp-more {
		columns: 1;
	}

	.lp-more li {
		font-size: calc(13 * var(--u));
		padding-left: calc(16 * var(--u));
	}

	.lp-more li::before {
		top: calc(13 * var(--u));
		width: calc(5 * var(--u));
		height: calc(5 * var(--u));
	}

	.lp-badge {
		font-size: calc(10.5 * var(--u));
		padding: 0 calc(6 * var(--u));
	}

	.lp-note {
		font-size: calc(11.5 * var(--u));
	}

	.lp-panel-cta {
		flex-direction: column;
		align-items: stretch;
		gap: calc(10 * var(--u));
		margin: calc(20 * var(--u)) 0 0;
	}

	.lp-btn {
		min-width: 0;
		width: 100%;
		height: calc(48 * var(--u));
		font-size: calc(15 * var(--u));
	}

	.lp-cta-note {
		font-size: calc(11.5 * var(--u));
		text-align: center;
	}

	.lp-shot {
		align-self: center;
	}

	.lp-shot-images img {
		width: calc(150 * var(--u));
	}

	.lp-shot figcaption {
		font-size: calc(10.5 * var(--u));
	}
}

/*----------------------------------------------------
 ファーストビュー直下のボタン
----------------------------------------------------*/
.lp-hero-cta {
	position: relative;
	z-index: 1;
	margin: calc(-64 * var(--u)) auto calc(48 * var(--u));
	text-align: center;
}

.lp-hero-cta-buttons {
	display: flex;
	justify-content: center;
	gap: calc(20 * var(--u));
}

.lp-hero-cta .lp-btn {
	min-width: calc(300 * var(--u));
	height: calc(64 * var(--u));
	font-size: calc(21 * var(--u));
	box-shadow: rgba(0, 0, 0, 0.15) 0 5px 15px 0;
}

.lp-hero-cta .lp-cta-note {
	margin: calc(12 * var(--u)) 0 0;
	text-align: center;
}

/* 申し込み（cvArea）のボタンの下の注記。背景がティールなので白 */
.lp-cta-note--cv {
	margin: calc(16 * var(--u)) 0 0;
	color: #fff;
}

@media screen and (max-width: 768px) {
	.lp-hero-cta {
		margin: calc(-30 * var(--u)) auto calc(32 * var(--u));
		padding: 0 calc(18 * var(--u));
	}

	.lp-hero-cta-buttons {
		gap: calc(10 * var(--u));
	}

	.lp-hero-cta .lp-btn {
		flex: 1 1 0;
		min-width: 0;
		height: calc(50 * var(--u));
		padding: 0 calc(8 * var(--u));
		font-size: calc(15 * var(--u));
	}

	.lp-cta-note--cv {
		text-align: center;
	}
}


/* 横長の製品画面（1200×750） */
.lp-shot--wide {
	width: calc(470 * var(--u));
}

.lp-shot--wide img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #dfe6e6;
	border-radius: calc(8 * var(--u));
	box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px 0;
}

@media screen and (max-width: 768px) {
	.lp-shot--wide {
		width: 100%;
	}
}

/* 事例ページなどの /#service で来たとき、固定ヘッダーに見出しが隠れないように */
.lp-anchor {
	display: block;
	height: 0;
	scroll-margin-top: 90px;
}

/* セキュリティ教育：教材の題材（一例） */
.lp-topics {
	margin: 0 0 calc(22 * var(--u));
	padding: calc(18 * var(--u)) calc(20 * var(--u));
	border-radius: calc(10 * var(--u));
	background: var(--lp-teal-pale);
}

.lp-topics-title {
	margin: 0 0 calc(10 * var(--u));
	font-size: calc(16 * var(--u));
	font-weight: 700;
}

.lp-topics-group + .lp-topics-group {
	margin-top: calc(12 * var(--u));
}

.lp-topics-label {
	margin: 0 0 calc(6 * var(--u));
	font-size: calc(14 * var(--u));
	font-weight: 700;
	color: var(--lp-teal-dark);
}

.lp-topics-label span {
	margin-left: calc(8 * var(--u));
	font-weight: 500;
	color: #5f5f5f;
	font-size: max(11px, calc(12 * var(--u)));
}

.lp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: calc(6 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-chips li {
	padding: calc(3 * var(--u)) calc(10 * var(--u));
	border: 1px solid #c9e6e5;
	border-radius: 50px;
	background: #fff;
	font-size: max(11px, calc(13 * var(--u)));
	line-height: 1.5;
}

@media screen and (max-width: 768px) {
	.lp-topics {
		padding: calc(14 * var(--u));
	}

	.lp-topics-title {
		font-size: calc(14 * var(--u));
	}

	.lp-topics-label {
		font-size: calc(12.5 * var(--u));
	}

	.lp-chips li {
		font-size: calc(11.5 * var(--u));
	}
}

/* 分析・レポート：訓練結果の画面を3枚ずらして重ねる */
.lp-stack {
	width: calc(470 * var(--u));
}

.lp-stack-frame {
	position: relative;
	aspect-ratio: 4 / 3;
}

.lp-stack-item {
	position: absolute;
	width: 82%;
	height: auto;
	border: 1px solid #dfe6e6;
	border-radius: calc(8 * var(--u));
	box-shadow: rgba(0, 0, 0, 0.14) 0 6px 18px 0;
	background: #fff;
}

.lp-stack-item--1 { top: 0; left: 0; }
.lp-stack-item--2 { top: 15.5%; left: 9%; }
.lp-stack-item--3 { top: 31%; left: 18%; }

/* セキュリティ教育：マンガ3種類と動画2本を1つの枠でずらして重ね、文章の高さに合わせる。
   位置は枠の幅・高さに対する割合（PC は文字も vw で縮むので、幅と高さの比はほぼ一定） */
.lp-panel--media .lp-collage {
	align-self: stretch;
}

.lp-collage {
	display: flex;
	flex-direction: column;
	width: calc(470 * var(--u));
}

.lp-collage-frame {
	position: relative;
	flex: 1 1 auto;
	min-height: calc(560 * var(--u));
}

.lp-collage-item {
	position: absolute;
	height: auto;
	border: 1px solid #dfe6e6;
	border-radius: calc(6 * var(--u));
	box-shadow: rgba(0, 0, 0, 0.16) 0 6px 18px 0;
	background: #fff;
}

.lp-collage-item--m1 { width: 50%; left: 0; top: 0; transform: rotate(-4deg); z-index: 1; }
.lp-collage-item--m2 { width: 50%; right: 0; top: 5%; transform: rotate(4deg); z-index: 2; }
.lp-collage-item--v1 { width: 82%; left: 3%; top: 35%; z-index: 3; }
.lp-collage-item--m3 { width: 46%; right: 1%; top: 49%; transform: rotate(3deg); z-index: 2; }
.lp-collage-item--v2 { width: 82%; left: 0; bottom: 3%; z-index: 4; }

.lp-collage figcaption {
	margin-top: calc(8 * var(--u));
}

@media screen and (max-width: 768px) {
	.lp-stack,
	.lp-collage {
		width: 100%;
	}

	.lp-collage-frame {
		flex: none;
		height: calc(580 * var(--u));
		min-height: 0;
	}
}

/*----------------------------------------------------
 訓練メールの種類：QRコード訓練（Emotet訓練から差し替え）
----------------------------------------------------*/
.lp-qr {
	display: flex;
	align-items: center;
	gap: calc(28 * var(--u));
	max-width: calc(1200 * var(--u));
	margin: 0 auto;
}

.lp-qr-mail {
	flex: 0 0 46%;
}

.lp-qr-shot {
	position: relative;
	margin: 0;
	border: 1px solid #e3e7ea;
	border-radius: calc(10 * var(--u));
	background: #fff;
	overflow: hidden;
}

.lp-qr-shot img {
	display: block;
	width: 100%;
	height: auto;
}

/* 画像の中の QR コード（左 4.4%・上 32.3%・幅 29.3%・高さ 53.5%）を丸く囲む */
.lp-qr-ring {
	position: absolute;
	left: 2.4%;
	top: 28.5%;
	width: 33.3%;
	height: 61%;
	border: calc(5 * var(--u)) solid #f4a259;
	border-radius: calc(18 * var(--u));
	box-sizing: border-box;
}

.lp-qr-sample {
	position: absolute;
	left: 38%;
	top: 52%;
	padding: calc(3 * var(--u)) calc(12 * var(--u));
	border-radius: 50px;
	background: #6b6b6b;
	color: #fff;
	font-size: max(11px, calc(14 * var(--u)));
	font-weight: 700;
}

.lp-qr-text {
	margin: calc(22 * var(--u)) 0 0;
	padding: calc(26 * var(--u)) calc(28 * var(--u));
	border-radius: calc(20 * var(--u));
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.1) 0 5px 15px 0;
}

.lp-qr-black,
.lp-qr-green {
	font-size: calc(16 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.05em;
}

.lp-qr-black {
	margin: 0 0 calc(14 * var(--u));
	color: var(--lp-text);
}

.lp-qr-green {
	margin: 0;
	color: #13b5b1;
}

/* 今の Emotet の画像と同じ、濃い灰色の二重の矢印 */
.lp-qr-arrow {
	position: relative;
	flex: 0 0 calc(100 * var(--u));
	height: calc(90 * var(--u));
}

.lp-qr-arrow::before,
.lp-qr-arrow::after {
	content: "";
	position: absolute;
	top: 0;
	width: 0;
	height: 0;
	border-top: calc(45 * var(--u)) solid transparent;
	border-bottom: calc(45 * var(--u)) solid transparent;
	border-left: calc(48 * var(--u)) solid #3d3d3d;
}

.lp-qr-arrow::before { left: 0; }
.lp-qr-arrow::after { left: calc(46 * var(--u)); }

.lp-qr-reveal {
	flex: 1 1 auto;
	margin: 0;
}

.lp-qr-reveal img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(10 * var(--u));
}

@media screen and (max-width: 768px) {
	.lp-qr {
		flex-direction: column;
		gap: calc(16 * var(--u));
		padding: 0 calc(4 * var(--u));
	}

	.lp-qr-mail {
		flex: none;
		width: 100%;
	}

	.lp-qr-text {
		margin-top: calc(14 * var(--u));
		padding: calc(18 * var(--u));
	}

	.lp-qr-black,
	.lp-qr-green {
		font-size: calc(13 * var(--u));
	}

	.lp-qr-arrow {
		flex: none;
		width: calc(60 * var(--u));
		height: calc(56 * var(--u));
		transform: rotate(90deg);
	}

	.lp-qr-arrow::before,
	.lp-qr-arrow::after {
		border-top-width: calc(26 * var(--u));
		border-bottom-width: calc(26 * var(--u));
		border-left-width: calc(28 * var(--u));
	}

	.lp-qr-arrow::after { left: calc(27 * var(--u)); }

	.lp-qr-reveal {
		flex: none;
		width: 100%;
	}
}

/* 旧サービス概要の目印。既存の #service の余白（style.css・style-vw.css）を打ち消す */
#service.lp-anchor {
	height: 0;
	margin: 0;
	padding: 0;
	background: none;
}

/* 「人を起点としたセキュリティ対策」は旧サービス概要の下の余白を前提にしていたので、その分を足す */
.lp-features + #sequrity {
	padding-top: calc(80 * var(--u));
}

@media screen and (max-width: 768px) {
	.lp-features + #sequrity {
		padding-top: calc(50 * var(--u));
	}
}

/*----------------------------------------------------
 最近のアップデート（ファーストビューのボタンの下の細い帯）
----------------------------------------------------*/
.lp-updates {
	display: flex;
	align-items: center;
	gap: calc(20 * var(--u));
	max-width: calc(1200 * var(--u));
	margin: 0 auto calc(56 * var(--u));
	padding: calc(14 * var(--u)) calc(24 * var(--u));
	border-radius: 50px;
	background: var(--lp-teal-pale);
	color: var(--lp-text);
	box-sizing: border-box;
}

.lp-updates-label {
	flex: 0 0 auto;
	margin: 0;
	padding: calc(4 * var(--u)) calc(14 * var(--u));
	border-radius: 50px;
	background: var(--lp-teal);
	color: #fff;
	font-size: max(11px, calc(14 * var(--u)));
	font-weight: 700;
	white-space: nowrap;
}

.lp-updates-list {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: calc(6 * var(--u)) calc(28 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-updates-list li {
	font-size: max(12px, calc(15 * var(--u)));
	font-weight: 500;
	line-height: 1.5;
}

.lp-updates-list time {
	margin-right: calc(8 * var(--u));
	font-weight: 700;
	color: var(--lp-teal-dark);
}

.lp-updates-more,
.lp-updates-more:visited {
	flex: 0 0 auto;
	font-size: max(11px, calc(13 * var(--u)));
	font-weight: 700;
	color: var(--lp-teal-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

@media screen and (max-width: 768px) {
	.lp-updates {
		flex-direction: column;
		align-items: flex-start;
		gap: calc(8 * var(--u));
		margin: 0 calc(18 * var(--u)) calc(36 * var(--u));
		padding: calc(14 * var(--u)) calc(16 * var(--u));
		border-radius: calc(12 * var(--u));
	}

	.lp-updates-list {
		flex-direction: column;
		gap: calc(4 * var(--u));
	}

	.lp-updates-list li {
		font-size: calc(12.5 * var(--u));
	}

	.lp-updates-more {
		align-self: flex-end;
	}
}