/* =============================================================================
   LabLynx, Case Studies

   Layered on LL-ARTICLES/assets/article.css, which is enqueued first. That
   stylesheet supplies the TOKENS, the container geometry, the button, and the
   prose typography inside the narrative column. It does NOT supply this page's
   layout, and that distinction is the whole point of this file.

   WHY THIS IS NOT THE ARTICLE LAYOUT.

   The first version of this template reused the article shell: one reading
   column, a sticky contents rail, a byline row, a reading-time badge. The result
   was an article with case-study data poured into it. Those are affordances for
   a reader going top to bottom, and a case study has two readers and neither of
   them does that. An evaluator scans for "have you done this in a situation like
   mine". A security or procurement reviewer wants the facts and the proof and
   will never reach the fourth paragraph.

   So the page is a sequence of FULL-WIDTH BANDS, each answering one of those
   questions before the narrative starts, with the story itself in a contained
   column. Reading is one job the page does, not its organising principle.

   SEPARATION IS BY BACKGROUND, NOT BY RULES. article.css rations horizontal
   rules hard, for good reasons written down there, and a banded page would blow
   that budget instantly if every band announced itself with a line. Bands change
   ground colour instead: white, tint, white, navy, white. The only rules on this
   page are the hairlines between fact rows, which separate data rather than
   sections.

   THE RHYTHM, and it is deliberate:

     hero        white     who this is about, above the fold
     at a glance tint      the rest of the facts
     narrative   white     the story, plus a three-item rail
     quote       NAVY      the one thing on the page that is not us talking
     partner     white     the second party, as a co-brand
     call to act white     (a navy box, contained, not full-bleed)

   One full-bleed navy moment and one contained navy box. The quote gets the
   full-bleed one because an attributed sentence from a named person is the least
   substitutable evidence on the page.
   ============================================================================= */

.llcs__doc {
	/* Bands run edge to edge; the container inside each one holds the band's
	   content to the same 1200px line as the site navigation. */
	overflow-x: clip;
}

/* -----------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */

.llcs__band {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.llcs__bandtitle {
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
	font-family: var(--llart-display);
	font-size: clamp(1.375rem, 2.6vw, 1.75rem);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--llart-navy);
}

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.llcs__hero {
	padding: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(2rem, 4vw, 3rem);
}

/* One column on a phone, two from 1024px: the title and deck on the left, the
   image panel on the right, and the identity strip spanning both underneath so
   it keeps its three-across treatment rather than being squeezed into half the
   width. */
.llcs__hero-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem) var(--llart-gutter);
	align-items: start;
}
.llcs__hero-text {
	min-width: 0;
}
/* The deck's own bottom margin used to be the space before the identity strip.
   In a grid it stacks on top of the row gap and the two together open a hole
   under the deck, so the grid owns the spacing now. */
.llcs__hero-text > :last-child {
	margin-bottom: 0;
}

@media (min-width: 1024px) {
	.llcs__hero-inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	}
	.llcs__identity,
	.llcs__hero-date {
		grid-column: 1 / -1;
	}
}

.llcs__kicker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .625rem;
	margin: 0 0 1rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.llcs__kicker-label {
	color: var(--llart-brand-orange-ink);
}
.llcs__kicker-sep {
	width: 1.25rem;
	height: 1px;
	background: var(--llart-line);
}
.llcs__kicker-topic {
	color: var(--llart-ink-4);
	text-decoration: none;
}
.llcs__kicker-topic:hover,
.llcs__kicker-topic:focus {
	color: var(--llart-navy);
}

.llcs__title {
	margin: 0 0 1rem;
	font-family: var(--llart-display);
	/* Larger than the article H1. The title IS the claim on a case study, and
	   there is no deck-plus-byline stack under it competing for the same
	   attention. */
	font-size: clamp(2rem, 5.2vw, 3.25rem);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--llart-navy);
	/* Back to 20ch now that the hero is two columns: the title has roughly 60%
	   of the band rather than all of it, so the measure has to come in with it or
	   the H1 runs into the image panel. */
	max-width: 20ch;
	text-wrap: balance;
}

