/*
 * Base layer — global typography, layout wrappers, shared components.
 * Loads after style.css and tokens.css. Blocks reuse these classes,
 * never redefine them (see CLAUDE.md §4).
 *
 * Skin: "Saeng Si" (แสงสี) — maximalism / dopamine. Five accents in permanent
 * rotation, 4px clashing frames, hard offset shadows, a pattern on every
 * surface, and continuous motion on roughly a third of the page.
 */

/* ---------- Global ---------- */

html {
	/* Tells the browser this is a dark UI: native selects, number spinners,
	   scrollbars and form controls render dark instead of painting a white
	   slab into the page. Without it the calculator's inputs are the only
	   light rectangles on the site. */
	color-scheme: dark;

	/* In-page anchors (TOC, #cta links) glide instead of jumping.
	   NOTE: overflow-x:clip must NOT sit on html — Chromium then refuses to
	   run smooth/programmatic scrolls entirely. The sideways-scroll guard
	   lives on #page below instead. */
	scroll-behavior: smooth;
}

#page {
	/* The page never scrolls sideways — wide content must live inside its
	   own scroller (.xb472de1c). clip (not hidden) keeps position:sticky
	   working for the header.
	   IT EARNS ITS KEEP TWICE ON THIS SKIN: every card carries a hard offset
	   shadow up to 12px to the right, and the decorative shapes are placed
	   past the container edge on purpose. Both would widen the document
	   without this. */
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Anchor targets land BELOW the sticky header instead of underneath it. */
[id] {
	scroll-margin-top: 116px;
}

body {
	background: var(--sn-bg);
	color: var(--sn-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-md);
	line-height: var(--sn-lh-body);
	/* Same Thai wrapping rule as the headings — long unbroken Thai runs in
	   paragraphs, table cells and chips overflow their box otherwise. */
	overflow-wrap: break-word;
}

/* ---------- Headings ----------
   Display role: Mitr, heavy, in a rotating accent or white, with a stacked
   offset text-shadow. NO uppercase and NO letter-spacing — see the Thai
   typography rules in tokens.css; weight and size carry the loudness. */
h1, h2, h3, h4, h5, h6 {
	color: var(--sn-heading);
	line-height: var(--sn-lh-heading);
	font-family: var(--sn-font-display);
	font-weight: 600;
	letter-spacing: 0;
	clear: both;
	/* THAI WRAPPING, as a safety net. Thai writes without spaces between words,
	   so any run an author does not break is ONE unbreakable "word" to the
	   layout engine — in a narrow box (a phone headline, a table cell, a chip)
	   it overflows instead of wrapping. Browsers break between grapheme
	   clusters, so tone marks stay attached to their consonants. */
	overflow-wrap: break-word;
}

/* 700 is the CEILING on all three faces — none ships an 800, and asking for
   one gets a synthesised fake-bold that smears Thai tone marks (tokens.css).
   Sizes are fluid: the brief wants a hero that is "deliberately too large",
   and a clamp is the only way to have that at 1440px without it eating a
   phone screen whole. */
h1 {
	font-size: clamp(2.5rem, 7.5vw, var(--sn-fs-2xl));
	font-weight: 700;
	text-shadow: var(--sn-ts-3);
}

h2 {
	font-size: clamp(2rem, 4.5vw, var(--sn-fs-xl));
	font-weight: 700;
	text-shadow: var(--sn-ts-2);
}

h3 {
	font-size: var(--sn-fs-lg);
	font-weight: 600;
	text-shadow: var(--sn-ts-1);
}

h4, h5, h6 {
	font-size: 1.25rem;
	font-weight: 600;
}

/* Section marker: a tilted cyan tile under a hard magenta offset — the same
   zero-blur depth the cards use, shrunk to an ornament. Deliberately neither
   site #1's gold lozenge nor site #2's lit dot: the three Thai sites must not
   share a mark. */
.site-main h2 {
	position: relative;
	padding-left: 2.2rem;
}

.site-main h2::before {
	content: '';
	position: absolute;
	left: 0;
	/* .55em, not .5em: Thai headings carry ascending vowel marks, so the
	   optical centre of the line sits lower than it does in Latin. */
	top: .55em;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	transform: rotate(-12deg);
	background: var(--sn-acc-2);
	box-shadow: 4px 4px 0 var(--sn-acc-1);
}

/* Eyebrow label above section headings — Michael can drop it in a WYSIWYG as
   <p class="x226e5068">…</p> right before a heading. A framed chip, because
   on this skin an unframed label reads as a stray line of text.
   NO uppercase and NO letter-spacing (Thai rules 2 and 3). */
.x226e5068 {
	display: inline-block;
	margin: 0 0 var(--sn-sp-3);
	padding: var(--sn-sp-1) var(--sn-sp-4);
	border: 2px dashed var(--sn-acc-2);
	border-radius: var(--sn-radius-pill);
	background: rgba(0, 245, 212, .10);
	color: var(--sn-acc-2);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
}

.x226e5068 + h2,
.x226e5068 + h3 {
	margin-top: 0;
}

/* Opening paragraph of a section — Michael can set it in a WYSIWYG as
   <p class="xd94e7a00">…</p>. Body face, not the display face: a chunky display
   face at paragraph length is exhausting to read in Thai. */
.xd94e7a00 {
	font-size: 1.375rem;
	line-height: 1.8;
	color: var(--sn-heading);
	font-weight: 400;
}

/* ---------- Links ---------- */

a {
	color: var(--sn-accent);
	text-decoration: none;
}

