/*
 * Block: sn/hero — "Swiss Signal"
 *
 * The prompt's hero, translated to an affiliate money page:
 *
 *   LEFT (7 of 12 columns)   index-rule eyebrow, a huge 800 headline with at
 *                            most ONE red word, a tight soft-ink subhead, the
 *                            "Keep reading" text control, and the byline set as
 *                            the prompt's bottom trust row.
 *   RIGHT (5 of 12)          the angled CANVAS panel — #F4F4F4, the 56px line
 *                            grid, a faint red wash — bleeding 48px past the
 *                            container's right edge. Inside it: the hero image
 *                            if there is one; otherwise the trust chips as the
 *                            prompt's floating white "component card" over a
 *                            solid red block.
 *
 * The hero sits OPEN on paper — no container, no fill — closed by a hairline.
 *
 * WHAT IS NOT IN IT, AND WHY (so nobody "restores" it):
 *   - The prompt's floating prompt-cursor tag, swatch chip and "Generated ·
 *     0.8s" index. They describe an AI design tool; on a betting page they
 *     would be meaningless ornament, and this system forbids ornament that is
 *     not structural. The red block and the component card survive because
 *     they carry something (the chips).
 *   - The fade in the prompt's staggered "fade-up". The entrance here is a
 *     TRANSFORM-ONLY rise: the H1 is the LCP element and the standing rule is
 *     that nothing on the page is hidden or delayed (CLAUDE.md §7, §12
 *     2026-07-14). A 14px rise with no opacity change is visible from the
 *     first frame.
 *   - The prompt's 3rem mobile headline floor and pt-28/pb-32 padding. Both
 *     would push the first bookmaker card below the fold on every phone. The
 *     floors below were chosen with tools/fold-measure/run.sh, not by eye.
 *
 * THE PANEL IS A PSEUDO-ELEMENT OF .x5317a234, placed on the grid. That
 * is what lets it exist on EVERY desktop hero (with or without an image or
 * chips, and after the casino-cards adjacency hides the rail) with no markup
 * change — the page reads as one system instead of "the heroes that happen to
 * have an image". It is decorative and carries no content.
 *
 * THE H1 IS ONE CONTINUOUS CLAMP PER MODE and must stay that way (CLAUDE.md §8
 * B1: two clamps meeting at a breakpoint produced a 10px REVERSE step in the
 * LCP heading on the previous skin). tools/fold-measure/run.sh fails if the
 * compact H1 ever shrinks as the viewport widens.
 */

.xc578bc42 {
	--sn-hero-pad-top: var(--sn-sp-12);
	--sn-hero-pad-bottom: var(--sn-sp-12);
	--sn-hero-bleed: 48px;
	position: relative;
	background: transparent;
	border: 0;
	border-bottom: var(--sn-border-w) solid var(--sn-border);
	border-radius: 0;
	padding: var(--sn-hero-pad-top) 0 var(--sn-hero-pad-bottom);
	margin: 0 0 var(--sn-sp-12);
	box-shadow: none;
}

.x5317a234 {
	position: relative;
}

.xabb8457a {
	position: relative;
	z-index: 2;
	min-width: 0;
}

/* ---------- Eyebrow: the index rule ---------- */

/* Same object as .x2faaa70f in base.css — signal-ink label (5.38, it is
   11px text so #FF3B30 would fail) followed by a hairline capped at 120px.
   Restated here because the hero prints its own class. */
.x2972414d {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	margin: 0 0 var(--sn-sp-6);
	padding: 0;
	background: transparent;
	color: var(--sn-signal-ink);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-2xs);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-widest);
}

.x2972414d::after {
	content: '';
	flex: 1 1 auto;
	max-width: 120px;
	height: var(--sn-border-w);
	background: color-mix(in srgb, var(--sn-heading) 15%, transparent);
}

/* ---------- Headline ---------- */

/*
 * Non-compact (editorial) ramp: 40px floor, 120px ceiling (--sn-fs-hero; the
 * prompt's 7.8rem, rounded to the scale). 800, -0.045em, 0.92 leading — the
 * prompt's display class verbatim.
 */
.x2f7cc906 {
	margin: 0 0 var(--sn-sp-6);
	font-size: clamp(2.5rem, 1rem + 6vw, var(--sn-fs-hero));
	font-weight: 800;
	line-height: var(--sn-lh-display);
	letter-spacing: var(--sn-tracking-tighter);
	color: var(--sn-heading);
	text-wrap: balance;
}

