/*
 * The app's funnel: subscribe, subscribe success, my subscription, the gift card page,
 * the gift card after payment, and the recipient's redeem page. They wear the landing
 * page's design (app_landing.css, loaded first) plus the pieces in this file, which
 * only these pages need. Everything is scoped to .al-funnel; app_landing/_head.html
 * loads this file when a page passes funnel=True.
 *
 * Mobile first: on a phone, each page's first screen holds its action.
 */

/* The page scripts show and hide parts with the hidden attribute; nothing overrides it */
.al-funnel [hidden] {
	display: none !important;
}

/* ---------- Page shell ---------- */

/* A dark first screen. On phones: one column, the action straight under the headline.
   From 992px: the landing hero's two columns, the phone (or gift card) on the left. */
.al-fhero {
	position: relative;
	padding: clamp(1.25rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5.5rem);
}

.al-fhero__grid {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

.al-fhero__main {
	width: 100%;
	max-width: 30rem;
	margin: 0 auto;
}

.al-fhero__media {
	display: none;
}

.app-landing .al-h--funnel {
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	margin-bottom: .75rem;
	text-wrap: balance;
}

.al-fhero__lead {
	font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
	line-height: 1.5;
	font-weight: 500;
	color: var(--al-sage);
	margin-bottom: 1.25rem !important;
}

/* A second sentence that only shows from tablet up, to keep the phone's first screen short */
.al-more {
	display: none;
}

/* Small headings inside the form: "Create your account" */
.app-landing .al-ftitle {
	font-family: var(--al-sans);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--al-ink);
	margin: 1.5rem 0 .2rem;
}

.al-fnote {
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--al-muted);
	margin-bottom: .85rem !important;
}

@media (min-width: 768px) {
	.al-more {
		display: inline;
	}
}

@media (min-width: 992px) {
	.al-fhero {
		padding-top: clamp(3rem, 5vw, 4.5rem);
	}

	.al-fhero__grid {
		grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
		align-items: center;
		gap: 4rem;
	}

	.al-fhero__main {
		margin: 0;
	}

	/* The phone sits on the left; it comes after the form in the source, for the keyboard order.
	   The form is placed automatically, into the free column. */
	.al-fhero__media {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		justify-content: center;
		position: relative;
	}

	/* The landing hero's phone and glows, shown whole here */
	.al-funnel .al-fhero__media .al-hero__media {
		height: auto;
		padding: 1rem 0 2rem;
	}
}

/* ---------- Progress: Plan · Account · Payment · App ---------- */

/* data-step on the list says which step is current; steps before it are done. Left-aligned like the
   heading and text under it (Robin, 13 Nov 2026): each step's dot and label sit at the left of its
   quarter, so the first dot and "Plan" line up with the heading. They were centred in their
   quarters, which put the route neither flush left nor in the middle. */
.al-steps {
	list-style: none;
	display: flex;
	width: 100%;
	max-width: 21rem;
	padding: 0;
	margin: 0 0 1.35rem;
}

.al-steps li {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .4rem;
	font-size: .75rem;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--al-muted);
	text-align: left;
}

/* The line from the previous step's dot to this one (each dot 1rem, at its step's left; .35rem
   clear of both) */
.al-steps li + li::before {
	content: '';
	position: absolute;
	top: calc(.5rem - 1px);
	right: calc(100% + .35rem);
	left: calc(-100% + 1.35rem);
	height: 2px;
	border-radius: 2px;
	background: rgba(248, 255, 246, .16);
}

.al-steps__dot {
	position: relative;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	border: 2px solid rgba(248, 255, 246, .3);
}

