/* ==========================================================================
   Section styles. One block per layout in the ACF section library.
   ========================================================================== */

.lmt-section__head { max-width: var(--lmt-measure); }

/* ---- Hero --------------------------------------------------------------
   Values taken from the comp: 720px stage, 88px display, two scrims, content
   bottom-right. The gradients are what keep white type legible over the
   photograph, so they are not decoration.
   ---------------------------------------------------------------------- */

.lmt-hero { position: relative; background: var(--lmt-black); }

.lmt-hero--full {
	min-height: clamp(30rem, 78vh, 45rem);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: var(--lmt-white);
}

.lmt-hero__bg { position: absolute; inset: 0; }
.lmt-hero__bg img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* Sits exactly where the image sits, over it. The image is the poster, so
   until the video has any frames there is a photograph here, not a black
   rectangle — and if it never loads, the photograph is simply what stays. */
.lmt-hero__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: left center;
	/* No pointer events: the hero's buttons are above it and it is not a
	   thing to click. */
	pointer-events: none;
}

.lmt-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(270deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 40%, rgba(0,0,0,.05) 62%);
}
.lmt-hero__scrim--base {
	background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 40%);
}

.lmt-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--lmt-max);
	margin-inline: auto;
	padding-inline: var(--lmt-gutter);
}

.lmt-hero--full .lmt-hero__inner { padding-block: clamp(4rem, 10vw, 7.5rem) clamp(2.5rem, 5vw, 4rem); }

.lmt-hero--full .lmt-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--lmt-space-5);
	align-items: flex-end;
	text-align: right;
	/* Full width so the foot bar spans the page, as in the comp. The heading
	   and intro keep their own measures and stay right-aligned. */
	width: 100%;
}

.lmt-hero__heading { max-width: 20ch; }
.lmt-hero--full .lmt-hero__heading { max-width: 47rem; }
.lmt-hero__accent { color: var(--lmt-red); }

.lmt-hero__intro {
	font-size: clamp(1rem, 1.46vw, 1.3125rem);   /* comp: 21px */
	line-height: 1.5;
	max-width: 35rem;
	color: var(--lmt-ink-muted);
}
.lmt-hero--full .lmt-hero__intro { color: #e2e2e2; }

.lmt-hero__stats {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: var(--lmt-space-3) var(--lmt-space-6);
	font-size: 15px;
	color: var(--lmt-ink-muted);
}
.lmt-hero__stats li { display: flex; align-items: baseline; gap: 8px; }
.lmt-hero--full .lmt-hero__stats { justify-content: flex-end; color: #bbb; }
.lmt-hero__stats strong {
	font-family: var(--lmt-font-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--lmt-ink);
}
.lmt-hero--full .lmt-hero__stats strong { color: var(--lmt-white); }

.lmt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--lmt-space-4); align-items: center; }
.lmt-hero--full .lmt-hero__actions { flex-direction: row-reverse; }

.lmt-hero__foot {
	width: 100%;
	margin-top: var(--lmt-space-4);
	padding-top: var(--lmt-space-5);
	border-top: 1px solid var(--lmt-rule);
	display: flex; flex-wrap: wrap; gap: var(--lmt-space-4);
	align-items: flex-end; justify-content: space-between;
}
.lmt-hero--full .lmt-hero__foot { border-top-color: rgba(255,255,255,.25); }

.lmt-hero__note { font-size: 14px; font-weight: 600; color: var(--lmt-ink-muted); }
.lmt-hero--full .lmt-hero__note { color: var(--lmt-white); }

.lmt-hero__press { display: flex; align-items: center; gap: var(--lmt-space-4); flex-wrap: wrap; }
.lmt-hero__press-label {
	font-size: 12px; font-weight: 700;
	letter-spacing: var(--lmt-tracking-eyebrow); text-transform: uppercase;
	color: #888;
	white-space: nowrap;
}
.lmt-hero__press ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--lmt-space-5);
	filter: grayscale(1); opacity: .7;
}
.lmt-hero--full .lmt-hero__press ul { filter: grayscale(1) invert(1) brightness(2); opacity: .75; }
.lmt-hero__press img { height: 20px; width: auto; }

/* Split and plain variants keep the original two-column behaviour. */
.lmt-hero--split .lmt-hero__inner,
.lmt-hero--plain .lmt-hero__inner {
	background: var(--lmt-ground);
	color: var(--lmt-ink);
	display: grid;
	gap: var(--lmt-space-7);
	padding-block: var(--lmt-section-y);
}
/*
 * A little tighter under the header on a phone. The header already separates
 * the hero from what is above it, so the full section rhythm on top reads as a
 * gap rather than as breathing room. The foot keeps it, so the hero still
 * parts company with the section below.
 */
@media (max-width: 800px) {
	.lmt-hero--split .lmt-hero__inner,
	.lmt-hero--plain .lmt-hero__inner { padding-block: var(--lmt-space-6) var(--lmt-section-y); }
}

.lmt-hero--split, .lmt-hero--plain { background: var(--lmt-ground); }
.lmt-hero--split .lmt-hero__content,
.lmt-hero--plain .lmt-hero__content { display: flex; flex-direction: column; gap: var(--lmt-space-5); }

@media (min-width: 900px) {
	.lmt-hero--split .lmt-hero__inner { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
}

.lmt-hero__media img { width: 100%; object-fit: cover; }

@media (max-width: 800px) {
	.lmt-hero--full .lmt-hero__content { align-items: flex-start; text-align: left; }
	.lmt-hero--full .lmt-hero__stats { justify-content: flex-start; }
	.lmt-hero--full .lmt-hero__actions { flex-direction: row; }
	.lmt-hero__bg img,
	.lmt-hero__video { object-position: center; }

	/*
	 * The photograph had all but disappeared here. Two scrims were stacking —
	 * this one at 92% over the base at 55% — which left about four percent of
	 * the picture showing at the foot of the hero. One gradient now does the
	 * job: dark enough behind the words at the bottom, open enough at the top
	 * that there is visibly a photograph behind them.
	 */
	.lmt-hero__scrim {
		background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.66) 42%, rgba(0,0,0,.42) 100%);
	}
	.lmt-hero__scrim--base { background: none; }

	/*
	 * The hero's own press strip, one line. Four mastheads at 20px measure 343
	 * between them and the 24px gaps add 72, against about 335 of usable width,
	 * so they broke to a second row. Gap and height scale with the viewport, as
	 * they do on the standalone strip further down the category pages.
	 */
	.lmt-hero__press ul {
		flex-wrap: nowrap;
		gap: clamp(10px, 3.2vw, var(--lmt-space-5));
		justify-content: space-between;
		width: 100%;
	}
	.lmt-hero__press ul li { flex: 0 0 auto; }
	.lmt-hero__press img { height: clamp(11px, 3.7vw, 20px); }
}

/*
 * Stacked buttons match. Left to wrap, each took the width of its own label —
 * "Book a free appointment" at 256 beside "Not sure? Take the 2-minute quiz" at
 * 319 — which reads as two unrelated controls rather than a pair.
 */
@media (max-width: 640px) {
	/* Full width as well as equal: on a treatment page the row shrank to its
	   content, so a matched pair still sat narrower than everything above it. */
	.lmt-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
	.lmt-hero__actions > * { width: 100%; }
}

/* ---- Goal grid ---------------------------------------------------------
   Comp: three-up text cards, 32px padding, 320px minimum, hairline footer.
   ---------------------------------------------------------------------- */

.lmt-goals {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

@media (min-width: 1000px) {
	.lmt-goals { grid-template-columns: repeat(3, 1fr); }
}

.lmt-goal__link {
	display: flex; flex-direction: column; gap: 18px;
	height: 100%; min-height: 20rem;
	padding: 32px;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
	color: var(--lmt-ink);
	text-decoration: none;
	transition: border-color var(--lmt-transition), background-color var(--lmt-transition);
}
/* The card is no longer a link, so the border follows hovering the card and
   focusing either of the links inside it. */
.lmt-goal:hover .lmt-goal__link,
.lmt-goal:focus-within .lmt-goal__link { border-color: var(--lmt-black); }

.lmt-goal__media { display: block; margin: -32px -32px 0; }
.lmt-goal__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.lmt-goal__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--lmt-space-3); }

.lmt-goal__n {
	font-family: var(--lmt-font-display);
	font-size: 13px; letter-spacing: .1em; color: var(--lmt-grey-500);
}

.lmt-goal__tag {
	font-size: 11px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; padding: 6px 10px;
	background: var(--lmt-neutral-tint); color: #444;
}

.lmt-goal__name {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: 30px; line-height: 1.05; text-transform: uppercase;
	text-wrap: pretty;
}

/* The title and the price read as card content, so they take their colour from
   the card rather than announcing themselves as links until pointed at. */
.lmt-goal__name a,
.lmt-goal__price a { color: inherit; text-decoration: none; }
.lmt-goal__name a:hover,
.lmt-goal__name a:focus-visible,
.lmt-goal__price a:hover,
.lmt-goal__price a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.lmt-goal__desc { font-size: 15px; line-height: 1.5; color: var(--lmt-grey-700); flex: 1; }

/*
 * Price on its own row, the two links beneath it. Left on one line they fitted
 * or wrapped according to how long the price happened to be, so cards sitting
 * side by side had footers of different heights.
 */
.lmt-goal__foot {
	display: grid; gap: 12px;
	padding-top: 16px; border-top: 1px solid var(--lmt-rule-soft);
	font-size: 14px; font-weight: 700;
}

/* Two destinations per card: read about it, or book it. */
.lmt-goal__actions {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--lmt-space-3);
}

