/*
 * App landing page (/mobile-app): the design language of the app's videos
 * (pul-app-motion-videos): a dark canvas with soft green glows, ink and sage
 * text, one lime accent, Cotoris headlines that end in a lime full stop.
 * Only this page loads this file, and everything is scoped to .app-landing.
 * Motion only runs under html.al-motion, which the page's head sets when
 * reduced motion isn't requested.
 */

/* ---------- Tokens ---------- */

.app-landing {
	--al-canvas: #1A2116;
	--al-ink: #F8FFF6;
	--al-sage: #C4D7C1;
	--al-muted: #9AA39A;
	--al-lime: #BEE378;
	--al-dark: #1A2518;
	--al-green: #4E7048;
	--al-dot-light: #8EB547;   /* the lime full stop on light backgrounds */
	--al-star: #ff912c;        /* the apps' rating stars (StarRating.js; the web app's --color-star) */
	--al-mustard: #c99738;     /* the premium crown's pill (app colors.mustard.primary; site --col-yellow-1) */
	--al-paper: #F9FBF8;
	--al-surface: #EDEEEA;
	--al-cream: #F5F2EA;
	--al-text: #3D4A3A;        /* body text on light */
	--al-text-soft: #667063;   /* small print on light */
	--al-line: rgba(26, 37, 24, .1);
	--al-ease: cubic-bezier(.2, .8, .2, 1);
	--al-display: 'Cotoris Bold', 'Hind Vadodara', sans-serif;
	--al-sans: 'Hind Vadodara', sans-serif;
	--al-gutter: clamp(1rem, 4vw, 2rem);
	--al-glows:
		radial-gradient(85% 60% at 12% 0, rgba(114, 160, 106, .17), transparent 60%),
		radial-gradient(70% 55% at 92% 0, rgba(142, 181, 71, .11), transparent 62%);

	display: block;
	font-family: var(--al-sans);
	color: var(--al-dark);
	background: var(--al-paper);
	overflow-x: hidden;
	overflow-x: clip;
}

.app-landing img {
	border-radius: 0;
}

.app-landing p {
	margin: 0;
}

.app-landing a {
	color: inherit;
}

.app-landing :focus-visible {
	outline: 3px solid var(--al-green);
	outline-offset: 3px;
}

.app-landing .al-dark :focus-visible {
	outline-color: var(--al-lime);
}

/* ---------- Sections ---------- */

.al-section {
	position: relative;
	padding: clamp(4.5rem, 9vw, 8rem) 0;
}

.al-wrap {
	max-width: 74rem;
	margin: 0 auto;
	padding: 0 var(--al-gutter);
}

.al-dark {
	background-color: var(--al-canvas);
	background-image: var(--al-glows);
	background-repeat: no-repeat;
	color: var(--al-ink);
}

.al-light {
	background: var(--al-paper);
}

.al-surface {
	background: var(--al-surface);
}

.al-cream {
	background: var(--al-cream);
}

.al-mesh {
	background:
		radial-gradient(60% 70% at 0% 100%, rgba(190, 227, 120, .28), transparent 70%),
		radial-gradient(55% 60% at 100% 0%, rgba(114, 160, 106, .18), transparent 70%),
		var(--al-paper);
}

/* ---------- Type ---------- */

.app-landing .al-h {
	font-family: var(--al-display);
	font-weight: 400;
	font-size: clamp(2.25rem, 4.2vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	margin: 0 0 1.25rem;
	color: inherit;
}

.app-landing .al-h--hero {
	font-size: clamp(2.6rem, 4.9vw, 4.4rem);
	margin-bottom: 1.25rem;
}

.app-landing .al-h--sm {
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	margin-bottom: .9rem;
}

.al-w {
	display: inline-block;
}

.al-dot {
	display: inline-block;
	color: var(--al-lime);
	transform-origin: 50% 80%;
}

.al-light .al-dot,
.al-surface .al-dot,
.al-mesh .al-dot,
.al-cream .al-dot {
	color: var(--al-dot-light);
}

.al-body {
	font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
	line-height: 1.6;
	font-weight: 400;
	color: var(--al-text);
	margin-bottom: 1.75rem !important;
}

.al-dark .al-body {
	color: var(--al-sage);
	font-weight: 500;
}

.app-landing .al-eyebrow {
	font-family: var(--al-sans);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--al-green);
	margin: 0 0 1rem;
}

.al-dark .al-eyebrow {
	color: var(--al-lime);
}

.al-small {
	font-size: .875rem;
	line-height: 1.5;
	color: var(--al-text-soft);
}

.al-dark .al-small {
	color: var(--al-muted);
}

