/* ============================================================================
   HeyU product page — "cover chapters" (2026-09-30)
   Loaded by /heyu only, after site.css + company.css. Replaces the page's
   bento grids with a sequence of stages where the cut-out renders and the
   giant display type share one plane: a profile from the app stands in a gap
   in the HEYU wordmark, and each feature chapter's render overlaps its own
   giant title. Between the stages, quiet hairline rows carry the facts.
   Token-driven (ink + indigo); motion reuses site.js (reveal, parallax) and
   company.js (fitted wordmark); heyu.js adds the ground's crossfade.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   The ground — as in the app, a profile photo blurred and dimmed behind
   everything (scripts/website/make-images.swift makes them, already blurred,
   so nothing is filtered here). The layer is fixed to the window inside
   <main>, and main's clip-path keeps it there, so the footer that the page
   slides off (site.js footer reveal) never has it over it. Each chapter
   names its person (data-ground); heyu.js crossfades to the chapter across
   the window's middle. The hero and the closing band sit on it too, in place
   of the smoke the company pages keep. The grounds are capped at sRGB 80,
   and the text tokens are raised for them: muted and faint text keep 4.5:1
   on the brightest spot, the indigo labels and Unlimited's violet on a
   typical one.
   ------------------------------------------------------------------------- */
main.h-grounded {
	clip-path: inset(0);
	--text-mute:  rgba(253, 253, 252, 0.74);
	--text-faint: rgba(253, 253, 252, 0.7);
	--accent-2:   #a89cff;
	--violet:     #a493ff;
}
.h-ground {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--bg);
	pointer-events: none;
}
.h-ground-photo {
	position: absolute;
	inset: 0;
	background: center / cover no-repeat;
	opacity: 0;
	transition: opacity 1.1s ease;
}
.h-ground-photo.is-on { opacity: 1; }
.h-ground-photo[data-ground="maya-3"]  { background-image: url(/media/heyu/ground/maya-3.jpg); }
.h-ground-photo[data-ground="maya-4"]  { background-image: url(/media/heyu/ground/maya-4.jpg); }
.h-ground-photo[data-ground="leo-2"]   { background-image: url(/media/heyu/ground/leo-2.jpg); }
.h-ground-photo[data-ground="kenji-1"] { background-image: url(/media/heyu/ground/kenji-1.jpg); }
.h-ground-photo[data-ground="kenji-3"] { background-image: url(/media/heyu/ground/kenji-3.jpg); }
.h-ground-photo[data-ground="nora-1"]  { background-image: url(/media/heyu/ground/nora-1.jpg); }
.h-ground-photo[data-ground="lucia-1"] { background-image: url(/media/heyu/ground/lucia-1.jpg); }
.h-ground-photo[data-ground="lucia-2"] { background-image: url(/media/heyu/ground/lucia-2.jpg); }
.h-ground-photo[data-ground="alex-1"]  { background-image: url(/media/heyu/ground/alex-1.jpg); }
.h-ground-photo[data-ground="sota-2"]  { background-image: url(/media/heyu/ground/sota-2.jpg); }
main.h-grounded .c-smoke-host { background: transparent; }

/* ---------------------------------------------------------------------------
   Hero — copy top-left, the fitted HEYU wordmark along the bottom, and a
   profile from the app standing in a gap between HEY and U. The screen
   lives INSIDE the wordmark's gap span, so its size and position follow the
   fitted font-size (em) with no measuring: the gap is 0.9em wide and the
   screen stands in its middle. It overshoots the hero's bottom edge a
   little (the hero clips it), as if it were rising out of the page.
   ------------------------------------------------------------------------- */
.h-hero { min-height: max(100svh, 720px); }
.h-hero-top {
	flex: 1;
	display: grid;
	grid-template-columns: minmax(0, 38rem) 1fr;
	align-content: start;
	gap: 2rem;
	padding-top: clamp(1.25rem, 3.5vh, 2.75rem);
}
.h-hero-copy { display: grid; gap: 1.3rem; justify-items: start; }
/* the app's sign-in line: three giant uppercase lines, each stepped in
   further (0.64em a line, the app's 28pt at 44pt), the arrow in the
   accent; the closing band's voice, sized for the hero's copy column */
