/* ==========================================================================
   Aviagame — landing template (views/home.php).

   One section per block in structure/home/. Blocks render in the order the
   editor set, so nothing here may depend on a fixed sequence of siblings.
   ========================================================================== */

/* --- Hero -----------------------------------------------------------------
   A full-bleed photo, copy on the left, artwork on the right. The background
   is a real <img> rather than a CSS background so it can be the LCP element
   with a srcset. */

.aviagame-hero {
	--aviagame-hero-pad-end: 56px;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--aviagame-bg);
}

.aviagame-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: hidden;
}

.aviagame-hero__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A scrim on each side, but not the same weight. On the left it carries the
   copy, so it is heavy and reaches half the band. On the right it only has to
   dissolve the full-bleed photo into the page instead of letting it stop on the
   window edge, so it is a quarter as long and much lighter — mirrored at full
   strength it swallowed the phone.

   At z-index -1, under .aviagame-hero__inner, so it never touches the copy, the
   buttons or the phone — only the photo and the plane behind them. */
.aviagame-hero::before {
	position: absolute;
	inset: 0;
	z-index: -1;

	/* Two layers, the first painted over the second: a short fade along the
	   bottom edge so the photo settles into the page instead of stopping on a
	   line, then the left-to-right scrim. */
	background:
		linear-gradient(
			0deg,
			var(--aviagame-bg) 0%,
			rgba(10, 12, 17, .4) 9%,
			transparent 24%
		),
		linear-gradient(
			90deg,
			var(--aviagame-bg) 0%,
			rgba(10, 12, 17, .92) 22%,
			rgba(10, 12, 17, .62) 38%,
			rgba(10, 12, 17, .22) 48%,
			transparent 55%
		),
		linear-gradient(
			270deg,
			var(--aviagame-bg) 0%,
			rgba(10, 12, 17, .45) 8%,
			rgba(10, 12, 17, .15) 16%,
			transparent 24%
		);
	content: '';
}

/* The plane shares the art column's cell instead of floating over the whole
   band, which is what keeps the aircraft itself in the gap between the copy and
   the phone at any width: everything here is a share of that column, so the
   three move together. The upload is one wide streak with the aircraft in its
   right third, hence the width over 100% and the negative start margin — they
   push the aircraft into the gap and let the trail run on behind the copy.

   z-index puts it under the scrim (-1) and over the photo (-3), so the trail
   dims exactly where the text needs the contrast. */
.aviagame-hero__plane {
	position: relative;
	z-index: -2;
	grid-area: 1 / 2;
	align-self: center;
	width: 152%;
	margin-inline-start: -94%;
}

.aviagame-hero__plane img { display: block; width: 100%; height: auto; }

.aviagame-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	min-height: 500px;
	padding-block: 52px var(--aviagame-hero-pad-end);
}

.aviagame-hero__copy { position: relative; z-index: 2; }

.aviagame-hero__title {
	margin: 0 0 20px;
	font-size: clamp(38px, 4.4vw, 62px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.aviagame-hero__text {
	max-width: 420px;
	margin-bottom: 28px;
	color: var(--aviagame-ink-2);
	font-size: 15px;
	line-height: 1.65;
}

.aviagame-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 44px;
}

/* The trust row: icon, two-line label, hairline divider between the items. */
.aviagame-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0 28px;
}

.aviagame-hero__trust-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-inline-end: 28px;
	border-inline-end: 1px solid var(--aviagame-line-2);
}

.aviagame-hero__trust-item:last-child { padding-inline-end: 0; border-inline-end: 0; }

.aviagame-hero__trust-icon {
	flex: none;
	display: inline-flex;
	color: var(--aviagame-red);
}

.aviagame-hero__trust-icon img { width: 42px; height: 42px; object-fit: contain; }