.llcs__deck {
	margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
	max-width: 58ch;
	font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
	line-height: 1.55;
	color: var(--llart-ink-3);
	text-wrap: pretty;
}

/* The identity strip. Three facts, above the fold, answering who this is about
   before the reader decides whether to keep going. Hairlines between columns
   rather than around them: the group reads as one unit that way, and a boxed
   three-up reads as three cards nobody asked for. */
.llcs__identity {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: 1.25rem 0 0;
	border-top: 2px solid var(--llart-navy);
}
.llcs__identity-item {
	padding: .75rem 0;
	border-bottom: var(--art-rule);
}
.llcs__identity-item:last-child {
	border-bottom: 0;
}
.llcs__identity-label {
	margin: 0 0 .25rem;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--llart-ink-4);
}
.llcs__identity-value {
	margin: 0;
	font-family: var(--llart-display);
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 700;
	color: var(--llart-navy);
}

.llcs__hero-date {
	display: flex;
	align-items: center;
	gap: .625rem;
	margin: 1.5rem 0 0;
	font-size: .8125rem;
	color: var(--llart-ink-4);
}
.llcs__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .6;
}

/* THE IMAGE IS A PANEL, NOT A BAND.
   It was full-bleed at 2.4:1, which is the right treatment for a photograph and
   the wrong one for what a case-study hero usually is: a co-branded logo lockup.
   Two marks stretched edge to edge is mostly empty ground, and the band pushed
   the identity strip below the fold, which is the one thing this hero exists to
   prevent. Contained, beside the title, it reads as a mark rather than as
   scenery, and everything that matters stays on the first screen. */
.llcs__heromedia {
	margin: 0;
	line-height: 0;
	border: 1px solid var(--llart-line);
	border-radius: 4px;
	overflow: hidden;
	background: #ffffff;
}
.llcs__heroimg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1.9 / 1;
	object-fit: cover;
}
/* Desaturated on every environment, so a stand-in cannot be mistaken for chosen
   artwork even by someone who skips the note beside it. */
.llcs__heromedia--placeholder .llcs__heroimg {
	filter: grayscale(1) contrast(.9);
	opacity: .8;
}
.llcs__heroimg-note {
	padding: .625rem .75rem;
	font-size: .8125rem;
	line-height: 1.45;
	font-weight: 700;
	color: var(--llart-brand-orange-ink);
	background: var(--llart-brand-orange-soft);
	border-top: 1px solid var(--llart-line);
}

@media (min-width: 720px) {
	.llcs__identity {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		gap: 0 clamp(1.5rem, 4vw, 3rem);
	}
	.llcs__identity-item {
		padding: 0;
		border-bottom: 0;
	}
	.llcs__identity-item + .llcs__identity-item {
		padding-left: clamp(1.5rem, 4vw, 3rem);
		border-left: var(--art-rule);
		margin-left: calc(-1 * clamp(1.5rem, 4vw, 3rem));
	}
}

/* -----------------------------------------------------------------------------
   At a glance
   -------------------------------------------------------------------------- */

.llcs__band--glance {
	background: var(--llart-bg-gray);
}

/* Two columns of label/value pairs on a wide screen, one on a phone. A grid
   rather than a table, because these are facts about one thing and not a
   comparison across a shared axis. */
.llcs__facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 clamp(2rem, 5vw, 4rem);
	margin: 0;
	padding: 0;
}
.llcs__fact {
	display: grid;
	grid-template-columns: 1fr;
	gap: .125rem;
	padding: .875rem 0;
	border-top: var(--art-rule);
}
.llcs__fact:last-child {
	border-bottom: var(--art-rule);
}
.llcs__fact-label {
	margin: 0;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--llart-ink-4);
}
.llcs__fact-value {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--llart-navy);
}

@media (min-width: 560px) {
	.llcs__fact {
		grid-template-columns: 10.5rem minmax(0, 1fr);
		gap: .5rem 1rem;
		align-items: baseline;
	}
	.llcs__fact-label {
		padding-top: .1875rem;
	}
}

