/*
 * Befello — Opportunity single template.
 *
 * Split out of style.css so it loads only where it is used.
 * The design tokens, the chip and the button stay in style.css: the
 * Opportunity card borrows all three and renders on the homepage.
 */

/* =========================================================================
   SECTION 1 — OPPORTUNITY SINGLE TEMPLATE
   -------------------------------------------------------------------------
   Design system notes:
   · Every value comes from the Befello Design System core tokens below.
     Nothing in this section invents a colour, radius, or type size.
   · Type scale is the design system's, expressed in rem so it respects
     user browser font-size settings (accessibility requirement). 1rem =
     16px, so --bf-text-base: 1rem is the system's 16px Body.
   · Spacing scale is a 4px base. Every margin/padding uses a scale token,
     not an arbitrary value — that's what produces consistent vertical
     rhythm rather than eyeballed gaps.
   · Scoped to .befello-* classes so nothing else on the site is affected.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1.1  Base — scoped, not global
   ------------------------------------------------------------------------- */

.befello-opportunity,
.befello-opportunity * {
	box-sizing: border-box;
}

.befello-opportunity {
	font-family: var(--befello-font);
	font-size: var(--bf-text-base);
	color: var(--bf-ink);
	background: var(--bf-page-bg);
	line-height: var(--bf-leading-body);
	-webkit-font-smoothing: antialiased;
}

/* §2: 700–800 for prominent headings, 600 for component headings. */
.befello-opportunity h1 {
	font-weight: 700;
	line-height: var(--bf-leading-h1);
	color: var(--bf-ink);
	text-wrap: balance;
}

.befello-opportunity h2 {
	font-weight: 700;
	line-height: var(--bf-leading-h3);
	color: var(--bf-ink);
	text-wrap: balance;
}

.befello-opportunity h3 {
	font-weight: 600;
	line-height: var(--bf-leading-h4);
	color: var(--bf-ink);
	text-wrap: balance; /* progressive enhancement: nicer heading line breaks */
}

/* Scoped to prose only — deliberately NOT `.befello-opportunity a`, which
   would outrank the button rules and repaint primary button text
   blue-on-blue (invisible until hover). Keeping this selector narrow is
   what prevents that class of bug returning. */
.befello-prose a {
	color: var(--bf-accent);
	text-underline-offset: 2px;
}

.befello-prose a:hover {
	color: var(--bf-accent-hover);
}

/* Scoped to prose/content images only. A blanket `.befello-opportunity img`
   rule (specificity 0,1,1) outranks component-level image rules like
   .befello-hero__image-el (0,1,0) and would force height:auto on them,
   collapsing fixed-ratio frames. Keep this selector narrow. */
.befello-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bf-radius-lg);   /* 5px cap (§12) */
}

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

   One component, six ordered parts, one visual system:

     breadcrumb → chips → place/format → title → organisation → deadline

   The pieces that used to float apart (a badge here, "Germany" as loose
   text, "In person" stranded at the bottom) are now two deliberate rows:
   a CHIP row that carries status, and a plain META line that carries
   place and format. A reader scans the chips, reads the title, and finds
   the one supporting sentence with the date. Nothing repeats.

   The chip row is a single component used three times, so the three read
   as one control: identical height, identical padding, identical 16px
   icon, identical 4px radius. Only the colour and the words change, and
   the words always carry the state on their own.
   ------------------------------------------------------------------------- */

.befello-hero {
	max-width: var(--bf-container-max);
	margin: 0 auto;
	padding: var(--bf-space-8) var(--bf-space-6) var(--bf-space-12);
}

/* --- Breadcrumb ---------------------------------------------------------
   In the grid rather than above it. Its own row means its left edge is the
   content column's left edge by construction, and its baseline sits level
   with the top of the image — so it reads as the first line of the hero
   instead of a link hovering somewhere above it. justify-self keeps the
   hit area to the text; the row is full width, the link is not. */

.befello-hero__back {
	grid-area: back;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--bf-space-2);
	margin-bottom: var(--bf-space-5);
	color: var(--bf-accent);
	font-size: var(--bf-text-sm);
	font-weight: 500;
	line-height: var(--bf-leading-body);
	text-decoration: none;
	/* 44px tall including the margin below, without moving the text. */
	padding: var(--bf-space-2) 0;
}

.befello-hero__back svg {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
}

.befello-hero__back:hover,
.befello-hero__back:focus-visible {
	color: var(--befello-blue-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Grid --------------------------------------------------------------- */

.befello-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	/* The media spans both rows, so the breadcrumb's row height is set by
	   the breadcrumb alone and the image starts level with it. */
	grid-template-areas:
		"back    media"
		"content media";
	grid-template-rows: auto 1fr;
	/* stretch, not center: the image then ends exactly where the text
	   block ends, which is what makes the two columns read as aligned
	   rather than as two things that happen to sit side by side. */
	align-items: stretch;
	column-gap: clamp(var(--bf-space-8), 4vw, var(--bf-space-12));
}

.befello-hero--no-image .befello-hero__grid {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"back"
		"content";
}

.befello-hero__content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	/* Centred against a taller image, so a short title never leaves a
	   pocket of dead space under the metadata. */
	justify-content: center;
	min-width: 0;
}

/* --- 2. Title ----------------------------------------------------------- */

.befello-hero__title {
	margin: 0;
	/* H1 tops out at 40px (§2); 52px Display is the homepage hero only. */
	font-size: clamp(1.75rem, 1.1rem + 2.4vw, var(--bf-text-h1));
	font-weight: 700;
	line-height: var(--bf-leading-h1);
	letter-spacing: -0.02em;
	/* Balanced lines plus a measure: together these stop the browser
	   breaking a long programme name one word before the end. */
	max-width: 18ch;
	text-wrap: balance;
}