/* Done: a filled lime disc with a tick, and a lime line behind it */
.al-steps[data-step="2"] li:nth-child(-n+1) .al-steps__dot,
.al-steps[data-step="3"] li:nth-child(-n+2) .al-steps__dot,
.al-steps[data-step="4"] li:nth-child(-n+3) .al-steps__dot,
.al-steps[data-step="done"] li .al-steps__dot {
	border-color: var(--al-lime);
	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.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.al-steps[data-step="3"] li:nth-child(2)::before,
.al-steps[data-step="4"] li:nth-child(-n+3)::before,
.al-steps[data-step="done"] li::before,
.al-steps[data-step="2"] li:nth-child(2)::before,
.al-steps[data-step="3"] li:nth-child(3)::before,
.al-steps[data-step="4"] li:nth-child(4)::before {
	background: var(--al-lime);
}

/* Current: a lime ring with a glowing centre */
.al-steps[data-step="1"] li:nth-child(1),
.al-steps[data-step="2"] li:nth-child(2),
.al-steps[data-step="3"] li:nth-child(3),
.al-steps[data-step="4"] li:nth-child(4) {
	color: var(--al-ink);
}

.al-steps[data-step="1"] li:nth-child(1) .al-steps__dot,
.al-steps[data-step="2"] li:nth-child(2) .al-steps__dot,
.al-steps[data-step="3"] li:nth-child(3) .al-steps__dot,
.al-steps[data-step="4"] li:nth-child(4) .al-steps__dot {
	border-color: var(--al-lime);
	background: radial-gradient(circle, var(--al-lime) 0 2.5px, transparent 3px);
	box-shadow: 0 0 0 4px rgba(190, 227, 120, .16), 0 0 12px 2px rgba(190, 227, 120, .3);
}

/* ---------- Panels: status messages and errors ---------- */

.al-panel {
	padding: 1rem 1.15rem .9rem;
	border-radius: 18px;
	border: 1px solid rgba(248, 255, 246, .12);
	background: rgba(248, 255, 246, .06);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--al-sage);
}

.al-panel + .al-panel {
	margin-top: .75rem;
}

.al-alert {
	padding: .8rem 1rem .7rem;
	border-radius: 14px;
	border: 1px solid rgba(228, 104, 73, .4);
	background: rgba(228, 104, 73, .12);
	font-size: .9375rem;
	line-height: 1.5;
	color: #FFC9BC;
}

/* ---------- Sign-in buttons (the shared firebase-auth.html, restyled here only) ---------- */

/* Google and Apple: white, as their brand rules allow on a dark background. Email: outline. */
.al-funnel #login-btns-cnt {
	display: grid;
	gap: .6rem;
}

.al-funnel .login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	width: 100%;
	min-height: 3.25rem;
	margin: 0;
	padding: .7rem 1.25rem .55rem;
	border-radius: 999px;
	border: 1.5px solid #fff;
	background: #fff;
	color: #1F1F1F;
	font-family: var(--al-sans);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, transform .2s var(--al-ease);
}

.al-funnel .login-btn:hover {
	background: #EEF1EA;
	border-color: #EEF1EA;
	transform: translateY(-1px);
}

.al-funnel .login-btn span {
	margin: 0;
	color: inherit;
}

.al-funnel .login-btn svg {
	flex: none;
	width: 1.3rem;
	height: 1.3rem;
	margin-top: -.15rem;
}

/* The shared partial draws the Apple logo white and the envelope black */
.al-funnel .login-btn svg path[fill="white"] {
	fill: currentColor;
}

.al-funnel .login-btn[onclick*="passwordless"],
.al-funnel #email-btn {
	background: transparent;
	border-color: rgba(248, 255, 246, .5);
	color: var(--al-ink);
}

.al-funnel .login-btn[onclick*="passwordless"]:hover,
.al-funnel #email-btn:hover {
	background: rgba(248, 255, 246, .08);
	border-color: var(--al-ink);
}

.al-funnel .login-btn .st0 {
	fill: currentColor;
}

/* ---------- Loader (the shared loader.html): three lime dots ---------- */

.al-funnel .loader {
	display: flex;
	justify-content: center;
	gap: .5rem;
	padding: 1.25rem 0 .5rem;
}

.al-funnel .loader div {
	width: .65rem;
	height: .65rem;
	border-radius: 50%;
	background: var(--al-lime);
	animation: al-load 1.1s ease-in-out infinite;
}

.al-funnel .loader div:nth-child(2) { animation-delay: .15s; }
.al-funnel .loader div:nth-child(3) { animation-delay: .3s; }
.al-funnel .loader div:nth-child(4) { display: none; }

@keyframes al-load {
	0%, 80%, 100% { opacity: .25; transform: scale(.7); }
	40% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.al-funnel .loader div {
		animation-duration: 2.4s;
		transform: none;
	}
}

/* ---------- Trust line: stars, rating, checkout ---------- */