@media (min-width: 1024px) {
	.llcs__facts[data-count="4"],
	.llcs__facts[data-count="5"],
	.llcs__facts[data-count="6"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* With two columns the last item in each column needs the closing rule, not
	   just the last item overall. */
	.llcs__facts[data-count="4"] .llcs__fact:nth-last-child(-n+2),
	.llcs__facts[data-count="6"] .llcs__fact:nth-last-child(-n+2) {
		border-bottom: var(--art-rule);
	}
}

/* -----------------------------------------------------------------------------
   Outcomes
   -------------------------------------------------------------------------- */

.llcs__band--metrics {
	background: var(--llart-bg-card-warm);
}
.llcs__metricgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1.75rem 2.5rem;
}
.llcs__metric {
	min-width: 0;
}
.llcs__metricvalue {
	margin: 0;
	font-family: var(--llart-display);
	font-size: clamp(2.25rem, 5vw, 3rem);
	line-height: 1.02;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--llart-navy);
}
.llcs__metriclabel {
	margin: .5rem 0 0;
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--llart-ink-body);
}
/* The honesty line. Small and always present when a number needs situating: a
   figure a reviewer cannot place is a figure they discount, along with the rest
   of the page. */
.llcs__metricnote {
	margin: .375rem 0 0;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--llart-ink-4);
}

/* -----------------------------------------------------------------------------
   The narrative, plus the rail
   -------------------------------------------------------------------------- */

.llcs__bodyband {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.llcs__bodyshell {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 6vw, 4rem) var(--llart-gutter);
	align-items: start;
}

.llcs__narrative {
	min-width: 0;
}

@media (min-width: 1024px) {
	.llcs__bodyshell {
		/* THE PAIR FILLS THE BAND, AND THE RAIL ENDS ON THE BAND'S RIGHT EDGE.
		   The rail is a fixed column and the prose takes everything left over, so
		   the rail's right edge lands on the same line as the navigation and the
		   footer content above and below it. Earlier versions capped the prose at
		   the reading measure and let the leftover width fall somewhere: inside
		   the text column with `1fr`, or in the gutter with `space-between`. Both
		   left a visible hole, and both broke that alignment.

		   The trade is a wider measure than a pure reading page would choose,
		   about 90 characters rather than 72. That is the right trade here: this
		   column is a third of a case study, not the whole of an article, and a
		   rail floating short of the band's edge reads as a mistake in a way a
		   long line does not. */
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 0 clamp(2.5rem, 4vw, 4rem);
	}
}

/* The rail: three items, and it is not sticky. A rail this short has nothing to
   follow the reader for, and a pinned element beside a 550-word column spends
   the whole scroll drawing attention to how little it holds. */
.llcs__rail-inner {
	display: grid;
	gap: 2rem;
}
.llcs__rail-mod {
	min-width: 0;
}
.llcs__rail-label {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .75rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--llart-navy);
}
.llcs__rail-label .llart-ico {
	color: var(--llart-brand-orange);
	font-size: .875rem;
}
.llcs__rail-card {
	padding: 1.25rem;
	background: var(--llart-bg-gray);
	border-radius: 4px;
}
.llcs__rail-cardtext {
	margin: 0 0 1rem;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--llart-ink-body);
}
.llcs__rail-card .llart-cta {
	width: 100%;
	justify-content: center;
}

/* -----------------------------------------------------------------------------
   The quote
   -------------------------------------------------------------------------- */

.llcs__band--quote {
	background: var(--llart-navy);
}
.llcs__pull {
	margin: 0;
	max-width: 46rem;
}
.llcs__pull-text {
	margin: 0;
	padding: 0;
	border: 0;
	/* The quotation marks are drawn here, so the stored string carries none and
	   the Quotation node holds speech rather than punctuation. */
	quotes: "\201C" "\201D";
}
.llcs__pull-text p {
	margin: 0;
	font-family: var(--llart-display);
	font-size: clamp(1.375rem, 3.2vw, 2rem);
	line-height: 1.38;
	font-weight: 400;
	letter-spacing: -0.015em;
	color: #ffffff;
	text-wrap: pretty;
}
.llcs__pull-text p::before { content: open-quote; }
.llcs__pull-text p::after  { content: close-quote; }

