/*
 * Hero — "Glitchwave" (Thai site #4).
 *
 * A full-bleed stage that flows straight out of the dark header, so the top of
 * the page reads as one continuous screen — the arrangement every Thai
 * reference site uses. On this skin it is the loudest thing on the site and it
 * carries three of the brief's ten signatures at once: the SYNTHWAVE GRID
 * HORIZON receding out of the bottom edge, an RGB-SPLIT headline that glitches
 * once on load, and the giant outlined "888" bleeding off the corner.
 *
 * FULL BLEED: the block renders inside .x78a4e6b4, so the stage breaks out
 * with `calc(50% - 50vw)` and re-contains its own inner. That overflows by the
 * scrollbar width, which is harmless ONLY because #page carries overflow-x:
 * clip (base.css) — do not remove that guard. The horizon is drawn wider than
 * the stage for the same reason: its vanishing point has to fall outside the
 * viewport or the perspective reads as a folded sheet of paper.
 *
 * PSEUDO-ELEMENT BUDGET, because this block has run out of them before:
 *   .x20e53271::before               the grid horizon
 *   .x20e53271::after                the "888" stroke wordmark (base.css)
 *   .x157ce8c3::before        HUD corner bracket, top left
 *   .x157ce8c3::after         HUD status readout, bottom right
 *   .x3491f680::after          the light pool behind the headline
 *   .xa4c5ba1d .x5861cc7d::after   the arrow (::before is the scanline sweep)
 *
 * The patterns are in the stage's own `background` shorthand rather than on a
 * pseudo-element, which is how the horizon got one.
 */

.x20e53271 {
	position: relative;
	isolation: isolate;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: var(--sn-sp-12);
	padding: var(--sn-sp-16) 0 var(--sn-sp-24);
	background:
		var(--sn-pat-scanlines),
		var(--sn-pat-halftone),
		radial-gradient(120% 95% at 18% -20%, rgba(57, 255, 20, .18), transparent 62%),
		radial-gradient(90% 80% at 88% 110%, rgba(30, 155, 255, .20), transparent 60%),
		var(--sn-lacquer-grad);
	border: 0;
	border-bottom: var(--sn-rule) solid var(--sn-acc-1);
	box-shadow: 0 0 34px color-mix(in srgb, var(--sn-acc-1) 28%, transparent);
	border-radius: 0;
	color: var(--sn-text);
	overflow: hidden;
}

/*
 * THE SYNTHWAVE HORIZON. A glowing grid receding to a vanishing point below
 * the stage, masked so it fades toward the horizon rather than ending on a
 * hard line, and drifting toward the viewer one cell at a time.
 *
 * z-index -1 inside the stage's own isolation context: it must sit behind the
 * content but in front of the stage's background layers.
 */
