/*!
 * Find My Tools (quiz + results), linodash.com
 * Loaded only on the find-software view (see functions.php).
 *
 * Same brand language as the homepage: an Ink Black hero carrying the pink
 * and coral needle texture, then a Blush White body where the questions and
 * the recommendation cards sit on white. Literal colours, no Customizer
 * variables, for the same reason as the other view sheets.
 *
 * Contrast (computed): white on the CTA pink #D62753 4.91:1; ink #09090B on
 * Blush White 18.6:1; muted #5f5a52 on white 6.8:1; light pink #FF7A9A on ink
 * 8.1:1; error red #b3261e on white 6.5:1. The selected-option state is never colour alone: the border thickens
 * and a check mark appears.
 * ================================================================== */

.ld-fs {
	--fs-ink: #09090B;
	--fs-pink: #FF2E63;
	--fs-pink-deep: #D62753;   /* white text on it: 4.91:1 */
	--fs-pink-deeper: #B82147;
	--fs-coral: #FF5757;
	--fs-blush: #FFF5F7;
	--fs-tint: #FFE3EA;
	--fs-text: #313539;
	--fs-muted: #5f5a52;
	--fs-hair: #ece4e6;
	--fs-on-dark: rgba(255, 245, 247, .76);
	--fs-body: "IBM Plex Sans", -apple-system, system-ui, sans-serif;
	--fs-radius: 16px;

	font-family: var(--fs-body);
	color: var(--fs-text);
	background: transparent;
}

/* ---- canvas: dark behind the header and hero, blush below ------------ */
.ld-view-find-software,
.ld-view-find-software #main-container {
	background: #09090B;
}
.ld-view-find-software #main-container {
	position: relative;
	isolation: isolate;
}
.ld-view-find-software #main-container::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 560px;
	z-index: 0;
	pointer-events: none;
	background-image: var(--ld-needle-tile);
	background-size: 32px 560px;
	background-repeat: repeat-x;
	background-position: center top;
	opacity: .7;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.4) 30%, transparent 70%);
	        mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.4) 30%, transparent 70%);
}
.ld-view-find-software #main-container > * { position: relative; z-index: 1; }
/* The black header pill needs an edge on the black canvas (as on the homepage). */
.ld-view-find-software #header [data-row] > .ct-container {
	box-shadow: 0 0 0 1px rgba(255, 245, 247, .14), 0 10px 30px -14px rgba(0, 0, 0, .8);
}

.ld-fs__container {
	width: 100%;
	max-width: 46rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 2rem);
}
.ld-fs__body--results .ld-fs__container,
.ld-fs__hero--results .ld-fs__container { max-width: 68rem; }

