/*
 * Hero — "Saeng Si" (Thai site #3).
 *
 * A full-bleed stage that flows straight out of the dark header, so the top of
 * the page reads as one continuous mass — the arrangement every Thai reference
 * site uses. On this skin it is the loudest thing on the site: the gradient
 * mesh, three pattern layers, four floating marks, a massive "888" bleeding
 * off the bottom right, and an animated gradient headline.
 *
 * FULL BLEED: the block renders inside .x481f4542, 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.
 *
 * PSEUDO-ELEMENT BUDGET, because this block has run out of them before:
 *   .xecab1384::before        pattern stack
 *   .xecab1384::after         the "888" (defined in base.css)
 *   .x2e6e038b::before floating ring, top left
 *   .x2e6e038b::after  floating tile, bottom right
 *   .x291953a9::after   floating star, right of the headline
 *   .x90b25809 .xdc1444ed::after   the arrow (::before is the sheen sweep)
 */

.xecab1384 {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: var(--sn-sp-12);
	padding: var(--sn-sp-16) 0;
	background:
		radial-gradient(120% 95% at 18% -20%, rgba(123, 47, 255, .55), transparent 62%),
		radial-gradient(90% 80% at 88% 110%, rgba(255, 58, 242, .35), transparent 60%),
		var(--sn-lacquer-grad);
	border: 0;
	border-bottom: var(--sn-rule-heavy) solid transparent;
	border-image: var(--sn-gold-grad) 1;
	border-radius: 0;
	color: var(--sn-text);
	overflow: hidden;
}

/* Pattern stack — dots over stripes over checker, the brief's mandatory
   layering. Three at once is deliberate: this is the one section allowed the
   maximum density, and everything below it steps down to two. */
.xecab1384::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--sn-pat-dots), var(--sn-pat-stripes), var(--sn-pat-checker);
}

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

/* Floating marks. Both sit in the page margins at the container's edge and
   are hidden under 480px, where there is no margin to put them in. */
/* Sits ABOVE the content, in the stage's own top padding — at -6% it landed
   on the eyebrow chip and read as clutter around it rather than as an
   ornament in the margin. The hero's sp-16 top padding is what it lives in,
   so this offset and that padding move together. */
.x2e6e038b::before {
	content: '';
	position: absolute;
	left: -44px;
	top: -92px;
	z-index: -1;
	width: 88px;
	height: 88px;
	border: var(--sn-rule) dashed var(--sn-acc-2);
	border-radius: 50%;
	pointer-events: none;
	animation: xd52f8126 20s linear infinite;
}

.x2e6e038b::after {
	content: '';
	position: absolute;
	right: 1%;
	bottom: -8%;
	z-index: -1;
	width: 54px;
	height: 54px;
	border-radius: 10px;
	background: var(--sn-acc-3);
	box-shadow: 8px 8px 0 var(--sn-acc-4);
	pointer-events: none;
	animation: xbdca11e0 6s ease-in-out infinite;
}

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

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

/* Eyebrow: a dashed outlined chip. It must NOT be a filled pill — when it was,
   the hero showed two filled pills 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. */
.x15924c7c {
	display: inline-block;
	margin: 0 0 var(--sn-sp-4);
	padding: var(--sn-sp-1) var(--sn-sp-4);
	border: 2px dashed var(--sn-acc-3);
	border-radius: var(--sn-radius-pill);
	background: rgba(255, 230, 0, .10);
	color: var(--sn-acc-3);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	animation: x30abe7c9 3.5s ease-in-out infinite;
}

/* The one animated-gradient headline on the page — the brief puts these on
   20–30% of major headings, and at one hero per page that is exactly one.
   `color` is the fallback and must stay: background-clip:text leaves the text
   invisible anywhere the clip is unsupported, and this is the H1. */
.x4e8a2d82 {
	position: relative;
	margin: 0 0 var(--sn-sp-6);
	color: var(--sn-heading);
	background: var(--sn-gold-grad);
	/* 200%, not 300%: this is the biggest gradient on the site and at 300% it
	   showed only magenta into purple — three of six stops — on the one
	   element where the whole palette should be visible at a glance. */
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: clamp(2.5rem, 7.5vw, 5rem);
	font-weight: 700;
	letter-spacing: 0;
	/* No text-shadow: a stacked offset shadow behind gradient-filled glyphs
	   reads as a printing misregistration, not as depth. The gradient is the
	   effect here. */
	text-shadow: none;
	animation: x1d891514 5s ease infinite;
}

.x291953a9 {
	position: relative;
}

/* Third floating mark — a filled disc behind the top right of the text column,
   which is what stops the headline sitting on an empty field. */
.x291953a9::after {
	content: '';
	position: absolute;
	right: -3%;
	top: 8%;
	z-index: -1;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 245, 212, .32), transparent 70%);
	pointer-events: none;
	animation: xf2aedd17 7s ease-in-out infinite;
}

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

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

.x942f5da6 > :first-child { margin-top: 0; }
.x942f5da6 > :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. */
.x942f5da6 strong {
	color: var(--sn-bg);
	background: var(--sn-acc-3);
	padding: 0 .3em;
	border-radius: 6px;
	box-shadow: 3px 3px 0 var(--sn-acc-4);
	font-weight: 600;
}

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

.xecab1384.is-expanded .x942f5da6 {
	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. */
.x614fcd7d {
	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);
}

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

