/* ==========================================================
   App Development page styles
   Loaded by templates/views/assets/app-development.html
   ========================================================== */

.ap-stage {
	position: relative;
	height: 540px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 34px;
	overflow: hidden;
	background:
		radial-gradient(50% 60% at 50% 60%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 70%), #fbfbfa;
}
.ap-stage .ip {
	animation: ap-float 7s ease-in-out infinite;
}
.ap-stage .ip.l {
	transform: rotate(-5deg) translateY(18px);
	animation-delay: -2.5s;
}
.ap-stage .ip.r {
	transform: rotate(5deg) translateY(18px);
	animation-delay: -5s;
}
@keyframes ap-float {
	50% {
		margin-top: -14px;
	}
}
.ap-toast {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 13px;
	color: #fff;
	background: var(--ink);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	animation: ap-toast 9s ease-in-out infinite;
}
.ap-toast i {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-style: normal;
	font-size: 11px;
	background: #00a676;
}
.ap-toast.t1 {
	left: 8%;
	top: 22%;
}
.ap-toast.t2 {
	right: 8%;
	top: 34%;
	animation-delay: 3s;
}
.ap-toast.t2 i {
	background: var(--tone-2);
}
.ap-toast.t3 {
	left: 12%;
	top: 58%;
	animation-delay: 6s;
}
.ap-toast.t3 i {
	background: #e2774a;
}
@keyframes ap-toast {
	0%,
	100% {
		opacity: 0;
		transform: translateY(10px);
	}
	6%,
	28% {
		opacity: 1;
		transform: none;
	}
	34% {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* offline demo */
.ap-sync {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding: clamp(20px, 3vw, 36px);
	border-radius: 28px;
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line);
}
.ap-ctrl {
	display: grid;
	gap: 18px;
	justify-items: start;
}
.ap-ctrl b {
	font-weight: 400;
	color: #0b6b4f;
}
[data-online='0'] .ap-ctrl b {
	color: #c0532b;
}
.ap-hint {
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.65;
}
.ap-reset {
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	font: 400 12px/1 var(--font-mono);
	color: var(--subtle);
	text-decoration: underline;
}
.ap-mid {
	display: flex;
	align-items: center;
	gap: 0;
}
.ap-bars {
	display: flex;
	align-items: flex-end;
	gap: 2px;
}
.ap-bars i {
	width: 3px;
	background: currentColor;
	border-radius: 1px;
	transition: opacity 0.3s;
}
.ap-bars i:nth-child(1) {
	height: 4px;
}
.ap-bars i:nth-child(2) {
	height: 6px;
}
.ap-bars i:nth-child(3) {
	height: 8px;
}
.ap-bars i:nth-child(4) {
	height: 10px;
}
[data-online='0'] .ap-bars i:nth-child(n + 2) {
	opacity: 0.2;
}
.ap-pin {
	padding: 6px 14px 14px;
}
.ap-pin small,
.ap-srv header {
	font: 400 10.5px/1 var(--font-mono);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--subtle);
}
.ap-sync ul {
	display: grid;
	gap: 7px;
	margin-top: 10px;
}
.ap-sync li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 11px;
	font-size: 12.5px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
	animation: ap-in 0.45s var(--ease);
}
.ap-sync li em {
	flex: none;
	font-style: normal;
	padding: 3px 7px;
	border-radius: 999px;
	font-size: 10.5px;
}
.ap-sync li em.q {
	color: #9a4a1c;
	background: rgba(226, 119, 74, 0.14);
}
.ap-sync li em.s {
	color: #0b6b4f;
	background: rgba(0, 195, 137, 0.15);
}
.ap-sync li em.g {
	color: var(--tone);
	background: color-mix(in srgb, var(--tone) 12%, #fff);
}
@keyframes ap-in {
	from {
		opacity: 0;
		transform: translateY(-6px) scale(0.97);
	}
}
.ap-empty {
	margin-top: 12px;
	font-size: 13px;
	color: var(--subtle);
}
.ap-wire {
	position: relative;
	width: 70px;
	height: 2px;
	background: var(--line-strong);
	overflow: hidden;
}
.ap-wire i {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 2px;
	background: var(--tone);
	animation: ap-wire 1.2s linear infinite;
}
[data-online='0'] .ap-wire {
	background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
}
[data-online='0'] .ap-wire i {
	display: none;
}
@keyframes ap-wire {
	to {
		transform: translateX(70px);
	}
}
.ap-srv {
	align-self: stretch;
	padding: 18px;
	border-radius: 22px;
	background: #fff;
	box-shadow:
		0 0 0 1px var(--line),
		var(--shadow-sm);
}
.ap-srv header {
	display: flex;
	justify-content: space-between;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
.ap-srv header b {
	font-weight: 400;
	color: var(--ink);
}

/* compare */
.ap-cmp {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: stretch;
	padding: clamp(20px, 3vw, 36px);
	border-radius: 28px;
	background: #fff;
	box-shadow:
		0 0 0 1px var(--line),
		var(--shadow-sm);
}
.ap-vis {
	position: relative;
	min-height: 440px;
	border-radius: 22px;
	overflow: hidden;
	background:
		radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 70%),
		var(--paper);
	box-shadow: inset 0 0 0 1px var(--line);
}
.ap-vis::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(16, 24, 32, 0.08) 1px, transparent 1px);
	background-size: 18px 18px;
	-webkit-mask-image: linear-gradient(#000, transparent 80%);
	mask-image: linear-gradient(#000, transparent 80%);
}
.ap-v {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: auto 1fr auto;
	justify-items: center;
	padding: 15px 20px 22px;
	transition:
		opacity 0.5s var(--ease),
		transform 0.6s var(--ease);
}
.ap-v.n {
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
}
.ap-cmp[data-mode='1'] .ap-v.x {
	opacity: 0;
	transform: translateY(14px);
}
.ap-cmp[data-mode='1'] .ap-v.n {
	opacity: 1;
	transform: none;
}
.ap-code {
	display: flex;
	gap: 10px;
}
.ap-code span {
	display: grid;
	gap: 6px;
	padding: 12px 16px;
	border-radius: 14px;
	background: #fff;
	box-shadow:
		var(--shadow-sm),
		0 0 0 1px var(--line);
	font: 400 12px/1 var(--font-mono);
	color: var(--ink-2);
	text-align: center;
}
.ap-code span small {
	font-size: 10px;
	color: var(--subtle);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.ap-code span i {
	display: block;
	height: 5px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--tone) 30%, #fff);
}
.ap-code span i + i {
	width: 70%;
	background: rgba(226, 119, 74, 0.35);
}
.ap-wires {
	width: 100%;
	height: 100%;
	min-height: 60px;
}
.ap-wires path {
	fill: none;
	stroke: color-mix(in srgb, var(--tone) 55%, transparent);
	stroke-width: 2;
	stroke-dasharray: 5 6;
	animation: ap-dash 1.4s linear infinite;
}
@keyframes ap-dash {
	to {
		stroke-dashoffset: -22;
	}
}
.ap-devs {
	display: flex;
	gap: 28px;
	align-items: flex-end;
}
.ap-devs figure {
	margin: 0;
	display: grid;
	justify-items: center;
	gap: 10px;
	font: 400 11px/1 var(--font-mono);
	color: var(--muted);
}
.ap-devs .ip .as {
	padding: 0 8px;
	gap: 6px;
	font-size: 8px;
}
.ap-devs .as-hero {
	padding: 8px;
	border-radius: 10px;
}
.ap-devs .as-hero b {
	font-size: 10px;
	margin-top: 4px;
}
.ap-devs .as-hero small {
	font-size: 7px;
}
.ap-devs .as-row {
	padding: 6px 7px;
	border-radius: 8px;
}
/* Android: flatter corners, punch-hole camera */
.adr {
	--w: 104px;
	position: relative;
	flex: none;
	width: var(--w);
	aspect-ratio: 72 / 152;
	padding: 5px;
	border-radius: 16px;
	background: linear-gradient(145deg, #3a4048, #1a1d22);
	box-shadow:
		inset 0 0 0 1.5px #555c66,
		0 30px 50px -26px rgba(15, 76, 129, 0.5);
}
.adr .ip-scr {
	border-radius: 12px;
}
.adr .cam {
	position: absolute;
	z-index: 6;
	top: 7px;
	left: 50%;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: 50%;
	background: #000;
}
.adr .ip-status {
	height: 24px;
	padding: 0 9px;
	font-size: 7px;
}
.adr .ip-status i {
	width: 10px;
	height: 5px;
}

.ap-seg {
	position: relative;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	padding: 5px;
	border-radius: 999px;
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line);
}
.ap-seg button {
	position: relative;
	z-index: 1;
	height: 42px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font-size: 15px;
	color: var(--muted);
	background: none;
	transition: color 0.3s;
}
.ap-seg button[aria-pressed='true'] {
	color: #fff;
}
.ap-seg i {
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 5px;
	width: calc(50% - 5px);
	border-radius: 999px;
	background: var(--ink);
	transition: transform 0.45s var(--ease);
}
.ap-cmp[data-mode='1'] .ap-seg i {
	transform: translateX(100%);
}
.ap-rows {
	margin-top: 26px;
	border-top: 1px solid var(--line);
}
.ap-row:last-child {
	border-bottom: 0;
}
.ap-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}
.ap-row span {
	font: 400 12px/1.6 var(--font-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--subtle);
}
.ap-row b {
	position: relative;
	display: grid;
	font-weight: 400;
	font-size: 17px;
}
.ap-row em,
.ap-rec em {
	grid-area: 1 / 1;
	font-style: normal;
	transition:
		opacity 0.4s,
		transform 0.45s var(--ease);
}
.ap-row em:last-child,
.ap-cmp[data-mode='1'] .ap-row em:first-child {
	opacity: 0;
	transform: translateY(8px);
}
.ap-cmp[data-mode='1'] .ap-row em:last-child {
	opacity: 1;
	transform: none;
}
.ap-rec {
	display: grid;
	margin-top: 20px;
	padding: 14px 18px;
	border-radius: 14px;
	color: #0b6b4f;
	background: rgba(0, 195, 137, 0.1);
	font-size: 15px;
}
.ap-rec em:last-child,
.ap-cmp[data-mode='1'] .ap-rec em:first-child {
	opacity: 0;
}
.ap-cmp[data-mode='1'] .ap-rec em:last-child {
	opacity: 1;
}

