/*
 * Block: sn/hero
 *
 * ELEVATED REGISTER (see the two-register note at the top of base.css). This is
 * the page's opening statement: the biggest type on the site on the left, and
 * the system's dimensional floating card on the right.
 *
 * IT IS NOT A CONTAINER, and it is not a tonal stage either. The hero sits OPEN
 * on the page ground; the thing that lifts is the MEDIA CARD beside it. That
 * split is the direction's own hero ("two-column lg:grid-cols-2 with a
 * text-first approach, perspective-[2000px] on the card"), and it is the
 * opposite of the sibling French skin, where the hero was a flat black slab
 * with the type reversed out of it.
 *
 * WHAT IS DELIBERATELY NOT HERE:
 *
 *  - NO SCROLL PARALLAX and no fade-on-scroll. The direction is full of
 *    scroll-linked movement; fading or scaling 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 `animate-pulse` ON THE FLOATING CARD. The system puts a 4s breathing
 *    animation on its decorative hero cards. Behind a headline on a YMYL page
 *    that is ambient movement with no informational purpose, and it runs for
 *    the whole visit.
 *
 *  - 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.
 */

.x670d195a {
	position: relative;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: var(--sn-sp-8) 0;
	margin: 0 0 var(--sn-sp-12);
	box-shadow: none;
}

.x81b3a20c {
	position: relative;
}

/* The soft-tinted pill badge — the same object as .x408c8236 in base.css. */
.x14435684 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	margin: 0 0 var(--sn-sp-6);
	padding: var(--sn-sp-1) var(--sn-sp-3);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-surface-tint);
	color: var(--sn-primary-hover);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: var(--sn-tracking-label);
	line-height: var(--sn-lh-compact);
}

.x14435684::before {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: var(--sn-radius-pill);
	background: var(--sn-gradient);
}

/*
 * The headline. ExtraBold 800 — the top of Plus Jakarta Sans' weight axis and
 * the system's own display weight, which is a real departure from the last
 * market (600, where the drama came from 96px scale instead). Here the drama
 * comes from weight and from the gradient span inside it; the ceiling is 61px.
 *
 * ONE EXPRESSION FOR EVERY VIEWPORT — see the long note further down about why
 * there is no mobile override.
 */
.x82e6c51e {
	margin: 0 0 var(--sn-sp-6);
	font-size: clamp(2rem, 1.249rem + 3.2vw, var(--sn-fs-4xl));
	font-weight: 800;
	line-height: var(--sn-lh-display);
	letter-spacing: var(--sn-tracking-tighter);
	text-wrap: balance;
}

/*
 * THE SPLIT HEADLINE. The direction's signature: the opening words in the
 * heading colour, the rest in the gradient. Michael gets it by wrapping words
 * in <span class="x36d2dca2"> inside the title field — the utility and
 * its forced-colors fallback live in base.css, so nothing block-specific is
 * needed here.
 */

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

/* The intro is the system's lead paragraph: one step up from body, generous
   line height, a constrained measure, and MUTED — on a light ground a
   full-strength stand-first competes with the headline directly above it. */
.xc700f9b8 {
	max-width: 54ch;
	font-size: var(--sn-fs-lead);
	line-height: 1.55;
	color: var(--sn-text-muted);
}

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

.x670d195a.is-expanded .xc700f9b8 {
	display: block;
	overflow: visible;
}

/*
 * Author byline (replaces the retired review-meta block). Small, sentence
 * case, muted — metadata, in the same register as the breadcrumbs. It is not
 * uppercased and never was: it carries proper names, and "ÉCRIT PAR JULIA
 * GRIGY" costs recognition for no gain.
 */
.x7d947e4c {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sn-sp-2) var(--sn-sp-6);
	margin-top: var(--sn-sp-8);
	padding-top: var(--sn-sp-4);
	border-top: var(--sn-border-w) solid var(--sn-border);
	font-size: var(--sn-fs-sm);
	color: var(--sn-text-muted);
}

.xaee81eaf {
	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. */
}

/* Round, like every other portrait on this skin. */
.x6855488e {
	flex: 0 0 auto;
	border-radius: var(--sn-radius-pill);
	object-fit: cover;
}

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

.x7d947e4c a {
	color: var(--sn-heading);
	font-weight: 600;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

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

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

/* Soft-tinted pills — the same object as .x5f4b1cec in base.css. On a white-ish
   ground a bordered transparent chip reads as an empty input; a tinted pill
   reads as a badge, which is what this is. */
.xa5bf6bac {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-2) var(--sn-sp-3);
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: var(--sn-radius-pill);
	box-shadow: var(--sn-shadow);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	color: var(--sn-heading);
}