.al-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .55rem;
	font-size: .875rem;
	line-height: 1.4;
	color: var(--al-sage);
}

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

/* Phones: rating and checkout on two centred lines, rather than a wrap after the dot */
@media (max-width: 479.98px) {
	.al-trust {
		flex-direction: column;
		justify-content: center;
	}

	.al-trust__sep {
		display: none;
	}
}

.al-trust__lock {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}

.al-trust__lock svg {
	width: .85rem;
	height: .85rem;
	margin-top: -.15rem;
	fill: currentColor;
}

/* ---------- Actions under the form ---------- */

.al-factions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .5rem;
}

.al-factions > :not([hidden]) {
	margin-top: .75rem;
}

.al-factions > .al-btn {
	width: 100%;
}

/* A quiet text button: "Sign out" */
.al-flink {
	align-self: center;
	padding: .35rem .5rem;
	border: 0;
	background: none;
	font-family: var(--al-sans);
	font-weight: 500;
	font-size: .9375rem;
	color: var(--al-sage);
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

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

.app-landing .al-fine {
	margin-top: .9rem;
	text-align: center;
}

/* ---------- Subscribe: the plans ---------- */

.al-plans {
	display: grid;
	gap: .65rem;
}

.al-funnel .al-plan__btn {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	width: 100%;
	margin: 0;
	padding: .95rem 1rem .8rem;
	border-radius: 18px;
	border: 1.5px solid rgba(248, 255, 246, .16);
	background: rgba(248, 255, 246, .05);
	color: var(--al-ink);
	font-family: var(--al-sans);
	text-align: left;
	cursor: pointer;
	transition: border-color .25s, background-color .25s, box-shadow .3s var(--al-ease);
}

.al-funnel .al-plan__btn:hover {
	border-color: rgba(248, 255, 246, .34);
}

.al-funnel .al-plan__btn.selected {
	border-color: var(--al-lime);
	background: rgba(190, 227, 120, .08);
	box-shadow: 0 0 0 4px rgba(190, 227, 120, .1), 0 0 26px 2px rgba(190, 227, 120, .12);
}

.al-plan__radio {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: .1rem;
	border-radius: 50%;
	border: 2px solid rgba(248, 255, 246, .4);
	transition: border-color .25s, background .25s;
}

.selected .al-plan__radio {
	border-color: var(--al-lime);
	background: radial-gradient(circle, var(--al-lime) 0 4.5px, transparent 5px);
}

.al-plan__body {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: .2rem;
}

.al-plan__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .5rem;
}

.al-plan__name {
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
}

/* .save-banner is also a site-wide class (pul_website_styles.css), positioned absolutely there */
.al-funnel .al-plan__tag {
	position: static;
	display: inline-flex;
	align-items: center;
	padding: .14rem .55rem;
	border-radius: 999px;
	background: var(--al-lime);
	color: var(--al-dark);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.al-funnel .al-plan__tag--muted {
	background: rgba(248, 255, 246, .12);
	color: var(--al-sage);
}

.al-plan__price {
	margin-left: auto;
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	white-space: nowrap;
}

.al-funnel .price-old {
	margin-right: .3rem;
	font-size: .9375rem;
	font-weight: 500;
	color: var(--al-muted);
	text-decoration: line-through;
}

.al-plan__sub,
.al-plan__trial {
	font-size: .875rem;
	line-height: 1.4;
	color: var(--al-sage);
}

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

.al-plan__sub:empty {
	display: none;
}

/* ---------- Subscribe: page parts and states ---------- */

.al-funnel #message-txt {
	margin: .25rem 0 1rem;
}

.al-funnel #promo-code-error {
	margin-bottom: .75rem;
}

.al-funnel #checkout-error-msg {
	margin-top: .75rem;
}

