/* ==========================================================================
   DSMS — New UI Referral / Partnership page.
   Figma: desktop "Refferal" 63:1278 (1440 / content 1200), phone "Referral" 182:10412 (440).
   Shared: chrome.css (tokens, buttons), home.css (headings, dots, carousel counter),
   service2.css (hero, photo slider). JS: home.js (phone carousel), service.js (slider).
   ========================================================================== */

.dsms-ui2--referral .sv-hero { height: clamp(320px, 28.48vw, max(410px, 70svh)); }

/* ---------- Become a Partner (63:1289) ---------- */
.rf-partner .hm-head { gap: 10px; }
.rf-partner .hm-head__sub { max-width: 994px; }
.rf-partner__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin-top: 77px; /* 32px + the icon sticking out of the card (45px) */
}
.rf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 239px;
	padding: 60px 22px 32px;
	border: 2px solid var(--hm-primary);
	background: var(--hm-gray-bg);
	text-align: center;
}
.rf-card__icon {
	position: absolute;
	top: -45px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 85px;
	height: 85px;
	padding: 4px 7px;
	color: var(--hm-primary);
	transform: translateX(-50%);
}
.rf-card__icon svg,
.rf-card__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rf-card__body { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.rf-card__title { margin: 0; color: var(--hm-black); font-family: var(--hm-font); font-size: 20px; font-weight: 700; line-height: 1.4; }
.rf-card__text { margin: 0; color: #000; font-size: 16px; line-height: 24px; }

/* Photo cards (Figma "UI Layout Fix" 108:7607): 3 × 384×380, title on a dark gradient;
   on hover the gradient covers the card and the description shows. */
@media (min-width: 768px) {
	.rf-partner__grid:has(.rf-card--photo) { gap: 24px; margin-top: 32px; }
	.rf-card--photo {
		justify-content: flex-end;
		height: 380px;
		min-height: 0;
		padding: 0;
		border: 0;
		background: var(--hm-black);
		overflow: hidden;
	}
	.rf-card--photo .rf-card__media { position: absolute; inset: 0; }
	.rf-card--photo .rf-card__media picture { display: block; width: 100%; height: 100%; }
	.rf-card--photo .rf-card__media img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		transition: transform .6s ease;
	}
	.rf-card--photo:hover .rf-card__media img { transform: scale(1.04); }
	/* Crop of the three design photos (cards are narrower than the 3:2 photos). */
	.rf-card--photo:nth-child(1) .rf-card__media img { object-position: 0 50%; }
	.rf-card--photo:nth-child(2) .rf-card__media img { object-position: 16% 50%; }
	.rf-card--photo:nth-child(3) .rf-card__media img { object-position: 2% 50%; }
	.rf-card--photo .rf-card__body {
		position: relative;
		justify-content: flex-end;
		gap: 12px;
		min-height: 66px;
		padding: 16px 24px;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%);
		transition: min-height .45s ease;
	}
	.rf-card--photo .rf-card__title { color: var(--hm-neutral); font-size: 24px; }
	.rf-card--photo .rf-card__text {
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		color: #f4f3f6;
		transition: max-height .45s ease, opacity .3s ease;
	}
	.rf-card--photo:is(:hover, :focus-visible, :focus-within) .rf-card__body { justify-content: center; min-height: 100%; }
	.rf-card--photo:is(:hover, :focus-visible, :focus-within) .rf-card__text { max-height: 10em; opacity: 1; }
	.rf-card--photo:focus-visible { outline: 2px solid var(--hm-primary); outline-offset: 3px; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
	.rf-card--photo .rf-card__media img,
	.rf-card--photo .rf-card__body,
	.rf-card--photo .rf-card__text { transition: none; }
}

/* ---------- Referral Opportunities (63:1657) ---------- */
.rf-opp {
	display: grid;
	grid-template-columns: minmax(0, 412px) minmax(0, 1fr);
	align-items: center;
	gap: 60px;
	padding-left: max(var(--hm-gutter), calc((100vw - var(--hm-container)) / 2));
	overflow: hidden;
	overflow: clip;
}
.rf-opp--noimg { grid-template-columns: minmax(0, 1fr); padding-right: max(var(--hm-gutter), calc((100vw - var(--hm-container)) / 2)); }
.rf-opp__text { display: flex; flex-direction: column; gap: 16px; }
.rf-opp__title { margin: 0; color: var(--hm-heading); font-family: var(--hm-font); font-size: 36px; font-weight: 700; line-height: 1.4; }
.rf-opp__lead { margin: 0; color: var(--hm-text); font-size: 18px; line-height: 1.5; }
/* Current photo 499×345, the next one smaller (404×279) on its right, off to the screen edge. */
.rf-opp .rf-opp__stage { --per: 1; --gap: 24px; --slide-w: 499px; margin-top: 0; clip-path: inset(-20px -100vw -20px 0); }
.rf-opp .sv-gallery__track { width: 499px; height: 345px; aspect-ratio: auto; }
.rf-opp .sv-gallery__slide { transform-origin: left center; }
.rf-opp .sv-gallery__slide.is-peek { transform: translateX(calc(var(--off) * (100% + var(--gap)))) scale(.81); }
.rf-opp .sv-gallery__slide.is-peek::after { opacity: 0; }
.rf-opp .sv-gallery__slide:not(.is-peek):not(.is-far) { z-index: 1; }
.rf-opp .hm-dots { margin-top: 12px; }

/* ---------- How it works (65:1735) ---------- */
.rf-how.hm-section--gray {
	display: grid;
	grid-template-columns: minmax(0, 612fr) minmax(0, 660fr);
	align-items: stretch;
	gap: 48px;
	padding-block: 0;
	padding-right: max(var(--hm-gutter), calc((100vw - var(--hm-container)) / 2));
}
.rf-how--noimg.hm-section--gray { grid-template-columns: minmax(0, 1fr); padding-left: max(var(--hm-gutter), calc((100vw - var(--hm-container)) / 2)); }
.rf-how__media { position: relative; min-height: 394px; }
.rf-how__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* The photo keeps the design's 612×394 shape (the section grows with it instead of becoming a
   wider, flatter strip). */
