/**
 * Arlo Secure（安防方案）页样式 —— hk.arlo.com/en/pages/arlo-secure 视觉复刻。
 * 规格（颜色/字号/间距）取自目标站 Tailwind 类名实测值。
 * 命名前缀 sec-；断点与主题一致：768 / 1024，移动优先。
 * 依赖：main.css 的 CSS 变量（--arlo-container 等）。
 */

/* ---------- 通用 ---------- */
.sec-container {
	width: 100%;
	max-width: calc(var(--arlo-container) + 60px);
	margin: 0 auto;
	padding: 0 30px;
}

.sec-h2 {
	margin: 0;
	color: #262626;
	font-size: 28px;
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
}

.sec-badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
	padding: 3px 8px;
	border-radius: 6px;
	background: #28d;
	color: #fff;
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
}

/* 药丸按钮（Hero / Services CTA） */
.btn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 12.5px 32px;
	border-radius: 999px;
	font-size: 14px;
	line-height: 15px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-pill--white {
	background: #fff;
	color: #000;
}

.btn-pill--white:hover {
	color: #28d;
}

.btn-pill--ghost {
	border: 1px solid #fff;
	color: #fff;
	background: transparent;
}

.btn-pill--ghost:hover {
	color: #28d;
	border-color: #28d;
}

.btn-pill--blue-text {
	padding: 16px 45px;
	background: #fff;
	color: #28d;
	font-size: 16px;
	line-height: 18px;
}

.btn-pill--blue-text:hover {
	color: #1b5a8f;
}

/* 方案卡 CTA */
.btn-cta {
	display: inline-block;
	margin-top: 14px;
	padding: 9px 26px;
	border-radius: 999px;
	background: #1b5a8f;
	color: #fff;
	font-size: 15px;
	line-height: 24px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.btn-cta:hover {
	background: #307ab9;
	color: #fff;
}

/* ---------- Hero ---------- */
.sec-hero {
	background: linear-gradient(to right, #105085, #0b365d);
	color: #fff;
	overflow: hidden;
}

.sec-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 30px;
	min-height: 480px;
}

.sec-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 40px 0 26px;
	text-align: center;
}

.sec-hero__brand {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
}

.sec-hero__brand img {
	width: 32px;
	height: auto;
}

.sec-hero__title {
	margin: 0;
	max-width: 600px;
	font-size: 32px;
	line-height: 1;
	font-weight: 500;
}

.sec-hero__sub {
	margin: 0;
	max-width: 450px;
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
}

.sec-hero__actions {
	display: flex;
	flex-direction: row;
	gap: 16px;
	padding-top: 16px;
}

.sec-hero__media {
	display: flex;
	justify-content: center;
	padding-bottom: 10px;
}

.sec-hero__media video {
	width: 100%;
	max-width: 640px;
	height: auto;
}

/* ---------- 订阅方案 ---------- */
.sec-plans {
	background: #fff;
	padding-bottom: 36px;
	overflow: hidden;
}

.sec-plans__head {
	padding: 48px 0 40px;
	text-align: center;
}

.sec-plans__head .sec-h2 {
	max-width: 720px;
	margin: 0 auto 24px;
}

.sec-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.sec-toggle__label {
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	color: #757575;
	cursor: pointer;
	transition: color 0.2s ease;
}

.sec-toggle__label.is-active {
	color: #262626;
}

.sec-toggle__switch {
	position: relative;
	width: 64px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #4386d7;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.sec-toggle__switch.is-monthly {
	background: #115293;
}

.sec-toggle__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.3s ease;
}

.sec-toggle__switch.is-monthly .sec-toggle__knob {
	transform: translateX(32px);
}

.sec-plans__grid {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 840px;
	margin: 0 auto;
}

.sec-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #d1d1d1;
}

.sec-plan__ribbon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	margin: -37px -1px 0;
	border: 1px solid #28d;
	border-bottom: 0;
	border-radius: 15px 15px 0 0;
	background: #28d;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.sec-plan__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 24px 20px;
	border-bottom: 1px solid #d1d1d1;
	background: #eaf3fd;
	text-align: center;
}

.sec-plan__tagline {
	min-height: 40px;
	margin: 0;
	color: #595959;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
}

.sec-plan__name {
	margin: 0;
	color: #262626;
	font-size: 32px;
	line-height: 38px;
	font-weight: 600;
}

.sec-plan__pricing {
	padding: 32px;
}

.sec-plan__prices {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
}

.sec-plan__prices[hidden] {
	display: none;
}

.sec-plan__price {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 20px;
	text-align: center;
}

.sec-plan__price + .sec-plan__price {
	border-left: 1px solid #e5e5e5;
}