.aviagame-hero__trust-label {
	color: var(--aviagame-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

/* Artwork ------------------------------------------------------------------
   The plane, the script accent and the phone are three separate uploads laid
   over each other, so the editor can swap any one of them on its own. */

.aviagame-hero__art {
	position: relative;
	grid-area: 1 / 2;
	align-self: stretch;
	min-height: 400px;
}

/* The phone stands on the bottom edge of the hero, as in the design, rather
   than floating in the middle of the art column. The negative offset cancels
   the inner's bottom padding so it reaches the band's real edge; the hero
   clips whatever runs past it. */
.aviagame-hero__phone {
	position: absolute;
	inset-block-start: auto;
	inset-block-end: calc(var(--aviagame-hero-pad-end) * -1);
	inset-inline-end: 0;
	width: 52%;
	max-width: 360px;
}

.aviagame-hero__phone img { width: 100%; height: auto; }

/* --- Contents strip ------------------------------------------------------- */

.aviagame-toc-strip__inner { padding: 24px 28px 28px; }

.aviagame-toc-strip__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
}

.aviagame-toc-strip__title {
	color: var(--aviagame-ink);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.aviagame-toc-strip__note { color: var(--aviagame-faint); font-size: 12px; }

/* Four across: the chips carry whole headings now that the list is built from
   the page itself, and six columns cut most of them short. */
.aviagame-toc-strip__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.aviagame-toc-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 13px 14px;
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius-sm);
	background: var(--aviagame-card);
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.aviagame-toc-chip:hover { border-color: var(--aviagame-red); background: var(--aviagame-card-2); }

.aviagame-toc-chip__num {
	flex: none;
	color: var(--aviagame-faint);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.aviagame-toc-chip__label {
	flex: 1;
	min-width: 0;
	color: var(--aviagame-ink);
	font-size: 13px;
	font-weight: 600;
}

.aviagame-toc-chip__arrow {
	flex: none;
	display: inline-flex;
	color: var(--aviagame-muted);
}

.aviagame-toc-chip__arrow svg { width: 14px; height: 14px; }

/* The whole chip goes red on hover — number, label and arrow — but nothing gets
   heavier: the weight stays where it is, so the row does not shift as the pointer
   moves along it. */
.aviagame-toc-chip:hover .aviagame-toc-chip__arrow,
.aviagame-toc-chip:hover .aviagame-toc-chip__num,
.aviagame-toc-chip:hover .aviagame-toc-chip__label { color: var(--aviagame-red); }

/* --- Advantages ----------------------------------------------------------- */

.aviagame-usp__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

/* The brightest card on the page: the shared rim plus a second wash rising from
   the top edge, where the icon sits. isolation: isolate is for the icon's halo —
   it sits at z-index -1 and would otherwise drop behind the card. */
.aviagame-usp__item {
	position: relative;
	isolation: isolate;
	padding: 26px 24px 28px;
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius);
	background:
		radial-gradient(120% 74% at 50% 0%, var(--aviagame-red-soft) 0%, transparent 58%),
		var(--aviagame-glow-rim),
		var(--aviagame-card);
	box-shadow: var(--aviagame-glow);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.aviagame-usp__item:hover {
	border-color: var(--aviagame-red);
	box-shadow: var(--aviagame-glow-hover);
}

.aviagame-usp__icon {
	position: relative;
	display: inline-flex;
	margin-bottom: 22px;
	color: var(--aviagame-red);
}

/* The bloom behind the artwork. It sits on the card, not on the icon, so a PNG
   with its own colours still reads as part of the red accent. */
.aviagame-usp__icon::before {
	position: absolute;
	inset: -30%;
	z-index: -1;
	background: radial-gradient(circle, var(--aviagame-red-glow) 0%, transparent 68%);
	border-radius: 50%;
	content: '';
}

.aviagame-usp__item:hover .aviagame-usp__icon::before { inset: -38%; }

.aviagame-usp__icon::before { transition: inset .18s ease; }

.aviagame-usp__icon img { width: 72px; height: 72px; object-fit: contain; }

.aviagame-usp__title {
	margin-bottom: 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.aviagame-usp__text {
	color: var(--aviagame-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

/* --- Bonuses -------------------------------------------------------------- */

.aviagame-bonuses__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.aviagame-bonus {
	position: relative;
	isolation: isolate;
	display: flex;
	overflow: hidden;
	min-height: 250px;
	padding: 24px;
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius);
	background: var(--aviagame-card);
}

/* The upload fills the card. It is one photo with the artwork on its right, so
   the crop holds that edge and the scrim below keeps the copy side readable. */
.aviagame-bonus__art {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}

.aviagame-bonus__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

/* Solid at the copy edge and completely gone by the middle: the artwork half
   carries no film at all, so the photo keeps its own contrast. */
.aviagame-bonus__art::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(10, 12, 17, .95) 0%,
		rgba(10, 12, 17, .82) 26%,
		rgba(10, 12, 17, .34) 46%,
		transparent 58%
	);
	content: '';
}

.aviagame-bonus__copy {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	max-width: 66%;
}

.aviagame-bonus__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	color: var(--aviagame-ink-2);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.aviagame-bonus__icon { display: inline-flex; color: var(--aviagame-red); }
.aviagame-bonus__icon img { width: 30px; height: 30px; object-fit: contain; }

.aviagame-bonus__title {
	margin-bottom: 4px;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.01em;
}

.aviagame-bonus__subtitle {
	margin-bottom: 14px;
	color: var(--aviagame-ink);
	font-size: 15px;
	font-weight: 600;
}

/* A step up from muted: this line sits on a photo, not on a flat card. */
.aviagame-bonus__text {
	margin-bottom: 22px;
	color: var(--aviagame-ink-2);
	font-size: 13px;
	line-height: 1.6;
}

.aviagame-bonus .aviagame-btn { margin-top: auto; }

/* --- Game details --------------------------------------------------------- */

.aviagame-game__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
	gap: 20px;
	align-items: start;
}

.aviagame-game__table {
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius);
	overflow: hidden;
	font-size: 13.5px;
}

