/* Contextlogic Landing — settlement sheet */

.cll-settlement {
	--cll-ink: #161616;
	--cll-paper: #ffffff;
	--cll-mute: #8a857c;
	--cll-accent: #9b1c2c;
	--cll-gap: 0;
	--cll-cl: 0;
	--cll-ct: 0;
	--cll-cr: 0;
	--cll-cb: 0;
	box-sizing: border-box;
	width: 100%;
	color: var(--cll-ink);
	background: #ffffff;
}

.cll-settlement *,
.cll-settlement *::before,
.cll-settlement *::after {
	box-sizing: border-box;
}

.cll-scroll {
	width: 100%;
	min-height: min(70vh, 640px);
	height: auto;
	overflow: visible;
}

.cll-frame {
	position: relative;
	display: block;
	width: 100%;
	container-type: inline-size;
	height: calc(var(--cll-sheet-h, 80) * 1cqw);
	min-height: min(70vh, 640px);
	background: #ffffff;
	border: 0;
	overflow: visible;
}

.cll-plot--project {
	position: absolute;
	width: calc(var(--cll-unit) * var(--cll-imp, 3));
	height: auto;
	aspect-ratio: var(--cll-ar, 1);
}

.cll-plot--filler {
	position: absolute;
	width: var(--cll-filler-h, 120px);
	height: calc(var(--cll-filler-h, 120px) / var(--cll-ar, 1));
	color: #2a2a2a;
	pointer-events: none;
}

.cll-plot--neutral {
	position: absolute;
	color: #2a2a2a;
	pointer-events: none;
	background: transparent;
}

.cll-plot--neutral.cll-neutral-background {
	filter: saturate(.7);
}


.cll-plot {
	position: absolute;
	margin: 0;
	border: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
	min-width: 0;
	min-height: 0;
	overflow: visible;
	z-index: var(--cll-z, 1);
	container-type: normal;
	overflow: visible;
}

.cll-plot.is-cropped,
.cll-plot.is-poly,
.cll-plot.is-rect,
.cll-plot.is-circle {
	background: transparent;
	overflow: visible;
}

.cll-hit {
	appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: transparent;
	box-shadow: none;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	position: relative;
	z-index: 1;
	overflow: visible;
}

.cll-sheet,
.cll-sheet .cll-overlay {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	position: relative;
}
.cll-overlay--imgs {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

.cll-plot.is-poly .cll-hit,
.cll-plot.is-poly .cll-sheet,
.cll-plot.is-rect .cll-hit,
.cll-plot.is-rect .cll-sheet,
.cll-plot.is-circle .cll-hit,
.cll-plot.is-circle .cll-sheet {
	clip-path: var(--cll-clip, none);
	-webkit-clip-path: var(--cll-clip, none);
	overflow: hidden;
}

.cll-plot.is-rect .cll-sheet,
.cll-plot.is-poly .cll-sheet,
.cll-plot.is-circle .cll-sheet {
	overflow: hidden;
}

.cll-plot.is-rect .cll-overlay--imgs img,
.cll-plot.is-poly .cll-overlay--imgs img,
.cll-plot.is-circle .cll-overlay--imgs img,
.cll-plot.is-rect .cll-sheet > img,
.cll-plot.is-poly .cll-sheet > img,
.cll-plot.is-circle .cll-sheet > img {
	width: var(--cll-img-w, 100%);
	height: auto;
	max-width: none;
	max-height: none;
	position: absolute;
	right: auto;
	bottom: auto;
	left: var(--cll-img-left, 0%);
	top: var(--cll-img-top, 0%);
	object-fit: initial;
}

.cll-overlay--imgs img,
.cll-plot--filler .cll-sheet img,
.cll-plot--filler .cll-sheet svg,
.cll-sheet img,
.cll-sheet svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	background: transparent;
}

.cll-overlay--imgs img {
	position: absolute;
	inset: 0;
	max-width: none;
	max-height: none;
}
.cll-overlay--imgs img.cll-bw {
	z-index: 1;
	opacity: 1;
	visibility: visible;
}
.cll-overlay--imgs img.cll-color {
	z-index: 2;
}

