/* Beef Shares landing page.
   Same design system as the "Our Story" page (.fol-story): IM Fell English
   headings over Josefin Sans body, the theme's cream/sage/gold palette, full
   bleed chapters alternating light and dark. Ported here from that page's
   inline <style> so the two pages share one vocabulary instead of drifting.
   Theme-agnostic on purpose: no Tailwind classes, since Tailwind's scanner
   does not walk plugin PHP. */

.fol-story {
	--cream:      #FAF8F3;
	--logo-bg:    #F6F5E3;
	--sage:       #B7BFA3;
	--dark:       #4F4A45;
	--charcoal:   #2F2E2C;
	--brown:      #8C6239;
	--gold:       #C79C4A;
	--gold-soft:  #E2C381;
	--rule:       rgba(79, 74, 69, 0.18);
	--rule-light: rgba(250, 248, 243, 0.14);

	font-family: "Josefin Sans", sans-serif;
	color: var(--dark);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.fol-story *,
.fol-story *::before,
.fol-story *::after {
	box-sizing: border-box;
}

.fol-story h1,
.fol-story h2,
.fol-story h3,
.fol-story h4 {
	font-family: "IM Fell English", Georgia, serif;
	color: var(--charcoal);
	font-weight: 400;
	margin: 0;
	line-height: 1.1;
	text-wrap: balance;
}

.fol-story p    { margin: 0; text-wrap: pretty; }
.fol-story a    { color: inherit; }
.fol-story img  { display: block; max-width: 100%; }
.fol-story ::selection { background: var(--gold); color: var(--charcoal); }

/* The page is built to run edge to edge inside the theme's constrained
   content column. Pair with the "No Content Container" page template when you
   can; this breakout keeps it right on the default template too.
   ponytail: 100vw ignores a classic scrollbar's width, so the page clips its
   own horizontal overflow. Drop both rules if the page ever moves to a
   genuinely full width template. */
.bsl-page {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

body:has(.bsl-page) { overflow-x: clip; }

.fol-story .container {
	max-width: 1200px;
	width: 92%;
	margin: 0 auto;
}

.fol-story .container--narrow { max-width: 820px; }

.fol-story section { padding: 110px 0; }

/* ── Eyebrow + titles ─────────────────────────────────────────────────── */

.fol-story .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	/* 14px is the floor for meta text on this page. Tracking comes down with
	   every one of these size bumps: 0.3em at 11px and 0.3em at 14px are not
	   the same line, and the wider one wraps out of its column. */
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--brown);
	margin-bottom: 22px;
}

.fol-story .eyebrow::before {
	content: "";
	width: 30px;
	height: 1px;
	background: var(--brown);
	flex-shrink: 0;
}

.fol-story .eyebrow--light { color: var(--gold-soft); }
.fol-story .eyebrow--light::before { background: var(--gold-soft); }

.fol-story .section-title {
	font-size: clamp(28px, 4.4vw, 60px);
	line-height: 1.02;
	margin-bottom: 28px;
}

.fol-story .section-title em { font-style: italic; color: var(--brown); }

.fol-story .lede {
	font-size: 19px;
	line-height: 1.65;
	max-width: 56ch;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.fol-story .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 30px;
	border-radius: 999px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 180ms ease, background 180ms ease, color 180ms ease;
	-webkit-tap-highlight-color: transparent;
}

.fol-story .btn:hover  { transform: translateY(-1px); }
.fol-story .btn:active { transform: scale(0.98); }

.fol-story .btn--gold       { background: var(--gold); color: var(--charcoal); }
.fol-story .btn--gold:hover { background: var(--gold-soft); color: var(--charcoal); }
.fol-story .btn--dark       { background: var(--charcoal); color: var(--cream); }
.fol-story .btn--dark:hover { background: var(--brown); color: var(--cream); }

.fol-story .btn--ghost-light {
	background: transparent;
	color: var(--cream);
	border-color: rgba(250, 248, 243, 0.45);
}

.fol-story .btn--ghost-light:hover {
	background: rgba(250, 248, 243, 0.1);
	border-color: var(--cream);
	color: var(--cream);
}

.fol-story .btn i.fa-arrow-right-long { transition: transform 220ms ease; flex-shrink: 0; }
.fol-story .btn:hover i.fa-arrow-right-long { transform: translateX(4px); }

/* ── Scroll animations ────────────────────────────────────────────────── */