/* ---- hero ------------------------------------------------------------- */
.ld-fs__hero {
	color: var(--fs-on-dark);
	padding-block: clamp(2rem, 6vw, 4rem) clamp(2.25rem, 5vw, 3.5rem);
}
.ld-fs__exit {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 44px;
	margin-bottom: 1rem;
	color: var(--fs-on-dark);
	font-size: .9rem;
	text-decoration: none;
}
.ld-fs__exit:hover { color: #fff; text-decoration: underline; }
.ld-fs__eyebrow {
	margin: 0 0 .8rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #FF7A9A;   /* light pink, 8.1:1 on ink */
}
.ld-fs__title {
	margin: 0 0 1rem;
	color: var(--fs-blush);
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.ld-fs__lead {
	margin: 0;
	max-width: 40rem;
	font-size: clamp(1.02rem, 1.4vw, 1.15rem);
	line-height: 1.65;
	color: var(--fs-on-dark);
}

/* ---- body ------------------------------------------------------------- */
.ld-fs__body {
	background: var(--fs-blush);
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3.5rem, 8vw, 6rem);
}
.ld-fs__aside { margin: 1.75rem 0 0; text-align: center; color: var(--fs-muted); }
.ld-fs__aside a,
.ld-fs-disclosure a { color: var(--fs-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- buttons ---------------------------------------------------------- */
.ld-fs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 48px;
	padding: .75rem 1.4rem;
	border: 1.5px solid transparent;
	border-radius: 12px;
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ld-fs-btn--primary { background: var(--fs-pink-deep); color: #fff; }
.ld-fs-btn--primary:hover { background: var(--fs-pink-deeper); color: #fff; }
.ld-fs-btn--primary[disabled] { opacity: .7; cursor: progress; }
.ld-fs-btn--ink { background: var(--fs-ink); color: #fff; }
.ld-fs-btn--ink:hover { background: #2a2a2e; color: #fff; }
.ld-fs-btn--ghost { background: transparent; color: var(--fs-ink); border-color: var(--fs-ink); }
.ld-fs-btn--ghost:hover { background: var(--fs-ink); color: #fff; }
.ld-fs-btn--small { min-height: 44px; padding: .5rem 1rem; font-size: .92rem; }
.ld-fs a:focus-visible,
.ld-fs button:focus-visible,
.ld-fs [tabindex="-1"]:focus-visible {
	outline: 3px solid var(--fs-pink);
	outline-offset: 3px;
}
.ld-fs [data-ld-fs-heading]:focus { outline: none; }
.ld-fs [data-ld-fs-heading]:focus-visible { outline: 3px solid var(--fs-pink); outline-offset: 4px; border-radius: 4px; }

/* ---- quiz ------------------------------------------------------------- */
.ld-fs-quiz {
	background: #fff;
	border: 1px solid var(--fs-hair);
	border-radius: 20px;
	padding: clamp(1.25rem, 4vw, 2.25rem);
	box-shadow: 0 18px 40px -28px rgba(9, 9, 11, .35);
}
.ld-fs-quiz__errors {
	margin-bottom: 1.25rem;
	padding: 1rem 1.15rem;
	border-left: 4px solid #b3261e;
	background: #fdf0ef;
	border-radius: 8px;
	color: #5c1410;
}
.ld-fs-quiz__errors p { margin: 0 0 .4rem; }
.ld-fs-quiz__errors ul { margin: 0; padding-left: 1.1rem; }
.ld-fs-quiz__errors a { color: #5c1410; }

.ld-fs-quiz__progress { margin-bottom: 1.25rem; }
.ld-fs-quiz__count {
	margin: 0 0 .5rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--fs-muted);
}
.ld-fs-quiz__bar {
	height: 6px;
	border-radius: 999px;
	background: var(--fs-tint);
	overflow: hidden;
}
.ld-fs-quiz__bar span {
	display: block;
	height: 100%;
	width: 25%;
	background: var(--fs-pink);
	border-radius: inherit;
	transition: width .3s ease;
}

.ld-fs-q {
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
	min-width: 0;
}
.ld-fs-quiz.is-stepped .ld-fs-q { margin-bottom: 0; }
.ld-fs-q__legend {
	display: flex;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: 0;
	color: var(--fs-ink);
	font-size: clamp(1.25rem, 2.6vw, 1.55rem);
	font-weight: 700;
	line-height: 1.25;
}
.ld-fs-q__num { color: var(--fs-pink-deep); }
.ld-fs-q__options { display: grid; gap: .65rem; }
@media (min-width: 640px) {
	.ld-fs-q__options { grid-template-columns: 1fr 1fr; }
}

.ld-fs-opt {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	min-height: 56px;
	padding: .95rem 1rem;
	border: 1.5px solid var(--fs-hair);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.ld-fs-opt:hover { border-color: #c9b9bd; }
.ld-fs-opt__input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: .1rem 0 0;
	accent-color: var(--fs-pink-deep);
}
.ld-fs-opt__body { display: grid; gap: .2rem; }
.ld-fs-opt__label { color: var(--fs-ink); font-weight: 600; line-height: 1.35; }
.ld-fs-opt__desc { color: var(--fs-muted); font-size: .9rem; line-height: 1.45; }
.ld-fs-opt:has(.ld-fs-opt__input:checked) {
	border-color: var(--fs-pink-deep);
	border-width: 2.5px;
	padding: calc(.95rem - 1px) calc(1rem - 1px);
	background: var(--fs-blush);
}
.ld-fs-opt:has(.ld-fs-opt__input:focus-visible) {
	outline: 3px solid var(--fs-pink);
	outline-offset: 2px;
}
.ld-fs-q.has-error .ld-fs-opt { border-color: #e2a8a3; }
.ld-fs-q__error {
	margin: .75rem 0 0;
	color: #b3261e;   /* 6.5:1 on white */
	font-weight: 600;
	font-size: .95rem;
}

.ld-fs-quiz__nav,
.ld-fs-quiz__submit {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .75rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--fs-hair);
}
.ld-fs-quiz__nav [data-ld-fs-next],
.ld-fs-quiz__nav [data-ld-fs-submit] { margin-left: auto; }
.ld-fs-quiz__nav [hidden],
.ld-fs-quiz [hidden] { display: none !important; }
.ld-fs-quiz__submit { justify-content: flex-end; }
@media (max-width: 479px) {
	.ld-fs-quiz__nav .ld-fs-btn,
	.ld-fs-quiz__submit .ld-fs-btn { flex: 1 1 100%; }
	.ld-fs-quiz__nav [data-ld-fs-back] { order: 2; }
}

/* ---- results: disclosure + at a glance -------------------------------- */
.ld-fs-disclosure {
	margin: 0 0 1.5rem;
	padding: .85rem 1rem;
	border: 1px solid var(--fs-hair);
	border-radius: 12px;
	background: #fff;
	color: var(--fs-text);
	font-size: .92rem;
	line-height: 1.5;
}
.ld-fs-glance {
	margin: 0 0 2.25rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border-radius: var(--fs-radius);
	background: var(--fs-ink);
	color: var(--fs-on-dark);
}
.ld-fs-glance__title {
	margin: 0 0 1rem;
	color: var(--fs-blush);
	font-size: 1.15rem;
	line-height: 1.3;
}
.ld-fs-glance__list { display: grid; gap: .8rem; margin: 0; }
@media (min-width: 760px) {
	.ld-fs-glance__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
}
.ld-fs-glance__list div { min-width: 0; }
.ld-fs-glance__list dt {
	margin: 0 0 .2rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #FF7A9A;
}
.ld-fs-glance__list dd { margin: 0; line-height: 1.5; color: var(--fs-blush); }

/* ---- results: cards --------------------------------------------------- */
.ld-fs-picks__title,
.ld-fs-compare__title {
	margin: 0 0 1rem;
	color: var(--fs-ink);
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
}
.ld-fs-picks { display: grid; gap: 1.25rem; }
@media (min-width: 900px) {
	.ld-fs-picks--2,
	.ld-fs-picks--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ld-fs-picks .ld-fs-card--best { grid-column: 1 / -1; }
	.ld-fs-picks--2 .ld-fs-card--best { grid-column: auto; }
}

.ld-fs-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--fs-hair);
	border-radius: var(--fs-radius);
	background: #fff;
}
.ld-fs-card--best {
	border: 2.5px solid var(--fs-ink);
	box-shadow: 8px 8px 0 var(--fs-pink);
}
.ld-fs-card__head { display: flex; align-items: center; gap: .9rem; }
.ld-fs-card__logo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--fs-hair);
	background: #fff;
	display: grid;
	place-items: center;
}
.ld-fs-card__logo-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ld-fs-card__mark {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--fs-ink);
	color: var(--fs-blush);
	font-weight: 700;
	font-size: 1.5rem;
}
.ld-fs-card__titles { min-width: 0; }
.ld-fs-card__role {
	margin: 0 0 .15rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fs-pink-deep);   /* 4.91:1 on white, and labelled in text */
}
.ld-fs-card__compare { color: var(--fs-muted); letter-spacing: .04em; text-transform: none; font-weight: 600; }
.ld-fs-card__name {
	margin: 0;
	color: var(--fs-ink);
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	line-height: 1.2;
}
.ld-fs-card__summary { margin: 0; color: var(--fs-text); line-height: 1.6; }
.ld-fs-card__label {
	margin: 0 0 .35rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fs-ink);
}
.ld-fs-card__why p:last-child { margin: 0; line-height: 1.6; }
.ld-fs-card__why {
	padding: .9rem 1rem;
	border-radius: 12px;
	background: var(--fs-blush);
}
.ld-fs-card__procon { display: grid; gap: 1rem; }
@media (min-width: 560px) {
	.ld-fs-card--best .ld-fs-card__procon { grid-template-columns: 1fr 1fr; }
}
.ld-fs-card__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.ld-fs-card__list li { position: relative; padding-left: 1.6rem; line-height: 1.5; }
.ld-fs-card__list li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}
.ld-fs-card__list--pro li::before { content: "+"; color: #1f7a3d; }
.ld-fs-card__list--con li::before { content: "\2212"; color: #b3261e; }
.ld-fs-card__facts {
	display: grid;
	gap: .6rem;
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--fs-hair);
}
.ld-fs-card__facts div { display: grid; gap: .1rem; }
.ld-fs-card__facts dt { font-size: .8rem; font-weight: 700; color: var(--fs-ink); }
.ld-fs-card__facts dd { margin: 0; line-height: 1.5; }
.ld-fs-card__checked { margin: -.4rem 0 0; font-size: .82rem; color: var(--fs-muted); }
.ld-fs-card__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	margin-top: auto;
	padding-top: .25rem;
}
.ld-fs-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--fs-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ld-fs-link:hover { color: var(--fs-pink-deep); }
@media (max-width: 479px) {
	.ld-fs-card__ctas .ld-fs-btn { flex: 1 1 100%; }
}

/* ---- quiz: hints, checkboxes, the budget dropdown ------------------- */
.ld-fs-q__hint {
	margin: -.4rem 0 1rem;
	color: var(--fs-muted);
	font-size: .92rem;
	line-height: 1.45;
}
/* Checkboxes get a rounded-square box so they read as "pick several" next
   to the round radios, and the same thickened border when checked. */
.ld-fs-opt--multi .ld-fs-opt__input { border-radius: 5px; }
.ld-fs-opt--multi:has(.ld-fs-opt__input:checked) {
	border-color: var(--fs-pink-deep);
	border-width: 2.5px;
	padding: calc(.95rem - 1px) calc(1rem - 1px);
	background: var(--fs-blush);
}
.ld-fs-select { position: relative; max-width: 26rem; }
.ld-fs-select__input {
	-webkit-appearance: none;
	        appearance: none;
	width: 100%;
	min-height: 56px;
	padding: .8rem 3rem .8rem 1rem;
	border: 1.5px solid var(--fs-hair);
	border-radius: 14px;
	background: #fff;
	color: var(--fs-ink);
	font: inherit;
	font-size: 1rem;   /* 16px: stops iOS zooming into the field */
	font-weight: 600;
	cursor: pointer;
}
.ld-fs-select__input:hover { border-color: #c9b9bd; }
.ld-fs-select__input:focus-visible { outline: 3px solid var(--fs-pink); outline-offset: 2px; border-color: var(--fs-pink-deep); }
.ld-fs-q.has-error .ld-fs-select__input { border-color: #e2a8a3; }
.ld-fs-select__chev {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--fs-ink);
	pointer-events: none;
}

/* ---- results: read next ------------------------------------------- */
.ld-fs-related { margin-top: 2.5rem; }
.ld-fs-related__title {
	margin: 0 0 1rem;
	color: var(--fs-ink);
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
}
.ld-fs-related__list {
	display: grid;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 760px) {
	.ld-fs-related__list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
.ld-fs-related__link {
	display: grid;
	gap: .35rem;
	height: 100%;
	padding: 1rem 1.15rem;
	border: 1px solid var(--fs-hair);
	border-radius: 14px;
	background: #fff;
	color: var(--fs-ink);
	text-decoration: none;
	transition: border-color .15s ease;
}
.ld-fs-related__link:hover { border-color: var(--fs-ink); }
/* Blocksy's own a:hover colour is blue; inside the quiz links stay on brand. */
.ld-fs .ld-fs-related__link,
.ld-fs .ld-fs-related__link:hover,
.ld-fs .ld-fs-related__link:visited { color: var(--fs-ink); }
.ld-fs .ld-fs-related__link:focus-visible { outline: 3px solid var(--fs-pink); outline-offset: 2px; }
.ld-fs-related__why {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fs-pink-deep);
}
.ld-fs-related__name { font-weight: 600; line-height: 1.4; }

/* ---- results: compare + actions -------------------------------------- */
.ld-fs-compare { margin-top: 2.5rem; }
.ld-fs-compare__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--fs-hair);
	border-radius: var(--fs-radius);
	background: #fff;
}
.ld-fs-compare__list li {
	display: grid;
	gap: .2rem;
	padding: 1rem 1.15rem;
	border-top: 1px solid var(--fs-hair);
}
.ld-fs-compare__list li:first-child { border-top: 0; }
@media (min-width: 760px) {
	.ld-fs-compare__list li { grid-template-columns: 12rem 14rem 1fr; align-items: baseline; gap: 1rem; }
}
.ld-fs-compare__list strong { color: var(--fs-ink); }
.ld-fs-compare__role { color: var(--fs-pink-deep); font-weight: 600; }
.ld-fs-compare__for { color: var(--fs-text); }