.lmt-goal__learn,
.lmt-goal__cta { white-space: nowrap; text-decoration: none; }

.lmt-goal__learn { color: var(--lmt-grey-700); }
.lmt-goal__cta { color: var(--lmt-red); }

.lmt-goal__learn:hover,
.lmt-goal__learn:focus-visible { color: var(--lmt-ink); text-decoration: underline; }
.lmt-goal__cta:hover,
.lmt-goal__cta:focus-visible { text-decoration: underline; }

/* The button under the tiles, centred beneath the grid. */
.lmt-goals__more { display: flex; justify-content: center; margin-top: var(--lmt-space-6); }

/* ---- Process steps -----------------------------------------------------
   Comp: 1fr 1fr split, steps as hairline rows with a 56px red index.
   ---------------------------------------------------------------------- */

.lmt-steps-layout { display: grid; gap: var(--lmt-space-7); align-items: start; }

@media (min-width: 900px) {
	.lmt-steps-layout { grid-template-columns: 1fr 1.4fr; gap: 80px; }
}

.lmt-steps__intro-inner { display: flex; flex-direction: column; gap: 14px; }
.lmt-steps__intro .lmt-display-2 { max-width: 16ch; }

/* The heading and its button follow the numbered steps down, the same way the
   proof panel follows the quotes. */
@media (min-width: 900px) {
	.lmt-steps__intro { align-self: stretch; }

	.lmt-steps__intro-inner {
		position: sticky;
		top: calc(var(--lmt-header-h) + var(--lmt-admin-bar) + 40px);
	}
}
.lmt-steps__lede {
	font-size: var(--lmt-size-md); line-height: 1.55;
	max-width: 26rem; color: var(--lmt-ink-muted);
	margin-bottom: var(--lmt-space-3);
}
.lmt-section--dark .lmt-steps__lede { color: var(--lmt-grey-400); }

.lmt-steps { list-style: none; margin: 0; padding: 0; }

.lmt-step {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: var(--lmt-space-5);
	padding: 32px 0;
	border-top: 1px solid var(--lmt-rule);
	align-items: start;
}
.lmt-step:last-child { border-bottom: 1px solid var(--lmt-rule); }
.lmt-section--dark .lmt-step { border-top-color: var(--lmt-black-line); }
.lmt-section--dark .lmt-step:last-child { border-bottom-color: var(--lmt-black-line); }

.lmt-step__n {
	font-family: var(--lmt-font-display);
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	line-height: 1;
	color: var(--lmt-red);
}

.lmt-step__body { display: flex; flex-direction: column; gap: 10px; }
.lmt-step__title {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: 26px; line-height: 1.1;
	text-transform: uppercase; letter-spacing: .01em;
}
.lmt-step__body p { font-size: 16px; line-height: 1.55; color: var(--lmt-ink-muted); }
.lmt-section--dark .lmt-step__body p { color: #bbb; }

/* ---- Checklist ---------------------------------------------------------
   Comp: 1fr 1fr. Ticked list two-up on the left at 13px rows; on the right a
   dark panel of included items with a 40px Anton price.
   ---------------------------------------------------------------------- */

.lmt-checklist { display: grid; gap: var(--lmt-space-7); align-items: start; }

@media (min-width: 900px) {
	.lmt-checklist--split { grid-template-columns: 1fr 1fr; gap: 80px; }
}

.lmt-checklist__main-inner { display: flex; flex-direction: column; gap: 14px; }

/* The heading and the ticked list follow the included panel down, the same way
   the proof panel follows the quotes. Only when there are two columns: on its
   own the list is the whole row and has nowhere to travel. */
@media (min-width: 900px) {
	.lmt-checklist--split .lmt-checklist__main { align-self: stretch; }

	.lmt-checklist--split .lmt-checklist__main-inner {
		position: sticky;
		top: calc(var(--lmt-header-h) + var(--lmt-admin-bar) + 40px);
	}
}

.lmt-checklist__heading {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: clamp(2rem, 1.1rem + 2.8vw, 3.25rem);
	line-height: 1; text-transform: uppercase;
	max-width: 16ch;
}

.lmt-checklist__lede {
	font-size: 16px; line-height: 1.55;
	color: var(--lmt-grey-700);
	margin-bottom: var(--lmt-space-3);
}

.lmt-checklist__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 0 24px;
}
@media (min-width: 620px) { .lmt-checklist__list { grid-template-columns: 1fr 1fr; } }

.lmt-checklist__list li {
	display: flex; gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid #e5e5e5;
	font-size: 16px; font-weight: 600;
}
.lmt-checklist__list li::before { content: "\2713"; color: var(--lmt-red); }

.lmt-checklist__media img { width: 100%; }

/* Included panel */
.lmt-included {
	background: var(--lmt-black);
	color: var(--lmt-white);
	padding: clamp(1.75rem, 4vw, 3rem);
}
.lmt-included__heading {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
	line-height: 1; text-transform: uppercase;
	margin-bottom: 28px;
}
/* Heading left, the product photo as a corner detail on the right. */
.lmt-included__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--lmt-space-5);
}

.lmt-included__title { min-width: 0; }

.lmt-included__shot { flex: none; width: clamp(5rem, 9vw, 7.5rem); }
.lmt-included__shot img { display: block; width: 100%; height: auto; }