.sec-plan__cover {
	margin: 0 0 8px;
	color: #171717;
	font-size: 12px;
	line-height: 20px;
	font-weight: 500;
	white-space: nowrap;
}

.sec-plan__amount {
	min-height: 38px;
	margin: 0 0 2px;
	color: #171717;
	font-size: 32px;
	line-height: 38px;
	font-weight: 500;
}

.sec-plan__note {
	margin: 0 0 16px;
	color: #757575;
	font-size: 12px;
	line-height: 16px;
	white-space: nowrap;
}

.sec-plan__features {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
	padding: 25px;
	border-top: 1px solid #d1d1d1;
}

.sec-plan__features ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.sec-plan__features li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #404040;
	font-size: 14px;
	line-height: 24px;
}

.sec-plan__features li img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex: none;
}

.sec-plan__all {
	display: block;
	margin-top: 22px;
	color: #1f1f1f;
	font-size: 14px;
	line-height: 24px;
	font-weight: 450;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sec-plan__all:hover {
	color: #1b5a8f;
}

/* ---------- 高级功能轮播 ---------- */
.sec-services {
	background: #12477a;
	padding: 54px 0 60px;
	overflow: visible;
}

.sec-services__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-bottom: 40px;
}

.sec-services__title {
	margin: 0;
	color: #fff;
	font-size: 29px;
	line-height: 35px;
	font-weight: 500;
}

.sec-services .btn-pill {
	align-self: flex-start;
}

.sec-services .swiper {
	overflow: visible;
}

.sec-services .swiper-slide {
	height: auto;
	display: flex;
}

.sec-scard {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 15px;
	background: #fafbfa;
	box-shadow: 4px 4px 32px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}

.sec-scard__text {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	padding: 32px 24px 16px;
}

.sec-scard__text h3 {
	display: flex;
	align-items: center;
	margin: 0;
	color: #1d72ba;
	font-size: 20px;
	line-height: 26px;
	font-weight: 500;
}

.sec-scard__text h3 sup {
	margin-left: 2px;
	font-size: 12px;
}

.sec-scard__text p {
	margin: 0;
	color: #475467;
	font-size: 16px;
	line-height: 24px;
}

.sec-scard__media {
	position: relative;
	background: #eef1f4;
}

.sec-scard__media > img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* 视频卡（海报 + 播放/静音控制） */
.sec-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.sec-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sec-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.sec-video.is-playing .sec-video__poster {
	opacity: 0;
}

.sec-video__ctrl {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: flex;
	gap: 8px;
}

.sec-video__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #17233b;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.sec-video__btn:hover {
	color: #1b5a8f;
}

.sec-video__btn svg {
	width: 20px;
	height: 20px;
}

.sec-video:not(.is-playing) .icon-pause,
.sec-video:not(.is-playing) .icon-unmuted { display: none; }

.sec-video.is-playing .icon-play { display: none; }
.sec-video.is-playing:not(.is-unmuted) .icon-unmuted { display: none; }
.sec-video.is-playing.is-unmuted .icon-muted { display: none; }

.sec-services__nav {
	display: none;
	justify-content: center;
	gap: 16px;
	margin-top: 40px;
}

.sec-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.sec-arrow:hover {
	border-color: #1b5a8f;
	color: #1b5a8f;
}

.sec-arrow svg {
	width: 25px;
	height: 25px;
}

.sec-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.sec-arrow:disabled:hover {
	border-color: #fff;
	color: #fff;
}

/* ---------- 方案对比 ---------- */
.sec-compare {
	background: #fff;
	padding: 48px 0 56px;
}

.sec-compare__title {
	padding-bottom: 48px;
}

.sec-compare__table {
	max-width: 1180px;
	margin: 0 auto;
	border-top: 1px solid #d1d1d1;
}

.sec-compare__grid {
	display: grid;
	grid-template-columns: 44% 1fr 1fr;
}

.sec-compare__cell {
	border-top: 1px solid #d1d1d1;
	min-width: 0;
}

.sec-compare__grid--group .sec-compare__cell {
	border-top: 0;
}

.sec-compare__grid--group {
	border-top: 1px solid #d1d1d1;
}

/* 吸附列头（仅桌面） */
.sec-compare__sticky {
	display: none;
}

.sec-compare__group-title {
	display: flex;
	align-items: center;
	min-height: 64px;
	padding: 10px 12px 10px 24px;
	color: #262626;
	font-size: 18px;
	line-height: 20px;
	font-weight: 500;
	white-space: nowrap;
}

.sec-compare__feature {
	position: relative;
	display: flex;
	align-items: center;
	padding: 12px 8px 12px 24px;
	cursor: pointer;
}

.sec-compare__feature-name {
	margin: 0;
	color: #404040;
	font-size: 14px;
	line-height: 20px;
}