@media (min-width: 1200px) {
	.rf-how__media::before { content: ""; display: block; padding-top: 64.379%; }
}
/* Screens wider than the 1440 design: everything scales from the design.
   - How it works: the photo takes the same share of the screen as in the design (612 of 1440),
     the text column runs from the photo (+48px) to the right edge of the container.
   - Referral Opportunities: the next photo is cut at the right edge of the container, so both
     sections end on the same line (at 1440 it still runs off the screen edge as designed). */
@media (min-width: 1441px) {
	/* % (not vw) so the edges match the container also when the page has a scrollbar. */
	.rf-how.hm-section--gray { grid-template-columns: 42.5vw minmax(0, 1fr); padding-right: calc((100% - var(--hm-container)) / 2); }
	.rf-opp { padding-inline: calc((100% - var(--hm-container)) / 2); }
	.rf-opp .rf-opp__stage { clip-path: inset(-20px 0 -20px 0); }
}
.rf-how__body { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-block: 65px; }
.rf-how__head { display: flex; flex-direction: column; gap: 8px; }
.rf-how__title { margin: 0; color: var(--hm-heading); font-family: var(--hm-font); font-size: 36px; font-weight: 700; line-height: 1.4; }
.rf-how__note { margin: 0; color: var(--hm-primary); font-size: 14px; font-style: italic; line-height: 20px; }
.rf-how__list { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; list-style: none; }
.rf-how__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--hm-text-2); font-size: 18px; line-height: 1.5; }
.rf-how__list strong { font-weight: 700; }
.rf-how__list a { color: inherit; font-weight: 700; text-decoration: none; }
.rf-how__list a:hover { color: var(--hm-primary); }
.rf-how__check {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 4px;
	border-radius: 50%;
	background: var(--hm-primary);
	color: var(--hm-neutral);
}
.rf-how__check .dsms-icon { width: 100%; height: 100%; }

/* ---------- Current Affiliates (67:1797) ---------- */
.rf-aff.hm-section { margin-top: 0; }
.rf-aff__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
.rf-aff__item { display: flex; flex-shrink: 1; align-items: center; justify-content: center; min-width: 0; }
/* Static row (no JS / "reduce motion"): wrap instead of squeezing the logos together. */
.rf-aff__viewport:not(.is-marquee) .rf-aff__list { flex-wrap: wrap; justify-content: center; gap: 32px 48px; }
.rf-aff__item a { display: inline-flex; transition: opacity .2s ease; }
.rf-aff__item a:hover { opacity: .8; }
.rf-aff__logo { display: block; width: auto; max-width: 180px; height: auto; max-height: 118px; object-fit: contain; }
.rf-aff__name { color: var(--hm-neutral); font-size: 18px; font-weight: 600; text-align: center; }