.al-sub__trust {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.al-sub__more {
	margin-top: 2rem;
	padding-top: 1.35rem;
	border-top: 1px solid rgba(248, 255, 246, .1);
}

.app-landing .al-sub__more .al-ftitle {
	margin-top: 0;
}

.al-checklist--sm {
	gap: .55rem;
	margin: .85rem 0 0;
}

.al-checklist--sm li {
	padding-left: 2rem;
	font-size: 1rem;
}

.al-checklist--sm li::before {
	width: 1.3rem;
	height: 1.3rem;
}

/* Already subscribed: no steps, no sales; a gift card user still sees the plans */
.al-funnel[data-state="subscribed"] .al-steps,
.al-funnel[data-state="gift-user"] .al-steps,
.al-funnel[data-state="subscribed"] .al-sub__trust,
.al-funnel[data-state="subscribed"] .al-sub__more,
.al-funnel[data-state="redirecting"] .al-sub__more {
	display: none;
}

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

	.al-funnel .al-plan__btn {
		padding: 1.1rem 1.2rem 1rem;
	}
}

/* ---------- Getting the app: store buttons, and a QR code on computers ---------- */

.al-getapp {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.al-getapp__qr {
	display: none;
}

.al-getapp__stores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}

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

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

.al-getapp__code {
	flex: none;
	width: 7.5rem;
	height: 7.5rem;
	padding: .45rem;
	border-radius: 16px;
	background: #fff;
}

.al-getapp__code svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (min-width: 992px) {
	.al-getapp__qr {
		display: flex;
		align-items: center;
		gap: 1rem;
		max-width: 22rem;
	}
}

/* ---------- Next steps: numbered glass cards ---------- */

.al-next {
	list-style: none;
	display: grid;
	gap: .85rem;
	padding: 0;
	margin: 1.5rem 0 0;
	counter-reset: al-next;
}

.al-next > li {
	position: relative;
	padding: 1.1rem 1.15rem 1.2rem 3.5rem;
	border-radius: 20px;
	border: 1px solid rgba(248, 255, 246, .12);
	background: rgba(248, 255, 246, .05);
	counter-increment: al-next;
}

.al-next > li::before {
	content: counter(al-next);
	position: absolute;
	top: 1.05rem;
	left: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.65rem;
	height: 1.65rem;
	padding-bottom: .12em;  /* Hind's numerals sit low in the line box */
	border-radius: 50%;
	background: var(--al-lime);
	color: var(--al-dark);
	font-weight: 700;
	font-size: .875rem;
}

.app-landing .al-next .al-ftitle {
	margin-top: .1rem;
}

/* ---------- Subscribe success ---------- */

.al-done__tick {
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	margin: .25rem 0 1rem;
}

/* The sign-in option they used, as a pill (nothing to click here) */
.al-done__methods {
	max-width: 22rem;
}

.al-funnel .al-done__methods .login-btn {
	cursor: default;
	pointer-events: none;
	min-height: 3rem;
	font-size: 1rem;
}

.al-done__methods .login-btn svg {
	width: 1.2rem;
	height: 1.2rem;
}

.al-done__help {
	margin-top: 1.25rem;
}

/* ---------- My subscription: one centred column ---------- */

.al-manage .al-fhero {
	min-height: 62vh;
	padding-top: clamp(2.5rem, 8vw, 5rem);
}

.al-manage__main {
	max-width: 26rem;
}

.al-manage__note {
	display: none;
}

.al-funnel[data-state="signed-out"] .al-manage__note {
	display: block;
}

.al-manage #sign-in-cnt {
	margin-top: .5rem;
}

/* The gift card itself is in app_landing.css: the landing page's gift section shows it too */

/* ---------- Gift page: hero ---------- */

/* Phones: the line, the card, then the price and the buy button. From 992px: the card on the left. */
.al-ghero__grid {
	display: grid;
	grid-template-areas: "text" "card" "buy";
	gap: 1.1rem;
	text-align: center;
}

.al-ghero__text {
	grid-area: text;
}

.al-ghero__card {
	grid-area: card;
	position: relative;
	display: flex;
	justify-content: center;
	padding: .35rem 0 .9rem;
}

.al-ghero__card .al-giftcard--hero {
	width: min(80%, 22rem);
}

.al-ghero__buy {
	grid-area: buy;
}

.al-gprice {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: .3rem .6rem;
}

.al-gprice__amount {
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1.15;
}

.al-funnel .al-gprice .price-old {
	font-size: 1.125rem;
}

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

.al-gprice .al-plan__tag {
	align-self: center;
}

.app-landing .al-gprice__sub {
	margin-top: .2rem;
}

.al-funnel .al-ghero__cta {
	width: 100%;
	margin-top: 1.1rem;
}