.lmt-included__rows { list-style: none; margin: 0; padding: 0; }
.lmt-included__rows li {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 16px 0;
	border-top: 1px solid var(--lmt-black-line);
	font-size: 16px;
}
.lmt-included__note { color: #888; white-space: nowrap; font-size: 13px; }

.lmt-included__foot {
	border-top: 1px solid var(--lmt-black-line);
	padding-top: 28px; margin-top: 8px;
	display: flex; flex-wrap: wrap; gap: var(--lmt-space-4);
	justify-content: space-between; align-items: center;
}
.lmt-included__price {
	font-family: var(--lmt-font-display);
	font-size: 40px; line-height: 1;
}
.lmt-included__price span { font-family: var(--lmt-font-body); font-size: 18px; color: #888; }
.lmt-included__foot .lmt-included__note { margin-top: 6px; white-space: normal; }

/* ---- Benefit strip -----------------------------------------------------
   Comp: four cells divided by hairlines, 36px/32px padding, no card borders.
   ---------------------------------------------------------------------- */

.lmt-benefits {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	border-top: 1px solid var(--lmt-rule-soft);
	border-bottom: 1px solid var(--lmt-rule-soft);
}

.lmt-benefit {
	padding: 36px 32px;
	border-right: 1px solid var(--lmt-rule-soft);
	display: flex; flex-direction: column;
}
.lmt-benefit:last-child { border-right: 0; }

.lmt-benefit__n {
	font-family: var(--lmt-font-display);
	font-size: 14px; letter-spacing: .1em;
	color: var(--lmt-red);
	margin-bottom: 12px;
}
.lmt-benefit__title {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: 24px; line-height: 1.1;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.lmt-benefit p { font-size: 15px; line-height: 1.5; color: var(--lmt-grey-700); }

/* ---- Proof and testimonials -------------------------------------------
   Comp: 1fr 1fr, ticked points, grey guarantee callout, bordered quote cards.
   ---------------------------------------------------------------------- */

.lmt-proof { display: grid; gap: var(--lmt-space-7); align-items: start; }

@media (min-width: 900px) {
	.lmt-proof { grid-template-columns: 1fr 1fr; gap: 80px; }
}

.lmt-proof__left-inner { display: flex; flex-direction: column; gap: 14px; }
.lmt-proof__left .lmt-display-2 { max-width: 16ch; margin-bottom: var(--lmt-space-4); }

/*
 * The proof points follow the quotes down. Three quotes stand around twice the
 * height of what they sit beside, so the heading and the ticks used to scroll
 * away and leave the reader with quotes about nothing in particular.
 *
 * The column is stretched and the panel inside it is what travels: a sticky
 * element that is itself the whole grid area has no room to move. It stops
 * where the section does. Clear of the sticky header, and the admin bar when
 * there is one.
 */
@media (min-width: 900px) {
	.lmt-proof__left { align-self: stretch; }

	.lmt-proof__left-inner {
		position: sticky;
		top: calc(var(--lmt-header-h) + var(--lmt-admin-bar) + 40px);
	}
}

.lmt-proof__points {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 0 32px;
}
@media (min-width: 640px) { .lmt-proof__points { grid-template-columns: 1fr 1fr; } }

.lmt-proof__points li {
	display: flex; gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid #e5e5e5;
	font-size: 16px; font-weight: 600;
}
.lmt-proof__points li::before { content: "\2713"; color: var(--lmt-red); }

.lmt-guarantee {
	margin-top: 32px; padding: 24px;
	background: var(--lmt-grey-100);
	display: flex; gap: 16px; align-items: center;
}
.lmt-guarantee__value {
	font-family: var(--lmt-font-display);
	font-size: 34px; line-height: 1; color: var(--lmt-red);
	flex: none;
}
.lmt-guarantee p { font-size: 15px; font-weight: 700; line-height: 1.45; }

.lmt-proof__right { display: flex; flex-direction: column; gap: 16px; }

.lmt-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.lmt-rating__stars { color: var(--lmt-red); font-size: 20px; letter-spacing: 2px; }
.lmt-rating__label { font-size: 15px; font-weight: 600; }

.lmt-quote { margin: 0; padding: 28px; border: 1px solid var(--lmt-rule); background: var(--lmt-white); }
.lmt-quote blockquote {
	margin: 0 0 16px;
	font-size: 17px; line-height: 1.5;
	text-wrap: pretty;
}
.lmt-quote figcaption {
	display: flex; justify-content: space-between; gap: var(--lmt-space-3);
	font-size: 13px; color: #666;
}
.lmt-quote figcaption strong { color: var(--lmt-ink); }

/* ---- FAQ ---------------------------------------------------------------
   Comp: grey band, 1fr 1.4fr split, 19px questions, 24px red icon.
   ---------------------------------------------------------------------- */

.lmt-faq-layout { display: grid; gap: var(--lmt-space-7); align-items: start; }

@media (min-width: 900px) {
	.lmt-faq-layout { grid-template-columns: 1fr 1.4fr; gap: 80px; }
}

.lmt-faq__intro-inner { display: flex; flex-direction: column; gap: 14px; }
.lmt-faq__intro .lmt-display-2 { max-width: 14ch; }

/* The heading and the "still have questions" link follow the accordion down,
   the same way the proof panel follows the quotes. */
@media (min-width: 900px) {
	.lmt-faq__intro { align-self: stretch; }

	.lmt-faq__intro-inner {
		position: sticky;
		top: calc(var(--lmt-header-h) + var(--lmt-admin-bar) + 40px);
	}
}
.lmt-faq__lede { font-size: 16px; line-height: 1.5; color: var(--lmt-grey-700); }

.lmt-faq { border-bottom: 1px solid #d9d9d9; }
.lmt-faq__item { border-top: 1px solid #d9d9d9; }

.lmt-faq__q {
	display: flex; justify-content: space-between; align-items: center;
	gap: 24px; width: 100%;
	padding: 24px 0;
	font-size: 19px; font-weight: 600;
	cursor: pointer; list-style: none;
}
.lmt-faq__q::-webkit-details-marker { display: none; }

.lmt-faq__icon { font-size: 24px; color: var(--lmt-red); flex-shrink: 0; line-height: 1; }
.lmt-faq__icon::before { content: "+"; }
.lmt-faq__item[open] .lmt-faq__icon::before { content: "\2212"; }

.lmt-faq__a {
	padding-bottom: 24px;
	font-size: 16px; line-height: 1.6; color: #444;
	max-width: 40rem;
}
.lmt-faq__a p { margin: 0; }
.lmt-faq__a p + p { margin-top: var(--lmt-space-3); }

/* ---- CTA band ----------------------------------------------------------
   Comp: centred, 72px headline, single red button.
   ---------------------------------------------------------------------- */

.lmt-cta__inner {
	display: flex; flex-direction: column; align-items: center;
	text-align: center; gap: var(--lmt-space-4);
}

.lmt-cta__heading {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: clamp(2.5rem, 1rem + 5vw, 4.5rem);
	line-height: .95; text-transform: uppercase;
	text-wrap: balance;
	max-width: 18ch;
}

.lmt-cta__intro {
	font-size: 18px; line-height: 1.5;
	color: var(--lmt-grey-700);
	max-width: 30rem;
	margin-bottom: var(--lmt-space-3);
}
.lmt-section--dark .lmt-cta__intro { color: var(--lmt-grey-400); }

.lmt-cta__actions { display: flex; flex-wrap: wrap; gap: var(--lmt-space-3); justify-content: center; }

/* ---- Comparison table -------------------------------------------------- */

.lmt-table-scroll {
	overflow-x: auto;
	border: 1px solid var(--lmt-rule);
	/* Flex and grid children default to min-width:auto, which refuses to shrink
	   below the content and pushes the page into a horizontal scroll. This is
	   what keeps a wide table scrolling inside its own box instead. */
	min-width: 0;
	max-width: 100%;
}

.lmt-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 34rem;
	font-variant-numeric: tabular-nums;
}

.lmt-table th,
.lmt-table td {
	text-align: left;
	padding: var(--lmt-space-4) var(--lmt-space-5);
	border-bottom: 1px solid var(--lmt-rule-soft);
	font-size: var(--lmt-size-sm);
}

.lmt-table thead th {
	font-size: var(--lmt-size-xs);
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-label);
	text-transform: uppercase;
	color: var(--lmt-ink-muted);
	background: var(--lmt-ground-alt);
	border-bottom: 1px solid var(--lmt-rule);
}

.lmt-table tbody th { font-weight: 600; }
.lmt-table tbody tr:last-child th,
.lmt-table tbody tr:last-child td { border-bottom: 0; }


/* ---- Stats bar --------------------------------------------------------- */

.lmt-stats {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: var(--lmt-space-6) var(--lmt-space-8);
}
.lmt-stat { display: flex; flex-direction: column; gap: 2px; }
.lmt-stat__value {
	font-family: var(--lmt-font-display); text-transform: uppercase;
	font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1;
}
.lmt-stat__label { font-size: var(--lmt-size-sm); color: var(--lmt-ink-muted); }
.lmt-stats__note {
	margin-top: var(--lmt-space-5); padding-top: var(--lmt-space-4);
	border-top: 1px solid var(--lmt-rule);
	font-size: var(--lmt-size-sm); color: var(--lmt-ink-muted);
}

/* ---- Press logos ------------------------------------------------------- */

.lmt-press { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lmt-space-5) var(--lmt-space-7); }
.lmt-press__label {
	font-size: var(--lmt-size-xs); font-weight: 700;
	letter-spacing: var(--lmt-tracking-eyebrow); text-transform: uppercase;
	color: var(--lmt-grey-500); white-space: nowrap;
}
.lmt-press__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--lmt-space-7);
	filter: grayscale(1); opacity: .7;
}
.lmt-press__list img { height: 22px; width: auto; }

/*
 * One line on a phone. Four mastheads measure 377px between them and the 48px
 * gaps add another 144 — against about 335 of usable width, so they dropped to
 * a second row and the strip stopped reading as one row of press.
 *
 * Both the gap and the logo height scale with the viewport instead of being
 * fixed, so the row fits from 320 up without ever wrapping, and the logos keep
 * their proportions and their shared baseline.
 */
@media (max-width: 800px) {
	.lmt-press__list {
		flex-wrap: nowrap;
		gap: clamp(10px, 3.2vw, 3rem);
		justify-content: space-between;
	}
	.lmt-press__list li { flex: 0 0 auto; }
	.lmt-press__list img { height: clamp(12px, 4vw, 22px); }
}

/* ---- Quiz --------------------------------------------------------------
   Comp: full-bleed two columns. Question panel left at 72/80/80/56, grey
   sidebar right at 520px with a bordered left edge. The five-step list is the
   progress indicator — there is no progress bar.
   ---------------------------------------------------------------------- */

.lmt-quiz { display: grid; align-items: stretch; }

@media (min-width: 1000px) {
	.lmt-quiz { grid-template-columns: minmax(0, 1fr) 520px; }
}

.lmt-quiz__panel {
	display: flex; flex-direction: column;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem) var(--lmt-gutter);
}

.lmt-quiz__form { display: flex; flex-direction: column; flex: 1; }

.lmt-quiz__q { border: 0; margin: 0; padding: 0; min-inline-size: 0; }

