:root {
	--hs-font: "Aptos", "Modern Era", sans-serif;
	--hs-cta: var(--hive-teal-700);
	--hs-cta-hover: var(--hive-teal-800);
}

/*
 * Hive Sense product page.
 * New page design inside the current site header and footer.
 * Everything is scoped to .hs-sense so the mirrored theme stylesheet is untouched.
 * Source design: Figma "Hive Marketing" > "Hive Sense · Väg C · ny sida i dagens ram".
 */

.hs-sense {
	--hs-live: #e2141e;

	/* Layout. 1243px content width and 98px gutters at 1440. */
	--hs-content: 1243px;
	--hs-content-narrow: 1167px;
	--hs-gutter: clamp(23px, 6.84vw, 98px);
	--hs-radius: 8px;

	background: var(--hive-white);
	color: var(--hive-grey-900);
	font-family: var(--hs-font);
	font-size: 18px;
	letter-spacing: 0;
	line-height: 24px;
}

/* Resets use :where() so they never outrank the component rules below. */

:where(.hs-sense) *,
:where(.hs-sense) *::before,
:where(.hs-sense) *::after {
	box-sizing: border-box;
}

:where(.hs-sense) :is(h1, h2, h3, p, ul, figure) {
	margin: 0;
	padding: 0;
}

:where(.hs-sense) :is(h1, h2, h3) {
	color: inherit;
	font-family: var(--hs-font);
	font-weight: 600;
	text-wrap: balance;
}

:where(.hs-sense) img {
	display: block;
	max-width: 100%;
}

.hs-wrap {
	margin-inline: auto;
	width: min(var(--hs-content), 100% - 2 * var(--hs-gutter));
}

.hs-wrap--narrow {
	width: min(var(--hs-content-narrow), 100% - 2 * var(--hs-gutter));
}

/* Type */

.hs-h1 {
	font-size: clamp(36px, 4.17vw, 60px);
	letter-spacing: -0.03em;
	line-height: 0.95;
}