.al-small a {
	text-decoration: underline;
	text-underline-offset: .2em;
}

.al-small a:hover {
	color: inherit;
	text-decoration-thickness: 2px;
}

/* ---------- Buttons ---------- */

.app-landing .al-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: .95rem 1.85rem .8rem;
	border-radius: 999px;
	border: 2px solid transparent;
	font-family: var(--al-sans);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: box-shadow .3s var(--al-ease), transform .3s var(--al-ease), background-color .3s, color .3s, border-color .3s;
}

.app-landing .al-btn--lime {
	background: var(--al-lime);
	color: var(--al-dark);
}

.app-landing .al-btn--lime:hover,
.app-landing .al-btn--lime:focus-visible {
	color: var(--al-dark);
	box-shadow: 0 0 0 5px rgba(190, 227, 120, .2), 0 0 26px 6px rgba(190, 227, 120, .28);
	transform: translateY(-1px);
}

.app-landing .al-btn--outline {
	border-color: var(--al-dark);
	color: var(--al-dark);
	background: transparent;
}

.app-landing .al-btn--outline:hover {
	background: var(--al-dark);
	color: var(--al-paper);
}

.app-landing .al-dark .al-btn--outline {
	border-color: rgba(248, 255, 246, .55);
	color: var(--al-ink);
}

.app-landing .al-dark .al-btn--outline:hover {
	background: var(--al-ink);
	border-color: var(--al-ink);
	color: var(--al-dark);
}

.app-landing .al-btn--dark {
	background: var(--al-dark);
	color: var(--al-ink);
}

.app-landing .al-btn--dark:hover {
	color: var(--al-ink);
	box-shadow: 0 10px 24px rgba(26, 37, 24, .25);
	transform: translateY(-1px);
}

/* The pause and play button for anything that moves on its own */
.al-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--al-line);
	background: rgba(255, 255, 255, .85);
	color: var(--al-dark);
	cursor: pointer;
	transition: background-color .2s, transform .2s var(--al-ease);
}

.al-toggle[hidden] {
	display: none;
}

.al-toggle:hover {
	transform: scale(1.06);
}

.al-dark .al-toggle {
	border-color: rgba(248, 255, 246, .18);
	background: rgba(248, 255, 246, .08);
	color: var(--al-ink);
}

.al-toggle svg {
	width: .95rem;
	height: .95rem;
	fill: currentColor;
}

.al-toggle__play,
.al-toggle.is-paused .al-toggle__pause {
	display: none;
}

.al-toggle.is-paused .al-toggle__play {
	display: block;
}

.al-stars {
	display: inline-flex;
	gap: .1rem;
	vertical-align: -.1em;
}

.al-stars svg {
	width: 1em;
	height: 1em;
	fill: var(--al-star);
}

/* ---------- Devices: the videos' phone, and a matching tablet ---------- */

/*
 * Drawn in CSS with the video engine's numbers (shared/engine/scenes.swift),
 * relative to the phone's width (cqw): bezel 2.5% and body radius 16.6% of
 * the screen width, and a Dynamic Island that also covers the recording dot.
 */
.al-phone {
	--al-pw: 18.75rem;
	position: relative;
	flex: none;
	width: var(--al-pw);
	container-type: inline-size;
}

.al-phone__body {
	position: relative;
	padding: 7px;
	padding: 2.41cqw;
	border-radius: 47px;
	border-radius: 15.8cqw;
	background: #0B0E0A;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 50px rgba(0, 0, 0, .5);
}

.al-light .al-phone__body,
.al-surface .al-phone__body,
.al-mesh .al-phone__body,
.al-cream .al-phone__body {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 28px 50px rgba(26, 37, 24, .24), 0 6px 14px rgba(26, 37, 24, .1);
}

/* The side buttons */
.al-phone__body::before,
.al-phone__body::after {
	content: '';
	position: absolute;
	width: 3px;
	border-radius: 2px;
	background: #20261D;
}

.al-phone__body::before {
	left: -3px;
	top: 33%;
	top: 33.3cqw;
	height: 14.7cqw;
}

.al-phone__body::after {
	right: -3px;
	top: 50.9cqw;
	height: 22.8cqw;
}

.al-phone__screen {
	position: relative;
	aspect-ratio: 540 / 1170;
	border-radius: 40px;
	border-radius: 13.4cqw;
	overflow: hidden;
	isolation: isolate;
	background: #000;
	/* Safari: keep the media inside the rounded corners */
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.al-phone__island {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 4.69cqw;
	width: 39.7cqw;
	height: 8.3cqw;
	border-radius: 999px;
	background: #000;
	transform: translateX(-50%);
}

.al-phone__poster,
.al-phone__video,
.al-shot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	border-radius: 0;
}

