/*
 * entry.css — prose styling for migrated content.
 *
 * Loaded only on singular posts, archives, search and 404 (see
 * lionsgate_enqueue_assets), AFTER site.css so it can restore what the design
 * system's global reset removes.
 *
 * Why this file exists
 * --------------------
 * site.css opens with `*{margin:0;padding:0;box-sizing:border-box}`. That is
 * correct for the SPA, where every block is a hand-placed component, but it
 * leaves imported article HTML with no paragraph rhythm, no list indent and no
 * list markers. site.css also sets `a{color:inherit;text-decoration:none}`, so
 * in-article links are invisible, and sizes h1/h2/h3 for heroes
 * (clamp(2.4rem,5.4vw,4.4rem) on h1) rather than for body copy.
 *
 * Everything here is scoped to `.entry`, so none of it can leak into the
 * designed pages. Tokens come from :root in site.css — no new colours.
 *
 * site.css is GENERATED. Never hand-edit it; corrections belong here.
 *
 * @package Lionsgate
 */

/*
 * Article measure.
 *
 * One centred column carries the title, byline and body, so the article has a
 * single left edge instead of three. Media — figures, embeds, tables — breaks
 * out to the full .wrap width, which is what actually uses the space on a wide
 * screen; running text stays at a readable measure because a 1100px line is
 * not readable however much room there is.
 */
:root {
	/*
	 * One measure for the whole article, prose and components alike.
	 *
	 * This has been changed three times and is now back where it started, so
	 * the reasoning is worth recording. 52rem carries about 97 characters a
	 * line, which is longer than the 55–75 typography convention prefers, and
	 * the design's own pages set prose at 640px. Narrowing to 44rem fixed the
	 * line length and broke something that matters more: the carousels and
	 * bands then ran 1132px against a 704px column and overhung the copy by
	 * 200px a side. A page where every edge lines up reads as designed; a page
	 * with a comfortable measure and ragged component edges reads as broken.
	 * Alignment wins.
	 */
	--entry-col: 52rem;
}

.entry {
	color: var(--bone-dim);
	font-size: 1.0625rem;
	line-height: 1.75;
}

/*
 * Each direct child is centred at the reading measure; media overrides that to
 * fill the container. Constraining the children rather than .entry itself is
 * what lets media be wider than the text without any negative-margin tricks —
 * a percentage margin inside a capped .entry would only resolve against .entry.
 */
.entry > * {
	max-width: var(--entry-col);
	margin-inline: auto;
}

/*
 * Media sits in the same column as the text rather than breaking out of it.
 * An earlier version widened media to the full container; against a narrower
 * text measure that read as oversized — a four-column table of short broker
 * names and a 1024px chart both looked detached from the copy they belong to.
 * One column for everything is calmer and keeps a single left edge.
 */
.entry > figure,
.entry > .entry-table,
.entry > .wp-block-embed,
.entry > p:has(> iframe),
.entry > p:has(> img),
.entry > iframe,
.entry > img,
.entry > .entry-steps {
	width: 100%;
}

/*
 * Embeds arrive with the old site's cached oEmbed dimensions baked in as
 * width/height attributes — the Nancy Guthrie video ships as width="500" — so
 * they render at a fraction of the column. Attributes lose to these rules.
 */
.entry iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius);
}

.entry p:has(> iframe) {
	margin-top: 2em;
	margin-bottom: 2em;
}

/*
 * The seven-step recovery process — see lionsgate_replace_process_blocks().
 *
 * The live page runs this as a JetElements carousel: numbered discs on a rule,
 * cards below, three visible at a time with arrows. That widget did not
 * migrate. Rather than invent a look, this borrows the one the design system
 * already uses for the same idea on /process/ — a circular brass node carrying
 * the step number, a card beside it, a rule connecting them.
 *
 * It runs vertically, where /process/ runs across. Seven sentence-length steps
 * do not fit a 7-column row inside an 832px measure, and the live page only
 * gets away with a row because it is a carousel showing three. Down the page
 * every step is readable at once and the count stops mattering.
 *
 * The .rmap classes are deliberately not reused: .rmap-track is fixed at
 * repeat(5,1fr) and .rmap-step starts at opacity:0, revealed by a .live class
 * that /process/ hardcodes. Borrowing them would mean inheriting a five-column
 * grid and an invisible default — the exact shape of defect #1.
 *
 * The selector is `.entry ol.entry-steps`, not `.entry-steps`: `.entry ol`
 * (0,1,1) outranks a lone class (0,1,0), so `list-style: decimal` from the list
 * rules won and the browser marker rendered alongside the counter — every step
 * showed its number twice.
 */
