.if-home-page {
	--if-green: #0f4c00;
	--if-soft: #f2f1ed;
	/* Prevent iOS/embedded browsers from inflating text inside this pixel-aligned hero. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	min-width: 0;
	overflow: hidden;
	background: #fff;
	color: #090909;
	font-family: Montserrat, Arial, sans-serif;
}
.if-home-page * { box-sizing: border-box; }
.if-home-page img { display: block; max-width: 100%; }
.if-home-page picture { display: block; }
.if-home-container { width: min(calc(100% - 17vw), 1600px); margin-inline: auto; }

.if-home-hero { position: relative; height: min(46.875vw, 900px); min-height: 610px; overflow: hidden; color: #fff; }
/* Desktop Figma frame: rotate the 900×1920 crop, then place the artwork at its explicit offset. */
.if-home-hero__picture { position: absolute; left: 50%; top: 50%; width: min(46.875vw, 900px); height: 100vw; overflow: hidden; transform: translate(-50%, -50%) rotate(90deg); }
.if-home-hero__picture .if-home-hero__bg { position: absolute; left: -11.03%; top: 0; width: 116.3%; height: 100%; max-width: none; object-fit: fill; transform: none; }
.if-home-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 36%) 0%, rgb(0 0 0 / 13%) 58%, rgb(0 0 0 / 4%) 100%); }
.if-home-hero__content { height: 100%; position: relative; }
.if-home-hero__intro { position: absolute; left: 0; top: 19%; width: 46%; margin: 0; font-size: 16px; line-height: 30px; }
.if-home-hero__title { position: absolute; left: 0; bottom: 13%; }
.if-home-hero__title img { width: 180px; height: 64px; margin: 0 0 18px 8px; object-fit: contain; object-position: left center; }
.if-home-hero__title h1 { margin: 0; color: #fff; font-size: clamp(44px, 3.34vw, 64px); line-height: 1.17; font-weight: 700; letter-spacing: -.025em; }
.if-home-conditions { position: absolute; right: 0; bottom: 15.5%; width: 48%; display: grid; grid-template-columns: repeat(3, 1fr); }
.if-home-conditions article { min-height: 132px; padding: 0 22px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.if-home-conditions article + article { border-left: 1px solid rgb(255 255 255 / 76%); }
.if-home-conditions img { width: 72px; height: 62px; margin-bottom: 15px; object-fit: contain; }
.if-home-conditions strong { font-size: 15px; line-height: 20px; }
.if-home-conditions span { font-size: 12px; line-height: 20px; }
.if-home-proof { display: none; }

.if-home-best { min-height: 1870px; padding: 185px 0 155px; }
.if-home-best__header { text-align: center; }
.if-home-best__header h2 { margin: 0 0 42px; color: var(--if-green); font-size: 40px; line-height: 1.2; font-weight: 600; }
.if-home-best__header p { margin: 0; font-size: 24px; line-height: 40px; }
.if-home-best__header > picture { position: relative; width: 707px; height: 196px; margin: 82px auto 110px; overflow: hidden; }
/* The Figma export is deliberately enlarged and offset inside this 707×196 frame. */
.if-home-best__header > picture img { position: absolute; left: -10.04%; top: -32.66%; width: 110.04%; height: 132.67%; max-width: none; object-fit: fill; }
.if-home-best__grid { width: min(1350px, 86%); margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 585px)); justify-content: space-between; gap: 80px; }
.if-home-product { text-align: center; }
.if-home-product > picture { position: relative; width: 585px; height: 710px; overflow: hidden; }
.if-home-product > picture img { position: absolute; max-width: none; object-fit: fill; }
.if-home-product:nth-child(1) > picture img { left: 0; top: -4.93%; width: 100%; height: 109.86%; }
.if-home-product:nth-child(2) > picture img { left: 0; top: 0; width: 101.46%; height: 104.51%; }
.if-home-product h3 { margin: 32px 0 20px; font-size: 24px; line-height: 30px; font-weight: 700; }
.if-home-product p { margin: 0; font-size: 16px; line-height: 30px; }
.if-home-product p strong { font-weight: 400; }