.h-hero-lines { display: grid; gap: 0.08em; margin: 0; }
.h-hero-line {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 4.9vw, 5.6rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.88;
	text-transform: uppercase;
	white-space: nowrap;
}
.h-hero-line:nth-child(2) { margin-left: 0.64em; }
.h-hero-line:nth-child(3) { margin-left: 1.28em; }
.h-hero-line .arrow { color: var(--accent-2); font-weight: 600; margin-right: 0.12em; }
/* the lines rise in one after another, as on the sign-in screen */
.c-hero .h-hero-line.reveal { animation-delay: calc(var(--hero-delay) + 0.1s); }
.c-hero .h-hero-line.reveal:nth-child(2) { animation-delay: calc(var(--hero-delay) + 0.2s); }
.c-hero .h-hero-line.reveal:nth-child(3) { animation-delay: calc(var(--hero-delay) + 0.3s); }
.h-hero-lede {
	font-size: clamp(1.05rem, 1.35vw, 1.25rem);
	font-weight: 500;
	line-height: 1.5;
	color: var(--text-soft);
	max-width: 32ch;
}
.h-hero-copy .btn-row { margin-top: 0.4rem; }
.h-hero-meta {
	justify-self: end;
	align-self: start;
	align-content: start;
	display: grid;
	gap: 0.45rem;
	justify-items: end;
	text-align: right;
}

/* the wordmark's gap — sized in em so data-fit scales it with the letters */
.h-hero .c-hero-wordmark { position: relative; z-index: 1; }
.h-gap {
	position: relative;
	display: inline-block;
	width: 0.9em;
	height: 0.7em;
}
.h-hero-phone {
	position: absolute;
	left: 0.11em;
	bottom: -0.2em;
	width: 0.68em;
	pointer-events: none;
}
/* a soft indigo glow behind the screen, so it lifts off the smoke */
.h-hero-phone::before {
	content: '';
	position: absolute;
	inset: 0 -60% 20%;
	background: radial-gradient(closest-side, rgba(107, 94, 246, 0.42), transparent 72%);
	z-index: -1;
}
.h-hero-phone img {
	width: 100%;
	filter: drop-shadow(0 0.05em 0.08em rgba(0, 0, 0, 0.55));
	animation: h-phone-in 1.15s var(--ease) calc(var(--hero-delay) + 0.45s) both;
}
@keyframes h-phone-in {
	from { opacity: 0; transform: translateY(16%); }
	to   { opacity: 1; transform: none; }
}

/* stacked copy on tablets — the screen keeps its gap */
@media (max-width: 999px) {
	.h-hero-top { grid-template-columns: 1fr; padding-bottom: 3rem; }
	.h-hero-meta { display: none; }
}
/* phones: a 0.9em gap would shrink the fitted letters to nothing, so the gap
   closes and the screen stands centred BEHIND the wordmark instead (the
   wordmark is a stacking context, so z-index -1 paints under its letters) */
@media (max-width: 699px) {
	.h-hero { --phone-h: min(56svh, 480px); }
	/* room above the letters for the part of the screen that rises past them */
	.h-hero-top { padding-bottom: calc(var(--phone-h) - 36vw); }
	.h-gap { position: static; width: 0; }
	.h-hero-phone {
		z-index: -1;
		left: calc(50% - var(--phone-h) * 1320 / 2868 / 2);
		bottom: -2.5rem;
		width: auto;
		height: var(--phone-h);
		transform: none !important; /* no parallax lift on phones */
	}
	.h-hero-phone img { width: auto; height: 100%; }
}

/* ---------------------------------------------------------------------------
   Index strip — the hero's four ways onward as one hairline row (was four
   boxed link cells). Whole-column links; the arrow nudges on hover.
   ------------------------------------------------------------------------- */
