:root {
	--paper: #f3f4f6;
	--card: #ffffff;
	--ink: #0e0f12;
	--ink-2: #5a5f69;
	--line: #e2e4e8;
	--line-soft: #eef0f3;
	--accent: #2b3df5;
	--accent-hover: #1a28c2;
	--browser-tile: #f2f2f2;
	--dark-ink: #f2f3f5;
	--dark-ink-2: #a0a6b0;
	--dark-tile: #1e2228;
	--dark-card: #171a1f;
	--dark-line: #2a2e35;
	--dark-accent: #4f5fff;
	--scrim-badge: rgba(14, 15, 18, 0.72);
	--ring-selected: 0 0 0 2.5px var(--accent), 0 0 0 4.5px var(--card);
	--shadow-float: 0 12px 32px rgba(14, 15, 18, 0.16);
	--shadow-float-strong: 0 12px 32px rgba(14, 15, 18, 0.18);
	--shadow-raise: 0 8px 24px rgba(14, 15, 18, 0.12);
	--font-body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
	--font-display: 'Songti SC', 'STSong', 'Noto Serif SC', serif;
	--font-mono: 'SF Mono', ui-monospace, Menlo, monospace;
}

html[lang='en'] {
	--font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-display: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	line-height: 1.6;
}

/* Layout */

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	box-sizing: border-box;
}

.stack {
	display: flex;
	flex-direction: column;
}

.stack-32 {
	gap: 32px;
}

.stack-40 {
	gap: 40px;
}

.stack-48 {
	gap: 48px;
}

.stack-96 {
	gap: 96px;
}

.section {
	padding: 96px 0;
}

.section-card {
	background: var(--card);
}

.section-dark {
	background: var(--ink);
	color: var(--dark-ink);
}

.section-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 640px;
}

.section-head-pricing {
	max-width: 680px;
}

.section-head-scenes {
	gap: 16px;
	max-width: 760px;
}

/* Type */

.eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--ink-2);
}

.eyebrow-dark {
	color: var(--dark-ink-2);
}

.h1,
.h2,
.h3-display {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
}

.h1 {
	font-size: 60px;
	line-height: 1.15;
}

.h2 {
	font-size: 40px;
	line-height: 1.2;
}

.h3-display {
	font-size: 28px;
	line-height: 1.3;
	color: var(--dark-ink);
}

.balance {
	text-wrap: balance;
}

.text-link {
	color: var(--accent);
}

.text-link:hover {
	color: var(--accent-hover);
}

/* Buttons */

.btn {
	display: flex;
	align-items: center;
	border-radius: 12px;
	text-decoration: none;
}

.btn-nav {
	height: 40px;
	padding: 0 18px;
	font-size: 14px;
}

.btn-lg {
	height: 52px;
	padding: 0 24px;
	font-size: 16px;
	gap: 10px;
}

.btn-primary {
	background: var(--accent);
	color: var(--card);
}

.btn-outline {
	padding: 0 22px;
	box-shadow: inset 0 0 0 1px var(--ink);
	color: var(--ink);
}

.btn-light {
	background: var(--card);
	color: var(--ink);
}

.btn-business {
	align-self: flex-start;
	height: 48px;
	padding: 0 22px;
	background: var(--dark-accent);
	color: var(--card);
	font-size: 15px;
}

.btn-soon {
	background: var(--line-soft);
	color: var(--ink-2);
	cursor: default;
}

/* Header */

.site-header {
	background: var(--card);
	border-bottom: 1px solid var(--line-soft);
}

.nav {
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	text-decoration: none;
}

.brand-mark {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
}

.brand-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 22px;
}

.nav-links {
	display: flex;
	gap: 28px;
	align-items: center;
	font-size: 15px;
}

.nav-links a {
	color: var(--ink);
	text-decoration: none;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lang-pill {
	height: 32px;
	padding: 0 12px;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px var(--line);
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ink);
	text-decoration: none;
	font-size: 13px;
}

/* Hero */

.hero-section {
	background: var(--card);
	padding: 72px 0 88px;
}

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 56px;
	align-items: center;
}

.hero-copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.lede {
	margin: 0;
	font-size: 18px;
	color: var(--ink-2);
	max-width: 30em;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

.hero-note {
	font-size: 13px;
	color: var(--ink-2);
}

.collage {
	position: relative;
	width: 100%;
	aspect-ratio: 560 / 500;
}

.collage-browser {
	position: absolute;
	left: 0;
	top: 4%;
	width: 76%;
	height: 84%;
	border-radius: 16px;
	background: var(--card);
	box-shadow:
		0 0 0 1px var(--line),
		var(--shadow-float);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.collage-urlbar {
	height: 36px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--line-soft);
}

.collage-url {
	flex: 1;
	height: 22px;
	border-radius: 11px;
	background: var(--paper);
	padding: 0 10px;
	display: flex;
	align-items: center;
	font-size: 11px;
	color: var(--ink-2);
	overflow: hidden;
	white-space: nowrap;
}

.collage-grid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	padding: 10px;
	background: var(--browser-tile);
}