.if-home-story { width: 100%; height: min(59.69vw, 1146px); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.if-home-story__image { position: relative; overflow: hidden; }
.if-home-story__image > picture { position: absolute; inset: 0; overflow: hidden; }
.if-home-story__image > picture img { position: absolute; max-width: none; object-fit: fill; }
/* These three crops reproduce the separate image transforms in the PC Figma canvas. */
.if-home-story:nth-of-type(3) .if-home-story__image > picture img { left: -20.417%; top: -22.688%; width: 144.271%; height: 214.781%; }
.if-home-story:nth-of-type(4) .if-home-story__image > picture img { left: 0; top: 0; width: 100%; height: 104.76%; }
.if-home-story:nth-of-type(5) .if-home-story__image > picture img { left: -20.76%; top: -50.35%; width: 134.96%; height: 150.37%; }
.if-home-story__copy { position: relative; padding: 17% 8% 8%; display: flex; flex-direction: column; align-items: center; background: var(--if-soft); text-align: center; }
.if-home-story__copy h2 { margin: 0 0 30px; font-size: 40px; line-height: 1.2; font-weight: 700; }
.if-home-story__copy p { max-width: 650px; margin: 0; font-size: 20px; line-height: 30px; }
.if-home-story__product { position: relative; flex: 0 0 auto; margin-top: auto; overflow: hidden; }
.if-home-story__product > picture { position: absolute; inset: 0; }
.if-home-story__product > picture img { position: absolute; max-width: none; object-fit: fill; }
.if-home-story__product--cream { width: min(12.468vw, 240px); height: min(23.377vw, 450px); }
.if-home-story__product--cream > picture img { width: 208.33%; height: 133.47%; left: -57.08%; top: -23.84%; }
.if-home-story__product--swatch { width: min(23.636vw, 455px); height: min(23.636vw, 455px); }
.if-home-story__product--swatch > picture img { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.if-home-story__product--cleanser { width: min(11.013vw, 212px); height: min(24vw, 462px); }
.if-home-story__product--cleanser > picture img { width: 235.85%; height: 130%; left: -75%; top: -18.46%; }

@media (max-width: 1600px) {
	.if-home-container { width: calc(100% - 120px); }
	.if-home-hero__intro { width: 48%; font-size: 14px; line-height: 25px; }
	.if-home-conditions { width: 50%; }
	.if-home-best { min-height: 1500px; padding-block: 140px 120px; }
	.if-home-best__header > picture { margin-block: 60px 85px; }
	.if-home-best__grid { width: min(1120px, 88%); }
	.if-home-product > picture { width: 100%; height: auto; aspect-ratio: 585 / 710; }
	.if-home-story__copy { padding-top: 14%; }
	.if-home-story__copy h2 { font-size: 32px; }
	.if-home-story__copy p { font-size: 16px; line-height: 26px; }
}

/* Scale the 1920px Figma product artwork proportionally on notebook-sized desktops. */
@media (min-width: 1101px) and (max-width: 1600px) {
	.if-home-best__header > picture { width: 36.822917vw; height: auto; aspect-ratio: 707 / 196; }
	.if-home-best__grid { width: 68.125vw; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7.03125vw; }
}

@media (max-width: 1100px) {
	.if-home-container { width: calc(100% - 48px); }
	.if-home-hero { height: 46.75vw; min-height: 0; }
	/* Keep the 900×1920 Figma crop proportional at intermediate desktop/tablet widths. */
	.if-home-hero__picture .if-home-hero__bg { left: -11.03%; top: 0; width: 116.3%; height: 100%; }
	.if-home-hero__intro { top: 15%; width: 48%; font-size: 9px; line-height: 15px; }
	.if-home-hero__title { bottom: 11%; }
	.if-home-hero__title img { width: 92px; height: 34px; margin-bottom: 8px; }
	.if-home-hero__title h1 { font-size: 30px; }
	.if-home-conditions { bottom: 11%; }
	.if-home-conditions article { min-height: 72px; padding-inline: 10px; }
	.if-home-conditions img { width: 38px; height: 34px; margin-bottom: 6px; }
	.if-home-conditions strong { font-size: 8px; line-height: 12px; }
	.if-home-conditions span { font-size: 7px; line-height: 11px; }
	.if-home-best { min-height: 0; padding: 80px 0 72px; }
	.if-home-best__header h2 { margin-bottom: 20px; font-size: 24px; }
	.if-home-best__header p { font-size: 13px; line-height: 22px; }
	.if-home-best__header > picture { width: 390px; height: auto; aspect-ratio: 707 / 196; margin: 36px auto 52px; }
	.if-home-best__grid { width: 76%; gap: 50px; }
	.if-home-product h3 { margin: 18px 0 10px; font-size: 14px; line-height: 18px; }
	.if-home-product p { font-size: 9px; line-height: 15px; }
	.if-home-story { height: 59.69vw; }
	.if-home-story__copy { padding: 10% 5% 4%; }
	.if-home-story__copy h2 { margin-bottom: 14px; font-size: 20px; line-height: 1.2; }
	.if-home-story__copy p { max-width: 86%; font-size: 10px; line-height: 16px; }
}

/* Covers mobile browsers that report a desktop-sized layout viewport. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
	.if-home-container { width: calc(100% - clamp(44px, 16.533vw, 79px)); }
	.if-home-hero { height: auto; min-height: 0; aspect-ratio: 375 / 175.781; isolation: isolate; }
	/* Mirrors the Figma mobile crop: a 175.781×375 image frame, rotated after its source is offset. */
	.if-home-hero__picture { position: absolute; left: 50%; top: 50%; width: 46.875%; height: 100vw; overflow: hidden; transform: translate3d(-50%, -50%, 0) rotate(90deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
	.if-home-hero .if-home-hero__bg { position: absolute; left: -11.03%; top: 0; width: 116.3%; height: 100%; max-width: none; object-fit: fill; transform: none; }
	.if-home-hero__overlay { display: none; }
	/* Keep foreground typography in a stable GPU layer while iOS scrolls the rotated image. */
	.if-home-hero__overlay { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
	.if-home-hero__content { width: 100%; height: 100%; margin: 0; isolation: isolate; -webkit-transform: translateZ(0); transform: translateZ(0); }
	.if-home-hero__intro, .if-home-hero__title, .if-home-conditions { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
	.if-home-hero__intro { top: 73.39%; left: 5.867%; width: 45.6%; font-size: clamp(3.6px, 1.067vw, 5px); line-height: 1.5; }
	.if-home-hero__title { inset: 0; }
	.if-home-hero__title img { position: absolute; top: 62.58%; left: 5.867%; width: 10.933%; height: auto; margin: 0; }
	.if-home-hero__title h1 { position: absolute; top: 13.65%; left: 4.8%; margin: 0; font-size: clamp(16px, 5.333vw, 22px); line-height: 1; }
	.if-home-conditions { display: none; }
	.if-home-proof { position: absolute; inset: 0; display: block; color: #fff; text-align: right; pointer-events: none; }
	.if-home-proof img { position: absolute; top: 49.5%; right: 5.333%; width: 6.133%; height: auto; }
	.if-home-proof strong { position: absolute; top: 62.58%; right: 3.733%; width: 17.6%; margin: 0; font-size: clamp(20px, 6.933vw, 28px); line-height: .74; font-weight: 700; text-align: right; }
	.if-home-proof span { position: absolute; top: 76.8%; right: 5.333%; width: 22.933%; font-size: clamp(6px, 2.133vw, 9px); line-height: 1.125; font-weight: 600; }
	/* Keep the attribution below the two-line sales label on real mobile text rendering. */
	.if-home-proof small { position: absolute; top: 89%; right: 5.6%; width: 27.47%; font-size: clamp(3.6px, 1.067vw, 5px); line-height: 1.15; font-weight: 600; }
	.if-home-conditions article { min-height: 21px; padding: 0 clamp(3px, 1.6vw, 8px); }
	.if-home-conditions img { width: clamp(10px, 3.2vw, 15px); height: clamp(10px, 3.733vw, 18px); margin-bottom: 4px; }
	.if-home-conditions strong,
	.if-home-conditions span { font-size: clamp(2.7px, .8vw, 3.8px); line-height: 1.34; }

	.if-home-best { min-height: 0; height: auto; padding: clamp(11px, 3.467vw, 17px) 0 clamp(26px, 8.267vw, 40px); }
	.if-home-best .if-home-container { width: 100%; }
	.if-home-best__header h2 { margin-bottom: 0; font-size: clamp(9px, 2.667vw, 12.8px); line-height: 2.4; }
	.if-home-best__header p { font-size: clamp(3.6px, 1.067vw, 5.2px); line-height: 1.5; white-space: nowrap; }
	.if-home-best__header > picture { width: 50.667vw; height: auto; margin: clamp(6px, 1.867vw, 9px) auto clamp(32px, 10.133vw, 49px); overflow: hidden; }
	.if-home-best__header > picture { position: relative; }
	.if-home-best__header > picture img { position: absolute; left: -10.04%; top: -32.66%; width: 110.04%; height: 132.67%; max-width: none; object-fit: fill; }
	.if-home-best__grid { width: 85.333vw; margin-left: 6.933vw; margin-right: 0; grid-template-columns: 143fr 144fr; justify-content: stretch; gap: 8.8vw; }
	.if-home-product picture { display: block; width: 100%; aspect-ratio: 143 / 174; overflow: hidden; }
	.if-home-product picture { position: relative; }
	.if-home-product picture img { position: absolute; max-width: none; object-fit: fill; }
	.if-home-product:nth-child(1) picture img { left: 0; top: -4.93%; width: 100%; height: 109.86%; }
	.if-home-product:nth-child(2) picture img { left: 0; top: 0; width: 101.46%; height: 104.51%; }
	.if-home-product h3 { margin: clamp(7px, 2.4vw, 12px) 0 clamp(5px, 1.6vw, 8px); font-size: clamp(4.5px, 1.333vw, 6.4px); line-height: 1.2; }
	.if-home-product p { font-size: clamp(5.2px, 1.6vw, 7.7px); line-height: 1.34; }

	.if-home-story { height: auto; display: flex; flex-direction: column; }
	.if-home-story__image { order: 1; position: relative; width: 100%; height: auto; aspect-ratio: 375 / 446; overflow: hidden; }
	.if-home-story__image picture,
	.if-home-story__image picture img { width: 100%; height: 100%; }
	.if-home-story__image picture img { position: absolute; max-width: none; object-fit: fill; }
	.if-home-story:nth-of-type(3) .if-home-story__image picture img { left: -16.267%; top: -16.143%; width: 148.453%; height: 221.84%; }
	.if-home-story__copy { order: 2; position: relative; z-index: 2; min-height: 0; height: auto; aspect-ratio: 375 / 333; margin-top: -32.8%; padding: 7.8% 8% 2.7%; }
	.if-home-story__copy h2 { margin-bottom: clamp(6px, 2.133vw, 10px); font-size: clamp(12px, 3.733vw, 18px); line-height: 2.14; }
	.if-home-story__copy p { max-width: 73.333%; font-size: clamp(7px, 2.133vw, 10.2px); line-height: 1.25; }
	.if-home-story__product { margin-top: auto; }
	/* Figma places the P3 cream directly below its description; auto spacing pushes it too low. */
	.if-home-story__product--cream { margin-top: clamp(14px, 4vw, 18px); }
	/* The mask swatch is placed below its copy in Figma, not bottom-aligned in the whole panel. */
	.if-home-story--reverse .if-home-story__product { margin-top: clamp(48px, 12vw, 56px); }
	/* The cleanser cutout follows its description at a fixed Figma gap as well. */
	.if-home-story__product--cleanser { margin-top: clamp(18px, 5.067vw, 22px); }
	.if-home-story__product picture { width: 100%; height: 100%; }
	.if-home-story__product picture img { position: absolute; max-width: none; }
	.if-home-story__product--cream { width: 28%; height: auto; aspect-ratio: 105 / 194; }
	.if-home-story__product--swatch { width: 46.133%; height: auto; aspect-ratio: 1; }
	.if-home-story__product--cleanser { width: 23.467%; height: auto; aspect-ratio: 88 / 192; }
	.if-home-story:nth-of-type(4) .if-home-story__image { aspect-ratio: 375 / 447; }
	.if-home-story:nth-of-type(4) .if-home-story__image picture img { left: 0; top: 0; width: 100%; height: 104.76%; }
	.if-home-story:nth-of-type(4) .if-home-story__copy { aspect-ratio: 375 / 335; margin-top: -23.2%; }
	.if-home-story:nth-of-type(5) .if-home-story__image { aspect-ratio: 375 / 449; }
	.if-home-story:nth-of-type(5) .if-home-story__image picture img { left: -20.76%; top: -50.35%; width: 134.96%; height: 150.37%; }
	/* Exact final panel height from the mobile Figma frame. */
	.if-home-story:nth-of-type(5) .if-home-story__copy { aspect-ratio: 375 / 336; margin-top: -34.933%; }
}

@media (max-width: 359px) {
	.if-home-container { width: calc(100% - 44px); }
	.if-home-best .if-home-container { width: 100%; }
	.if-home-best__header p { white-space: normal; }
	.if-home-product p { font-size: 5px; }
}

/* Latest PC Figma frame 808:2834 — keep this composition separate from mobile. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine), (min-width: 1025px) {
	.if-home-container { width: min(83.333333vw, 1600px); }
	.if-home-hero { height: min(47.916667vw, 920px); min-height: 0; }
	/* The Figma source is a portrait export: rotate and crop it proportionally instead of stretching it wide. */
	/* Keep both dimensions on the same 920:1920 Figma ratio at ultra-wide widths. */
	.if-home-hero__picture { left: 50%; top: 50%; width: 47.916667vw; height: 100vw; transform: translate(-50%, -50%) rotate(90deg); }
	.if-home-hero__picture .if-home-hero__bg { left: -11.03%; top: 0; width: 116.3%; height: 100%; object-fit: fill; }
	.if-home-hero__overlay { display: none; }
	.if-home-hero__intro { top: 70.76%; left: 0; width: 42.44%; font-size: min(.833333vw, 16px); line-height: min(1.5625vw, 30px); }
	.if-home-hero__title { inset: 0; }
	.if-home-hero__title h1 { position: absolute; top: 16.52%; left: -.82%; margin: 0; font-size: min(5vw, 96px); line-height: min(5.729167vw, 110px); letter-spacing: 0; }
	.if-home-hero__title img { position: absolute; top: 58.91%; left: 0; width: min(13.541667vw, 260px); height: auto; margin: 0; }
	.if-home-conditions { display: none; }
	.if-home-proof { position: absolute; inset: 0; display: block; color: #fff; pointer-events: none; }
	.if-home-proof img { position: absolute; top: 63.26%; right: -3.2%; width: min(6.197917vw, 119px); height: auto; }
	.if-home-proof strong { position: absolute; top: 80.76%; right: -5.58%; width: min(18.4375vw, 354px); margin: 0; font-size: min(6.666667vw, 128px); line-height: .51; font-weight: 700; text-align: center; }
	.if-home-proof span { position: absolute; top: 78.91%; left: 60.04%; width: 21.89%; font-size: min(1.666667vw, 32px); line-height: min(1.875vw, 36px); font-weight: 600; }
	.if-home-proof small { position: absolute; top: 75.11%; left: 60.04%; width: 23%; font-size: min(.677083vw, 13px); line-height: min(1.041667vw, 20px); font-weight: 600; }
}