.lmt-quiz__legend { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.lmt-quiz__title {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: clamp(2rem, 1.1rem + 3.1vw, 3.5rem);
	line-height: 1; text-transform: uppercase;
	max-width: 20ch; text-wrap: pretty;
}
.lmt-quiz__hint { font-size: 17px; line-height: 1.5; color: var(--lmt-grey-700); max-width: 35rem; }

.lmt-quiz__options { display: grid; gap: 12px; max-width: 47.5rem; }
@media (min-width: 700px) { .lmt-quiz__options { grid-template-columns: 1fr 1fr; } }

.lmt-quiz__option {
	display: flex; align-items: center; gap: 16px;
	padding: 20px 22px;
	border: 1px solid var(--lmt-grey-400);
	background: var(--lmt-white);
	font-size: 17px; font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color var(--lmt-transition), background-color var(--lmt-transition), color var(--lmt-transition);
}
.lmt-quiz__option:hover { border-color: var(--lmt-black); }

.lmt-quiz__option input {
	position: absolute; opacity: 0;
	width: 1px; height: 1px; margin: 0;
	pointer-events: none;
}

.lmt-quiz__box {
	width: 22px; height: 22px;
	border: 1px solid #bbb;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; color: var(--lmt-white);
	flex-shrink: 0;
	transition: background-color var(--lmt-transition), border-color var(--lmt-transition);
}

.lmt-quiz__option:has(input:checked) {
	background: var(--lmt-black);
	border-color: var(--lmt-black);
	color: var(--lmt-white);
}
.lmt-quiz__option:has(input:checked) .lmt-quiz__box {
	background: var(--lmt-red); border-color: var(--lmt-white);
}
.lmt-quiz__option:has(input:checked) .lmt-quiz__box::after { content: "\2713"; }
.lmt-quiz__option:has(input:focus-visible) { outline: 2px solid var(--lmt-red); outline-offset: 2px; }

.lmt-quiz__nav {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: auto; padding-top: 40px; gap: var(--lmt-space-4);
}

.lmt-quiz__back {
	background: none; border: 0; padding: 0;
	font-size: 15px; font-weight: 700;
	color: var(--lmt-ink-muted); cursor: pointer;
}
.lmt-quiz__back:hover { color: var(--lmt-ink); }

.lmt-quiz__next {
	background: var(--lmt-black); color: var(--lmt-white);
	border: 0; padding: 18px 32px;
	font-size: 16px; font-weight: 700;
	cursor: pointer; margin-left: auto;
	transition: background-color var(--lmt-transition);
}
.lmt-quiz__next:hover:not(:disabled) { background: var(--lmt-red); }
.lmt-quiz__next:disabled { background: var(--lmt-grey-400); cursor: not-allowed; }

.lmt-quiz__error { margin-top: var(--lmt-space-4); color: var(--lmt-red-dark); font-weight: 600; font-size: 15px; }

/* ---- Sidebar ---- */

.lmt-quiz__aside {
	background: var(--lmt-grey-100);
	border-left: 1px solid var(--lmt-rule-soft);
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
	display: flex; flex-direction: column; gap: 32px;
}

.lmt-quiz__why { font-size: 17px; line-height: 1.55; color: #333; margin-top: 16px; }

.lmt-quiz__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lmt-quiz__steps li:last-child { border-bottom: 1px solid var(--lmt-rule); }

.lmt-quiz__step {
	display: flex; gap: 14px; align-items: center;
	padding: 14px 0;
	border-top: 1px solid var(--lmt-rule);
	font-size: 15px;
}

.lmt-quiz__step-n {
	width: 24px; height: 24px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--lmt-font-display); font-size: 12px;
	background: transparent; color: var(--lmt-grey-500);
	border: 1px solid var(--lmt-rule);
}

.lmt-quiz__step-name { font-weight: 600; color: var(--lmt-grey-500); flex: 1; }
.lmt-quiz__step-answer { font-size: 13px; color: #888; text-align: right; max-width: 12.5rem; }

.lmt-quiz__step.is-current .lmt-quiz__step-n,
.lmt-quiz__step.is-done .lmt-quiz__step-n {
	background: var(--lmt-red); color: var(--lmt-white); border-color: var(--lmt-red);
}
.lmt-quiz__step.is-current .lmt-quiz__step-name,
.lmt-quiz__step.is-done .lmt-quiz__step-name { color: var(--lmt-ink); }

.lmt-quiz__free {
	padding: 24px;
	background: var(--lmt-white);
	border: 1px solid var(--lmt-rule);
	display: flex; gap: 14px; align-items: center;
	font-size: 14px; line-height: 1.45;
}
.lmt-quiz__free-value {
	font-family: var(--lmt-font-display);
	font-size: 30px; line-height: 1; color: var(--lmt-red);
	flex-shrink: 0;
}

/* ---- Result ---- */

.lmt-quiz__result { display: flex; flex-direction: column; gap: var(--lmt-space-4); }
.lmt-quiz__signals {
	border-left: 3px solid var(--lmt-red);
	padding-left: var(--lmt-space-4);
	display: flex; flex-direction: column; gap: var(--lmt-space-2);
}
.lmt-quiz__signals-title {
	font-size: 12px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--lmt-ink-muted);
}
.lmt-quiz__signals ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.lmt-quiz__price { font-weight: 700; font-size: 17px; }

/* The second match, when the answers carried one. Set quieter than the primary
   on purpose — it is a thing to raise on the consult, not a rival answer. */
.lmt-quiz__also {
	border-top: 1px solid var(--lmt-rule);
	padding-top: var(--lmt-space-4);
	display: flex; flex-direction: column; gap: var(--lmt-space-3);
}
.lmt-quiz__also-title {
	font-size: 12px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--lmt-ink-muted);
}
.lmt-quiz__also-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lmt-space-3); }
.lmt-quiz__also-item { display: grid; gap: 4px; }
.lmt-quiz__also-link { font-size: 17px; font-weight: 700; text-decoration: none; }
.lmt-quiz__also-link:hover, .lmt-quiz__also-link:focus-visible { text-decoration: underline; }
.lmt-quiz__also-price { font-size: 14px; color: var(--lmt-ink-muted); }
.lmt-quiz__also-why { font-size: 15px; }
.lmt-quiz__also-note { font-size: 14px; color: var(--lmt-ink-muted); }

.lmt-quiz__actions { display: flex; flex-wrap: wrap; gap: var(--lmt-space-3); }

.lmt-quiz__sent { margin-top: var(--lmt-space-4); font-size: 15px; color: var(--lmt-ink-muted); }

/* The details step: two columns of fields where there is room, with the call
   time on its own row so the select is not half the width of the panel. */
.lmt-quiz__fields { display: grid; gap: var(--lmt-space-3); }
@media (min-width: 640px) {
	.lmt-quiz__fields { grid-template-columns: 1fr 1fr; }
	.lmt-field--wide { grid-column: 1 / -1; }
}

.lmt-quiz__details .lmt-field { margin: 0; }
.lmt-quiz__consent {
	margin-top: var(--lmt-space-3);
	font-size: 14px; line-height: 1.5;
	color: var(--lmt-ink-muted);
}

/* ---- Guide (eBook) -----------------------------------------------------
   Comp: dark stage with an offset cover, chapters two-up with a red index.
   ---------------------------------------------------------------------- */

.lmt-guide-hero { background: var(--lmt-white); color: var(--lmt-ink); }
/* Comp: white copy column on the left, a dark rail bled to the right edge and
   running the full height, holding the cover and the gate. */
.lmt-guide-hero__inner { display: grid; }

@media (min-width: 1000px) {
	.lmt-guide-hero__inner {
		grid-template-columns: minmax(0, 1fr) clamp(28rem, 47vw, 42.5rem);
		align-items: stretch;
		/* Fills the first screen, but capped near the comp's 829px so a very
		   tall window does not stretch it into a field of empty space. */
		min-height: min(calc(100dvh - var(--lmt-header-h) - var(--lmt-admin-bar)), 52rem);
	}
}

.lmt-guide-hero__copy {
	display: flex;
	flex-direction: column;
	gap: var(--lmt-space-4);
	justify-content: center;
	padding: var(--lmt-space-7) var(--lmt-gutter);
	min-width: 0;
}

.lmt-guide-hero__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--lmt-space-2); }
.lmt-guide-hero__cats .lmt-chip { text-decoration: none; }
.lmt-guide-hero__cats .lmt-chip.is-active {
	background: var(--lmt-black);
	border-color: var(--lmt-black);
	color: var(--lmt-white);
}

/* Comp: 80px, a step above the 56px section headings. */
.lmt-guide-hero__title {
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem);   /* comp: 80px */
	line-height: 0.95;
	text-transform: uppercase;
}

.lmt-guide-hero__lede {
	font-size: var(--lmt-size-md);
	line-height: 1.55;
	color: #555;
	max-width: var(--lmt-measure);
}

/* Two columns of ticked lines, as the comp lists what is inside. */
.lmt-guide-hero__points {
	list-style: none;
	margin: var(--lmt-space-2) 0 0;
	padding: 0;
	display: grid;
	gap: 10px 32px;
	border-top: 1px solid var(--lmt-rule);
	padding-top: var(--lmt-space-4);
}

@media (min-width: 700px) { .lmt-guide-hero__points { grid-template-columns: 1fr 1fr; } }

.lmt-guide-hero__points li {
	position: relative;
	padding-left: 26px;
	font-size: var(--lmt-size-sm);
	line-height: 1.45;
}
.lmt-guide-hero__points li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--lmt-red);
	font-weight: 700;
}

.lmt-guide-hero__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: var(--lmt-space-3);
	padding-top: var(--lmt-space-4);
	border-top: 1px solid var(--lmt-rule);
	font-size: 13px;
	color: var(--lmt-ink-muted);
}

/* ---- The gate ---- */

.lmt-guide-gate {
	background: var(--lmt-black);
	color: var(--lmt-white);
	padding: 88px 56px;
	min-width: 0;
}

.lmt-guide-gate__inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/*
 * The form follows the reader down the guide. The panel itself stays put so the
 * black runs the whole column; only the form travels, and it stops where the
 * panel ends. Clear of the sticky header and the admin bar.
 */
@media (min-width: 1000px) {
	.lmt-guide-gate__inner {
		position: sticky;
		top: calc(var(--lmt-header-h) + var(--lmt-admin-bar) + 40px);
	}
}

/*
 * The left column runs the length of the page now, so its sections lay out
 * inside the column rather than against the page: the shell would otherwise
 * re-apply the page measure and centre them within their own half.
 */
.lmt-guidepage__main { min-width: 0; }
.lmt-guidepage__main .lmt-shell { max-width: none; margin-inline: 0; }
.lmt-guidepage__main > .lmt-guide-hero__copy { justify-content: flex-start; }

@media (max-width: 999px) {
	.lmt-guide-gate { padding: var(--lmt-space-7) var(--lmt-gutter); }
}

.lmt-guide-gate__cover { display: flex; justify-content: center; }
.lmt-guide-gate__cover img {
	width: auto;
	max-width: 238px;
	max-height: 308px;
	box-shadow: 16px 16px 0 var(--lmt-red);
}

.lmt-guide-gate__title {
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.1;
	text-transform: uppercase;
}