/* No will-change here on purpose. It applied to 37 elements at once and never
   came off after the reveal finished, so a phone held 37 composited layers for
   animations that had already run. The browser promotes what it needs for the
   duration of a transition on its own. */
.st-anim {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.st-anim.st-anim--left  { transform: translateX(-22px); }
.st-anim.st-anim--right { transform: translateX(22px); }
.st-anim.is-visible     { opacity: 1; transform: none; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.fol-story .hero {
	position: relative;
	min-height: clamp(560px, 84vh, 820px);
	background: var(--charcoal);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	color: var(--cream);
}

.fol-story .hero__img {
	position: absolute;
	inset: 0;
	background-color: #1a1a16;
	background-position: center 40%;
	background-size: cover;
	background-repeat: no-repeat;
	transform: scale(1.04);
	transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fol-story .hero__img > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fol-story .hero--loaded .hero__img { transform: scale(1); }

.fol-story .hero__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(15, 14, 12, 0.72) 0%, rgba(15, 14, 12, 0.35) 28%, rgba(15, 14, 12, 0.6) 62%, rgba(15, 14, 12, 0.97) 100%),
		radial-gradient(110% 80% at 50% 105%, rgba(107, 72, 40, 0.4) 0%, rgba(15, 14, 12, 0) 55%);
}

.fol-story .hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	width: 92%;
	margin: 0 auto;
	padding: 80px 0 72px;
}

.fol-story .hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold-soft);
	margin-bottom: 26px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.fol-story .hero__eyebrow::before,
.fol-story .hero__eyebrow::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--gold-soft);
	opacity: 0.7;
	flex-shrink: 0;
}

.fol-story .hero__title {
	font-size: clamp(36px, 6.4vw, 92px);
	line-height: 0.98;
	color: var(--cream);
	max-width: 18ch;
	margin-bottom: 24px;
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.75s ease 0.3s, transform 0.75s ease 0.3s;
}

.fol-story .hero__title em { font-style: italic; color: var(--gold-soft); }

.fol-story .hero__sub {
	max-width: 54ch;
	font-size: 19px;
	line-height: 1.65;
	color: rgba(250, 248, 243, 0.88);
	margin-bottom: 36px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}

.fol-story .hero__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease 0.65s, transform 0.6s ease 0.65s;
}

.fol-story .hero--loaded .hero__eyebrow,
.fol-story .hero--loaded .hero__title,
.fol-story .hero--loaded .hero__sub,
.fol-story .hero--loaded .hero__cta-row { opacity: 1; transform: translateY(0); }

/* ── Chapters ─────────────────────────────────────────────────────────── */

.fol-story .chapter { position: relative; }
.fol-story .chapter--cream { background: var(--cream); }
.fol-story .chapter--logo  { background: var(--logo-bg); border-top: 1px solid var(--rule); }
.fol-story .chapter--sage  { background: var(--sage); }
.fol-story .chapter--dark  { background: var(--charcoal); color: var(--cream); }

.fol-story .chapter--dark .section-title    { color: var(--cream); }
.fol-story .chapter--dark .section-title em { color: var(--gold-soft); }
.fol-story .chapter--dark .eyebrow          { color: var(--gold-soft); }
.fol-story .chapter--dark .eyebrow::before  { background: var(--gold-soft); }
.fol-story .chapter--dark p                 { color: rgba(250, 248, 243, 0.84); }
.fol-story .chapter--dark h3,
.fol-story .chapter--dark h4                { color: var(--cream); }

.fol-story .chapter__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}

.fol-story .chapter__body p {
	font-size: 18px;
	line-height: 1.72;
	margin-bottom: 20px;
}

.fol-story .chapter__body p:last-child { margin-bottom: 0; }

.fol-story .chapter__visual {
	position: relative;
	border-radius: 3px;
	overflow: hidden;
	background: #2a2820;
	box-shadow: 0 32px 64px -28px rgba(47, 46, 44, 0.4);
}

.fol-story .chapter__visual img { width: 100%; height: 100%; object-fit: cover; }
.fol-story .chapter__visual--tall { aspect-ratio: 3/4; }
.fol-story .chapter__visual--wide { aspect-ratio: 4/3; }
.fol-story .chapter__visual--sq   { aspect-ratio: 1/1; }

.fol-story .pull-quote {
	font-family: "IM Fell English", serif;
	font-style: italic;
	font-size: clamp(18px, 2.4vw, 26px);
	line-height: 1.3;
	color: var(--charcoal);
	padding: 28px 32px;
	border-left: 3px solid var(--gold);
	background: var(--logo-bg);
	margin-top: 32px;
	border-radius: 0 4px 4px 0;
}

