/* ==========================================================================
   Andy's Junior parties page sections.
   The hero, marquee and location blocks live in kit.css.
   ========================================================================== */

/* -------------------------------------------------- Media tile with play */

.aj-media {
	position: relative;
	display: block;
	overflow: hidden;
	/* The same 24px corner as the cards next to it */
	border-radius: 24px;
	background: var(--aj-beige);
}

.aj-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}

.aj-media:hover .aj-media__img {
	transform: scale(1.03);
}

/* The same badge as the home page review card: a 40px white puck with a muted
   triangle and a soft halo around it */
.aj-media__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: rgba(72, 68, 70, .5);
	background: rgba(255, 255, 255, .92);
	border-radius: 50%;
	box-shadow: 0 0 0 10px rgba(255, 255, 255, .2);
	transition: transform .2s;
}

.aj-media__play svg {
	width: 28px;
	height: 28px;
}

.aj-media:hover .aj-media__play {
	transform: translate(-50%, -50%) scale(1.08);
}

/* ======================================================== Party kinds === */

/* Four equal columns of 308px, the media tile takes the last one and spans
   both rows */
.aj-kinds__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

/* Padding and rhythm match the home page zone card, the corner is the 24px
   from the design */
.aj-kcard {
	padding: 24px;
	border-radius: 24px;
	background: var(--aj-beige);
}

.aj-kcard--yellow { background: var(--aj-yellow); }
.aj-kcard--orange { background: var(--aj-orange); }
.aj-kcard--red    { background: var(--aj-red); color: var(--aj-white); }
.aj-kcard--sage   { background: var(--aj-sage); }
.aj-kcard--blue   { background: var(--aj-blue); }

/* Label, title and copy all share the same ink in the design */
.aj-kcard__label {
	display: block;
	font-size: 18px;
	line-height: 1.333;
	font-weight: 500;
	color: var(--aj-ink);
}

.aj-kcard--red .aj-kcard__label {
	color: rgba(255, 255, 255, .75);
}

.aj-kcard__title {
	margin-top: 8px;
	font-size: 32px;
	line-height: 1;
	font-weight: 600;
}

.aj-kcard__text {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--aj-ink);
}

.aj-kcard--red .aj-kcard__text {
	color: rgba(255, 255, 255, .88);
}

.aj-kinds__media {
	grid-column: 4;
	grid-row: 1 / span 2;
}

.aj-kinds__media .aj-media {
	height: 100%;
	min-height: 320px;
}

/* ======================================================== Packages ====== */

/* Three equal columns of 416px with a 16px gap */
.aj-packages__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

/* All three cards look the same in the design, the popular one only gets
   the badge */
.aj-pack {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px;
	background: var(--aj-white);
	border-radius: 24px;
}

/* The badge sets a 32px row, so a card without one lines up with it */
.aj-pack__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 32px;
}

.aj-pack__name {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
}

.aj-pack__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--aj-red);
}

.aj-pack__badge-ico {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.aj-pack__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding-inline: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--aj-red);
	background: #fdefeb;
	border-radius: 100px;
	white-space: nowrap;
}

/* The amount is set in Futura like the headings, the unit stays on body text */
.aj-pack__price {
	margin-top: 16px;
	font-family: var(--aj-font-title);
	font-size: 48px;
	line-height: 1.1;
	font-weight: 700;
}

.aj-pack__unit {
	margin-left: 6px;
	font-family: var(--aj-font-text);
	font-size: 16px;
	font-weight: 400;
	color: var(--aj-ink-soft);
}

.aj-pack__text {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--aj-ink-soft);
}

/* The rule runs the full card width, so the list pulls out of the padding
   and puts it back inside. flex: 1 lets the list take the spare height so
   the button always sits at the bottom, however short the list is */
.aj-pack__list {
	flex: 1;
	margin-top: 24px;
	margin-inline: -24px;
	padding-top: 24px;
	padding-inline: 24px;
	border-top: 1px solid var(--aj-beige);
}

.aj-pack__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	color: var(--aj-ink);
}

.aj-pack__item + .aj-pack__item {
	margin-top: 12px;
}

.aj-pack__check {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--aj-beige);
}

.aj-pack__btn {
	margin-top: 24px;
	padding-block: 14px;
}

