/* Homepage H1–H12 — values from HeyCrush Home Sample.dc.html.
   Scoped to .hc-home (body class) / .hc-hm (page root). */

/* The front page escapes the boxed article container: transparent, unpadded,
   full width — sections manage their own shell measure (01-LAYOUT-AND-WIDTHS). */
.hc-home .ast-article-single,
.hc-home .site-content .ast-container {
	max-width: none;
	padding: 0;
	background: transparent;
}
.hc-home .entry-content > * {
	max-width: none;
}
/* Astra gives #primary a 4em top margin — dead space above the full-bleed
   hero. Bottom margin stays (keeps the footer gap). */
.hc-home #primary {
	margin-top: 0;
}

/* The announcement bar moved to 43-announce.css (every page, v2). */

/* Shared section rhythm */
.hc-hm__section {
	max-width: var(--hc-shell);
	margin: 0 auto;
	padding: 56px var(--hc-gutter) 0;
}
.hc-hm__section--last {
	padding-bottom: 56px;
}
/* The two CTA bands sit 48px below the prior section, not the usual 56
   (sample lines 198, 328). */
.hc-hm__section--cta {
	padding-top: 48px;
}
.hc-hm__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hc-secondary);
	white-space: nowrap;
}
.hc-hm__eyebrow--pink {
	color: var(--hc-pink);
}
.hc-hm__rule {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--hc-line), transparent);
}
.hc-hm h2.hc-hm__h2 {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--hc-ink);
	margin: 0 0 26px;
}

/* H1 hero */
.hc-hm__hero {
	display: flex;
	gap: 56px;
	align-items: center;
	max-width: var(--hc-shell);
	margin: 0 auto;
	padding: 64px var(--hc-gutter) 56px;
}
.hc-hm__hero-copy {
	flex: 1.15;
}
.hc-hm h1.hc-hm__h1 {
	font-size: 46px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: var(--hc-ink);
	margin: 8px 0 0;
}
:lang(th) .hc-hm h1.hc-hm__h1 {
	font-size: 42px;
	line-height: 1.3;
	letter-spacing: 0;
}
.hc-hm__sub {
	font-size: 19px;
	line-height: 1.6;
	color: var(--hc-secondary);
	margin: 18px 0 0;
	max-width: 460px;
}
.hc-hm__hero-ctas {
	display: flex;
	gap: 12px;
	margin-top: 26px;
	flex-wrap: wrap;
}
.hc-hm a.hc-hm__btn-primary {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	padding: 13px 26px;
	border-radius: 999px;
	background: var(--hc-grad);
	box-shadow: 0 10px 24px -8px rgba(255, 77, 103, 0.55);
}
.hc-hm a.hc-hm__btn-ghost {
	font-size: 15px;
	font-weight: 600;
	color: var(--hc-ink);
	padding: 13px 26px;
	border-radius: 999px;
	border: 1px solid var(--hc-line);
}
.hc-hm__hero-visual {
	flex: 0.85;
	display: flex;
	justify-content: center;
}
.hc-hm__phone {
	width: 270px;
	height: 520px;
	border-radius: 22px;
	background: var(--hc-ink);
	padding: 1px;
	box-shadow: 0 30px 60px -24px rgba(9, 16, 29, 0.35);
}
.hc-hm__phone-screen {
	width: 100%;
	height: 100%;
	border-radius: 21px;
	background: repeating-linear-gradient(45deg, #e7d5d0, #e7d5d0 10px, #dcc8c4 10px, #dcc8c4 20px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hc-hm__phone-screen span {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 11px;
	color: rgba(90, 60, 60, 0.7);
	text-align: center;
	max-width: 160px;
}
.hc-hm__phone-screen img.hc-phone-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
	border-radius: 28px;
}

/* Self-framed screenshots (bezel baked into the image): the container takes
   the image's own dimensions capped at a reasonable height, and the base
   frame reduces to a 1px hairline that masks the JPG's square corners. */
