/* Home page. Figma: Home / Desktop 10:7 (1440) and Home / Mobile 22:752 (390). Loaded on the front page only. */

/* Hero 10:27 */
.uh-hero { display: flex; height: 680px; background: linear-gradient(to right, var(--uh-plum-deep), var(--uh-plum)); }
.uh-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 26px;
	width: min(760px, 52.78vw);
	flex: none;
	padding: 0 min(56px, 3.89vw) 0 var(--uh-gutter);
	overflow: hidden;
}
.uh-hero .uh-eyebrow { color: var(--uh-gold); }
.uh-hero__lede { color: var(--uh-sand); }
.uh-hero__actions { display: flex; align-items: flex-start; gap: 16px; }
.uh-hero__proof { display: flex; align-items: center; gap: 14px; color: var(--uh-sand); font-size: 14px; line-height: 23px; white-space: pre; }
.uh-hero__proof-bar { width: 34px; height: 2px; flex: none; background: var(--uh-gold); }
.uh-hero__photo { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; }
.uh-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.uh-hero__place {
	position: absolute;
	top: 40px;
	left: 56px;
	color: #fff;
	opacity: 0.9;
	font-family: var(--uh-serif);
	font-size: 14px;
	font-style: italic;
	font-weight: 300;
	line-height: 23px;
	font-variation-settings: "SOFT" 0, "WONK" 1;
	white-space: nowrap;
}
.uh-hero__rating {
	position: absolute;
	top: 520px;
	left: 56px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 28px;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 18px 40px rgb(41 13 46 / 0.28);
	white-space: nowrap;
}
.uh-hero__rating-note { color: var(--uh-muted); font-size: 14px; line-height: 23px; }

/* Stats 10:45. Item widths pinned to Figma (whole-pixel text boxes). */
.uh-stats {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 48px min(80px, 5.56vw);
	background: var(--uh-cream);
	white-space: nowrap;
}
.uh-stats__item { display: flex; flex-direction: column; gap: 6px; }
.uh-stats__item:nth-child(1),
.uh-stats__item:nth-child(2) { width: 174px; }
.uh-stats__item:nth-child(3) { width: 257px; }
.uh-stats__item:nth-child(4) { width: 132px; }