.al-phone__video {
	opacity: 0;
	transition: opacity .4s;
}

.al-phone__video.is-playing {
	opacity: 1;
}

/* The pause button sits beside the phone, by its top right corner */
.al-phone > .al-toggle,
.al-cell > .al-toggle {
	position: absolute;
	top: 1.25rem;
	right: -3rem;
}

.al-tablet {
	position: relative;
	container-type: inline-size;
}

.al-tablet__body {
	position: relative;
	padding: 14px;
	padding: 3.6cqw;
	border-radius: 24px;
	border-radius: 6.2cqw;
	background: #0B0E0A;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 34px 60px rgba(26, 37, 24, .26), 0 8px 18px rgba(26, 37, 24, .1);
}

.al-tablet__screen {
	position: relative;
	aspect-ratio: 1400 / 2015;
	border-radius: 10px;
	border-radius: 2.7cqw;
	overflow: hidden;
	isolation: isolate;
	background: #000;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.al-tablet__cam {
	position: absolute;
	left: 50%;
	top: 1.4cqw;
	width: 1cqw;
	height: 1cqw;
	border-radius: 50%;
	background: #232A21;
	transform: translateX(-50%);
}

.al-shot {
	opacity: 0;
	transition: opacity .9s var(--al-ease);
}

.al-shot.is-active {
	opacity: 1;
}

/* ---------- Motion ---------- */

@keyframes al-rise {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

@keyframes al-pop {
	from { opacity: 0; transform: scale(.6); }
	to { opacity: 1; transform: none; }
}

@keyframes al-tile {
	from { opacity: 0; transform: translateY(24px) scale(.96); }
	to { opacity: 1; transform: none; }
}

@keyframes al-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@keyframes al-breathe {
	0%, 100% { opacity: .55; transform: scale(.96); }
	50% { opacity: .9; transform: scale(1.03); }
}

@media (prefers-reduced-motion: no-preference) {
	.al-motion .app-landing [data-reveal="words"] .al-w,
	.al-motion .app-landing [data-reveal="up"],
	.al-motion .app-landing [data-reveal="logo"] {
		opacity: 0;
	}

	.al-motion .app-landing [data-reveal="words"] .al-dot {
		opacity: 0;
	}

	.al-motion .app-landing [data-reveal="words"].is-in .al-w {
		animation: al-rise .7s var(--al-ease) calc(var(--i) * 80ms) both;
	}

	.al-motion .app-landing [data-reveal="words"].is-in .al-dot {
		animation: al-pop .45s var(--al-ease) calc(var(--n) * 80ms + 120ms) both;
	}

	.al-motion .app-landing [data-reveal="up"].is-in {
		animation: al-rise .8s var(--al-ease) var(--d, 0ms) both;
	}

	.al-motion .app-landing [data-reveal="logo"].is-in {
		opacity: 1;
	}

	/* The hero phone rises in after the headline */
	.al-motion .app-landing .al-phone--hero {
		animation: al-rise 1s var(--al-ease) 300ms both;
	}
}

/* ---------- 1 · Hero ---------- */

.al-hero {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding-top: clamp(2.25rem, 6vw, 4.5rem);
	/* The bowl-shaped bottom of the site's other dark tops (ix_base.css, .ix-forest): the
	   footer's curved top turned over. The phone and the glows are cut along it. */
	border-radius: 0 0 50% 50% / 0 0 36px 36px;
}

.al-hero__grid {
	display: grid;
	gap: 2.25rem;
}

.al-hero__text {
	max-width: 36rem;
	margin: 0 auto;
	text-align: center;
}

.al-hero__sub {
	font-size: clamp(1.125rem, 1.55vw, 1.3rem);
	line-height: 1.5;
	font-weight: 500;
	color: var(--al-sage);
	margin-bottom: 1.75rem !important;
}

.al-hero__cta .al-btn {
	min-width: 15rem;
}

.al-hero__print {
	margin-top: .9rem !important;
}

.al-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem .5rem;
	margin-top: .6rem !important;
	font-size: .875rem;
	color: var(--al-sage);
}

.al-hero__meta a {
	text-decoration: underline;
	text-underline-offset: .2em;
}

.al-hero__meta a:hover {
	color: var(--al-ink);
}

.al-hero__media {
	position: relative;
	display: flex;
	justify-content: center;
	/* The phone runs off the bottom, cut by the hero's curved edge */
	height: clamp(19rem, 92vw, 27rem);
}

.al-phone--hero {
	--al-pw: min(62vw, 17rem);
}