.aviagame-game__table th,
.aviagame-game__table td {
	padding: 13px 20px;
	text-align: start;
	vertical-align: top;
	border-bottom: 1px solid var(--aviagame-line);
}

.aviagame-game__table thead th {
	background: var(--aviagame-card-2);
	color: var(--aviagame-ink);
	font-weight: 700;
}

.aviagame-game__table tbody th {
	width: 38%;
	color: var(--aviagame-ink-2);
	font-weight: 500;
}

.aviagame-game__table tbody td { color: var(--aviagame-ink); }

/* Zebra striping, and no rule under the last row — the border does that. */
.aviagame-game__table tbody tr:nth-child(odd) { background: var(--aviagame-panel); }
.aviagame-game__table tbody tr:nth-child(even) { background: var(--aviagame-card); }
.aviagame-game__table tbody tr:last-child th,
.aviagame-game__table tbody tr:last-child td { border-bottom: 0; }

/* The panel beside the table. */
.aviagame-game__panel {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 28px;
	overflow: hidden;
	min-height: 100%;
	padding: 32px;
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius);
	background: var(--aviagame-card);
}

/* The points sit at the bottom of the panel, under the title, as in the design. */
.aviagame-game__points { margin-top: auto; }

.aviagame-game__panel-title {
	position: relative;
	z-index: 2;
	margin-bottom: 20px;
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
}

/* The photo is the panel's backdrop, not a block in its flow: the copy and the
   points sit on it, as in the design. It is pinned right, where the plane is. */
.aviagame-game__panel-art {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.aviagame-game__panel-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

.aviagame-game__points { display: grid; gap: 22px; }

.aviagame-game__point {
	display: flex;
	align-items: center;
	gap: 18px;
}

.aviagame-game__point-icon {
	flex: none;
	display: inline-flex;
	color: var(--aviagame-red);
}

.aviagame-game__point-icon img { width: 44px; height: 44px; object-fit: contain; }

.aviagame-game__point-text {
	color: var(--aviagame-ink);
	font-size: 15px;
	line-height: 1.4;
}

/* --- Player reviews ------------------------------------------------------- */

.aviagame-reviews__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.aviagame-review {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius);
	background: var(--aviagame-card);
}

.aviagame-review__top {
	display: flex;
	align-items: center;
	gap: 14px;
}

.aviagame-review__avatar {
	flex: none;
	display: block;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--aviagame-card-2);
}

.aviagame-review__avatar img { width: 100%; height: 100%; object-fit: cover; }

.aviagame-review__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.aviagame-review__name { color: var(--aviagame-ink); font-size: 14px; font-weight: 700; }

.aviagame-review__stars { display: inline-flex; gap: 2px; color: var(--aviagame-gold); }
.aviagame-review__stars svg { width: 13px; height: 13px; }

.aviagame-review__text {
	margin: 0;
	color: var(--aviagame-ink-2);
	font-size: 13.5px;
	line-height: 1.65;
}

.aviagame-review__city {
	margin-top: auto;
	color: var(--aviagame-faint);
	font-size: 12px;
}

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

.aviagame-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .42fr);
	gap: 20px;
	align-items: start;
}