.sec-compare__feature-desc {
	margin: 2px 0 0;
	color: #878787;
	font-size: 12px;
	line-height: 16px;
}

.sec-compare__plus {
	display: none;
}

.sec-compare__check {
	display: flex;
	align-items: center;
	justify-content: center;
	border-left: 1px solid #d1d1d1;
	padding: 8px;
}

.sec-compare__check img {
	width: 21px;
	height: auto;
}

.sec-compare__row {
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.sec-compare__row:hover {
	background: #f4f9fd;
}

.sec-compare__row:hover .sec-compare__feature-name {
	color: #1b5a8f;
}

/* ---------- 详情弹窗 ---------- */
.sec-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: flex-end;
}

.sec-modal[hidden] {
	display: none;
}

.sec-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(7, 24, 40, 0.55);
}

.sec-modal__dialog {
	position: relative;
	width: 100%;
	max-height: 90vh;
	background: #f8fbff;
	border-top: 12px solid #12477a;
	border-radius: 12px 12px 0 0;
	overflow-y: auto;
	transform: translateY(0);
	animation: sec-modal-up 0.28s ease;
}

@keyframes sec-modal-up {
	from { transform: translateY(60px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.sec-modal__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #404040;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.sec-modal__close:hover {
	color: #115293;
}

.sec-modal__close svg {
	width: 20px;
	height: 20px;
}

.sec-modal__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 55px 30px 60px;
}

.sec-modal__group {
	margin: 0 0 20px;
	color: #28d;
	font-size: 18px;
	line-height: 20px;
	font-weight: 500;
}

.sec-modal__title {
	margin: 0 0 20px;
	color: #404040;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 400;
}

.sec-modal__desc {
	margin: 0;
	color: #404040;
	font-size: 16px;
	line-height: 24px;
}

.sec-modal__desc:empty {
	display: none;
}

.sec-modal__list {
	margin: 15px 0 0;
	padding-left: 20px;
	list-style: none;
}

.sec-modal__list:empty {
	display: none;
}

.sec-modal__list li {
	position: relative;
	padding-left: 18px;
	color: #404040;
	font-size: 15px;
	line-height: 24px;
	font-weight: 400;
}

.sec-modal__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 5px;
	border-radius: 50%;
	background: #000;
}

.sec-modal__incl {
	padding-top: 35px;
}

.sec-modal__incl p {
	margin: 0 0 7px;
	color: #636466;
	font-size: 12px;
	line-height: 15px;
}

.sec-modal__chips {
	display: flex;
	gap: 14px;
}

.sec-modal__chips span {
	padding: 4px 10px;
	border-radius: 999px;
	background: #f2f2f7;
	color: #055e88;
	font-size: 14px;
	line-height: 18px;
	font-weight: 450;
}

.sec-modal__media {
	width: 100%;
}

.sec-modal__media img,
.sec-modal__media video {
	width: 100%;
	border-radius: 10px;
	object-fit: cover;
}

/* ---------- FAQ ---------- */
.sec-faq {
	background: #f4f9fd;
	padding: 30px 0 60px;
}

.sec-faq__title {
	margin: 0 0 30px;
	color: #262626;
	font-size: 25px;
	line-height: 1.35;
	font-weight: 500;
	text-align: center;
}

.sec-faq__tabs {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #979aa4;
}

.sec-faq__tab {
	padding: 6px 12px;
	margin-right: 30px;
	border: 0;
	background: none;
	color: #404040;
	font-size: 12px;
	line-height: 48px;
	font-weight: 600;
	opacity: 0.7;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.sec-faq__tab.is-active {
	opacity: 1;
	border-bottom-color: #262626;
}

.sec-faq__panel {
	display: none;
	padding-top: 40px;
}

.sec-faq__panel.is-active {
	display: block;
}

.sec-acc {
	margin-bottom: 20px;
	border-bottom: 1px solid #c5c9cc;
}

.sec-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 6px 0 20px;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.sec-acc__head h3 {
	margin: 0;
	color: #404040;
	font-size: 16px;
	line-height: 25px;
	font-weight: 500;
}

/* 十字图标：展开时竖线旋转 90° 与横线重合，+ 变 − */
.sec-acc__icon {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
}

.sec-acc__icon::before,
.sec-acc__icon::after {
	content: "";
	position: absolute;
	background: #404040;
	transition: transform 0.3s ease;
}

.sec-acc__icon::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
}

.sec-acc__icon::after {
	top: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
}

.sec-acc.is-open .sec-acc__icon::after {
	transform: translateX(-50%) rotate(90deg);
}

.sec-acc__body {
	overflow: hidden;
}

.sec-acc__content {
	padding: 0 0 30px;
	color: #636466;
	font-size: 14px;
	line-height: 20px;
}