.befello-hero__title-main {
	display: block;
}

/* The second line is part of the same heading — one accessible name —
   but visually subordinate, so the programme name still leads. */
.befello-hero__title-sub {
	display: block;
	margin-top: var(--bf-space-1);
	color: var(--bf-ink-muted);
	font-size: 0.6em;
	font-weight: 600;
	line-height: var(--bf-leading-h4);
	letter-spacing: -0.01em;
}

/* --- 3. Host organisation ----------------------------------------------- */

.befello-hero__org {
	margin: var(--bf-space-4) 0 0;
	font-size: var(--bf-text-base);
	line-height: var(--bf-leading-body);
}

.befello-hero__org-lead {
	color: var(--bf-ink-muted);
	font-weight: 400;
}

.befello-hero__org-name {
	color: var(--bf-ink);
	font-weight: 600;
}

/* --- 4. Deadline sentence ------------------------------------------------ */

.befello-hero__deadline {
	display: flex;
	align-items: center;
	gap: var(--bf-space-2);
	margin: var(--bf-space-4) 0 0;
	color: var(--bf-ink-muted);
	font-size: var(--bf-text-sm);
	font-weight: 500;
	line-height: var(--bf-leading-body);
}

/* The date carries the emphasis, not the sentence around it. */
.befello-hero__deadline-date {
	color: var(--bf-ink);
	font-weight: 600;
}

/* --- Media -------------------------------------------------------------- */

.befello-hero__media {
	grid-area: media;
	/* The image is taken out of flow so it contributes NOTHING to the row
	   height. Left in flow, a 512px-square upload stretched to a 526px
	   column reported a 526px height, the grid row grew to match, and the
	   text column ended up with 113px of dead space above and below it —
	   exactly the "excessive vertical empty space" this hero is meant to
	   avoid. Now the row is the text block's height, with a floor. */
	position: relative;
	min-height: 340px;
	overflow: hidden;
	border-radius: var(--bf-radius-lg);   /* 5px cap (§12) */
	border: 1px solid var(--bf-border);   /* border, not shadow (§14) */
	background: var(--bf-surface);
	line-height: 0;   /* kills the inline-descender gap under the image */
}

/* Descendant selector raises specificity to 0,2,0 so theme rules targeting
   bare `img` (GeneratePress sets height:auto) can't collapse the fill. */
.befello-hero__media .befello-hero__image-el {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	max-width: none;
}

/* --- Tablet: one column, image first ------------------------------------ */

@media (max-width: 900px) {
	.befello-hero {
		padding: var(--bf-space-6) var(--bf-space-5) var(--bf-space-8);
	}

	.befello-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"content";
		row-gap: var(--bf-space-6);
	}

	.befello-hero__media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.befello-hero__title {
		max-width: 24ch;
	}
}

/* -------------------------------------------------------------------------
   1.3  Layout
   ------------------------------------------------------------------------- */

.befello-opportunity__layout {
	max-width: var(--bf-container-max);
	margin: 0 auto;
	padding: 0 var(--bf-space-6) var(--bf-space-12);
	display: grid;
	gap: var(--bf-gap);
	grid-template-columns: 1fr;
	/* stretch, not start. The sidebar is a grid item, and with `start` it
	   was only as tall as the card inside it — so `position: sticky` on
	   that card had zero travel and it scrolled away for good. Stretching
	   the column to the row height gives sticky somewhere to stick. */
	align-items: stretch;
}

.befello-opportunity__main {
	min-width: 0;
}

/* -------------------------------------------------------------------------
   1.4  Content sections

   Section separation uses a hairline rule + generous padding rather than
   wrapping each section in its own card. Cards-inside-cards is the fastest
   way to make a page look templated; a shared rhythm reads as more
   deliberate and keeps the eye moving down the column.
   ------------------------------------------------------------------------- */

.befello-section {
	padding: var(--bf-space-8) 0;
	border-top: 1px solid var(--bf-border);
}

.befello-section:first-child {
	padding-top: 0;
	border-top: none;
}

.befello-section h2 {
	font-size: var(--bf-text-h3);          /* 24/32 subsection (§2) */
	line-height: var(--bf-leading-h3);
	letter-spacing: -0.01em;
	margin: 0 0 var(--bf-space-5);
}

/* §2: 65–75ch reading measure for long-form text.
 *
 * overflow-wrap is the fix for the one thing that actually made this page
 * scroll sideways on a phone: an editor pasting a bare URL. A 100-character
 * link has a min-content width of ~376px, which no amount of column sizing
 * can shrink, so the paragraph pushed every ancestor past the viewport and
 * the page scrolled. Breaking the word is the fix; hiding the overflow was
 * only ever the symptom. */
.befello-prose {
	max-width: 70ch;
	color: var(--bf-ink);
	font-size: var(--bf-text-base);
	line-height: var(--bf-leading-body);
	overflow-wrap: break-word;
}

.befello-prose p {
	margin: 0 0 var(--bf-space-4);
}

.befello-prose p:last-child {
	margin-bottom: 0;
}

.befello-prose ul,
.befello-prose ol {
	margin: 0 0 var(--bf-space-4);
	padding-left: var(--bf-space-5);
}

.befello-prose li + li {
	margin-top: var(--bf-space-2);
}

/* Same reasoning as .befello-prose: any surface an editor types into can
   receive a URL, a long compound noun, or a pasted reference number. */
.befello-check-list li,
.befello-doc-list li,
.befello-hero__title,
.befello-hero__org-name,
.befello-hero__deadline,
.befello-essay-card__question,
.befello-essays__head h2,
.befello-section h2 {
	overflow-wrap: break-word;
}

/* --- Benefits: check marks, not generic squares ------------------------- */