/* Hover BRIGHTENS to white. The page is the darkest surface in the system, so
   anything that darkens on hover walks toward the background and vanishes
   (tokens.css rule 4). */
a:hover,
a:focus {
	color: var(--sn-heading);
	text-decoration: underline;
}

a:visited {
	color: var(--sn-accent);
}

/* Links in RUNNING TEXT are underlined, not merely tinted (WCAG 1.4.1).
   :where() zeroes this rule's specificity on purpose, so ANY component rule
   (.xdc1444ed, .x38a42827 a, …) outranks it without a specificity arms race — the
   first version of this rule underlined every button inside a paragraph. */
:where(.site-main p, .site-main li, .site-main td, .site-main th) a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--sn-accent) 45%, transparent);
	transition: color .15s ease, text-decoration-color .15s ease;
}

:where(.site-main p, .site-main li) a:hover,
:where(.site-main p, .site-main li) a:focus {
	text-decoration-color: currentColor;
}

.x38a42827 a,
.x2eb7bd32 a,
.x79a25277 a,
.xecab1384 a,
.x3ca59633 a,
.xceae9e27 a,
.xf5724f53 a,
.xdc1444ed {
	text-decoration: none;
}

/* Keyboard focus. The brief asks for a double ring of 8px total thickness in
   contrasting colours; here that is a 4px yellow ring held 4px off the
   element, so whatever accent the element itself carries shows through the
   gap as the second ring. Yellow because it is the only accent that clears
   AA against all five of the others AND the void (15.22:1). */
:focus-visible {
	outline: 4px solid var(--sn-acc-3);
	outline-offset: 4px;
}

/* Native controls inherit the brand. */
input,
select,
textarea {
	accent-color: var(--sn-primary);
	caret-color: var(--sn-primary);
}

/*
 * FORM CONTROLS — neutralising underscores, and this is a load-order trap
 * worth understanding before touching it.
 *
 * underscores' style.css ships, at line ~596:
 *     input[type="number"], …, textarea { color:#666; border:1px solid #ccc;
 *                                         border-radius:3px; padding:3px }
 * That selector is (0,1,1) — EXACTLY the specificity of a block's own
 * `.x6a76d28b input` — so which of the two wins is decided purely by load
 * order. And block stylesheets registered through block.json are NOT
 * guaranteed to load after style.css: WordPress prints some of them in the
 * head BEFORE it (casino-cards does, verifiably, on this install). The result
 * was a #666 label behind a 1px #ccc hairline sitting inside the calculator's
 * magenta-framed panel — the only two 2015-grey values left on the page.
 *
 * Fixing it in the block would only fix that block. It is neutralised here
 * instead, because base.css IS guaranteed to load after style.css, and the
 * selector list below matches underscores' own so it wins on order.
 * A block that wants something different must out-SPECIFY this (two classes),
 * not merely come later — see blocks/payout-calculator/style.css.
 */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
	background: var(--sn-surface-2);
	color: var(--sn-heading);
	border: 3px solid var(--sn-acc-5);
	border-radius: var(--sn-radius-sm);
	padding: var(--sn-sp-3) var(--sn-sp-4);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-md);
}

/* Same story for the focus rule — underscores sets `…:focus { color:#111 }`,
   which is near-black on a near-black page. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	color: var(--sn-heading);
	border-color: var(--sn-acc-2);
}

img {
	max-width: 100%;
	height: auto;
}

/* Content lists: ONE compact hanging indent. Underscores ships
   `margin: 0 0 1.5em 3em` on top of the browser's ~40px padding-left —
   a double indent that wrecks lists inside callouts and flex layouts.
   Blocks that restyle their own lists (toc, faq, chips, sources…) set
   explicit margins/paddings with class selectors and are unaffected. */
ul,
ol {
	margin: 0 0 1.5em;
	padding-left: var(--sn-sp-6);
}

li > ul,
li > ol {
	margin: var(--sn-sp-1) 0 0;
}

/* Markers take the accent — a grey bullet is the one thing this page cannot
   contain. */
.site-main :where(ul, ol) li::marker {
	color: var(--sn-acc-2);
}

::selection {
	background: var(--sn-acc-3);
	color: var(--sn-bg);
}

/* ---------- THE COLOUR ROTATION TABLE ----------
 *
 * The brief's `colors[index % colors.length]`, in plain CSS. Every repeated
 * element in the theme — cards, stats, FAQ rows, steps, chips, tiles — reads
 * --sn-acc for its colour and --sn-acc-ink for anything printed on it, and
 * this ONE table decides which of the five each position gets. --sn-shadow-1
 * and --sn-shadow-2 move with it, so an item's hard shadow clashes with the
 * item beside it instead of matching it.
 *
 * Two reasons it lives here rather than in each block:
 *   1. the rotation is a SYSTEM, and a system defined in nineteen places
 *      drifts — the third card on one block would stop matching the third
 *      card on another;
 *   2. it needs no markup change at all, so nothing about it reaches Michael,
 *      the field keys, or CONTENT-GUIDE-TH.md.
 *
 * Slot 5 is purple, which is the one accent that cannot carry ink (3.39:1),
 * so it ships white instead — callers never have to know that.
 */
.x987ba41f > *,
.xbcbe967c > *,
.x3c739380 > *,
.x6e89441e > *,
.x61b8c2cd > *,
.x15aa204f > *,
.xe47df864 > *,
.xcc5055e6 > *,
.xfb863ef5 > *,
.x2c5a621b > *,
.x86447a19 > *,
.x8b09f8b6 > *,
.xa183c2ea > *,
.x54b55850 > * {
	--sn-acc: var(--sn-acc-1);
	--sn-acc-ink: var(--sn-bg);
	--sn-acc-fg: var(--sn-acc-1);
	--sn-shadow-1: var(--sn-acc-5);
	--sn-shadow-2: var(--sn-acc-1);
}