.entry ol.entry-steps {
	list-style: none;
	counter-reset: lg-step;
	padding-left: 0;
	display: grid;
	gap: 0;
}

.entry ol.entry-steps > li {
	counter-increment: lg-step;
	position: relative;
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: start;
	gap: 18px;
	padding: 0 0 18px 0;
	margin-top: 0;
	background: none;
	border: 0;
}

.entry ol.entry-steps > li:last-child {
	padding-bottom: 0;
}

/* The node: the same brass disc /process/ puts its step numbers in. */
.entry ol.entry-steps > li::before {
	content: counter(lg-step);
	position: relative;
	z-index: 1;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--brass);
	color: #fff;
	border: 2px solid #fff;
	box-shadow: 0 6px 18px -8px rgba(29, 78, 216, .45);
	font-family: 'Inter Tight', 'Inter', sans-serif;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/*
 * The rule between nodes. Drawn from each step to the next rather than as one
 * line behind the list, so it stops at the last node instead of running past it.
 */
.entry ol.entry-steps > li:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 16px;
	top: 34px;
	bottom: 0;
	width: 2px;
	background: var(--line);
}

.entry ol.entry-steps > li > * {
	margin-top: 0;
}

/* The card. */
.entry ol.entry-steps > li p,
.entry ol.entry-steps > li {
	color: var(--bone-dim);
}

.entry ol.entry-steps > li::marker {
	content: none;
}

@media (max-width: 640px) {
	.entry ol.entry-steps > li {
		grid-template-columns: 28px 1fr;
		gap: 14px;
	}
	.entry ol.entry-steps > li::before {
		width: 28px;
		height: 28px;
		font-size: .72rem;
	}
	.entry ol.entry-steps > li:not(:last-child)::after {
		left: 13px;
		top: 28px;
	}
}


/*
 * Restores the vertical rhythm the global reset removes.
 *
 * .entry-prose extends it to prose that has been moved into a component — the
 * text column of a two-column band, for one. Both base rules here are scoped to
 * direct children so that media can break the measure, which means a paragraph
 * lifted into a band would otherwise lose its spacing entirely and sit flush
 * against the heading above it.
 */
.entry > * + *,
.entry .entry-prose > * + * {
	margin-top: 1.15em;
}

/* ---- headings ------------------------------------------------------- */

/*
 * site.css sizes h1–h3 for page heroes. In running copy those are far too
 * large, and an imported h1 would compete with the page title, so the whole
 * scale steps down one level.
 */
.entry h2,
.entry h3,
.entry h4,
.entry h5 {
	color: var(--bone);
	font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.22;
	margin-top: 2em;
	margin-bottom: -0.35em; /* offset against the owl rule below */
	text-wrap: balance;
}

.entry h2 {
	font-size: clamp(1.55rem, 2.6vw, 1.95rem);
	letter-spacing: -0.018em;
}

.entry h3 {
	font-size: clamp(1.25rem, 2vw, 1.45rem);
	letter-spacing: -0.012em;
}

.entry h4 {
	font-size: 1.125rem;
	letter-spacing: -0.008em;
}

.entry h5 {
	font-size: 1rem;
}

/* An imported h1 is demoted — the template already renders the real one. */
.entry h1 {
	font-size: clamp(1.55rem, 2.6vw, 1.95rem);
	letter-spacing: -0.018em;
	color: var(--bone);
	line-height: 1.22;
	margin-top: 2em;
	margin-bottom: -0.35em;
}

.entry > :first-child {
	margin-top: 0;
}

/* ---- links ---------------------------------------------------------- */

.entry a {
	color: var(--brass);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(29, 78, 216, 0.4);
}

.entry a:hover {
	text-decoration-color: var(--brass);
}

.entry a:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- lists ---------------------------------------------------------- */

.entry ul,
.entry ol {
	padding-left: 1.4em;
}

.entry ul {
	list-style: disc;
}

.entry ol {
	list-style: decimal;
}

.entry li + li {
	margin-top: 0.45em;
}

.entry li::marker {
	color: var(--brass);
}

.entry li > ul,
.entry li > ol {
	margin-top: 0.45em;
}

/* ---- media ---------------------------------------------------------- */

.entry img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.entry figure {
	margin-top: 2em;
	margin-bottom: 2em;
}