.hc-hm__phone--img {
	width: auto;
	height: auto;
}
.hc-hm__phone--img .hc-hm__phone-screen {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
}
.hc-hm__phone--img img.hc-phone-img {
	width: auto;
	height: auto;
	max-height: 560px;
	max-width: 100%;
	object-fit: contain;
	border-radius: 21px;
	display: block;
}

/* H8 credibility strip */
.hc-hm__cred-wrap {
	border-top: 1px solid var(--hc-wash);
	border-bottom: 1px solid var(--hc-wash);
}
.hc-hm__cred {
	display: flex;
	align-items: center;
	gap: 40px;
	max-width: var(--hc-shell);
	margin: 0 auto;
	padding: 22px var(--hc-gutter);
	font-size: 14px;
	color: var(--hc-secondary);
	flex-wrap: wrap;
}
.hc-hm__cred strong {
	color: var(--hc-ink);
}

/* H2 for / not for */
.hc-hm__forgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.hc-hm__for {
	background: var(--hc-wash);
	border-radius: 20px;
	padding: 26px 28px;
}
.hc-hm__not {
	border: 1px solid var(--hc-wash);
	border-radius: 20px;
	padding: 26px 28px;
}
.hc-hm__for-label,
.hc-hm__not-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 14px;
	color: var(--hc-pink);
}
.hc-hm__not-label {
	color: var(--hc-mut);
}
.hc-hm__li {
	display: flex;
	gap: 10px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--hc-body);
	margin-bottom: 11px;
}
.hc-hm__li:last-child {
	margin-bottom: 0;
}
.hc-hm__li svg {
	flex: none;
	margin-top: 4px;
	color: var(--hc-pink);
}
.hc-hm__not .hc-hm__li {
	color: var(--hc-secondary);
}
.hc-hm__not .hc-hm__li svg {
	color: #c1c7ce;
}

/* H3 steps */
.hc-hm__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.hc-hm__step {
	background: #fff;
	border: 1px solid var(--hc-wash);
	border-radius: 20px;
	padding: 24px;
}
.hc-hm__step-n {
	font-size: 13px;
	font-weight: 700;
	color: var(--hc-pink);
}
.hc-hm__step-t {
	font-size: 17.5px;
	font-weight: 700;
	color: var(--hc-ink);
	margin: 8px 0 6px;
}
.hc-hm__step-d {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--hc-secondary);
}

/* H4 difference */
.hc-hm__diff {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 18px;
}
.hc-hm__diff-t {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--hc-ink);
}
.hc-hm__diff-d {
	font-size: 15px;
	line-height: 1.6;
	color: var(--hc-secondary);
	margin-top: 8px;
}

/* H7 CTA bands + waitlist form */
.hc-hm__band--mid {
	display: flex;
	align-items: center;
	gap: 24px;
	background: var(--hc-grad);
	border-radius: 24px;
	padding: 30px 34px;
	flex-wrap: wrap;
}
.hc-hm__band--mid .hc-hm__band-copy {
	flex: 1;
	min-width: 240px;
}
.hc-hm__band--mid .hc-hm__band-head {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}
.hc-hm__band--mid .hc-hm__band-sub {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 2px;
}
.hc-hm__band--end {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--hc-wash);
	border-radius: 24px;
	padding: 44px 34px;
}
.hc-hm__band--end .hc-hm__band-head {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--hc-ink);
}
.hc-hm__band--end .hc-hm__band-sub {
	font-size: 15px;
	color: var(--hc-secondary);
	margin-top: 6px;
}
.hc-hm__band--end .hc-wl {
	margin-top: 20px;
}
.hc-hm__band--end .hc-wl__email {
	border: 1px solid var(--hc-line);
	width: 250px;
}
.hc-hm__band--end .hc-wl__btn {
	color: #fff;
	background: var(--hc-grad);
	box-shadow: 0 10px 24px -8px rgba(255, 77, 103, 0.55);
	padding: 13px 26px;
}
.hc-hm__band--mid .hc-wl__done {
	color: #fff;
}
.hc-hm__band--end .hc-wl__done {
	color: var(--hc-ink);
	margin-top: 20px;
}

