/**
 * Sticky QR - homepage sections.
 *
 * Full bleed bands with a contained inner column, so the page reads as a
 * sequence of sections rather than one long document. Inherits the palette
 * and controls from sqr-builder.css.
 */

.sqr-home {
	--sqr-ink: #0f172a;
	--sqr-muted: #64748b;
	--sqr-line: #e2e8f0;
	--sqr-surface: #ffffff;
	--sqr-sunken: #f8fafc;
	--sqr-radius: 16px;
	--sqr-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .07);

	color: var(--sqr-ink);
	font-size: 16px;
	line-height: 1.55;
	padding: 56px 0;
	position: relative;
}

.sqr-home *,
.sqr-home *::before,
.sqr-home *::after {
	box-sizing: border-box;
}

.sqr-home__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.sqr-home--tint {
	background: var(--sqr-sunken);
	border-top: 1px solid var(--sqr-line);
	border-bottom: 1px solid var(--sqr-line);
}

/* --------------------------------------------------------------- Headings */

.sqr-hm__head {
	text-align: center;
	max-width: 62ch;
	margin: 0 auto 34px;
}

.sqr-hm__h2 {
	margin: 0 0 10px;
	font-size: clamp(1.6rem, 3.6vw, 2.15rem);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--sqr-ink);
}

.sqr-hm__sub {
	margin: 0;
	font-size: clamp(0.98rem, 2.2vw, 1.08rem);
	color: var(--sqr-muted);
}

/* ------------------------------------------------------------------- Hero */

.sqr-home--hero {
	padding: 44px 0 56px;
	background:
		radial-gradient(60rem 30rem at 78% -10%, color-mix(in srgb, var(--sqr-brand) 12%, transparent), transparent 70%),
		linear-gradient(180deg, #ffffff 0%, var(--sqr-sunken) 100%);
	overflow: hidden;
}

.sqr-hm__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 38px;
	align-items: center;
}

@media (min-width: 980px) {
	.sqr-hm__hero {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 52px;
	}
}

.sqr-hm__eyebrow {
	margin: 0 0 12px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sqr-brand);
}

.sqr-hm__h1 {
	margin: 0 0 16px;
	font-size: clamp(2.05rem, 5.4vw, 3.35rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.035em;
	color: var(--sqr-ink);
}

.sqr-hm__lead {
	margin: 0 0 26px;
	font-size: clamp(1.02rem, 2.4vw, 1.2rem);
	line-height: 1.55;
	color: var(--sqr-muted);
	max-width: 54ch;
}

.sqr-hm__ctas {
	display: flex;
	gap: 11px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.sqr-hm__cta {
	padding: 15px 26px;
	font-size: 16px;
	border-radius: 11px;
}

.sqr-hm__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.sqr-hm__points li {
	position: relative;
	padding-left: 24px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sqr-muted);
}

.sqr-hm__points li::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 4px;
	width: 6px;
	height: 11px;
	border: solid var(--sqr-brand);
	border-width: 0 2px 2px 0;
	transform: rotate(42deg);
}

/* ---------------------------------------------------------------- Stage */

.sqr-hm__stage {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 420px;
}

.sqr-hm__phone {
	width: min(262px, 64vw);
	aspect-ratio: 390 / 760;
	background: #0f172a;
	border-radius: 34px;
	padding: 10px;
	box-shadow: 0 26px 60px rgba(15, 23, 42, .3);
	position: relative;
	z-index: 2;
}

.sqr-hm__phone::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	width: 62px;
	height: 5px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .25);
	z-index: 2;
}

.sqr-hm__frame {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 26px;
	background: #fff;
	display: block;
	pointer-events: none;
}