.x20e53271::before {
	content: '';
	position: absolute;
	left: -30%;
	right: -30%;
	bottom: 0;
	height: 52%;
	z-index: -1;
	pointer-events: none;
	background: var(--sn-pat-grid);
	transform: perspective(420px) rotateX(64deg);
	transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(to top, #000 8%, transparent 88%);
	mask-image: linear-gradient(to top, #000 8%, transparent 88%);
	animation: x1cc141c8 8s linear infinite;
}

.x157ce8c3 {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sn-container);
	margin: 0 auto;
	padding: 0 var(--sn-sp-4);
}

/*
 * HUD chrome. Both marks sit in the page margins at the container's edge and
 * are hidden under 480px, where there is no margin to put them in. They
 * replace the previous skin's floating shapes: the brief's connective
 * decoration is terminal furniture, not scattered ornament (anti-pattern 10).
 */

/* Corner bracket, top left — two rules meeting at a right angle, the
   universal "this is a viewfinder" mark. */
.x157ce8c3::before {
	content: '';
	position: absolute;
	left: -10px;
	top: -58px;
	z-index: -1;
	width: 76px;
	height: 76px;
	border-top: var(--sn-rule) solid var(--sn-acc-1);
	border-left: var(--sn-rule) solid var(--sn-acc-1);
	box-shadow: -4px -4px 18px -6px color-mix(in srgb, var(--sn-acc-1) 70%, transparent);
	pointer-events: none;
}

/* Status readout, bottom right. Literal Latin generated here, `/ ''` keeps it
   out of the accessibility tree, and it is the scoped home of the HUD
   tracking token (tokens.css). */
.x157ce8c3::after {
	content: '● LIVE · 24/7' / '';
	position: absolute;
	right: var(--sn-sp-4);
	bottom: calc(-1 * var(--sn-sp-8));
	z-index: 1;
	pointer-events: none;
	font-family: var(--sn-font-accent);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	letter-spacing: var(--sn-hud-track);
	color: var(--sn-acc-1);
	text-shadow: 0 0 12px color-mix(in srgb, var(--sn-acc-1) 60%, transparent);
	animation: xe57130fb 3.5s steps(1) infinite;
}

@media (max-width: 479px) {
	.x157ce8c3::before,
	.x157ce8c3::after {
		display: none;
	}
}

@media (min-width: 768px) {
	.x157ce8c3 {
		padding: 0 var(--sn-sp-8);
	}

	.x157ce8c3::after {
		right: var(--sn-sp-8);
	}
}

/*
 * Eyebrow: the HUD label, matching .xe4ba58c6 in base.css. It must NOT be a
 * filled chip — when it was, the hero showed two filled shapes of similar
 * weight and the one that converts did not win, even though it sat lower on
 * the page. The fill is reserved for actions.
 */
.x97c8b47f {
	display: inline-flex;
	align-items: baseline;
	gap: .5em;
	margin: 0 0 var(--sn-sp-4);
	padding: var(--sn-sp-1) var(--sn-sp-4);
	border: var(--sn-rule) solid var(--sn-acc-1);
	clip-path: var(--sn-notch-path);
	background: color-mix(in srgb, var(--sn-acc-1) 12%, var(--sn-surface));
	color: var(--sn-acc-1);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
}

.x97c8b47f::before {
	content: '>' / '';
	font-family: var(--sn-font-accent);
	font-weight: 700;
	letter-spacing: var(--sn-hud-track);
	opacity: .8;
}

/*
 * THE HEADLINE. Chromatic aberration plus a hard slime glow, and ONE glitch
 * jitter as the page loads — the brief's hero treatment exactly. It settles
 * after 300ms and never moves again; a permanently shuddering H1 is
 * unreadable and, on a page about gambling, faintly hostile.
 *
 * The split is HORIZONTAL only, which is the one way this treatment is kinder
 * to Thai than the stacked offset it replaces: a vertical or diagonal copy of
 * a tone mark lands inside the consonant below it, and a purely horizontal
 * one never can.
 *
 * NO background-clip gradient here. The last skin filled this headline with
 * the action gradient, which needs a `color` fallback or the H1 renders
 * invisible wherever the clip is unsupported. A text-shadow has no such
 * failure mode.
 */
.xcff870ec {
	position: relative;
	margin: 0 0 var(--sn-sp-6);
	color: var(--sn-heading);
	font-size: clamp(2.5rem, 7.5vw, 5rem);
	font-weight: 600;
	letter-spacing: 0;
	text-shadow: var(--sn-ts-3);
	animation: xbceba4a3 .3s steps(2) 1;
}

.x3491f680 {
	position: relative;
}

/* The light pool behind the top right of the text column — what stops the
   headline sitting on an empty field. Static: the page already carries the
   drifting horizon and the flickering readout, and the brief caps how many
   things move at once. */
.x3491f680::after {
	content: '';
	position: absolute;
	right: -3%;
	top: 8%;
	z-index: -1;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(57, 255, 20, .22), transparent 70%);
	pointer-events: none;
}

@media (max-width: 479px) {
	.x3491f680::after {
		display: none;
	}
}