/* H5 safety — full-bleed ink band */
.hc-hm__ink {
	background: var(--hc-ink);
	margin: 56px calc(50% - 50vw) 0;
}
.hc-hm__ink-inner {
	max-width: var(--hc-shell);
	margin: 0 auto;
	padding: 52px var(--hc-gutter);
}
.hc-hm__ink .hc-hm__rule {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent);
}
.hc-hm h2.hc-hm__h2--ink {
	color: #fff;
	max-width: 520px;
	line-height: 1.2;
	margin: 6px 0 0;
}
.hc-hm__safety-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 28px;
}
.hc-hm__safety-card {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 20px;
	padding: 22px;
}
.hc-hm__safety-t {
	font-size: 16.5px;
	font-weight: 700;
	color: #fff;
}
.hc-hm__safety-d {
	font-size: 14.5px;
	line-height: 1.6;
	color: #a5abb3;
	margin-top: 5px;
}
.hc-hm__safety-d a {
	font-weight: 700;
}

/* H6 blog cards */
.hc-hm__blog-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.hc-hm__blog-head .hc-hm__h2 {
	margin-bottom: 0;
}
.hc-hm a.hc-hm__blog-all {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
.hc-hm__blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.hc-hm a.hc-hm__card {
	border: 1px solid var(--hc-wash);
	border-radius: 20px;
	overflow: hidden;
	display: block;
	color: inherit;
	transition: box-shadow 0.15s ease;
}
.hc-hm a.hc-hm__card:hover {
	box-shadow: 0 12px 28px -14px rgba(9, 16, 29, 0.25);
}
.hc-hm__card-media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--hc-wash);
	overflow: hidden;
}
.hc-hm__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hc-hm__card-body {
	display: block;
	padding: 16px 18px 18px;
}
.hc-hm__card-kicker {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hc-pink);
}
.hc-hm__card-title {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hc-ink);
	margin-top: 5px;
}
.hc-hm__card-claim {
	display: block;
	font-size: 14px;
	line-height: 1.55;
	color: var(--hc-secondary);
	margin-top: 7px;
}
.hc-hm__card-read {
	display: block;
	font-size: 12.5px;
	color: var(--hc-mut);
	margin-top: 9px;
}

/* H9 FAQ */
.hc-hm__section--faq {
	max-width: var(--hc-narrow);
}
.hc-hm__faq {
	background: var(--hc-wash);
	border-radius: 24px;
	padding: 28px 30px;
}
.hc-hm__faq .hc-hm__eyebrow {
	margin-bottom: 16px;
}
.hc-hm__faq-item {
	background: #fff;
	border-radius: 14px;
	padding: 16px 20px;
	margin-bottom: 10px;
}
.hc-hm__faq-item:last-of-type {
	margin-bottom: 0;
}
.hc-hm__faq-item[open] {
	box-shadow: 0 4px 14px -8px rgba(9, 16, 29, 0.1);
}
.hc-hm__faq-item summary {
	font-size: 16px;
	font-weight: 700;
	color: var(--hc-ink);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.hc-hm__faq-item summary::-webkit-details-marker {
	display: none;
}
.hc-hm__faq-item summary::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23858c94" stroke-width="3" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>') center / contain no-repeat;
	transition: transform 0.15s ease;
}
.hc-hm__faq-item[open] summary::after {
	transform: rotate(180deg);
}
.hc-hm__faq-a {
	font-size: 15px;
	line-height: 1.65;
	color: var(--hc-body);
	margin-top: 10px;
}

/* Thai variant — the TH sample runs denser type at taller line-heights and
   tighter tracking (Thai has no uppercase; wide letter-spacing reads wrong). */