.aviagame-faq__support {
	padding: 32px 28px;
	border: 1px solid var(--aviagame-line);
	border-radius: var(--aviagame-radius);
	background: var(--aviagame-card);
	text-align: center;
}

.aviagame-faq__support-icon {
	display: inline-flex;
	margin-bottom: 18px;
	color: var(--aviagame-red);
}

.aviagame-faq__support-icon img { width: 68px; height: 68px; object-fit: contain; }

.aviagame-faq__support-title {
	margin-bottom: 8px;
	color: var(--aviagame-ink);
	font-size: 16px;
	font-weight: 700;
}

.aviagame-faq__support-text {
	margin-bottom: 22px;
	color: var(--aviagame-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

.aviagame-faq__support .aviagame-btn { width: 100%; }

/* --- Closing banner ------------------------------------------------------- */

/* The banner is a block inside the container, not a full-bleed band: same width
   as every other section, with its own rounded edge. */
.aviagame-cta__banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--aviagame-radius-lg);
	background: var(--aviagame-bg-2);
}

.aviagame-cta__bg { position: absolute; inset: 0; z-index: -2; }

/* object-position holds the left edge: the upload carries the plane there, and a
   cover crop centred in a narrow box would push it out of frame. */
.aviagame-cta__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* The pitch sits in the middle of the whole banner, not in the space left of the
   button — so the button is lifted out of the flow and pinned to the edge, and
   the side padding keeps the two from meeting on a narrow screen. */
.aviagame-cta__inner {
	position: relative;
	display: grid;
	justify-items: center;
	align-items: center;
	gap: 32px;
	min-height: 280px;
	padding: 44px 220px;
}