.x7b740085 {
	position: relative;
	z-index: 1;
	max-width: 58ch;
	font-size: var(--sn-fs-md);
	line-height: var(--sn-lh-body);
}

.x7b740085 > :first-child { margin-top: 0; }
.x7b740085 > :last-child { margin-bottom: 0; }

/* Any term the editor BOLDS in the intro becomes a highlighted term — the
   hook with no new markup for Michael to learn. A notched slime marker, ink
   on it, the same chip language as the eyebrow. */
.x7b740085 strong {
	color: var(--sn-bg);
	background: var(--sn-acc-1);
	padding: 0 .35em;
	border-radius: 3px;
	font-weight: 700;
	box-shadow: 0 0 14px color-mix(in srgb, var(--sn-acc-1) 45%, transparent);
}

/* Non-compact intro: clamped to 3 lines with the toggle (compact clamps to 2
   below) — full walls of intro text looked bad either way. */
.x20e53271:not(.x788767f3) .x7b740085 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.x20e53271.is-expanded .x7b740085 {
	display: block;
	overflow: visible;
}

/* Byline: one quiet line of running text, not a row of chips — it is E-E-A-T
   furniture (§7), not a conversion element, and it is the one place on this
   hero that is allowed to be calm. */
.x8ae969a5 {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sn-sp-2) var(--sn-sp-3);
	margin-top: var(--sn-sp-8);
	font-size: var(--sn-fs-xs);
	letter-spacing: 0;
	color: var(--sn-text-muted);
}

.x3eb0e879 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	flex: 0 0 auto;
}

/* A mono pipe rather than a middot — the separator in a status line. */
.x3eb0e879 + .x3eb0e879::before {
	content: '|' / '';
	margin-right: var(--sn-sp-1);
	font-family: var(--sn-font-accent);
	color: var(--sn-acc-4-fg);
}

.x7fa3699a {
	flex: 0 0 auto;
	border-radius: 50%;
	border: var(--sn-rule) solid var(--sn-bg);
	box-shadow: 0 0 0 2px var(--sn-acc-1);
}

.x3eb0e879 svg {
	width: 14px;
	height: 14px;
	color: var(--sn-acc-1);
}

.x8ae969a5 a {
	color: var(--sn-heading);
	font-weight: 600;
	text-decoration: none;
}

.x8ae969a5 a:hover,
.x8ae969a5 a:focus {
	color: var(--sn-acc-1);
}

/* ---------- CTA + trust chips ---------- */

.xa4c5ba1d {
	position: relative;
	z-index: 1;
	margin: var(--sn-sp-8) 0 0;
}

/* The hero key is the biggest one on the site: it is the only action inside a
   full-bleed stage, so at the shared size it read as a small chip floating in
   a lot of dark. Bigger type, deeper key, a permanent pulse bloom and an
   arrow.
   ::after, NOT ::before — the scanline sweep owns ::before on every button
   (base.css). Do not add a second one. */
.xa4c5ba1d .x5861cc7d {
	min-height: 3.75rem;
	padding: var(--sn-sp-4) var(--sn-sp-12);
	font-size: var(--sn-fs-md);
	animation: x829bc9f3 2.4s ease-in-out infinite;
}

.xa4c5ba1d .x5861cc7d::after {
	content: '\2192';
	display: inline-block;
	margin-left: .55em;
	transition: transform .2s ease;
}

.xa4c5ba1d .x5861cc7d:hover::after,
.xa4c5ba1d .x5861cc7d:focus::after {
	transform: translateX(5px);
}

.xc5570363 {
	position: relative;
	z-index: 1;
	list-style: none;
	display: grid;
	gap: var(--sn-sp-3);
	margin: var(--sn-sp-8) 0 0;
	padding: 0;
}

/* Trust chips — each one a HUD tile framed in its own rotated neon from the
   table in base.css, notched on alternating corners so a stack of them has a
   rhythm without anything leaning (base.css house rule 3). */