.befello-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* minmax(0, …) is load-bearing. These are grid items, and a grid item's
	   automatic minimum size is its min-content — which overflow-wrap does
	   NOT reduce. One pasted compound noun therefore sized the implicit
	   column to the width of the word and pushed the page sideways. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bf-space-3);
}

.befello-check-list li {
	position: relative;
	padding-left: var(--bf-space-6);
	max-width: 70ch;
}

/* §20.8 / §16: limited decoration. The tinted circle behind each tick was
   ornament — the tick alone already says "included", so the chip is gone
   and only the mark remains. Drawn with a rotated border rather than an
   icon file: at 6px a raster would blur, and this reads as part of the
   type rather than as a badge borrowed from an icon set.

   --bf-check lets a container recolour the mark without forking the
   component — see the criteria cards below. The default lives in the
   var() fallback rather than as a declaration on .befello-check-list,
   because a custom property set on the list itself resolves on the list
   and would beat the value inherited from the card around it — which is
   how the green card ended up drawing blue ticks. */

.befello-check-list li::after {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.4em;
	width: 0.3rem;
	height: 0.6rem;
	border: solid var(--bf-check, var(--bf-accent));
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* --- Eligibility + Benefits: the two questions, side by side ------------
   "Can I apply?" and "What do I get?" are the first two things an
   applicant asks, and they are asked together — so they are answered
   together rather than as two more sections stacked down the page.

   auto-fit rather than a fixed two-column track: one card on its own then
   fills the row instead of sitting in a half-empty grid, and the same
   rule collapses to a single column on a narrow screen. No PHP branch and
   no breakpoint list to keep in step.

   The cards differ only by tint and tick colour. Everything structural —
   border, radius, padding, type — is shared, so they read as one pair.
   ------------------------------------------------------------------------- */

.befello-criteria__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--bf-space-5);
	/* start, not stretch. Stretching makes both cards as tall as the longer
	   one, and three benefits beside four requirements left ~100px of empty
	   tint at the bottom of the shorter card — "unnecessarily tall when
	   there are only a few items". Top-aligned, each card is its own
	   length, and when the two lists are similar they still line up. */
	align-items: start;
}

.befello-criteria-card {
	min-width: 0;
	padding: var(--bf-space-5);
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);   /* 5px card (§9) */
	box-shadow: var(--bf-shadow-card);    /* none (§14) */
}

/* Flat tints, both already in the system: the blue is the same soft blue
   the page uses elsewhere, the green the same soft green as the funded
   badge. The neutral border is shared so the tint is the only difference
   a reader has to decode. */
.befello-criteria-card--eligibility {
	background: var(--bf-accent-soft);
}

.befello-criteria-card--benefits {
	background: var(--bf-success-soft);
}

/* Compound selector so it outranks `.befello-section h2` (0,1,1), which
   would otherwise impose the 24px section size on a card heading. §2 puts
   card headings at H4: 20/28, weight 600. */
.befello-criteria-card .befello-criteria-card__title {
	margin: 0;
	font-size: var(--bf-text-h4);
	font-weight: 600;
	line-height: var(--bf-leading-h4);
	letter-spacing: -0.01em;
	color: var(--bf-ink);
}

/* The restrained accent: a short rule in the card's own colour. It is the
   only ornament on the card, and it is doing a job — separating the title
   from the list without a full-width divider. */
.befello-criteria-card__rule {
	display: block;
	width: 2rem;
	height: 2px;
	margin: var(--bf-space-3) 0 var(--bf-space-4);
	border-radius: var(--befello-radius-sm);
	background: var(--bf-check, var(--bf-accent));
}

.befello-criteria-card--eligibility {
	--bf-check: var(--bf-accent);
}

.befello-criteria-card--benefits {
	--bf-check: var(--bf-success);
}

/* Hairline separators between items. Against a tint the neutral border is
   barely a line, which is what makes it help scanning without becoming a
   table. No line above the first item. */
.befello-criteria-list {
	gap: 0;
	/* The card is already a measure; a second ch cap would fight it. */
	max-width: none;
}

.befello-criteria-list li {
	max-width: none;
	padding: var(--bf-space-3) 0 var(--bf-space-3) var(--bf-space-6);
	border-top: 1px solid var(--bf-border);
	overflow-wrap: break-word;   /* long criteria must wrap, not overflow */
}

.befello-criteria-list li:first-child {
	border-top: none;
	padding-top: 0;
}

.befello-criteria-list li:last-child {
	padding-bottom: 0;
}

/* The tick sits on the first line of the item, which moved down with the
   padding above. */
.befello-criteria-list li::after {
	top: calc(var(--bf-space-3) + 0.4em);
}

.befello-criteria-list li:first-child::after {
	top: 0.4em;
}

/* --- Required documents -------------------------------------------------
   The icon used to repeat on every row. It carried no information there —
   every item in a list called "Required documents" is a document — and a
   column of identical marks is the opposite of scannable. It appears once
   now, beside the heading, and each row is numbered instead, which does
   say something: how many there are, and which one you are reading.

   Three levels of type do the work, with no card and no border per item:
   the name at body weight, the detail one step down and muted, the link
   in the accent blue.
   ------------------------------------------------------------------------- */

.befello-docs__heading {
	display: flex;
	align-items: center;
	gap: var(--bf-space-3);
}

/* Sized against the heading's cap height rather than its line box, so the
   icon reads as the same weight as the words next to it. */
.befello-docs__heading-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--bf-ink-muted);
}

.befello-docs__heading-icon .befello-icon {
	/* em, not rem: the heading steps down to 20px on a phone and the icon
	   goes with it, keeping the same relationship at every size. Slightly
	   over 1em so it reads as the equal of the words rather than of their
	   cap height. */
	width: 1.1em;
	height: 1.1em;
	margin: 0;
}