.x987ba41f > :nth-child(5n + 2),
.xbcbe967c > :nth-child(5n + 2),
.x3c739380 > :nth-child(5n + 2),
.x6e89441e > :nth-child(5n + 2),
.x61b8c2cd > :nth-child(5n + 2),
.x15aa204f > :nth-child(5n + 2),
.xe47df864 > :nth-child(5n + 2),
.xcc5055e6 > :nth-child(5n + 2),
.xfb863ef5 > :nth-child(5n + 2),
.x2c5a621b > :nth-child(5n + 2),
.x86447a19 > :nth-child(5n + 2),
.x8b09f8b6 > :nth-child(5n + 2),
.xa183c2ea > :nth-child(5n + 2),
.x54b55850 > :nth-child(5n + 2) {
	--sn-acc: var(--sn-acc-2);
	--sn-acc-ink: var(--sn-bg);
	--sn-acc-fg: var(--sn-acc-2);
	--sn-shadow-1: var(--sn-acc-1);
	--sn-shadow-2: var(--sn-acc-3);
}

.x987ba41f > :nth-child(5n + 3),
.xbcbe967c > :nth-child(5n + 3),
.x3c739380 > :nth-child(5n + 3),
.x6e89441e > :nth-child(5n + 3),
.x61b8c2cd > :nth-child(5n + 3),
.x15aa204f > :nth-child(5n + 3),
.xe47df864 > :nth-child(5n + 3),
.xcc5055e6 > :nth-child(5n + 3),
.xfb863ef5 > :nth-child(5n + 3),
.x2c5a621b > :nth-child(5n + 3),
.x86447a19 > :nth-child(5n + 3),
.x8b09f8b6 > :nth-child(5n + 3),
.xa183c2ea > :nth-child(5n + 3),
.x54b55850 > :nth-child(5n + 3) {
	--sn-acc: var(--sn-acc-3);
	--sn-acc-ink: var(--sn-bg);
	--sn-acc-fg: var(--sn-acc-3);
	--sn-shadow-1: var(--sn-acc-2);
	--sn-shadow-2: var(--sn-acc-5);
}

.x987ba41f > :nth-child(5n + 4),
.xbcbe967c > :nth-child(5n + 4),
.x3c739380 > :nth-child(5n + 4),
.x6e89441e > :nth-child(5n + 4),
.x61b8c2cd > :nth-child(5n + 4),
.x15aa204f > :nth-child(5n + 4),
.xe47df864 > :nth-child(5n + 4),
.xcc5055e6 > :nth-child(5n + 4),
.xfb863ef5 > :nth-child(5n + 4),
.x2c5a621b > :nth-child(5n + 4),
.x86447a19 > :nth-child(5n + 4),
.x8b09f8b6 > :nth-child(5n + 4),
.xa183c2ea > :nth-child(5n + 4),
.x54b55850 > :nth-child(5n + 4) {
	--sn-acc: var(--sn-acc-4);
	--sn-acc-ink: var(--sn-bg);
	--sn-acc-fg: var(--sn-acc-4);
	--sn-shadow-1: var(--sn-acc-3);
	--sn-shadow-2: var(--sn-acc-1);
}

.x987ba41f > :nth-child(5n + 5),
.xbcbe967c > :nth-child(5n + 5),
.x3c739380 > :nth-child(5n + 5),
.x6e89441e > :nth-child(5n + 5),
.x61b8c2cd > :nth-child(5n + 5),
.x15aa204f > :nth-child(5n + 5),
.xe47df864 > :nth-child(5n + 5),
.xcc5055e6 > :nth-child(5n + 5),
.xfb863ef5 > :nth-child(5n + 5),
.x2c5a621b > :nth-child(5n + 5),
.x86447a19 > :nth-child(5n + 5),
.x8b09f8b6 > :nth-child(5n + 5),
.xa183c2ea > :nth-child(5n + 5),
.x54b55850 > :nth-child(5n + 5) {
	/* Purple. The ONE slot whose ink is white — 3.39:1 as ink, 5.69:1 as
	   white (tokens.css rule 1). */
	--sn-acc: var(--sn-acc-5);
	--sn-acc-ink: var(--sn-heading);
	--sn-acc-fg: var(--sn-acc-5-fg);
	--sn-shadow-1: var(--sn-acc-4);
	--sn-shadow-2: var(--sn-acc-2);
}

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

.x481f4542 {
	width: 100%;
	max-width: var(--sn-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sn-sp-4);
	padding-right: var(--sn-sp-4);
}

.x2e98c608 {
	width: 100%;
	max-width: var(--sn-content);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sn-sp-4);
	padding-right: var(--sn-sp-4);
}

@media (min-width: 768px) {
	.x481f4542,
	.x2e98c608 {
		padding-left: var(--sn-sp-8);
		padding-right: var(--sn-sp-8);
	}
}

/* ---------- Buttons ---------- */