/* exploded layers */
.ap-x-stick {
	position: sticky;
	top: 0;
	height: 106vh;
	display: grid;
	align-items: center;
	overflow: hidden;
}
.ap-x-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}
.ap-x-list {
	display: grid;
	gap: 4px;
	margin-top: 28px;
	counter-reset: l;
}
.ap-x-list li {
	padding: 14px 0 14px 44px;
	position: relative;
	border-top: 1px solid var(--line);
	opacity: 0.35;
	transition: opacity 0.4s;
	counter-increment: l;
}
.ap-x-list li::before {
	content: counter(l, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 16px;
	font: 400 12px/1 var(--font-mono);
	color: var(--tone);
}
.ap-x-list b {
	display: block;
	font: 400 1.15rem/1.3 var(--font-display);
}
.ap-x-list span {
	display: block;
	margin-top: 4px;
	font-size: 14.5px;
	color: var(--muted);
}
.ap-x[data-step='0'] .ap-x-list li:nth-child(1),
.ap-x[data-step='1'] .ap-x-list li:nth-child(2),
.ap-x[data-step='2'] .ap-x-list li:nth-child(3),
.ap-x[data-step='3'] .ap-x-list li:nth-child(4),
.ap-x[data-step='4'] .ap-x-list li:nth-child(5) {
	opacity: 1;
}
.ap-x-stage {
	position: relative;
	height: 520px;
	perspective: 1400px;
}
.ap-layer {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 200px;
	height: 412px;
	margin: -206px 0 0 -100px;
	border-radius: 34px;
	transform-style: preserve-3d;
	transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc((2 - var(--i)) * (12px + var(--p, 0) * 70px)));
	background: color-mix(in srgb, var(--tone) calc(8% + var(--i) * 7%), #fff);
	box-shadow:
		0 0 0 1.5px color-mix(in srgb, var(--tone) 40%, transparent),
		0 30px 40px -20px rgba(15, 76, 129, 0.35);
	transition: background 0.4s;
}
.ap-layer.top {
	background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--tone) 8%, #fff));
	box-shadow:
		0 0 0 6px #101820,
		0 30px 40px -20px rgba(15, 76, 129, 0.35);
}
.ap-layer span {
	display: none;
	position: absolute;
	right: -14px;
	top: 50%;
	transform: translateX(100%) rotateZ(38deg) rotateX(-58deg);
	transform-origin: left;
	white-space: nowrap;
	padding: 6px 10px;
	border-radius: 8px;
	font: 400 12px/1 var(--font-mono);
	color: #fff;
	background: var(--ink);
	opacity: calc(var(--p, 0) * 3 - 0.4);
}
.ap-x[data-step='0'] .ap-layer.i-0,
.ap-x[data-step='1'] .ap-layer.i-1,
.ap-x[data-step='2'] .ap-layer.i-2,
.ap-x[data-step='3'] .ap-layer.i-3,
.ap-x[data-step='4'] .ap-layer.i-4 {
	background: linear-gradient(135deg, var(--tone), var(--tone-2));
}