.cll-overlay .cll-bw,
.cll-overlay image.cll-bw,
.cll-overlay svg.cll-bw,
.cll-overlay img.cll-bw {
	opacity: 1;
}

.cll-overlay .cll-color,
.cll-overlay image.cll-color,
.cll-overlay svg.cll-color,
.cll-overlay img.cll-color {
	opacity: 0;
}
.cll-overlay--color-only .cll-color,
.cll-overlay--color-only img.cll-color {
	opacity: 1;
	visibility: visible;
}

.cll-hit:hover .cll-overlay .cll-color,
.cll-hit:hover .cll-overlay image.cll-color,
.cll-hit:hover .cll-overlay svg.cll-color,
.cll-hit:hover .cll-overlay img.cll-color,
.cll-hit:focus-visible .cll-overlay .cll-color,
.cll-hit:focus-visible .cll-overlay image.cll-color,
.cll-hit:focus-visible .cll-overlay svg.cll-color,
.cll-hit:focus-visible .cll-overlay img.cll-color {
	opacity: 1;
}

.cll-overlay .cll-bw,
.cll-overlay .cll-color,
.cll-overlay image.cll-bw,
.cll-overlay image.cll-color,
.cll-overlay svg.cll-bw,
.cll-overlay svg.cll-color,
.cll-overlay img.cll-bw,
.cll-overlay img.cll-color {
	transition: none;
	filter: none;
	box-shadow: none;
}

.cll-plot-name {
	display: none;
}

.cll-readout {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0.85rem 0 0;
	padding-left: 50px;
	padding-right: 50px;
	min-height: 1.4em;
	text-align: left;
	font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: clamp(0.48rem, 0.83vw, 0.71rem);
	letter-spacing: 0.04em;
	color: #161616;
	background: #ffffff;
	box-shadow: none;
	text-shadow: none;
	border: 0;
}

.cll-readout-mark {
	position: relative;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
}

.cll-readout-mark::before,
.cll-readout-mark::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.cll-readout-mark::before {
	left: 50%;
	top: 50%;
	width: 3px;
	height: 3px;
	background: #161616;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
}

.cll-readout-mark::after {
	inset: 0;
	border: 1px solid #161616;
	background: transparent;
	transform: scale(0);
	opacity: 0;
}

.cll-readout-name {
	opacity: 0;
	transform: translateX(-8px);
}

.cll-readout.is-on .cll-readout-mark::before {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	transition: transform 0.16s ease, opacity 0.16s ease;
}