/*
 * The primary button is the loudest object in the theme and it is supposed to
 * be: a five-colour gradient fill, a CLASHING yellow frame, a glow and a hard
 * offset shadow at the same time, and a sheen that sweeps on hover.
 *
 * INK, NOT WHITE. The gradient runs through magenta, purple, cyan, yellow and
 * orange; white is unreadable on three of those and ink is unreadable on one
 * (purple, 3.39:1). Ink wins on balance and the label is 700 weight at 18px,
 * which is above the large-text threshold where 3:1 is the bar. A label that
 * had to survive a solid purple fill would take --sn-acc-ink instead.
 *
 * Ink routes through --sn-btn-ink rather than `color`, and every state reads
 * that one property. A context that recolours the button sets the property.
 * NEVER set `color` on .xdc1444ed from a context: `.xdc1444ed:visited` has the same
 * specificity as a plain class rule and repaints the label the moment the
 * visitor comes back, which is how the label has vanished three times in this
 * theme's history.
 */
.xdc1444ed {
	position: relative;
	overflow: hidden;
	display: inline-block;
	padding: var(--sn-sp-3) var(--sn-sp-8);
	border: var(--sn-rule) solid var(--sn-acc-3);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-gold-grad);
	background-size: 300% 100%;
	background-position: 0% 50%;
	color: var(--sn-btn-ink, var(--sn-primary-dark));
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--sn-glow), 5px 5px 0 var(--sn-acc-5);
	transition: transform .25s ease-out, box-shadow .25s ease-out, background-position .5s ease-out;
}

.xdc1444ed:hover,
.xdc1444ed:focus {
	/* Three changes at once, per the brief: scale, shadow and gradient
	   position. A colour-only hover is the anti-pattern here. */
	transform: scale(1.06);
	color: var(--sn-btn-ink, var(--sn-primary-dark));
	text-decoration: none;
	background-position: 100% 50%;
	box-shadow: var(--sn-glow-lg), 8px 8px 0 var(--sn-acc-5), 16px 16px 0 var(--sn-acc-2);
}

.xdc1444ed:active {
	transform: scale(.96);
	box-shadow: var(--sn-glow), 3px 3px 0 var(--sn-acc-5);
}

.xdc1444ed:visited {
	color: var(--sn-btn-ink, var(--sn-primary-dark));
}

/* The sheen sweep. ::before is the ONE pseudo-element on buttons — the hero
   and casino CTA arrows use ::after, so do not add a second ::before. */
.xdc1444ed::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 55%;
	background: var(--sn-sheen);
	transform: skewX(-18deg);
	opacity: 0;
	pointer-events: none;
}

.xdc1444ed:hover::before,
.xdc1444ed:focus::before {
	animation: x2b8893b6 .65s ease-out;
}

/*
 * Secondary action: transparent with a DASHED frame, filling solid on hover.
 * Dashed is not decoration — the brief asks for two or three border styles in
 * any one section, and this is the theme's main source of the second one.
 * Only conversion buttons carry the gradient, so an in-content link-out never
 * competes with the money CTA.
 */
.x7b9e3fd5 {
	--sn-btn-ink: var(--sn-heading);
	border-style: dashed;
	border-color: var(--sn-acc-2);
	background: transparent;
	box-shadow: 5px 5px 0 var(--sn-acc-1);
}

.x7b9e3fd5:hover,
.x7b9e3fd5:focus {
	--sn-btn-ink: var(--sn-bg);
	border-style: solid;
	background: var(--sn-acc-2);
	transform: scale(1.05);
	box-shadow: 8px 8px 0 var(--sn-acc-1), 0 0 26px rgba(0, 245, 212, .5);
}

.x7b9e3fd5::before {
	display: none; /* no sheen on the quiet button */
}

/* LINE is the contact channel in Thailand the way email is in Europe — every
   reference site puts it first. Its brand green is fixed by LINE, so it is
   the one hardcoded colour in the theme; white on #06C755 reads 2.4:1, so the
   label is ink, not white. */
.x06e98411 {
	--sn-btn-ink: #05320F;
	border-color: var(--sn-acc-3);
	background: linear-gradient(170deg, #4BE08A 0%, #06C755 55%, #04A445 100%);
	background-size: auto;
	box-shadow: 5px 5px 0 #04361A, 0 0 22px rgba(6, 199, 85, .45);
}

.x06e98411:hover,
.x06e98411:focus {
	box-shadow: 8px 8px 0 #04361A, 0 0 34px rgba(6, 199, 85, .6);
}

/* ---------- Images (rendered by blocks) ---------- */

.xb6ca7e35 {
	display: block;
	border-radius: var(--sn-radius);
	height: auto;
	max-width: 100%;
	border: var(--sn-rule) solid var(--sn-border);
}

/* ---------- Shared table base ---------- */
/* Table blocks wrap their <table class="xdec6dcee"> in .xb472de1c — mandatory. */

.xb472de1c {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--sn-surface);
	border: var(--sn-rule) solid var(--sn-acc-2);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
}

.xdec6dcee {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--sn-fs-sm);
}

.xdec6dcee th,
.xdec6dcee td {
	padding: var(--sn-sp-3) var(--sn-sp-4);
	border: 0;
	text-align: left;
	vertical-align: top;
}

/* Header band: LIGHTER than the card under it (a darker band on a dark card
   reads as a gap), closed by a thick magenta underline that clashes with the
   cyan frame. NO uppercase and NO letter-spacing (Thai rules 2 and 3). */
.xdec6dcee thead th {
	background: var(--sn-band-grad);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	white-space: nowrap;
	border-bottom: var(--sn-rule) solid var(--sn-acc-1);
}

/* Zebra rows: Thai tables run long and dense, and a striped body is far
   easier to track across than hairlines alone. */
.xdec6dcee tbody tr {
	background: transparent;
	transition: background .2s ease;
}

.xdec6dcee tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--sn-surface-2) 60%, transparent);
}

.xdec6dcee tbody td,
.xdec6dcee tbody th {
	border-bottom: 2px solid color-mix(in srgb, var(--sn-acc-5) 55%, transparent);
}