.xa5bf6bac svg {
	width: 15px;
	height: 15px;
	color: var(--sn-tip);   /* 5.48:1 — a trust mark is a positive state, not an action */
}

.x31be54ee {
	margin: var(--sn-sp-8) 0 0;
}

.x31be54ee .xc56a2a00 {
	width: 100%;
}

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

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

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

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

/* ---------- Compact mode ---------- */
/*
 * Compact is the DEFAULT. It is the same open layout with a tighter vertical
 * rhythm and a smaller intro, so a casino list placed under it clears the fold.
 *
 * 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.
 */

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

.x1e598a36 .xf385c7a0 {
	padding: 0;
}

.x1e598a36 .xc700f9b8 {
	color: var(--sn-text-muted);
}

.x1e598a36 .x7d947e4c {
	gap: var(--sn-sp-2) var(--sn-sp-4);
}

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

/* Compact intro: 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). */
.x1e598a36 .xc700f9b8 {
	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) {
	.x1e598a36 .xc700f9b8 {
		font-size: var(--sn-fs-base);
	}
}

.x1e598a36.is-expanded .xc700f9b8 {
	display: block;
	overflow: visible;
}

/*
 * The "Read more" control is the system's text action: no container, indigo
 * label, sentence case, with the chevron rotating on expand. Padded to a 44px
 * touch target; no negative margin is needed because the button has no
 * horizontal padding to pull back from, so it aligns optically with the intro
 * above it by itself.
 */
.x11205fdd {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	min-height: 44px;
	margin-top: var(--sn-sp-2);
	padding: var(--sn-sp-1) 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--sn-primary);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-base);
	font-weight: 600;
	letter-spacing: var(--sn-tracking-label);
	cursor: pointer;
	transition: color var(--sn-motion-fast) var(--sn-ease);
}

.x11205fdd:hover,
.x11205fdd:focus {
	background: none;
	color: var(--sn-primary-hover);
	text-decoration: underline;
	text-underline-offset: .3em;
	text-decoration-thickness: 1px;
}

.x11205fdd svg {
	width: 15px;
	height: 15px;
	transition: transform var(--sn-motion) var(--sn-ease);
}

.x1e598a36.is-expanded .x11205fdd svg {
	transform: rotate(180deg);
}

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

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

.x1e598a36 .x7d947e4c::-webkit-scrollbar {
	display: none;
}

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

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