.xa4fd0b98 {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	padding: var(--sn-sp-3) var(--sn-sp-4);
	border: var(--sn-rule) solid var(--sn-acc);
	border-radius: var(--sn-radius-sm);
	clip-path: var(--sn-notch-path);
	background: color-mix(in srgb, var(--sn-acc) 12%, var(--sn-surface));
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	color: var(--sn-heading);
	line-height: 1.55;
	transition: background .25s ease-out, box-shadow .25s ease-out;
}

.xa4fd0b98:nth-child(even) {
	clip-path: var(--sn-notch-path-l);
}

.xa4fd0b98:hover {
	background: color-mix(in srgb, var(--sn-acc) 22%, var(--sn-surface));
	box-shadow: inset 0 0 26px color-mix(in srgb, var(--sn-acc) 25%, transparent);
}

/* The tick sits in a notched chip in the row's own neon, with the ink the
   rotation table supplies — the violet slot needs mint and every other slot
   needs ink, and this rule never has to know which it got. */
.xa4fd0b98 svg {
	box-sizing: content-box;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	padding: 6px;
	border-radius: 4px;
	clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
	background: var(--sn-acc);
	color: var(--sn-acc-ink);
}

/* ---------- Media (the hero photograph) ---------- */
/* This market is photo-led: the reference sites all put a large, glossy
   promotional image beside the headline. Unlike the Latin skins, the image
   renders in COMPACT mode too (see render.php) — but see the fold budget
   below before assuming that is free. */

.x77881b17 {
	position: relative;
	z-index: 1;
	margin: var(--sn-sp-8) 0 0;
}

.x77881b17 .x395c1882 {
	width: 100%;
	border: var(--sn-rule) solid var(--sn-acc-1);
	border-radius: var(--sn-radius);
	clip-path: var(--sn-notch-path);
	filter:
		drop-shadow(0 0 20px color-mix(in srgb, var(--sn-acc-1) 45%, transparent))
		drop-shadow(0 0 56px color-mix(in srgb, var(--sn-acc-3) 28%, transparent));
	transition: filter .3s ease-out;
}

.x77881b17 .x395c1882:hover {
	filter:
		drop-shadow(0 0 28px color-mix(in srgb, var(--sn-acc-1) 70%, transparent))
		drop-shadow(0 0 80px color-mix(in srgb, var(--sn-acc-3) 40%, transparent));
}

/* The read-more toggle: a terminal link with a blinking cursor. */
.x0e93602e {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-1);
	margin-top: var(--sn-sp-3);
	padding: 0;
	background: none;
	border: 0;
	color: var(--sn-acc-1);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.x0e93602e:hover,
.x0e93602e:focus {
	color: var(--sn-heading);
}

.x0e93602e svg {
	transition: transform .2s ease;
}

.x20e53271.is-expanded .x0e93602e svg {
	transform: rotate(180deg);
}

/* ---------- Compact mode ---------- */

.x788767f3 {
	padding: var(--sn-sp-8) 0 var(--sn-sp-16);
}

.x788767f3 .xcff870ec {
	font-size: clamp(2rem, 5.5vw, 3.5rem);
}