.xdec6dcee tbody tr:last-child td,
.xdec6dcee tbody tr:last-child th {
	border-bottom: 0;
}

.xdec6dcee tbody tr:hover {
	background: var(--sn-primary-tint);
}

/* WYSIWYG tables (auto-wrapped by sterrennacht_wrap_naked_tables) usually
   keep their header cells in the first body row — style them like a thead. */
.x9b4069ff tr:first-child th {
	background: var(--sn-band-grad);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	white-space: nowrap;
	border-bottom: var(--sn-rule) solid var(--sn-acc-1);
}

.x9b4069ff td {
	min-width: 120px; /* keeps pasted tables readable before the wrap scrolls */
}

/* ---------- Panels ---------- */

/*
 * The house card. Four-pixel frame in a clashing accent, generous radius, a
 * hard two-layer offset shadow, and its own pattern layer so no surface in
 * the theme is ever a flat fill (the brief's mandatory pattern-on-pattern).
 * The pattern is painted in the `background` shorthand rather than as a
 * pseudo-element, because ::before and ::after are both already spoken for on
 * several of the blocks that use .x8f4af156.
 */
.x8f4af156 {
	position: relative;
	background: var(--sn-pat-dots-2), var(--sn-surface);
	border: var(--sn-rule) solid var(--sn-acc);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
	padding: var(--sn-sp-6);
}

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

/* ---------- Site header (T1) ---------- */

.x6bdbf45e {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sn-pat-stripes), var(--sn-lacquer-grad);
	border-bottom: var(--sn-rule) solid var(--sn-acc-1);
	box-shadow: 0 6px 0 rgba(123, 47, 255, .55);
}

.admin-bar .x6bdbf45e {
	top: 32px;
}

/* Reading progress — sits ON the header's bottom edge, so it covers nothing
   (assets/js/ui.js drives the scale; no JS = a 0-width, invisible bar). */
.x61a72963 {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--sn-rule);
	overflow: hidden;
	pointer-events: none;
}

.x071f2bef {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: var(--sn-gold-grad);
	background-size: 300% 100%;
	transition: transform .12s linear;
}

.x28e94509 {
	background: var(--sn-purple-deep);
	border-bottom: 2px solid color-mix(in srgb, var(--sn-acc-2) 40%, transparent);
	font-size: var(--sn-fs-xs);
	color: color-mix(in srgb, var(--sn-on-chrome) 82%, transparent);
}

.x3d298126 {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-2);
	padding-top: var(--sn-sp-1);
	padding-bottom: var(--sn-sp-1);
}

/* The age badge is a compliance mark, so it takes the money colour and a hard
   frame rather than the rotating accent — it must look the same everywhere it
   appears (header, footer, responsible-gambling block). */
.x3f110277 {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--sn-sp-2);
	border: 2px solid var(--sn-gold);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-gold);
	font-family: var(--sn-font-accent);
	font-weight: 700;
}

.x2d23bc2b {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sn-sp-4);
	padding-top: var(--sn-sp-3);
	padding-bottom: var(--sn-sp-3);
}

.xf155fe09 {
	/* SHRINKABLE. A wide custom logo (this site ships a 980x210 wordmark) used
	   to hold the row at its natural width and push the mobile hamburger off
	   the screen entirely — there was no way to open the menu on a phone. */
	flex: 0 1 auto;
	min-width: 0;
}

.x650c4627 {
	margin: 0;
	font-family: var(--sn-font-display);
	font-size: 1.75rem;
	font-weight: 700;
	white-space: nowrap;
	text-shadow: none; /* the gradient below is painted through the glyphs */
}

/* Animated gradient wordmark: the action gradient runs through the letters and
   never stops moving. The `color` declaration is the fallback and must stay —
   background-clip:text leaves the text invisible where the clip is
   unsupported. */
.x650c4627 a {
	color: var(--sn-acc-2);
	background: var(--sn-gold-grad);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-decoration: none;
	animation: x1d891514 6s ease infinite;
}

/* A tilted tile instead of a full stop — a period reads as punctuation
   mid-sentence when the site name is Thai. Same mark as the h2 marker. */
.x650c4627::after {
	content: '';
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-left: 9px;
	border-radius: 3px;
	transform: translateY(-3px) rotate(-12deg);
	background: var(--sn-acc-3);
	box-shadow: 3px 3px 0 var(--sn-acc-1);
}

.x6bdbf45e .custom-logo {
	max-height: 70px;
	max-width: 100%;
	width: auto;
	height: auto;
}

/* Phones: cap the wordmark so the row always has room for the hamburger. */
@media (max-width: 767px) {
	.x6bdbf45e .custom-logo {
		max-height: 44px;
	}
}

.x1870ae23 {
	position: relative;
	/* Underscores sets .main-navigation to width:100%; flex keeps the
	   hamburger pinned to the far right on mobile. */
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.xdedddee4 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sn-sp-2);
	background: var(--sn-purple-tint);
	border: 2px solid var(--sn-acc-1);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-acc-1);
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}

.xdedddee4:hover {
	transform: scale(1.08) rotate(-4deg);
	background: var(--sn-acc-1);
	color: var(--sn-bg);
}

.x1870ae23 ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Mobile: dropdown panel (covers both wp_nav_menu ul and wp_page_menu div>ul). */
.x1870ae23 > ul,
.x1870ae23 > div > ul {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + var(--sn-sp-3));
	min-width: 250px;
	padding: var(--sn-sp-3);
	background: var(--sn-pat-dots-2), var(--sn-purple-deep);
	border: var(--sn-rule) solid var(--sn-acc-2);
	border-radius: var(--sn-radius);
	box-shadow: 8px 8px 0 var(--sn-acc-1);
}