.aviagame-cta__action {
	position: absolute;
	inset-inline-end: 40px;
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.aviagame-cta__copy { text-align: center; }

.aviagame-cta__title {
	margin-bottom: 14px;
	font-size: clamp(26px, 3.4vw, 42px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

.aviagame-cta__text {
	max-width: 480px;
	margin-inline: auto;
	color: var(--aviagame-ink-2);
	font-size: 14px;
	line-height: 1.6;
}



/* --- Author signature ----------------------------------------------------- */

.aviagame-home__signature { padding: 28px; }

/* The panel already draws the edge, so the block drops its own rule. */
.aviagame-home__signature .aviagame-author { padding-top: 0; border-top: 0; }

/* --- Card glow ------------------------------------------------------------
   The lighter cousin of the advantages glow, on the other card blocks: the same
   red light inside, painted as a layer over the card colour rather than a pseudo
   element, since these cards already use theirs for artwork. Weaker and set
   further out, so the advantages stay the brightest thing on the page.

   It lives at the end on purpose — each of these blocks sets its own
   `background: var(--aviagame-card)` above, and that would wipe the layer. */

.aviagame-bonus,
.aviagame-game__panel,
.aviagame-review,
.aviagame-faq__support {
	background: var(--aviagame-glow-rim), var(--aviagame-card);
	box-shadow: var(--aviagame-glow);
	transition: border-color .18s ease, box-shadow .18s ease;
}

/* The contents strip and the table head sit on their own surfaces, so the rim
   goes over those instead of the card colour. A table head is one band, not a
   box, so its light comes down from the top edge rather than in from the rim. */
.aviagame-toc-strip__inner {
	background: var(--aviagame-glow-rim), var(--aviagame-panel);
	box-shadow: var(--aviagame-glow);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.aviagame-game__table thead th {
	background: linear-gradient(180deg, var(--aviagame-red-soft) 0%, transparent 100%), var(--aviagame-card-2);
}

/* One hover for the cards. The contents chip is not in this group: it is a small
   control in a dense grid, and the card bloom on it read as a heavy blob rather
   than a highlight — it turns red and nothing more. */
.aviagame-bonus:hover,
.aviagame-review:hover {
	border-color: var(--aviagame-red);
	box-shadow: var(--aviagame-glow-hover);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1279px) {
	.aviagame-toc-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1119px) {
	.aviagame-usp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aviagame-bonus__copy { max-width: 70%; }
}

@media (max-width: 1023px) {
	/* Nothing is height-bound here any more — the phone that used to stand on
	   the bottom edge is gone with the rest of the art — so the single column
	   of copy gets a wider band and looser spacing than the desktop grid. */
	.aviagame-hero { --aviagame-hero-pad-end: 76px; }

	.aviagame-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		gap: 32px;
		padding-block: 72px var(--aviagame-hero-pad-end);
	}

	/* Below 1024 the artwork goes. In a single column the plane, the accent and
	   the phone cost height and bandwidth without adding anything the copy does
	   not already say, and the lazy images inside a display:none box are never
	   fetched. */
	.aviagame-hero__art { display: none; }

	/* The plane stays where the column art went, but as an ordinary image in the
	   flow: one column, so it is simply the row under the copy. No z-index
	   either — nothing is layered over it here. */
	.aviagame-hero__plane {
		z-index: auto;
		grid-area: auto;
		width: 100%;
		margin-inline-start: 0;
	}

	/* Barely a scrim here. In one column the copy sits on the darkest part of
	   the photo anyway, and the heavy version flattened the whole band into
	   grey. All that is left is the bottom edge settling into the page. */
	.aviagame-hero::before {
		background: linear-gradient(
			0deg,
			var(--aviagame-bg) 0%,
			rgba(10, 12, 17, .45) 12%,
			transparent 40%
		);
	}

	/* One column with nothing on the right to balance it, so the copy is
	   centred on the photo instead of hugging the left edge. */
	.aviagame-hero__copy { text-align: center; }

	.aviagame-hero .aviagame-kicker { margin-bottom: 14px; }
	.aviagame-hero__title { margin-bottom: 24px; }

	.aviagame-hero__text {
		max-width: 560px;
		margin-inline: auto;
		margin-bottom: 36px;
	}

	.aviagame-hero__actions {
		justify-content: center;
		gap: 16px;
		margin-bottom: 44px;
	}

	.aviagame-hero__trust {
		justify-content: center;
		gap: 18px 28px;
	}

	.aviagame-bonuses__list,
	.aviagame-reviews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.aviagame-game__grid,
	.aviagame-faq__grid { grid-template-columns: minmax(0, 1fr); }

	/* Stacked: the copy sits straight on the photo, no window above it. */
	.aviagame-cta__inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 24px;
		min-height: 0;
		padding: 36px 28px;
		text-align: center;
	}

	/* Stacked: the button goes back into the flow under the copy. */
	.aviagame-cta__action {
		position: static;
		transform: none;
	}

	.aviagame-cta__bg-img { object-position: 28% top; }
}

@media (max-width: 767px) {
	.aviagame-toc-strip__inner { padding: 20px; }
	.aviagame-toc-strip__head { flex-direction: column; align-items: flex-start; gap: 6px; }
	.aviagame-toc-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

	.aviagame-usp__list,
	.aviagame-bonuses__list,
	.aviagame-reviews__list { grid-template-columns: minmax(0, 1fr); }

	.aviagame-bonus { min-height: 0; }
	.aviagame-bonus__copy { max-width: 64%; }

	.aviagame-hero__trust { gap: 18px 20px; }

	.aviagame-hero__trust-item { padding-inline-end: 20px; }

	.aviagame-game__panel { padding: 24px 20px; }

	.aviagame-game__table th,
	.aviagame-game__table td { padding: 11px 14px; }
}

@media (max-width: 479px) {
	.aviagame-toc-strip__list { grid-template-columns: minmax(0, 1fr); }

	/* The tablet band would eat most of a small phone screen, so it steps back
	   down — still looser than what the hero had here before. */
	.aviagame-hero { --aviagame-hero-pad-end: 60px; }
	.aviagame-hero__inner { padding-block: 56px var(--aviagame-hero-pad-end); }
	.aviagame-hero__actions { margin-bottom: 36px; }

	/* Items keep their own width and the row wraps around them, so a phone gets
	   two short ones side by side instead of three lonely lines. The cap makes
	   the long label break inside the item rather than push the row over; the
	   dividers go, since a wrapped line would end on a stray one. */
	.aviagame-hero__trust { gap: 16px 18px; }

	/* A step down here: at 34px the icon leaves the label too little of the
	   half-width item. */
	.aviagame-hero__trust-icon img { width: 34px; height: 34px; }

	.aviagame-hero__trust-item {
		max-width: calc(50% - 9px);
		padding-inline-end: 0;
		border-inline-end: 0;
	}

	.aviagame-bonus__copy { max-width: 100%; }
	.aviagame-bonus__art { position: static; width: 140px; margin-inline-start: auto; }

	.aviagame-hero__actions .aviagame-btn { flex: 1 1 100%; }
}