.llcs__pull-attr {
	margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .22);
	font-size: .9375rem;
	line-height: 1.45;
}
.llcs__pull-name {
	display: block;
	font-weight: 700;
	color: #ffffff;
}
.llcs__pull-role {
	display: block;
	color: #b9c6da;
}

/* THE INLINE PLACEMENT. Same words, same navy, contained in the reading column.
   A full-bleed band mid-narrative stops the story; a panel punctuates it. The
   type comes down a step because it is now competing with body copy either side
   rather than owning a screen of its own. */
.llcs__pull--inline {
	max-width: none;
	margin: 2.75rem 0;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--llart-navy);
	border-radius: 4px;
}
.llcs__pull--inline .llcs__pull-text p {
	font-size: clamp(1.125rem, 2.2vw, 1.375rem);
	line-height: 1.45;
}
.llcs__pull--inline .llcs__pull-attr {
	margin-top: 1rem;
	padding-top: .875rem;
	font-size: .875rem;
}

/* -----------------------------------------------------------------------------
   The partner
   -------------------------------------------------------------------------- */

/* A COMPACT LOCKUP, NOT A BAND OF ITS OWN.
   This was full band padding around a small logo and three short lines, which
   left the mark floating in the middle of a lot of nothing and made the section
   read as more important than the quote above it. It is a credit, so it gets the
   footprint of a credit: a contained card, aligned to the same left edge as
   everything else, with the type set tight against the mark. */
.llcs__band--partner {
	padding-top: 0;
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.llcs__partnerbox {
	/* A child of .llart-container now, not the container itself. When it was
	   both, `max-width` combined with the container's `margin-inline: auto` and
	   centred the card in the viewport instead of leaving it on the same left
	   edge as every other block on the page. */
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.125rem;
	align-items: center;
	max-width: 40rem;
	padding: 1.5rem;
	border: 1px solid var(--llart-line);
	border-radius: 4px;
	background: #ffffff;
}
.llcs__partnermark {
	min-width: 0;
}
.llcs__partnerlogo {
	display: block;
	width: auto;
	max-width: 10rem;
	max-height: 2.75rem;
	height: auto;
}
.llcs__partnerwordmark {
	margin: 0;
	font-family: var(--llart-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--llart-navy);
}
.llcs__partnerbody {
	min-width: 0;
}
.llcs__partnerlabel {
	margin: 0 0 .1875rem;
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--llart-ink-4);
}
.llcs__partnername {
	margin: 0;
	font-family: var(--llart-display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--llart-navy);
}
.llcs__partnerdesc {
	margin: .25rem 0 0;
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--llart-ink-body);
}
.llcs__partnersince {
	margin: .125rem 0 0;
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--llart-ink-4);
}
/* Editor-only production-safety note. Loud on purpose, and never shown to an
   anonymous reader on production. */
.llcs__partnernote {
	margin: .75rem 0 0;
	padding: .5rem .625rem;
	background: var(--llart-brand-orange-soft);
	border-left: 3px solid var(--llart-brand-orange);
	font-size: .8125rem;
	line-height: 1.45;
	font-weight: 700;
	color: var(--llart-brand-orange-ink);
}

@media (min-width: 560px) {
	.llcs__partnerbox {
		grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
		gap: 1.5rem 1.75rem;
	}
}

/* -----------------------------------------------------------------------------
   FAQ, when a case study has one
   -------------------------------------------------------------------------- */

.llcs__band--faq {
	background: var(--llart-bg-gray);
}
/* The shared partial brings its own top rule and margin, which made sense
   inside a reading column and does not inside a band that already separates
   itself by ground colour. */
.llcs__faqwrap .llart__faq {
	margin: 0;
	padding-top: 0;
	border-top: 0;
	max-width: 46rem;
}

/* -----------------------------------------------------------------------------
   Section numbers: off
   -------------------------------------------------------------------------- */

/* article.css numbers every prose H2 with a decimal-leading-zero counter. It
   earns its place on an article, where the sections are a numbered argument the
   reader is working through and the contents rail numbers them to match.
   A case study has no rail and its headings are story beats, not steps, so the
   numbers assert a sequence that is not there and read as an outline someone
   forgot to remove. */
.llcs .llart__prose h2::before {
	content: none;
}