.entry figure img {
	display: block;
}

.entry figcaption {
	font-size: 0.85rem;
	color: var(--slate);
	margin-top: 10px;
	line-height: 1.5;
}

/* ---- tables --------------------------------------------------------- */

/*
 * 826 <tr> elements across the migrated content, so tables are not an edge
 * case. lionsgate_wrap_tables() puts each one in .entry-table so it can scroll
 * on its own instead of forcing the page sideways.
 */
.entry-table {
	overflow-x: auto;
	margin-top: 2em;
	margin-bottom: 2em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--vault);
}

.entry table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.95rem;
}

.entry th,
.entry td {
	padding: 11px 16px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.entry thead th {
	background: var(--vault-2);
	color: var(--bone);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.entry tbody tr:last-child td {
	border-bottom: 0;
}

/* ---- everything else ------------------------------------------------ */

.entry blockquote {
	border-left: 3px solid var(--brass);
	padding: 4px 0 4px 22px;
	color: var(--bone);
	font-size: 1.1rem;
	margin-top: 2em;
	margin-bottom: 2em;
}

.entry blockquote p + p {
	margin-top: 0.8em;
}

.entry strong,
.entry b {
	color: var(--bone);
	font-weight: 600;
}

.entry hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin-top: 2.5em;
	margin-bottom: 2.5em;
}

.entry code {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.875em;
	background: var(--vault-2);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 1px 5px;
}

.entry pre {
	background: var(--vault-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px;
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: 1.6;
}

.entry pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
}

/*
 * The old theme's CTA buttons arrive as <a role="button"> with no href — 70 of
 * them across the content. lionsgate_fix_dead_ctas() gives them a destination;
 * this makes them look like the design's buttons rather than bare links.
 */
.entry a[role="button"] {
	display: inline-block;
	text-decoration: none;
	background: var(--brass);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 13px 24px;
	border-radius: var(--radius);
	margin-top: 0.5em;
}

.entry a[role="button"]:hover {
	background: var(--signal);
}

/* =====================================================================
 * Layout for the article and index templates.
 *
 * Separate from the prose rules above: these style the chrome the
 * templates emit, not the imported markup inside .entry.
 * ================================================================== */

/*
 * site.css sizes h1 for page heroes at up to 4.4rem, which suits a five-word
 * marketing headline but not a 90-character article title. This steps it down
 * while keeping the same family and tracking.
 */
.entry-title {
	margin-top: 24px;
	font-size: clamp(2rem, 4vw, 3.1rem);
}

/*
 * The hero shares the body's column. Narrowing .wrap itself (rather than each
 * child) is what keeps the inline-block .chip aligned with the title — margin
 * auto cannot centre an inline-block. .wrap carries 24px of side padding, so
 * the inner content lands at exactly --entry-col. The hero's background still
 * spans the full viewport because .hero-page is the outer element.
 */
.hero-entry .wrap {
	max-width: calc(var(--entry-col) + 48px);
}

.entry-section .entry-figure,
.entry-section .entry-terms,
.entry-section .entry-pages {
	margin-inline: auto;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--slate);
}

.entry-meta-sep {
	color: var(--line);
}

.entry-section {
	padding: 64px 0 96px;
}

.entry-figure {
	margin-bottom: 40px;
	max-width: var(--entry-col);
}

.entry-figure img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	border: 1px solid var(--line);
}

/* ---- terms ---------------------------------------------------------- */

.entry-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
	max-width: var(--entry-col);
}

.entry-term {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brass);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 5px 12px;
	background: var(--vault);
}

.entry-term:hover {
	border-color: var(--brass);
	background: rgba(29, 78, 216, 0.06);
}

/* ---- index grids ---------------------------------------------------- */

.entry-grid {
	margin-top: 0;
}

.entry-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.entry-card-media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--vault-2);
	border-bottom: 1px solid var(--line);
}

.entry-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * .card carries 32px of padding; the media strip has to sit flush to the card
 * edge, so the padding moves onto the text block instead.
 */
.entry-card > :not(.entry-card-media) {
	padding-left: 28px;
	padding-right: 28px;
}

.entry-card > .n {
	padding-top: 26px;
}

.entry-card-title {
	font-size: 1.2rem;
	margin-top: 10px;
	line-height: 1.28;
}

/*
 * Card titles are headings, not links in prose.
 *
 * `.entry a` sets brass with an underline, which is right inside a paragraph
 * and wrong on a card: every guide title rendered as blue underlined text.
 * Same specificity (0,1,1), so this has to come after it in the file.
 */