.collage-tile {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}

.collage-tile-selected {
	box-shadow: var(--ring-selected);
}

.collage-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tag {
	position: absolute;
	left: 8px;
	top: 8px;
	height: 22px;
	padding: 0 9px;
	border-radius: 11px;
	background: var(--ink);
	color: var(--card);
	font-size: 11px;
	display: flex;
	align-items: center;
}

.tile-action {
	position: absolute;
	left: 8px;
	bottom: 8px;
	height: 26px;
	padding: 0 12px;
	border-radius: 9px;
	background: var(--accent);
	color: var(--card);
	font-size: 12px;
	display: flex;
	align-items: center;
}

.collage-panel {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 44%;
	height: 66%;
	border-radius: 20px;
	background: var(--card);
	box-shadow:
		0 0 0 1px var(--line),
		var(--shadow-float-strong);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.collage-panel-head {
	height: 40px;
	padding: 0 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--line-soft);
}

.collage-panel-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
}

.collage-panel-count {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--ink-2);
	white-space: nowrap;
}

.collage-panel img {
	display: block;
	width: 100%;
	flex: 1;
	min-height: 0;
	object-fit: cover;
}

.collage-sticker {
	position: absolute;
	right: 1%;
	top: 0;
	width: 22%;
	transform: rotate(-8deg);
	filter: drop-shadow(3px 0 0 var(--card)) drop-shadow(-3px 0 0 var(--card))
		drop-shadow(0 3px 0 var(--card)) drop-shadow(0 -3px 0 var(--card))
		drop-shadow(0 8px 12px rgba(14, 15, 18, 0.2));
}

.collage-label {
	position: absolute;
	right: 2%;
	top: 23%;
	height: 26px;
	padding: 0 10px;
	border-radius: 13px;
	background: var(--ink);
	color: var(--card);
	font-size: 12px;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

/* Supported sites */

.sites {
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
	background: var(--card);
}

.sites-row {
	min-height: 64px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
	font-size: 14px;
	color: var(--ink-2);
}

.sites-title {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
}

.site-name {
	color: var(--ink);
}

/* How it works */

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

.step {
	border-radius: 16px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--line);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.step h3 {
	margin: 0;
	font-size: 20px;
}

.step p {
	margin: 0;
	color: var(--ink-2);
	font-size: 15px;
}

.step-media {
	height: 200px;
	border-radius: 12px;
	background: var(--paper);
}

.step-media-center {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.step-media-stickers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	padding: 18px;
	box-sizing: border-box;
	align-items: center;
}

.step-frame {
	position: relative;
	height: 170px;
	aspect-ratio: 3 / 4;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--ring-selected);
}

.step-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.step-frame .tag {
	left: 6px;
	top: 6px;
	height: 20px;
	padding: 0 8px;
	border-radius: 10px;
	font-size: 10px;
}

.sticker {
	width: 100%;
	object-fit: contain;
	filter: drop-shadow(2px 0 0 var(--card)) drop-shadow(-2px 0 0 var(--card))
		drop-shadow(0 2px 0 var(--card)) drop-shadow(0 -2px 0 var(--card))
		drop-shadow(0 4px 6px rgba(14, 15, 18, 0.16));
}

.sticker-top {
	height: 110px;
	transform: rotate(-5deg);
}

.sticker-bottom {
	height: 130px;
	transform: rotate(3deg);
}

.sticker-shoes {
	height: 80px;
	transform: rotate(-6deg);
}

.step-outfit {
	height: 176px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 0 0 1px var(--line);
}

.step-index {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink-2);
}

/* Features */

.feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

.feature-copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.feature-lede {
	margin: 0;
	font-size: 17px;
	color: var(--ink-2);
}

.check-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
}

.check-list li {
	display: flex;
	gap: 10px;
}

.check-list svg {
	flex: none;
	margin-top: 3px;
	color: var(--accent);
}

.outfit-stage {
	border-radius: 24px;
	background: var(--paper);
	padding: 40px 24px;
	display: flex;
	justify-content: center;
}

.outfit-canvas {
	position: relative;
	width: 100%;
	max-width: 460px;
	aspect-ratio: 460 / 420;
}

.outfit-card {
	position: absolute;
	width: 58%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 16px;
	box-shadow:
		0 0 0 1px var(--line),
		var(--shadow-raise);
}

.outfit-card-back {
	left: 0;
	top: 0;
	transform: rotate(-4deg);
}

.outfit-card-front {
	right: 0;
	bottom: 0;
	transform: rotate(4deg);
}

.tryon-stage {
	position: relative;
	border-radius: 24px;
	background: var(--paper);
	padding: 32px 32px 64px;
	display: flex;
	justify-content: flex-start;
}

.tryon-panel {
	position: relative;
	width: 74%;
	max-width: 360px;
	border-radius: 24px;
	background: var(--card);
	overflow: hidden;
	box-shadow:
		0 0 0 1px var(--line),
		var(--shadow-float);
}

.tryon-head {
	height: 44px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-bottom: 1px solid var(--line-soft);
}