/* Faint glows behind the phone, so its dark body stands off the dark canvas:
 * lime behind the top of the phone, green lower down to the left. Sized with
 * the phone (--al-glow is about twice its width at each breakpoint). */
.al-hero__media {
	--al-glow: min(124vw, 34rem);
	isolation: isolate;
}

.al-hero__media::before,
.al-hero__media::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 50%;
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
}

.al-hero__media::before {
	top: calc(var(--al-glow) * -.2);
	width: var(--al-glow);
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(190, 227, 120, .17), rgba(190, 227, 120, .06) 55%, rgba(190, 227, 120, 0));
}

.al-hero__media::after {
	top: calc(var(--al-glow) * .3);
	width: calc(var(--al-glow) * .75);
	transform: translateX(-80%);
	background: radial-gradient(closest-side, rgba(114, 160, 106, .22), rgba(114, 160, 106, 0));
}

/* The section after the hero tucks 36px under its curve, so the curve's corners show that
   section's colour rather than the page's (as the footer does under the page above it) */
.al-hero + .al-section {
	margin-top: -36px;
	padding-top: calc(clamp(4.5rem, 9vw, 8rem) + 36px);
}

@media (min-width: 992px) {
	.al-hero__grid {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
		align-items: end;
		gap: 3rem;
	}

	.al-hero__text {
		margin: 0;
		text-align: left;
		align-self: center;
		padding-bottom: 5.5rem;
	}

	.al-hero__meta {
		justify-content: flex-start;
	}

	.al-hero__media {
		--al-glow: 40rem;
		height: 35rem;
	}

	.al-phone--hero {
		--al-pw: 19.5rem;
	}
}

@media (min-width: 1200px) {
	.al-hero__media {
		--al-glow: 43rem;
		height: 37rem;
	}

	.al-phone--hero {
		--al-pw: 21rem;
	}
}

/* ---------- Feature rows ---------- */

.al-feature__grid {
	display: grid;
	gap: clamp(3rem, 6vw, 5rem);
	align-items: center;
}

.al-feature__text {
	max-width: 34rem;
	margin: 0 auto;
	text-align: center;
}

.al-feature__media {
	position: relative;
	display: flex;
	justify-content: center;
}

.al-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	padding: 0;
	margin: -.5rem 0 1.75rem;
}

.al-chips li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .95rem .38rem;
	border-radius: 999px;
	border: 1px solid var(--al-line);
	background: #fff;
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.3;
	color: var(--al-dark);
}

/* The app's own icons (_icon.html), in the app's accent green on light */
.al-chips .al-icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: -.15rem;
	fill: var(--al-green);
}

.al-dark .al-chips li {
	border-color: rgba(248, 255, 246, .14);
	background: rgba(248, 255, 246, .06);
	color: var(--al-ink);
}

.al-dark .al-chips .al-icon {
	fill: var(--al-lime);
}

/* Something that floats beside a phone (the timer, the import toast) */
.al-float-wrap {
	position: relative;
}

@media (min-width: 992px) {
	.al-feature__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.al-feature__text {
		margin: 0;
		text-align: left;
	}

	.al-feature--flip .al-feature__text {
		order: 2;
	}

	.al-chips {
		justify-content: flex-start;
	}
}

/* ---------- 2 · Recipes ---------- */

.al-stat-h {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.al-stat-h__lead {
	font-family: var(--al-sans);
	font-weight: 500;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	letter-spacing: 0;
	line-height: 1.2;
	color: var(--al-text);
}

/* Numbers are never set in Cotoris */
.al-stat {
	font-family: var(--al-sans);
	font-weight: 600;
	font-size: clamp(4rem, 8.5vw, 6.75rem);
	line-height: .95;
	letter-spacing: -.035em;
	font-variant-numeric: tabular-nums;
	color: var(--al-dark);
}

.al-stat__plus {
	color: var(--al-dot-light);
	transition: opacity .4s;
}

.al-stat.is-counting .al-stat__plus {
	opacity: 0;
}

.al-stat-h__tail {
	line-height: 1.05;
}

.al-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(.5rem, 1.2vw, .9rem);
	width: min(100%, 31rem);
}

.al-tiles img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: clamp(14px, 2.2vw, 26px);
	box-shadow: 0 10px 24px rgba(26, 37, 24, .12);
}

@media (prefers-reduced-motion: no-preference) {
	.al-motion .app-landing .al-tiles img {
		opacity: 0;
	}

	.al-motion .app-landing .al-tiles.is-in img {
		animation: al-tile .7s var(--al-ease) calc(var(--i) * 70ms) both;
	}
}

/* ---------- 3 · Nourish ---------- */