/* apps we've built, phone-mockup cards */
.apw {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.apw-card {
	--at: var(--tone);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 26px;
	background: #fff;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--at) 16%, transparent),
		var(--shadow-sm);
	transition:
		transform 0.5s var(--ease),
		box-shadow 0.5s var(--ease);
}
.apw-card:hover {
	transform: translateY(-6px);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--at) 40%, transparent),
		var(--shadow-lg);
}
.apw-shot {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 28px 0 0;
	height: 370px;
	overflow: hidden;
	background:
		radial-gradient(70% 55% at 50% 100%, color-mix(in srgb, var(--at) 30%, transparent), transparent 70%),
		linear-gradient(170deg, color-mix(in srgb, var(--at) 12%, #fff), #fff);
}
.apw-shot::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(color-mix(in srgb, var(--at) 22%, transparent) 1px, transparent 1px);
	background-size: 16px 16px;
	-webkit-mask-image: linear-gradient(#000, transparent 75%);
	mask-image: linear-gradient(#000, transparent 75%);
}
.apw-shot .ip {
	--w: 190px;
	transform: translateY(14px);
	transition: transform 0.8s var(--ease);
}
.apw-card:hover .apw-shot .ip {
	transform: translateY(-14px);
}
.apw-shot .ip-scr {
	border-radius: calc(var(--w) * 0.14);
}
.apw-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 22px 22px;
	border-top: 1px solid var(--line);
}
.apw-body small {
	font: 400 11px/1 var(--font-mono);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--at) 85%, #101820);
}
.apw-body b {
	display: block;
	margin-top: 9px;
	font: 400 1.25rem/1.25 var(--font-display);
	letter-spacing: -0.015em;
}
.apw-body p {
	margin-top: 6px;
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.6;
}
.apw-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: auto;
	padding-top: 14px;
}
.apw-tags span {
	padding: 5px 9px;
	border-radius: 999px;
	font-size: 12px;
	color: color-mix(in srgb, var(--at) 80%, #101820);
	background: color-mix(in srgb, var(--at) 10%, #fff);
}

/* road */
.ap-road {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	padding-top: 52px;
}
.ap-road-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 11px;
	height: 2px;
	background: var(--line-strong);
}
.ap-road-line i {
	position: absolute;
	inset: 0;
	transform-origin: left;
	transform: scaleX(var(--sp, 0));
	background: linear-gradient(90deg, var(--tone), var(--tone-2));
}
.ap-st {
	position: relative;
}
.ap-st::before {
	content: '';
	position: absolute;
	left: 0;
	top: -50px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: inset 0 0 0 2px var(--line-strong);
	transition:
		background 0.4s,
		box-shadow 0.4s;
}
.ap-st.on::before {
	background: var(--tone);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 18%, transparent);
}
.ap-st small {
	font: 400 11.5px/1 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--subtle);
}
.ap-st.on small {
	color: var(--tone);
}
.ap-st b {
	display: block;
	margin-top: 12px;
	font: 400 1.15rem/1.3 var(--font-display);
}
.ap-st p {
	margin-top: 8px;
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.6;
}