.hs-h2 {
	font-size: clamp(28px, 2.78vw, 40px);
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.hs-h3 {
	font-size: 20px;
	letter-spacing: -0.01em;
	line-height: 22px;
}

.hs-lead {
	color: var(--hive-grey-500);
	font-size: 18px;
	line-height: 24px;
}

.hs-lead p + p {
	margin-top: 24px;
}

.hs-body {
	color: var(--hive-grey-500);
	font-size: 16px;
	line-height: 22px;
}

.hs-body p + p {
	margin-top: 22px;
}

/* Shared primary and secondary CTAs, including the site header. */

.hs-btn {
	background: var(--hs-cta);
	border: 1.17px solid var(--hs-cta);
	border-radius: 6px;
	color: var(--hive-white);
	display: inline-block;
	font-family: var(--hs-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	padding: 9px 18px;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
	white-space: nowrap;
}

.hs-btn:hover,
.hs-btn:focus-visible {
	background: var(--hs-cta-hover);
	border-color: var(--hs-cta-hover);
	color: var(--hive-white);
}

.hs-btn--outline {
	background: transparent;
	border-color: var(--hive-grey-900);
	color: var(--hive-grey-900);
}

.hs-btn--outline:hover,
.hs-btn--outline:focus-visible {
	background: var(--hive-grey-900);
	border-color: var(--hive-grey-900);
	color: var(--hive-white);
}

.hs-btn:focus-visible {
	outline: 2px solid var(--hive-grey-900);
	outline-offset: 2px;
}

.hs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Hero */

.hs-hero {
	padding: 72px 0 78px;
}

.hs-hero__grid {
	align-items: center;
	display: grid;
	gap: 62px;
	grid-template-columns: minmax(0, 600fr) minmax(0, 580fr);
}

.hs-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 46px;
}

.hs-hero__text {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 27px;
}

.hs-hero__text .hs-h1 {
	max-width: 600px;
}

.hs-hero__text .hs-lead {
	max-width: 555px;
}

/* Classic eyebrow, as on the other product pages: uppercase and spaced,
   in a warm tone that is dark enough to read on white. */
.hs-eyebrow {
	color: var(--hive-warm-700);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 20px;
	text-transform: uppercase;
}

.hs-dot {
	flex: none;
	height: 14px;
	position: relative;
	width: 14px;
}

.hs-dot::before,
.hs-dot::after {
	background: var(--hive-grey-500);
	border-radius: 50%;
	content: "";
	position: absolute;
}

.hs-dot::before {
	inset: 0;
	opacity: 0.35;
}

.hs-dot::after {
	inset: 3.5px;
}

@media (prefers-reduced-motion: no-preference) {
	.hs-dot::before {
		animation: hs-pulse 1.6s ease-out infinite;
	}
}

/* Still dot, without the pulsing ring. */
.hs-dot--static {
	height: 6px;
	width: 6px;
}

.hs-dot--static::before {
	display: none;
}

.hs-dot--static::after {
	inset: 0;
}

@keyframes hs-pulse {
	from {
		opacity: 0.45;
		transform: scale(0.5);
	}
	to {
		opacity: 0;
		transform: scale(1.15);
	}
}

/* Hero visual: a background panel with a laptop that turns into place when
   the page loads. The laptop is built from one flat image in three pieces
   (lid, front edge of the base, side of the base) placed in 3D, so the base
   stays level like a real laptop on a table while it turns.
   Lengths are in cqw so the model scales with the panel. */
.hs-hero__media {
	aspect-ratio: 1;
	border-radius: var(--hs-radius);
	container-type: inline-size;
	overflow: hidden;
	position: relative;
}

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

.hs-laptop {
	aspect-ratio: 4 / 3;
	left: 7.59%;
	perspective: 459.5cqw;
	perspective-origin: 50% 85.67%;
	position: absolute;
	top: 4.95%;
	width: 120.07%;
}

.hs-laptop__body {
	inset: 0;
	position: absolute;
	transform-origin: 77% 50%;
	transform-style: preserve-3d;
}

.hs-laptop__lid,
.hs-laptop__front {
	background: url("../v3/hero-laptop-full.png") center / 100% 100% no-repeat;
	inset: 0;
	position: absolute;
}

.hs-laptop__lid {
	clip-path: inset(0 0 14.33% 0);
}

.hs-laptop__front {
	clip-path: inset(85.67% 0 0 0);
	transform: translateZ(71.7cqw) scale(0.844);
	transform-origin: 50% 85.67%;
}

.hs-laptop__side {
	background: linear-gradient(to bottom, #8f8d90 0%, #4a484b 16%, #2a292b 60%, #19191a 100%);
	border-radius: 0 0 1.2cqw 0.4cqw;
	height: 3.63cqw;
	left: 92.2%;
	position: absolute;
	top: 85.67%;
	transform: rotateY(-90deg);
	transform-origin: left center;
	width: 71.7cqw;
}

@media (prefers-reduced-motion: no-preference) {
	.hs-laptop__body {
		animation: hs-laptop-turn 2.8s cubic-bezier(0.3, 0.55, 0.2, 1) 0.2s both;
	}
}

@keyframes hs-laptop-turn {
	from {
		transform: translateX(6%) rotateY(-90deg);
	}
	to {
		transform: none;
	}
}

/* Customer logos */

.hs-logos {
	padding: 36px 0;
}

.hs-logos__row {
	align-items: center;
	display: flex;
	gap: 32px;
	justify-content: space-between;
}

.hs-logos__label {
	color: var(--hive-grey-600);
	flex: none;
	font-size: 16px;
	line-height: 22px;
}

.hs-logos__list {
	align-items: center;
	display: flex;
	gap: 16px;
	list-style: none;
}

.hs-logos__list li {
	align-items: center;
	display: flex;
	height: 84px;
	justify-content: center;
	width: 141px;
}

.hs-logos__list img {
	height: auto;
	max-width: none;
}

/* Statement */

.hs-statement {
	padding: 60px 0;
	text-align: center;
}

.hs-statement .hs-h2 {
	margin-inline: auto;
	max-width: 650px;
}

.hs-statement .hs-lead {
	margin: 19px auto 0;
	max-width: 500px;
}

/* Solution */

.hs-solution {
	padding: 78px 0;
}

.hs-solution__grid {
	align-items: center;
	display: grid;
	gap: 73px;
	grid-template-columns: minmax(0, 621fr) minmax(0, 549fr);
}

.hs-solution__media {
	aspect-ratio: 1;
	background: var(--hive-grey-100);
	border-radius: var(--hs-radius);
	padding: 7.7%;
	position: relative;
}

.hs-solution__media img {
	border-radius: var(--hs-radius);
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* The red frame is drawn once when the image scrolls into view. The "Live"
   badge appears first, then two lines run out from it in opposite directions
   and meet at the opposite corner, like a camera going on air. */
.hs-solution__frame {
	fill: none;
	height: 79.8%;
	inset: 10.1%;
	overflow: visible;
	pointer-events: none;
	position: absolute;
	/* Solid stroke with opacity on the whole frame, so the short overlap where
	   the two lines meet does not show as a darker patch. */
	opacity: 0.55;
	stroke: var(--hs-live);
	stroke-linecap: round;
	stroke-width: 0.75;
	width: 79.8%;
}

.hs-solution__frame path {
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.hs-frame-pending .hs-solution__frame path {
		stroke-dashoffset: 100;
	}

	.hs-sense .hs-frame-pending .hs-live {
		opacity: 0;
	}

	.hs-sense .hs-frame-drawn .hs-live {
		animation: hs-live-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
	}

	.hs-frame-drawn .hs-solution__frame path {
		animation: hs-frame-draw 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both;
	}

	/* One soft glow as the lines meet. */
	.hs-frame-drawn .hs-solution__frame {
		animation: hs-frame-glow 0.9s ease-out 1.75s both;
	}
}

@keyframes hs-live-in {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 0.95;
		transform: none;
	}
}

@keyframes hs-frame-draw {
	from {
		stroke-dashoffset: 100;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes hs-frame-glow {
	0% {
		filter: drop-shadow(0 0 0 rgba(226, 20, 30, 0));
		opacity: 0.55;
	}
	35% {
		filter: drop-shadow(0 0 6px rgba(226, 20, 30, 0.55));
		opacity: 0.9;
	}
	100% {
		filter: drop-shadow(0 0 0 rgba(226, 20, 30, 0));
		opacity: 0.55;
	}
}

.hs-live {
	align-items: center;
	background: var(--hs-live);
	border-radius: 3px;
	color: var(--hive-white);
	display: inline-flex;
	gap: 7px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 23px;
	padding: 0 10px 0 11px;
	position: absolute;
	right: 11.9%;
	text-transform: uppercase;
	top: 11.8%;
	z-index: 1;
}

/* White dot in front of "Live", with a soft pulsing ring. */
.hs-live::before {
	background: var(--hive-white);
	border-radius: 50%;
	content: "";
	flex: none;
	height: 7px;
	width: 7px;
}

@media (prefers-reduced-motion: no-preference) {
	.hs-live::before {
		animation: hs-live-pulse 1.6s ease-out infinite;
	}
}

@keyframes hs-live-pulse {
	from {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}
	to {
		box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
	}
}

.hs-solution__copy {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 27px;
}

.hs-solution__copy .hs-h2 {
	max-width: 495px;
}

.hs-solution__copy .hs-lead {
	max-width: 495px;
}

/* Value propositions */

.hs-values {
	padding: 78px 0;
}

.hs-values__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hs-value {
	border: 1px solid var(--hive-grey-200);
	border-radius: var(--hs-radius);
	display: flex;
	flex-direction: column;
	gap: 19px;
	justify-content: space-between;
	padding: 22px;
}

.hs-value__copy {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 19px;
	padding-bottom: 25px;
}

.hs-value__copy h3 {
	font-size: clamp(22px, 1.95vw, 28px);
	letter-spacing: -0.02em;
	line-height: 1.07;
}

.hs-value__copy .hs-body {
	margin-top: -6px;
	max-width: 450px;
}

.hs-value__media img {
	aspect-ratio: 1065 / 858;
	border-radius: 7px;
	height: auto;
	width: 100%;
}

/* How it works */

.hs-how {
	padding: 46px 0 78px;
	scroll-margin-top: 24px;
}

.hs-how__panel {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 41px;
	padding: 55px 47px;
}

.hs-how__intro {
	max-width: 860px;
	text-align: center;
}

.hs-how__intro .hs-lead {
	margin: 19px auto 0;
	max-width: 704px;
}

.hs-how__cards {
	display: grid;
	gap: 19px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
}

.hs-card {
	background: var(--hive-white);
	border: 1px solid var(--hive-grey-200);
	border-radius: var(--hs-radius);
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 237px;
	padding: 28px;
}

.hs-card img {
	height: 24px;
	margin: 0 4px 4px 0;
	width: 24px;
}

.hs-card .hs-body {
	max-width: 275px;
}

/* Security and compliance */

.hs-security {
	background: var(--hive-deep-900);
	color: var(--hive-white);
	padding: 109px 0;
}

.hs-security__intro {
	margin: 0 auto 56px;
	max-width: 600px;
	text-align: center;
}

.hs-security__intro .hs-lead {
	color: var(--hive-grey-300);
	margin-top: 20px;
}

.hs-security__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hs-security__card {
	border: 1px solid var(--hive-deep-700);
	border-radius: var(--hs-radius);
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 28px;
}

.hs-security__card img {
	height: 25px;
	width: 25px;
}

.hs-security__card .hs-body {
	color: var(--hive-grey-300);
	margin-top: 10px;
}

.hs-security__cta {
	margin-top: 56px;
	text-align: center;
}

.hs-security__cta .hs-btn {
	padding: 9px 14px;
}

/* FAQ */

.hs-faq {
	background: linear-gradient(to bottom, var(--hive-grey-100), var(--hive-white));
	padding: 109px 0 42px;
}

.hs-faq .hs-h2 {
	text-align: center;
}

.hs-faq__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 44px auto 0;
	max-width: 742px;
}

.hs-faq__item {
	background: var(--hive-white);
	border: 1px solid var(--hive-grey-200);
	border-radius: var(--hs-radius);
}

.hs-faq__item summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	list-style: none;
	padding: 16px;
}

.hs-faq__item summary::-webkit-details-marker {
	display: none;
}

.hs-faq__item summary:focus-visible {
	border-radius: var(--hs-radius);
	outline: 2px solid var(--hive-grey-900);
	outline-offset: 2px;
}

.hs-faq__icon {
	flex: none;
	height: 19px;
	position: relative;
	width: 19px;
}

.hs-faq__icon::before,
.hs-faq__icon::after {
	background: #1f1f1f;
	content: "";
	height: 1.56px;
	left: 0;
	position: absolute;
	top: 8.6px;
	transition: transform 0.2s ease;
	width: 19px;
}

.hs-faq__icon::after {
	transform: rotate(90deg);
}

.hs-faq__item[open] .hs-faq__icon::after {
	transform: rotate(0deg);
}

/* While an answer folds shut, the icon turns back straight away. */
.hs-faq__item.is-closing .hs-faq__icon::after {
	transform: rotate(90deg);
}

.hs-faq__item .hs-body {
	padding: 0 16px 16px;
}

/* Final call to action */

.hs-final {
	padding: 109px 0;
}

.hs-final__panel {
	align-items: center;
	background: var(--hive-deep-900);
	border: 1px solid var(--hive-grey-200);
	border-radius: var(--hs-radius);
	color: var(--hive-white);
	display: flex;
	flex-direction: column;
	gap: 38px;
	padding: 70px clamp(24px, 5.4vw, 78px);
	text-align: center;
}

.hs-final__panel > img {
	height: 56px;
	width: 49px;
}

.hs-final__copy {
	max-width: 746px;
}

.hs-final__copy p {
	font-size: 18px;
	line-height: 24px;
	margin: 25px auto 0;
	max-width: 513px;
}

/* Tablet */

@media (max-width: 1100px) {
	.hs-hero {
		padding: 56px 0 70px;
	}

	.hs-hero__grid,
	.hs-solution__grid {
		gap: 40px;
		grid-template-columns: minmax(0, 1fr);
	}

	.hs-hero__copy {
		gap: 32px;
	}

	.hs-hero__text .hs-h1,
	.hs-hero__text .hs-lead {
		max-width: none;
	}

	.hs-logos__row {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.hs-logos__list {
		justify-content: space-between;
		width: 100%;
	}

	.hs-logos__list li {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}

	.hs-logos__list img {
		max-width: 100%;
	}

	.hs-solution,
	.hs-values {
		padding: 62px 0;
	}

	.hs-solution__copy .hs-h2,
	.hs-solution__copy .hs-lead {
		max-width: none;
	}

	.hs-how__panel {
		padding: 44px 0;
	}

	.hs-how__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.hs-card {
		min-height: 0;
	}

	.hs-card .hs-body {
		max-width: none;
	}

	.hs-security,
	.hs-final {
		padding: 88px 0;
	}

	.hs-security__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hs-faq {
		padding-top: 88px;
	}
}

/* Mobile */

@media (max-width: 640px) {
	.hs-hero {
		padding: 40px 0 56px;
	}

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

	.hs-logos__list {
		display: grid;
		gap: 0 16px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hs-logos__list li {
		height: 64px;
	}

	.hs-statement {
		padding: 39px 0;
	}

	.hs-solution,
	.hs-values {
		padding: 51px 0;
	}

	.hs-live {
		font-size: 12px;
		line-height: 18px;
		padding: 0 7px 0 8px;
	}

	.hs-values__grid,
	.hs-security__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hs-how {
		padding: 30px 0 51px;
	}

	.hs-how__panel {
		padding: 36px 0;
	}

	.hs-security,
	.hs-final {
		padding: 71px 0;
	}

	.hs-faq {
		padding: 71px 0 28px;
	}

	.hs-final__panel {
		padding-block: 46px;
	}
}

/* Motion
   Small, one-time movements that help the page read from top to bottom.
   Everything here is skipped for visitors who prefer reduced motion. */

.hs-btn:active {
	transform: translateY(1px);
}

.hs-value,
.hs-card,
.hs-faq__item {
	transition: border-color 0.2s ease;
}

.hs-value:hover,
.hs-card:hover,
.hs-faq__item:hover {
	border-color: var(--hive-deep-300);
}

/* Reveal on scroll. The script at the end of the page adds .is-in when an
   element enters the viewport and .is-done when it has settled. If the script
   cannot run it adds .hs-reveal-off, and nothing stays hidden. The selector
   list below must match the one in that script. */
@media (prefers-reduced-motion: no-preference) {
	.js .hs-sense:not(.hs-reveal-off) :is(
		.hs-hero .hs-eyebrow,
		.hs-hero .hs-h1,
		.hs-hero .hs-lead,
		.hs-hero .hs-actions,
		.hs-logos__label,
		.hs-logos__list li,
		.hs-statement .hs-h2,
		.hs-statement .hs-lead,
		.hs-solution__media,
		.hs-solution__copy > *,
		.hs-value,
		.hs-how__intro > *,
		.hs-card,
		.hs-how__panel > .hs-btn,
		.hs-security__intro > *,
		.hs-security__card,
		.hs-security__cta,
		.hs-faq .hs-wrap > .hs-h2,
		.hs-faq__item,
		.hs-final__panel
	):not(.is-done) {
		transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.js .hs-sense:not(.hs-reveal-off) :is(
		.hs-hero .hs-eyebrow,
		.hs-hero .hs-h1,
		.hs-hero .hs-lead,
		.hs-hero .hs-actions,
		.hs-logos__label,
		.hs-logos__list li,
		.hs-statement .hs-h2,
		.hs-statement .hs-lead,
		.hs-solution__media,
		.hs-solution__copy > *,
		.hs-value,
		.hs-how__intro > *,
		.hs-card,
		.hs-how__panel > .hs-btn,
		.hs-security__intro > *,
		.hs-security__card,
		.hs-security__cta,
		.hs-faq .hs-wrap > .hs-h2,
		.hs-faq__item,
		.hs-final__panel
	):not(.is-in) {
		opacity: 0;
		transform: translateY(12px);
	}
}