.lmt-guide-gate__sub { font-size: 15px; line-height: 1.5; color: #bbb; margin-top: -12px; }

/* The fields sit on the dark panel, so they invert. */
.lmt-guide-gate .lmt-field__label { color: #bbb; }
.lmt-guide-gate .lmt-input {
	background: transparent;
	border-color: #333;
	color: var(--lmt-white);
}
.lmt-guide-gate .lmt-input::placeholder { color: #777; }
.lmt-guide-gate .lmt-input:hover { border-color: #555; }
.lmt-guide-gate .lmt-input:focus { border-color: var(--lmt-white); }
.lmt-guide-gate .lmt-form__success { color: var(--lmt-white); }

.lmt-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; }
@media (min-width: 800px) { .lmt-chapters { grid-template-columns: 1fr 1fr; } }

.lmt-chapter {
	display: grid; grid-template-columns: 3rem 1fr; gap: 16px;
	padding: 22px 0;
	border-top: 1px solid var(--lmt-rule);
	align-items: start;
}
.lmt-chapter__n { font-family: var(--lmt-font-display); font-size: 24px; line-height: 1.2; color: var(--lmt-red); }
.lmt-chapter h3 {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: 22px; line-height: 1.05; text-transform: uppercase;
	margin-bottom: 6px;
}
.lmt-chapter p { font-size: 15px; line-height: 1.5; color: var(--lmt-ink-muted); }

/* ---- Lab panels --------------------------------------------------------
   Comp: four equal cards, 16px gap, 40/28 header with a 140px glyph
   watermark at 12% and a 52px price, bordered marker rows, full-width button.
   ---------------------------------------------------------------------- */

.lmt-panels {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 16px; align-items: stretch;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

@media (min-width: 1100px) {
	.lmt-panels { grid-template-columns: repeat(4, 1fr); }
}

.lmt-panel {
	position: relative;
	display: flex; flex-direction: column;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
	color: var(--lmt-ink);
}

.lmt-panel--featured {
	background: var(--lmt-black);
	border-color: var(--lmt-black);
	color: var(--lmt-white);
}

.lmt-panel__ribbon {
	position: absolute; top: -1px; left: -1px; right: -1px;
	background: var(--lmt-red); color: var(--lmt-white);
	font-size: 11px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; text-align: center;
	padding: 8px 24px;
}

.lmt-panel__head {
	position: relative; overflow: hidden;
	padding: 40px 28px 24px;
	border-bottom: 1px solid var(--lmt-rule);
}
.lmt-panel--featured .lmt-panel__head { border-bottom-color: var(--lmt-black-line); }
.lmt-panel--featured .lmt-panel__head { padding-top: 52px; }

.lmt-panel__watermark {
	position: absolute; right: 16px; top: 28px;
	font-family: var(--lmt-font-body);
	font-size: 140px; line-height: 1; font-weight: 700;
	color: var(--lmt-red); opacity: .12;
	pointer-events: none;
}

.lmt-panel__tag {
	position: relative;
	display: flex; align-items: center; gap: 8px;
	font-size: 12px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lmt-ink-muted);
	margin-bottom: 12px;
}
.lmt-panel--featured .lmt-panel__tag { color: var(--lmt-grey-500); }
.lmt-panel__glyph { color: var(--lmt-red); font-size: 18px; line-height: 1; }

.lmt-panel__name {
	position: relative;
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: 32px; line-height: 1; text-transform: uppercase;
	margin: 0 0 16px;
}

.lmt-panel__price {
	position: relative;
	font-family: var(--lmt-font-display);
	font-size: 52px; line-height: 1;
}

.lmt-panel__price-note {
	position: relative;
	font-size: 13px; margin-top: 8px;
	color: var(--lmt-ink-muted);
}
.lmt-panel--featured .lmt-panel__price-note { color: var(--lmt-grey-500); }

.lmt-panel__labs {
	padding: 24px 28px; flex: 1;
	display: flex; flex-direction: column; gap: 4px;
}
.lmt-panel__labs-title {
	font-size: 11px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--lmt-ink-muted);
	margin-bottom: 8px;
}
.lmt-panel--featured .lmt-panel__labs-title { color: var(--lmt-grey-500); }

.lmt-panel__labs ul { list-style: none; margin: 0; padding: 0; }
.lmt-panel__labs li {
	display: flex; gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--lmt-rule-soft);
	font-size: 14px; font-weight: 500;
}
.lmt-panel--featured .lmt-panel__labs li { border-bottom-color: var(--lmt-black-line); }
.lmt-panel__labs li.is-base { font-weight: 600; }

.lmt-panel__foot {
	padding: 0 28px 28px;
	display: flex; flex-direction: column; gap: 12px;
}
.lmt-panel__included {
	display: flex; gap: 10px;
	font-size: 13px; line-height: 1.45;
	color: var(--lmt-ink-muted);
}
.lmt-panel--featured .lmt-panel__included { color: var(--lmt-grey-400); }
.lmt-panel__included span { color: var(--lmt-red); }

.lmt-panel__cta {
	display: block; text-align: center;
	padding: 16px; font-size: 15px; font-weight: 700;
	text-decoration: none;
	background: var(--lmt-black); color: var(--lmt-white);
	border: 1px solid var(--lmt-black);
	transition: background-color var(--lmt-transition);
}
.lmt-panel__cta:hover { background: var(--lmt-black-raised); }
.lmt-panel--featured .lmt-panel__cta {
	background: var(--lmt-red); border-color: var(--lmt-red);
}
.lmt-panel--featured .lmt-panel__cta:hover { background: var(--lmt-red-dark); }

.lmt-panels__note {
	margin: 28px 0 0;
	font-size: 14px; line-height: 1.5;
	color: var(--lmt-grey-600);
	max-width: 45rem;
}

/* ---- Journal -----------------------------------------------------------
   Comp: filter row with search, 1.3fr/1 featured with the image left,
   three-up cards with the category badged over a 4:3 image.
   ---------------------------------------------------------------------- */

.lmt-journal__lede { font-size: 18px; line-height: 1.5; color: var(--lmt-grey-700); max-width: 35rem; }

.lmt-filters {
	display: flex; justify-content: space-between; align-items: center;
	gap: 24px; flex-wrap: wrap;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--lmt-rule-soft);
}

.lmt-filters__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: 8px; flex-wrap: wrap;
}

.lmt-filter {
	display: inline-block;
	padding: 10px 16px;
	border: 1px solid var(--lmt-rule);
	font-size: 14px; font-weight: 700;
	white-space: nowrap; text-decoration: none;
	transition: border-color var(--lmt-transition), background-color var(--lmt-transition), color var(--lmt-transition);
}
.lmt-filter:hover { border-color: var(--lmt-black); }
.lmt-filter.is-current { background: var(--lmt-black); border-color: var(--lmt-black); color: var(--lmt-white); }

