/* Hero — "Bangkok Night" (Thai site #2).
   A full-bleed night 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 a DARK page the stage cannot separate itself by
   being darker than the page, so it is lit instead: a navy bloom from the top
   left, the neon grid, and a cyan rule closing the bottom edge.

   FULL BLEED: the block renders inside .xe47df07c, 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. */

.x1f95ab7c {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: var(--sn-sp-12);
	padding: var(--sn-sp-12) 0 var(--sn-sp-16);
	background:
		radial-gradient(120% 95% at 18% -15%, var(--sn-purple-2), transparent 62%),
		var(--sn-lacquer-grad);
	border: 0;
	border-bottom: 3px solid transparent;
	border-image: var(--sn-gold-grad) 1;
	border-radius: 0;
	color: color-mix(in srgb, var(--sn-on-chrome) 82%, transparent);
	overflow: hidden;
}

/* The neon grid — this skin's texture, shared with key-takeaways and
   brand-promo so the dark surfaces read as one material (the gold skin used a
   woven diamond lattice for the same job). It lives in tokens.css. */
.x1f95ab7c::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var(--sn-grid);
}

/* A cyan bloom behind the headline, so the stage is not evenly lit. */
.x1f95ab7c::after {
	content: '';
	position: absolute;
	left: -10%;
	top: -60%;
	width: 70%;
	height: 160%;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(43, 217, 230, .16), transparent 70%);
}

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

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

/* Eyebrow: an OUTLINED chip, not a filled one. It used to carry the same cyan
   gradient as the button, so the hero showed two cyan pills of similar weight
   and the one that converts did not win — the eyebrow even sat higher on the
   page. The fill is now reserved for actions; the eyebrow keeps the colour as
   text and a tint. */
.x873436cf {
	display: inline-block;
	margin: 0 0 var(--sn-sp-4);
	padding: var(--sn-sp-1) var(--sn-sp-4);
	border-radius: var(--sn-radius-pill);
	background: color-mix(in srgb, var(--sn-primary) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--sn-primary) 45%, transparent);
	color: var(--sn-primary);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-xs);
	font-weight: 600;
	letter-spacing: 0;
}

.xff37f5a1 {
	margin: 0 0 var(--sn-sp-6);
	color: var(--sn-on-chrome);
	font-size: clamp(2rem, 4.8vw, 3.25rem);
	font-weight: 700;
	letter-spacing: 0;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.x6d5bb4c9 {
	max-width: 56ch;
	font-size: var(--sn-fs-md);
	line-height: 1.85;
}

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

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

.x1f95ab7c.is-expanded .x6d5bb4c9 {
	display: block;
	overflow: visible;
}

/* Byline: one quiet line of running text, not a row of chips. */
.x435f4d90 {
	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: color-mix(in srgb, var(--sn-on-chrome) 66%, transparent);
}

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

/* Middot between items instead of borders. */
.x87bb7a37 + .x87bb7a37::before {
	content: '·';
	margin-right: var(--sn-sp-1);
	color: color-mix(in srgb, var(--sn-on-chrome) 35%, transparent);
}

.x0cfc9d97 {
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--sn-primary) 45%, transparent);
}

.x87bb7a37 svg {
	width: 13px;
	height: 13px;
	color: var(--sn-primary);
}

.x435f4d90 a {
	color: var(--sn-on-chrome);
	font-weight: 700;
	text-decoration: none;
}

.x435f4d90 a:hover,
.x435f4d90 a:focus {
	color: var(--sn-primary);
}

/* CTA + trust chips variant. */
.x2dfbf30f {
	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, and an arrow.
   ::after, NOT ::before — the sheen sweep owns ::before on every button
   (base.css). Do not add a second one. */
.x2dfbf30f .x470aa652 {
	padding: var(--sn-sp-4) var(--sn-sp-12);
	font-size: var(--sn-fs-md);
}

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

.x2dfbf30f .x470aa652:hover::after,
.x2dfbf30f .x470aa652:focus::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.x2dfbf30f .x470aa652::after {
		transition: none;
	}
}

.x1e3ee3b8 {
	list-style: none;
	display: grid;
	gap: var(--sn-sp-3);
	margin: var(--sn-sp-8) 0 0;
	padding: 0;
}

/* Glassy checklist row — the trust element Thai sites put beside the headline. */
.x7f7d44a8 {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	padding: var(--sn-sp-3) var(--sn-sp-4);
	border-radius: var(--sn-radius-sm);
	background: color-mix(in srgb, var(--sn-on-chrome) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--sn-primary) 22%, transparent);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	color: var(--sn-on-chrome);
	line-height: 1.55;
}

/* The icon sits in a filled gold disc — a tick on a dark stage needs the
   disc to be legible at 14px. */
.x7f7d44a8 svg {
	box-sizing: content-box;
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	padding: 5px;
	border-radius: 50%;
	background: var(--sn-gold-grad);
	color: var(--sn-primary-dark);
	box-shadow: 0 2px 10px rgba(43, 217, 230, .35);
}

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

.xc39d10d2 {
	position: relative;
	margin: var(--sn-sp-8) 0 0;
}

.xc39d10d2 .x5fb53742 {
	width: 100%;
	border-radius: var(--sn-radius);
	border: 2px solid color-mix(in srgb, var(--sn-primary) 55%, transparent);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 44px rgba(43, 217, 230, .20);
}

.xfbba2d7c {
	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-primary);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	cursor: pointer;
}

.xfbba2d7c:hover,
.xfbba2d7c:focus {
	color: var(--sn-on-chrome);
}

.xfbba2d7c svg {
	transition: transform .15s ease;
}

.x1f95ab7c.is-expanded .xfbba2d7c svg {
	transform: rotate(180deg);
}

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

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

.xfd5324d1 .xff37f5a1 {
	font-size: clamp(1.75rem, 4.2vw, 2.75rem);
}

.xfd5324d1 .x6d5bb4c9 {
	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;
}

.xfd5324d1.is-expanded .x6d5bb4c9 {
	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 on this skin ate into that: the
 * lacquer stage is taller than the flat Latin hero, and the sticky action bar
 * takes another 67px off the bottom of the viewport. Measured before this
 * block: only 39px of the first card cleared the bar.
 *
 * So the compact hero is deliberately tight below 768px. If you add anything
 * to the hero, re-measure at 375x667 rather than assuming there is room.
 */
@media (max-width: 767px) {
	.xfd5324d1 {
		padding: var(--sn-sp-6) 0 var(--sn-sp-8);
	}

	.xfd5324d1 .x873436cf {
		margin-bottom: var(--sn-sp-3);
	}

	.xfd5324d1 .xff37f5a1 {
		font-size: 1.625rem;
		margin-bottom: var(--sn-sp-4);
	}

	.xfd5324d1 .x435f4d90,
	.xfd5324d1 .x1e3ee3b8 {
		margin-top: var(--sn-sp-4);
	}
}

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

.xcbf0331c .x1e3ee3b8 {
	margin: 0;
}

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

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

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

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

	.x6fb5b719 {
		min-width: 0;
	}

	.xc39d10d2 {
		margin: 0;
	}

	.x0b3bd65b {
		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. */
	.x2d36599c:not(:has(.xc39d10d2)):not(:has(.xcbf0331c)) {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

	.xfd5324d1 .xcbf0331c {
		margin-top: 0;
	}

	.xfd5324d1 .x1e3ee3b8 {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.xc39d10d2 .x5fb53742 {
		box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
	}
}