.fol-story .chapter--dark .pull-quote {
	background: rgba(250, 248, 243, 0.06);
	border-color: var(--gold-soft);
	color: rgba(250, 248, 243, 0.9);
}

/* Marked lists — the promises, the cuts, the reasons. */
.fol-story .marked-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.fol-story .marked-list li {
	position: relative;
	padding-left: 30px;
	font-size: 17px;
	line-height: 1.55;
}

.fol-story .marked-list li::before {
	content: "\f00c"; /* fa-check */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 3px;
	font-size: 14px;
	color: var(--gold);
}

.fol-story .chapter--dark .marked-list li::before { color: var(--gold-soft); }

/* ── Timeline strip ───────────────────────────────────────────────────── */

.fol-story .timeline-strip {
	background: var(--charcoal);
	color: var(--cream);
	position: relative;
	overflow: hidden;
}

.fol-story .timeline-strip::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 500px at 100% -10%, rgba(107, 114, 85, 0.18), transparent 60%),
		radial-gradient(700px 400px at -5% 110%, rgba(107, 72, 40, 0.22), transparent 58%);
	pointer-events: none;
}

.fol-story .timeline-strip__inner { position: relative; }

.fol-story .timeline-strip__head { max-width: 680px; margin-bottom: 72px; }
.fol-story .timeline-strip__head .section-title { color: var(--cream); }
.fol-story .timeline-strip__head .section-title em { color: var(--gold-soft); }
.fol-story .timeline-strip__head p { color: rgba(250, 248, 243, 0.82); }

.fol-story .timeline-events { display: flex; flex-direction: column; }

.fol-story .t-event {
	display: grid;
	grid-template-columns: 160px 1fr;
	border-top: 1px solid var(--rule-light);
	transition: background 260ms ease;
}

.fol-story .t-event:last-child { border-bottom: 1px solid var(--rule-light); }
.fol-story .t-event:hover { background: rgba(250, 248, 243, 0.03); }

.fol-story .t-event__year {
	padding: 32px 28px 32px 0;
	font-family: "IM Fell English", serif;
	font-style: italic;
	font-size: 28px;
	color: var(--gold);
	line-height: 1;
	border-right: 1px solid var(--rule-light);
	display: flex;
	align-items: flex-start;
}

.fol-story .t-event__body { padding: 32px 0 32px 40px; }
.fol-story .t-event__body h4 { font-size: 20px; color: var(--cream); margin-bottom: 8px; line-height: 1.15; }
/* 0.75 alpha cream on the dark chapter is thin at 16px — 0.85 keeps it
   comfortably past 4.5:1 without turning the timeline body into a headline. */
.fol-story .t-event__body p { font-size: 16px; line-height: 1.65; color: rgba(250, 248, 243, 0.85); max-width: 60ch; }

/* ── Value / cut cards ────────────────────────────────────────────────── */

/* Sage is the lightest ground on the page, and the brand brown lands on it at
   2.8:1 — a contrast fail at every size, including the big italic accents in
   the section titles. Sage chapters get a deeper brown (4.6:1 here, 8.2:1 on
   the cream cards sitting inside them), so one variable fixes the eyebrows,
   the title accents, and the card icons together. */
.fol-story .values,
.fol-story .chapter--sage { --brown: #654427; }

.fol-story .values { background: var(--sage); color: var(--charcoal); }
.fol-story .values .eyebrow { color: var(--charcoal); }
.fol-story .values .eyebrow::before { background: var(--charcoal); }
.fol-story .values__head { max-width: 680px; margin-bottom: 64px; }

.fol-story .values__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	/* Cards hug their own content. These lists are 9, 4, 4, and 10 items long,
	   and stretching them all to the tallest left the two short cards sitting
	   over half a card of empty paper. */
	align-items: start;
}

.fol-story .values__grid--four { grid-template-columns: repeat(4, 1fr); }

.fol-story .value-card {
	background: rgba(250, 248, 243, 0.6);
	border: 1px solid rgba(47, 46, 44, 0.1);
	border-radius: 4px;
	padding: 36px 30px;
	transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease;
}

.fol-story .value-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -20px rgba(47, 46, 44, 0.25);
	background: rgba(250, 248, 243, 0.85);
}