.al-cell {
	position: relative;
	width: min(100%, 27rem);
	margin: 0;
}

.al-cell__stage {
	position: relative;
	aspect-ratio: 1;
	/* The loop is drawn on the canvas colour: fade its square edge into the section */
	-webkit-mask-image: radial-gradient(circle closest-side, #000 86%, transparent 100%);
	mask-image: radial-gradient(circle closest-side, #000 86%, transparent 100%);
}

.al-cell__poster,
.al-cell__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.al-cell__video {
	opacity: 0;
	transition: opacity .4s;
}

.al-cell__video.is-playing {
	opacity: 1;
}

.al-cell > .al-toggle {
	top: auto;
	bottom: .5rem;
	right: .5rem;
}

/* ---------- 4 · Make mode ---------- */

.al-timer {
	position: absolute;
	top: 22%;
	right: -2.75rem;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem 1rem .55rem .55rem;
	border-radius: 999px;
	background: var(--al-dark);
	color: var(--al-ink);
	box-shadow: 0 16px 30px rgba(26, 37, 24, .28);
}

.al-timer__ring {
	width: 2.4rem;
	height: 2.4rem;
	transform: rotate(-90deg);
}

.al-timer__ring circle {
	fill: none;
	stroke-width: 3.5;
}

.al-timer__track {
	stroke: rgba(248, 255, 246, .14);
}

.al-timer__progress {
	stroke: var(--al-lime);
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: var(--al-timer-off, 25);   /* starts three quarters full (3:45 of 5:00) */
	transition: stroke-dashoffset 1s linear;
}

.al-timer__label {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.al-timer__time {
	font-weight: 600;
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
}

.al-timer__what {
	font-size: .8125rem;
	color: var(--al-muted);
}

@media (min-width: 992px) {
	.al-timer {
		right: -4.75rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.al-motion .app-landing .al-timer {
		animation: al-float 5s ease-in-out infinite;
	}
}

/* ---------- 5 · Proof ---------- */

.al-proof__head {
	text-align: center;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.al-proof__head .al-h {
	margin-bottom: 1rem;
	text-wrap: balance;   /* two even lines on phones, not "for years." on its own */
}

.al-rating {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem .75rem;
	color: var(--al-sage);
}

.al-rating__value {
	font-weight: 600;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--al-ink);
	font-variant-numeric: tabular-nums;
}

.al-rating .al-stars {
	font-size: 1.25rem;
}

.al-rating__count {
	font-size: 1rem;
}

/* Marquees (reviews, new recipes): a row you scroll, or a slow loop when app_landing.js runs */
.al-marquee {
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding: 0 var(--al-gutter) 1rem;
}

.al-marquee__list {
	display: flex;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.al-marquee__list > li {
	flex: none;
	scroll-snap-align: start;
}

.al-marquee.is-moving {
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.al-marquee__track {
	display: flex;
	gap: 1rem;
	width: max-content;
	animation: al-marquee calc(var(--al-count) * var(--al-per, 6s)) linear infinite;
}

.al-marquee.is-moving:hover .al-marquee__track,
.al-marquee.is-moving:focus-within .al-marquee__track,
.al-marquee.is-paused .al-marquee__track {
	animation-play-state: paused;
}

@keyframes al-marquee {
	to { transform: translateX(calc(-50% - .5rem)); }
}

.al-marquee__footer {
	display: flex;
	justify-content: center;
	margin-top: 1.25rem;
}

.al-review {
	display: flex;
	width: min(21rem, 82vw);
}

.al-review figure {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 1.5rem 1.5rem 1.35rem;
	border-radius: 18px;
	border: 1px solid rgba(248, 255, 246, .1);
	background: rgba(248, 255, 246, .05);
}

.al-review .al-stars {
	font-size: .95rem;
	margin-bottom: .75rem;
}

.al-review__title {
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--al-ink);
	margin-bottom: .4rem !important;
}

.al-review__text {
	margin: 0 0 1rem;
	flex: 1;
}

.al-review__text p {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--al-sage);
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.al-review__name {
	font-family: var(--al-sans);
	font-size: .875rem;
	color: var(--al-muted);
	padding: 0;
	text-align: left;
}

/* ---------- 6 · Import ---------- */

.al-toast {
	position: absolute;
	left: -2.5rem;
	bottom: 18%;
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .6rem 1.1rem .5rem .6rem;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 16px 30px rgba(26, 37, 24, .2);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--al-dark);
	white-space: nowrap;
}

.al-toast__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: -.1rem;
	border-radius: 50%;
	background: var(--al-lime);
}

.al-toast__check svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: var(--al-dark);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
	.al-motion .app-landing .al-toast {
		opacity: 0;
		transform: translateY(10px) scale(.92);
		transition: opacity .3s var(--al-ease), transform .45s var(--al-ease);
	}

	.al-motion .app-landing .al-toast.is-shown {
		opacity: 1;
		transform: none;
	}
}

/* ---------- 7 · Groceries ---------- */

.al-check-h {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	margin-bottom: 1.25rem;
}

.al-check-h .al-h {
	margin: 0;
}

.al-check {
	flex: none;
	width: clamp(2.6rem, 4vw, 3.25rem);
	height: clamp(2.6rem, 4vw, 3.25rem);
}

.al-check svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.al-check__ring {
	fill: none;
	stroke: var(--al-sage);
	stroke-width: 5;
}

.al-check__fill {
	fill: var(--al-lime);
	transform-origin: 24px 24px;
}

.al-check__tick {
	fill: none;
	stroke: var(--al-dark);
	stroke-width: 4.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
	.al-motion .app-landing .al-check__fill {
		transform: scale(0);
	}

	.al-motion .app-landing .al-check__tick {
		stroke-dasharray: 100;
		stroke-dashoffset: 100;
	}

	/* Fills with a small bounce, then the tick draws in */
	.al-motion .app-landing .al-check.is-in .al-check__fill {
		transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .25s;
		transform: scale(1);
	}

	.al-motion .app-landing .al-check.is-in .al-check__tick {
		transition: stroke-dashoffset .35s var(--al-ease) .55s;
		stroke-dashoffset: 0;
	}
}

@media (min-width: 992px) {
	.al-check-h {
		justify-content: flex-start;
	}
}

/* ---------- 8 · Phone and tablet ---------- */

.al-devices__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.al-devices__text {
	max-width: 40rem;
}

.al-pair {
	position: relative;
	width: min(100%, 44rem);
	margin-top: 1rem;
}

.al-pair__glow {
	position: absolute;
	inset: 8% 6% 12%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(190, 227, 120, .55), rgba(190, 227, 120, 0));
	filter: blur(24px);
	z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.al-motion .app-landing .al-pair__glow {
		animation: al-breathe 7s ease-in-out infinite;
	}
}

.al-pair__devices {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-left: 3%;
}

.al-pair .al-tablet {
	width: 64%;
}

.al-phone--pair {
	--al-pw: 31%;
	margin-left: -5%;
	margin-bottom: -3%;
}

.al-pair__meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	margin-top: 2rem;
}

