/*
 * Block: sn/cta-banner
 * Conversion banner in two styles. The field values are historic: "green" is
 * the loud action band, "navy" the quiet framed panel. Both reuse the shared
 * .x5861cc7d.
 *
 * On this skin "green" is the brightest slab on the page — the full action
 * gradient, animated, with ink type on it and a dark arcade key. It and the
 * key-takeaways TERMINAL WINDOW are deliberate opposites (the bright slab and
 * the dark screen), so a guide carrying both never shows two surfaces doing
 * the same job.
 *
 * This band and the reading-progress bar are the ONLY two places the action
 * gradient survives on this skin; everywhere else the action colour is one
 * flat slime, so a visitor always recognises what is clickable.
 */

.x2563aee5 {
	/* The cut-out figure is absolutely positioned against the band, so the
	   containing block has to be the BASE class — it used to live only on
	   --green, which would have anchored the figure to the page on --navy. */
	position: relative;
	overflow: hidden;
	margin: var(--sn-sp-12) 0;
	padding: var(--sn-sp-8);
	border-radius: var(--sn-radius);
	clip-path: var(--sn-notch-path);
}

/*
 * 200%, NOT the 300% the button uses. The action gradient is six stops wide;
 * at 300% a band this size shows only its first third — a "five neon" slab
 * displaying two. At 200% roughly half the ramp is on screen at any moment
 * and the shift still has somewhere to travel. The button keeps 300% because
 * it is small and wants the sweep dramatic rather than complete.
 *
 * The travel is a BACKGROUND-POSITION shift, not the hue-rotate the brief
 * prefers for gradients: hue-rotate is a filter and would rotate the ink
 * printed on top of the band along with it. See the keyframe note in
 * base.css.
 */
.x4f4b1e36 {
	background: var(--sn-gold-grad);
	background-size: 200% 100%;
	border: var(--sn-rule-heavy) solid var(--sn-bg);
	color: var(--sn-bg);
	filter:
		drop-shadow(0 0 22px color-mix(in srgb, var(--sn-acc-1) 45%, transparent))
		drop-shadow(0 0 60px color-mix(in srgb, var(--sn-acc-2) 28%, transparent));
	animation: xe407fd02 8s ease infinite;
}

/* INK SCANLINES. The page's own scanlines are black on a near-black screen
   and would not register on a slab this bright, so the band paints its own
   at a weight that reads against neon — the same inversion every light
   surface in this theme does. */
.x4f4b1e36::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(5, 16, 20, 0) 0 2px, rgba(5, 16, 20, .16) 3px 4px);
}

/* ::after on this block is the "888" stroke wordmark (base.css). Its STROKE
   goes ink here — overriding `color` would fill it instead, because the base
   rule keeps the fill transparent and paints the outline. */
.x4f4b1e36::after {
	-webkit-text-stroke-color: var(--sn-bg);
	opacity: .22;
}

.x4f4b1e36 .xe712f7f0 {
	position: relative;
	z-index: 1;
}

/*
 * The key on the bright band is DARK — a slime key on a slime-through-amber
 * gradient is invisible. It is the one inverted arcade key in the theme.
 * Sets the ink PROPERTY, not `color`: a plain colour is undone by
 * .x5861cc7d:visited once the visitor has followed the link, which painted the
 * label the same shade as the button and made it disappear (base.css).
 */
.x4f4b1e36 .x5861cc7d {
	--sn-btn-ink: var(--sn-acc-1);
	background: var(--sn-bg);
	border-color: var(--sn-bg);
	box-shadow:
		0 var(--sn-arcade-drop) 0 rgba(5, 16, 20, .55),
		inset 0 0 20px color-mix(in srgb, var(--sn-acc-1) 14%, transparent);
}

.x4f4b1e36 .x5861cc7d:hover,
.x4f4b1e36 .x5861cc7d:focus {
	--sn-btn-ink: var(--sn-acc-1);
	background: var(--sn-bg);
	box-shadow:
		0 var(--sn-arcade-drop) 0 rgba(5, 16, 20, .55),
		inset 0 0 28px color-mix(in srgb, var(--sn-acc-1) 26%, transparent),
		0 0 26px color-mix(in srgb, var(--sn-acc-1) 55%, transparent);
}

.x4f4b1e36 .x5861cc7d:active {
	transform: translateY(var(--sn-arcade-drop));
	box-shadow: inset 0 0 28px color-mix(in srgb, var(--sn-acc-1) 26%, transparent);
}