@media (max-width: 1000px) {
	.ap-sync {
		grid-template-columns: 1fr;
		justify-items: center;
	}
	.ap-ctrl {
		justify-items: center;
		text-align: center;
	}
	.ap-wire {
		width: 2px;
		height: 40px;
	}
	.ap-mid {
		flex-direction: column;
	}
	.ap-wire i {
		width: 2px;
		height: 14px;
		animation-name: ap-wire-v;
	}
	@keyframes ap-wire-v {
		to {
			transform: translateY(40px);
		}
	}
	.ap-srv {
		width: 100%;
		max-width: 360px;
	}
	.ap-cmp {
		grid-template-columns: 1fr;
	}
	.apw {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hm-ap {
		min-height: 480px;
	}
	.ap-x-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.ap-x-list li {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.ap-x-list span {
		display: none;
	}
	/* pin the copy to the top and give the exploding layers their own room below it */
	.ap-x-stick {
		align-items: start;
		padding: calc(var(--header-h) + 16px) 0 24px;
	}
	.ap-x-stage {
		height: 290px;
		margin-top: 36px;
		transform: scale(0.58);
		transform-origin: 50% 70%;
	}
	.ap-road {
		grid-template-columns: 1fr;
		padding-top: 0;
		padding-left: 44px;
		row-gap: 28px;
	}
	.ap-road-line {
		left: 9px;
		right: auto;
		top: 0;
		bottom: 0;
		width: 2px;
		height: auto;
	}
	.ap-road-line i {
		transform-origin: top;
		transform: scaleY(var(--sp, 0));
	}
	.ap-st::before {
		left: -44px;
		top: 0;
	}
}
@media (max-width: 1000px) and (max-height: 760px) {
	.ap-x-list li {
		padding-top: 7px;
		padding-bottom: 7px;
	}
	.ap-x-stage {
		height: 220px;
		margin-top: 20px;
		transform: scale(0.55);
		transform-origin: 50% 60%;
	}
}
@media (max-width: 640px) {
	/* hero: the overlapping phones are replaced by the swipeable stage below */
	.hm-ap {
		display: none;
	}
	.e-hero .e-stage-wrap {
		margin-top: 28px;
	}
	/* stage: three phones in a snap slider, one moment per slide */
	.ap-stage {
		position: static;
		height: auto;
		justify-content: flex-start;
		gap: 18px;
		padding: 72px calc(50% - 105px) 56px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.ap-stage::-webkit-scrollbar {
		display: none;
	}
	.ap-stage .ip,
	.ap-stage .ip.l,
	.ap-stage .ip.r {
		--w: 210px !important;
		scroll-snap-align: center;
		transform: scale(0.9);
		opacity: 0.5;
		animation: none;
		transition:
			transform 0.45s var(--ease),
			opacity 0.45s var(--ease);
	}
	.ap-stage .ip.is-on {
		transform: none;
		opacity: 1;
	}
	.ap-stage .ap-toast {
		left: 50%;
		top: 18px;
		bottom: auto;
		right: auto;
		white-space: nowrap;
		animation: none;
		transform: translate(-50%, -6px);
		transition:
			opacity 0.35s,
			transform 0.35s var(--ease);
	}
	.ap-stage .ap-toast.is-on {
		opacity: 1;
		transform: translate(-50%, 0);
	}
	.ap-dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20px;
		display: flex;
		justify-content: center;
		gap: 6px;
	}
	.ap-dots button {
		width: 7px;
		height: 7px;
		padding: 0;
		border: 0;
		border-radius: 99px;
		cursor: pointer;
		background: color-mix(in srgb, var(--tone) 25%, #fff);
		transition:
			width 0.3s var(--ease),
			background 0.3s;
	}
	.ap-dots button.on {
		width: 22px;
		background: var(--tone);
	}
	.apw {
		grid-template-columns: 1fr;
	}
	.hm-ap .ip.front {
		--w: 196px !important;
		margin-left: 90px;
	}
	.hm-ap .ip.back {
		--w: 170px !important;
		margin-left: -190px;
	}
	.ap-vis {
		min-height: 400px;
	}
	.ap-devs {
		gap: 16px;
	}
	.ap-toast {
		font-size: 11.5px;
		padding: 8px 10px;
	}
	.ap-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.ap-row b {
		font-size: 15.5px;
	}
	.ap-seg button {
		padding: 0 14px;
		font-size: 14px;
	}
}
/* app screens (as-), used by the hero, stage, offline demo and work cards */
.as {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 12px;
	font-size: 10.5px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--at, var(--tone)) 10%, #fff), #f6f7f9 40%);
}
.as-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: var(--muted);
}
.as-top b {
	font: 400 12.5px/1 var(--font-display);
	color: var(--ink);
}
.as-hero {
	padding: 12px;
	border-radius: 14px;
	color: #fff;
	background: linear-gradient(
		140deg,
		var(--at, var(--tone)),
		color-mix(in srgb, var(--at, var(--tone)) 55%, #101820)
	);
}
.as-hero small {
	display: block;
	font: 400 8.5px/1 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.8;
}
.as-hero b {
	display: block;
	margin-top: 6px;
	font: 400 14px/1.2 var(--font-display);
}
.as-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}
.as-tiles div {
	padding: 9px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
	line-height: 1.3;
}
.as-tiles i {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-bottom: 6px;
	border-radius: 7px;
	font-style: normal;
	font-size: 11px;
	color: var(--at, var(--tone));
	background: color-mix(in srgb, var(--at, var(--tone)) 12%, #fff);
}
.as-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
}
.as-row small {
	display: block;
	color: var(--subtle);
	font-size: 9.5px;
}
.as-row em {
	flex: none;
	font-style: normal;
	padding: 3px 7px;
	border-radius: 999px;
	font-size: 9px;
	color: #9a4a1c;
	background: rgba(226, 119, 74, 0.14);
}
.as-row em.ok {
	color: #0b6b4f;
	background: rgba(0, 195, 137, 0.15);
}
.as-tabs {
	display: flex;
	justify-content: space-around;
	margin: auto -12px 0;
	padding: 9px 0 calc(var(--w, 220px) * 0.085);
	background: #fff;
	border-top: 1px solid var(--line);
	font-size: 9px;
	color: var(--subtle);
}
.as-tabs span.on {
	color: var(--at, var(--tone));
}
.as-cta {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px;
	border-radius: 13px;
	color: #fff;
	background: var(--ink);
}
.as-cta i {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 8px;
	font-style: normal;
	background: var(--at, var(--tone));
}
.as-prog {
	height: 5px;
	border-radius: 5px;
	background: rgba(16, 24, 32, 0.08);
	overflow: hidden;
}
.as-prog i {
	display: block;
	height: 100%;
	width: 50%;
	background: var(--at, var(--tone));
}
.as-f {
	padding: 8px 10px;
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
}
.as-f small {
	display: block;
	color: var(--subtle);
	font-size: 9.5px;
}
.as-btn {
	padding: 10px;
	border-radius: 12px;
	text-align: center;
	color: #fff;
	background: var(--at, var(--tone));
}

/* hero mockup */
.hm-ap {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 520px;
}
.hm-ap .ip.back {
	--w: 200px;
	position: absolute;
	left: 65%;
	margin-left: -230px;
	transform: rotate(-7deg) translateY(16px);
}
.hm-ap .ip.front {
	--w: 228px;
	margin-left: 156px;
}
.hm-ap .ip {
	animation: hm-bob 7s ease-in-out infinite;
}
.hm-ap .ip.back {
	animation: none;
}