.ld-fs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 2.5rem;
}
@media (max-width: 479px) {
	.ld-fs-actions .ld-fs-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ld-fs-quiz__bar span,
	.ld-fs-btn,
	.ld-fs-opt { transition: none; }
}

/* ---- the homepage dialog ---------------------------------------------
   A native <dialog>. As a modal (opened by find-software.js) it is a panel
   over a dimmed page, full screen on phones. Opened by the server instead
   (a quiz URL with JavaScript off), it is `open` but not modal, and simply
   sits in the page as a block. The quiz and results inside are the same
   markup as the standalone page; `.ld-fs--modal` only supplies the dark
   hero band that the page view gets from its canvas. */
.ld-fs-dialog {
	padding: 0;
	border: 0;
	color: inherit;
	background: transparent;
}
.ld-fs-dialog:modal {
	width: min(calc(100% - 2rem), 60rem);
	max-width: none;
	max-height: calc(100dvh - 2rem);
	margin: auto;
	border-radius: 20px;
	overflow: auto;
	overscroll-behavior: contain;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}
.ld-fs-dialog[open]:not(:modal) {
	position: static;
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
}
.ld-fs-dialog::backdrop {
	background: rgba(9, 9, 11, .72);
	-webkit-backdrop-filter: blur(3px);
	        backdrop-filter: blur(3px);
}
html.ld-fs-locked { overflow: hidden; }   /* no page scroll behind the modal */
@media (max-width: 640px) {
	.ld-fs-dialog:modal {
		width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
}

.ld-fs--modal { background: var(--fs-blush); }
.ld-fs-dialog__bar {
	/* No label, just the close button, floating over the top right corner.
	   Sticky with zero height, so it stays in reach while the dialog scrolls
	   and takes no room from the hero beneath it. */
	position: sticky;
	top: 0;
	z-index: 3;
	height: 0;
	display: flex;
	justify-content: flex-end;
}
.ld-fs-dialog__closeform { margin: 0; padding: clamp(.6rem, 2vw, .9rem); }
.ld-fs-dialog__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 245, 247, .28);
	border-radius: 999px;
	/* Ink, not transparent: the button scrolls over the light body too. */
	background: rgba(9, 9, 11, .82);
	color: var(--fs-blush);
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
}
.ld-fs-dialog__close:hover { background: var(--fs-blush); color: var(--fs-ink); }
.ld-fs-dialog__close:focus-visible { outline: 3px solid var(--fs-pink); outline-offset: 2px; }
/* The title must never run under the floating close button. */
.ld-fs--modal .ld-fs__hero .ld-fs__container { padding-right: max(clamp(1rem, 5vw, 2rem), 4.25rem); }