:lang(th) .hc-hm__eyebrow {
	letter-spacing: 0.06em;
}
:lang(th) .hc-hm__sub {
	font-size: 18px;
	line-height: 1.8;
	margin-top: 16px;
}
:lang(th) .hc-hm h2.hc-hm__h2 {
	font-size: 30px;
	letter-spacing: 0;
	margin-bottom: 24px;
}
:lang(th) .hc-hm h2.hc-hm__h2--ink {
	max-width: 560px;
	line-height: 1.4;
}
:lang(th) .hc-hm__for-label,
:lang(th) .hc-hm__not-label {
	letter-spacing: 0;
}
:lang(th) .hc-hm__li {
	font-size: 15px;
	line-height: 1.7;
}
:lang(th) .hc-hm__step-t {
	font-size: 17px;
}
:lang(th) .hc-hm__step-d {
	font-size: 14px;
	line-height: 1.75;
}
:lang(th) .hc-hm__safety-t {
	font-size: 16px;
}
:lang(th) .hc-hm__safety-d {
	font-size: 14px;
	line-height: 1.75;
}
:lang(th) .hc-hm__card-title {
	font-size: 16.5px;
	line-height: 1.5;
}
:lang(th) .hc-hm__faq-item summary {
	font-size: 15.5px;
}
:lang(th) .hc-hm__faq-a {
	font-size: 14.5px;
	line-height: 1.8;
}
:lang(th) .hc-hm__phone-screen {
	background: repeating-linear-gradient(45deg, #d0dce7, #d0dce7 10px, #c4d2dc 10px, #c4d2dc 20px);
}

/* Mobile */
@media (max-width: 900px) {
	.hc-hm__hero {
		flex-direction: column;
		padding: 40px 24px;
		gap: 32px;
	}
	.hc-hm h1.hc-hm__h1 {
		font-size: 31px;
	}
	.hc-hm__forgrid,
	.hc-hm__steps,
	.hc-hm__diff,
	.hc-hm__safety-grid,
	.hc-hm__blog-grid {
		grid-template-columns: 1fr;
	}
	.hc-hm__cred {
		flex-direction: column;
		gap: 18px;
		align-items: flex-start;
	}
	.hc-hm__band--mid {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.hc-wl__email {
		width: 100%;
	}
	.hc-wl {
		width: 100%;
	}
}

/* ===== Homepage v2 — copy v5 ladder layout (design: HeyCrush Home Sample v2.dc.html, 2026-08-11). EN renderer only. ===== */
.hc-hm__pink { color: var(--hc-pink); }
.hc-hm__pink-soft { color: #fd788c; }

/* Statement rungs */
.hc-rung {
	max-width: var(--hc-shell);
	margin: 0 auto;
	padding: 84px var(--hc-gutter) 0;
}
.hc-rung__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.hc-rung--tint,
.hc-rung--ink {
	max-width: none;
	padding: 0;
}
.hc-rung--tint { background: #fff4f5; margin-top: 8px; }
.hc-rung--ink { background: var(--hc-ink); margin-top: 56px; }
.hc-rung--tint .hc-rung__inner,
.hc-rung--ink .hc-rung__inner {
	max-width: var(--hc-shell);
	margin: 0 auto;
}
.hc-rung--tint .hc-rung__inner { padding: 76px var(--hc-gutter) 80px; }
.hc-rung--ink .hc-rung__inner { padding: 88px var(--hc-gutter) 92px; }
.hc-rung__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hc-pink);
	white-space: nowrap;
}
.hc-rung__rule { width: 28px; height: 1px; background: var(--hc-pink); }
.hc-rung h2.hc-rung__h {
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--hc-ink);
	max-width: 880px;
	margin: 16px 0 0;
}
.hc-rung h2.hc-rung__h--xl { font-size: 48px; margin-top: 18px; }
.hc-rung--ink h2.hc-rung__h { color: #fff; line-height: 1.14; }
.hc-rung__sub {
	font-size: 18px;
	line-height: 1.65;
	color: var(--hc-secondary);
	margin: 16px 0 0;
	max-width: 640px;
}
.hc-rung--ink .hc-rung__sub { color: #a5abb3; max-width: 620px; }
.hc-rung__tokens {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 26px;
}
.hc-rung__tokens span {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 600;
	color: var(--hc-ink);
	border: 1px solid var(--hc-line);
	border-radius: 999px;
	padding: 9px 18px;
}
.hc-rung__tokens i { width: 6px; height: 6px; border-radius: 50%; background: var(--hc-pink); }
.hc-rung__tokens + .hc-rung__sub { margin-top: 22px; }

/* Act transitions */
.hc-hm__act {
	max-width: var(--hc-shell);
	margin: 0 auto;
	padding: 72px var(--hc-gutter) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}
.hc-hm__act-line { width: 1px; height: 44px; background: linear-gradient(180deg, transparent, var(--hc-pink)); }
.hc-hm__act-t {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--hc-ink);
	text-align: center;
}

/* Who this is for — centered single card + punch line */
.hc-hm__section--center { text-align: center; }
.hc-hm__forgrid--single {
	grid-template-columns: 1fr;
	max-width: 744px;
	margin: 0 auto;
	text-align: left;
}

.hc-hm__lede {
	font-size: 17px;
	line-height: 1.65;
	color: var(--hc-secondary);
	margin: -16px 0 26px;
	max-width: var(--hc-prose);
}


/* Judgment arc */
.hc-arc {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	position: relative;
	max-width: 1032px;
	width: 100%;
	margin: 36px auto 0;
}
.hc-arc__line {
	position: absolute;
	top: 17px;
	left: 16.66%;
	right: 16.66%;
	height: 1px;
	background: linear-gradient(90deg, #f3c9d1, var(--hc-pink));
}
.hc-arc__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
}
.hc-arc__n {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--hc-line);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--hc-mut);
}
.hc-arc__t {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--hc-ink);
	margin-top: 16px;
}
.hc-arc__step--win .hc-arc__n {
	border: 0;
	background: var(--hc-grad);
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(255, 77, 103, 0.5);
}
.hc-arc__step--win .hc-arc__t { color: var(--hc-pink); }
.hc-arc + .hc-rung__sub { margin-top: 28px; }