/*
 * THE ONE RED WORD (field `title_accent`). #FF3B30 is 3.55:1 on paper, which
 * is a pass ONLY because this is display type (≥24px regular / 18.66px bold
 * is the large-text bar, and the smallest this headline ever renders is 32px
 * at 800). It must never be reused on body-size text.
 */
.xa5deaddf {
	color: var(--sn-signal);
}

/* ---------- Subhead ---------- */

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

.xc47c96cb {
	max-width: 44ch;
	color: var(--sn-text-soft); /* ink/70 — 7.57 */
	font-size: var(--sn-fs-lead);
	line-height: 1.55;
}

/* Both modes clamp (compact 2 lines, full 3) with the toggle below. The full
   text stays in the DOM — expandable content is indexed normally and is not
   cloaking (CLAUDE.md §12, 2026-07-14). */
.xc47c96cb {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.xc578bc42.is-expanded .xc47c96cb {
	display: block;
	overflow: visible;
}

/*
 * "Keep reading" — a small version of .xce0c9097: uppercase, 0.18em,
 * ink label over a 2px red underline that grows into a red block with a white
 * label on hover. The block is --sn-signal-ink (white on it 5.38); white on
 * #FF3B30 would be 3.55 and fail.
 */
.x4b892158 {
	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) var(--sn-sp-1);
	border: 0;
	border-radius: 0;
	background: linear-gradient(var(--sn-signal-ink), var(--sn-signal-ink)) left calc(100% - 8px) / 100% var(--sn-border-thick) no-repeat;
	color: var(--sn-heading);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	cursor: pointer;
	transition: background-size var(--sn-motion) var(--sn-ease),
	            background-position var(--sn-motion) var(--sn-ease),
	            color var(--sn-motion) var(--sn-ease);
}

.x4b892158:hover,
.x4b892158:focus {
	background-color: transparent;
	background-position: left center;
	background-size: 100% calc(100% - 12px);
	color: var(--sn-primary-dark); /* white — 5.38 on signal-ink */
}

.x4b892158 svg {
	width: 14px;
	height: 14px;
	transition: transform var(--sn-motion-fast) var(--sn-ease);
}

.xc578bc42.is-expanded .x4b892158 svg {
	transform: rotate(180deg);
}

/* ---------- Byline: the prompt's bottom trust row ---------- */

/*
 * Small ink/65 items separated by short vertical ink/15 rules, each led by a
 * small RED stroked icon (#FF3B30 as a graphic, 3.55 — 1.4.11 asks 3:1). The
 * avatar is square: nothing in this system is round.
 */
.x05f2910c {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sn-sp-2) 0;
	margin-top: var(--sn-sp-8);
	font-size: var(--sn-fs-xs);
	letter-spacing: -.005em;
	color: var(--sn-text-muted); /* 6.29 */
}

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

.x845f8ad1 + .x845f8ad1::before {
	content: '';
	flex: 0 0 auto;
	width: var(--sn-border-w);
	height: 14px;
	margin: 0 var(--sn-sp-4);
	background: color-mix(in srgb, var(--sn-heading) 15%, transparent);
}

.xff8141cc {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 0;
	object-fit: cover;
}

.x845f8ad1 svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--sn-signal);
}

.x05f2910c a {
	color: var(--sn-heading);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--sn-signal);
	text-decoration-thickness: var(--sn-border-thick);
	text-underline-offset: .2em;
}

.x05f2910c a:hover,
.x05f2910c a:focus {
	color: var(--sn-signal-ink);
}

/* ---------- CTA variant ---------- */

.x3f72122c {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sn-sp-4) var(--sn-sp-6);
	margin-top: var(--sn-sp-8);
}

.x3fd905cc {
	margin: 0;
}

/* ---------- Chips (strip form — phones, and whenever the image wins) ---------- */

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

.x5f4dc0b1 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-2) var(--sn-sp-3);
	background: var(--sn-bg);
	border: var(--sn-border-w) solid var(--sn-border-strong); /* 4.54 — a real edge */
	border-radius: 0;
	color: var(--sn-heading);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: var(--sn-lh-compact);
}

.x5f4dc0b1 svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--sn-signal);
}

.x938f4280 {
	position: relative;
	z-index: 2;
	margin: var(--sn-sp-6) 0 0;
}

/* ---------- Media (phones: a stacked, top-angled canvas block) ---------- */

.x896e7471 {
	position: relative;
	z-index: 1;
	margin: var(--sn-sp-8) 0 0;
	height: 280px;
	background: var(--sn-pat-canvas);
	clip-path: var(--sn-clip-lean-m);
	overflow: hidden;
}