.xed99795e + .xed99795e::before {
	content: '·';
	margin-right: var(--sn-sp-1);
	color: var(--sn-acc-5);
}

.xb06b43ee {
	flex: 0 0 auto;
	border-radius: 50%;
	border: 3px solid var(--sn-acc-1);
}

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

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

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

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

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

/* The hero button 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 pill floating
   in a lot of dark. Bigger type, deeper pill, a permanent glow pulse and an
   arrow.
   ::after, NOT ::before — the sheen sweep owns ::before on every button
   (base.css). Do not add a second one. */
.x90b25809 .xdc1444ed {
	padding: var(--sn-sp-4) var(--sn-sp-12);
	font-size: var(--sn-fs-md);
	border-width: var(--sn-rule);
}

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

.x90b25809 .xdc1444ed:hover::after,
.x90b25809 .xdc1444ed:focus::after {
	transform: translateX(5px);
}

.xfb863ef5 {
	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 framed in its own rotated accent from the table in
   base.css, and each tilted a degree the other way, so a stack of them reads
   as a hand-assembled pile rather than a list. */
.x239be0ab {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	padding: var(--sn-sp-3) var(--sn-sp-4);
	border: 3px solid var(--sn-acc);
	border-radius: var(--sn-radius-sm);
	background: color-mix(in srgb, var(--sn-acc) 12%, var(--sn-surface));
	box-shadow: 4px 4px 0 var(--sn-acc);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	color: var(--sn-heading);
	line-height: 1.55;
	transition: transform .25s ease-out, box-shadow .25s ease-out;
}

.x239be0ab:nth-child(odd)  { transform: rotate(-1deg); }
.x239be0ab:nth-child(even) { transform: rotate(1deg); }

.x239be0ab:hover {
	transform: rotate(0deg) scale(1.03);
	box-shadow: 7px 7px 0 var(--sn-acc);
}

/* The tick sits in a filled disc in the chip's own accent, with the ink the
   rotation table supplies — slot 5 is purple and needs white, every other
   slot needs ink, and this rule never has to know which it got. */
.x239be0ab svg {
	box-sizing: content-box;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	padding: 6px;
	border-radius: 50%;
	background: var(--sn-acc);
	color: var(--sn-acc-ink);
	border: 2px solid var(--sn-bg);
}

/* ---------- 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). */

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

.x13814669 .xb6ca7e35 {
	width: 100%;
	border: var(--sn-rule) solid var(--sn-acc-3);
	border-radius: var(--sn-radius);
	box-shadow: 10px 10px 0 var(--sn-acc-1), 20px 20px 0 var(--sn-acc-5);
	transform: rotate(-1.5deg);
	transition: transform .3s ease-out, box-shadow .3s ease-out;
}

.x13814669 .xb6ca7e35:hover {
	transform: rotate(0deg) scale(1.02);
	box-shadow: 14px 14px 0 var(--sn-acc-1), 28px 28px 0 var(--sn-acc-5);
}

.x9b5a5ce4 {
	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-2);
	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;
}

.x9b5a5ce4:hover,
.x9b5a5ce4:focus {
	color: var(--sn-acc-3);
}

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

.xecab1384.is-expanded .x9b5a5ce4 svg {
	transform: rotate(180deg);
}

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

.xac431314 {
	padding: var(--sn-sp-8) 0 var(--sn-sp-12);
}

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

.xac431314 .x942f5da6 {
	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;
}

.xac431314.is-expanded .x942f5da6 {
	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. Two things eat into that: the stage is taller
 * than a flat hero, and the sticky action bar takes another 67px off the
 * bottom of the viewport. If you add anything to the hero, re-measure at
 * 375x667 rather than assuming there is room.
 */
@media (max-width: 767px) {
	.xac431314 {
		padding: var(--sn-sp-6) 0 var(--sn-sp-8);
	}

	.xac431314 .x15924c7c {
		margin-bottom: var(--sn-sp-3);
	}

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

	.xac431314 .x614fcd7d,
	.xac431314 .xfb863ef5,
	.xac431314 .x90b25809,
	.xac431314 .x13814669 {
		margin-top: var(--sn-sp-4);
	}

	/* The hero button drops back to the shared size on a phone: its desktop
	   sp-4/sp-12 is 28px of padding the fold cannot spare, and at 375px it is
	   already the full width of the column so it cannot be missed. */
	.xac431314 .x90b25809 .xdc1444ed {
		padding: var(--sn-sp-3) var(--sn-sp-8);
		font-size: var(--sn-fs-sm);
	}

	.xac431314 .x239be0ab {
		padding: var(--sn-sp-2) var(--sn-sp-3);
	}
}

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

.xd68fb5fc .xfb863ef5 {
	margin: 0;
}

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

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

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

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

	.x291953a9 {
		min-width: 0;
	}

	.x13814669 {
		margin: 0;
	}

	.xfcb01bcf {
		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. */
	.x2e6e038b:not(:has(.x13814669)):not(:has(.xd68fb5fc)) {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

	.xac431314 .xd68fb5fc,
	.xac431314 .xfb863ef5 {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.x4e8a2d82,
	.x15924c7c,
	.x2e6e038b::before,
	.x2e6e038b::after,
	.x291953a9::after {
		animation: none;
	}

	.x13814669 .xb6ca7e35,
	.x239be0ab,
	.x90b25809 .xdc1444ed::after {
		transition: none;
	}

	.x13814669 .xb6ca7e35:hover,
	.x239be0ab:hover {
		transform: none;
	}
}