/* The fanned cards. Absolute on wide screens, a tidy row on narrow ones. */
.sqr-hm__cards {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

@media (min-width: 980px) {
	.sqr-hm__cards {
		display: block;
		margin: 0;
	}

	.sqr-hm__card {
		position: absolute;
		z-index: 3;
	}

	.sqr-hm__card--0 {
		left: 2%;
		top: 14%;
		transform: rotate(-7deg);
	}

	.sqr-hm__card--1 {
		left: -2%;
		bottom: 12%;
		transform: rotate(5deg);
	}

	.sqr-hm__card--2 {
		right: 1%;
		bottom: 20%;
		transform: rotate(8deg);
	}
}

.sqr-hm__card {
	display: grid;
	justify-items: center;
	gap: 7px;
	padding: 12px 12px 11px;
	width: 116px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--sqr-line);
	box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
	text-decoration: none;
	color: var(--sqr-ink);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.sqr-hm__card:hover {
	transform: translateY(-4px) rotate(0deg) !important;
	box-shadow: 0 18px 40px rgba(15, 23, 42, .2);
	color: var(--sqr-ink);
}

.sqr-hm__qr {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
}

.sqr-hm__qr canvas {
	width: 100% !important;
	height: auto !important;
	display: block;
}

.sqr-hm__cardlabel {
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	line-height: 1.25;
	color: var(--sqr-muted);
}

/* ------------------------------------------------------------- Solutions */

.sqr-hm__group {
	margin-bottom: 34px;
}

.sqr-hm__grouph {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.sqr-hm__grouph span {
	font-size: 13px;
	font-weight: 500;
	color: var(--sqr-muted);
}

.sqr-hm__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
	gap: 12px;
}

.sqr-hm__tile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 16px;
	align-items: center;
	gap: 14px;
	padding: 15px 16px;
	border: 1px solid var(--sqr-line);
	border-radius: 14px;
	background: var(--sqr-surface);
	text-decoration: none;
	color: var(--sqr-ink);
	transition: border-color 140ms ease, transform 100ms ease, box-shadow 140ms ease;
}

.sqr-hm__tile:hover {
	border-color: var(--sqr-brand);
	transform: translateY(-2px);
	box-shadow: var(--sqr-shadow);
	color: var(--sqr-ink);
}

.sqr-hm__tileqr {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--sqr-line);
	padding: 3px;
}

.sqr-hm__tileqr canvas {
	width: 100% !important;
	height: auto !important;
	display: block;
}

.sqr-hm__tiletx {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.sqr-hm__tiletx strong {
	font-size: 15px;
	line-height: 1.3;
}

.sqr-hm__tiletx span {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--sqr-muted);
}

.sqr-hm__go {
	width: 8px;
	height: 8px;
	border: solid var(--sqr-muted);
	border-width: 2px 2px 0 0;
	transform: rotate(45deg);
	justify-self: end;
	transition: border-color 140ms ease, transform 140ms ease;
}

.sqr-hm__tile:hover .sqr-hm__go {
	border-color: var(--sqr-brand);
	transform: rotate(45deg) translate(2px, -2px);
}

/* ----------------------------------------------------------------- Proof */

.sqr-hm__proof {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

.sqr-hm__pcard {
	padding: 22px 20px;
	border-radius: 14px;
	background: var(--sqr-surface);
	border: 1px solid var(--sqr-line);
}

.sqr-hm__pnum {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--sqr-brand);
	margin-bottom: 10px;
}

.sqr-hm__pcard strong {
	display: block;
	font-size: 15.5px;
	line-height: 1.3;
	margin-bottom: 7px;
}

.sqr-hm__pcard p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--sqr-muted);
}

/* The builder sits between these bands and needs breathing room. */
.sqr-home + .sqr-builder--full,
.sqr-builder--full + .sqr-home {
	margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sqr-hm__card,
	.sqr-hm__tile,
	.sqr-hm__go {
		transition: none;
	}
}

/* Themes underline links in content. These cards are cards, not sentences. */
.sqr-home a,
.sqr-home a:hover,
.sqr-home a:focus {
	text-decoration: none;
}

.sqr-home .sqr-hm__tile strong,
.sqr-home .sqr-hm__tile span,
.sqr-home .sqr-hm__cardlabel {
	text-decoration: none;
}

/* Keep the QR slots from collapsing before their canvas arrives, so the
   layout does not jump as they paint in. */
.sqr-hm__tileqr::before,
.sqr-hm__qr::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
}

.sqr-hm__tileqr:has(canvas)::before,
.sqr-hm__qr:has(canvas)::before {
	display: none;
}

/* The hero phone crossfades as it cycles through page types. */
.sqr-hm__frame {
	transition: opacity 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.sqr-hm__frame {
		transition: none;
	}
}