.lmt-search {
	display: flex; align-items: center; gap: 10px;
	border: 1px solid var(--lmt-grey-400);
	padding: 0 16px; height: 42px;
	width: min(300px, 100%); flex-shrink: 0;
}
.lmt-search__icon { color: #888; font-size: 15px; }
.lmt-search input {
	border: 0; padding: 0; font: inherit; font-size: 14px;
	flex: 1; min-width: 0; background: transparent;
}
.lmt-search input:focus { outline: none; }
.lmt-search:focus-within { border-color: var(--lmt-black); }

/* Featured */
.lmt-feature {
	display: grid;
	border-bottom: 1px solid var(--lmt-rule-soft);
	color: var(--lmt-ink);
	text-decoration: none;
}

@media (min-width: 900px) {
	.lmt-feature { grid-template-columns: 1.3fr 1fr; min-height: 32.5rem; }
}

.lmt-feature__media { position: relative; overflow: hidden; background: #111; min-height: 15rem; }
.lmt-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }

.lmt-feature__body {
	padding: clamp(1.75rem, 4vw, 3.5rem);
	display: flex; flex-direction: column; justify-content: center; gap: 20px;
}

.lmt-feature__tags {
	display: flex; gap: 12px;
	font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.lmt-feature__flag { color: var(--lmt-red); }
.lmt-feature__cat { color: #888; }

.lmt-feature__title {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
	line-height: 1; text-transform: uppercase; text-wrap: pretty;
}
.lmt-feature__excerpt { font-size: 17px; line-height: 1.55; color: var(--lmt-grey-700); }
.lmt-feature__more { font-size: 15px; font-weight: 700; margin-top: 8px; }
.lmt-feature__more span { color: var(--lmt-red); }

/* Byline row */
.lmt-post-meta {
	display: flex; flex-wrap: wrap; gap: 12px;
	font-size: 13px; color: #777; align-items: center;
}
.lmt-post-meta__author { font-weight: 600; color: var(--lmt-ink); }

/* Card grid */
.lmt-posts {
	display: grid; gap: 32px 24px;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
@media (min-width: 1000px) { .lmt-posts { grid-template-columns: repeat(3, 1fr); } }

.lmt-post {
	display: flex; flex-direction: column; gap: 16px;
	color: var(--lmt-ink); text-decoration: none;
}

.lmt-post__media {
	position: relative; overflow: hidden;
	aspect-ratio: 4 / 3; background: var(--lmt-grey-100);
	display: block;
}
.lmt-post__media img { width: 100%; height: 100%; object-fit: cover; }

.lmt-post__cat {
	position: absolute; left: 16px; top: 16px;
	font-size: 11px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 10px;
	background: var(--lmt-white); color: var(--lmt-ink);
}

.lmt-post__title {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: 26px; line-height: 1.05;
	text-transform: uppercase; text-wrap: pretty;
}
.lmt-post:hover .lmt-post__title { color: var(--lmt-red); }

.lmt-post__excerpt { font-size: 15px; line-height: 1.5; color: var(--lmt-grey-700); }

/* Newsletter band */
.lmt-newsletter { display: grid; gap: var(--lmt-space-6); align-items: center; }
@media (min-width: 900px) { .lmt-newsletter { grid-template-columns: 1fr 1fr; gap: 64px; } }
.lmt-newsletter .lmt-subscribe { max-width: none; }

/* Pagination */
.nav-links { display: flex; flex-wrap: wrap; gap: var(--lmt-space-2); justify-content: center; margin-top: 64px; }
.nav-links .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 44px; height: 44px; padding-inline: 12px;
	border: 1px solid var(--lmt-rule);
	font-size: 15px; font-weight: 700; text-decoration: none;
}
.nav-links .page-numbers.current { background: var(--lmt-black); color: var(--lmt-white); border-color: var(--lmt-black); }
.nav-links .page-numbers:hover:not(.current) { border-color: var(--lmt-black); }

/* Article */
.lmt-article__head { max-width: 48rem; }
.lmt-article__media { margin-block: var(--lmt-space-6); }
.lmt-article__media img { width: 100%; }

.lmt-byline {
	display: flex; flex-wrap: wrap; gap: 6px var(--lmt-space-4);
	align-items: center;
	padding-top: var(--lmt-space-4);
	border-top: 1px solid var(--lmt-rule);
	font-size: 14px; color: #777;
}
.lmt-byline__author { font-weight: 600; color: var(--lmt-ink); }
.lmt-byline__reviewed { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--lmt-ok); }
.lmt-byline__reviewed::before { content: "\2713"; font-weight: 700; }

.lmt-disclaimer {
	margin-top: var(--lmt-space-6);
	padding: var(--lmt-space-4) var(--lmt-space-5);
	border-left: 3px solid var(--lmt-grey-400);
	background: var(--lmt-ground-alt);
	font-size: 14px; color: var(--lmt-ink-muted);
	max-width: var(--lmt-measure);
}

.lmt-journal__head { display: flex; flex-wrap: wrap; gap: var(--lmt-space-3); align-items: baseline; justify-content: space-between; }
.lmt-journal__all { font-size: 15px; font-weight: 700; text-decoration: none; }
.lmt-journal__all:hover { color: var(--lmt-red); }


/* Share row — comp: hairline above, small bordered pills. */
.lmt-share {
	margin-top: 24px; padding-top: 24px;
	border-top: 1px solid var(--lmt-rule-soft);
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	font-size: 13px; font-weight: 600;
}
.lmt-share__label { color: var(--lmt-ink-muted); }
.lmt-share__link {
	border: 1px solid var(--lmt-grey-400);
	background: none;
	padding: 8px 12px;
	font: inherit;
	text-decoration: none;
	color: var(--lmt-ink);
	cursor: pointer;
	transition: border-color var(--lmt-transition);
}
.lmt-share__link:hover { border-color: var(--lmt-black); }

/* Hero breadcrumb — small trail above the heading. */
.lmt-hero__crumbs {
	display: flex; flex-wrap: wrap; gap: 8px;
	font-size: 13px; color: var(--lmt-ink-muted);
}
.lmt-hero--full .lmt-hero__crumbs { color: #bbb; justify-content: flex-end; }
.lmt-hero__crumbs a { color: inherit; text-decoration: none; }
.lmt-hero__crumbs a:hover { color: var(--lmt-ink); }
.lmt-hero--full .lmt-hero__crumbs a:hover { color: var(--lmt-white); }
.lmt-hero__crumbs .is-current { color: var(--lmt-ink); font-weight: 600; }
.lmt-hero--full .lmt-hero__crumbs .is-current { color: var(--lmt-white); }

/* Rating inside a dark hero foot. */
.lmt-hero--full .lmt-rating__label { color: #bbb; }

/* ==========================================================================
   Restored blocks
   These were lost when earlier edits spliced the file between markers. Kept
   together at the end so a future splice cannot silently take them again.
   ========================================================================== */

/* ---- Promo row ---------------------------------------------------------
   Comp: 1fr 1fr, 20px gap. Dark card 48px padding with a 170px offset cover;
   light card ends in a full-width black button.
   ---------------------------------------------------------------------- */

.lmt-promos { display: grid; gap: 20px; }
@media (min-width: 900px) {
	.lmt-promos { grid-template-columns: 1fr 1fr; }

	/*
	 * One card left standing — a treatment with no guide written yet. It keeps
	 * the width it would have had as half of a pair and sits in the middle of
	 * the row, rather than hugging the left edge with a hole beside it.
	 */
	.lmt-promos--single {
		grid-template-columns: minmax(0, calc(50% - 10px));
		justify-content: center;
	}
}

.lmt-promo {
	display: grid;
	gap: 32px;
	padding: clamp(1.75rem, 4vw, 3rem);
	text-decoration: none;
	align-items: center;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
	color: var(--lmt-ink);
	transition: border-color var(--lmt-transition), background-color var(--lmt-transition);
}

.lmt-promo--dark { background: var(--lmt-black); border-color: var(--lmt-black); color: var(--lmt-white); }

@media (min-width: 560px) {
	.lmt-promo--has-cover { grid-template-columns: minmax(0, 1fr) 170px; }
}

a.lmt-promo--light:hover { border-color: var(--lmt-black); }
a.lmt-promo--dark:hover { background: var(--lmt-black-raised); }

.lmt-promo__body { display: flex; flex-direction: column; gap: 14px; }

.lmt-promo__eyebrow {
	font-size: 12px; font-weight: 700;
	letter-spacing: var(--lmt-tracking-eyebrow); text-transform: uppercase;
	color: var(--lmt-red);
}

.lmt-promo__heading {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.125rem);
	line-height: 1; text-transform: uppercase;
}

.lmt-promo__text { font-size: 15px; line-height: 1.55; color: var(--lmt-grey-700); }
.lmt-promo--dark .lmt-promo__text { color: var(--lmt-grey-400); }

.lmt-promo__link {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 15px; font-weight: 700; margin-top: 6px;
}
.lmt-promo__link span { color: var(--lmt-red); }

/* Takes the red of the arrow it stands in for, and nudges down so the tray
   sits on the baseline rather than the middle of the x-height. */
.lmt-promo__icon { flex: none; color: var(--lmt-red); transform: translateY(1px); }
a.lmt-promo:hover .lmt-promo__icon { transform: translateY(3px); transition: transform var(--lmt-transition); }

.lmt-promo__button {
	display: block; text-align: center;
	margin-top: 6px; padding: 16px;
	background: var(--lmt-black); color: var(--lmt-white);
	font-size: 15px; font-weight: 700;
}
a.lmt-promo:hover .lmt-promo__button { background: var(--lmt-red); }

.lmt-promo__cover { display: block; }
.lmt-promo__cover img {
	width: 100%; max-width: 170px;
	box-shadow: 16px 16px 0 var(--lmt-black-raised);
}
.lmt-promo--dark .lmt-promo__cover img { box-shadow: 16px 16px 0 var(--lmt-red); }

/* ---- Guide teaser ------------------------------------------------------
   The promo card's bigger sibling: a dark band given over to one guide,
   the cover offset in red the way the promo sets its own.

   This had no rules at all — the section was written and never styled, so
   it drew a full-width stack with the cover bled across the band under the
   text. It is on no page yet, which is why nothing caught it.
   ---------------------------------------------------------------------- */

.lmt-guide-teaser { display: grid; gap: var(--lmt-space-7); align-items: start; }

@media (min-width: 900px) {
	.lmt-guide-teaser { grid-template-columns: 1.4fr 1fr; gap: 80px; }

	.lmt-guide-teaser__body { align-self: stretch; }

	.lmt-guide-teaser__inner {
		position: sticky;
		top: calc(var(--lmt-header-h) + var(--lmt-admin-bar) + 40px);
	}
}

.lmt-guide-teaser__inner { display: flex; flex-direction: column; gap: 14px; }
.lmt-guide-teaser__inner .lmt-display-3 { max-width: 18ch; }
.lmt-guide-teaser__inner .lmt-lede { max-width: 34rem; }

.lmt-guide-teaser__cover { display: block; }
.lmt-guide-teaser__cover img {
	width: 100%;
	max-width: 260px;
	box-shadow: 16px 16px 0 var(--lmt-red);
}

/* The offset sits outside the image, so the cover needs room for it rather
   than running the red off the edge of the shell. */
@media (min-width: 900px) {
	.lmt-guide-teaser__cover { justify-self: end; padding-right: 16px; }
}

/* ---- Comparison matrix -------------------------------------------------
   Comp: bordered box, black header row, 1.6fr + four equal columns.
   ---------------------------------------------------------------------- */

.lmt-matrix-wrap { border: 1px solid var(--lmt-rule); }

.lmt-matrix {
	border-collapse: collapse;
	width: 100%;
	min-width: 44rem;
	table-layout: fixed;
}

.lmt-matrix col.lmt-matrix__col-first { width: 32%; }

.lmt-matrix thead tr { background: var(--lmt-black); color: var(--lmt-white); }
.lmt-matrix thead th {
	padding: 16px 24px;
	font-size: 12px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	text-align: center; vertical-align: middle;
	border: 0;
}
.lmt-matrix thead th:first-child { text-align: left; }

.lmt-matrix__col-label { display: block; }
.lmt-matrix__col-note {
	display: block; margin-top: 4px;
	font-size: 11px; font-weight: 600;
	letter-spacing: 0; text-transform: none;
	color: var(--lmt-grey-500);
}

.lmt-matrix tbody th,
.lmt-matrix tbody td {
	padding: 16px 24px;
	border-top: 1px solid var(--lmt-rule-soft);
	font-size: 14px;
}
.lmt-matrix tbody th { text-align: left; vertical-align: top; }

.lmt-matrix__row-name { display: block; font-weight: 600; }
.lmt-matrix__row-note {
	display: block; margin-top: 2px;
	font-size: 12px; font-weight: 400;
	color: var(--lmt-ink-muted);
}

.lmt-matrix__cell { text-align: center; vertical-align: middle; }
.lmt-matrix__mark { font-size: 16px; line-height: 1; }
.lmt-matrix__mark.is-yes { color: var(--lmt-red); font-weight: 700; }
.lmt-matrix__mark.is-no { color: var(--lmt-grey-400); }

.lmt-matrix thead th.is-featured { box-shadow: inset 0 -3px 0 var(--lmt-red); }
.lmt-matrix__cell.is-featured { background: var(--lmt-grey-100); }
.lmt-matrix__footer-row th,
.lmt-matrix__footer-row td { border-top: 1px solid var(--lmt-rule); }

.lmt-matrix__heading {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
	line-height: 1; text-transform: uppercase;
}

/* ---- Split CTA ---------------------------------------------------------
   Heading left, actions right. Used by article and guide footers, distinct
   from the centred .lmt-cta band on marketing pages.
   ---------------------------------------------------------------------- */

.lmt-split-cta {
	display: flex; flex-wrap: wrap;
	gap: var(--lmt-space-6);
	align-items: end; justify-content: space-between;
}
.lmt-split-cta > .lmt-stack { flex: 1 1 24rem; }

/* ---- Small helpers ----------------------------------------------------- */

.lmt-quiz__label { flex: 1; }
.lmt-article__body { max-width: 42.5rem; }

/* A card with a link becomes one target: the anchor covers the cell, so the
   number, title and body all read as one thing to click. */
.lmt-benefit--link { position: relative; }

.lmt-benefit__hit {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.lmt-benefit--link:hover .lmt-benefit__title { color: var(--lmt-red); }
.lmt-benefit__hit:focus-visible { outline: 2px solid var(--lmt-red); outline-offset: -2px; }

/* ---- Treatment pages -----------------------------------------------------
   The comp sets these a step down from the home page: an 88px hero against
   96, and 52px section headings against 56. */

@media (min-width: 1200px) {
	.single-treatment .lmt-hero__heading { font-size: 88px; }
	.single-treatment .lmt-display-2 { font-size: 52px; }
}

/* ---- Guide collection ---------------------------------------------------- */

.lmt-guides__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lmt-space-4);
	padding-bottom: var(--lmt-space-5);
	border-bottom: 1px solid var(--lmt-rule);
	margin-bottom: var(--lmt-space-6);
}

.lmt-guides__filters { display: flex; flex-wrap: wrap; gap: 8px; }

.lmt-guides__count { font-size: 13px; color: var(--lmt-ink-muted); }

/* The filter buttons reuse the chip from the booking form, with the active
   one filled the way a chosen chip is there. */
.lmt-guides__filters .lmt-chip { border-radius: 0; }
.lmt-guides__filters .lmt-chip.is-active {
	background: var(--lmt-black);
	border-color: var(--lmt-black);
	color: var(--lmt-white);
}

.lmt-guides__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

@media (min-width: 700px)  { .lmt-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lmt-guides__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lmt-guide {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
	min-width: 0;
}

/* The cover sits on a grey stage rather than bleeding to the card edge. The
   stage keeps its shape with or without artwork, so a library where only some
   covers have been uploaded still lines up. */
.lmt-guide__cover {
	display: grid;
	place-items: center;
	aspect-ratio: 5 / 4;
	padding: var(--lmt-space-5);
	background: var(--lmt-grey-100);
}
.lmt-guide__cover img {
	display: block;
	width: auto;
	height: auto;
	max-width: 55%;
	max-height: 100%;
	box-shadow: 12px 12px 0 rgba(0, 0, 0, .08);
}

.lmt-guide__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--lmt-space-5);
}

.lmt-guide__meta {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lmt-red);
}