.entry .entry-card-title a {
	color: var(--bone);
	text-decoration: none;
}

.entry .entry-card-title a:hover {
	color: var(--brass);
	text-decoration: none;
}

.entry-card-excerpt {
	color: var(--bone-dim);
	font-size: 0.95rem;
	line-height: 1.62;
	margin-top: 12px;
	flex: 1 1 auto;
}

.entry-card-foot {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 22px;
	padding-top: 16px;
	padding-bottom: 26px;
	border-top: 1px solid var(--line);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--slate);
}

/* ---- related, pagination, misc -------------------------------------- */

.entry-related {
	padding: 0 0 96px;
}

.entry-related .grid3 {
	margin-top: 28px;
}

.entry-children ul {
	list-style: none;
	margin-top: 20px;
	display: grid;
	gap: 10px;
}

.entry-children a {
	color: var(--brass);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-pagination {
	margin-top: 56px;
}

.entry-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.entry-pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	text-align: center;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--vault);
	font-size: 0.9rem;
	color: var(--bone-dim);
}

.entry-pagination .page-numbers:hover {
	border-color: var(--brass);
	color: var(--brass);
}

.entry-pagination .page-numbers.current {
	background: var(--brass);
	border-color: var(--brass);
	color: #fff;
	font-weight: 600;
}

.entry-pagination .page-numbers.dots {
	border: 0;
	background: none;
	min-width: 0;
	padding: 9px 4px;
}

.entry-empty {
	color: var(--slate);
	font-size: 1.05rem;
}

.entry-pages {
	margin-top: 32px;
	font-size: 0.9rem;
	color: var(--slate);
}

/* ---- 404 search ----------------------------------------------------- */

.entry-search {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
	max-width: 560px;
}

.entry-search input[type="search"] {
	flex: 1 1 240px;
	min-width: 0;
	font: inherit;
	font-size: 0.98rem;
	padding: 13px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--vault);
	color: var(--bone);
}

.entry-search input[type="search"]:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 1px;
}

@media (max-width: 820px) {
	.entry-section {
		padding: 44px 0 64px;
	}

	.entry-related {
		padding-bottom: 64px;
	}

	.entry-search input[type="search"],
	.entry-search .btn {
		width: 100%;
	}
}

/* ---- 404 route cards ------------------------------------------------
 *
 * These deliberately do NOT use .entry-card. That class zeroes the .card
 * padding and reintroduces it through .n (top) and .entry-card-foot (bottom),
 * which archive cards always have and these do not — reusing it left the text
 * flush against the card edges.
 */

.route-grid {
	margin-top: 26px;
}

.route-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 28px 24px;
	position: relative;
	transition: border-color .15s ease, transform .15s ease;
}

.route-card h3 {
	font-size: 1.15rem;
	line-height: 1.3;
	padding-right: 28px;
}

.route-card p {
	color: var(--bone-dim);
	font-size: 0.94rem;
	line-height: 1.55;
}

.route-go {
	position: absolute;
	top: 26px;
	right: 26px;
	color: var(--brass);
	font-size: 1.05rem;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .15s ease, transform .15s ease;
}

.route-card:hover,
.route-card:focus-visible {
	border-color: var(--brass);
}

.route-card:hover .route-go,
.route-card:focus-visible .route-go {
	opacity: 1;
	transform: none;
}

.route-card:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.route-card,
	.route-go {
		transition: none;
	}
}

/* ---- watchlist table filter ----------------------------------------
 *
 * Replaces the old site's JetSmartFilters box. Rendered hidden by PHP and
 * revealed by assets/js/entry.js, so no dead control appears without JS.
 */

.entry-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 2em;
	max-width: var(--entry-col);
}

.entry-filter[hidden] {
	display: none;
}

.entry-filter input[type="search"] {
	flex: 1 1 260px;
	min-width: 0;
	font: inherit;
	font-size: 1rem;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--vault);
	color: var(--bone);
}

.entry-filter input[type="search"]::placeholder {
	color: var(--slate);
}

.entry-filter input[type="search"]:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 1px;
	border-color: var(--brass);
}

.entry-filter-clear {
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	padding: 11px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--vault);
	color: var(--bone-dim);
}

.entry-filter-clear:hover {
	border-color: var(--brass);
	color: var(--brass);
}

.entry-filter-clear[hidden] {
	display: none;
}