.x1870ae23.toggled > ul,
.x1870ae23.toggled > div > ul {
	display: block;
}

.x1870ae23 li a {
	display: block;
	padding: var(--sn-sp-2) var(--sn-sp-3);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.x1870ae23 li a:hover,
.x1870ae23 li a:focus {
	background: var(--sn-acc-1);
	color: var(--sn-bg);
	text-decoration: none;
}

.x1870ae23 li.current-menu-item > a,
.x1870ae23 li.current_page_item > a {
	color: var(--sn-acc-3);
}

/* Chevron on parent items (rotates up when open via .focus — navigation.js). */
.x1870ae23 li.menu-item-has-children > a::after,
.x1870ae23 li.page_item_has_children > a::after {
	content: '';
	display: inline-block;
	margin-left: var(--sn-sp-2);
	border: solid currentColor;
	border-width: 0 3px 3px 0;
	padding: 2.5px;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .2s ease;
}

.x1870ae23 li.menu-item-has-children.focus > a::after,
.x1870ae23 li.page_item_has_children.focus > a::after {
	transform: translateY(1px) rotate(225deg);
}

/* Mobile submenu: nested inline inside the panel, indented, collapsed until
   the parent gets .focus (tap — handled by navigation.js/nav.js).
   Overrides underscores' absolute/-999em positioning. */
.x1870ae23 ul ul {
	display: none;
	position: static;
	float: none;
	margin: var(--sn-sp-1) 0 var(--sn-sp-1) var(--sn-sp-3);
	padding: 0 0 0 var(--sn-sp-2);
	border-left: 3px dashed var(--sn-acc-3);
	box-shadow: none;
}

.x1870ae23 li.focus > ul {
	display: block;
	left: auto;
}

/* Underscores force-opens all nested uls when .toggled — collapse them back
   so the mobile submenu is a tap-to-expand accordion (chevron on parent). */
.x1870ae23.toggled ul ul {
	display: none;
}

.x1870ae23.toggled li.focus > ul {
	display: block;
}

.x1870ae23 ul ul a {
	width: auto; /* underscores forces 200px */
	font-weight: 400;
}

@media (min-width: 768px) {
	.xdedddee4 {
		display: none;
	}

	.x1870ae23 {
		justify-content: flex-start; /* Desktop: menu sits next to the logo. */
	}

	.x1870ae23 > ul,
	.x1870ae23 > div > ul {
		display: flex !important; /* Beat underscores' .main-navigation rules. */
		position: static;
		gap: var(--sn-sp-4);
		min-width: 0;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	/* Desktop: the item lifts and fills on hover rather than underlining —
	   an underline is the quiet move and there are none of those here.
	   nowrap because Thai menu items are long and were breaking across two
	   lines. NO letter-spacing (Thai rule 3). */
	.x1870ae23 li a {
		border-radius: var(--sn-radius-pill);
		white-space: nowrap;
		padding: var(--sn-sp-1) var(--sn-sp-3);
		font-size: var(--sn-fs-sm);
		letter-spacing: 0;
	}

	.x1870ae23 li a:hover,
	.x1870ae23 li a:focus {
		transform: translateY(-2px) rotate(-1.5deg);
		background: var(--sn-acc-2);
		color: var(--sn-bg);
	}

	.x1870ae23 li.current-menu-item > a,
	.x1870ae23 li.current_page_item > a {
		background: var(--sn-purple-tint);
		color: var(--sn-acc-3);
	}

	/* Desktop dropdown. Opens on hover, keyboard focus, or click (.focus). */
	.x1870ae23 ul ul {
		display: none;
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		min-width: 250px;
		margin: 0;
		padding: var(--sn-sp-3);
		background: var(--sn-pat-dots-2), var(--sn-purple-deep);
		border: var(--sn-rule) solid var(--sn-acc-2);
		border-radius: var(--sn-radius);
		box-shadow: 8px 8px 0 var(--sn-acc-1);
	}

	/* Invisible bridge so the pointer can cross the gap without closing. */
	.x1870ae23 ul ul::before {
		content: '';
		position: absolute;
		top: -14px;
		left: 0;
		right: 0;
		height: 14px;
	}

	.x1870ae23 li:hover > ul,
	.x1870ae23 li:focus-within > ul,
	.x1870ae23 li.focus > ul {
		display: block;
		left: 0;
	}

	.x1870ae23 ul ul li a {
		white-space: normal;
		border-radius: var(--sn-radius-sm);
	}

	.x1870ae23 ul ul li a:hover,
	.x1870ae23 ul ul li a:focus {
		transform: none;
		background: var(--sn-acc-1);
		color: var(--sn-bg);
	}

	.x1870ae23 ul ul li.current-menu-item > a,
	.x1870ae23 ul ul li.current_page_item > a {
		background: transparent;
		color: var(--sn-acc-3);
	}

	/* Chevron opens on hover too. */
	.x1870ae23 li.menu-item-has-children:hover > a::after,
	.x1870ae23 li.page_item_has_children:hover > a::after {
		transform: translateY(1px) rotate(225deg);
	}
}

/* ---------- Site footer (T2) ---------- */
/* Deep deck under a thick gradient edge: brand | two menus | the
   responsible-gambling CARD, then a slim bottom bar. */

.xa3d75f07 {
	position: relative;
	margin-top: var(--sn-sp-16);
	background: var(--sn-pat-checker), var(--sn-purple-deep);
	color: color-mix(in srgb, var(--sn-on-chrome) 72%, transparent);
	font-size: var(--sn-fs-sm);
	border-top: var(--sn-rule-heavy) solid transparent;
	/* The full action gradient painted into the border box only. */
	border-image: var(--sn-gold-grad) 1;
}

.x6bc56c87 {
	display: grid;
	gap: var(--sn-sp-8);
	padding: var(--sn-sp-12) 0 var(--sn-sp-8);
}

.x202c8024 {
	margin: 0 0 var(--sn-sp-3);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: 0;
	text-shadow: var(--sn-ts-1);
}

/* Tilted tile, matching the header wordmark — not a full stop, which reads as
   punctuation when the site name is Thai. */
.x202c8024::after {
	content: '';
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-left: 9px;
	border-radius: 3px;
	transform: translateY(-3px) rotate(-12deg);
	background: var(--sn-acc-3);
	box-shadow: 3px 3px 0 var(--sn-acc-1);
}

.x0b77f35d {
	margin: 0;
	max-width: 42ch;
}

.x6bc56c87 > * {
	min-width: 0; /* grid children must be allowed to shrink below content */
}

/* Both menus live in one grid cell (see the 1024px rule). */
.xa98ff4da {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-8);
}

.x4cb46266 {
	min-width: 0;
	flex: 1 1 auto;
}

/* NO uppercase and NO letter-spacing (Thai rules 2 and 3). Size, weight and
   colour separate the column heading from its list instead. */
.xc11f7986 {
	margin: 0 0 var(--sn-sp-4);
	color: var(--sn-acc-3);
	font-family: var(--sn-font-display);
	font-weight: 700;
	letter-spacing: 0;
	font-size: var(--sn-fs-md);
}

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

.x6b368719 a {
	color: color-mix(in srgb, var(--sn-on-chrome) 72%, transparent);
	text-decoration: none;
	transition: color .2s ease, padding-left .2s ease;
}

.x6b368719 a:hover,
.x6b368719 a:focus {
	color: var(--sn-acc-2);
	padding-left: var(--sn-sp-3);
	text-decoration: none;
}

/* The compliance card — sits in the deck, not in a strip below it. */
.xc6a9f6ab {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-4);
	padding: var(--sn-sp-6);
	background: color-mix(in srgb, var(--sn-on-chrome) 6%, transparent);
	border: 2px dashed color-mix(in srgb, var(--sn-on-chrome) 30%, transparent);
	border-left: var(--sn-rule-heavy) solid var(--sn-gold);
	border-radius: var(--sn-radius-sm);
}