/* ==================================================== Consultation ====== */

/* Two 632px cards with a 16px gap */
.aj-consult__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

.aj-consult__card {
	padding: 48px;
	border-radius: 24px;
	background: var(--aj-beige);
}

.aj-consult__label {
	display: block;
	font-size: 18px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--aj-red);
}

.aj-consult__title {
	margin-top: 8px;
	font-size: 48px;
	line-height: 1;
	font-weight: 600;
}

.aj-consult__text {
	margin-top: 24px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--aj-ink-soft);
}

.aj-consult__form {
	margin-top: 24px;
}

/* CF7 inside the card. autop is switched off for the theme, so the form
   itself stacks the fields. They sit on cream, not white, and are 48px tall
   pills - this block keeps its own radius, the builder's fields use 12. */
.aj-consult__form form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aj-consult__form .wpcf7-form-control-wrap {
	display: block;
}

/* The success notice is hidden - the form just sends. Validation errors and
   the failure notice stay, they are the only ones with anything to say. */
.aj-consult__form .wpcf7-response-output:empty,
.aj-consult__form form.sent .wpcf7-response-output,
.aj-consult__form form[data-status="sent"] .wpcf7-response-output {
	display: none;
}

.aj-consult__form .wpcf7-form-control:not(.wpcf7-submit) {
	height: 48px;
	padding: 0 16px;
	font-size: 16px;
	line-height: 24px;
	background: var(--aj-cream);
	border: 0;
	box-shadow: inset 0 0 0 1.5px var(--aj-sand-line);
	border-radius: 120px;
}

.aj-consult__form .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: none;
	box-shadow: inset 0 0 0 1.5px var(--aj-red);
}

/* The submit is the same 48px pill as the fields, only filled. The 16px here
   plus the 8px form gap put it 24px below the phone row */
.aj-consult__form .wpcf7-submit {
	margin-top: 16px;
	padding: 14px 20px;
	font-size: 16px;
	line-height: 1.2;
	font-weight: 500;
	border-radius: 120px;
}

/* Country code and number read as one field: the code cut off by a rule and
   its own caret, both from `Phone Inputs.png`, on this block's pill radius.
   The wrapper carries the fill, the two controls inside stay transparent. */
.aj-consult__form .aj-phone-row {
	position: relative;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	height: 48px;
	background: var(--aj-cream);
	box-shadow: inset 0 0 0 1.5px var(--aj-sand-line);
	border-radius: 120px;
}

/* Sits over the select, which cannot hold an icon of its own */
.aj-consult__form .aj-phone-row__flag {
	position: absolute;
	top: 50%;
	left: 16px;
	display: flex;
	transform: translateY(-50%);
	pointer-events: none;
}

.aj-consult__form .aj-phone-row:focus-within {
	box-shadow: inset 0 0 0 1.5px var(--aj-red);
}

/* The flag is injected as the row's first child, so the code is not
   :first-child any more. The rule between the two hangs off the number
   instead, which stays last whatever gets put in front of it. */
.aj-consult__form .aj-phone-row > .wpcf7-form-control-wrap {
	flex: 0 0 auto;
}

.aj-consult__form .aj-phone-row > .wpcf7-form-control-wrap:last-child {
	flex: 1;
	min-width: 0;
	border-left: 1.5px solid var(--aj-sand-line);
}

.aj-consult__form .aj-phone-row .wpcf7-form-control {
	width: 100%;
	height: 100%;
	padding: 0 16px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Native arrow off, ours in its place - the same caret the builder uses.
   The class is on the selector as well, or the shorthand `background` two
   rules up would wipe the image out. */
.aj-consult__form .aj-phone-row select.wpcf7-form-control {
	padding-left: 44px;
	padding-right: 44px;
	font-weight: 400;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3.125 7.1875L10 14.0625L16.875 7.1875' stroke='%23484446' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.aj-consult__stub {
	padding: 14px 16px;
	font-size: 13px;
	color: var(--aj-muted);
	background: rgba(255, 255, 255, .6);
	border: 1px dashed var(--aj-line);
	border-radius: var(--aj-radius-btn);
}

.aj-consult__media {
	overflow: hidden;
	border-radius: 24px;
	/* The photo sits on the same beige as the card next to it */
	background: var(--aj-beige);
}

/* The photo is wrapped in a <picture> so mobile can swap in its own crop.
   Inline by default, it would leave the image nothing to fill */
.aj-consult__media picture {
	display: block;
	height: 100%;
}

.aj-consult__img {
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
}

/* ======================================================= Custom party === */

.aj-builder {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--aj-yellow);
}