.befello-doc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);   /* see .befello-check-list */
	/* Wider than the old 12px: each requirement is a block of two or three
	   lines now, and needs air around it to read as one item. */
	gap: var(--bf-space-5);
	counter-reset: befello-doc;
}

.befello-doc {
	counter-increment: befello-doc;
	position: relative;
	padding-left: var(--bf-space-10);
	max-width: 70ch;
}

/* The marker: the same soft-blue numbered chip the essay notes use, at
   4px like every other chip on the page. Quiet enough to sit beside body
   text, distinct enough to find with a glance down the column. */
.befello-doc::before {
	content: counter(befello-doc);
	position: absolute;
	left: 0;
	top: 0.1em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--bf-accent-soft);
	color: var(--bf-accent);
	border-radius: var(--bf-radius-md);
	font-size: var(--bf-text-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.befello-doc__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bf-space-2);
	margin: 0;
	font-size: var(--bf-text-base);
	font-weight: 600;
	line-height: var(--bf-leading-body);
	color: var(--bf-ink);
	overflow-wrap: break-word;
}

/* One step down in size, weight and colour — three signals, so the split
   between the document and the note about it survives on a small screen
   and in greyscale. */
.befello-doc__details {
	margin: var(--bf-space-1) 0 0;
	font-size: var(--bf-text-sm);
	font-weight: 400;
	line-height: var(--bf-leading-body);
	color: var(--bf-ink-muted);
	overflow-wrap: break-word;
}

.befello-doc__link {
	display: inline-flex;
	align-items: center;
	gap: var(--bf-space-2);
	margin-top: var(--bf-space-2);
	color: var(--bf-accent);
	font-size: var(--bf-text-sm);
	font-weight: 600;
	line-height: var(--bf-leading-body);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.befello-doc__link:hover {
	color: var(--befello-blue-dark);
}

/* Drawn from a rotated border, like the check marks and the disclosure
   chevron — the library has no arrow, and this stays part of the type. */
.befello-doc__link-arrow {
	width: 0.35rem;
	height: 0.35rem;
	border: solid currentColor;
	border-width: 1.5px 1.5px 0 0;
	transform: rotate(45deg);
	flex: 0 0 auto;
}

/* --- Essay questions: cards, not bullet points --------------------------
   These were a numbered list hugging the left gutter, which read as raw
   field output rather than as the prompts an applicant has to answer.
   Each question is now a card: centred, self-contained, with its own word
   limit, because a two-part application rarely gives both parts the same
   allowance.

   Up to three sit in a static grid. Beyond three the same markup becomes
   a scroll-snap rail — swipe on touch, arrows and arrow keys elsewhere —
   so a ten-question application does not turn the page into a wall.

   NOTE: .befello-essays belongs to the OPPORTUNITY template. Section 2
   below styles the Essay post type; different components, no overlap.
   ------------------------------------------------------------------------- */

.befello-essays__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bf-space-4);
	margin-bottom: var(--bf-space-5);
}

.befello-essays__head h2 {
	margin: 0;
}

.befello-essays__nav {
	display: flex;
	gap: var(--bf-space-2);
	flex: 0 0 auto;
}

.befello-essays__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;               /* §17 touch target, on every breakpoint */
	height: 44px;
	padding: 0;
	background: var(--bf-surface);
	color: var(--bf-accent);
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease,
	            color 0.15s ease;
}

.befello-essays__arrow svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.befello-essays__arrow:hover {
	background: var(--bf-accent-soft);
	border-color: var(--bf-accent-soft-border);
}

/* Disabled rather than hidden: a control that vanishes at the end of the
   rail moves the other one, and the row jumps under the pointer. */
.befello-essays__arrow[disabled] {
	color: var(--bf-ink-subtle);
	background: var(--bf-surface);
	border-color: var(--bf-border);
	cursor: default;
	opacity: 0.45;
}

.befello-essays__track {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: var(--bf-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.befello-essays__item {
	display: flex;   /* so the card stretches to the tallest in the row */
	min-width: 0;
}

/* --- The rail ----------------------------------------------------------
   scroll-padding matches the track's own inline padding so a snapped card
   never lands half under the edge. */
.befello-essays__track--rail {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-inline: 0;
	/* Room for the focus ring, which would otherwise be clipped by the
	   scroll container on the first and last card. */
	padding-block: 3px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
}

.befello-essays__track--rail .befello-essays__item {
	/* Three across, minus the two gaps between them. */
	flex: 0 0 calc((100% - (2 * var(--bf-space-4))) / 3);
	scroll-snap-align: start;
}

.befello-essays__track--rail:focus-visible {
	outline: 2px solid var(--befello-blue);
	outline-offset: 2px;
	border-radius: var(--bf-radius-md);
}

/* --- The card ----------------------------------------------------------- */

.befello-essay-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bf-space-3);
	width: 100%;
	padding: var(--bf-space-6) var(--bf-space-5);
	background: var(--bf-surface);
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);   /* 5px card (§9) */
	box-shadow: var(--bf-shadow-card);    /* none (§14) */
	text-align: center;
}

/* A quiet label, not a competing heading — the question is the content. */
.befello-essay-card__number {
	margin: 0;
	color: var(--bf-ink-muted);
	font-size: var(--bf-text-xs);
	font-weight: 600;
	line-height: var(--bf-leading-body);
}

.befello-essay-card__question {
	/* auto bottom margin pins the word limit to the bottom of the card, so
	   the chips line up across cards of unequal question length. */
	margin: 0 0 auto;
	max-width: 42ch;
	color: var(--bf-ink);
	font-size: var(--bf-text-base);
	font-weight: 500;
	line-height: var(--bf-leading-body);
	text-wrap: pretty;
}