.app-landing .al-ghero__print {
	margin-top: .7rem;
}

.al-ghero__trust {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

@media (min-width: 992px) {
	.al-ghero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "card text" "card buy";
		column-gap: 4rem;
		row-gap: 0;
		align-items: start;
		text-align: left;
	}

	.al-ghero__text {
		align-self: end;
	}

	.al-ghero__card {
		align-self: center;
		padding: 2rem 0;
	}

	.al-ghero__card .al-giftcard--hero {
		width: min(100%, 30rem);
	}

	.al-gprice,
	.al-ghero__trust {
		justify-content: flex-start;
	}

	.al-funnel .al-ghero__cta {
		width: auto;
		min-width: 16rem;
	}
}

/* ---------- Gift page: how it works ---------- */

.al-ghow {
	text-align: center;
}

.al-ghow__steps {
	list-style: none;
	display: grid;
	gap: 1.75rem;
	max-width: 62rem;
	padding: 0;
	margin: 2rem auto 0;
	counter-reset: al-ghow;
}

.al-ghow__steps li {
	display: flex;
	flex-direction: column;
	align-items: center;
	counter-increment: al-ghow;
}

/* Each step: its icon in a lime orb, with the step's number on a small dark badge */
.al-ghow__orb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 52%),
		linear-gradient(140deg, #D6F09F 0%, var(--al-lime) 45%, #8EB547 100%);
	box-shadow: 0 10px 22px -6px rgba(110, 150, 52, .55), inset 0 -2px 4px rgba(26, 37, 24, .12);
	color: var(--al-dark);
}

.al-ghow__icon {
	width: 1.75rem;
	height: 1.75rem;
}

.al-ghow__orb::after {
	content: counter(al-ghow);
	position: absolute;
	top: -.15rem;
	right: -.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--al-dark);
	box-shadow: 0 0 0 3px var(--al-paper);
	color: var(--al-lime);
	font-weight: 700;
	font-size: .8125rem;
	line-height: 1;
}

.app-landing .al-ghow__title {
	margin: 0 0 .35rem;
	font-family: var(--al-sans);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--al-dark);
}

.al-ghow .al-body {
	max-width: 20rem;
	margin-bottom: 0 !important;
}

@media (min-width: 768px) {
	.al-ghow__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
	}
}

/* ---------- The offer list on light backgrounds ---------- */

.al-checklist--light li {
	color: var(--al-dark);
}

/* ---------- Gift card after payment ---------- */

.al-gifted__actions {
	display: grid;
	gap: .6rem;
}

.al-gifted__actions .al-btn {
	width: 100%;
}

.al-gifted__bonus {
	display: grid;
	justify-items: center;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(248, 255, 246, .12);
}

.al-gifted__bonus .al-giftcard {
	width: min(80%, 20rem);
}

.al-gifted__bonus .al-gifted__actions {
	width: 100%;
}

.al-gifted .al-next {
	margin-top: 2rem;
	text-align: left;
}

.app-landing .al-gifted__more {
	margin-top: 1.25rem;
}

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

@media (min-width: 992px) {
	.al-gifted__actions {
		grid-template-columns: auto auto;
		justify-content: start;
	}

	.al-gifted__actions .al-btn {
		width: auto;
	}

	.al-gifted__bonus {
		justify-items: start;
	}
}

/* ---------- Redeem: the recipient's page ---------- */

/* Phones and tablets get "Open the app to redeem" and the store buttons; computers get a QR code
   that opens this page on a phone. The script sets data-device from the browser, and until it
   runs the width decides. The code to type in shows on Android only: the iPhone app shows its
   "gift card code" option only after this page's link opened it, and then fills the code in. */
.al-redeem .desktop-content,
.al-redeem .al-redeem__android {
	display: none;
}

@media (min-width: 992px) {
	.al-redeem:not([data-device]) .desktop-content {
		display: block;
	}

	.al-redeem:not([data-device]) .mobile-content {
		display: none;
	}
}

.al-redeem[data-device="computer"] .desktop-content,
.al-redeem[data-device="android"] .al-redeem__android {
	display: block;
}

.al-redeem[data-device="computer"] .mobile-content {
	display: none;
}

.al-redeem .al-ghero__cta {
	margin-top: 0;
}