/* End band additions */
.hc-hm__band-kicker {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hc-pink);
	margin-bottom: 12px;
}
.hc-hm__band-micro {
	font-size: 13px;
	color: var(--hc-mut);
	margin-top: 14px;
}

@media (max-width: 900px) {
	.hc-rung { padding-top: 56px; }
	.hc-rung h2.hc-rung__h,
	.hc-rung h2.hc-rung__h--xl { font-size: 32px; }
	.hc-arc { grid-template-columns: 1fr; gap: 28px; }
	.hc-arc__line { display: none; }
}

/* ===== Band rhythm (EN home v2) =====
   Every block is a full-bleed band that alternates white / soft tint and owns
   the same vertical measure, so a one-line statement still gets a screen's
   worth of pause. Scoped to --v2: the Thai renderer keeps the old rhythm. */
.hc-hm--v2 {
	--hc-band: #fff6f7;
	--hc-band-y: 84px;
}
.hc-hm--v2 .hc-hm__section,
.hc-hm--v2 .hc-hm__section--cta,
.hc-hm--v2 .hc-hm__section--last {
	padding-top: var(--hc-band-y);
	padding-bottom: var(--hc-band-y);
}
.hc-hm--v2 .hc-hm__hero {
	padding-bottom: var(--hc-band-y);
}
.hc-hm--v2 .hc-rung {
	padding: var(--hc-band-y) var(--hc-gutter);
}
.hc-hm--v2 .hc-rung--tint,
.hc-hm--v2 .hc-rung--ink {
	margin-top: 0;
	padding: 0;
}
.hc-hm--v2 .hc-rung--tint {
	background: var(--hc-band);
}
.hc-hm--v2 .hc-rung--tint .hc-rung__inner {
	padding: var(--hc-band-y) var(--hc-gutter);
}
/* The two ink bands are the page's big moments — a little more air. */
.hc-hm--v2 .hc-rung--ink .hc-rung__inner,
.hc-hm--v2 .hc-hm__ink-inner {
	padding: calc(var(--hc-band-y) + 12px) var(--hc-gutter);
}
.hc-hm--v2 .hc-hm__ink {
	margin-top: 0;
}
/* The act transition is the tail of the band above it, not a band of its own. */
.hc-hm--v2 .hc-hm__act {
	padding: 0 var(--hc-gutter) var(--hc-band-y);
}
/* Full-bleed tint behind the shell-width sections (how it works, both CTAs). */
.hc-hm--v2 .hc-hm__bleed--tint {
	background: var(--hc-band);
}