/* A card with no word limit has nothing to push against, so the question
   would sit at the top with a pocket of space beneath it while its
   neighbours look balanced. Centre it instead. Where :has() is missing
   the question simply stays top-aligned — no layout breaks. */
.befello-essay-card:not(:has(.befello-essay-card__limit)) .befello-essay-card__question {
	margin-block: auto;
}

/* Same chip language as the hero: 4px, 14px, icon at 16px. */
.befello-essay-card__limit {
	display: inline-flex;
	align-items: center;
	gap: var(--bf-space-2);
	margin: 0;
	padding: 5px 10px;
	background: var(--bf-yellow-soft);
	color: var(--bf-ink-muted);
	border-radius: var(--bf-radius-md);
	font-size: var(--bf-text-sm);
	font-weight: 500;
	line-height: var(--bf-leading-body);
	white-space: nowrap;
}

.befello-essay-card__limit .befello-icon {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 auto;
}

/* Tablet: two across, still snapping when it is a rail. */
@media (max-width: 1023.98px) {
	.befello-essays__track {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	}

	.befello-essays__track--rail .befello-essays__item {
		flex-basis: calc((100% - var(--bf-space-4)) / 2);
	}
}

/* -------------------------------------------------------------------------
   1.5  Important Dates — vertical timeline

   Three columns: date | rail (line + dot) | label.

   The rail cell stretches to the full row height (grid's default
   align-items: stretch), and the connector line is drawn inside it — so the
   line length is derived from the row, never a hard-coded height. Row
   spacing comes from padding-bottom on the CONTENT cell rather than
   row-gap, because gaps would create visible breaks in the connector.

   The date column is a fixed width so dots align in a perfectly straight
   vertical line regardless of how wide each date string is.
   ------------------------------------------------------------------------- */

.befello-timeline {
	--bf-timeline-date-w: 6.5rem;
	--bf-timeline-rail-w: 1.5rem;
	--bf-timeline-dot: 0.7rem;

	list-style: none;
	margin: 0;
	padding: 0;
}

.befello-timeline__item {
	display: grid;
	grid-template-columns: var(--bf-timeline-date-w) var(--bf-timeline-rail-w) minmax(0, 1fr);
	align-items: stretch;
	column-gap: var(--bf-space-3);
}

.befello-timeline__date {
	font-size: var(--bf-text-sm);
	font-weight: 500;
	color: var(--bf-ink-muted);
	font-variant-numeric: tabular-nums;
	line-height: var(--bf-leading-body);
	padding-top: 0.05rem;
	/* No white-space: nowrap. The date column is a fixed width so the dots
	   line up, and "14 December 2026" is wider than that column — with
	   nowrap it simply spilled out of its cell. Wrapping to two lines keeps
	   the dots aligned and keeps the row inside the page. */
	overflow-wrap: break-word;
}

/* Rail: dot pinned to the top, line filling the remainder of the row. */
.befello-timeline__rail {
	position: relative;
	display: flex;
	justify-content: center;
}

.befello-timeline__dot {
	width: var(--bf-timeline-dot);
	height: var(--bf-timeline-dot);
	margin-top: 0.45rem;
	border-radius: 50%;   /* a status dot — inherently circular (§4) */
	background: var(--bf-brand);
	flex-shrink: 0;
	z-index: 1;
}

.befello-timeline__rail::after {
	content: "";
	position: absolute;
	top: calc(0.45rem + var(--bf-timeline-dot));
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: var(--bf-border-strong);
}

/* No trailing line past the final milestone. */
.befello-timeline__item:last-child .befello-timeline__rail::after {
	display: none;
}

.befello-timeline__content {
	padding-bottom: var(--bf-space-6);
	min-width: 0;
}

.befello-timeline__item:last-child .befello-timeline__content {
	padding-bottom: 0;
}

.befello-timeline__label {
	display: block;
	font-size: var(--bf-text-base);
	font-weight: 600;
	color: var(--bf-ink);
	line-height: var(--bf-leading-body);
	overflow-wrap: break-word;
}

/* --- Fello Guidance callout -------------------------------------------- */

/* Guidance is supportive emphasis, which is the yellow's job (§3, §20.4).
   Keeping it out of blue also stops it competing with Apply — the only
   blue thing in the column should be the action. */
.befello-callout {
	background: var(--bf-surface);
	border: 1px solid var(--bf-border);
	border-left: 4px solid var(--bf-yellow);
	border-top: none;
	border-radius: 0 var(--befello-radius-max) var(--befello-radius-max) 0;
	padding: var(--bf-space-6);
	margin-top: var(--bf-space-8);
}

.befello-callout,
.befello-callout .befello-prose {
	color: var(--bf-ink);
}

.befello-callout h2 {
	margin-top: 0;
	margin-bottom: var(--bf-space-3);
}

/* -------------------------------------------------------------------------
   1.7  Key Information sidebar
   ------------------------------------------------------------------------- */

.befello-opportunity__sidebar {
	min-width: 0;
}

.befello-key-info {
	background: var(--bf-surface);
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);   /* 5px card (§9) */
	box-shadow: var(--bf-shadow-card);    /* none (§14) */
	padding: var(--bf-space-5);           /* 20px internal padding (§5, §9) */
}

/* §2 rules out all-caps for anything but very short labels, so this is
   sentence case at Label weight now — still quieter than the facts it
   introduces, without shouting. */
/* Compound selector so it outranks `.befello-opportunity h2` (0,1,1),
   which would otherwise force this back to 700. */
.befello-key-info .befello-key-info__heading {
	font-size: var(--bf-text-sm);
	font-weight: 600;
	line-height: var(--bf-leading-body);
	letter-spacing: 0;
	color: var(--bf-ink);
	margin: 0 0 var(--bf-space-4);
	padding-bottom: var(--bf-space-3);
	border-bottom: 1px solid var(--bf-border);
}

