html,
body {
	overflow-x: clip;
}

.menu-primer {
	background: var(--red);
	color: #fff;
	padding: 24px 0;
}

.menu-primer .wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 35px;
}

.menu-primer div div {
	display: grid;
	gap: 4px;
}

.menu-primer span {
	color: var(--yellow);
	font-size: 11px;
	font-weight: 1000;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.menu-primer strong {
	font-size: 15px;
	text-transform: uppercase;
}

.impact-card {
	grid-column: 1 / -1;
	position: relative;
	overflow: hidden;
	background: var(--yellow);
	color: var(--ink);
	padding: 55px;
	border: 5px solid var(--ink);
	box-shadow: 12px 12px 0 var(--red);
}

.impact-card::after {
	content: 'GOOD';
	position: absolute;
	right: -15px;
	bottom: -45px;
	font: 190px/.75 var(--display);
	color: rgba(9, 9, 9, .08);
}

.impact-card h2 {
	font-size: clamp(64px, 9vw, 120px);
	margin-bottom: 20px;
}

.impact-card p:last-child {
	position: relative;
	z-index: 1;
	max-width: 720px;
	font-size: 19px;
}

.combo-callout {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 18px;
	padding: 22px;
	border: 2px solid var(--yellow);
}

.combo-callout strong {
	color: var(--yellow);
	text-transform: uppercase;
}

.smash-lab {
	position: relative;
	overflow: hidden;
	background: #080808;
	color: var(--cream);
}

.smash-lab::before {
	content: 'SIZZLE';
	position: absolute;
	right: -25px;
	top: 30px;
	font: 210px/.8 var(--display);
	color: rgba(255, 255, 255, .025);
}

.smash-lab__intro {
	display: grid;
	grid-template-columns: 1fr .7fr;
	align-items: end;
	gap: 50px;
	margin-bottom: 55px;
}

.smash-lab__intro .eyebrow {
	grid-column: 1 / -1;
	margin-bottom: -30px;
}

.smash-lab__intro h2,
.smash-lab__intro p {
	margin-bottom: 0;
}

.smash-lab__intro > p:last-child {
	font-size: 21px;
	padding-bottom: 10px;
}

.smash-lab__grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 70px;
	align-items: center;
}

.smash-stage {
	position: relative;
	min-height: 540px;
	overflow: hidden;
	background: radial-gradient(circle, #3c3c3c 0 29%, #282828 30% 48%, #161616 49% 66%, #080808 67%);
	border: 2px solid rgba(255, 255, 255, .13);
	box-shadow: inset 0 0 90px #000, 18px 18px 0 var(--red);
}

.griddle-lines {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.025) 27px 29px);
}

.smash-patty {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 170px;
	height: 170px;
	border-radius: 48% 52% 44% 56%;
	background: radial-gradient(circle at 36% 34%, #d76750, #a62f26 62%, #6f1d18);
	box-shadow: 0 18px 35px rgba(0,0,0,.65);
	transform: translate(-50%, -42%);
	transition: width .65s cubic-bezier(.2,.8,.2,1), height .65s, border-radius .65s, transform .65s, background .65s, box-shadow .65s;
}

.onion {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 135px;
	height: 28px;
	border: 6px solid rgba(245,235,193,.95);
	border-width: 5px 0;
	border-radius: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) rotate(16deg) scale(.5);
	transition: .55s .15s;
}

.onion--two { transform: translate(-50%, -50%) rotate(-25deg) scale(.5); width: 115px; }
.onion--three { transform: translate(-50%, -50%) rotate(72deg) scale(.5); width: 100px; }