/* "Built for you if" is the recognition list — it reads at body-lead size. */
.hc-hm--v2 .hc-hm__forgrid--single {
	max-width: 820px;
}
.hc-hm--v2 .hc-hm__forgrid--single .hc-hm__for {
	padding: 34px 38px;
}
.hc-hm--v2 .hc-hm__forgrid--single .hc-hm__for-label {
	font-size: 15px;
	margin-bottom: 18px;
}
.hc-hm--v2 .hc-hm__forgrid--single .hc-hm__li {
	font-size: 19px;
	line-height: 1.55;
	margin-bottom: 15px;
}
.hc-hm--v2 .hc-hm__forgrid--single .hc-hm__li svg {
	width: 18px;
	height: 18px;
	margin-top: 5px;
}

@media (max-width: 860px) {
	.hc-hm--v2 {
		--hc-band-y: 56px;
	}
	.hc-hm--v2 .hc-hm__forgrid--single .hc-hm__for {
		padding: 26px 24px;
	}
	.hc-hm--v2 .hc-hm__forgrid--single .hc-hm__li {
		font-size: 17px;
	}
}

/* "Who this is for" carries the same weight as the statement heads around it. */
.hc-hm--v2 .hc-hm__section--center h2.hc-hm__h2 {
	font-size: 44px;
	letter-spacing: -0.03em;
	line-height: 1.1;
}
/* The waitlist button closes the recognition list in place of the old punch. */
.hc-hm--v2 .hc-hm__punch-cta {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

@media (max-width: 860px) {
	.hc-hm--v2 .hc-hm__section--center h2.hc-hm__h2 {
		font-size: 32px;
	}
}

/* ===== The questions section (EN home v7) — a question, its answer, and the
   screen where it gets asked. Rows alternate sides for rhythm. ===== */
.hc-hm--v2 .hc-hm__section--center .hc-hm__lede {
	font-size: 19px;
	margin: -10px auto 0;
	max-width: 640px;
}
.hc-hm--v2 .hc-hm__bleed--tint .hc-hm__for {
	background: #fff;
}
.hc-asks {
	display: flex;
	flex-direction: column;
	gap: 84px;
	max-width: 1000px;
	margin: 68px auto 0;
	text-align: left;
}
.hc-ask {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.hc-ask:nth-child(even) .hc-ask__copy {
	order: 2;
}
.hc-ask__n {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--hc-pink);
}
.hc-hm h3.hc-ask__q {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--hc-ink);
	margin: 10px 0 14px;
}
.hc-ask__a {
	font-size: 18px;
	line-height: 1.65;
	color: var(--hc-secondary);
	margin: 0;
	max-width: 460px;
}
.hc-ask__shot {
	display: flex;
	justify-content: center;
}

/* Mock app screens */
.hc-mock {
	width: 100%;
	max-width: 360px;
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 30px 60px -36px rgba(9, 16, 29, 0.35), 0 0 0 1px rgba(9, 16, 29, 0.06);
	overflow: hidden;
	font-size: 15px;
	line-height: 1.4;
	color: var(--hc-ink);
}
.hc-mock__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px 16px;
	font-size: 17px;
	font-weight: 700;
}
.hc-mock__x {
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: var(--hc-body);
}
.hc-mock__row {
	position: relative;
	padding: 17px 48px;
	text-align: center;
	border-top: 1px solid var(--hc-line);
}
.hc-mock__row.is-on {
	font-weight: 600;
}
.hc-mock__row svg {
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hc-pink);
}
.hc-mock--form {
	padding: 24px 22px 26px;
}
.hc-mock__q {
	font-size: 15.5px;
	font-weight: 700;
	margin-bottom: 12px;
}
.hc-mock__chips + .hc-mock__q {
	margin-top: 22px;
}
.hc-mock__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.hc-mock__chips span {
	padding: 10px 16px;
	border-radius: 999px;
	background: #f3f4f7;
	font-size: 14.5px;
	font-weight: 600;
}
.hc-mock__chips span.is-on {
	background: #ffe3e8;
	color: #d92a48;
}
.hc-mock__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 24px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid #ffd0d8;
	font-size: 13.5px;
	font-weight: 700;
	color: #d92a48;
}