.x788767f3 .x7b740085 {
	font-size: var(--sn-fs-sm);
	line-height: 1.8;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.x788767f3.is-expanded .x7b740085 {
	display: block;
	overflow: visible;
}

/*
 * PHONE BUDGET.
 *
 * The theme has a standing requirement that the first pick in the list below
 * is visible on a 375x667 phone. Three things eat into it: the stage is
 * taller than a flat hero, the grid horizon adds bottom padding of its own,
 * and the sticky action bar takes another 67px off the viewport. If you add
 * anything to the hero, re-measure at 375x667 rather than assuming there is
 * room — and measure in a FIXED-WIDTH IFRAME, because headless Chrome refuses
 * a window narrower than ~500px and will quietly show you the left 375px of a
 * 500px layout.
 *
 * THE DECIDING FIELD IS STILL THE HERO IMAGE, and that is an editor decision
 * rather than a deploy: a photograph costs ~380px here and no amount of
 * padding trimming buys that back. Leave `image` empty on money pages.
 */
@media (max-width: 767px) {
	/* sp-8 at the bottom, not sp-12: the extra 16px is the single biggest
	   item in the phone budget and the masked horizon still reads at this
	   height. Measured — see the table in CLAUDE.md §2. */
	.x788767f3 {
		padding: var(--sn-sp-6) 0 var(--sn-sp-8);
	}

	/* The horizon is shallower on a phone: at 52% it climbed behind the
	   headline, where the grid lines fight the RGB split. */
	.x788767f3::before {
		height: 36%;
	}

	.x788767f3 .x97c8b47f {
		margin-bottom: var(--sn-sp-3);
	}

	.x788767f3 .xcff870ec {
		font-size: 1.75rem;
		margin-bottom: var(--sn-sp-3);
	}

	/*
	 * SMALL PHONES GET ONE NOTCH SMALLER, and this is a FONT-METRIC fix, not
	 * a taste one. Fahkwang sets wider than the Mitr it replaced, so at 360px
	 * a two-line Thai headline became a THREE-line one — 37px of pure fold
	 * budget, and the only viewport where this skin measured worse than the
	 * last. 1.625rem puts it back on two lines. Re-check it if the display
	 * face ever changes again.
	 */
	@media (max-width: 400px) {
		.x788767f3 .xcff870ec {
			font-size: 1.625rem;
		}
	}

	.x788767f3 .x8ae969a5,
	.x788767f3 .xc5570363,
	.x788767f3 .xa4c5ba1d,
	.x788767f3 .x77881b17 {
		margin-top: var(--sn-sp-4);
	}

	/* The hero key drops back to the shared size on a phone: its desktop
	   sp-4/sp-12 is padding the fold cannot spare, and at 375px it is already
	   the full width of the column so it cannot be missed. */
	.x788767f3 .xa4c5ba1d .x5861cc7d {
		/* 48px: four under the shared key, four over the 44px touch-target
		   floor. Bought back for the fold budget. */
		min-height: 3rem;
		padding: var(--sn-sp-3) var(--sn-sp-8);
		font-size: var(--sn-fs-sm);
	}

	.x788767f3 .xa4fd0b98 {
		padding: var(--sn-sp-2) var(--sn-sp-3);
	}
}

/* ---------- Facts rail ---------- */

.x0fc93f64 .xc5570363 {
	margin: 0;
}

/* When the image takes the right column, the chips drop under the text as a
   row instead (render.php adds --strip). */
.xb14269d0 {
	margin-top: var(--sn-sp-6);
}

@media (min-width: 640px) {
	.xb14269d0 {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
}

/* ---------- Layout ---------- */

@media (min-width: 768px) {
	.x157ce8c3 {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		gap: var(--sn-sp-12);
		align-items: center;
	}

	.x3491f680 {
		min-width: 0;
	}

	.x77881b17 {
		margin: 0;
	}

	.xeae09493 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--sn-sp-4) var(--sn-sp-6);
	}

	/* A hero with neither image nor rail keeps one column — a lone 0.85fr
	   gutter would push the headline off-centre for no reason. */
	.x157ce8c3:not(:has(.x77881b17)):not(:has(.x0fc93f64)) {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 920px) {
	.x788767f3 .x157ce8c3 {
		grid-template-columns: minmax(0, 1fr) 330px;
		gap: var(--sn-sp-12);
		align-items: start;
	}

	.x788767f3 .x0fc93f64,
	.x788767f3 .xc5570363 {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.x20e53271::before,
	.xcff870ec,
	.x157ce8c3::after,
	.xa4c5ba1d .x5861cc7d {
		animation: none;
	}

	/* The readout keeps its full opacity rather than freezing mid-flicker. */
	.x157ce8c3::after {
		opacity: 1;
	}

	.x77881b17 .x395c1882,
	.xa4fd0b98,
	.xa4c5ba1d .x5861cc7d::after {
		transition: none;
	}
}