.fol-story .value-card__icon { font-size: 26px; color: var(--brown); margin-bottom: 18px; }
.fol-story .value-card h3 { font-size: 24px; color: var(--charcoal); margin-bottom: 12px; line-height: 1.1; }
.fol-story .value-card p  { font-size: 16px; line-height: 1.65; color: var(--dark); margin-bottom: 18px; }
.fol-story .value-card .marked-list li { font-size: 16px; }

/* ── Four-step strip ──────────────────────────────────────────────────── */

/* The jump targets sit under a 102px sticky site header, so every anchored
   section reserves room for it — otherwise a jump link lands with its heading
   hidden behind the nav. */
.bsl-page [id] { scroll-margin-top: 120px; }

@media (prefers-reduced-motion: no-preference) {
	html:has(.bsl-page) { scroll-behavior: smooth; }
}

.fol-story .values__head--center {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* The eyebrow's leading rule is left-anchored by default, which reads as an
   off-centre tail once the head is centred. */
.fol-story .values__head--center .eyebrow { justify-content: center; }

.fol-story .bsl-steps__lede {
	font-size: 18px;
	line-height: 1.65;
	max-width: 58ch;
	margin: 4px auto 0;
}

/* The number rides inside its own card, top-right, at every width — the same
   treatment phones already used. A number floating above the card read as a
   loose element sitting on the background rather than part of the step. */
.fol-story .bsl-step {
	position: relative;
	display: flex;
	flex-direction: column;
}

.fol-story .bsl-step__rail {
	position: absolute;
	top: 28px;
	right: 24px;
	z-index: 1;
	margin: 0;
	display: flex;
	align-items: center;
}

/* The connector between numbers is gone; the arrow now lives in the gap
   between the boxes. The span stays in the markup as the hook for it. */
.fol-story .bsl-step__line { display: none; }

.fol-story .bsl-step__num {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--cream);
	border: 2px solid var(--brown);
	/* Josefin Sans, not the page serif: IM Fell English sets oldstyle figures,
	   so its 1 reads as a roman numeral and its 3 and 4 drop below the baseline
	   — inside a circle, four different numerals at four different heights. */
	font-family: "Josefin Sans", sans-serif;
	font-size: 23px;
	font-weight: 700;
	line-height: 1;
	color: var(--brown);
}

/* Arrows sit in the grid gap, vertically centred between one box and the next
   — and only while the boxes are actually side by side. Once the grid stacks
   there is nothing to the right to point at. */
@media (min-width: 901px) {
	.fol-story .bsl-steps__grid { gap: 36px; }

	.fol-story .bsl-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 50%;
		right: -23px;
		width: 12px;
		height: 12px;
		margin-top: -6px;
		border-top: 2px solid var(--brown);
		border-right: 2px solid var(--brown);
		transform: rotate(45deg);
		opacity: 0.55;
		pointer-events: none;
	}
}

.fol-story .bsl-step__card { padding-top: 30px; }
/* Keep the title clear of the number badge sitting top-right. */
.fol-story .bsl-step h3 { padding-right: 58px; }

/* The card is the link — the whole card takes the hover and the focus ring. */
.fol-story .bsl-step__card {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

.fol-story .bsl-step__card .value-card__icon { font-size: 26px; margin-bottom: 16px; }
.fol-story .bsl-step h3 { font-size: 22px; margin-bottom: 10px; }
.fol-story .bsl-step p  { font-size: 16px; line-height: 1.6; color: var(--dark); }

.fol-story .bsl-step__link {
	margin-top: auto;
	padding-top: 20px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brown);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.fol-story .bsl-step__link i { transition: transform 220ms ease; }
.fol-story .bsl-step__card:hover .bsl-step__link i { transform: translateX(4px); }

.fol-story .bsl-step__card:focus-visible {
	outline: 3px solid var(--brown);
	outline-offset: 3px;
}

/* The steps are a summary, so they stay the same height as each other —
   unlike the cut cards below, whose lists are genuinely different lengths. */
.fol-story .bsl-steps__grid { align-items: stretch; }

/* ── Split a share ────────────────────────────────────────────────────── */

.fol-story .bsl-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	margin-top: 64px;
	padding: 44px;
	background: rgba(250, 248, 243, 0.6);
	border: 1px solid rgba(47, 46, 44, 0.1);
	border-radius: 4px;
}

.fol-story .bsl-split h3 { font-size: 28px; line-height: 1.15; margin-bottom: 14px; }
.fol-story .bsl-split p  { font-size: 16px; line-height: 1.7; color: var(--dark); margin-bottom: 26px; max-width: 60ch; }