.cll-readout.is-on .cll-readout-mark::after {
	animation: cll-mark-open 0.58s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.cll-readout.is-on .cll-readout-name {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

@keyframes cll-mark-open {
	0% {
		transform: scale(0.12);
		opacity: 0.15;
	}
	58% {
		transform: scale(1.08);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.home-landing .cll-settlement {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
}

.home-landing .cll-scroll,
.home-landing .cll-frame {
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.home-landing .cll-readout {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 28px;
	margin: 0;
	z-index: 4;
	background: transparent;
	pointer-events: none;
}

@media (max-width: 900px) {
	html,
	body.home,
	body.home-landing-on,
	body.cll-live {
		overflow: auto !important;
		overflow-x: auto !important;
	}

	.home-landing {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		bottom: auto !important;
		width: 100% !important;
		height: auto !important;
		overflow: visible;
	}

	.home-landing .cll-settlement {
		height: auto;
	}

	.cll-scroll {
		width: 100%;
		height: auto;
		max-height: calc(100dvh - 120px);
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x pan-y;
		overscroll-behavior: contain;
	}

	.cll-scroll .cll-frame,
	.home-landing .cll-frame,
	.cll-frame {
		width: 1280px;
		min-width: 1280px;
		height: 640px;
		min-height: 640px;
		max-height: none;
		aspect-ratio: auto;
	}

	.cll-plot:not(.is-circle):not(.is-rect):not(.is-poly) .cll-overlay--imgs img,
	.cll-plot:not(.is-circle):not(.is-rect):not(.is-poly) .cll-sheet img,
	.cll-plot:not(.is-circle):not(.is-rect):not(.is-poly) .cll-sheet svg {
		object-fit: contain;
		object-position: center;
	}

	.home-landing .cll-readout,
	.cll-readout {
		position: sticky;
		left: 0;
		bottom: 0;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 16px;
		background: #ffffff;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cll-readout-mark::before,
	.cll-readout-mark::after,
	.cll-readout-name,
	.cll-readout.is-on .cll-readout-mark::after {
		animation: none;
		transition: none;
	}

	.cll-readout.is-on .cll-readout-mark::before,
	.cll-readout.is-on .cll-readout-mark::after,
	.cll-readout.is-on .cll-readout-name {
		opacity: 1;
		transform: none;
	}
}

.cll-plot img,.cll-overlay--imgs img{max-width:none;max-height:none;visibility:visible}
.cll-overlay--imgs img.cll-bw{opacity:1;z-index:1}
.cll-composer .cll-plot.is-selected{outline:2px solid #2271b1;outline-offset:2px}
.cll-plot,.cll-sheet,.cll-hit{user-select:none;-webkit-user-select:none}

.cll-plot--project{min-width:0;min-height:0}
.cll-overlay--color-only img.cll-color{opacity:1!important;visibility:visible!important}

.cll-readout {
	display: none !important;
}

.cll-pointer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.38s ease, visibility 0.38s ease;
}

.cll-pointer.is-on {
	opacity: 1;
	visibility: visible;
}

.cll-pointer-h,
.cll-pointer-v {
	position: fixed;
	background: #161616;
	opacity: 0;
}

.cll-pointer-h {
	height: 1px;
	transform: scaleX(0.08);
	transform-origin: left center;
}

.cll-pointer-v {
	width: 1px;
	transform: scaleY(0.08);
	transform-origin: top center;
}

.cll-pointer.is-on .cll-pointer-h,
.cll-pointer.is-on .cll-pointer-v {
	opacity: 1;
	transform: none;
	transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cll-pointer-head {
	position: fixed;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
}

.cll-pointer-dot,
.cll-pointer-ring {
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 50%;
	pointer-events: none;
}

.cll-pointer-dot {
	width: 4px;
	height: 4px;
	background: #161616;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
}

.cll-pointer-ring {
	width: 16px;
	height: 16px;
	border: 1px solid #161616;
	background: transparent;
	transform: translate(-50%, -50%) scale(0.12);
	opacity: 0;
}

.cll-pointer.is-on .cll-pointer-dot {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.cll-pointer.is-on .cll-pointer-ring {
	animation: cll-pointer-ring 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.cll-pointer-name {
	position: fixed;
	margin: 0;
	padding: 0;
	font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: clamp(0.48rem, 0.83vw, 0.71rem);
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: #161616;
	white-space: nowrap;
	width: auto;
	opacity: 0;
	background: rgba(255, 255, 255, 0.82);
}

.cll-pointer.is-on .cll-pointer-name {
	opacity: 1;
	transition: opacity 0.5s ease 0.16s;
}

@keyframes cll-pointer-ring {
	0% {
		transform: translate(-50%, -50%) scale(0.12);
		opacity: 0.15;
	}
	58% {
		transform: translate(-50%, -50%) scale(1.08);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cll-pointer,
	.cll-pointer-h,
	.cll-pointer-v,
	.cll-pointer-dot,
	.cll-pointer-ring,
	.cll-pointer-name,
	.cll-pointer.is-on .cll-pointer-ring {
		animation: none;
		transition: none;
	}

	.cll-pointer.is-on .cll-pointer-h,
	.cll-pointer.is-on .cll-pointer-v,
	.cll-pointer.is-on .cll-pointer-dot,
	.cll-pointer.is-on .cll-pointer-ring,
	.cll-pointer.is-on .cll-pointer-name {
		opacity: 1;
		transform: none;
	}

	.cll-pointer.is-on .cll-pointer-dot,
	.cll-pointer.is-on .cll-pointer-ring {
		transform: translate(-50%, -50%);
	}
}