.ld-fs--modal .ld-fs__hero {
	position: relative;
	isolation: isolate;
	background: var(--fs-ink);
	padding-block: clamp(1.75rem, 5vw, 3rem) clamp(1.75rem, 4vw, 2.5rem);
}
.ld-fs--modal .ld-fs__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--ld-needle-tile);
	background-size: 32px 560px;
	background-repeat: repeat-x;
	opacity: .4;
	-webkit-mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.35) 45%, transparent 80%);
	        mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.35) 45%, transparent 80%);
}
.ld-fs--modal .ld-fs__title { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.ld-fs--modal .ld-fs__title:focus { outline: none; }
/* The title only receives focus from the script (so screen readers start
   there after each step); it is not a control, so it never shows a ring. */
.ld-fs--modal .ld-fs__title:focus-visible { outline: none; }
.ld-fs--modal .ld-fs__body { padding-block: clamp(1.25rem, 4vw, 2.25rem) clamp(2rem, 5vw, 3rem); }
.ld-fs-dialog__body[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; cursor: progress; }
/* The cards' two-column layout keys off the viewport; the dialog is narrower
   than the page, so hold the best-match card full width and pair the rest. */
@media (min-width: 900px) {
	.ld-fs--modal .ld-fs-picks--2 { grid-template-columns: 1fr; }
}
/* Short screens (a phone held sideways): full screen, like a phone upright,
   instead of a short floating box with a sliver of page around it. */
@media (max-height: 500px) {
	.ld-fs-dialog:modal {
		width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
}
/* Phones: tighten the dark header so the recommendations start sooner. */
@media (max-width: 640px) {
	.ld-fs--modal .ld-fs__hero { padding-block: 1.5rem 1.5rem; }
	.ld-fs--modal .ld-fs__lead { font-size: .98rem; line-height: 1.55; }
	.ld-fs--modal .ld-fs__hero::before { opacity: .28; }
}
@media (prefers-reduced-motion: reduce) {
	.ld-fs-dialog__body[aria-busy="true"] { transition: none; }
}