/*
 * Block: sn/hero
 *
 * EXPRESSIVE REGISTER (see the two-register note at the top of base.css). This
 * is the design's "hero in a large rounded container": a tonal surface with the
 * extra-large radius, the biggest type on the site, and nothing else competing.
 *
 * WHAT IS DELIBERATELY NOT HERE:
 *
 *  - No blurred decorative shapes INSIDE the hero. The atmosphere is one fixed
 *    page-level layer (base.css) that this container sits on top of; a second
 *    set of blurred blobs here would double the paint cost for an effect the
 *    reader cannot distinguish from the first.
 *
 *  - NO SCROLL PARALLAX. The direction specifies scale 1→1.2 with opacity 1→0
 *    on the hero as the reader scrolls. Fading out an H1 is exactly what the
 *    standing compliance ruling forbids — no page element may be covered,
 *    hidden or delayed (CLAUDE.md §7, and §12 2026-07-14, where an earlier
 *    scroll animation on this very block was removed for the same reason). It
 *    would also animate the LCP candidate. The hero is static.
 *
 *  - No hover-revealed content anywhere. Motion may change colour and position,
 *    never visibility.
 *
 * The intro clamp with a "Read more" toggle STAYS. It has been removed and
 * restored three times; the standing decision is that the money list has to
 * clear the fold on a phone, the full text remains in the DOM, and expandable
 * content is indexed normally by Google and is not cloaking.
 */

.xfd2208e8 {
	position: relative;
	overflow: hidden;
	background: var(--sn-surface);
	border: 0;
	border-radius: var(--sn-radius-xl);
	padding: var(--sn-sp-8) var(--sn-sp-6);
	margin: var(--sn-sp-8) 0;
	box-shadow: none;
}

@media (max-width: 767px) {
	.xfd2208e8 {
		border-radius: var(--sn-radius);
	}
}

.xc03fa8ec {
	position: relative;
}

/* A tonal chip, the same object as base.css .xc07ce309 — an eyebrow is a
   label, and in MD3 a label with colour lives in a container. */
.x1d9fe804 {
	display: inline-block;
	margin: 0 0 var(--sn-sp-3);
	padding: var(--sn-sp-1) var(--sn-sp-3);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-secondary-container);
	color: var(--sn-on-secondary-container);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	letter-spacing: var(--sn-tracking-label);
}

.xec32e0c5 {
	margin: 0 0 var(--sn-sp-6);
	font-size: clamp(2.25rem, 1.4rem + 3.2vw, var(--sn-fs-3xl));
	font-weight: 500;
	line-height: var(--sn-lh-display);
	letter-spacing: -.02em;
	text-wrap: balance;
}

.x23bbc58a > :first-child { margin-top: 0; }
.x23bbc58a > :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. */
.xfd2208e8:not(.x959ba330) .x23bbc58a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.xfd2208e8.is-expanded .x23bbc58a {
	display: block;
	overflow: visible;
}

/* Author byline (replaces the retired review-meta block). */
.x0103ade5 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sn-sp-2) var(--sn-sp-6);
	margin-top: var(--sn-sp-6);
	padding-top: var(--sn-sp-4);
	border-top: 1px solid var(--sn-border);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	color: var(--sn-text-muted);
}

.x4fcb7147 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	white-space: nowrap;
	flex: 0 0 auto; /* Never shrink — the row scrolls instead of overlapping. */
}

.x94d6926a {
	flex: 0 0 auto;
	border-radius: 50%;
}

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

.x0103ade5 a {
	color: var(--sn-heading);
	font-weight: 500;
	text-decoration-thickness: 1.5px;
	text-underline-offset: .2em;
}

/* CTA + trust chips variant. */
.x543029aa {
	margin: var(--sn-sp-6) 0 0;
}

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

.x9cd1e86d {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-2) var(--sn-sp-4);
	background: var(--sn-secondary-container);
	border: 0;
	border-radius: var(--sn-radius-pill);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-on-secondary-container);
}

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