/* Block, not flex: as a flex item the screenshot kept min-width:auto and so
   refused to shrink below its own 1230px, hanging off both sides on a phone. */
.fol-story .bsl-split__shot { display: block; min-width: 0; }

/* Empty, the slot needs a height of its own to hold its brief. Filled, the
   screenshot keeps its own ratio — pinning a height would letterbox a wide
   image inside a tall frame. */
.fol-story .bsl-split__shot .bsl-shot {
	width: 100%;
	min-height: 300px;
	background-color: #2a2820;
	border-radius: 4px;
}

.fol-story .bsl-split__shot .bsl-shot__media {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 0;
	/* The general slot rule crops to fill a fixed frame; this one has no frame
	   to fill, so the whole screenshot stays visible. */
	object-fit: fill;
	border-radius: 4px;
	border: 1px solid rgba(47, 46, 44, 0.12);
}

/* ── Closing button under the steps ───────────────────────────────────── */

.fol-story .bsl-steps__cta { margin-top: 56px; text-align: center; }

.fol-story .btn--lg {
	padding: 22px 46px;
	font-size: 18px;
	letter-spacing: 0.08em;
}

.fol-story .bsl-steps__cta-note {
	margin-top: 16px;
	font-size: 14px;
	color: var(--dark);
}

/* ── Callout ──────────────────────────────────────────────────────────── */

.fol-story .bsl-callout {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	margin-top: 40px;
	padding: 30px 32px;
	background: rgba(250, 248, 243, 0.6);
	border: 1px solid rgba(47, 46, 44, 0.1);
	border-left: 3px solid var(--brown);
	border-radius: 4px;
}

.fol-story .bsl-callout__icon { font-size: 26px; color: var(--brown); line-height: 1.2; flex-shrink: 0; }

.fol-story .bsl-callout__cta { margin-top: 14px; margin-bottom: 0; }

.fol-story .bsl-callout__cta a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--brown);
}

.fol-story .bsl-callout__cta a i { transition: transform 220ms ease; }
.fol-story .bsl-callout__cta a:hover i { transform: translateX(4px); }
.fol-story .bsl-callout h3 { font-size: 22px; margin-bottom: 8px; }
.fol-story .bsl-callout p  { font-size: 16px; line-height: 1.65; color: var(--dark); max-width: 70ch; }

/* ── Pricing table (live settings) ────────────────────────────────────── */

.bsl-pricing { margin: 0; }

.bsl-pricing-table {
	width: 100%;
	border-collapse: collapse;
	background: rgba(250, 248, 243, 0.75);
	border: 1px solid var(--rule);
	border-radius: 4px;
	overflow: hidden;
}

.bsl-pricing-table th,
.bsl-pricing-table td {
	padding: 18px 22px;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: top;
	font-size: 17px;
}

.bsl-pricing-table thead th {
	font-family: "IM Fell English", Georgia, serif;
	font-size: 24px;
	font-weight: 400;
	color: var(--charcoal);
	background: var(--charcoal);
	color: var(--cream);
	border-bottom: none;
}

.bsl-pricing-table tbody th {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brown);
	/* "Estimated Box Weight" at 14px no longer fits a nowrap 22% column, and
	   forcing it would push the table past the page. It wraps instead. */
	width: 26%;
}

.bsl-pricing-table tbody tr:last-child td,
.bsl-pricing-table tbody tr:last-child th { border-bottom: none; }

.bsl-pricing-table tbody tr:last-child td strong {
	font-family: "IM Fell English", Georgia, serif;
	font-weight: 400;
	font-size: 26px;
	color: var(--brown);
}

.bsl-sub {
	display: block;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--brown);
	margin-top: 4px;
}

.bsl-pricing-note {
	margin-top: 18px;
	/* A full sentence of pricing information, not a caption — it reads at body
	   size, and the opacity comes up so it clears contrast at that size. */
	font-size: 16px;
	color: var(--dark);
	opacity: 0.9;
}

.bsl-pricing-cta { margin-top: 32px; }

/* ── Media placeholders ───────────────────────────────────────────────── */

/* A visible slot describing the shot to capture. Loud on purpose: an unfilled
   slot should be impossible to miss in review, and obvious in the editor.
   Upload a file whose slug is the one printed in the slot and the [beef_share_shot]
   shortcode swaps this for the real media — see Beef_Shares_Landing::render_shot(). */