.tryon-title {
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tryon-badge {
	flex: none;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--ink-2);
}

.tryon-video {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top;
	background: var(--line);
}

.tryon-rail {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	display: flex;
	gap: 8px;
	overflow: hidden;
}

.tryon-thumb {
	height: 56px;
	width: 56px;
	flex: none;
	border-radius: 12px;
	background: var(--card);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tryon-thumb-selected {
	box-shadow: 0 0 0 2px var(--accent);
}

.tryon-thumb img {
	width: 44px;
	height: 44px;
	object-fit: contain;
}

.tryon-spacer {
	flex: 1;
}

.tryon-swap {
	flex: none;
	height: 56px;
	padding: 0 14px;
	border-radius: 12px;
	background: var(--ink);
	color: var(--card);
	font-size: 13px;
	white-space: nowrap;
	display: flex;
	align-items: center;
}

.pip {
	position: absolute;
	right: 24px;
	bottom: 24px;
	width: 40%;
	max-width: 230px;
	border-radius: 20px;
	background: var(--card);
	overflow: hidden;
	box-shadow:
		0 0 0 1px var(--line),
		var(--shadow-float-strong);
}

.pip-head {
	height: 36px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	border-bottom: 1px solid var(--line-soft);
}

.pip-title {
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pip-badge {
	flex: none;
	font-family: var(--font-mono);
	font-size: 9px;
	color: var(--ink-2);
}

.pip-video {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: var(--line);
}

/* Scenes and partnerships */

.scenes-lede {
	margin: 0;
	font-size: 17px;
	color: var(--dark-ink-2);
	text-wrap: pretty;
}

.scenes-a {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 20px;
}

.scenes-b {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 20px;
	align-items: start;
}

.scene {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.scene-frame {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	background: var(--dark-tile);
}

.scene-media {
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: center top;
	background: var(--dark-tile);
}

.scene-wide {
	aspect-ratio: 3 / 2;
}

.scene-square {
	aspect-ratio: 1 / 1;
}

.scene-badge {
	position: absolute;
	left: 16px;
	top: 16px;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--scrim-badge);
	color: var(--dark-ink);
	font-size: 12px;
	display: flex;
	align-items: center;
}

.scene-caption {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.scene-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--dark-ink);
}

.scene-desc {
	font-size: 14px;
	color: var(--dark-ink-2);
}

.business {
	border-radius: 24px;
	background: var(--dark-card);
	box-shadow: inset 0 0 0 1px var(--dark-line);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.business-intro {
	margin: 0;
	font-size: 15px;
	color: var(--dark-ink-2);
}

.business .check-list {
	gap: 8px;
	color: var(--dark-ink);
}

.business .check-list svg {
	color: var(--dark-accent);
}

.business-contacts {
	margin: 0;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 16px;
	font-size: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--dark-line);
}

.business-contacts dt {
	color: var(--dark-ink-2);
}

.business-contacts dd {
	margin: 0;
	color: var(--dark-ink);
	overflow-wrap: anywhere;
}

/* Privacy */

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

.privacy-card {
	border-radius: 16px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--line);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.privacy-card h3 {
	margin: 0;
	font-size: 17px;
}

.privacy-card p {
	margin: 0;
	font-size: 14px;
	color: var(--ink-2);
}

/* Pricing */

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

.price-card {
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px var(--line);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.price-card-featured {
	box-shadow: inset 0 0 0 2px var(--accent);
}

.price-name {
	font-size: 15px;
	font-weight: 600;
}

.price-amount {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 36px;
	line-height: 1.1;
}

.price-desc,
.price-note {
	font-size: 14px;
	color: var(--ink-2);
}

.price-note {
	margin: 0;
}

/* FAQ */

.faq {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 48px;
}

.faq-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line);
}

.faq-item h3 {
	margin: 0;
	font-size: 17px;
}

.faq-item p {
	margin: 0;
	font-size: 15px;
	color: var(--ink-2);
}

/* Closing call to action */

.cta {
	background: var(--ink);
	color: var(--card);
	padding: 80px 0;
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.cta-title {
	max-width: 16em;
}

/* Footer */

.site-footer {
	background: var(--card);
	border-top: 1px solid var(--line-soft);
	padding: 40px 0;
}

.footer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	font-size: 13px;
	color: var(--ink-2);
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.footer-brand-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--ink);
}

.footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.footer-row a {
	color: var(--ink-2);
	text-decoration: none;
}

@media (max-width: 900px) {
	.hero,
	.feature {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.three,
	.privacy,
	.faq {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.nav-links {
		display: none;
	}

	.h1 {
		font-size: 40px;
	}

	.h2 {
		font-size: 30px;
	}

	.feature-media {
		order: -1;
	}

	.scenes-a,
	.scenes-b {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

@media (max-width: 560px) {
	.wrap {
		padding: 0 16px;
	}

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

	.hide-sm {
		display: none;
	}

	.pip {
		top: 24px;
		bottom: auto;
	}

	.tryon-stage {
		padding-bottom: 32px;
	}
}