.befello-key-info__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.befello-key-info__row {
	display: grid;
	/* minmax(0, …) because a grid child's automatic minimum size is its
	   min-content, which a long unbroken value would otherwise enforce. */
	grid-template-columns: 1.25rem minmax(0, 1fr);
	grid-template-areas:
		"icon  label"
		".     value";
	column-gap: var(--bf-space-3);
	row-gap: var(--bf-space-1);
	padding: var(--bf-space-3) 0;
	border-top: 1px solid var(--bf-border);
}

.befello-key-info__row:first-child {
	border-top: none;
	padding-top: 0;
}

/* Scoped to the row. This used to be a bare `.befello-icon` rule, and its
   0.2rem nudge — which exists to optically align the icon with the first
   line of a two-line grid cell — leaked into every other component using
   the class, pushing hero chip icons 3.2px off centre. */
.befello-key-info__row .befello-icon {
	grid-area: icon;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.2rem;
	/* Still honoured by the uploaded PNGs: Section 0.5 masks them and fills
	   the box with currentColor, so they tint exactly like the SVG did. */
	color: var(--bf-ink-subtle);
	flex: 0 0 auto;
}

.befello-key-info__label {
	grid-area: label;
	font-size: var(--bf-text-xs);   /* 12 · Caption, sentence case (§2) */
	line-height: var(--bf-leading-body);
	color: var(--bf-ink-muted);
	font-weight: 500;
	letter-spacing: 0;
}

.befello-key-info__value {
	grid-area: value;
	font-size: var(--bf-text-base);
	font-weight: 600;
	color: var(--bf-ink);
	line-height: var(--bf-leading-body);
	overflow-wrap: break-word;
}

/* --- Eligible nationality: one component, two states --------------------
   What was wrong with the old version, in order of how much it hurt:

   1. The trigger moved. `summary` was display:inline when closed and
      display:block when open, so the control you had just clicked jumped
      160px left and grew from 71x17 to 266x24. Nothing else about the
      component said "these are the same thing".
   2. The same data had two typographies — the first six countries at
      600/--bf-ink, the rest at 500/--bf-ink-muted — so the list read as a
      heading followed by a footnote.
   3. The label still said "+18 more" once the 18 were showing, with no
      way to tell it collapsed again.
   4. A stray <span class="befello-more-inline"> held a comma and had no
      rule anywhere in this stylesheet, so it rendered as body text and
      dangled above the link when open.
   5. 71x17 is not a touch target.

   The fix is structural rather than cosmetic: closed and open are the
   same sentence in the same type, and the toggle sits in one place —
   underneath, left-aligned — in both states. It never moves, so there is
   nothing for the eye to re-find after a click.

   Still native <details>: keyboard operable, exposed as a button with an
   expanded state, and working with no JavaScript at all.
   ------------------------------------------------------------------------- */

.befello-more {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bf-space-2);
}

/* Visual order, independent of DOM order: list first, toggle underneath. */
.befello-more__preview {
	order: 1;
}

.befello-more__disclosure {
	order: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bf-space-2);
	width: 100%;
}

.befello-more__full {
	order: 1;
}

.befello-more__disclosure > .befello-more__toggle {
	order: 2;
}

/* The short list steps aside for the full one. A plain sibling selector,
   which is why the disclosure comes first in the markup. */
.befello-more__disclosure[open] ~ .befello-more__preview {
	display: none;
}

/* Both runs are the value's own type — no second treatment for the same
   kind of information. */
.befello-more__preview,
.befello-more__full {
	font-size: var(--bf-text-base);
	font-weight: 600;
	line-height: var(--bf-leading-body);
	color: var(--bf-ink);
	overflow-wrap: break-word;
}

/* --- The toggle --------------------------------------------------------- */

.befello-more__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--bf-space-2);
	/* Padding rather than a fixed box, so the label still sits on the text
	   baseline while the hit area grows past it. */
	padding: var(--bf-space-2) 0;
	color: var(--bf-accent);
	font-size: var(--bf-text-sm);
	font-weight: 600;
	line-height: var(--bf-leading-body);
	cursor: pointer;
	list-style: none;
}

.befello-more__toggle::-webkit-details-marker {
	display: none;
}

.befello-more__toggle:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* One label per state, so the control always says what it will do next. */
.befello-more__label--less,
.befello-more__disclosure[open] .befello-more__label--more {
	display: none;
}

.befello-more__disclosure[open] .befello-more__label--less {
	display: inline;
}

/* Drawn from a rotated border, the same way the check marks are — it
   belongs to the type rather than to an icon set, and the library has no
   chevron to borrow. */
.befello-more__chevron {
	width: 0.4rem;
	height: 0.4rem;
	margin-top: -0.2em;   /* optical centring against the cap height */
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	flex: 0 0 auto;
}

.befello-more__disclosure[open] .befello-more__chevron {
	margin-top: 0.2em;
	transform: rotate(-135deg);
}

.befello-key-info__actions {
	display: grid;
	gap: var(--bf-space-2);
	margin-top: var(--bf-space-5);
	padding-top: var(--bf-space-5);
	border-top: 1px solid var(--bf-border);
}

@media (min-width: 1024px) {
	.befello-key-info {
		position: sticky;
		top: var(--bf-sticky-offset);
	}
}

/* -------------------------------------------------------------------------
   1.8  Mobile action bar

   Native detail screens pair status with the primary action (price + Buy,
   rating + Book). Here that's deadline urgency + Apply, so the user never
   has to scroll back up to remember how long they have.
   ------------------------------------------------------------------------- */

.befello-mobile-cta {
	display: none;
}