.sec-acc__content p {
	margin: 0;
}

/* ---------- 免责声明 ---------- */
.sec-disclaimer {
	background: #f4f9fd;
	padding: 30px 0 35px;
}

.sec-disclaimer__inner {
	border-top: 1px solid #c6c6d0;
	padding: 25px 0 8px;
}

.sec-disclaimer p {
	margin: 0;
	color: #384952;
	font-size: 12px;
	line-height: 1.9;
}

.sec-disclaimer sup {
	margin-right: 2px;
}

/* ---------- 平板 ≥768 ---------- */
@media (min-width: 768px) {
	.sec-hero__content {
		align-items: flex-start;
		text-align: left;
		padding: 56px 0 40px;
	}

	.sec-hero__title {
		font-size: 58px;
		line-height: 64px;
	}

	.sec-hero__sub {
		font-size: 19px;
		line-height: 26px;
	}

	.sec-hero__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		min-height: 680px;
	}

	.sec-hero__media {
		padding: 0;
	}

	.sec-hero__media video {
		max-width: 700px;
		margin: 48px 0 0 20px;
	}

	.sec-h2 {
		font-size: 36px;
	}

	.sec-plans {
		padding-bottom: 70px;
	}

	.sec-plans__head {
		padding: 96px 0 64px;
	}

	.sec-services {
		padding: 80px 0 80px;
	}

	.sec-services__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
		padding-bottom: 40px;
	}

	.sec-services__title {
		font-size: 46px;
		line-height: 60px;
	}

	.sec-scard__text {
		padding: 32px 30px 16px;
	}

	.sec-scard__media > img,
	.sec-video {
		height: 234px;
	}

	.sec-compare {
		padding-top: 96px;
	}

	.sec-compare__title {
		padding-bottom: 64px;
	}

	.sec-faq__title {
		font-size: 45px;
	}

	.sec-faq__tab {
		padding: 0;
		margin-right: 50px;
		font-size: 20px;
	}

	.sec-faq__panel {
		padding-top: 56px;
	}

	.sec-acc__content {
		font-size: 18px;
		line-height: 29px;
	}

	.sec-modal__body {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 40px;
		padding: 55px 40px 60px;
	}

	.sec-modal__text,
	.sec-modal__media {
		width: 50%;
	}

	.sec-modal__title {
		font-size: 36px;
	}
}

/* ---------- 桌面 ≥1024 ---------- */
@media (min-width: 1024px) {
	.sec-hero__content {
		flex-shrink: 0;
	}

	.sec-hero__brand {
		font-size: 34px;
		line-height: 1;
	}

	.sec-hero__media video {
		max-width: 760px;
		margin: 48px 0 0 50px;
	}

	.sec-plans__grid {
		flex-direction: row;
		max-width: 960px;
		padding-top: 48px;
	}

	.sec-plans__grid .sec-plan {
		width: 50%;
		box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08);
	}

	.sec-plans__grid .sec-plan + .sec-plan {
		border-left: 0;
	}

	.sec-plan--recommended .sec-plan__head {
		background: #dbeafe;
	}

	.sec-services__title {
		font-size: 45px;
		line-height: 48px;
	}

	.sec-services__nav {
		display: flex;
	}

	/* 吸附列头 */
	.sec-compare__sticky {
		display: block;
		position: sticky;
		top: 97px;
		z-index: 10;
		background: #fff;
		box-shadow: 0 8px 14px -10px rgba(16, 24, 40, 0.25);
	}

	.sec-compare__sticky .sec-compare__grid--head .sec-compare__cell {
		border-top: 0;
	}

	.sec-compare__sticky .sec-compare__plan {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 12px 8px 12px 24px;
	}

	.sec-compare__plan-name {
		color: #262626;
		font-size: 20px;
		line-height: 26px;
		font-weight: 600;
	}

	.sec-compare__plan a {
		color: #1b5a8f;
		font-size: 13px;
		line-height: 18px;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.sec-compare__plus {
		display: block;
		position: absolute;
		left: 2px;
		top: 50%;
		transform: translateY(-50%);
		color: #8a94a6;
		font-size: 18px;
		line-height: 1;
		font-weight: 400;
	}

	.sec-compare__plus::before {
		content: "+";
	}

	.sec-compare__row:hover .sec-compare__plus {
		color: #1b5a8f;
	}

	.sec-compare__grid {
		grid-template-columns: 33.33% 33.33% 33.33%;
	}

	.sec-compare__group-title {
		padding-left: 34px;
	}
}

/* 尊重系统减动效偏好 */
@media (prefers-reduced-motion: reduce) {
	.sec-hero__media video {
		display: none;
	}

	.sec-modal__dialog {
		animation: none;
	}
}