/* Autoplay ticker (home.js adds .is-marquee once it has filled the row with copies). */
.rf-aff__viewport { margin-top: 32px; }
.rf-aff__viewport .rf-aff__list { margin-top: 0; }
.rf-aff__viewport.is-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.rf-aff__viewport.is-marquee .rf-aff__list {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	width: max-content;
	overflow: visible;
	scroll-snap-type: none;
	animation: rf-aff-marquee var(--mq-dur, 40s) linear infinite;
	will-change: transform;
}
.rf-aff__viewport.is-marquee .rf-aff__item { flex: 0 0 auto; padding-inline: 40px; }
.rf-aff__viewport.is-marquee:is(:hover, :focus-within, .is-paused) .rf-aff__list { animation-play-state: paused; }
@keyframes rf-aff-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(var(--mq-shift, -50%), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.rf-aff__viewport.is-marquee .rf-aff__list { animation: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1199.98px) {
	.rf-opp { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 40px; }
	.rf-how.hm-section--gray { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
	.rf-aff__list { flex-wrap: wrap; justify-content: center; gap: 32px 48px; }
}
@media (max-width: 991.98px) {
	.rf-partner__grid { gap: 20px; }
	.rf-card { padding-inline: 16px; }
	.rf-opp { grid-template-columns: minmax(0, 1fr); padding-right: max(var(--hm-gutter), calc((100vw - var(--hm-container)) / 2)); }
	.rf-opp__title,
	.rf-how__title { font-size: 30px; }
}

/* ==========================================================================
   Phones — Figma "Referral" 182:10412
   ========================================================================== */
@media (max-width: 767.98px) {
	/* Become a Partner (234:4721): swipe carousel of photo cards. */
	.rf-partner .hm-head { gap: 10px; }
	.rf-partner .hm-head__sub { color: var(--hm-text); font-size: 14px; line-height: 20px; }
	.rf-partner { --in-w: calc(100vw - 78px); }
	.rf-partner__slider { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 24px; }
	.rf-partner .rf-partner__grid {
		display: flex;
		align-items: center;
		gap: 20px;
		width: 100vw;
		height: calc(var(--in-w) * 486 / 361);
		margin: 0 calc(var(--hm-gutter) * -1);
		padding-inline: calc((100vw - var(--in-w)) / 2);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: calc((100vw - var(--in-w)) / 2);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.rf-partner .rf-partner__grid::-webkit-scrollbar { display: none; }
	.rf-partner .rf-card {
		flex: 0 0 var(--in-w);
		justify-content: flex-end;
		height: 88%;
		min-height: 0;
		padding: 0;
		overflow: hidden;
		border: 0;
		border-radius: 12px;
		background: #e9eaec;
		scroll-snap-align: center;
		text-align: left;
		transition: height .35s ease;
	}
	.rf-partner .rf-card.is-active { height: 100%; }
	.rf-card__media { position: absolute; inset: 0; }
	.rf-card__media picture { display: block; width: 100%; height: 100%; }
	.rf-card__media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
	.rf-partner .rf-card__body {
		position: relative;
		gap: 3px;
		padding: 16px 24px 20px;
		background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 104%);
		opacity: 0;
		transition: opacity .3s ease;
	}
	.rf-partner .rf-card.is-active .rf-card__body { opacity: 1; }
	.rf-card__count { display: block; }
	.rf-partner .rf-card__title { color: var(--hm-neutral); font-size: 24px; }
	.rf-partner .rf-card__text { display: none; }

	/* Referral Opportunities (234:4708): text, then a tall slider (378×547, next 303×443). */
	.rf-opp.hm-section { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 0 var(--hm-gutter) 40px; }
	.rf-opp__text { gap: 8px; }
	.rf-opp__title { font-size: 32px; }
	.rf-opp__lead { font-size: 16px; line-height: 24px; }
	.rf-opp .rf-opp__stage { --gap: 23px; --slide-w: calc(100% - 22px); }
	.rf-opp .sv-gallery__track { width: auto; height: auto; aspect-ratio: 378 / 547; }
	.rf-opp .sv-gallery__slide { border-radius: 12px; }
	.rf-opp .sv-gallery__slide.is-peek { transform: translateX(calc(var(--off) * (100% + var(--gap)))) scale(.8); }
	.rf-opp .hm-dots { margin-top: 20px; }

	/* How it works (182:10448): photo on top. */
	.rf-how.hm-section--gray { display: flex; flex-direction: column; gap: 32px; padding: 0 0 40px; }
	.rf-how__media { min-height: 0; aspect-ratio: 440 / 465; }
	.rf-how__body { gap: 24px; padding: 0 var(--hm-gutter); }
	.rf-how__title { font-size: 32px; }
	.rf-how__note { font-size: 16px; line-height: 24px; }
	.rf-how__list li { font-size: 16px; line-height: 24px; }
	.rf-how__list strong { font-weight: 400; }

	/* Current Affiliates (182:10458): one row, scrolls sideways. */
	.rf-aff__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 40px;
		margin: 24px calc(var(--hm-gutter) * -1) 0;
		padding-inline: var(--hm-gutter);
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--hm-gutter);
	}
	.rf-aff__list::-webkit-scrollbar { display: none; }
	.rf-aff__item { flex-shrink: 0; scroll-snap-align: start; }
	.rf-aff__logo { max-width: 134px; max-height: 88px; }
	.rf-aff__viewport.is-marquee { margin-inline: calc(var(--hm-gutter) * -1); }
	.rf-aff__viewport.is-marquee .rf-aff__list { margin-inline: 0; padding-inline: 0; }
	.rf-aff__viewport.is-marquee .rf-aff__item { padding-inline: 24px; }
}

/* Large phones (576–767px): phone layout in a 560px column. */
@media (min-width: 576px) and (max-width: 767.98px) {
	.dsms-ui2--referral .hm-wrap { max-width: 560px; }
	.rf-partner { --in-w: 440px; }
	.rf-opp.hm-section { padding-inline: calc((100vw - 560px) / 2 + var(--hm-gutter)); }
	.rf-how__media { aspect-ratio: auto; height: 560px; }
	.rf-how__body { width: 100%; max-width: 560px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.rf-partner .rf-card,
	.rf-partner .rf-card__body { transition: none; }
}