.entry-filter-status {
	flex: 1 0 100%;
	margin: 0;
	font-size: 0.9rem;
	color: var(--slate);
	min-height: 1.4em;
}

.entry-filter-status.is-empty {
	color: var(--bone-dim);
}

.entry td.is-match {
	background: rgba(29, 78, 216, .08);
	color: var(--bone);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--brass);
}

/* ---- link to the canonical process page -----------------------------
 *
 * Replaces the legacy seven-step block on 38 migrated pages. Styled as a
 * quiet inline callout rather than a button: it is a pointer to further
 * reading, not the page's call to action, which is still the assessment.
 */

.entry-process-link {
	margin-top: 1.6em;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--brass);
	border-radius: var(--radius);
	background: var(--vault);
}

.entry-process-link a {
	color: var(--brass);
	font-weight: 600;
	text-decoration: none;
}

.entry-process-link a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- migrated component: brand marquee ------------------------------
 *
 * "Cases we helped our clients recover from" — 12 client logos on 32 pages.
 * These ride the homepage's own .marquee component rather than a new one, so
 * they scroll the way the old site's carousel did and inherit its edge mask,
 * hover-to-pause and reduced-motion handling for free.
 *
 * Only the logo sizing belongs here; the motion is site.css's.
 */

.entry > .entry-logos {
	/*
	 * Same measure as the prose. It used to run the full 1132px container while
	 * the text sat at 832, so the strip overhung the copy by 150px on each side
	 * and read as a misplaced element rather than part of the page.
	 */
	margin-block: 1.8em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--vault);
	padding: 14px 0;
}

.entry-logos .marquee-track {
	align-items: center;
	gap: 56px;
}

.entry-logos figure,
.entry-logos-loop {
	margin: 0;
	display: contents;
}

.entry-logos img {
	display: block;
	/*
	 * The live strip runs these at 150px tall. 26px was far too small to read
	 * as the client logos they are — at that size they were texture, not
	 * evidence. 44px keeps them legible without letting a logo strip dominate
	 * a content page.
	 */
	height: 44px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
	/*
	 * Shown in their own colours, as the live site does. Desaturating them was
	 * a house-style choice that cost the one thing the strip is there for —
	 * these are recognisable brands and the recognition is the point.
	 */
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.entry-logos .marquee-track { animation: none; }
}

@media (max-width: 640px) {
	.entry-logos .marquee-track { gap: 34px; }
	.entry-logos img { height: 32px; }
}

/* ---- illustrations sharing a block --------------------------------
 *
 * 79 paragraphs across 32 items hold two or more images. wpautop wraps the run
 * in one <p>, and inline images sit flush against each other with no gap — two
 * unrelated illustrations reading as one tall picture.
 *
 * Scoped to a block holding more than one: a single image in a paragraph is
 * already handled by the prose rules, and forcing display:block on every
 * inline image would break any that genuinely sit in a sentence.
 */

.entry p > img + img {
	margin-top: 1.15em;
}

.entry p > img:not(:only-child) {
	display: block;
	margin-inline: auto;
}

/* ---- statistics block ------------------------------------------------
 *
 * The "Lost & Recovered" figures, rebuilt as the design's .stat cards — see
 * lionsgate_rebuild_stat_block(). .stat and .grid3-4 come from site.css and
 * style.css; only the unit line under the label is specific to this use, since
 * the live block names a unit ("BILLION USD") separately from the metric.
 */

/*
 * The stat grid keeps the reading measure, like every other block. Breaking it
 * out put its cards 150px wider than the heading that introduces them.
 */
.entry > .entry-stats {
	margin-block: 2.4em;
	gap: 16px;
}

.entry .entry-stats .stat {
	margin: 0;
	padding: 26px 24px;
}

.entry .entry-stats .stat-unit {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: .62rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--slate);
	opacity: .8;
	margin-top: 4px;
}

/* ---- CTA buttons ----------------------------------------------------
 *
 * .btn carries color:#FFFFFF from site.css, but `.entry a` (0,1,1) outranks
 * `.btn` (0,1,0), so without this the button renders brass-on-brass — dark
 * blue text on a blue field, effectively invisible. This is defect #10 in
 * CLAUDE.md; it has now regressed once, from a bulk CSS edit that removed the
 * block, so tools/test-css-contract.php asserts these selectors exist.
 *
 * The size matches the header's own button rather than site.css's default,
 * which is sized for hero use and stands too tall in running copy.
 */