.x896e7471 .xb2460fc3 {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Entrance: transform-only staggered rise ---------- */

@keyframes x143d3c5c {
	from { transform: translateY(14px); }
	to   { transform: none; }
}

.xabb8457a > * {
	animation: x143d3c5c 700ms var(--sn-ease-out) both;
}

.xabb8457a > :nth-child(2) { animation-delay: 60ms; }
.xabb8457a > :nth-child(3) { animation-delay: 120ms; }
.xabb8457a > :nth-child(4) { animation-delay: 180ms; }
.xabb8457a > :nth-child(5) { animation-delay: 240ms; }
.xabb8457a > :nth-child(n+6) { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
	.xabb8457a > * {
		animation: none;
	}

	.x4b892158,
	.x4b892158 svg {
		transition: none;
	}
}

/* ---------- Compact (money pages) ---------- */

/*
 * The compact ramp: 32px at 375 (the fold budget), 88px ceiling reached only
 * past ~1800px. At 1280 it is ~68px — the poster scale, spent where there is
 * room for it, with the bookmaker list still clearing a 900px-tall desktop.
 */
.x12f1c331 {
	--sn-hero-pad-top: var(--sn-sp-8);
	--sn-hero-pad-bottom: var(--sn-sp-8);
	margin-bottom: var(--sn-sp-8);
}

.x12f1c331 .x2f7cc906 {
	font-size: clamp(2rem, 1.1rem + 3.9vw, 5.5rem);
}

.x12f1c331 .xc47c96cb {
	font-size: var(--sn-fs-md);
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* Compact byline and chips: one row that scrolls sideways, never wraps —
   every wrapped line is a line taken from the list below. */
.x12f1c331 .x05f2910c,
.x12f1c331 .x390c2fc2 {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.x12f1c331 .x05f2910c::-webkit-scrollbar,
.x12f1c331 .x390c2fc2::-webkit-scrollbar {
	display: none;
}

.x12f1c331 .x5f4dc0b1 {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: var(--sn-fs-xs);
}

/* No second column below 900px, and the list has to clear the fold. */
.x12f1c331 .x896e7471 {
	display: none;
}

/* ---------- Phone rhythm ---------- */

/*
 * MUST STAY AFTER the compact block above: same specificity, both match, so
 * source order decides — the previous skin shipped a dead override from
 * exactly that (CLAUDE.md §12 2026-08-19).
 */
@media (max-width: 767px) {
	.x12f1c331 {
		--sn-hero-pad-top: var(--sn-sp-4);
		--sn-hero-pad-bottom: var(--sn-sp-4);
		margin-bottom: var(--sn-sp-4);
	}

	.x2972414d,
	.x12f1c331 .x2972414d {
		margin-bottom: var(--sn-sp-3);
	}

	.x12f1c331 .x2f7cc906 {
		margin-bottom: var(--sn-sp-3);
	}

	.x12f1c331 .xc47c96cb {
		font-size: var(--sn-fs-base);
	}

	.x4b892158 {
		margin-top: 0;
	}

	.x12f1c331 .x05f2910c {
		margin-top: var(--sn-sp-3);
	}

	.x12f1c331 .x938f4280 {
		margin-top: var(--sn-sp-3);
	}

	.x12f1c331 .xff8141cc {
		width: 20px;
		height: 20px;
	}
}

/* ---------- Desktop: the 12-column split and the canvas panel ---------- */

@media (min-width: 900px) {
	.xc578bc42 {
		--sn-hero-pad-top: var(--sn-sp-24);
		--sn-hero-pad-bottom: var(--sn-sp-24);
	}

	.x12f1c331 {
		--sn-hero-pad-top: var(--sn-sp-12);
		--sn-hero-pad-bottom: var(--sn-sp-12);
	}

	.x5317a234 {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: auto auto;
		column-gap: var(--sn-sp-6);
		align-items: center;
	}

	.xabb8457a {
		grid-column: 1 / span 7;
		grid-row: 1;
		padding-right: var(--sn-sp-8);
	}

	/*
	 * THE CANVAS PANEL. Fills the right five columns for the hero's full
	 * height (the negative margins cancel the section padding, so it runs
	 * edge to edge like the prompt's inset-y-0), and bleeds 48px past the
	 * container's right edge. #page's overflow-x: clip keeps the bleed from
	 * ever becoming a sideways scroll.
	 */
	.x5317a234::before {
		content: '';
		grid-column: 8 / -1;
		grid-row: 1 / -1;
		align-self: stretch;
		margin: calc(-1 * var(--sn-hero-pad-top)) calc(-1 * var(--sn-hero-bleed)) calc(-1 * var(--sn-hero-pad-bottom)) 0;
		background: var(--sn-pat-canvas);
		clip-path: var(--sn-clip-lean);
		z-index: 0;
	}

	/*
	 * THE RED BLOCK — the prompt's big solid signal rectangle with its
	 * red-tinted drop. A shape, not a label, so #FF3B30 is correct. It sits
	 * in the upper right of the panel; the component card (the chips)
	 * overlaps its lower-left corner.
	 */
	.x5317a234::after {
		content: '';
		grid-column: 8 / -1;
		grid-row: 1;
		justify-self: end;
		align-self: start;
		width: 46%;
		aspect-ratio: 4 / 3;
		margin: 6% 6% 0 0;
		background: var(--sn-signal);
		box-shadow: var(--sn-float-signal);
		z-index: 1;
		pointer-events: none;
	}

	/*
	 * THE COMPONENT CARD — the trust chips, as the prompt's floating white
	 * card: paper, hairline, the soft directional float, a header mark (red
	 * square + hairline, no text — the aside is already labelled
	 * "Highlights" for assistive tech) and the chips as a ruled checklist.
	 */
	.x938f4280 {
		grid-column: 8 / span 4;
		grid-row: 1;
		align-self: end;
		margin: 0 0 var(--sn-sp-2) 12%;
		padding: var(--sn-sp-6);
		background: var(--sn-bg);
		border: var(--sn-border-w) solid var(--sn-border);
		box-shadow: var(--sn-float);
	}

	.x938f4280::before {
		content: '';
		display: block;
		height: 8px;
		margin-bottom: var(--sn-sp-4);
		background:
			linear-gradient(var(--sn-signal), var(--sn-signal)) left center / 8px 8px no-repeat,
			linear-gradient(var(--sn-border), var(--sn-border)) 16px center / calc(100% - 16px) 1px no-repeat;
	}

	.x938f4280 .x390c2fc2,
	.x12f1c331 .x938f4280 .x390c2fc2 {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		overflow: visible;
	}

	.x938f4280 .x5f4dc0b1,
	.x12f1c331 .x938f4280 .x5f4dc0b1 {
		padding: var(--sn-sp-3) 0;
		border: 0;
		border-bottom: var(--sn-border-w) solid var(--sn-border);
		background: transparent;
		font-size: var(--sn-fs-sm);
		white-space: normal;
	}

	.x938f4280 .x5f4dc0b1:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}

	/*
	 * THE IMAGE WINS THE PANEL. It is clipped on the same angle and fills the
	 * panel edge to edge, which also covers the red block — a photograph and
	 * a red rectangle fighting for one column is two focal points. The chips
	 * then drop under the body as a strip, so nothing an editor filled in is
	 * thrown away. Shown on compact heroes too from this width up.
	 */
	.x896e7471,
	.x12f1c331 .x896e7471 {
		display: block;
		grid-column: 8 / -1;
		grid-row: 1 / -1;
		align-self: stretch;
		height: auto;
		min-height: 360px;
		margin: calc(-1 * var(--sn-hero-pad-top)) calc(-1 * var(--sn-hero-bleed)) calc(-1 * var(--sn-hero-pad-bottom)) 0;
		clip-path: var(--sn-clip-lean);
		z-index: 1;
	}

	.x9d705e22 .x5317a234::after {
		display: none;
	}

	.x9d705e22 .x938f4280 {
		grid-column: 1 / span 7;
		grid-row: 2;
		align-self: start;
		margin: var(--sn-sp-6) 0 0;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.x9d705e22 .x938f4280::before {
		display: none;
	}

	.x9d705e22 .x938f4280 .x390c2fc2 {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--sn-sp-2);
	}

	.x9d705e22 .x938f4280 .x5f4dc0b1 {
		padding: var(--sn-sp-2) var(--sn-sp-3);
		border: var(--sn-border-w) solid var(--sn-border-strong);
		background: var(--sn-bg);
	}

	.x9d705e22 .x938f4280 .x5f4dc0b1:last-child {
		padding-bottom: var(--sn-sp-2);
		border-bottom: var(--sn-border-w) solid var(--sn-border-strong);
	}

	/* A compact hero with no image and no chips still gets the panel; the
	   body needs a minimum height so the panel is a shape, not a sliver. */
	.xabb8457a {
		min-height: 240px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.xabb8457a > * {
		flex: 0 0 auto;
	}

	.xabb8457a .x4b892158 {
		align-self: flex-start;
	}
}