/* Five stages sit on one row on desktop; the shared 900px rule stacks them. */
@media (min-width: 901px) {
	.hc-hm--v2 .hc-hm__steps--stages {
		grid-template-columns: repeat(5, 1fr);
		gap: 14px;
	}
	.hc-hm--v2 .hc-hm__steps--stages .hc-hm__step {
		padding: 22px 20px;
	}
}

@media (max-width: 860px) {
	.hc-asks {
		gap: 56px;
		margin-top: 44px;
	}
	.hc-ask {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.hc-ask:nth-child(even) .hc-ask__copy {
		order: 0;
	}
	.hc-hm h3.hc-ask__q {
		font-size: 26px;
	}
	.hc-ask__a {
		font-size: 17px;
		max-width: none;
	}
}

/* ===== Liveness band (EN home) — "How do I know they're real?" beside an
   illustrated live camera check. Finished frame by default; home-liveness.js
   adds .is-anim (waiting state) and .is-play (runs once per visit to the
   band). Replaces the four-moment safety timeline. ===== */
.hc-lv {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 72px;
	align-items: center;
}
.hc-hm--v2 .hc-lv h2.hc-hm__h2--ink {
	font-size: 44px;
	letter-spacing: -0.03em;
	line-height: 1.12;
	max-width: 520px;
	margin: 14px 0 0;
}
.hc-lv__lede {
	font-size: 19px;
	line-height: 1.65;
	color: #d3d7dd;
	margin: 20px 0 0;
	max-width: 500px;
}
.hc-lv__note {
	font-size: 15.5px;
	line-height: 1.65;
	color: #8f98a4;
	margin: 18px 0 0;
	max-width: 500px;
}
.hc-lv__note a {
	color: #fd788c;
}
.hc-lv__vis {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 330px;
}
.hc-lv__screen {
	background: #111a2a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 30px;
	padding: 22px 24px 24px;
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.hc-lv__prompt {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}
.hc-lv__prompt i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hc-pink);
	box-shadow: 0 0 10px var(--hc-pink);
}
.hc-lv__stage {
	position: relative;
	width: 78%;
	margin: 18px auto 0;
	aspect-ratio: 250 / 340;
}
.hc-lv__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.hc-lv__ring ellipse {
	fill: none;
	stroke: var(--hc-pink);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	filter: drop-shadow(0 0 6px rgba(255, 77, 103, 0.6));
}
.hc-lv__face {
	position: absolute;
	left: 4%;
	top: 2.94%;
	width: 92%;
	aspect-ratio: 230 / 320;
	border-radius: 50%;
	overflow: hidden;
	background: #1f2a3d;
}
.hc-lv__face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hc-lv__scan {
	position: absolute;
	left: 0;
	right: 0;
	top: -20%;
	height: 18%;
	background: linear-gradient(180deg, transparent, rgba(255, 120, 140, 0.35), transparent);
	opacity: 0;
	pointer-events: none;
}
.hc-lv__pts {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.hc-lv__pts line {
	stroke: rgba(255, 255, 255, 0.7);
	stroke-width: 1.2;
}
.hc-lv__pts circle {
	fill: #fff;
	stroke: var(--hc-pink);
	stroke-width: 2;
	transform-box: fill-box;
	transform-origin: center;
}
.hc-lv__match {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
}
.hc-lv__thumb {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.14);
}
.hc-lv__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hc-lv__thumb--b img {
	object-position: 50% 90%;
	transform: scale(1.3);
}
.hc-lv__match-t {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 4px;
	font-size: 13.5px;
	font-weight: 600;
	color: #d3d7dd;
}
.hc-lv__match-t svg {
	color: #6fd39a;
}
.hc-lv__name {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 21px;
	color: #fff;
}
.hc-lv__tick circle {
	fill: #2f96f3;
}
.hc-lv__tick path {
	fill: none;
	stroke: #fff;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.hc-lv__tag {
	position: absolute;
	right: 16px;
	top: -11px;
	padding: 3px 10px;
	border-radius: 999px;
	background: #1f2a3d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #8f98a4;
}