.xd1e781bf {
	margin: var(--sn-sp-6) 0 0;
}

.xd1e781bf .x12a04184 {
	width: 100%;
}

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

	.xc03fa8ec {
		display: flex;
		align-items: center;
		gap: var(--sn-sp-8);
	}

	.x8c9fcc1b {
		flex: 1 1 58%;
		min-width: 0;
	}

	.xd1e781bf {
		flex: 1 1 42%;
		margin: 0;
	}
}

/* ---------- Compact mode: the rounded stage ---------- */
/*
 * Compact is the DEFAULT, and here it is the design's signature container: a
 * tonal surface with the extra-large radius. The previous skin left it open on
 * the page and closed it with a heavy accent rule, because that skin had
 * neither radius nor elevation to work with. This one does, and a shape is the
 * clearer separator: the reader sees where the hero ends without a coloured
 * line telling them.
 *
 * NO SHADOW ON THIS ONE. It is a large, quiet ground rather than a raised
 * object, and MD3 asks for tone before elevation — the money list below is the
 * thing that should look raised.
 *
 * The fold is protected by layout, not by discarding content: the right column
 * only exists from 900px up (see the bottom of this file), and the image is
 * hidden below it.
 */

.x959ba330 {
	padding: var(--sn-sp-8) var(--sn-sp-6) var(--sn-sp-6);
	margin-bottom: var(--sn-sp-8);
	background: var(--sn-surface);
	border: 0;
	border-radius: var(--sn-radius-xl);
	box-shadow: none;
}

.x959ba330 .x8c9fcc1b {
	padding: 0;
}

/* The single loudest piece of type on the site — but at Medium weight, like
   every other heading here. Size carries it; weight does not need to. */
.x959ba330 .xec32e0c5 {
	font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem);
	color: var(--sn-heading);
}

.x959ba330 .x23bbc58a {
	color: var(--sn-text);
}

.x959ba330 .x0103ade5 {
	gap: var(--sn-sp-2) var(--sn-sp-4);
	color: var(--sn-text-muted);
}

.x959ba330 .x0103ade5 a {
	color: var(--sn-heading);
}

.x959ba330 .x4fcb7147 {
	border: 0;
	padding: 0;
	font-size: var(--sn-fs-sm);
	font-weight: 400;
}

.x959ba330 .x4fcb7147 svg {
	color: var(--sn-primary);
}

/* Compact intro: small type, clamped to 2 lines with a "Read more" toggle.
   The full text stays in the DOM — expandable content is indexed normally and
   is not cloaking (CLAUDE.md §12, 2026-07-14). */
.x959ba330 .x23bbc58a {
	font-size: var(--sn-fs-md);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 479px) {
	.x959ba330 .x23bbc58a {
		font-size: var(--sn-fs-sm);
	}
}

.x959ba330.is-expanded .x23bbc58a {
	display: block;
	overflow: visible;
}

/* An MD3 text button: no container until you touch it, then a state layer.
   Padded to a 44px touch target and pulled back into line with a negative
   margin so the optical alignment of the intro above is unchanged. */
.x318c1766 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-1);
	min-height: 44px;
	margin-top: var(--sn-sp-2);
	margin-left: calc(-1 * var(--sn-sp-3));
	padding: var(--sn-sp-1) var(--sn-sp-3);
	background: none;
	border: 0;
	border-radius: var(--sn-radius-pill);
	color: var(--sn-primary);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	letter-spacing: var(--sn-tracking-label);
	cursor: pointer;
	transition: background var(--sn-motion-fast) var(--sn-ease);
}

.x318c1766:hover,
.x318c1766:focus {
	background: var(--sn-state-hover);
	color: var(--sn-primary);
}

.x318c1766 svg {
	transition: transform var(--sn-motion-fast) var(--sn-ease);
}

.x959ba330.is-expanded .x318c1766 svg {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.x318c1766 svg {
		transition: none;
	}
}