/* Background image behind everything, same treatment as the quiz on the
   home page */
.aj-builder__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.aj-builder__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .4;
}

/* Same setup as the CTA banner on the home page */
.aj-builder__deco {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
	width: clamp(160px, 33vw, 469px);
	pointer-events: none;
}

.aj-builder__deco--left  { left: -48px; }
.aj-builder__deco--right { right: -48px; }

/* The mobile photo is a separate field and desktop does not use it */
.aj-builder__deco--mobile { display: none; }

.aj-builder__deco img {
	width: 100%;
	height: auto;
}

.aj-builder__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	/* 64px like every other section, so the gaps around the banner match
	   the rest of the page */
	padding-block: 64px;
	text-align: center;
}

.aj-builder__title {
	max-width: 470px;
	font-size: 48px;
	line-height: 1;
	font-weight: 600;
}

/* 18/26 here, a touch looser than the 18/24 used elsewhere. The copy keeps
   the full ink on yellow, the muted grey is too washed out here */
.aj-builder__text {
	max-width: 460px;
	font-size: 18px;
	line-height: 1.444;
	color: var(--aj-ink);
}

/* The banner button is taller than the rest, 56px with 32px sides. The 14px
   here plus the 14px flex gap put it 28px below the copy */
.aj-builder__inner .aj-btn {
	min-width: 204px;
	margin-top: 14px;
	padding: 18px 32px;
}

/* ===================================================== Add-ons ========== */

.aj-addons__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.aj-acard {
	position: relative;
	padding: 24px;
	border-radius: 24px;
	background: var(--aj-blue-deep);
}

/* A plain white glyph in the corner, no circle behind it */
.aj-acard__icon {
	position: absolute;
	top: 24px;
	right: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--aj-white);
}

.aj-acard__icon svg {
	width: 100%;
	height: 100%;
}

/* The heading clears the icon and its 32px line box lines up with the 32px
   icon next to it. 24 of padding, 32 of heading, 8, two lines of 16/24 and
   24 of padding again is the 136px card of the design */
.aj-acard__title {
	padding-right: 48px;
	font-size: 24px;
	line-height: 1.333;
	font-weight: 600;
	color: var(--aj-ink);
}

.aj-acard__text {
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--aj-ink);
}

/* =========================================================== How it works */

/* Two 608px columns, the photo on the left and the steps on the right */
.aj-steps__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;
	align-items: start;
}

/* The photo in this block carries a smaller corner than the cards */
.aj-steps__media {
	min-height: 100%;
	border-radius: 16px;
}

.aj-steps__media .aj-media__img {
	min-height: 584px;
}

/* Steps sit 100px apart: an 80px row plus a 20px gap */
.aj-steps__list {
	display: grid;
	gap: 20px;
}

/* The badge is centred against the copy, not pinned to its first line */
.aj-step {
	display: flex;
	align-items: center;
	gap: 24px;
}

.aj-step__num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	font-size: 24px;
	font-weight: 700;
	color: var(--aj-white);
	background: #f5a550;
	border-radius: 16px;
}

.aj-step__title {
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--aj-ink);
}

.aj-step__text {
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--aj-ink);
}

/* ====================================================== Party gallery === */

/* Same block as the restaurant on the home page, minus the copy and the
   buttons and with a label on every tile */
.aj-pgallery__tabs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px 12px;
}

.aj-pgallery__nav {
	display: flex;
	gap: 8px;
}

.aj-pgallery__panel {
	grid-column: 1 / -1;
}

/* A scroller rather than a grid, the photo count is not fixed */
.aj-pgallery__grid {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.aj-pgallery__grid::-webkit-scrollbar {
	display: none;
}

.aj-gtile {
	position: relative;
	flex: 0 0 calc((100% - 32px) / 3);
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: var(--aj-radius);
	background: var(--aj-beige);
}

/* Tiles are square, 416x416 in the design */
.aj-gtile__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.aj-gtile__badge {
	position: absolute;
	top: 24px;
	left: 24px;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--aj-ink);
	background: var(--aj-yellow);
	border-radius: 100px;
}