.xb29de58c {
	display: flex;
	align-items: flex-start;
	gap: var(--sn-sp-3);
}

.xb29de58c p {
	margin: 0;
	color: color-mix(in srgb, var(--sn-on-chrome) 90%, transparent);
}

.x86447a19 {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sn-sp-2);
	margin: 0;
	padding: 0;
}

/* Outlined chips in the rotating accent — deliberately NOT filled: compliance
   links are informational and must not read as calls to action (§7). */
.x86447a19 a {
	display: inline-block;
	padding: var(--sn-sp-1) var(--sn-sp-3);
	border: 2px solid var(--sn-acc);
	border-radius: var(--sn-radius-pill);
	color: var(--sn-on-chrome);
	font-size: var(--sn-fs-xs);
	font-weight: 600;
	text-decoration: none;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}

.x86447a19 a:hover,
.x86447a19 a:focus {
	transform: translateY(-2px);
	background: var(--sn-acc);
	color: var(--sn-acc-ink);
	text-decoration: none;
}

/* Row 2: copyright + disclosure. */
.xff85646a {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-6) 0;
	border-top: 2px solid color-mix(in srgb, var(--sn-acc-5) 60%, transparent);
	font-size: var(--sn-fs-xs);
	/* 58%, not 45%: at 45% the copyright and the affiliate disclosure — the
	   two lines that MUST be readable — measured 3.93:1 on an ink footer. */
	color: color-mix(in srgb, var(--sn-on-chrome) 62%, transparent);
}

.x22902d18,
.x99e3eecd {
	margin: 0;
}

@media (min-width: 768px) {
	.x6bc56c87 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sn-sp-8) var(--sn-sp-12);
	}

	.xa98ff4da {
		flex-direction: row;
		gap: var(--sn-sp-12);
	}

	.xff85646a {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sn-sp-8);
	}

	.x99e3eecd {
		text-align: right;
		max-width: 62ch;
	}
}

@media (min-width: 1024px) {
	/* Exactly three columns — brand, the menu cell, the compliance card. The
	   menus share ONE cell so an unassigned menu location cannot change the
	   column count and squash the brand text. Do not "simplify" this back
	   into four columns. */
	.x6bc56c87 {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.6fr) minmax(250px, 1.3fr);
		gap: var(--sn-sp-12);
		padding-top: var(--sn-sp-16);
	}
}

/* ---------- Keyframe library ----------
 * The brief's motion set. Everything here animates `transform`, `opacity`,
 * `box-shadow` or `background-position` only — nothing animates width, height
 * or colour, so it all stays on the compositor.
 * Every one of them is switched off in the reduced-motion block at the end of
 * this file; none of them carries information.
 */

@keyframes x2b8893b6 {
	from { left: -60%; opacity: 0; }
	20%  { opacity: 1; }
	to   { left: 130%; opacity: 0; }
}

@keyframes xbdca11e0 {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-20px) rotate(5deg); }
}

@keyframes xf2aedd17 {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(20px) rotate(-5deg); }
}