.fol-story .bsl-shot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 100%;
	padding: 32px 28px;
	text-align: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(199, 156, 74, 0.08) 0px,
		rgba(199, 156, 74, 0.08) 12px,
		rgba(199, 156, 74, 0.16) 12px,
		rgba(199, 156, 74, 0.16) 24px
	);
	border: 2px dashed rgba(199, 156, 74, 0.55);
	color: var(--cream);
}

.fol-story .bsl-shot__kind {
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--gold-soft);
}

.fol-story .bsl-shot__label {
	font-family: "IM Fell English", Georgia, serif;
	font-style: italic;
	font-size: 19px;
	line-height: 1.3;
	color: var(--cream);
	/* 34ch is wider than a phone, and the page clips its own overflow — so the
	   slot's own width wins whenever it is the smaller of the two. */
	max-width: min(34ch, 100%);
}

.fol-story .bsl-shot__hint {
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(250, 248, 243, 0.75);
	/* The slug is one long unbreakable token, which sets the slot's min-content
	   width — on a phone that made every empty slot wider than the screen and
	   pushed its own text under the page's overflow clip. */
	overflow-wrap: anywhere;
}

/* The filename inside the hint is a <code>, and the browser default shrinks
   monospace to 0.8125em — which put it back under the floor at 12px. The theme
   also paints code near-black, which on these dark slots was all but invisible,
   so the one word telling you what to upload took the colour of its sentence. */
.fol-story .bsl-shot__hint code {
	font-size: 1em;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gold-soft);
	background: none;
}

/* The hero's slot fills the whole backdrop, so its note is parked in the top
   corner instead of the middle, where the headline lives. */
.fol-story .hero__img .bsl-shot {
	position: absolute;
	inset: 0;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 4px;
	padding: 28px 32px;
	text-align: right;
	border: none;
}

/* Standalone shot slots (not inside a dark chapter visual) keep the same
   loudness but have to carry their own dark ground. */
.fol-story .bsl-shot--block {
	background-color: #2a2820;
	border-radius: 3px;
	aspect-ratio: 16/7;
	margin-top: 40px;
	/* Definite inline size, or aspect-ratio runs backwards: .bsl-shot sets
	   min-height:100%, and with no width to work from the browser derives the
	   WIDTH from that height — 267px tall x 3/2 came out 401px wide inside a
	   359px column, so every block slot hung off the side of a phone. */
	width: 100%;
}

.fol-story .bsl-shot-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.fol-story .bsl-shot-row .bsl-shot--block { margin-top: 40px; }

/* Slots on a light chapter need the dark ground too, or the cream text on
   cream background disappears. */
.fol-story .chapter--cream .bsl-shot--block,
.fol-story .chapter--logo .bsl-shot--block,
.fol-story .values .bsl-shot--block { background-color: #2a2820; }

/* The filled state. Real media inherits the slot's geometry exactly, so a
   photo landing in a slot can't shift the layout it was designed around. */
.fol-story .bsl-shot__media {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
}

.fol-story .bsl-shot__media.bsl-shot--block {
	border-radius: 3px;
	aspect-ratio: 16/7;
	min-height: 0;
	margin-top: 40px;
}

.fol-story .bsl-shot-row .bsl-shot__media.bsl-shot--block { margin-top: 40px; }

/* A diagram cannot be cropped — its labels live at the edges. At the block
   slot's ratios this one lost the bottom caption on desktop (87% of height)
   and both outer circles on a phone (75% of width). So it is deliberately NOT
   a slot fill: no aspect-ratio, no object-fit, no min-height, nothing to
   override. Just an image at its own size, on a light card so it reads against
   the dark chapter. */
.fol-story .bsl-graphic {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 40px;
	padding: 18px;
	background: var(--cream);
	border-radius: 4px;
}

/* The hero's media fills the whole backdrop behind the headline. */
.fol-story .hero__img .bsl-shot__media {
	position: absolute;
	inset: 0;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.fol-story .bsl-faq { border-top: 1px solid var(--rule); }

.fol-story .bsl-faq details {
	border-bottom: 1px solid var(--rule);
}

.fol-story .bsl-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 26px 44px 26px 0;
	position: relative;
	font-family: "IM Fell English", Georgia, serif;
	font-size: 22px;
	color: var(--charcoal);
	transition: color 200ms ease;
}

.fol-story .bsl-faq summary::-webkit-details-marker { display: none; }
.fol-story .bsl-faq summary:hover { color: var(--brown); }

.fol-story .bsl-faq summary::after {
	content: "\2b"; /* plus */
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 14px;
	color: var(--gold);
	transition: transform 220ms ease;
}

.fol-story .bsl-faq details[open] summary::after { content: "\f068"; /* minus */ }

.fol-story .bsl-faq details p {
	padding: 0 44px 28px 0;
	font-size: 17px;
	line-height: 1.7;
	max-width: 70ch;
}

/* ── Final CTA ────────────────────────────────────────────────────────── */

.fol-story .final {
	position: relative;
	background: var(--charcoal);
	color: var(--cream);
	overflow: hidden;
	text-align: center;
}

.fol-story .final__bg {
	position: absolute;
	inset: 0;
	opacity: 0.28;
	filter: grayscale(0.3);
	background-color: #1a1a16;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.fol-story .final__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(65% 65% at 50% 50%, rgba(47, 46, 44, 0.45) 0%, rgba(47, 46, 44, 0.97) 100%);
}

.fol-story .final__inner {
	position: relative;
	z-index: 2;
	max-width: 760px;
	margin: 0 auto;
	width: 92%;
}

.fol-story .final__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold-soft);
	margin-bottom: 22px;
	justify-content: center;
}