.x1e598a36 .x9ede4d08 {
	margin: 0;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding: var(--sn-sp-1) 0;   /* room for the chips' own shadow to draw */
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.x1e598a36 .x9ede4d08::-webkit-scrollbar {
	display: none;
}

/* Mobile / strip form: a scrolling row of small white pills. */
.x1e598a36 .xa5bf6bac {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: var(--sn-fs-sm);
}

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

/* ---------- Phone/tablet: the headline scale ---------- */
/*
 * THERE IS NO MOBILE OVERRIDE HERE, AND THAT IS THE FIX.
 *
 * Every market in this family carried a `@media (max-width: 899px)` block with
 * its own clamp for this headline, each generation inheriting the structure and
 * re-tuning the numbers. The note attached to it claimed the two clamps met at
 * the 900px split "so there is no step at any width". MEASURED IN REAL CHROME
 * on the previous skin, that was false: the mobile ramp was pinned to its
 * ceiling from about 838px while the desktop clamp evaluated to 61.8px at
 * 900px — so the headline went 72px at 899 and 61.8px at 900. A 10px DROP as
 * the viewport got WIDER, in the LCP element.
 *
 * Two clamps that must agree at a breakpoint are a standing invitation to that
 * bug: any change to either end re-opens it, and nothing in CSS enforces the
 * agreement. One clamp cannot disagree with itself, so there is exactly one
 * expression and it covers 320px to 4K. tools/fold-measure/run.sh FAILS if an
 * H1 ever shrinks as the viewport grows — it was verified to catch precisely
 * this by reintroducing the old structure.
 */

/* ---------- Phone: the money list must break the fold ---------- */
/*
 * The rule this block exists to satisfy: on a 375x667 phone the first casino
 * card must be visible on load, and nothing may be hidden, delayed or covered
 * to achieve it (§7). The display register is simply spent less lavishly on a
 * small screen — the H1 is still roughly twice the body size.
 *
 * 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.
 */
@media (max-width: 767px) {
	.x1e598a36 {
		padding: var(--sn-sp-4) 0 var(--sn-sp-3);
		margin: 0 0 var(--sn-sp-4);
	}

	.x1e598a36 .x14435684 {
		margin-bottom: var(--sn-sp-3);
	}

	.x1e598a36 .x82e6c51e {
		margin-bottom: var(--sn-sp-4);
	}

	.x11205fdd {
		margin-top: var(--sn-sp-1);
	}

	.x1e598a36 .x7d947e4c {
		margin-top: var(--sn-sp-4);
		padding-top: var(--sn-sp-3);
		font-size: var(--sn-fs-xs);
	}

	/* 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. */
	.x1e598a36 .x6855488e {
		width: 22px;
		height: 22px;
	}

	/* Tighter pills, same label size — the chips lose padding, not legibility. */
	.x1e598a36 .xa5bf6bac {
		padding: var(--sn-sp-1) var(--sn-sp-3);
	}

	.x1e598a36 .xec47cfee,
	.x1e598a36 .x1e2fcc84,
	.x1e598a36 .x9ede4d08 {
		margin-top: var(--sn-sp-4);
	}
}

/*
 * SMALLEST PHONES ONLY, AND THE ORDER OF THIS BLOCK IS LOAD-BEARING.
 *
 * It must come AFTER the max-width:767px block above, not before it. The first
 * attempt put it up beside the compact-intro rules earlier in this file, where
 * it did nothing at all: both rules are the same specificity, both media
 * queries match at 320px, and the later one wins — so the sp-3 above silently
 * overrode this sp-2 and the measurement did not move. A dead rule that looks
 * live is worse than no rule.
 */
@media (max-width: 479px) {
	.x1e598a36 .x14435684 {
		margin-bottom: var(--sn-sp-2);
	}

	.x1e598a36 .x82e6c51e {
		margin-bottom: var(--sn-sp-3);
	}
}

@media (min-width: 768px) {
	.x1e598a36 .x23d9af6c {
		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) {
	.x1e598a36 .x81b3a20c {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		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. */
	.x1e598a36:not(.xd0bf2475):not(.x7beb5505) .x81b3a20c {
		display: block;
	}

	.x1e598a36 .x31be54ee {
		display: block;
		grid-column: 2;
		margin: 0;
		/*
		 * THE ISOMETRIC HERO CARD — the direction's most distinctive single
		 * gesture: perspective on the parent, a small rotation on the child.
		 * Kept SMALL on purpose. The system specifies rotate-y-[-12deg] with
		 * rotate-x-[5deg]; at that angle a photograph of a screen reads as a
		 * mistake rather than as depth, and the far edge blurs on a 1x
		 * display. -7deg/3deg keeps the dimensional read and the artwork
		 * legible.
		 */
		perspective: 2000px;
	}

	.x1e598a36 .x31be54ee img {
		display: block;
		width: 100%;
		height: auto;
		border: 0;
		border-radius: var(--sn-radius-xl);
		box-shadow: var(--sn-shadow-lg);
		transform: rotateY(-7deg) rotateX(3deg);
		transition: transform var(--sn-motion-slow) var(--sn-ease);
	}

	/* The system's hover: the card straightens up slightly. It is on the
	   IMAGE, not on a link — there is nothing to click here, so this is a
	   pure affordance-free flourish and it is the first thing to go under a
	   motion preference. */
	.x1e598a36 .x31be54ee:hover img {
		transform: rotateY(-3deg) rotateX(1deg);
	}

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

	/* Rail alone: the system's floating card in the right column, chips as a
	   stacked checklist inside it. */
	.x1e598a36.x7beb5505:not(.xd0bf2475) .xec47cfee {
		grid-column: 2;
		margin: 0;
		padding: var(--sn-sp-6);
		background: var(--sn-surface);
		border: var(--sn-border-w) solid var(--sn-border);
		border-radius: var(--sn-radius-xl);
		box-shadow: var(--sn-shadow-md);
	}

	.x1e598a36.x7beb5505:not(.xd0bf2475) .x9ede4d08 {
		flex-direction: column;
		align-items: stretch;
		overflow: visible;
		padding: 0;
		gap: var(--sn-sp-4);
	}

	/* In checklist form the marks lose their pills and become plain lines of
	   text behind a tick — a column of eight pills reads as a tag cloud. */
	.x1e598a36.x7beb5505:not(.xd0bf2475) .xa5bf6bac {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
		font-size: var(--sn-fs-base);
		font-weight: 400;
		color: var(--sn-text);
		white-space: normal;
	}

	.x1e598a36.x7beb5505:not(.xd0bf2475) .xa5bf6bac svg {
		box-sizing: content-box;
		width: 16px;
		height: 16px;
		padding: 4px;
		margin-top: .1em;
		border: 0;
		border-radius: var(--sn-radius-pill);
		background: var(--sn-tip-tint);
		color: var(--sn-tip);
	}
}

@media (prefers-reduced-motion: reduce) {
	.x1e598a36 .x31be54ee img,
	.x1e598a36 .x31be54ee:hover img {
		transition: none;
	}
}