.x5a4a9945 {
	background: var(--sn-pat-scanlines), var(--sn-pat-halftone), var(--sn-surface);
	border: var(--sn-rule) dashed var(--sn-acc-3);
	border-left: var(--sn-rule-heavy) solid var(--sn-acc-1);
	filter: drop-shadow(0 0 18px color-mix(in srgb, var(--sn-acc-3) 35%, transparent));
	color: var(--sn-text);
}

.xe712f7f0 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sn-sp-6);
}

.xe00fd1b4 {
	min-width: 0;
}

/* The heading is a styled <p>, deliberately NOT a heading tag: this is
   promotional furniture and it must stay out of the document outline and out
   of the ToC. It still gets the display treatment. */
.x7831ed72 {
	margin: 0 0 var(--sn-sp-3);
	font-family: var(--sn-font-display);
	/* Its OWN size, not the h2 ceiling: at full h2 size it competed with the
	   real section heading above it. */
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	font-weight: 600;
	line-height: var(--sn-lh-heading);
}

/* INK on the bright band, and NO aberration: the RGB split paints a coral and
   an azure copy of the glyph, which on a band that is already running through
   coral and azure reads as a printing fault rather than as a signal glitch.
   Anything printed on the action gradient must also be ink — mint measured
   1.42:1 on the light end of it. */
.x4f4b1e36 .x7831ed72 {
	color: var(--sn-bg);
	text-shadow: none;
}

.x5a4a9945 .x7831ed72 {
	color: var(--sn-heading);
	text-shadow: var(--sn-ts-2);
}

.x6e27777a {
	margin: 0;
}

.x4f4b1e36 .x6e27777a { color: color-mix(in srgb, var(--sn-bg) 88%, transparent); font-weight: 600; }
.x5a4a9945 .x6e27777a { color: var(--sn-text-muted); }

.x8594d276 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sn-sp-2);
	flex: 0 0 auto;
}

.x8594d276 .x5861cc7d {
	white-space: nowrap;
}

/* Compliance small print (§7) — it is on the band by law, not by taste, so it
   is 700 weight and full ink, never a faded line. */
.x460cb7c2 {
	font-size: var(--sn-fs-xs);
	font-weight: 700;
}

.x4f4b1e36 .x460cb7c2 { color: var(--sn-bg); }
.x5a4a9945 .x460cb7c2 { color: var(--sn-text-muted); }

@media (min-width: 768px) {
	.xe712f7f0 {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--sn-sp-8);
	}

	.x8594d276 {
		align-items: flex-end;
	}

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

	.x4f4b1e36 .xe712f7f0 {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--sn-sp-6);
	}

	.x4f4b1e36 .x8594d276 {
		align-items: center;
	}

	.x4f4b1e36 .xe00fd1b4 {
		max-width: 60ch;
	}
}

/* ---------- Optional cut-out (a promotional model) ---------- */
/*
 * Sits at the right end of the band, standing on its bottom edge — the
 * arrangement Thai promo banners use. HIDDEN BELOW 768px on purpose: on a
 * phone the band is already the full width of the screen and a figure would
 * either shrink to nothing or push the button below the fold.
 *
 * No frame and no radius — the image is expected to be an alpha cut-out, so
 * the glow follows the subject instead of boxing it in.
 */
.x0f8a80fa {
	display: none;
	margin: 0;
}

@media (min-width: 768px) {
	.x644d13f2 .xe712f7f0 {
		/* Leave room for the figure so long copy cannot run under it. */
		padding-right: 200px;
	}

	.x0f8a80fa {
		display: block;
		position: absolute;
		right: var(--sn-sp-6);
		bottom: 0;
		z-index: 2;
		width: 190px;
		pointer-events: none;
	}

	.x0f8a80fa img {
		display: block;
		width: 100%;
		height: auto;
		/* A dark contact glow rather than an offset slab: the subject stands
		   ON the band, so the shadow has to hug its silhouette. */
		filter: drop-shadow(0 8px 14px rgba(5, 16, 20, .55));
	}
}

@media (min-width: 1024px) {
	.x644d13f2 .xe712f7f0 {
		padding-right: 250px;
	}

	.x0f8a80fa {
		width: 240px;
	}
}

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

	.x0f8a80fa img {
		filter: none;
	}
}