/* ================================================================ FAQ === */

/* This head carries no subtitle, but the design keeps the full 48px gap */
.aj-faq .aj-sec-head {
	margin-bottom: 48px;
}

.aj-faq__list {
	display: grid;
	gap: 16px;
}

.aj-faq__item {
	overflow: hidden;
	border-radius: 24px;
	background: var(--aj-beige);
	transition: background-color .2s;
}

/* The open item turns white instead of keeping the beige fill */
.aj-faq__item.is-open {
	background: var(--aj-white);
}

/* 24px of padding around a 32px sign gives the 80px row from the design */
.aj-faq__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 24px;
	text-align: left;
}

/* Open, the answer moves 8px closer to the question */
.aj-faq__item.is-open .aj-faq__head {
	padding-bottom: 16px;
}

/* The tight leading keeps the question inside the 32px row of the sign */
.aj-faq__q {
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
}

/* A plus that turns into a cross once the item is open */
.aj-faq__sign {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	width: 32px;
	height: 32px;
	color: var(--aj-ink);
	background: var(--aj-white);
	border-radius: 50%;
}

.aj-faq__item.is-open .aj-faq__sign {
	background: #efeae5;
}

.aj-faq__sign::before,
.aj-faq__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transition: transform .25s;
}

.aj-faq__sign::before {
	width: 14px;
	height: 2px;
	transform: translate(-50%, -50%);
}

.aj-faq__sign::after {
	width: 2px;
	height: 14px;
	transform: translate(-50%, -50%);
}

.aj-faq__item.is-open .aj-faq__sign::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.aj-faq__item.is-open .aj-faq__sign::after {
	transform: translate(-50%, -50%) rotate(45deg);
}

.aj-faq__body {
	padding: 0 24px 24px;
}

.aj-faq__a {
	font-size: 16px;
	line-height: 1.5;
	color: var(--aj-ink);
}

/* ======================================================= Responsive ===== */