@keyframes xb973946c {
	0%, 100% { box-shadow: 0 0 20px rgba(255, 58, 242, .5); }
	50%      { box-shadow: 0 0 40px rgba(255, 58, 242, .85), 0 0 62px rgba(0, 245, 212, .5); }
}

@keyframes x1d891514 {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes xd52f8126 {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes x30abe7c9 {
	0%, 100% { transform: rotate(-3deg); }
	50%      { transform: rotate(3deg); }
}

@keyframes xffac81ad {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

/* Motion utilities. Decorative elements opt in with these rather than each
   block restating a duration. */
.xbdca11e0     { animation: xbdca11e0 6s ease-in-out infinite; will-change: transform; }
.xf2aedd17 { animation: xf2aedd17 5s ease-in-out infinite; will-change: transform; }
.x30abe7c9    { animation: x30abe7c9 1.4s ease-in-out infinite; will-change: transform; }
.xffac81ad    { animation: xffac81ad 2s ease-in-out infinite; will-change: transform; }
.xd52f8126 { animation: xd52f8126 20s linear infinite; will-change: transform; }

/* ---------- Scroll reveal ---------- */
/* COMPLIANCE BY CONSTRUCTION: the hidden state exists ONLY under .x40d30d3e,
   which assets/js/reveal.js adds after its prefers-reduced-motion check, and
   only for blocks still below the fold. No JS = nothing is ever hidden. */

.x40d30d3e .xd160ac3c {
	opacity: 0;
	transform: translateY(18px);
}

.x40d30d3e .xd160ac3c.is-inview {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .5s cubic-bezier(.68, -.55, .265, 1.55);
}

/* ---------- Atmosphere ---------- */

/*
 * A flat fill is the brief's first anti-pattern ("empty background sections").
 * Two fixed layers sit behind everything: the gradient mesh, and the dots over
 * stripes. Fixed attachment so they do not scroll into a visible band.
 *
 * It hangs off BODY, not #page: #page carries overflow-x:clip, and a clip
 * container can clip a fixed-position descendant.
 */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background: var(--sn-pat-mesh);
}

body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .55;
	background: var(--sn-pat-dots), var(--sn-pat-stripes);
}

/* ---------- Utilities ---------- */

/*
 * Floating decorative shapes and oversized background type.
 *
 * The brief asks for five to ten scattered marks per full-height section plus
 * a huge half-visible word bleeding off an edge. Both are drawn as
 * PSEUDO-ELEMENTS on containers that already exist, never as markup, so
 * nothing about them reaches the editor, the ACF field keys or
 * CONTENT-GUIDE-TH.md. That is also why the selectors are named here instead
 * of a generic `.x8d4e2c71` utility: a utility class would have to be printed by
 * a render.php, and this pass is CSS-only.
 *
 * The mark is "888", not a word: it is the most auspicious number in Thai
 * gambling culture, it is language-neutral so it never becomes copy Michael
 * has to own or translate, and the `content: '888' / ''` alt syntax keeps it
 * out of the accessibility tree. Individual floating shapes live in the block
 * stylesheets, next to the surfaces they decorate.
 */
.xecab1384::after,
.x40aa384f::after,
.x056232d5::after {
	content: '888' / '';
	position: absolute;
	right: -2%;
	bottom: -14%;
	z-index: 0;
	pointer-events: none;
	font-family: var(--sn-font-accent);
	font-size: clamp(9rem, 26vw, 20rem);
	font-weight: 700;
	line-height: .8;
	color: var(--sn-acc-5);
	opacity: .2;
}

/* Section ornament — three tilted tiles on a fading rule. Drop
   <hr class="x96b492a6"> or <div class="x96b492a6"></div> between sections.
   Decorative only, so it is hidden from assistive tech by being empty. */
.x96b492a6 {
	position: relative;
	height: 3px;
	margin: var(--sn-sp-12) auto;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--sn-acc-5) 25%, var(--sn-acc-5) 75%, transparent);
}

.x96b492a6::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	border-radius: 4px;
	transform: translate(-50%, -50%) rotate(-12deg);
	background: var(--sn-acc-3);
	box-shadow:
		-26px 0 0 -1px var(--sn-acc-1),
		 26px 0 0 -1px var(--sn-acc-2);
}

/* Soft arc on the bottom edge of a full-bleed band. */
.xfb8bf3c7 {
	border-bottom-left-radius: 50% 40px;
	border-bottom-right-radius: 50% 40px;
}

.x573af825 {
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-sm);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------- Reduced motion ----------
 * The brief's rule, and the theme's: keep every visual style — colours,
 * borders, shadows, patterns — and remove only the continuous motion.
 * Hover and active states stay, at a shorter duration. */

@media (prefers-reduced-motion: reduce) {
	.x40d30d3e .xd160ac3c,
	.x40d30d3e .xd160ac3c.is-inview {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.xbdca11e0,
	.xf2aedd17,
	.x30abe7c9,
	.xffac81ad,
	.xd52f8126,
	.x650c4627 a {
		animation: none;
	}

	.xdc1444ed,
	.xdc1444ed:hover,
	.xdc1444ed:focus,
	.xdc1444ed:active {
		transform: none;
		transition-duration: .15s;
	}

	.x1870ae23 li a:hover,
	.x1870ae23 li a:focus,
	.xdedddee4:hover {
		transform: none;
	}

	/* Decorative motion off: the progress bar and the button sheen carry no
	   information, so they simply disappear. */
	.x61a72963 {
		display: none;
	}

	.xdc1444ed::before {
		display: none;
	}
}