@media (max-width: 767.98px) {
	.befello-mobile-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		/* Was a translucent blurred bar. §20.8 rules out glassmorphism, and
		   a solid surface with one hairline reads cleaner over text. */
		background: var(--bf-surface);
		border-top: 1px solid var(--bf-border);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.befello-mobile-cta__inner {
		display: flex;
		align-items: center;
		gap: var(--bf-space-4);
		padding: var(--bf-space-3) var(--bf-space-4);
	}

	.befello-mobile-cta__meta {
		display: flex;
		flex-direction: column;
		gap: 0.05rem;
		min-width: 0;
		flex: 1;
	}

	.befello-mobile-cta__label {
		font-size: var(--bf-text-xs);
		letter-spacing: 0;
		color: var(--bf-ink-muted);
		font-weight: 500;
	}

	.befello-mobile-cta__value {
		display: inline-flex;
		align-items: center;
		gap: var(--bf-space-2);
		font-size: var(--bf-text-base);
		font-weight: 600;
		color: var(--bf-ink);
		line-height: var(--bf-leading-body);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.befello-mobile-cta__value--urgent {
		color: var(--bf-urgent);
	}

	.befello-mobile-cta .befello-btn {
		flex-shrink: 0;
		padding-inline: var(--bf-space-8);
	}
}

/* -------------------------------------------------------------------------
   1.9  Responsive
   ------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.befello-opportunity__layout {
		grid-template-columns: minmax(0, 1fr) var(--bf-sidebar-width);
	}
}

@media (max-width: 1023.98px) {
	.befello-opportunity__layout {
		grid-template-columns: 1fr;
		gap: var(--bf-space-8);
	}

	.befello-opportunity__sidebar {
		order: -1;
	}

	.befello-opportunity__main {
		order: 0;
	}
}

/* Tablet: two-up fact rows, since the card spans the full width here. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.befello-key-info__list {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--bf-space-6);
	}

	.befello-key-info__row:nth-child(2) {
		border-top: none;
		padding-top: 0;
	}
}

/* -------------------------------------------------------------------------
   1.10  MOBILE  (≤767px)

   Designed as its own layout, not a squeezed desktop one:

   · 16px gutters (the platform standard on both iOS and Android) instead of
     the desktop's 24px, so text gets maximum usable width.
   · Full-bleed hero image, edge to edge with no radius or border — the
     single strongest signal that a page was built for mobile.
   · Order: image → title block → facts → content. Matches the native
     detail-screen convention; the deadline still sits above the fold
     because the image is height-capped.
   · Facts become a dense 2-column grid rather than a tall single column,
     halving the scroll distance to the first content section.
   · Section dividers run full-bleed, so sections read as stacked blocks
     the way grouped lists do in native apps.
   · Persistent bottom action bar keeps Apply permanently reachable.
   ------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

	/* --- Global mobile tuning ------------------------------------------ */

	.befello-opportunity {
		--bf-gutter: var(--bf-space-4);   /* 16px platform-standard gutter */
		font-size: 1rem;                  /* comfortable reading size */
		/* The bar measures 99px with its padding and border; 88px of
		   clearance left the last line of a tightly-ending page underneath
		   it. 7rem is 112px. */
		padding-bottom: 7rem;             /* clears the fixed action bar */
		-webkit-text-size-adjust: 100%;
	}

	/* Removes the grey flash on tap that makes web pages feel non-native */
	.befello-opportunity a,
	.befello-opportunity summary {
		-webkit-tap-highlight-color: transparent;
	}

	/* --- Hero -----------------------------------------------------------
	   Reading order on a phone:

	     breadcrumb → image → chips → title → organisation → deadline

	   which is the DOM order and the grid-area order, so nothing has to be
	   reshuffled with `order` and the markup stays sensible for a screen
	   reader and for the no-CSS case.
	   -------------------------------------------------------------------- */

	.befello-hero {
		padding: 0 0 var(--bf-space-6);
	}

	.befello-hero__back {
		margin: 0 var(--bf-gutter) var(--bf-space-4);
		/* §17: 44px minimum on touch. Padding, not a taller line box, so
		   the label stays optically where it was. */
		min-height: 44px;
		padding-block: var(--bf-space-3);
	}

	.befello-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"back"
			"media"
			"content";
		grid-template-rows: auto auto 1fr;
		row-gap: 0;
	}

	/* Full-bleed: cancels the gutter so the image touches both edges. The
	   radius goes with it — a rounded corner against the viewport edge is
	   the tell of a shrunken desktop layout. */
	.befello-hero__media {
		min-height: 0;
		aspect-ratio: 16 / 9;
		border-radius: 0;
		border: none;
		border-bottom: 1px solid var(--bf-border);
		margin-bottom: var(--bf-space-5);
	}

	.befello-hero__content {
		padding: 0 var(--bf-gutter);
	}

	/* Chips wrap onto as many rows as they need and stay the same height. */
	.befello-hero__chips {
		margin-bottom: var(--bf-space-4);
	}

	/* Tighter tracking and leading at large sizes keeps long programme
	   names from eating the whole first screen. */
	.befello-hero__title {
		font-size: clamp(1.5rem, 1.1rem + 2.4vw, var(--bf-text-h2));
		line-height: var(--bf-leading-h1);
		letter-spacing: -0.022em;
		max-width: none;
	}

	.befello-hero__org {
		margin-top: var(--bf-space-3);
	}

	.befello-hero__deadline {
		margin-top: var(--bf-space-3);
	}

	/* --- Layout --------------------------------------------------------- */

	.befello-opportunity__layout {
		padding: 0 var(--bf-gutter) var(--bf-space-6);
		gap: var(--bf-space-5);
	}

	/* --- Key Information: compact 2-up fact grid ------------------------ */

	.befello-key-info {
		padding: var(--bf-space-4);   /* 16px gutter-matched padding (§18) */
	}

	.befello-key-info__heading {
		margin-bottom: var(--bf-space-3);
		padding-bottom: var(--bf-space-2);
	}

	.befello-key-info__list {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--bf-space-4) var(--bf-space-3);
	}

	/* Row borders would fight a grid; spacing separates them instead. */
	.befello-key-info__row {
		border-top: none;
		padding: 0;
		grid-template-columns: 1rem minmax(0, 1fr);
		column-gap: var(--bf-space-2);
	}

	/* Long values (nationality lists) get the full width back */
	.befello-key-info__row:last-child {
		grid-column: 1 / -1;
	}

	.befello-key-info__value {
		font-size: var(--bf-text-sm);
	}

	.befello-key-info__row .befello-icon {
		width: 0.95rem;
		height: 0.95rem;
	}

	/* Sidebar buttons are redundant with the fixed bottom bar; Official
	   Source stays, Apply doesn't need to appear three times. */
	.befello-key-info__actions {
		margin-top: var(--bf-space-4);
		padding-top: var(--bf-space-4);
	}

	.befello-key-info__actions .befello-btn--primary {
		display: none;
	}

	/* --- Sections: full-bleed dividers, block rhythm -------------------- */

	.befello-section {
		padding: var(--bf-space-6) 0;
		border-top: none;
		position: relative;
	}

	.befello-section::before {
		content: "";
		position: absolute;
		top: 0;
		left: calc(-1 * var(--bf-gutter));
		right: calc(-1 * var(--bf-gutter));
		height: 1px;
		background: var(--bf-border);
	}

	.befello-section:first-child::before {
		display: none;
	}

	/* §18: scale headings down, never body text. */
	.befello-section h2 {
		font-size: var(--bf-text-h4);   /* 20/28 */
		line-height: var(--bf-leading-h4);
		letter-spacing: -0.015em;
		margin-bottom: var(--bf-space-4);
	}

	.befello-prose,
	.befello-check-list li,
	.befello-doc-list li {
		max-width: none;   /* ch-based caps are desktop measures */
	}

	.befello-prose {
		line-height: 1.65;
	}

	/* --- Lists: tighter indents reclaim horizontal space ---------------- */

	/* Enough for the 24px numbered chip plus a readable gap — any less and
	   the number touches the document name. */
	.befello-doc {
		padding-left: 2.25rem;
	}

	/* --- Essay questions: always a rail on a phone ----------------------
	   One card at a time, edge to edge, swiped with a thumb — the native
	   pattern. It bleeds into the gutters so the next card peeks in from
	   the right, which is the only affordance that reliably says "there
	   is more this way" without an instruction.
	   -------------------------------------------------------------------- */

	.befello-essays__head {
		margin-bottom: var(--bf-space-4);
	}

	/* The arrows are for pointers and keyboards. On a touch screen the
	   swipe is the control, and two buttons would just take the room the
	   cards need. */
	.befello-essays__nav {
		display: none;
	}

	.befello-essays__track,
	.befello-essays__track--rail {
		display: flex;
		gap: var(--bf-space-3);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-inline: contain;
		scrollbar-width: none;
		/* Full-bleed: cancels the page gutter so a card can sit against
		   the edge, then restores it as scroll padding. */
		margin-inline: calc(-1 * var(--bf-gutter));
		padding-inline: var(--bf-gutter);
		scroll-padding-inline: var(--bf-gutter);
	}

	.befello-essays__track::-webkit-scrollbar,
	.befello-essays__track--rail::-webkit-scrollbar {
		display: none;
	}

	.befello-essays__track .befello-essays__item,
	.befello-essays__track--rail .befello-essays__item {
		/* 86%: the remainder is the next card showing through. */
		flex: 0 0 86%;
		scroll-snap-align: start;
	}

	.befello-essay-card {
		padding: var(--bf-space-5) var(--bf-space-4);
	}

	/* --- Eligibility + Benefits ----------------------------------------- */

	.befello-criteria__grid {
		gap: var(--bf-space-4);
	}

	.befello-criteria-card {
		padding: var(--bf-space-4);
	}

	/* --- Timeline ------------------------------------------------------- */

	.befello-timeline {
		--bf-timeline-date-w: 4.9rem;
		--bf-timeline-rail-w: 1.25rem;
	}

	.befello-timeline__item {
		column-gap: var(--bf-space-2);
	}

	.befello-timeline__date {
		font-size: var(--bf-text-xs);
	}

	.befello-timeline__content {
		padding-bottom: var(--bf-space-5);
	}

	.befello-timeline__label {
		font-size: var(--bf-text-sm);
	}

	/* --- Callout: full-bleed so it reads as a distinct block ------------ */

	.befello-callout {
		margin: var(--bf-space-6) calc(-1 * var(--bf-gutter)) 0;
		padding: var(--bf-space-5) var(--bf-gutter);
		border-radius: 0;
		border-right: none;
	}

	.befello-callout::before {
		display: none;
	}

	/* --- Touch targets -------------------------------------------------- */

	.befello-btn {
		min-height: 48px;   /* above the 44px floor; thumbs aren't precise */
		font-size: var(--bf-text-base);
	}

	/* §17: 44px targets on touch. Padding only — the labels stay where
	   they are, the hit areas grow around them. */
	.befello-more__toggle,
	.befello-doc__link {
		min-height: 44px;
		padding-block: var(--bf-space-3);
	}

	/* The footer Apply is redundant with the persistent bar */
	.befello-opportunity__actions--footer {
		display: none;
	}
}

/* Small phones: drop the 2-up fact grid before values start truncating. */
@media (max-width: 359.98px) {
	.befello-key-info__list {
		grid-template-columns: 1fr;
	}

	.befello-mobile-cta__inner {
		gap: var(--bf-space-3);
	}

	.befello-mobile-cta .befello-btn {
		padding-inline: var(--bf-space-5);
	}
}