.lmt-guide__title {
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
	line-height: 1.1;
	text-transform: uppercase;
}

.lmt-guide__text { font-size: var(--lmt-size-sm); line-height: 1.55; color: var(--lmt-ink-muted); }

/* Pushed to the foot so the links line up across a row of uneven cards. */
.lmt-guide__link { margin-top: auto; padding-top: var(--lmt-space-2); }

.lmt-guides__empty {
	padding: var(--lmt-space-6);
	background: var(--lmt-grey-100);
	text-align: center;
	color: var(--lmt-ink-muted);
}

/* Narrow screens lay each guide out as a row: small cover, copy beside it. */
@media (max-width: 699px) {
	.lmt-guide { flex-direction: row; gap: var(--lmt-space-4); align-items: flex-start; }
	.lmt-guide__cover { flex: none; width: 96px; aspect-ratio: auto; padding: var(--lmt-space-3); align-self: stretch; }
	.lmt-guide__cover img { max-width: 100%; box-shadow: 6px 6px 0 rgba(0, 0, 0, .08); }
	.lmt-guide__body { padding: var(--lmt-space-4) var(--lmt-space-4) var(--lmt-space-4) 0; }
	.lmt-guide__title { font-size: 1.125rem; }
}

/* ---- Signup band --------------------------------------------------------- */

.lmt-signup__inner {
	display: grid;
	gap: var(--lmt-space-5);
	align-items: center;
}

@media (min-width: 900px) {
	.lmt-signup__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--lmt-space-7); }
}

.lmt-signup__copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lmt-signup__text { font-size: var(--lmt-size-base); line-height: 1.5; color: #555; max-width: var(--lmt-measure); }
.lmt-section--dark .lmt-signup__text { color: var(--lmt-grey-400); }

.lmt-signup__form { display: flex; gap: 0; min-width: 0; }
.lmt-signup__form .lmt-input { flex: 1 1 auto; min-width: 0; }
.lmt-signup__form .lmt-btn { flex: none; }

/* ---- Available services ------------------------------------------------
   A grid of the medications a treatment can be prescribed as. Each card is a
   button that opens a dialog, because these are not things to add to a basket.
   ---------------------------------------------------------------------- */

.lmt-services__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

@media (min-width: 900px) {
	.lmt-services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
	.lmt-services__grid { grid-template-columns: repeat(4, 1fr); }
}

.lmt-service { display: flex; }

/* The card is a <button>, so every inherited control style has to go before
   it can look like a card. */
.lmt-service__body {
	appearance: none;
	font: inherit; color: inherit; text-align: left;
	margin: 0; padding: 0; width: 100%;
	display: flex; flex-direction: column;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
	cursor: pointer;
	transition: border-color var(--lmt-transition);
}

.lmt-service__body:hover,
.lmt-service__body:focus-visible { border-color: var(--lmt-black); }

/* No dialog support: the card stays, and stops behaving like a control. */
.lmt-service__body.is-static { cursor: default; }
.lmt-service__body.is-static:hover { border-color: var(--lmt-rule); }

/*
 * Contained, never cropped. These are catalogue shots of a box and a vial, and
 * filling the panel cut the top off the packaging — the thing somebody is
 * looking at the card to see. The stage keeps its ratio either way, so the grid
 * stays even whatever shape the photograph is.
 */
.lmt-service__media { display: block; background: var(--lmt-grey-100); }
.lmt-service__media img {
	display: block; width: 100%;
	/* The catalogue shots are square, so a square stage fills without bars.
	   contain still guards anything that is not. */
	aspect-ratio: 1 / 1; object-fit: contain;
	padding: 12px;
}

.lmt-service__text {
	display: flex; flex-direction: column; gap: 10px;
	padding: 24px; flex: 1;
}

.lmt-service__tag {
	align-self: flex-start;
	font-size: 11px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; padding: 6px 10px;
	background: var(--lmt-neutral-tint); color: #444;
}

.lmt-service__name {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: 22px; line-height: 1.1; text-transform: uppercase;
	text-wrap: pretty;
}

.lmt-service__summary { font-size: 15px; line-height: 1.5; color: var(--lmt-grey-700); flex: 1; }

.lmt-service__more {
	font-size: 14px; font-weight: 700; color: var(--lmt-red);
	padding-top: 14px; border-top: 1px solid var(--lmt-rule-soft);
}

.lmt-services__note {
	margin-top: var(--lmt-space-5);
	font-size: 14px; line-height: 1.6; color: var(--lmt-ink-muted);
}

/* ---- The dialog ---- */

.lmt-service-dialog {
	width: min(46rem, calc(100vw - 2 * var(--lmt-gutter)));
	max-height: min(85dvh, 52rem);
	padding: 0; border: 0;
	background: var(--lmt-white); color: var(--lmt-ink);
	overflow: auto;
}

.lmt-service-dialog::backdrop { background: rgb(10 10 10 / .6); }

.lmt-service-dialog__inner { position: relative; }

.lmt-service-dialog__close {
	position: absolute; top: 12px; right: 12px; z-index: 1;
	appearance: none; border: 0; cursor: pointer;
	width: 40px; height: 40px; line-height: 1;
	font-size: 26px;
	background: var(--lmt-white); color: var(--lmt-ink);
}
.lmt-service-dialog__close:hover { background: var(--lmt-grey-100); }

/*
 * Contained rather than cropped. These are catalogue shots of a box and a vial
 * on white, and cropping one to fill a banner cuts the top off the packaging —
 * the thing someone opened the card to look at.
 */
.lmt-service-dialog__media { background: var(--lmt-grey-100); }
.lmt-service-dialog__media img {
	display: block; width: 100%;
	max-height: 15rem; object-fit: contain;
	padding: var(--lmt-space-4) 0;
}

.lmt-service-dialog__body {
	display: flex; flex-direction: column; gap: var(--lmt-space-3);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.lmt-service-dialog__title {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
	line-height: 1.05; text-transform: uppercase;
}

.lmt-service-dialog__specs { margin: 0; display: grid; gap: 0; }

.lmt-service-dialog__spec {
	display: flex; justify-content: space-between; gap: var(--lmt-space-4);
	padding: 12px 0; border-bottom: 1px solid var(--lmt-rule-soft);
	font-size: 15px;
}
.lmt-service-dialog__spec:first-child { border-top: 1px solid var(--lmt-rule-soft); }
.lmt-service-dialog__spec dt { color: var(--lmt-grey-700); }
.lmt-service-dialog__spec dd { margin: 0; font-weight: 700; text-align: right; }

.lmt-service-dialog__prose { font-size: 15px; }

/* The dialog's call to action, sat under the detail it belongs to. */
.lmt-service-dialog__foot {
	display: flex; flex-direction: column; gap: 12px;
	margin-top: var(--lmt-space-2);
	padding-top: var(--lmt-space-4);
	border-top: 1px solid var(--lmt-rule-soft);
}
.lmt-service-dialog__cta { width: 100%; }
.lmt-service-dialog__note { font-size: 13px; line-height: 1.5; color: var(--lmt-ink-muted); }

/* Cover and title both open the guide, without either announcing itself as a
   link until it is pointed at. The cover is already laid out as a grid above,
   which is what an anchor needs here too. */
.lmt-guide__title a { color: inherit; text-decoration: none; }
.lmt-guide__title a:hover,
.lmt-guide__title a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Video section

   One layout, three arrangements: full width, or beside its text on either
   side. The frame keeps 16:9 whatever is inside it — a file, an embed, or the
   poster standing in for one — so the section is the same height before and
   after anybody presses play and the page never jumps under them.
   ========================================================================== */

.lmt-video {
	display: grid;
	gap: var(--lmt-space-6);
	align-items: center;
}

.lmt-video__frame {
	position: relative;
	overflow: hidden;
	background: var(--lmt-black);
}
.lmt-video__frame > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.lmt-video__player { object-fit: cover; }
.lmt-video__player.is-ambient { pointer-events: none; }

/* The poster and its play button, which is all an embed is until it is
   asked for. A button rather than a link: nothing is navigated to. */
.lmt-video__cover {
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: #fff;
}
.lmt-video__cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Enough shade for a white play button to hold against any poster. */
.lmt-video__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .28);
	transition: background .2s ease;
}
.lmt-video__cover:hover::after,
.lmt-video__cover:focus-visible::after { background: rgba(0, 0, 0, .42); }