.mustard {
	position: absolute;
	inset: 17%;
	border-radius: 50%;
	background: repeating-radial-gradient(ellipse at 50% 50%, #efbd18 0 8px, transparent 9px 17px);
	opacity: 0;
	transform: scale(.45);
	transition: .45s;
}

.smash-spatula {
	position: absolute;
	left: 50%;
	top: -155px;
	width: 260px;
	height: 205px;
	border-radius: 7px 7px 25px 25px;
	background: linear-gradient(125deg, #d8d8d1, #777 50%, #eee 54%, #888);
	box-shadow: 0 22px 35px rgba(0,0,0,.55);
	transform: translateX(-50%) rotate(-6deg);
	transition: transform .6s, top .6s;
	z-index: 3;
}

.smash-spatula::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -240px;
	width: 42px;
	height: 260px;
	border-radius: 20px;
	background: #222;
	transform: translateX(-50%);
}

.smash-steam {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.smash-steam i {
	position: absolute;
	left: 35%;
	top: 43%;
	width: 5px;
	height: 80px;
	border-radius: 50%;
	border-left: 3px solid rgba(255,255,255,.38);
	opacity: 0;
}

.smash-steam i:nth-child(2) { left: 52%; height: 110px; }
.smash-steam i:nth-child(3) { left: 66%; height: 70px; }

.smash-stage[data-smash-stage="2"] .smash-patty,
.smash-stage[data-smash-stage="3"] .smash-patty,
.smash-stage[data-smash-stage="4"] .smash-patty {
	width: 325px;
	height: 190px;
	border-radius: 42% 49% 45% 52%;
	background: radial-gradient(circle at 40% 35%, #b34431, #6e2119 67%, #32100d);
}

.smash-stage[data-smash-stage="2"] .smash-spatula {
	top: 82px;
	transform: translateX(-50%) rotate(-3deg);
}

.smash-stage[data-smash-stage="2"] .onion,
.smash-stage[data-smash-stage="3"] .onion,
.smash-stage[data-smash-stage="4"] .onion {
	opacity: .95;
	transform: translate(-50%, -50%) rotate(16deg) scale(1);
}

.smash-stage[data-smash-stage="2"] .onion--two,
.smash-stage[data-smash-stage="3"] .onion--two,
.smash-stage[data-smash-stage="4"] .onion--two { transform: translate(-50%, -50%) rotate(-25deg) scale(1); }
.smash-stage[data-smash-stage="2"] .onion--three,
.smash-stage[data-smash-stage="3"] .onion--three,
.smash-stage[data-smash-stage="4"] .onion--three { transform: translate(-50%, -50%) rotate(72deg) scale(1); }

.smash-stage[data-smash-stage="3"] .mustard,
.smash-stage[data-smash-stage="4"] .mustard { opacity: .95; transform: scale(1); }

.smash-stage[data-smash-stage="3"] .smash-spatula,
.smash-stage[data-smash-stage="4"] .smash-spatula { top: -210px; }

.smash-stage[data-smash-stage="4"] .smash-patty {
	transform: translate(-50%, -42%) rotateY(180deg) rotate(3deg);
	background: radial-gradient(circle, #73501d 0 4%, #3d180d 6% 64%, #140806 68%);
	box-shadow: 0 0 0 8px rgba(238,184,22,.18), 0 18px 35px rgba(0,0,0,.7);
}

.smash-stage[data-smash-stage="4"] .smash-steam i {
	opacity: 1;
	animation: smash-steam 1.6s ease-out infinite;
}

.smash-stage[data-smash-stage="4"] .smash-steam i:nth-child(2) { animation-delay: .3s; }
.smash-stage[data-smash-stage="4"] .smash-steam i:nth-child(3) { animation-delay: .6s; }

@keyframes smash-steam {
	from { transform: translateY(20px) scale(.8); opacity: 0; }
	35% { opacity: .65; }
	to { transform: translateY(-80px) scale(1.4); opacity: 0; }
}

.smash-controls h3 {
	font-size: clamp(42px, 5vw, 70px);
	margin: 12px 0 22px;
}

.smash-controls > p:not(.smash-kicker, .screen-reader-text) {
	font-size: 19px;
	color: #d4c9b9;
}

.smash-kicker {
	color: var(--yellow);
	font-weight: 1000;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.smash-progress {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 7px;
	margin-bottom: 30px;
}

.smash-progress i {
	height: 7px;
	background: #333;
}

.smash-progress i.is-active { background: var(--red); }
.smash-next { margin-top: 20px; min-width: 190px; }

.process-proof__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 45px;
}

.process-proof article {
	border-top: 7px solid var(--red);
	padding-top: 24px;
}

.process-proof article > strong {
	color: var(--red);
	font: 80px/1 var(--display);
}

.process-proof h2 {
	font-size: 40px;
	margin: 13px 0;
}

.app-hero {
	min-height: 720px;
	background:
		radial-gradient(circle at 78% 42%, rgba(244,197,29,.2), transparent 24%),
		linear-gradient(125deg, #090909 0 65%, #da252d 65% 100%);
}

.app-hero__grid {
	display: grid;
	grid-template-columns: 1.35fr .65fr;
	gap: 70px;
	align-items: center;
}

.app-hero__grid h1 {
	font-size: clamp(68px, 9vw, 132px);
}

.app-hero__grid > div > p:not(.eyebrow, .app-install-status) {
	max-width: 650px;
	font-size: 21px;
}

.app-hero__grid img {
	width: min(100%, 420px);
	border: 8px solid var(--cream);
	box-shadow: 18px 18px 0 var(--yellow);
	transform: rotate(3deg);
}

.app-install-status {
	max-width: 620px;
	margin: 18px 0 0;
	color: #d4c9b9;
	font-size: 14px !important;
}

.app-benefits article > strong {
	display: block;
}

.app-benefits__intro {
	max-width: 920px;
	margin-bottom: 60px;
}

.app-benefits__intro > p:not(.eyebrow) {
	max-width: 780px;
	font-size: 19px;
}

.app-benefits h3 {
	font-size: 40px;
	margin: 13px 0;
}

.app-instructions h2 {
	margin-top: 0;
}

.app-instructions h3 {
	margin: 38px 0 10px;
	color: var(--yellow);
}

.woocommerce div.product {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary {
	min-width: 0;
}

.woocommerce div.product .woocommerce-product-gallery {
	max-width: 100%;
	overflow: clip;
	contain: inline-size paint;
}

.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
	max-width: 100%;
	overflow: hidden !important;
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	.menu-primer .wrap,
	.smash-lab__intro,
	.smash-lab__grid,
	.process-proof__grid,
	.app-hero__grid { grid-template-columns: 1fr; }
	.woocommerce div.product { grid-template-columns: minmax(0, 1fr); }
	.smash-lab__intro .eyebrow { grid-column: auto; margin-bottom: -20px; }
	.smash-stage { min-height: 470px; }
	.app-hero__grid img { width: min(66vw, 360px); }
}

@media (max-width: 620px) {
	.menu-primer .wrap { gap: 20px; }
	.impact-card { padding: 32px 25px; box-shadow: 7px 7px 0 var(--red); }
	.combo-callout { grid-template-columns: 1fr; }
	.smash-stage { min-height: 390px; box-shadow: 8px 8px 0 var(--red); }
	.smash-stage[data-smash-stage="2"] .smash-patty,
	.smash-stage[data-smash-stage="3"] .smash-patty,
	.smash-stage[data-smash-stage="4"] .smash-patty { width: 255px; height: 155px; }
	.smash-spatula { width: 210px; height: 160px; }
	.app-hero { min-height: 760px; }
	.app-hero__grid { gap: 40px; }
	.app-hero__grid img { width: min(78vw, 310px); box-shadow: 10px 10px 0 var(--yellow); }
}

@media (prefers-reduced-motion: reduce) {
	.smash-patty, .smash-spatula, .onion, .mustard { transition: none; }
	.smash-stage[data-smash-stage="4"] .smash-steam i { animation: none; opacity: .35; }
}