.fol-story .final__eyebrow::before,
.fol-story .final__eyebrow::after {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--gold-soft);
	flex-shrink: 0;
}

.fol-story .final h2 {
	color: var(--cream);
	font-size: clamp(30px, 4.8vw, 66px);
	line-height: 1.04;
	margin-bottom: 22px;
}

.fol-story .final h2 em { color: var(--gold-soft); font-style: italic; }

.fol-story .final p {
	font-size: 18px;
	line-height: 1.65;
	color: rgba(250, 248, 243, 0.82);
	margin-bottom: 36px;
	max-width: 52ch;
	margin-inline: auto;
}

.fol-story .final__row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 48px;
}

.fol-story .final__sig {
	font-family: "IM Fell English", serif;
	font-style: italic;
	font-size: 16px;
	color: var(--gold-soft);
	letter-spacing: 0.04em;
}

/* ── Mobile — 900px ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.fol-story .chapter__grid { grid-template-columns: 1fr; gap: 40px; }
	.fol-story .t-event { grid-template-columns: 100px 1fr; }
	.fol-story .values__grid,
	.fol-story .values__grid--four { grid-template-columns: 1fr; gap: 16px; }

	/* Stacked, the badge comes down a size and the icon with it. */
	.fol-story .bsl-step__rail { top: 26px; right: 22px; }
	.fol-story .bsl-step__num { width: 42px; height: 42px; font-size: 21px; }
	.fol-story .bsl-step__card { padding-top: 26px; }
	.fol-story .bsl-step__card .value-card__icon { font-size: 24px; margin-bottom: 12px; }
	.fol-story .bsl-step h3 { padding-right: 52px; }
}

/* ── Mobile — 760px ───────────────────────────────────────────────────── */