/* --- Waiting state (JS present, motion allowed, not yet played) --- */
.hc-lv__vis.is-anim .hc-lv__prompt,
.hc-lv__vis.is-anim .hc-lv__pts line,
.hc-lv__vis.is-anim .hc-lv__match,
.hc-lv__vis.is-anim .hc-lv__name .hc-lv__tick {
	opacity: 0;
}
.hc-lv__vis.is-anim .hc-lv__match {
	transform: translateY(10px);
}
.hc-lv__vis.is-anim .hc-lv__ring ellipse {
	stroke-dashoffset: 100;
}
.hc-lv__vis.is-anim .hc-lv__pts circle {
	opacity: 0;
	transform: scale(0.2);
}
.hc-lv__vis.is-anim .hc-lv__name .hc-lv__tick {
	transform: scale(0.3);
}

/* --- Playing: prompt → ring + scan → five points → links → photos → tick --- */
.hc-lv__vis.is-play .hc-lv__prompt {
	opacity: 1;
	transition: opacity 0.4s ease 0.1s;
}
.hc-lv__vis.is-play .hc-lv__ring ellipse {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}
.hc-lv__vis.is-play .hc-lv__scan {
	animation: hc-lv-scan 1.3s ease-in-out 0.5s 2;
}
.hc-lv__vis.is-play .hc-lv__pts circle {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.6);
}
.hc-lv__vis.is-play .hc-lv__pt--1 { transition-delay: 1s; }
.hc-lv__vis.is-play .hc-lv__pt--2 { transition-delay: 1.15s; }
.hc-lv__vis.is-play .hc-lv__pt--3 { transition-delay: 1.3s; }
.hc-lv__vis.is-play .hc-lv__pt--4 { transition-delay: 1.45s; }
.hc-lv__vis.is-play .hc-lv__pt--5 { transition-delay: 1.6s; }
.hc-lv__vis.is-play .hc-lv__pts line {
	opacity: 1;
	transition: opacity 0.6s ease 1.9s;
}
.hc-lv__vis.is-play .hc-lv__pts {
	animation: hc-lv-track 1.6s ease-in-out 2.2s;
}
.hc-lv__vis.is-play .hc-lv__match {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease 3.1s, transform 0.5s ease 3.1s;
}
.hc-lv__vis.is-play .hc-lv__name .hc-lv__tick {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.3s ease 4s, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.7) 4s;
}

@keyframes hc-lv-scan {
	0% {
		top: -20%;
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		top: 100%;
		opacity: 0;
	}
}
/* The points hold on the face while it "settles" — a slight lock-on wobble. */
@keyframes hc-lv-track {
	0%,
	100% {
		transform: translate(0, 0);
	}
	30% {
		transform: translate(-1.2%, 0.4%);
	}
	65% {
		transform: translate(0.9%, -0.3%);
	}
}

@media (max-width: 860px) {
	.hc-lv {
		grid-template-columns: 1fr;
		gap: 44px;
	}
	.hc-hm--v2 .hc-lv h2.hc-hm__h2--ink {
		font-size: 32px;
	}
	.hc-lv__lede {
		font-size: 17.5px;
	}
}

/* Pivot rung: "Some nights you wonder if you've missed your chance." holds one
   line from 1024px up. The type scales with the viewport (22.4em of text, so
   3.6vw keeps it inside the shell at 1024px) and tops out at the rung's 48px. */
.hc-hm--v2 .hc-rung h2.hc-rung__h--oneline {
	max-width: none;
}
@media (min-width: 1024px) {
	.hc-hm--v2 .hc-rung h2.hc-rung__h--oneline {
		font-size: min(48px, 3.6vw);
	}
	.hc-rung__h--oneline .hc-rung__line {
		white-space: nowrap;
	}
}