.app-landing .al-redeem__hint {
	max-width: 24rem;
	margin: .9rem auto 0;
}

.al-redeem__stores {
	justify-content: center;
	margin-top: .9rem;
}

.al-redeem__android .al-small {
	max-width: 24rem;
	margin: 1rem auto 0;
}

/* The code, with a copy button */
.al-codebox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	max-width: 22rem;
	margin: .6rem auto 0;
	padding: .4rem .4rem .4rem 1.2rem;
	border-radius: 999px;
	border: 1px dashed rgba(190, 227, 120, .55);
	background: rgba(190, 227, 120, .08);
}

.al-codebox__code {
	min-width: 0;
	overflow-wrap: anywhere;
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: .08em;
	color: var(--al-lime);
	text-align: left;
}

.al-funnel .al-codebox__copy {
	flex: none;
	min-height: 2.5rem;
	padding: 0 1.1rem;
	font-size: .9375rem;
}

/* Computers: the QR code beside what it does */
.al-redeem__qr {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	max-width: 30rem;
	margin: 0 auto;
	padding: 1.1rem;
	text-align: left;
	border-radius: 20px;
	border: 1px solid rgba(248, 255, 246, .12);
	background: rgba(248, 255, 246, .05);
}

.al-redeem__code {
	width: 8.5rem;
	height: 8.5rem;
}

.app-landing .al-redeem__qr .al-ftitle {
	margin-top: 0;
}

.app-landing .al-redeem__help {
	margin-top: 1.25rem;
}

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

@media (min-width: 992px) {
	.app-landing .al-redeem__hint,
	.al-redeem__android .al-small,
	.al-codebox,
	.al-redeem__qr {
		margin-left: 0;
	}

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

	.al-funnel.al-redeem .al-ghero__cta {
		width: auto;
	}
}

/* ---------- /open and /mobile-app/download (mobile-app-open.html) ---------- */

/* mobile_app_open_script.js swaps is-loading for is-mobile or is-desktop */
.al-open [data-surface] {
	display: none;
}

.al-open .is-loading [data-surface="loading"],
.al-open .is-mobile [data-surface="mobile"],
.al-open .is-desktop [data-surface="desktop"] {
	display: block;
}

.al-open__hero {
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.al-open__inner {
	width: 100%;
	max-width: 34rem;
	text-align: center;
}

.al-open__icon {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 1.25rem;
	border-radius: 18px;
	box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
}

.app-landing .al-open .al-eyebrow {
	margin-bottom: .75rem;
}

.al-open .al-fhero__lead {
	margin-left: auto;
	margin-right: auto;
}

.al-open .al-open__qr {
	width: 11rem;
	height: 11rem;
	margin: .5rem auto 1.25rem;
	padding: .6rem;
}

.al-open .al-open__qr svg {
	display: block;
	width: 100%;
	height: 100%;
}

.al-open .al-open__stores {
	justify-content: center;
	margin-top: .75rem;
}


/* ---------- A recipe collection that's in the app only (featured-recipe-collection-exclusive.html) ----------
 * The /open page's top, with the collection's cut-out (the transparent photo the app shows) in
 * place of the app icon. recipe_app_exclusive_script.js fills #dynamic-text: a line of words on a
 * phone, or a QR code (an SVG) on a computer, which gets the white tile and the hint under it. */

.al-xc__cutout {
	display: block;
	width: min(85%, 21rem);
	height: auto;
	max-height: 14rem;
	margin: 0 auto 1.1rem;
	object-fit: contain;
	filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .45));
}

.al-xc__blurb {
	margin: -.25rem 0 .9rem;
	color: var(--al-lime);
	font-family: var(--al-display);
	font-size: clamp(1.2rem, 2.6vw, 1.45rem);
	line-height: 1.25;
}

.al-xc__dynamic p {
	margin: 0 0 .9rem;
	padding: 0;
	color: var(--al-sage);
}

.al-xc__dynamic:has(svg) {
	width: 11rem;
	height: 11rem;
	margin: .5rem auto .75rem;
	padding: .6rem;
	border-radius: 16px;
	background: #fff;
}

.al-xc__dynamic svg {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0 !important;
}

.al-xc__hint {
	display: none;
}

.al-xc__dynamic:has(svg) + .al-xc__hint {
	display: block;
}