.lmt-video__play {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--lmt-red);
	/* The glyph's own whitespace leans it left of centre. */
	padding-left: 4px;
	transition: transform .2s ease, background .2s ease;
}
.lmt-video__cover:hover .lmt-video__play,
.lmt-video__cover:focus-visible .lmt-video__play {
	transform: scale(1.06);
	background: var(--lmt-red-dark);
}

/* Named for a screen reader, not shown — the poster already says what it is. */
.lmt-video__play-label {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.lmt-video__text { display: grid; gap: var(--lmt-space-3); align-content: center; }
.lmt-video__inner { display: grid; gap: var(--lmt-space-3); align-content: center; }
.lmt-video__text--under { max-width: 62ch; margin-inline: auto; text-align: center; }
.lmt-video__inner .lmt-display-3 { max-width: 20ch; }
.lmt-video__inner .lmt-lede { max-width: 38rem; }
.lmt-video__actions { margin-top: var(--lmt-space-2); }

@media (min-width: 900px) {
	.lmt-video--right,
	.lmt-video--left {
		grid-template-columns: 1fr 1fr;
		gap: var(--lmt-space-7);
		/* Stretch, not centre: the text column has to be as tall as the row
		   before anything inside it can travel. */
		align-items: stretch;
	}

	/* Source order puts the text first so it is read first; the arrangement
	   with the video on the left is a swap of columns, not of the markup. */
	.lmt-video--left .lmt-video__text  { order: 2; }
	.lmt-video--left .lmt-video__frame { order: 1; }

	/* The column stays the full height of the row and the panel inside it
	   travels; the same pair as testimonials and the guide teaser. Cleared
	   below the header and the admin bar so a sticky heading is never under
	   either of them. */
	.lmt-video__text { align-self: stretch; }

	.lmt-video__inner {
		position: sticky;
		top: calc(var(--lmt-header-h) + var(--lmt-admin-bar) + 40px);
	}

	/* A frame that is only ever 16:9 in half a shell is shorter than most
	   text beside it, and a sticky panel with no room to move is just a
	   panel. Given its own height the video column is what the text travels
	   against. */
	.lmt-video--right .lmt-video__frame,
	.lmt-video--left .lmt-video__frame { align-self: start; }
}

@media (prefers-reduced-motion: reduce) {
	.lmt-video__cover::after,
	.lmt-video__play { transition: none; }
	.lmt-video__cover:hover .lmt-video__play,
	.lmt-video__cover:focus-visible .lmt-video__play { transform: none; }
}

/* The frame's shape. Set on the frame rather than left to the file so the
   section is the same height before and after play, whatever the video turns
   out to be — and so a page never jumps as one loads. */
.lmt-video__frame--16-9 { aspect-ratio: 16 / 9; }
.lmt-video__frame--4-3  { aspect-ratio: 4 / 3; }
.lmt-video__frame--1-1  { aspect-ratio: 1 / 1; }
.lmt-video__frame--4-5  { aspect-ratio: 4 / 5; }
.lmt-video__frame--9-16 { aspect-ratio: 9 / 16; }

/* An upright video is a portrait held in a full-width column, which is a very
   large picture. Capped, and centred in the column it is capped inside. */
.lmt-video--full .lmt-video__frame--4-5,
.lmt-video--full .lmt-video__frame--9-16 {
	max-width: 480px;
	margin-inline: auto;
}

/* ==========================================================================
   Product row

   Four across on a wide screen, two on a tablet, one on a phone. Cards are a
   fixed shape whatever the picture is, so a row of medication photographed at
   different sizes still reads as a row.
   ========================================================================== */

.lmt-products {
	display: grid;
	gap: var(--lmt-space-5);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) { .lmt-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lmt-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lmt-product {
	/* Relative so the "taken as" badge can sit over the picture. */
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
	transition: border-color var(--lmt-transition);
}
.lmt-product:hover { border-color: var(--lmt-grey-600); }

.lmt-product__media {
	display: block;
	aspect-ratio: 4 / 3;
	/* The frame is padded and the picture fills what is left of it. Without the
	   padding, contain fills whichever dimension runs out first — so a wide box
	   shot reached both edges while a tall vial sat inset, the same rule
	   producing two different-looking cards. border-box so the ratio is the
	   whole frame, padding included. */
	padding: 18px;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--lmt-grey-100);
	border-bottom: 1px solid var(--lmt-rule);
}
.lmt-product__media img {
	width: 100%;
	height: 100%;
	/* Contain, not cover: these are boxes and vials shot on white, and cropping
	   them cuts the label off. */
	object-fit: contain;
}

/* The body grows, so the buttons line up across the row however long the
   names are. */
.lmt-product__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--lmt-space-4);
	flex: 1 1 auto;
}

.lmt-product__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	/* Two lines, so one long name cannot knock a row out of alignment. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lmt-product__name a { color: inherit; text-decoration: none; }
.lmt-product__name a:hover,
.lmt-product__name a:focus-visible { color: var(--lmt-red); }

.lmt-product__rx {
	align-self: start;
	margin: 0;
	padding: 2px 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lmt-red-dark);
	background: var(--lmt-red-tint);
}

.lmt-product__price { margin: 0; font-size: 15px; font-weight: 600; }
.lmt-product__price del { color: var(--lmt-ink-muted); font-weight: 400; margin-right: 6px; }

/* Pushed to the bottom of whatever height the card ended up. */
.lmt-product__more { margin-top: auto; text-align: center; }

/* Centred under the grid. Left-aligned it read as the start of another row
   rather than the end of the one above it. */
.lmt-products__all { margin-top: var(--lmt-space-6); text-align: center; }

/* Dark and grey sections: the card keeps its own ground so the picture is not
   sitting on a colour it was never shot against. */
.lmt-section--dark .lmt-product { border-color: var(--lmt-black-line); }
.lmt-section--dark .lmt-product__name a { color: var(--lmt-ink); }

/* ---- Search results ------------------------------------------------------
   Results are grouped by what they are, and each group is drawn the way that
   kind of thing is drawn everywhere else — .lmt-products for products,
   .lmt-posts for the reading — so this is only the scaffolding around them.
   -------------------------------------------------------------------------- */

/* The journal's field sits in a filter row beside the categories and is sized
   for that. On the search page it is the only thing in its row. */
.lmt-search--page {
	width: 100%;
	max-width: 34rem;
	margin-bottom: var(--lmt-space-5);
}
.lmt-search--page input { flex: 1 1 auto; min-width: 0; }

.lmt-searchnav { margin-bottom: var(--lmt-space-4); }

.lmt-searchgroup__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lmt-space-4);
	margin-bottom: var(--lmt-space-5);
	padding-bottom: var(--lmt-space-3);
	border-bottom: 1px solid var(--lmt-rule);
}

.lmt-searchgroup__title {
	margin: 0;
	font-family: var(--lmt-font-display);
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.lmt-searchgroup__all {
	font-size: var(--lmt-size-sm);
	font-weight: 700;
	color: var(--lmt-red);
	text-decoration: none;
	white-space: nowrap;
}
.lmt-searchgroup__all:hover { text-decoration: underline; }

/* The "taken as" badge on the section's own product cards. The listings'
   copy of this lives in shop.css, which does not load on a treatment page. */
.lmt-product .lmt-loop-form {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--lmt-ink);
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--lmt-rule);
	border-radius: var(--lmt-radius);
}

.lmt-product .lmt-loop-form--injectable {
	color: var(--lmt-red-dark);
	border-color: var(--lmt-red);
}

@media (max-width: 559px) {
	.lmt-product .lmt-loop-form {
		top: 6px;
		left: 6px;
		padding: 3px 6px;
		font-size: 10px;
		letter-spacing: .04em;
	}
}