.h-index { border-bottom: 1px solid var(--hairline); }
.h-index-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.h-index-item {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.4rem;
	padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.6rem);
	border-left: 1px solid var(--hairline);
}
.h-index-item:first-child { border-left: 0; padding-left: 0; }
.h-index-title {
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 1.9vw, 1.7rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	transition: color 0.25s var(--ease);
}
.h-index-cap { color: var(--text-mute); font-size: 0.92rem; max-width: 26ch; }
.h-index-arrow {
	position: absolute;
	top: clamp(1.4rem, 2.6vw, 2rem);
	right: clamp(1rem, 2vw, 1.6rem);
	font-family: var(--font-mono);
	color: var(--text-mute);
	transition: transform 0.3s var(--ease), color 0.25s var(--ease);
}
.h-index-item:hover .h-index-title, .h-index-item:focus-visible .h-index-title { color: var(--accent-2); }
.h-index-item:hover .h-index-arrow, .h-index-item:focus-visible .h-index-arrow { color: var(--accent-2); transform: translate(3px, -3px); }
.h-index-item.is-accent .h-index-title,
.h-index-item.is-accent .h-index-arrow { color: var(--accent-2); }
@media (max-width: 860px) {
	.h-index-row { grid-template-columns: 1fr 1fr; }
	.h-index-item:nth-child(odd) { border-left: 0; padding-left: 0; }
	.h-index-item:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}

/* ---------------------------------------------------------------------------
   What makes it different — the three differences as giant index rows: the
   words on the left, a line on each on the right.
   ------------------------------------------------------------------------- */
.h-pillars { border-top: 1px solid var(--hairline-2); }
.h-pillar {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 1rem clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	padding-block: clamp(1.6rem, 3.6vw, 2.8rem);
	border-bottom: 1px solid var(--hairline);
}
.h-pillar-word {
	font-size: clamp(2.3rem, 5.6vw, 6rem);
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 0.92;
}
.h-pillar p { color: var(--text-mute); font-size: clamp(1rem, 1.3vw, 1.18rem); max-width: 36ch; }
@media (max-width: 760px) {
	.h-pillar { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Chapter covers — giant uppercase lines (the closing CTA's voice) with the
   chapter's render stepping in front of them. The lines drift sideways and
   the render drifts vertically (site.js parallax), so they separate into
   two planes as the section scrolls past. Both reveal with .reveal-fade.
   ------------------------------------------------------------------------- */
.h-chapter { overflow: clip; }
@media (max-width: 640px) { .h-chapter .c-sec .m-label:not(.dot) { display: none; } }
.h-cover { display: grid; gap: 0.04em; margin: 0; position: relative; z-index: 1; }
.h-cover-line {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 10.2vw, 10.4rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.86;
	text-transform: uppercase;
	white-space: nowrap;
}
.h-cover-line + .h-cover-line { margin-left: clamp(1.6rem, 11vw, 12rem); }
.h-cover-line .acc { color: var(--accent-2); }
.h-cover.is-right { justify-items: end; text-align: right; }
.h-cover.is-right .h-cover-line + .h-cover-line { margin-left: 0; margin-right: clamp(1.6rem, 11vw, 12rem); }

/* discovery: four full screens in a row under the title, staggered, each
   drifting at its own speed (site.js parallax on the figure; the screen and
   its caption fade in inside it), with what each one shows under it */
.h-shots-lede { max-width: 44ch; margin-top: clamp(1.8rem, 3.4vw, 2.8rem); }
.h-shots {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.2rem, 2.6vw, 2.6rem);
	align-items: start;
	margin-top: clamp(2.6rem, 5vw, 4.4rem);
}
.h-shots::before {
	content: '';
	position: absolute;
	inset: 4% 8% 30%;
	background: radial-gradient(closest-side, rgba(107, 94, 246, 0.3), transparent 72%);
	z-index: -1;
}
.h-shot { margin: 0; }
.h-shot:nth-child(even) { margin-top: clamp(3rem, 7vw, 7.5rem); }
.h-shot img { width: 100%; filter: drop-shadow(0 30px 48px rgba(0, 0, 0, 0.55)); }
.h-shot figcaption {
	margin-top: clamp(1.4rem, 2.2vw, 1.8rem);
	padding-top: 1.1rem;
	border-top: 1px solid var(--hairline);
}
.h-shot h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: -0.025em; margin-bottom: 0.45rem; }
.h-shot p { color: var(--text-mute); font-size: 0.98rem; max-width: 36ch; }
.h-shots-note {
	margin-top: clamp(2.6rem, 5vw, 4rem);
	color: var(--text-mute);
	font-size: clamp(1rem, 1.3vw, 1.18rem);
	max-width: 64ch;
}
.h-shots-note strong { color: var(--text); font-weight: 600; }
/* the chat chapter's three, under its right-aligned title: the same size as
   the discovery screens (three of four columns), centred */
.h-shots-lede.is-right { margin-left: auto; }
@media (min-width: 1000px) {
	.h-shots.is-three {
		--shots-gap: clamp(1.2rem, 2.6vw, 2.6rem);
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: calc((100% - 3 * var(--shots-gap)) * 0.75 + 2 * var(--shots-gap));
		margin-inline: auto;
	}
}
/* narrower: a swipeable row, level and still */
@media (max-width: 999px) {
	.h-shots {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: clamp(210px, 38vw, 300px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(var(--gutter) * -1);
		padding: 1.2rem var(--gutter) 1.6rem;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}
	.h-shots::-webkit-scrollbar { display: none; }
	.h-shots::before { display: none; }
	.h-shot { scroll-snap-align: start; transform: none !important; }
	.h-shot:nth-child(even) { margin-top: 0; }
	.h-shot img { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.5)); }
}
@media (max-width: 560px) {
	.h-shots { grid-auto-columns: 68%; }
}