/* Compact mobile: the byline scrolls sideways instead of stacking. */
.x959ba330 .x0103ade5 {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.x959ba330 .x0103ade5::-webkit-scrollbar {
	display: none;
}

/* ---------- Trust rail ---------- */

.x959ba330 .xf0d42eb6 {
	margin: var(--sn-sp-6) 0 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.x959ba330 .x7c192443 {
	margin: 0;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.x959ba330 .x7c192443::-webkit-scrollbar {
	display: none;
}

/* Mobile / strip form: a scrolling row of tonal pills. They sit ON the hero's
   own surface, so they use the SECONDARY container rather than the surface
   tone — a surface-coloured chip on a surface-coloured stage is invisible. */
.x959ba330 .x9cd1e86d {
	flex: 0 0 auto;
	white-space: nowrap;
	background: var(--sn-secondary-container);
	border: 0;
	border-radius: var(--sn-radius-pill);
	color: var(--sn-on-secondary-container);
	font-size: var(--sn-fs-sm);
}

.x959ba330 .x9cd1e86d svg {
	color: var(--sn-primary);
}

/* Compact hero renders no image below the split — there is no second column
   there, and the money list has to clear the fold. */
.x959ba330 .xd1e781bf {
	display: none;
}

/* ---------- Phone/tablet: the headline scale ---------- */
/*
 * The compact H1 is the LCP element and the single biggest block of vertical
 * space above the money list: at the original scale it measured 48px / three
 * lines / 177px tall at 375px, which by itself pushed the first casino card
 * below the fold (see the note under this one).
 *
 * ONE continuous ramp from 375px up to the 900px split, deliberately NOT a
 * mobile override with its own ceiling: the first version of this capped at
 * 48px through 767px, which meant 48px at 767 and 73px at 768 — a 25px jump
 * across one pixel of viewport. The ramp meets the desktop clamp's own value at
 * 900px (81.6px), so there is no step at any width.
 *
 * INHERITED FROM THE PREVIOUS MARKET AND DELIBERATELY NOT RELAXED YET. That
 * ramp was measured against French headings set in UPPERCASE, which run about
 * 20% wider than the same string in lower case — and nothing on this skin is
 * uppercase, so English titles will wrap sooner than the ramp assumes and the
 * value is now conservative rather than tight. Raising it is a real option, but
 * it needs the same treatment the number originally got: a browser at 360/375/
 * 414 with the LONGEST heading in CLAUDE.md §9, not an estimate.
 */
@media (max-width: 899px) {
	.x959ba330 .xec32e0c5 {
		font-size: clamp(2rem, 9.08vw, 5.1rem);
	}
}

/* ---------- Phone: the money list must break the fold ---------- */
/*
 * MEASURED, not estimated (real Chrome, 375x667, the /code-examples/ page with
 * the plugin list under the hero). Before this block: header 133px sticky, hero
 * 165 -> 670, so the first casino card started at 702 — 35px BELOW the fold, on
 * a page whose whole job is that list. Nothing is hidden to fix it (§7): the
 * poster register is simply spent less lavishly on a 375px screen.
 *
 * Where the 170px comes from, largest first:
 *   H1  48px/3 lines = 177px  ->  35px/3 lines = 105px   (-72, plus -8 margin)
 *   hero padding + margins  32/24/32  ->  16/16/16       (-40 and -16 above it)
 *   byline, rail, eyebrow rhythm dropped one step        (-24)
 *
 * The H1 stays the loudest thing on the page — it is still 2x the body size and
 * ~2.7x the byline. The ceiling is unchanged from 480px up, so the display
 * scale is intact everywhere it fits. Test any change to the clamp against the
 * LONGEST heading in CLAUDE.md §9, not a short one: a heading that wraps to
 * four lines gives the pixels straight back.
 *
 * NOTE: the 375px figures below were measured on the previous market, whose
 * hero had no container padding (it sat open on the page). This skin's compact
 * hero is a rounded stage with sp-6 of horizontal padding, so the numbers are
 * indicative, not current. Re-measure before quoting them again.
 */
@media (max-width: 767px) {
	.x959ba330 {
		padding: var(--sn-sp-4) 0;
		margin: var(--sn-sp-4) 0;
	}

	.x959ba330 .x1d9fe804 {
		margin-bottom: var(--sn-sp-2);
	}

	.x959ba330 .xec32e0c5 {
		margin-bottom: var(--sn-sp-4);
	}

	.x318c1766 {
		margin-top: var(--sn-sp-2);
	}

	.x959ba330 .x0103ade5 {
		margin-top: var(--sn-sp-4);
		padding-top: var(--sn-sp-3);
	}

	/* The avatar is what sets the byline row's height, so it is the only place
	   left in that row worth a pixel. 22px still reads as a face at 1x. */
	.x959ba330 .x94d6926a {
		width: 22px;
		height: 22px;
	}

	/* Tighter squares, same 13px label — the chips lose padding, not legibility. */
	.x959ba330 .x9cd1e86d {
		padding: var(--sn-sp-1) var(--sn-sp-2);
	}

	.x959ba330 .xf0d42eb6,
	.x959ba330 .x543029aa,
	.x959ba330 .x7c192443 {
		margin-top: var(--sn-sp-4);
	}
}

@media (min-width: 768px) {
	.x959ba330 .xe3482e27 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--sn-sp-4) var(--sn-sp-6);
	}
}

/* ---------- Compact layout: the split appears at 900px ---------- */

@media (min-width: 900px) {
	.x959ba330 .xc03fa8ec {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: var(--sn-sp-12);
		align-items: center;
	}

	/* With neither image nor rail there is no right column, so the grid
	   collapses — otherwise an empty gutter pushes the headline off-centre. */
	.x959ba330:not(.xcd5d3635):not(.x2ec18118) .xc03fa8ec {
		display: block;
	}

	.x959ba330 .xd1e781bf {
		display: block;
		grid-column: 2;
		margin: 0;
	}

	/* The artwork is generated on THIS container's colour (img-prompt.md §6
	   pins the hero slot to surface-container), so it dissolves into the stage
	   and needs no frame — only the radius that every image in the theme gets. */
	.x959ba330 .xd1e781bf img {
		display: block;
		width: 100%;
		height: auto;
		border: 0;
		border-radius: var(--sn-radius);
	}

	/* THE IMAGE WINS THE RIGHT COLUMN. When both exist the chips drop under the
	   body text as a strip rather than being thrown away. */
	.x959ba330.xcd5d3635 .xf0d42eb6 {
		grid-column: 1;
		grid-row: 2;
		margin-top: var(--sn-sp-4);
	}

	/* Rail alone: a raised card in the right column, chips as a stacked
	   checklist. It sits ON the hero surface, so it steps DOWN the ladder to
	   the recessed tone rather than up — two adjacent surface-container boxes
	   would read as one. */
	.x959ba330.x2ec18118:not(.xcd5d3635) .xf0d42eb6 {
		grid-column: 2;
		margin: 0;
		padding: var(--sn-sp-6);
		background: var(--sn-surface-2);
		border: 0;
		border-radius: var(--sn-radius-lg);
		box-shadow: none;
	}

	.x959ba330.x2ec18118:not(.xcd5d3635) .x7c192443 {
		flex-direction: column;
		align-items: stretch;
		overflow: visible;
		gap: var(--sn-sp-4);
	}

	.x959ba330.x2ec18118:not(.xcd5d3635) .x9cd1e86d {
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 0;
		font-family: var(--sn-font);
		font-size: var(--sn-fs-base);
		font-weight: 400;
		color: var(--sn-text);
		letter-spacing: 0;
		white-space: normal;
	}

	/* The checklist mark: the tick itself, in the primary, at a size that
	   reads. The previous skin replaced the glyph with a solid square because
	   the icon had nowhere legible to sit; here it does. */
	.x959ba330.x2ec18118:not(.xcd5d3635) .x9cd1e86d svg {
		box-sizing: content-box;
		width: 18px;
		height: 18px;
		padding: 0;
		margin-top: .1em;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--sn-primary);
	}
}