.entry a.btn {
	color: #fff;
	text-decoration: none;
	font-size: 0.7rem;
	padding: 12px 20px;
	align-self: flex-start;
}

.entry a.btn:hover {
	color: #fff;
	text-decoration: none;
}

/* site.css wraps the label in a span for the shine effect. */
.entry a.btn span {
	color: #fff;
}

/* ---- migrated component: FAQ accordion ------------------------------
 *
 * 182 Elementor toggle items across 20 pages. The widget's markup migrated but
 * its script and stylesheet did not, so every question was rendering either as
 * a pair of full-column Font Awesome carets or as a paragraph that looked
 * exactly like the answer below it.
 *
 * <details> does the work natively — keyboard operable, and find-in-page opens
 * a matching panel on its own. The marker is drawn with a CSS chevron rather
 * than the original SVG so there is no icon to orphan a second time.
 */

.entry .entry-faq {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--vault);
	margin-top: 10px;
}

/* Collapse the gap between stacked items so a run reads as one list. */
.entry .entry-faq + .entry-faq {
	margin-top: -1px;
}

.entry .entry-faq[open] {
	background: var(--vault);
	border-color: rgba(29, 78, 216, .28);
}

.entry .entry-faq > summary {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 15px 18px;
	cursor: pointer;
	font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--bone);
	list-style: none;
	transition: color .15s ease;
}

/* Safari draws its own triangle unless both of these are suppressed. */
.entry .entry-faq > summary::-webkit-details-marker { display: none; }
.entry .entry-faq > summary::marker { content: ''; }

.entry .entry-faq > summary:hover { color: var(--brass); }

.entry .entry-faq > summary:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: -2px;
	border-radius: var(--radius);
}

/*
 * The marker: two borders on a rotated square. Drawn rather than dropped in as
 * an icon so it cannot go missing the way the original carets did, and so it
 * inherits currentColor on hover.
 */
.entry .entry-faq > summary::after {
	content: '';
	flex: none;
	width: 8px;
	height: 8px;
	margin: 4px 3px 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	/*
	 * Rotating about the centre keeps the glyph's optical position fixed; the
	 * small translate compensates for the fact that a chevron's visual weight
	 * sits below its box when it points down and above it when it points up.
	 */
	transform: translateY(-2px) rotate(45deg);
	transform-origin: center;
	opacity: .5;
	transition: transform .18s ease, opacity .15s ease;
}

.entry .entry-faq[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
	opacity: 1;
}

.entry .entry-faq[open] > summary { color: var(--brass); }

.entry .entry-faq-body {
	padding: 0 18px 4px;
	border-top: 1px solid var(--line);
	margin-top: -1px;
}

/* The panel's first block would otherwise sit tight against the divider. */
.entry .entry-faq-body > *:first-child { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
	.entry .entry-faq > summary,
	.entry .entry-faq > summary::after { transition: none; }
}

@media (max-width: 640px) {
	.entry .entry-faq > summary { padding: 13px 14px; font-size: .95rem; }
	.entry .entry-faq-body { padding: 0 14px 2px; }
}

/* ---- safety net: no orphaned icon may size itself --------------------
 *
 * Elementor icon widgets left inline <svg> elements behind with a viewBox but
 * no width, which makes them fill whatever column they land in — this is what
 * put 320x512 carets and 1000x1000 crosses down the middle of /qa/ and
 * /scam-prevention/. The accordion pass consumes the carets; this catches
 * anything else of the same kind, now and in any content imported later.
 */
.entry svg:not([width]):not([class]) {
	width: 1.15em;
	height: 1.15em;
	vertical-align: -.15em;
	fill: currentColor;
}

/*
 * The same defect arrives as an <img> too, and the rule above cannot see it.
 *
 * An SVG file with no intrinsic width has none to fall back on, so an <img>
 * pointing at one stretches to whatever contains it — circle-exclamation, a
 * 150x150 marker, was rendering 832px square on 54 blocks. The four genuine
 * SVG illustrations in this corpus all declare width="100", so keying on the
 * missing attribute separates icon from illustration exactly.
 */
.entry img[src$=".svg"]:not([width]) {
	width: 1.3em;
	height: 1.3em;
	vertical-align: -.2em;
	display: inline-block;
}

/* ---- migrated component: testimonial carousel -----------------------
 *
 * The reviews ride the homepage's .marquee and .rev-card, so only two things
 * belong here: letting the carousel out of the prose column, and putting a
 * photograph inside the avatar circle the homepage fills with initials.
 */