/* spec cells — a title and one line over a hairline */
.h-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2.2rem, 4.4vw, 3.4rem) clamp(1.5rem, 3.5vw, 3rem);
	margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
.h-spec { border-top: 1px solid var(--hairline); padding-top: 1.3rem; }
.h-spec h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: -0.025em; margin-bottom: 0.45rem; }
.h-spec p { color: var(--text-mute); font-size: 0.98rem; max-width: 40ch; }
@media (max-width: 560px) {
	.h-specs { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Profiles chapter (and saved, history & likes) — three screens fanned under
   the title: the middle one in front and upright, the two beside it turned
   away on their own planes. Each drifts at its own speed (site.js parallax on
   the item; the turn is on the image, so the two transforms never meet).
   ------------------------------------------------------------------------- */
.h-fan {
	position: relative;
	z-index: 0; /* under .h-cover's letters */
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: clamp(-4rem, -3vw, -1rem);
}
.h-fan::before {
	content: '';
	position: absolute;
	inset: 6% 12%;
	background: radial-gradient(closest-side, rgba(107, 94, 246, 0.34), transparent 72%);
	z-index: -1;
}
.h-fan-item { flex: none; width: clamp(104px, 23vw, 330px); }
.h-fan-item.is-center { position: relative; z-index: 2; width: clamp(122px, 27vw, 380px); }
.h-fan-item.is-left { margin-right: -6%; }
.h-fan-item.is-right { margin-left: -6%; }
.h-fan-item img { width: 100%; filter: drop-shadow(0 34px 54px rgba(0, 0, 0, 0.6)); }
.h-fan-item.is-left img { transform: perspective(1600px) rotateY(-20deg); transform-origin: 100% 50%; }
.h-fan-item.is-right img { transform: perspective(1600px) rotateY(20deg); transform-origin: 0% 50%; }
.h-fan-item:not(.is-center) img { filter: brightness(0.86) drop-shadow(0 34px 54px rgba(0, 0, 0, 0.6)); }
.h-fan-lede { max-width: 46ch; margin: clamp(2.4rem, 5vw, 4rem) auto 0; text-align: center; }
.h-specs.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.h-specs.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* which plan a list comes with, over its name */
.h-spec-tag {
	display: inline-block;
	margin-bottom: 0.85rem;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.34rem 0.7rem;
	border-radius: var(--radius-pill);
	background: rgba(139, 123, 255, 0.14);
	color: var(--accent-2);
}
@media (max-width: 860px) {
	.h-fan { margin-top: 2rem; }
	.h-fan-item { transform: none !important; }
	.h-specs.is-four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.h-specs.is-four, .h-specs.is-three { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Every screen — the iPad's landscape screen, with the same profile on an
   iPhone in front of its lower right corner, on its own plane
   ------------------------------------------------------------------------- */
.h-devices-stage {
	position: relative;
	max-width: 1080px;
	margin: clamp(2rem, 5vw, 4rem) auto clamp(2rem, 6vw, 5rem);
	padding-right: clamp(2.5rem, 11vw, 8rem);
}
.h-devices-stage::before {
	content: '';
	position: absolute;
	inset: 0 -4% -10%;
	background: radial-gradient(closest-side, rgba(107, 94, 246, 0.3), transparent 72%);
	z-index: -1;
}
.h-devices-stage > img { width: 100%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55)); }
.h-devices-phone {
	position: absolute;
	right: 0;
	bottom: clamp(-5rem, -6vw, -1.5rem);
	width: clamp(92px, 21%, 230px);
	z-index: 1;
}
.h-devices-phone img { width: 100%; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6)); }
@media (max-width: 640px) {
	.h-devices-phone { transform: none !important; }
}