.al-pair__captions {
	display: grid;
}

.al-pair__caption {
	grid-area: 1 / 1;
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--al-dark);
	opacity: 0;
	transition: opacity .6s var(--al-ease);
}

.al-pair__caption.is-active {
	opacity: 1;
}

.al-pair__nav {
	display: flex;
	align-items: center;
	gap: .25rem;
}

.al-pair__dot {
	position: relative;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.al-pair__dot::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: .55rem;
	height: .55rem;
	border-radius: 999px;
	background: rgba(26, 37, 24, .2);
	transform: translate(-50%, -50%);
	transition: width .4s var(--al-ease), background-color .4s;
}

.al-pair__dot.is-active::after {
	width: 1.5rem;
	background: var(--al-dot-light);
}

.al-pair__nav .al-toggle {
	margin-left: .5rem;
	width: 2rem;
	height: 2rem;
}

.al-devices__note {
	margin-top: 1.5rem !important;
}

/* ---------- 9 · A note from Sadia ----------
   Set as a letter: left-aligned at every width, "Hi friend!" large, the rest at a reading size in
   the same typeface, then her autograph. */

.al-note__grid {
	display: grid;
	gap: 2.5rem;
	align-items: center;
	max-width: 66rem;
}

/* Up to 25rem: the photo is 720px wide, so it stays sharp on retina screens up to about there */
.al-note__photo {
	width: min(100%, 25rem);
	margin: 0 auto;
}

.al-note__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
	box-shadow: 0 24px 48px rgba(26, 37, 24, .16);
}

.al-note__text {
	width: min(100%, 34rem);
	margin: 0 auto;
	text-align: left;
}

.al-note__quote {
	margin: 0;
}

.al-note__quote p {
	font-family: 'Cotoris', var(--al-sans);
	font-size: clamp(1.15rem, 1.5vw, 1.3rem);
	line-height: 1.5;
	color: var(--al-dark);
}

.al-note__quote p:first-child {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	line-height: 1.35;
	letter-spacing: -.01em;
}

.al-note__quote p + p {
	margin-top: .85rem;
}