.entry > .entry-reviews {
	/* Shares the prose measure, for the same reason the logo strip does. */
	margin-block: 1.8em;
}

.entry .entry-reviews .marquee-track {
	align-items: stretch;
}

.entry .entry-reviews-loop {
	display: contents;
}

.entry .rev-card {
	margin: 0;
	/* The track is the flex parent; keep the card's own box out of the prose flow. */
	white-space: normal;
}

.entry .rev-card .av {
	overflow: hidden;
	padding: 0;
}

.entry .rev-card .av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	/* Overrides the .team-photo-style height:auto correction — see style.css. */
	display: block;
}

.entry .rev-card blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.entry .rev-card blockquote p {
	margin: 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--bone-dim);
	/*
	 * The reviews run from 89 to 799 characters. The track stretches every card
	 * to the tallest, so one long review was making all fourteen 630px tall and
	 * mostly empty. Clamping the quote holds the row to a readable height; the
	 * full text stays in the markup for search engines and screen readers.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	line-clamp: 7;
	overflow: hidden;
}

.entry .rev-card .who {
	font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
	.entry .entry-reviews .marquee-track { animation: none; }
}

/*
 * The guides listing shares the article's measure, like every other block.
 *
 * It used to break out to the full container to match /news/ and
 * /case-studies/, which are archives with no prose around them. Inside a page
 * that has copy above and below, a wider grid just puts a step in the edge.
 */

.entry > .entry-index {
	margin-top: 2.2em;
}

/* ---- review card: rating row ---------------------------------------- */

.entry .rev-card .rev-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.entry .rev-card .rev-head .tag {
	margin-bottom: 0;
}

.entry .rev-stars {
	display: inline-flex;
	gap: 1px;
	flex: none;
}

/* Trustpilot's own green, so the rating reads as the review score it is
 * rather than as another accent in the page's blue. */