/* The Difference 10:58 */
.uh-diff { display: flex; align-items: flex-start; gap: min(96px, 6.67vw); padding: 112px var(--uh-gutter); background: #fff; }
.uh-diff__intro { display: flex; flex-direction: column; gap: 22px; width: min(430px, 29.87vw); flex: none; }
.uh-diff__list { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.uh-diff__row { display: flex; align-items: flex-start; gap: 30px; padding: 36px 0; border-top: 1px solid #e7ddd0; }
.uh-diff__row:first-child { padding-top: 0; border-top: 0; }
.uh-diff__num {
	flex: none;
	color: var(--uh-gold);
	font-family: var(--uh-serif);
	font-size: 34px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: -0.01em;
	font-variation-settings: "SOFT" 0, "WONK" 1;
	white-space: nowrap;
}
.uh-diff__row:nth-child(1) .uh-diff__num { width: 38px; }
.uh-diff__row:nth-child(2) .uh-diff__num { width: 44px; }
.uh-diff__row:nth-child(3) .uh-diff__num { width: 42px; }
.uh-diff__text { display: flex; flex-direction: column; gap: 10px; flex: 1 1 0; min-width: 0; }

/* Healthy Pillars 11:94. Figma frame is a fixed 870 tall. */
.uh-pillars { display: flex; align-items: flex-start; gap: min(88px, 6.12vw); min-height: 870px; padding: 104px var(--uh-gutter); background: #fff; }
.uh-pillars__intro { display: flex; flex-direction: column; gap: 22px; width: min(400px, 27.78vw); flex: none; }
.uh-pillars__link { color: var(--uh-teal); }
.uh-pillars__grid { display: flex; gap: min(56px, 3.89vw); flex: 1 1 0; min-width: 0; }
.uh-pillars__col { flex: 1 1 0; min-width: 0; }
.uh-pillar { display: flex; flex-direction: column; gap: 12px; padding: 26px 0; border-top: 1px solid #ece3d6; }
.uh-pillar:first-child { padding-top: 0; border-top: 0; }
.uh-pillar__icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 23px; background: var(--uh-teal-tint); }
.uh-pillar__icon img { width: 24px; height: 24px; }
.uh-pillar__text { display: flex; flex-direction: column; gap: 12px; }
.uh-pillar__title {
	color: var(--uh-charcoal);
	font-family: var(--uh-serif);
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.002em;
}

/* Featured Listings 11:27 */
.uh-featured { display: flex; flex-direction: column; gap: 44px; padding: 100px var(--uh-gutter) 104px; background: #f3edf1; }
.uh-featured__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.uh-featured__title { display: flex; flex-direction: column; gap: 16px; }
.uh-featured__title .uh-h2 { max-width: 640px; }
.uh-featured__all { color: var(--uh-plum); white-space: pre; }
.uh-featured__cards { display: flex; align-items: flex-start; gap: 28px; }
.uh-featured__cards > .uh-card { width: min(620px, 43.06vw); flex: none; }
.uh-featured__stack { display: flex; flex-direction: column; gap: 28px; flex: 1 1 0; min-width: 0; }

/* Meet Kristin 12:84 */
.uh-kristin { display: flex; align-items: center; gap: min(72px, 5vw); padding: 104px var(--uh-gutter); background: var(--uh-cream); }
.uh-kristin__portrait { position: relative; width: min(520px, 36.12vw); height: 600px; flex: none; overflow: hidden; border-radius: 6px; }
.uh-kristin__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.uh-kristin__name-tag {
	position: absolute;
	top: 32px;
	left: 32px;
	color: #fff;
	opacity: 0.95;
	font-family: var(--uh-serif);
	font-size: 16px;
	font-style: italic;
	font-weight: 300;
	line-height: 26px;
	font-variation-settings: "SOFT" 0, "WONK" 1;
	white-space: nowrap;
}
.uh-kristin__badge {
	position: absolute;
	top: 488px;
	left: 32px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 22px;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 14px 34px rgb(41 13 46 / 0.24);
	white-space: nowrap;
}
.uh-kristin__role { color: var(--uh-plum); font-family: var(--uh-serif); font-size: 17px; font-weight: 600; line-height: 22px; font-variation-settings: "SOFT" 0, "WONK" 1; }
.uh-kristin__org { color: var(--uh-muted); font-size: 14px; line-height: 23px; }
.uh-kristin__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: 1 1 0; min-width: 0; }
.uh-kristin__signature {
	color: var(--uh-plum);
	font-family: var(--uh-serif);
	font-size: 32px;
	font-style: italic;
	font-weight: 300;
	line-height: 43px;
	letter-spacing: -0.002em;
	font-variation-settings: "SOFT" 0, "WONK" 1;
	white-space: nowrap;
}

/* Testimonials 12:99 */
.uh-reviews { display: flex; flex-direction: column; gap: 46px; padding: 92px var(--uh-gutter) 96px; }
.uh-reviews .uh-eyebrow { color: var(--uh-gold); }
.uh-reviews .uh-h2 { max-width: 560px; color: #fff; }
.uh-reviews .uh-body-s { color: var(--uh-sand); }
.uh-reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.uh-reviews__title { display: flex; flex-direction: column; gap: 12px; flex: 1 1 0; }
.uh-reviews__score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.uh-reviews__score-num { color: var(--uh-gold); font-family: var(--uh-serif); font-size: 54px; font-weight: 600; line-height: 56px; letter-spacing: -0.01em; font-variation-settings: "SOFT" 0, "WONK" 1; }
.uh-reviews__grid { display: flex; align-items: flex-start; gap: 28px; }
.uh-reviews__stack { display: flex; flex-direction: column; gap: 28px; flex: 1 1 0; min-width: 0; }
.uh-review {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 30px;
	border-radius: 10px;
	background: rgb(255 255 255 / 0.06);
}
.uh-review::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 0.16); border-radius: inherit; pointer-events: none; }
.uh-review--lead { width: min(760px, 52.78vw); flex: none; gap: 20px; padding: 42px; }
.uh-review__stars { color: var(--uh-gold); font-size: 13px; font-weight: 600; line-height: 16px; letter-spacing: 0.06em; }
.uh-review__quote {
	margin: 0;
	color: #fff;
	font-family: var(--uh-serif);
	font-size: 20px;
	font-style: italic;
	font-weight: 300;
	line-height: 27px;
	letter-spacing: -0.002em;
	font-variation-settings: "SOFT" 0, "WONK" 1;
}
.uh-review--lead .uh-review__quote { font-size: 30px; line-height: 40px; }
.uh-review figcaption { display: flex; flex-direction: column; gap: 3px; }
.uh-review__name { color: var(--uh-gold); font-family: var(--uh-serif); font-size: 16px; font-weight: 600; line-height: 20px; font-variation-settings: "SOFT" 0, "WONK" 1; }

/* Sell and Buy CTA 12:122 */
.uh-cta { display: flex; flex-direction: column; gap: 40px; padding: 80px var(--uh-gutter); background: linear-gradient(to right, var(--uh-gold), #b8923f); color: var(--uh-plum-deep); }
.uh-cta__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.uh-cta__text { display: flex; flex-direction: column; gap: 16px; flex: 1 1 0; min-width: 0; }
.uh-cta .uh-eyebrow,
.uh-cta .uh-h2,
.uh-cta .uh-body-l { color: inherit; }
.uh-cta .uh-h2 { max-width: 680px; }
.uh-cta__rule { height: 1px; background: rgb(205 170 95 / 0.5); }

/* Mobile, Figma Home / Mobile 22:752. Pixel target 390; 390 to 1023 uses the same layout. */
@media (max-width: 1023px) {
	/* Hero 22:762 */
	.uh-hero { flex-direction: column; gap: 20px; height: auto; padding: 44px 26px 40px; }
	.uh-hero__copy { width: auto; gap: 20px; padding: 0; overflow: visible; }
	.uh-hero .uh-display { font-size: 34px; line-height: 37px; letter-spacing: -0.01em; }
	.uh-hero__lede { font-size: 16px; line-height: 28px; }
	.uh-hero__actions { flex-direction: column; align-items: stretch; gap: 20px; }
	.uh-hero__actions .uh-btn { justify-content: center; }
	.uh-hero__photo { flex: none; height: 280px; border-radius: 6px; }
	.uh-hero__rating { top: 196px; left: 20px; gap: 3px; padding: 16px 20px; box-shadow: none; }
	.uh-hero__rating .uh-stat { font-size: 34px; line-height: 35px; }

	/* Stats 22:774 */
	.uh-stats { flex-wrap: wrap; align-items: flex-start; row-gap: 28px; padding: 36px 26px; }
	.uh-stats__item:nth-child(n) { width: 50%; gap: 4px; }
	.uh-stats .uh-stat { font-size: 24px; line-height: 25px; }
	.uh-stats__item:first-child .uh-stat { font-size: 21px; line-height: 22px; }

	/* Difference 22:788 */
	.uh-diff { flex-direction: column; gap: 28px; padding: 56px 26px 48px; }
	.uh-diff__intro { width: auto; gap: 12px; }
	.uh-diff .uh-h2 { font-size: 30px; line-height: 34px; }
	.uh-diff__list { display: flex; flex-direction: column; gap: 28px; }
	.uh-diff__row { flex-direction: column; gap: 8px; padding: 0; border-top: 0; }
	.uh-diff__num { font-size: 26px; line-height: 27px; }
	.uh-diff__row:nth-child(n) .uh-diff__num { width: auto; }
	.uh-diff .uh-h3 { font-size: 21px; line-height: 26px; }
	.uh-diff__text { gap: 8px; }

	/* Pillars 22:849 */
	.uh-pillars { flex-direction: column; gap: 22px; min-height: 0; padding: 52px 26px; }
	.uh-pillars__intro { width: auto; gap: 10px; }
	.uh-pillars .uh-h2,
	.uh-featured .uh-h2,
	.uh-kristin .uh-h2 { font-size: 28px; line-height: 31px; }
	.uh-pillars__grid,
	.uh-pillars__col { display: flex; flex-direction: column; gap: 22px; }
	.uh-pillar { flex-direction: row; align-items: flex-start; gap: 14px; padding: 0; border-top: 0; }
	.uh-pillar__icon { flex: none; }
	.uh-pillar__text { flex: 1 1 0; gap: 5px; }
	.uh-pillar__title { font-size: 19px; line-height: 23px; }

	/* Featured 22:804 */
	.uh-featured { gap: 22px; padding: 52px 26px; }
	.uh-featured__title { gap: 10px; }
	.uh-featured__cards,
	.uh-featured__stack { flex-direction: column; align-items: stretch; gap: 22px; }
	.uh-featured__cards > .uh-card { width: auto; }
	.uh-card--feature .uh-card__photo { height: 268px; }
	.uh-card--feature .uh-card__caption { top: 234px; }

	/* Meet Kristin 22:884 */
	.uh-kristin { flex-direction: column; align-items: stretch; gap: 20px; padding: 52px 26px; }
	.uh-kristin__portrait { width: auto; height: 320px; }
	.uh-kristin__copy { gap: 20px; }
	.uh-kristin .uh-body-l { font-size: 16px; line-height: 28px; }

	/* Testimonials 22:891 */
	.uh-reviews { gap: 0; padding: 52px 26px; }
	.uh-reviews__grid { flex-direction: column; align-items: stretch; }
	.uh-review--lead { width: auto; gap: 16px; padding: 0; background: none; text-align: center; }
	.uh-review--lead::after { display: none; }
	.uh-review--lead .uh-review__quote { font-size: 24px; line-height: 32px; }
	.uh-review__byline { color: var(--uh-gold); font-size: 14px; line-height: 23px; white-space: pre-wrap; }

	/* Sell CTA 22:895 and Buy CTA 249:1038: two blocks, each with its own gradient */
	.uh-cta { gap: 0; padding: 0; background: none; }
	.uh-cta__row { flex-direction: column; align-items: stretch; gap: 20px; padding: 0 26px 52px; }
	.uh-cta__row--sell { padding: 52px 26px 24px; background: linear-gradient(140.28deg, var(--uh-gold) 14.286%, #b8923f 85.714%); }
	.uh-cta__row--buy { background: linear-gradient(136.15deg, var(--uh-gold) 14.286%, #b8923f 85.714%); }
	.uh-cta__row .uh-btn { justify-content: center; }
	.uh-cta__mobile-title {
		color: var(--uh-plum-deep);
		font-family: var(--uh-serif);
		font-size: 28px;
		font-weight: 600;
		line-height: 31px;
		letter-spacing: -0.005em;
		text-align: center;
	}
}

/* Fraunces at these sizes renders 1px higher in Chrome than in Figma (measured with qa/tools/shift.js,
   2026-10-22). The nudge moves glyphs only, not layout. Sizes not listed measured at 0. */
.uh-review--lead .uh-review__quote { position: relative; top: 1px; }
@media (max-width: 1023px) {
	.uh-hero .uh-display,
	.uh-diff .uh-h2,
	.uh-pillars .uh-h2,
	.uh-featured .uh-h2,
	.uh-kristin .uh-h2,
	.uh-cta__mobile-title { position: relative; top: 1px; }
}