@media (max-width: 1180px) {
	.aj-kinds__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.aj-kinds__media {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.aj-kinds__media .aj-media {
		min-height: 260px;
	}
}

@media (max-width: 1024px) {
	.aj-kinds__grid,
	.aj-addons__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aj-packages__grid,
	.aj-consult__grid,
	.aj-steps__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.aj-steps__media .aj-media__img {
		min-height: 320px;
	}

	/* Two tiles in view, like the restaurant strip */
	.aj-gtile {
		flex: 0 0 calc((100% - 16px) / 2);
	}

	.aj-builder__title {
		font-size: 26px;
	}
}

@media (max-width: 640px) {
	/* --- Page basics from the 390px design ------------------------------- */

	/* 16px to the screen edge instead of the 20px used on desktop */
	.aj-main--parties .aj-container {
		padding-inline: 16px;
	}

	.aj-builder .aj-container {
		max-width: 326px;
		box-sizing: content-box;
	}

	.aj-sec {
		padding-block: 32px;
	}

	.aj-sec-head {
		margin-bottom: 40px;
	}

	.aj-sec-head__title {
		font-size: 32px;
	}

	/* The subtitle runs to three lines here, so it needs real leading */
	.aj-sec-head__text {
		line-height: 1.333;
	}

	/* --- Party kinds ----------------------------------------------------- */

	.aj-kinds__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 40px below the last card: the 16px grid gap plus this */
	.aj-kinds__media {
		margin-top: 24px;
	}

	/* The tile keeps the desktop crop, 358 by 669 in the design */
	.aj-kinds__media .aj-media {
		height: auto;
		min-height: 0;
		aspect-ratio: 358 / 669;
	}

	/* One tile in view, the next one peeks past the edge */
	.aj-gtile {
		flex: 0 0 82%;
	}

	/* --- Consultation ---------------------------------------------------- */

	/* The photo goes on top, the card follows it */
	.aj-consult__media {
		order: -1;
		aspect-ratio: 358 / 520;
	}

	.aj-consult__card {
		padding: 24px;
	}

	.aj-consult__title {
		font-size: 32px;
	}

	/* --- Custom party banner --------------------------------------------- */

	.aj-builder__inner {
		gap: 16px;
		padding-block: 32px;
	}

	.aj-builder__title {
		font-size: 32px;
	}

	/* 16/24 in the 390px design, and 326px is the content column the copy
	   breaks over three lines in */
	.aj-builder__text {
		max-width: 326px;
		font-size: 16px;
		line-height: 1.5;
	}

	/* 326x48, the full content column. 8px on top of the 16px gap puts it
	   24 below the copy, and 20px of leading makes the pill exactly 48 */
	.aj-builder__inner .aj-btn {
		width: min(326px, 100%);
		min-width: 0;
		margin-top: 8px;
		padding: 14px 32px;
		line-height: 20px;
	}

	.aj-builder__deco--right {
		display: none;
	}

	/* The photo from the mobile field runs the full screen width, sits 32px
	   below the button and ends flush with the bottom edge of the banner.
	   The 16px here plus the 16px flex gap make up that 32 */
	.aj-builder__deco--mobile {
		display: block;
		position: static;
		/* It sits before the copy in the markup, so it needs to be sent
		   to the end of the flex order */
		order: 1;
		width: calc(100% + 32px);
		margin-top: 16px;
		margin-bottom: -32px;
		transform: none;
	}

	/* Without that photo the left character stands in for it, under the copy
	   and running into the bottom edge the same way */
	.aj-builder__deco--left {
		position: static;
		order: 1;
		width: calc(100% + 32px);
		margin-top: 24px;
		margin-bottom: -32px;
		margin-left: -16px;
		margin-right: -16px;
		transform: none;
	}

	.aj-builder:has(.aj-builder__deco--mobile) .aj-builder__deco--left {
		display: none;
	}

	/* --- Packages -------------------------------------------------------- */

	/* A swipeable row instead of a stack, the next card peeks 50px in */
	.aj-packages__grid {
		display: flex;
		gap: 16px;
		margin-inline: -16px;
		padding-inline: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Without this the browser snaps the first card past the padding
		   and the row starts flush with the screen edge */
		scroll-padding-inline: 16px;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.aj-packages__grid::-webkit-scrollbar {
		display: none;
	}

	/* Every card is 308 wide in the design. height:auto lets align-items:
	   stretch equalise them, the base height:100% would keep each card on
	   its own content height */
	.aj-pack {
		flex: 0 0 308px;
		height: auto;
		scroll-snap-align: start;
	}

	/* Only the flame is left on the popular card, the caption is dropped */
	.aj-pack__badge {
		width: 32px;
		padding-inline: 0;
		justify-content: center;
	}

	.aj-pack__badge-text {
		display: none;
	}

	.aj-pack__price {
		font-size: 32px;
	}

	/* The copy drops to 14/20 here, a step down from the 16/24 on desktop */
	.aj-pack__text {
		margin-top: 16px;
		font-size: 14px;
		line-height: 1.428;
	}

	/* --- Add-ons --------------------------------------------------------- */

	/* Three cards to a slide, swiped sideways, the next column peeking 50px
	   in. Filling by column keeps the row heights shared across the slides,
	   so the cards stay on one baseline however long the copy is */
	.aj-addons__grid {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-template-rows: repeat(3, auto);
		/* 308 wide in the design: the 358 column less the 50px peek */
		grid-auto-columns: 308px;
		margin-inline: -16px;
		padding-inline: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Without this the browser snaps the first card past the padding
		   and the row starts flush with the screen edge */
		scroll-padding-inline: 16px;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.aj-addons__grid::-webkit-scrollbar {
		display: none;
	}

	.aj-acard {
		scroll-snap-align: start;
	}

	/* --- FAQ ------------------------------------------------------------- */

	/* This head has no subtitle, so it sits closer than the usual 40 */
	.aj-faq .aj-sec-head {
		margin-bottom: 32px;
	}

	/* The question drops to 20/24 here, the 1.2 leading already gives the 24 */
	.aj-faq__q {
		font-size: 20px;
	}

	/* The items sit 12px apart instead of 16 */
	.aj-faq__list {
		gap: 12px;
	}
}