@media (max-width: 760px) {
	.fol-story section { padding: 64px 0; }
	/* Inline-block, not flex: a label that wraps to two lines should carry the
	   arrow after its last word instead of parking it out to the right. */
	.fol-story .btn {
		display: inline-block;
		padding: 15px 22px;
		font-size: 16px;
		line-height: 1.3;
		text-align: center;
	}

	.fol-story .btn i { margin-left: 8px; }
	.fol-story .section-title { margin-bottom: 22px; }
	.fol-story .lede { font-size: 17px; }

	/* A wrapped eyebrow hangs its second line off the rule unless the rule is
	   pinned to the first line. */
	.fol-story .eyebrow {
		align-items: flex-start;
		gap: 10px;
		line-height: 1.6;
		letter-spacing: 0.22em;
		margin-bottom: 16px;
	}

	.fol-story .eyebrow::before { width: 20px; margin-top: 9px; }

	.fol-story .hero { min-height: 85vh; }
	.fol-story .hero__inner { padding: 52px 0 44px; }
	.fol-story .hero__title { font-size: 40px; line-height: 1.05; margin-bottom: 16px; }
	.fol-story .hero__sub { font-size: 16px; margin-bottom: 26px; max-width: 100%; }
	.fol-story .hero__eyebrow { display: none; }
	.fol-story .hero__cta-row { flex-direction: column; gap: 10px; }
	.fol-story .hero__cta-row .btn { width: 100%; }
	.fol-story .chapter__body p { font-size: 16px; }
	.fol-story .chapter__visual--tall { aspect-ratio: 4/3; }
	.fol-story .marked-list li { font-size: 16px; padding-left: 26px; }
	.fol-story .pull-quote { padding: 22px 24px; margin-top: 26px; }
	.fol-story .t-event { grid-template-columns: 80px 1fr; }
	.fol-story .t-event__year { font-size: 22px; padding: 24px 16px 24px 0; }
	.fol-story .t-event__body { padding: 24px 0 24px 22px; }
	.fol-story .timeline-strip__head { margin-bottom: 40px; }
	.fol-story .values__head { margin-bottom: 32px; }
	.fol-story .value-card { padding: 28px 22px; }
	.fol-story .bsl-steps__lede { font-size: 16px; }

	.fol-story .bsl-split { grid-template-columns: 1fr; gap: 26px; margin-top: 40px; padding: 28px 22px; }
	.fol-story .bsl-split h3 { font-size: 24px; }
	.fol-story .bsl-split__shot .bsl-shot,
	.fol-story .bsl-split__shot .bsl-shot__media { min-height: 260px; }
	.fol-story .bsl-steps__cta { margin-top: 40px; }
	.fol-story .btn--lg { padding: 18px 28px; font-size: 16px; }
	.fol-story .bsl-callout { flex-direction: column; gap: 14px; padding: 26px 22px; margin-top: 28px; }
	.fol-story .value-card h3 { font-size: 22px; }
	.fol-story .value-card__icon { margin-bottom: 12px; }

	/* Stacked, the gold uppercase qualifier reads like another field label
	   sitting next to the real "Hanging Weight" row — so it stops shouting. */
	.bsl-sub {
		text-transform: none;
		letter-spacing: 0;
		font-style: italic;
		font-size: 14px;
		color: var(--dark);
		/* 0.7 blended to 3.8:1 against the table's cream — a fail at 14px. */
		opacity: 0.9;
	}

	/* Squat 16:7 slots leave no room for their caption on a phone. Filled slots
	   follow, or a photo would sit at a different ratio than the brief it replaced. */
	.fol-story .bsl-shot--block { aspect-ratio: 3/2; margin-top: 28px; }
	.fol-story .bsl-shot__media.bsl-shot--block { aspect-ratio: 3/2; margin-top: 28px; }
	.fol-story .bsl-shot-row { gap: 16px; }
	.fol-story .bsl-shot-row .bsl-shot--block { margin-top: 28px; }
	.fol-story .bsl-shot-row .bsl-shot__media.bsl-shot--block { margin-top: 28px; }
	.fol-story .bsl-shot { padding: 24px 20px; gap: 8px; }
	.fol-story .bsl-shot__label { font-size: 17px; }
	.fol-story .hero__img .bsl-shot { padding: 20px 20px; }
	.fol-story .final__row { flex-direction: column; align-items: center; gap: 10px; }
	.fol-story .final__row .btn { width: 100%; max-width: 320px; }
	.fol-story .bsl-faq summary { font-size: 19px; }

	/* Stack the comparison table rather than letting it scroll sideways —
	   this page is read on phones more than desktops. */
	.bsl-pricing-table thead { display: none; }

	.bsl-pricing-table,
	.bsl-pricing-table tbody,
	.bsl-pricing-table tr,
	.bsl-pricing-table th,
	.bsl-pricing-table td {
		display: block;
		width: 100%;
	}

	.bsl-pricing-table { background: none; border: none; }

	.bsl-pricing-table tr {
		margin-bottom: 18px;
		border: 1px solid var(--rule);
		border-radius: 4px;
		background: rgba(250, 248, 243, 0.75);
		overflow: hidden;
	}

	.bsl-pricing-table tbody th {
		background: var(--charcoal);
		color: var(--gold-soft);
		width: 100%;
	}

	.bsl-pricing-table td::before {
		content: attr(data-label);
		display: block;
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--brown);
		margin-bottom: 4px;
	}
}

/* ── Mobile — 480px ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.fol-story section { padding: 44px 0; }
	.fol-story .hero__title { font-size: 36px; }
	.fol-story .section-title { font-size: clamp(24px, 7vw, 36px); }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.st-anim,
	.fol-story .hero__eyebrow,
	.fol-story .hero__title,
	.fol-story .hero__sub,
	.fol-story .hero__cta-row,
	.fol-story .hero__img { opacity: 1 !important; transform: none !important; transition: none !important; }

	.fol-story .value-card:hover { transform: none; }
}