/* Section 5 — dashboard (Figma «Landing · Dashboard» 1440 wide, «Mobile · Dashboard» 390 wide). On sand. */

.dash {
	padding: 80px 0 140px; /* .sec: the frame (base.css). */
	background: var(--sand);
}

.dash__inner {
	width: var(--container);
	margin: 0 auto;
	padding: 70px 40px 0;
}

.dash__title {
	max-width: 1000px;
	font-size: clamp(26px, 3.61vw, 52px);
	font-weight: 900;
	line-height: 1.35;
}
.dash__title span { color: var(--subtle); }

/* Tabs ----------------------------------------------------------------------------------------------------------- */

.dash__tabs-scroll { margin-top: 56px; }

.dash__tabs {
	display: flex;
	gap: 4px;
	width: max-content;
	padding: 5px;
	border: 1px solid rgba(21, 19, 31, 0.08);
	border-radius: 999px;
	background: var(--white);
	box-shadow: 0 6px 18px rgba(21, 19, 31, 0.05);
}

.dash__tab {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 43px;
	padding: 11px 16px 12px 18px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--muted);
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}
.dash__tab .icon { width: 17px; height: 17px; }
.dash__tab:hover { color: var(--ink); }
.dash__tab.is-active {
	background: var(--ink);
	color: var(--white);
	font-weight: 700;
}

/* The window ------------------------------------------------------------------------------------------------------ */

.dash__window {
	margin: 24px 20px 0;
	overflow: hidden;
	border: 1px solid rgba(21, 19, 31, 0.1);
	border-radius: 28px;
	background: var(--white);
	box-shadow: 0 40px 90px rgba(21, 19, 31, 0.12);
}

.dash__chrome {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	border-bottom: 1px solid var(--line);
}

.dash__lights {
	position: absolute;
	top: 16px;
	left: 21px;
	display: flex;
	gap: 8px;
	direction: ltr;
}
.dash__lights i { width: 12px; height: 12px; border-radius: 50%; }
.dash__lights i:nth-child(1) { background: #ff5f57; }
.dash__lights i:nth-child(2) { background: #febc2e; }
.dash__lights i:nth-child(3) { background: #28c840; }

.dash__url {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 29px;
	padding: 6px 16px 7px 14px;
	border-radius: 999px;
	background: var(--sand);
	color: var(--muted);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 16px;
	direction: ltr;
}
.dash__url .icon { width: 13px; height: 13px; color: var(--subtle); }

.dash__screen {
	position: relative;
	aspect-ratio: 1080 / 750;
	background: #f0f0f1;
}

.dash__panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.dash__panel.is-active { opacity: 1; }
.dash__panel:focus-visible { outline-offset: -3px; }
.dash__panel img { width: 100%; height: 100%; object-fit: cover; }

.dash__hint { position: absolute; }

@media (prefers-reduced-motion: reduce) {
	.dash__panel { transition: none; }
}

/* Three benefits (.points, base.css) ------------------------------------------------------------------------------- */

.dash__benefits { margin-top: 48px; }

@media (max-width: 1180px) {
	.dash__inner { padding-inline: 0; }
	.dash__window { margin-inline: 0; }
}

/* Phones: the window shows the main column only, the tabs scroll sideways, no hints. */
@media (max-width: 767px) {
	.dash { padding: 36px 0 32px; }
	.dash__inner { padding-top: 48px; }
	.dash__title { font-size: 26px; line-height: 1.4; }

	.dash__tabs-scroll {
		margin: 26px calc(-1 * var(--gutter)) 0;
		padding: 2px var(--gutter);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
		mask-image: linear-gradient(to right, transparent, #000 40px);
	}
	.dash__tabs-scroll::-webkit-scrollbar { display: none; }
	.dash__tabs { margin-bottom: 2px; }

	.dash__window { margin-top: 18px; border-radius: 22px; }
	.dash__chrome { height: 40px; }
	.dash__lights { top: 14.5px; left: 15px; gap: 5px; }
	.dash__lights i { width: 9px; height: 9px; }
	.dash__screen { aspect-ratio: 350 / 460; }
	.dash__hint { display: none; }

	.dash__benefits { margin-top: 26px; }
}