/* -----------------------------------------------------------------------------
   More case studies
   -------------------------------------------------------------------------- */

/* THE CLOSING ZONE IS ONE TONE.
   The call to action sat on white and the related strip on tint, so the page
   ended on a hard seam between two backgrounds a few hundred pixels apart, with
   the navy CTA box straddling it. Tinting both makes the ending read as one
   area: the ask and the way out of the page belong together, and the rhythm
   stays legible because the last change of ground is the quote's navy. */
.llcs .llart__cta {
	background: var(--llart-bg-gray);
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
}
.llcs__band--related {
	background: var(--llart-bg-gray);
	padding-top: clamp(2rem, 4vw, 3rem);
}
/* The two tinted bands are adjacent, so the join needs a rule rather than a
   change of colour to read as a division at all. */
.llcs__band--related > .llart-container {
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: var(--art-rule);
}

.llcs__relatedhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem 2rem;
}
.llcs__relatedhead .llcs__bandtitle {
	margin-bottom: 0;
}

/* A link, not a button. The page already has two buttons that ask for something
   (the rail card and the call to action); a third in the same visual language,
   for navigation rather than conversion, competes with both and teaches the
   reader that a button here means nothing in particular. */
.llcs__relatedall {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	font-size: .875rem;
	font-weight: 700;
	color: var(--llart-navy);
	text-decoration: none;
	border-bottom: 2px solid var(--llart-brand-orange);
	padding-bottom: 2px;
	transition: color .18s ease, border-color .18s ease;
}
.llcs__relatedall .llart-ico {
	font-size: .625rem;
	color: var(--llart-brand-orange-ink);
	transition: transform .18s ease;
}
.llcs__relatedall:hover,
.llcs__relatedall:focus-visible {
	color: var(--llart-brand-orange-ink);
}
.llcs__relatedall:hover .llart-ico {
	transform: translateX(2px);
}

.llcs__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 720px) {
	.llcs__cards {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	}
}

.llcs__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #ffffff;
	border-radius: 4px;
	overflow: hidden;
}

/* THE RATIO IS ON THE IMAGE, NOT ON ITS WRAPPER.
   With `aspect-ratio` on the wrapper alone the three cards came out at three
   different image heights: the wrapper is a flex item, so its intrinsic content
   height won over the ratio, and the source images have different proportions.
   Constraining the img itself makes the ratio independent of what WordPress
   happened to generate, and the wrapper crops to it. */
/* THE RATIO IS ON THE WRAPPER, AND THE IMAGE FILLS IT.
   Putting it on the img alone worked until Smush's lazy-loader got involved: it
   writes `--smush-placeholder-aspect-ratio` inline from each file's own
   dimensions, so before the image loads the three cards took three different
   heights again. The wrapper owns the box, `flex: 0 0 auto` stops it being
   squeezed as a flex child, and the image simply fills whatever the wrapper is,
   loaded or not. */
.llcs__cardmedia {
	display: block;
	overflow: hidden;
	flex: 0 0 auto;
	aspect-ratio: 16 / 9;
	background: var(--llart-line);
	line-height: 0;
}
.llcs__cardimg {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}
/* No image: a flat navy panel rather than an empty frame. An empty frame reads
   as a broken image, and a case study with no photograph is not a defect. It
   needs the ratio of its own, since there is no img to supply one. */
.llcs__cardmedia--none {
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--llart-navy) 0%, var(--llart-navy-lift) 100%);
}

.llcs__cardbody {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.125rem 1.25rem 1.375rem;
}
.llcs__cardkicker {
	margin: 0;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--llart-brand-orange-ink);
}
.llcs__cardtitle {
	margin: 0;
	font-family: var(--llart-display);
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.llcs__cardtitle a {
	color: var(--llart-navy);
	text-decoration: none;
}
.llcs__cardtitle a:hover,
.llcs__cardtitle a:focus-visible {
	color: var(--llart-brand-orange-ink);
}
.llcs__carddeck {
	margin: 0;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--llart-ink-3);
}

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

@media (max-width: 640px) {
	.llcs__title {
		max-width: none;
	}
	.llcs__rail-inner {
		gap: 1.5rem;
	}
}