.entry .rev-stars svg.on { fill: #00B67A; }
.entry .rev-stars svg.off { fill: rgba(15, 23, 42, .16); }

/* ---- two-column band -------------------------------------------------
 *
 * The live pages set prose against an illustration and alternate the side.
 * .grid2 is the design system's own two-column rule (1fr 1fr, 48px gap,
 * collapsing to one column under 900px), so the band borrows it rather than
 * defining a second grid, and only adds what is specific: breaking out of the
 * 52rem prose measure, and putting the picture first when the band is flipped.
 */

/*
 * Bands keep the reading measure rather than breaking out of it.
 *
 * They used to run the full 1132px container while the prose around them sat
 * at 832px centred, which put a 150px step in the left edge every time a band
 * started and stopped — the page read as two documents interleaved. Sharing the
 * measure means every outer edge on the page lines up.
 */
.entry > .entry-band {
	/*
	 * margin-block, not `margin: 2.6em 0` — the shorthand also sets the inline
	 * margins to 0, which cancels the `margin-inline: auto` that centres every
	 * child of .entry. The band kept the measure's width but sat hard against
	 * the container's left edge, 150px out from the prose.
	 */
	margin-block: 2.6em;
	/*
	 * Top-aligned, not centred. Inside the reading measure the text column is
	 * narrower than the live page's 660px, so the same copy runs taller and a
	 * centred illustration floated in the middle of it with a hole above and
	 * below. Aligned to the top it sits with the heading it belongs to.
	 */
	align-items: start;
	gap: 40px;
	/*
	 * The prose column takes the larger share, as it does on the live page
	 * (660 against 540). An even split left headings wrapping after three
	 * words inside the reading measure.
	 */
	grid-template-columns: 1.3fr 1fr;
}

.entry > .entry-band.entry-band-flip {
	grid-template-columns: 1fr 1.3fr;
}

/* The text column keeps the prose measure's rhythm but not its width. */
.entry .entry-band-text > *:first-child { margin-top: 0; }
.entry .entry-band-text > *:last-child { margin-bottom: 0; }

.entry .entry-band-media {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.entry .entry-band-media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: var(--radius);
}

/*
 * Flipped bands put the picture on the left. Source order stays text-then-
 * image so the reading order is unchanged for screen readers and on mobile,
 * where the grid collapses and the text should still come first.
 */
.entry .entry-band-flip .entry-band-text { order: 2; }
.entry .entry-band-flip .entry-band-media { order: 1; }

@media (max-width: 900px) {
	.entry .entry-band-flip .entry-band-text,
	.entry .entry-band-flip .entry-band-media { order: 0; }
	.entry > .entry-band { margin-block: 2em; }
}

/* ---- feature band ----------------------------------------------------
 *
 * The sections the live pages pulled onto a saturated blue — "How to Identify
 * Forex Scams" and its equivalents on 25 pages. Flattening lost the background
 * and they read as more prose in the middle of the page.
 *
 * The colour is the design system's --brass, not the live #4C72F1. That blue
 * fails WCAG AA even against white (4.21:1), and the live page compounded it by
 * leaving the list text at #333 for 3.0:1. --brass gives 6.7:1 with white, so
 * the section comes back without its contrast defect.
 */

/*
 * Not scoped to a direct child: the ground and padding have to survive if a
 * later pass ever nests this, which is exactly what happened once — a band
 * pulled the feature into its text column and the section silently lost its
 * background while keeping the white type meant to sit on it.
 */
/*
 * One measure for the whole page.
 *
 * This panel used to run the full container with its content inset, so the
 * colour field stood 150px wider on each side than every other block. The
 * inside lined up but the edges did not, and against the step cards below it
 * that read as an alignment error rather than a deliberate full-bleed.
 */
.entry .entry-feature {
	margin-block: 3em;
	padding: 48px clamp(24px, 4vw, 44px);
	border-radius: var(--radius);
	background: var(--brass);
	color: #fff;
}

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

/* Headings here sit on colour, so they take the ground with them. */
.entry .entry-feature h2,
.entry .entry-feature h3,
.entry .entry-feature h4,
.entry .entry-feature strong,
.entry .entry-feature b {
	color: #fff;
}

/*
 * Every heading in the panel aligns left, including its own title.
 *
 * The title used to centre inside a 24ch measure. On a panel with one heading
 * that read as a deliberate section title; on the pages that carry two — 
 * /blockchain-analyst/, /binary-options-scams/ — the first sat centred and
 * narrow above a second that ran left and full width, and two peers of the
 * same rank looked like different kinds of heading. Live left-aligns both.
 */
.entry .entry-feature h2,
.entry .entry-feature h3,
.entry .entry-feature h4 {
	text-align: left;
	max-width: none;
	margin-inline: 0;
}

.entry .entry-feature p,
.entry .entry-feature li {
	color: rgba(255, 255, 255, .88);
}

/*
 * A component that brings its own ground keeps its own colours. The process
 * link is a white card, and inheriting the band's white type made it white on
 * white — invisible, and only visible as a bug because the band was screenshot
 * rather than assumed.
 */
.entry .entry-feature .entry-process-link {
	color: var(--bone);
}

.entry .entry-feature .entry-process-link a {
	color: var(--brass);
	text-decoration: none;
}

.entry .entry-feature a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Two lists side by side, which is how the live section reads: "How to
 * Identify" beside "Common Forex Scams". One column below the same 900px
 * breakpoint the bands use, so the page has a single collapse point.
 */
.entry .entry-feature ul {
	list-style: none;
	padding: 0;
}

.entry .entry-feature ul li {
	position: relative;
	padding-left: 30px;
	margin-top: 14px;
}

/* The live marker is a mint check; drawn rather than shipped as an icon. */
.entry .entry-feature ul li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: .45em;
	width: 11px;
	height: 6px;
	border-left: 2px solid #5EECC1;
	border-bottom: 2px solid #5EECC1;
	transform: rotate(-45deg);
}

.entry .entry-feature ol {
	padding-left: 22px;
}

.entry .entry-feature ol li {
	margin-top: 14px;
}

@media (min-width: 901px) {
	.entry .entry-feature ul {
		columns: 2;
		column-gap: 48px;
	}
	.entry .entry-feature ul li {
		break-inside: avoid;
	}
}

@media (max-width: 640px) {
	.entry .entry-feature {
		padding: 32px 20px;
		margin-block: 2.2em;
	}
}

@media (max-width: 900px) {
	.entry > .entry-band { gap: 28px; }
}

/* ---- two illustrations side by side ---------------------------------
 *
 * See lionsgate_pair_adjacent_media(). Sits on the same measure as everything
 * else and collapses at the breakpoint the bands use, so the page keeps one
 * edge and one collapse point.
 */

.entry > .entry-media-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
	margin-block: 2em;
}

.entry .entry-media-pair figure {
	margin: 0;
}

.entry .entry-media-pair img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

@media (max-width: 700px) {
	.entry > .entry-media-pair {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}