/* ---------------------------------------------------------------------------
   Section heads that carry a piece of 3D art on the right (pricing,
   consumables) — the art floats, it is never framed
   ------------------------------------------------------------------------- */
.section-head.h-has-art { position: relative; padding-right: clamp(0px, 20vw, 260px); }
.h-head-art {
	position: absolute;
	right: 0;
	bottom: -0.5rem;
	width: clamp(110px, 14vw, 200px);
	height: auto;
	filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
}
@media (max-width: 640px) {
	.section-head.h-has-art { padding-right: 0; }
	.h-head-art { position: static; width: 110px; margin-top: 1.4rem; }
}

/* ---------------------------------------------------------------------------
   Safety — a split: the shield render + heading hold still on the left
   while the six guarantees run down the right as hairline rows (the icons
   stay; they carry comprehension)
   ------------------------------------------------------------------------- */
.h-safety {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}
.h-safety-aside { position: sticky; top: 7rem; }
.h-safety-art {
	width: clamp(130px, 15vw, 220px);
	margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
	filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.55));
}
.h-safety-aside .section-head { margin-bottom: 0; border-top: 0; padding-top: 0; }
.h-safety-list { border-top: 1px solid var(--hairline-2); }
.h-safety-list .safety-item {
	gap: 1.2rem;
	padding-block: clamp(1.2rem, 2.4vw, 1.7rem);
	border-bottom: 1px solid var(--hairline);
}
.h-safety-list .safety-item .icon-tile { width: 48px; height: 48px; border-radius: 14px; }
.h-safety-list .safety-item h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.h-safety-list .safety-item p { font-size: 0.98rem; }
@media (max-width: 860px) {
	.h-safety { grid-template-columns: 1fr; }
	.h-safety-aside { position: static; }
}

/* FAQ in a rail, like the company homepage's */
.c-rail .faq { margin-inline: 0; max-width: none; }

/* ---------------------------------------------------------------------------
   Get HeyU — a calm centred finale: the app icon, one line, one button,
   then the two facts that make signing up easy
   ------------------------------------------------------------------------- */
.h-get { text-align: center; }
.h-get-center { display: grid; justify-items: center; gap: 1.2rem; }
.h-get-icon {
	position: relative;
	width: clamp(128px, 14vw, 188px);
	margin-bottom: 0.6rem;
}
.h-get-icon::before {
	content: '';
	position: absolute;
	inset: -60%;
	background: radial-gradient(closest-side, rgba(107, 94, 246, 0.45), transparent 70%);
	z-index: -1;
}
.h-get-title {
	font-size: clamp(2.6rem, 6.4vw, 6rem);
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 0.95;
}
.h-get-center .lede { margin-inline: auto; }
.h-get-center .btn-row { justify-content: center; margin-top: 0.6rem; }
.h-get-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 980px;
	margin: clamp(3rem, 7vw, 5rem) auto 0;
	border-top: 1px solid var(--hairline-2);
	text-align: left;
}
.h-get-fact {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.6rem clamp(0.5rem, 2vw, 1.6rem) 0;
}
.h-get-fact + .h-get-fact { border-left: 1px solid var(--hairline); }
.h-get-fact img { width: clamp(84px, 9vw, 120px); height: auto; flex: none; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45)); }
.h-get-fact h3 { font-size: 1.15rem; letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.h-get-fact p { color: var(--text-mute); font-size: 0.95rem; }
@media (max-width: 720px) {
	.h-get-facts { grid-template-columns: 1fr; }
	.h-get-fact + .h-get-fact { border-left: 0; border-top: 1px solid var(--hairline); padding-bottom: 0; margin-top: 1.4rem; }
}

/* ---------------------------------------------------------------------------
   Reduced motion — no screen rise (parallax is already off in site.js)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.h-hero-phone img { animation: none; }
}