/* "Xo, Sadia": the black autograph from her emails, a touch larger than there (120px) */
.al-note__sign {
	display: block;
	width: clamp(8.5rem, 20vw, 9.5rem);
	height: auto;
	margin: 1rem 0 0;
}

.al-note__role {
	margin-top: .5rem !important;
	font-size: .9375rem;
	color: var(--al-text-soft);
}

/* Side by side from 992px: on a tablet held upright the photo would shrink beside the letter */
@media (min-width: 992px) {
	.al-note__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(2.5rem, 5vw, 4rem);
	}

	.al-note__photo {
		margin: 0;
	}

	.al-note__text {
		width: auto;
	}
}

/* ---------- 11 · New recipes ---------- */

.al-new__head {
	text-align: center;
	margin-bottom: 2.25rem;
}

.al-new__head .al-body {
	margin-bottom: 0 !important;
}

.al-recipe-card {
	width: 11rem;
}

.al-recipe-card a {
	display: block;
	text-decoration: none;
	color: var(--al-dark);
}

.al-recipe-card a:hover {
	color: var(--al-green);
}

.al-recipe-card__img {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: 20px;
	overflow: hidden;
	background: var(--al-surface);
}

.al-recipe-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--al-ease);
}

.al-recipe-card a:hover img {
	transform: scale(1.04);
}

/* The premium crown, as in the app (components/Badge.js: 22px tall, 6px corners,
 * mustard, white 11px crown) and on the home page (crown-icon.html, its shadow) */
.al-recipe-card__badge {
	position: absolute;
	top: .5rem;
	right: .5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	padding: 0 5px;
	border-radius: 6px;
	background: var(--al-mustard);
	box-shadow: 0 0 8px rgba(0, 0, 0, .5);
}

.al-recipe-card__badge svg {
	display: block;
	width: calc(11px * 640 / 512);   /* the crown's 640:512 viewBox, 11px tall like the app's */
	height: 11px;
}

.al-recipe-card__name {
	display: block;
	margin-top: .6rem;
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.3;
}

/* ---------- 12 · Closing ---------- */

.al-close {
	background-image:
		radial-gradient(60% 50% at 50% 0, rgba(190, 227, 120, .12), transparent 70%),
		var(--al-glows);
}

.al-close__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 44rem;
}

.al-close__logo {
	width: min(17rem, 70vw);
	margin-bottom: 2.25rem;
	color: var(--al-ink);
}

.al-logo {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.al-checklist {
	list-style: none;
	display: grid;
	gap: .7rem;
	padding: 0;
	margin: .5rem 0 2rem;
	text-align: left;
}

.al-checklist li {
	position: relative;
	padding-left: 2.25rem;
	font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
	line-height: 1.45;
	font-weight: 500;
	color: var(--al-ink);
}

.al-checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .1em;
	width: 1.45rem;
	height: 1.45rem;
	border-radius: 50%;
	background: var(--al-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.4l2.7 2.7 5.8-6' fill='none' stroke='%231A2518' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.al-close__risk {
	max-width: 32rem;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--al-sage);
	margin-bottom: 1.75rem !important;
}

.al-close__cta .al-btn {
	min-width: 15rem;
}

.al-close__cta .al-small {
	max-width: 27rem;
	margin: .8rem auto 0 !important;
}

.al-stores {
	margin-top: 2.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(248, 255, 246, .12);
}

.al-stores__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin: .75rem 0 1rem;
}

.al-stores__buttons a {
	display: inline-flex;
	transition: transform .2s var(--al-ease);
}

.al-stores__buttons a:hover {
	transform: translateY(-1px);
}

/* The logo builds like the videos' end card: "Pick", then the lime drops in and
   bounces as it lands, "Up" pops on top of it, then "Limes" (about 0.9 s). */
.al-logo__pick,
.al-logo__limes {
	transform-origin: 0 0;
}

@media (prefers-reduced-motion: no-preference) {
	.al-motion .app-landing .al-close__logo:not(.is-in) .al-logo > g {
		opacity: 0;
	}

	.al-motion .app-landing .al-close__logo.is-in .al-logo__pick {
		animation: al-logo-word .2s var(--al-ease) both;
	}

	.al-motion .app-landing .al-close__logo.is-in .al-logo__lime {
		animation: al-logo-lime .55s linear .13s both;
	}

	.al-motion .app-landing .al-close__logo.is-in .al-logo__up {
		animation: al-logo-up .55s linear .33s both;
	}

	.al-motion .app-landing .al-close__logo.is-in .al-logo__limes {
		animation: al-logo-word .2s var(--al-ease) .6s both;
	}
}

@keyframes al-logo-word {
	from { opacity: 0; transform: scale(.94); }
	to { opacity: 1; transform: none; }
}

/* Drops in on its side, rotates down flat with a slight overshoot, bounces as it lands */
@keyframes al-logo-lime {
	0% { opacity: 0; transform: translate(40px, -90px) rotate(90deg) scale(1.1); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
	12% { opacity: 1; }
	36% { transform: translate(26px, 0) rotate(-6deg) scale(1.06); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
	55% { transform: translate(14px, -22px) rotate(-8deg) scale(1.03); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
	73% { transform: translate(5px, 0) rotate(-5deg) scale(1.01); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
	82% { transform: translate(2px, -5.5px) rotate(-3deg) scale(1); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
	91% { transform: translate(1px, 0) rotate(-1deg) scale(1); }
	100% { opacity: 1; transform: none; }
}

/* Stretches up, squashes, rebounds once, settles (from its foot) */
@keyframes al-logo-up {
	0% { opacity: 0; transform: translateY(6px) scale(1.41, .5); }
	10% { opacity: 1; }
	30% { transform: translateY(-26px) scale(.91, 1.22); }
	55% { transform: translateY(0) scale(1.08, .86); }
	78% { transform: translateY(-6px) scale(.98, 1.05); }
	100% { opacity: 1; transform: none; }
}

/* ---------- 13 · Gift ---------- */

.al-gift {
	padding: clamp(4rem, 7vw, 6rem) 0;
}

.al-gift__inner {
	text-align: center;
	max-width: 40rem;
}

.al-gift .al-body {
	margin-bottom: 1.5rem !important;
}

/* ---------- 14 · FAQ (the shared include, restyled here only) ---------- */

.al-faq {
	background: var(--al-paper);
}

.al-faq #faq {
	max-width: 52rem !important;
	margin: 0 auto;
	padding: clamp(4rem, 8vw, 6.5rem) var(--al-gutter) !important;
}

.al-faq #faq > h2 {
	font-family: var(--al-display);
	font-size: clamp(2.25rem, 4.2vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--al-dark);
	padding-bottom: 2rem !important;
	margin: 0;
}

.al-faq #faq > h2::after {
	content: '.';
	color: var(--al-dot-light);
}

.al-faq .question {
	padding: 1.15rem 1.4rem 1rem;
	margin-bottom: .75rem;
	border-radius: 18px;
	border: 1px solid var(--al-line);
	background: #fff;
	box-shadow: none;
	text-align: left;
}

.al-faq .question:hover {
	box-shadow: 0 10px 24px rgba(26, 37, 24, .08);
	transform: none;
}

.al-faq .question-title {
	font-family: var(--al-sans);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--al-dark);
	padding-right: 1rem;
}

.al-faq .question-btn-up,
.al-faq .question-btn-down {
	color: var(--al-green);
}

.al-faq p.answer {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--al-text);
	padding-top: .25rem;
}

.al-faq .subtext {
	color: var(--al-text-soft);
	text-align: center;
}

/* ---------- Sticky CTA (under 1200 px) ---------- */

.al-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1001;
	padding: .65rem var(--al-gutter) calc(.65rem + env(safe-area-inset-bottom, 0px));
	background: rgba(26, 33, 22, .96);
	border-top: 1px solid rgba(248, 255, 246, .12);
	color: var(--al-ink);
	transform: translateY(110%);
	transition: transform .4s var(--al-ease);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.al-sticky.is-visible {
	transform: none;
}

.al-sticky__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 40rem;
	margin: 0 auto;
}

.al-sticky__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: .875rem;
	line-height: 1.3;
	color: var(--al-sage);
}

.al-sticky__text strong {
	font-weight: 600;
	font-size: 1rem;
	color: var(--al-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.al-sticky__text .al-stars {
	font-size: .8rem;
}

.app-landing .al-sticky .al-btn {
	min-height: 2.9rem;
	padding: .75rem 1.35rem .62rem;
	font-size: 1rem;
}

/* Lift the site's back-to-top button (site_app.css .pul-top) above the bar while it shows */
.al-sticky-on .pul-top {
	bottom: calc(75px + 4.25rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1200px) {
	.al-sticky {
		display: none;
	}
}

/* ---------- Small screens ---------- */

@media (max-width: 575.98px) {
	.al-phone > .al-toggle {
		right: -2.6rem;
	}

	.al-timer {
		right: -1.5rem;
		padding-right: .85rem;
	}

	.al-toast {
		left: -1.25rem;
	}

	.al-review {
		width: 82vw;
	}
}

.al-phone:not(.al-phone--hero):not(.al-phone--pair) {
	--al-pw: min(62vw, 18.75rem);
}