/* ==========================================================================
   Lance — front page sections
   Values mirror the reference design at the 1200px+ breakpoint, with tablet
   (810-1199px) and phone (<=809px) overrides collected at the bottom.
   ========================================================================== */

/* Light surface tones reused by pills, cards, tags and captions. */
.lance-tone-blush { background: var(--lance-blush); }
.lance-tone-beige { background: var(--lance-beige); }
.lance-tone-mist { background: var(--lance-mist); }

/* Brand mark from assets/img/logo-mark.svg, shown beside the site name. */
.lance-brand__mark {
	flex: none;
	width: 28px;
	height: auto;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.lance-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	transition: box-shadow 0.3s var(--lance-ease-out-expo);
}

.lance-header.is-scrolled {
	box-shadow: 0 1px 0 rgba(var(--lance-line-rgb), 0.08);
}

/* Clear the WordPress admin bar for logged-in users (32px, 46px at <=782px). */
.admin-bar .lance-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .lance-header {
		top: 46px;
	}
}

.lance-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	height: var(--lance-header-h);
	padding: 12px 48px;
	background: var(--lance-bg);
}

.lance-nav__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
	max-width: var(--lance-container-nav);
}

.lance-nav__logo {
	display: flex;
	align-items: center;
	padding: 10px 0 10px 10px;
}

.lance-nav__wordmark,
.lance-nav__logo .custom-logo-link {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--lance-sans);
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--lance-text);
}

.lance-nav__links .lance-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
}

.lance-nav__links a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--lance-text);
	transition: opacity 0.3s var(--lance-ease-out-expo);
}

.lance-nav__links a:hover {
	opacity: 0.55;
}

/* Current page: a red rule under the label, chevron excluded. */
.lance-nav__links .menu-item.is-current > a,
.lance-nav__links .menu-item.is-current > .lance-menu__trigger > span {
	position: relative;
}

.lance-nav__links .menu-item.is-current > a::after,
.lance-nav__links .menu-item.is-current > .lance-menu__trigger > span::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -6px;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--lance-red);
}

/* Keep breathing room beside the logo just above the drawer breakpoint. */
@media (max-width: 1359px) {
	.lance-nav__links .lance-nav__list {
		gap: 24px;
	}
}

.lance-nav__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 24px;
}

.lance-nav__cta {
	flex: none;
}

/* Dropdown triggers and single-column panels, shared by the bar and drawer */
.lance-menu {
	position: relative;
}

.lance-menu__trigger {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--lance-text);
}

.lance-menu__trigger .lance-menu__chevron {
	flex: none;
	width: 16px;
	height: 16px;
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-menu__trigger[aria-expanded="true"] .lance-menu__chevron {
	transform: rotate(180deg);
}

.lance-menu__panel {
	display: none;
}

.lance-menu__trigger[aria-expanded="true"] + .lance-menu__panel {
	display: block;
}

.lance-nav__links .lance-menu__panel {
	position: absolute;
	top: calc(100% + 12px);
	left: -12px;
	z-index: 10;
	min-width: 240px;
	padding: 8px;
	border: 1px solid rgba(var(--lance-line-rgb), 0.08);
	border-radius: 12px;
	background: var(--lance-card);
	box-shadow: 0 16px 40px rgba(17, 18, 15, 0.12);
}

/* Invisible bridge so the pointer can cross the gap from trigger to panel. */
.lance-nav__links .lance-menu__panel::before {
	content: "";
	position: absolute;
	inset: -13px 0 auto;
	height: 13px;
}

.lance-nav__links .lance-menu__panel a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 22px;
	transition: background 0.2s linear;
}

.lance-nav__links .lance-menu__panel a:hover,
.lance-nav__links .lance-menu__panel a:focus-visible {
	background: var(--lance-beige);
	opacity: 1;
}

@media (hover: hover) {
	.lance-nav__links .lance-menu:hover > .lance-menu__panel {
		display: block;
	}

	.lance-nav__links .lance-menu:hover .lance-menu__chevron {
		transform: rotate(180deg);
	}
}

/* Light/dark switch. The ring is a pseudo-element inset inside the button, so it
   can sit tight around the glyph while the button keeps its full tap target. */
.lance-theme-toggle {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--lance-text);
	transition: opacity 0.3s var(--lance-ease-out-expo);
}

.lance-theme-toggle::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid var(--lance-card-line);
	border-radius: 999px;
	transition: border-color 0.3s var(--lance-ease-out-expo);
}

.lance-theme-toggle:hover {
	opacity: 0.75;
}

.lance-theme-toggle:hover::before {
	border-color: var(--lance-text);
}

.lance-theme-toggle__icon {
	width: 18px;
	height: 18px;
}

/* Both glyphs ship in the markup; CSS shows the one for the theme you would
   switch to, so the control is right before any script runs. Mirrors the token
   block in style.css: system setting first, explicit choice second. */
.lance-theme-toggle__icon--sun {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .lance-theme-toggle__icon--sun {
		display: block;
	}

	:root:not([data-theme="light"]) .lance-theme-toggle__icon--moon {
		display: none;
	}
}

:root[data-theme="dark"] .lance-theme-toggle__icon--sun {
	display: block;
}

:root[data-theme="dark"] .lance-theme-toggle__icon--moon {
	display: none;
}

/* In the drawer it sits alongside the login link, at touch size. */
.lance-drawer__theme {
	width: 44px;
	height: 44px;
}

/* Hamburger, phone only */
.lance-nav__toggle {
	display: none;
	width: 44px;
	height: 44px;
	place-items: center;
}

.lance-nav__bars,
.lance-nav__bars::before,
.lance-nav__bars::after {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--lance-text);
	border-radius: 2px;
	transition: transform 0.3s var(--lance-ease-out-expo), opacity 0.2s linear;
}

.lance-nav__bars::before,
.lance-nav__bars::after {
	content: "";
	position: relative;
}

.lance-nav__bars::before { top: -7px; }
.lance-nav__bars::after { top: 5.5px; }

[aria-expanded="true"] .lance-nav__bars { background: transparent; }
[aria-expanded="true"] .lance-nav__bars::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .lance-nav__bars::after { transform: translateY(-5.5px) rotate(-45deg); }

/* Below 1024px the bar collapses into the drawer. Kept after the toggle's
   base rule so the override wins. */
@media (max-width: 1023px) {
	.lance-nav__links,
	.lance-nav__actions {
		display: none;
	}

	.lance-nav__toggle {
		display: grid;
	}
}

.lance-drawer {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-height: calc(100dvh - var(--lance-header-h));
	padding: 8px 24px 32px;
	overflow-y: auto;
	background: var(--lance-bg);
	border-bottom: 1px solid rgba(var(--lance-line-rgb), 0.08);
}

.lance-drawer[hidden] {
	display: none;
}

.lance-drawer__links .lance-nav__list {
	display: flex;
	flex-direction: column;
}

.lance-drawer__links .lance-nav__list > li + li {
	border-top: 1px solid rgba(var(--lance-line-rgb), 0.08);
}

.lance-drawer__links a,
.lance-drawer .lance-menu__trigger {
	display: block;
	padding: 12px 0;
	font-size: 18px;
	line-height: 27px;
	color: var(--lance-text);
}

/* Drawer dropdowns expand in place as an accordion. */
.lance-drawer .lance-menu__trigger {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.lance-drawer .lance-menu__trigger .lance-menu__chevron {
	width: 20px;
	height: 20px;
}

.lance-drawer .lance-menu__panel {
	padding: 0 0 12px 16px;
}

.lance-drawer .lance-menu__panel a {
	padding: 8px 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--lance-muted);
}

.lance-drawer__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.lance-drawer__login {
	font-size: 18px;
	line-height: 27px;
	color: var(--lance-text);
}

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

.lance-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	padding: 84px 25px 32px;
	overflow: clip;
	background: var(--lance-ivory);
}

.lance-hero__card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 32px;
	width: 100%;
	max-width: var(--lance-container);
	height: 632px;
	padding: 16px;
	border-radius: 20px;
	background: linear-gradient(75deg, var(--lance-hero-tint-a) 0%, var(--lance-hero-tint-b) 100%);
	overflow: hidden;
}

/* Supplied blob artwork behind the headline column, drawn larger than the card
   and hung off its top-left so the card's own overflow crops the top, left and
   bottom the way the source artwork is framed. The right side stays inside, so
   the blob still stops short of the photo. The file carries its own colours at
   full strength, so no tinting here. Negative z-index keeps it under the copy
   inside the card's stack. */
.lance-hero__card::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -9%;
	left: -7%;
	width: 66%;
	height: 119%;
	background: url("../img/hero-bg.svg") no-repeat center / cover;
	pointer-events: none;
}

/* The blob's fill lives inside the file, so dark mode swaps in its twin. Only
   dark readers fetch it; the light theme is untouched. Two selectors for the
   same reason as the token block in style.css: system setting, then choice. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .lance-hero__card::before {
		background-image: url("../img/hero-bg-dark.svg");
	}
}

:root[data-theme="dark"] .lance-hero__card::before {
	background-image: url("../img/hero-bg-dark.svg");
}

.lance-hero__body {
	display: flex;
	flex: 1 1 592px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 72px;
	min-width: 0;
	padding-left: 20px;
}

.lance-hero__content {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	max-width: 572px;
}

.lance-hero__title {
	font-size: 56px;
	line-height: 61.6px;
	letter-spacing: normal;
	text-wrap: balance;
	color: var(--lance-text);
}

.lance-hero__sub {
	max-width: 520px;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: normal;
	color: var(--lance-muted);
}

.lance-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
}

/* Trust line and channel audience share one row at the foot of the hero. */
.lance-hero__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 0;
}

.lance-hero__trust {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-right: 18px;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: normal;
	color: var(--lance-text);
}

.lance-hero__social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding-left: 18px;
	border-left: 1px solid var(--lance-card-line);
	font-size: 16px;
	line-height: 24px;
	color: var(--lance-muted);
}

/* The channel marks carry their own brand fills, so they are not tinted. */
.lance-hero__brand {
	flex: none;
	width: 22px;
	height: 22px;
}

.lance-hero__social-name {
	font-weight: 500;
	color: var(--lance-text);
}

.lance-hero__social-sep {
	color: var(--lance-muted);
}

.lance-hero__dot {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: var(--lance-red);
}

.lance-hero__media {
	flex: 0 0 540px;
	align-self: stretch;
	border-radius: 20px;
	overflow: hidden;
}

/* The photo is landscape in a portrait frame; bias the crop so both faces stay in view. */
.lance-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 35%;
}

/* --------------------------------------------------------------------------
   Statement section with the dot grid
   -------------------------------------------------------------------------- */

.lance-about {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 0 var(--lance-section-x);
}

.lance-about__grid {
	position: absolute;
	inset: 0;
	opacity: 0.035;
	/* Ink, not a surface colour: it has to flip with the theme or the dots vanish. */
	background-image: radial-gradient(circle, rgb(var(--lance-line-rgb)) 2px, transparent 2.1px);
	background-size: 15px 15px;
	background-position: 0 -52px;
	pointer-events: none;
}

/* Light dots on a dark ground read weaker than dark dots on a light one. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .lance-about__grid {
		opacity: 0.05;
	}
}

:root[data-theme="dark"] .lance-about__grid {
	opacity: 0.05;
}

/* Cards sit in the four corners of a grid around the statement, so the gaps
   above and below it stay equal however the text wraps. */
.lance-about__inner {
	position: relative;
	display: grid;
	grid-template-columns: 380px 1fr 380px;
	grid-template-areas:
		"tl . tr"
		"center center center"
		"bl . br";
	align-content: center;
	row-gap: 48px;
	width: 100%;
	max-width: var(--lance-container);
	min-height: 700px;
	padding-block: 98px;
}

.lance-about__center {
	grid-area: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.lance-about__title {
	max-width: 900px;
	margin-inline: auto;
	font-size: 45px;
	line-height: 49.5px;
	letter-spacing: -0.04em;
	text-align: center;
}

/* One sentence per line, balanced so narrow screens avoid one-word orphans. */
.lance-about__line {
	display: block;
	text-wrap: balance;
}

.lance-about__sub {
	max-width: 520px;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: normal;
	text-wrap: pretty;
	color: var(--lance-muted);
}

/* Ghost buttons default to white text for dark cards; this one sits on the light grid. */
/* Starting-point cards ringing the statement; each links to a guide or service page. */
.lance-pill {
	display: flex;
	align-items: center;
	align-self: start;
	gap: 16px;
	padding: 14px 18px 14px 14px;
	border: 1px solid var(--lance-card-line);
	border-radius: 12px;
	background: var(--lance-card);
}

/* Extends the reveal transition so hover eases instead of snapping. */
.lance-pill.is-visible {
	transition: opacity 1.6s var(--lance-ease-out-expo), transform 1.6s var(--lance-ease-out-expo), border-color 0.3s ease, box-shadow 0.3s ease;
}

.lance-pill:hover {
	border-color: rgba(217, 15, 25, 0.35);
	box-shadow: 0 8px 24px rgba(37, 40, 33, 0.08);
}

.lance-pill--top-left { grid-area: tl; }
.lance-pill--top-right { grid-area: tr; }
.lance-pill--bottom-left { grid-area: bl; }
.lance-pill--bottom-right { grid-area: br; }

/* Service illustrations are cropped tight to the drawing, so the box is the drawing size. */
.lance-pill__icon {
	flex: none;
	width: 56px;
	height: 56px;
}

.lance-pill__icon img {
	width: 100%;
	height: 100%;
}

.lance-pill__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.lance-pill__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.01em;
	text-wrap: balance;
	color: var(--lance-text);
}

.lance-pill__text {
	font-size: 15px;
	line-height: 22px;
	letter-spacing: 0.01em;
	color: var(--lance-card-text);
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.lance-services .lance-container {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.lance-services__title {
	max-width: 650px;
}

/* Equal-height rows: every card matches the tallest one at any column count. */
.lance-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 24px;
}

.lance-scard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 24px;
	border-radius: 20px;
	text-align: center;
}

/* White tile holding a detailed line illustration, sized so its fine strokes stay
   legible. --lance-plate rather than --lance-card: the tile has to stay light in
   dark mode or the illustration's dark ink disappears into it. */
.lance-scard__icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 12px;
	background: var(--lance-plate);
}

.lance-scard__icon img {
	width: 56px;
	height: 56px;
}

.lance-scard__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.lance-scard__title {
	font-size: 24px;
	line-height: 28.8px;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lance-scard__desc {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Marquee primitive — used by Work and the benefit rows
   -------------------------------------------------------------------------- */

.lance-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.lance-marquee__track {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: max-content;
	animation: lance-drift var(--lance-marquee-duration, 40s) linear infinite;
}

.lance-marquee[data-lance-marquee-reverse] .lance-marquee__track {
	animation-direction: reverse;
}

.lance-marquee:hover .lance-marquee__track,
.lance-marquee:focus-within .lance-marquee__track {
	animation-play-state: paused;
}

@keyframes lance-drift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-50% - var(--lance-marquee-gap, 0px) / 2), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.lance-marquee__track {
		animation: none;
	}

	.lance-marquee {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
}

/* --------------------------------------------------------------------------
   Work
   -------------------------------------------------------------------------- */

.lance-work .lance-container {
	display: flex;
	flex-direction: column;
	gap: 64px;
	margin-bottom: 64px;
}

.lance-work__viewport {
	max-width: var(--lance-container);
	margin-inline: auto;
}

.lance-work__track {
	--lance-marquee-gap: 24px;
	gap: 24px;
}

.lance-work__item {
	flex: none;
	width: 960px;
	scroll-snap-align: center;
}

.lance-wcard {
	display: flex;
	flex-direction: row;
	gap: 8px;
	height: 450px;
}

.lance-wcard__media {
	position: relative;
	flex: 0 0 452px;
	border-radius: 24px;
	overflow: hidden;
}

.lance-wcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lance-wcard__tag {
	position: absolute;
	bottom: 16px;
	left: 16px;
	padding: 6px 12px;
	border-radius: 100px;
	font-family: var(--lance-label);
	font-size: 12px;
	line-height: 13.2px;
	letter-spacing: 0.05em;
	color: var(--lance-text);
}

.lance-wcard__body {
	display: flex;
	flex: 1 1 500px;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: 24px;
	border-radius: 24px;
	background: var(--lance-surface);
}

.lance-wcard__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lance-wcard__title {
	font-size: 24px;
	font-weight: 500;
	line-height: 31.2px;
	letter-spacing: normal;
}

.lance-wcard__desc {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
}

/* Feature boxes and the card's call to action share the bottom of the card. */
.lance-wcard__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.lance-wcard__stats {
	display: flex;
	flex-direction: row;
	gap: 24px;
	align-self: stretch;
}

.lance-wstat {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 12px;
	border-radius: 8px;
	background: var(--lance-card);
}

/* Feature boxes hold short phrases, not numbers, so a compact sans title keeps
   long words like "Coordination" inside narrow boxes. */
.lance-wstat__value {
	margin: 0;
	font-family: var(--lance-sans);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: normal;
	text-wrap: balance;
}

.lance-wstat__label {
	font-size: 15px;
	line-height: 22px;
	letter-spacing: 0.01em;
	color: var(--lance-muted);
}

@media (max-width: 809px) {
	.lance-wcard__stats {
		gap: 12px;
	}

	.lance-wstat__value {
		font-size: 16px;
		line-height: 22px;
	}

	.lance-wstat__label {
		font-size: 14px;
		line-height: 20px;
	}
}

/* --------------------------------------------------------------------------
   Stats and benefit rows
   -------------------------------------------------------------------------- */

.lance-stats .lance-container {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.lance-stats__cards {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.lance-stats__panel {
	display: flex;
	flex-direction: row;
	gap: 8px;
	height: 420px;
}

.lance-stats__media {
	flex: 0 0 682px;
	border-radius: 20px;
	overflow: hidden;
}

.lance-stats__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

.lance-stats__content {
	display: flex;
	flex: 1 1 446px;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	min-width: 0;
	padding: 32px;
	border-radius: 20px;
	background: var(--lance-surface);
}

.lance-stats__list {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.lance-stats__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.lance-stats__icon {
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	color: var(--lance-text);
}

.lance-stats__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lance-stats__title {
	margin: 0;
	font-family: var(--lance-sans);
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
	letter-spacing: normal;
}

.lance-stats__item p {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
}

.lance-stats__cta {
	align-self: flex-start;
}

.lance-benefits {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lance-benefits__row {
	height: 36px;
}

.lance-benefits__track {
	--lance-marquee-gap: 24px;
	gap: 24px;
}

.lance-benefits__pill {
	flex: none;
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--lance-surface);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

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

.lance-compare .lance-container {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.lance-compare__cols {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
	max-width: 800px;
	margin-inline: auto;
}

.lance-compare__col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.lance-compare__label {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lance-compare__label p {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
}

.lance-compare__col--them .lance-compare__label p {
	color: var(--lance-muted-warm);
}

.lance-compare__badge {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--lance-surface);
	color: var(--lance-text);
}

.lance-compare__badge .lance-icon {
	width: 13px;
	height: 13px;
}

.lance-compare__badge--dark {
	background: var(--lance-red);
	color: var(--lance-on-accent);
}

.lance-compare__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border: 1px solid transparent;
	border-radius: 20px;
}

.lance-compare__col--them .lance-compare__list {
	background: var(--lance-surface);
}

/* Ours reads as the lighter of the two: page ground with a hairline outline
   rather than a filled dark panel. */
.lance-compare__col--us .lance-compare__list {
	border-color: var(--lance-text);
	background: var(--lance-card);
}

.lance-compare__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
}

.lance-compare__row::after {
	content: "";
	position: absolute;
	inset: 0;
	border-bottom: 1px solid rgba(var(--lance-line-rgb), 0.08);
	pointer-events: none;
}

.lance-compare__col--us .lance-compare__row::after {
	border-bottom-color: rgba(var(--lance-line-rgb), 0.08);
}

.lance-compare__row:last-child::after {
	border-bottom: 0;
}

.lance-compare__row p {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
}

.lance-compare__mark {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
}

.lance-compare__mark--no {
	background: var(--lance-mist);
	color: var(--lance-muted);
}

.lance-compare__mark--no .lance-icon {
	width: 20px;
	height: 20px;
	stroke-width: 2.5;
	transform: rotate(45deg);
}

.lance-compare__mark--yes {
	background: var(--lance-red);
	color: var(--lance-on-accent);
}

.lance-compare__mark--yes .lance-icon {
	width: 14px;
	height: 14px;
	stroke-width: 2.5;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.lance-quotes .lance-container {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.lance-head--left {
	max-width: 850px;
	margin-inline: 0;
	align-items: flex-start;
	text-align: left;
}

.lance-head--left .lance-head__text {
	align-items: flex-start;
}

.lance-head--wide {
	max-width: 850px;
}

.lance-head--narrow {
	max-width: 650px;
}

.lance-quotes__track {
	display: flex;
	flex-direction: row;
	gap: 24px;
}

.lance-qcard {
	position: relative;
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	min-height: 450px;
	border-radius: 20px;
	overflow: hidden;
}

.lance-qcard--blush { background: var(--lance-blush); }
.lance-qcard--beige { background: var(--lance-beige); }

.lance-qcard__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lance-qcard__overlay {
	position: absolute;
	inset: 0;
	opacity: 0.92;
	background-image: linear-gradient(rgba(0, 0, 0, 0.58) 0%, rgb(0, 0, 0) 100%);
}

/* In flow so longer stories grow the card instead of overflowing it. */
.lance-qcard__body {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	padding: 24px;
}

.lance-qcard--image {
	color: var(--lance-on-dark);
}

.lance-qcard__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

/* Client logo as a mask, so it takes the card's text colour on light and dark cards. */
.lance-qcard__logo {
	display: block;
	height: 52px;
	max-width: 100%;
	background-color: currentColor;
	opacity: 0.82;
	-webkit-mask: var(--lance-logo) left center / contain no-repeat;
	mask: var(--lance-logo) left center / contain no-repeat;
}

.lance-qcard__title {
	color: inherit;
	font-size: 28px;
	line-height: 32px;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lance-qcard__quote {
	margin: 0;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: normal;
	color: inherit;
}

.lance-qcard__person {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lance-qcard__avatar {
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 999px;
	object-fit: cover;
}

/* Stand-in until a buyer photo is supplied. */
.lance-qcard__avatar--blank {
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.55);
	color: var(--lance-text);
}

.lance-qcard--image .lance-qcard__avatar--blank {
	background: rgba(255, 255, 255, 0.14);
	color: var(--lance-on-dark);
}

.lance-qcard__avatar--blank .lance-icon {
	width: 24px;
	height: 24px;
}

.lance-qcard__meta {
	min-width: 0;
}

.lance-qcard__name,
.lance-qcard__role {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
	color: inherit;
}

.lance-dots {
	display: none;
	justify-content: center;
	gap: 8px;
}

.lance-dots button {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(var(--lance-line-rgb), 0.2);
	transition: background 0.3s var(--lance-ease-out-expo), width 0.3s var(--lance-ease-out-expo);
}

.lance-dots button[aria-current="true"] {
	width: 20px;
	background: var(--lance-dark);
}

/* --------------------------------------------------------------------------
   How it works: stacked expandable steps and the fee bar
   -------------------------------------------------------------------------- */

.lance-steps .lance-container {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.lance-steps__dot {
	color: var(--lance-red);
}

/* Without JavaScript the steps are a plain list with every step expanded. */
.lance-steps__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.lance-step {
	position: relative;
	border: 1px solid var(--lance-card-line);
	border-radius: 24px;
	background: var(--lance-card);
	box-shadow: 0 -12px 32px -26px rgba(17, 18, 15, 0.4);
}

/* One palette tone per step, front to back: Warm White, Soft Blush,
   Warm Beige, Mist Gray. */
.lance-step--blush {
	background: var(--lance-blush);
}

.lance-step--beige {
	background: var(--lance-beige);
}

.lance-step--mist {
	background: var(--lance-mist);
}

/* Deck: once initDecks has measured the cards, they stack like the reference.
   Cards behind show only their header strip and sit a little narrower; the
   front card is widest and shows its content. --slot runs 0 (back) to count-1 (front). */
.lance-deck {
	--deck-step: 60px;
	--deck-inset: 36px;
}

.lance-deck.is-ready {
	position: relative;
	display: block;
	height: var(--deck-h);
	transition: height 0.6s var(--lance-ease-out-expo);
}

.lance-deck.is-ready .lance-step {
	position: absolute;
	top: 0;
	right: calc((var(--deck-count) - 1 - var(--slot)) * var(--deck-inset));
	left: calc((var(--deck-count) - 1 - var(--slot)) * var(--deck-inset));
	z-index: var(--slot);
	height: var(--deck-card-h);
	overflow: hidden;
	transform: translateY(calc(var(--slot) * var(--deck-step)));
	transition:
		transform 0.6s var(--lance-ease-out-expo),
		left 0.6s var(--lance-ease-out-expo),
		right 0.6s var(--lance-ease-out-expo),
		height 0.6s var(--lance-ease-out-expo);
}

.lance-deck.is-ready .lance-step__panel {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.lance-deck.is-ready .lance-step.is-front .lance-step__panel {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease 0.2s, visibility 0s;
}

.lance-deck.is-ready .lance-step__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lance-deck.is-measuring,
.lance-deck.is-measuring .lance-step,
.lance-deck.is-measuring .lance-step__panel {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.lance-deck.is-ready {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lance-deck .lance-step,
	.lance-deck .lance-step__panel {
		transition: none !important;
	}
}

.lance-step__heading {
	margin: 0;
	color: inherit;
	font: inherit;
}

/* Header height matches the visible strip, so back cards show the whole header. */
.lance-step__toggle {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: var(--deck-step, 60px);
	padding: 0 20px 0 28px;
	border: 0;
	background: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.lance-step.is-front .lance-step__toggle {
	cursor: default;
}

.lance-step__number {
	flex: none;
	padding-right: 16px;
	border-right: 1px solid var(--lance-card-line);
	color: var(--lance-red);
	font-family: var(--lance-serif);
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -0.02em;
}

.lance-step__title {
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	font-family: var(--lance-serif);
	font-size: 20px;
	line-height: 26px;
	letter-spacing: -0.02em;
}

.lance-step__marker {
	position: relative;
	flex: none;
	width: 32px;
	height: 32px;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: 0.6;
	transition: opacity 0.3s var(--lance-ease-out-expo);
}

.lance-step__marker::before,
.lance-step__marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.4s var(--lance-ease-out-expo);
}

.lance-step__marker::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.lance-step__toggle[aria-expanded="true"] .lance-step__marker::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.lance-step__toggle:hover .lance-step__marker,
.lance-step__toggle:focus-visible .lance-step__marker {
	opacity: 1;
}

.lance-step__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: center;
	gap: 32px;
	margin: 0 28px;
	padding: 28px 0 32px;
	border-top: 1px solid var(--lance-card-line);
}

.lance-step__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.lance-step__lead {
	margin: 0;
	font-family: var(--lance-serif);
	font-size: 26px;
	line-height: 32px;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.lance-step__text {
	max-width: 440px;
	margin: 0;
	color: var(--lance-muted);
	font-size: 16px;
	line-height: 24px;
}

.lance-step__receive {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
	padding: 10px 16px 10px 12px;
	border-radius: 14px;
	background: var(--lance-beige);
}

/* On a tinted card the inner tiles flip to white so they stay separate. */
.lance-step--blush .lance-step__receive,
.lance-step--beige .lance-step__receive,
.lance-step--mist .lance-step__receive {
	background: var(--lance-card);
}

.lance-step__receive-icon {
	flex: none;
	width: 24px;
	height: 24px;
}

.lance-step__receive-icon .lance-icon {
	width: 100%;
	height: 100%;
}

.lance-step__receive-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lance-step__receive-value {
	display: block;
	font-size: 16px;
	line-height: 22px;
}

/* Sample outputs inside the steps. Illustrative only, always tagged "Sample". */
.lance-sample-tag {
	flex: none;
	padding: 2px 8px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.6;
}

.lance-sample {
	padding: 24px;
	border-radius: 20px;
	background: var(--lance-beige);
	color: var(--lance-text);
}

.lance-step--blush .lance-sample,
.lance-step--beige .lance-sample,
.lance-step--mist .lance-sample {
	background: var(--lance-card);
}

.lance-sample__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.lance-sample__title {
	margin: 0;
	font-family: var(--lance-serif);
	font-size: 22px;
	line-height: 28px;
	letter-spacing: -0.02em;
}

.lance-sample__facts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0 0 18px;
	border-bottom: 1px solid rgba(var(--lance-line-rgb), 0.1);
	list-style: none;
}

.lance-sample__facts li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	line-height: 22px;
}

.lance-sample__facts li > span:last-child {
	color: var(--lance-muted);
}

.lance-sample__fact-icon {
	flex: none;
	width: 22px;
	height: 22px;
	margin-right: 4px;
}

.lance-sample__fact-icon .lance-icon {
	width: 100%;
	height: 100%;
}

/* Day timeline: dots on a shared line. */
.lance-sample__days {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 18px 0 0;
	padding: 22px 0 0;
	list-style: none;
	text-align: center;
}

.lance-sample__days::before {
	content: "";
	position: absolute;
	top: 5px;
	right: 16.66%;
	left: 16.66%;
	height: 1.5px;
	background: var(--lance-text);
	opacity: 0.3;
}

.lance-sample__days li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	line-height: 18px;
}

.lance-sample__days li::before {
	content: "";
	position: absolute;
	top: -22px;
	left: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--lance-red);
	transform: translateX(-50%);
}

.lance-sample__days span {
	color: var(--lance-muted);
}

.lance-sample__orders {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-sample__orders li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid rgba(var(--lance-line-rgb), 0.1);
}

.lance-sample__orders li > div {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--lance-muted);
	font-size: 13px;
	line-height: 19px;
}

.lance-sample__orders strong,
.lance-sample__stage strong {
	color: var(--lance-text);
	font-size: 15px;
	line-height: 22px;
}

.lance-sample__status {
	flex: none;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	white-space: nowrap;
}

.lance-sample__status--done {
	background: var(--lance-success-bg);
	color: var(--lance-success);
}

.lance-sample__status--active {
	background: var(--lance-blush);
	color: var(--lance-red-deep);
}

.lance-sample__status--pending {
	background: rgba(var(--lance-line-rgb), 0.08);
	color: var(--lance-muted);
}

/* Shipment tracker: a vertical line through the stage dots. */
.lance-sample__track {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-sample__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-left: 30px;
	color: var(--lance-muted);
	font-size: 13px;
	line-height: 19px;
}

.lance-sample__stage::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	z-index: 1;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(var(--lance-line-rgb), 0.25);
	border-radius: 50%;
	background: var(--lance-card);
}

.lance-sample__stage:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 18px;
	bottom: -18px;
	left: 6px;
	width: 2px;
	background: rgba(var(--lance-line-rgb), 0.15);
}

.lance-sample__stage--done::before {
	border-color: var(--lance-success);
	background: var(--lance-success);
}

.lance-sample__stage--active::before {
	border-color: var(--lance-red);
	box-shadow: 0 0 0 4px rgba(245, 22, 34, 0.15);
}

/* Sample sourcing sheet, shared by the summary section and step 02. */
.lance-sheet {
	width: 100%;
	padding: 24px;
	border: 1px solid var(--lance-card-line);
	border-radius: 20px;
	background: var(--lance-card);
	color: var(--lance-text);
	box-shadow: 0 24px 48px -32px rgba(17, 18, 15, 0.35);
}

.lance-sheet__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--lance-card-line);
}

.lance-sheet__title {
	margin: 0;
	font-family: var(--lance-serif);
	font-size: 22px;
	line-height: 28px;
	letter-spacing: -0.02em;
}

.lance-sheet__meta {
	margin: 2px 0 0;
	color: var(--lance-muted);
	font-size: 13px;
	line-height: 18px;
}

.lance-sheet__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-sheet__row {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--lance-card-line);
}

.lance-sheet__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.lance-sheet__thumb {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	color: rgba(var(--lance-line-rgb), 0.45);
}

.lance-sheet__thumb .lance-icon {
	width: 22px;
	height: 22px;
}

.lance-sheet__name {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
}

.lance-sheet__booth {
	margin: 2px 0 0;
	color: var(--lance-muted);
	font-size: 13px;
	line-height: 18px;
}

.lance-sheet__facts {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 18px;
	margin: 0;
	text-align: right;
}

.lance-sheet__facts div {
	display: flex;
	flex-direction: column;
}

.lance-sheet__facts dt {
	color: var(--lance-muted);
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lance-sheet__facts dd {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.lance-sheet--compact {
	padding: 20px;
}

.lance-sheet--compact .lance-sheet__facts {
	gap: 12px;
}

/* Fee bar under the steps */
.lance-fee {
	display: flex;
	align-items: center;
	gap: 32px;
	width: 100%;
	max-width: 1116px;
	margin: -24px auto 0;
	padding: 24px 32px 24px 40px;
	border-radius: 24px;
	/* Same dark ground as the action bars, so the section still closes on one. */
	background: var(--lance-forest);
	color: var(--lance-on-dark);
}

.lance-fee__value {
	display: flex;
	flex: none;
	flex-direction: column;
	margin: 0;
	padding-right: 32px;
	border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.lance-fee__from {
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lance-fee__number {
	color: var(--lance-red);
	font-family: var(--lance-serif);
	font-size: 56px;
	line-height: 60px;
	letter-spacing: -0.04em;
}

.lance-fee__text {
	flex: 1 1 auto;
	min-width: 0;
}

.lance-fee__title {
	margin: 0;
	font-family: var(--lance-serif);
	font-size: 22px;
	line-height: 28px;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.lance-fee__title + p {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 15px;
	line-height: 22px;
}

.lance-fee__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 24px;
}

.lance-fee__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lance-fee__arrow {
	flex: none;
	width: 18px;
	height: 18px;
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-fee__link:hover .lance-fee__arrow {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.lance-faq .lance-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}

.lance-faq__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 650px;
}

.lance-faq__item,
:is(.bp-body,.dg-body) details {
	border-radius: 12px;
	background: var(--lance-beige);
}

.lance-faq__question,
:is(.bp-body,.dg-body) details > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	width: 100%;
	padding: 20px;
	text-align: left;
}

.lance-faq__q-text {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
	color: var(--lance-text);
}

.lance-faq__marker {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--lance-card);
	color: var(--lance-text);
	transition: transform 0.4s var(--lance-ease-out-expo);
}

.lance-faq__marker .lance-icon {
	width: 18px;
	height: 18px;
}

.lance-faq__question[aria-expanded="true"] .lance-faq__marker {
	transform: rotate(135deg);
}

.lance-faq__panel {
	overflow: hidden;
}

.lance-faq__panel[hidden] {
	display: none;
}

.lance-faq__answer {
	padding: 0 20px 20px;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
	color: var(--lance-text);
	opacity: 0.72;
}

/* --------------------------------------------------------------------------
   Inside Yiwu Market videos
   -------------------------------------------------------------------------- */

.lance-videos .lance-container {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.lance-videos__channels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 0;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.lance-videos__channel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-inline: 18px;
	font-size: 16px;
	line-height: 24px;
}

.lance-videos__channel + .lance-videos__channel {
	border-left: 1px solid var(--lance-card-line);
}

.lance-videos__channel span {
	color: var(--lance-muted);
}

.lance-videos__brand {
	flex: none;
	width: 26px;
	height: 26px;
}

.lance-videos__byline {
	margin: -8px 0 0;
	color: var(--lance-muted-warm);
	font-size: 14px;
	line-height: 20px;
}

.lance-videos__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 16px;
}

/* Shared play control: covers its media so the whole thumbnail is clickable. */
.lance-play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.lance-play__icon {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--lance-red);
	box-shadow: 0 12px 32px -8px rgba(17, 18, 15, 0.5);
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-play__icon::before {
	content: "";
	width: 26px;
	height: 30px;
	margin-left: 6px;
	background: #ffffff;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.lance-play:hover .lance-play__icon,
.lance-play:focus-visible .lance-play__icon {
	transform: scale(1.08);
}

/* Decorative play mark on a placeholder: nothing to click yet. */
span.lance-play {
	cursor: default;
	pointer-events: none;
}

.lance-video__frame {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	border: 0;
}

[data-lance-video-media].is-playing .lance-play,
[data-lance-video-media].is-playing .lance-video__caption,
[data-lance-video-media].is-playing .lance-video__duration {
	display: none;
}

/* Featured video */
.lance-video {
	position: relative;
	min-height: 488px;
	border-radius: 24px;
	background: var(--lance-hero);
	overflow: hidden;
}

.lance-video::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(17, 18, 15, 0) 45%, rgba(17, 18, 15, 0.72) 100%);
	pointer-events: none;
}

.lance-video.is-playing::after {
	display: none;
}

.lance-video__img,
.lance-vcard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lance-video__caption {
	position: absolute;
	right: 120px;
	bottom: 28px;
	left: 32px;
	z-index: 3;
	color: var(--lance-on-dark);
	pointer-events: none;
}

.lance-video__title {
	color: var(--lance-on-dark);
	font-size: 42px;
	line-height: 46px;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lance-video__sub {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	line-height: 26px;
}

.lance-video__duration {
	position: absolute;
	right: 24px;
	bottom: 30px;
	z-index: 3;
	padding: 3px 10px;
	border-radius: 8px;
	background: rgba(17, 18, 15, 0.72);
	color: var(--lance-on-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* Guide video cards */
.lance-videos__side {
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.lance-vcard {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	align-items: center;
	gap: 24px;
	padding: 12px 24px 12px 12px;
	border-radius: 24px;
	background: var(--lance-surface);
}

.lance-vcard__media {
	position: relative;
	align-self: stretch;
	min-height: 200px;
	border-radius: 16px;
	background: var(--lance-hero);
	overflow: hidden;
}

.lance-vcard__media .lance-play__icon {
	width: 52px;
	height: 52px;
	background: rgba(17, 18, 15, 0.72);
}

.lance-vcard__media .lance-play__icon::before {
	width: 16px;
	height: 18px;
	margin-left: 4px;
}

.lance-vcard__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.lance-vcard__kicker {
	margin: 0;
	color: var(--lance-muted-warm);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.16em;
}

.lance-vcard__title {
	font-size: 28px;
	line-height: 32px;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lance-vcard__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	color: var(--lance-red-deep);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.lance-vcard__arrow {
	flex: none;
	width: 18px;
	height: 18px;
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-vcard__link:hover .lance-vcard__arrow {
	transform: translateX(4px);
}

/* Ask-about-a-product bar */
.lance-videos__ask {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: -32px;
	padding: 28px 32px 28px 48px;
	border-radius: 24px;
	background: var(--lance-forest);
	color: var(--lance-on-dark);
}

.lance-videos__ask-title {
	color: var(--lance-on-dark);
	font-size: 32px;
	line-height: 38px;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lance-videos__ask-text p {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 17px;
	line-height: 26px;
}

.lance-videos__ask .lance-btn {
	flex: none;
}

/* Channel links */
.lance-videos__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: -16px;
	padding-top: 24px;
	border-top: 1px solid var(--lance-card-line);
}

.lance-videos__more > p {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.lance-videos__follow {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lance-social-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border: 1px solid var(--lance-card-line);
	border-radius: 999px;
	background: var(--lance-card);
	color: var(--lance-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	transition: border-color 0.3s var(--lance-ease-out-expo);
}

.lance-social-btn:hover {
	border-color: var(--lance-text);
}

.lance-social-btn__brand {
	flex: none;
	width: 24px;
	height: 24px;
}

.lance-social-btn__arrow {
	flex: none;
	width: 16px;
	height: 16px;
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.lance-cta__stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* iOS app promo */
.lance-cta__app {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	min-height: 440px;
	padding-right: 56px;
	border-radius: 32px;
	background: var(--lance-surface);
	overflow: hidden;
}

.lance-cta__device {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	align-self: stretch;
}

.lance-phone {
	position: absolute;
	top: 32px;
	left: 36%;
	width: 288px;
	padding: 10px;
	border-radius: 52px;
	background: var(--lance-dark);
	box-shadow: inset 0 0 0 2px #3b3c36, 0 32px 60px -24px rgba(17, 18, 15, 0.45);
	transform: translateX(-50%);
}

.lance-phone::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 50%;
	z-index: 1;
	width: 92px;
	height: 26px;
	border-radius: 999px;
	background: var(--lance-dark);
	transform: translateX(-50%);
}

.lance-phone__screen {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 42px;
}

.lance-cta__app-content {
	display: flex;
	grid-column: 2;
	grid-row: 1;
	flex-direction: column;
	align-items: flex-start;
	padding-block: 56px;
}

.lance-cta__kicker {
	margin: 0 0 16px;
	color: var(--lance-red-deep);
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.28em;
}

.lance-cta__title {
	font-size: 48px;
	line-height: 52px;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.lance-cta__text {
	max-width: 520px;
	margin: 18px 0 28px;
	color: var(--lance-muted);
	font-size: 18px;
	line-height: 27px;
	letter-spacing: normal;
}

.lance-cta__fine {
	margin: 20px 0 0;
	color: var(--lance-muted-warm);
	font-size: 14px;
	line-height: 20px;
}

/* Handwritten asides */
.lance-cta__note {
	position: absolute;
	margin: 0;
	color: var(--lance-muted-warm);
	font-family: var(--lance-hand);
	font-size: 26px;
	line-height: 1.3;
	white-space: nowrap;
	transform: rotate(-14deg);
	pointer-events: none;
}

.lance-cta__note::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	margin-top: 14px;
	border-radius: 2px;
	background: var(--lance-red);
}

.lance-cta__note--left {
	top: 112px;
	right: calc(50% + 44px);
	font-size: 23px;
}

.lance-cta__note--right {
	right: 44px;
	bottom: 52px;
	font-size: 22px;
	transform: rotate(-12deg);
}

/* Buying-trip bar */
.lance-cta__trip {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 220px;
	padding: 36px 48px 36px 56px;
	border-radius: 28px;
	background: var(--lance-forest);
	color: var(--lance-on-dark);
}

.lance-cta__trip-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.lance-cta__trip-title {
	color: var(--lance-on-dark);
	font-size: 36px;
	line-height: 42px;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lance-cta__trip-text p {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 17px;
	line-height: 26px;
	text-wrap: pretty;
}

.lance-cta__actions {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	gap: 16px;
}

.lance-btn--outline {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
	color: var(--lance-on-dark);
}

.lance-btn--outline:hover {
	filter: none;
	background: rgba(255, 255, 255, 0.08);
}

.lance-cta__skyline {
	position: relative;
	flex: 0 0 230px;
	align-self: stretch;
	color: rgba(255, 255, 255, 0.68);
}

.lance-cta__skyline-art {
	display: block;
	width: 100%;
	height: auto;
}

.lance-cta__note--sky {
	bottom: -6px;
	left: 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 17px;
	transform: rotate(-10deg);
}

.lance-cta__note--sky::after {
	width: 22px;
	height: 2px;
	margin-top: 8px;
	margin-left: auto;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* Same ground as the buying-trip bar above it, so the page closes on one dark
   tone rather than two. */
.lance-footer {
	display: flex;
	justify-content: center;
	padding: 96px 48px;
	border-radius: 20px 20px 0 0;
	background: var(--lance-forest);
	color: var(--lance-on-dark);
}

.lance-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 64px;
	width: 100%;
	max-width: var(--lance-container-wide);
}

.lance-footer__top {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 96px;
}

.lance-footer__brand {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.lance-footer__brand-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.lance-footer__wordmark {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lance-footer__wordmark .lance-brand__mark {
	width: 32px;
}

.lance-footer__wordmark h3 {
	font-family: var(--lance-sans);
	font-size: 24px;
	font-weight: 700;
	line-height: 31.2px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--lance-on-dark);
}

.lance-footer__tagline {
	max-width: 400px;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
}

.lance-footer__col {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 16px;
}

.lance-footer__col-title {
	font-size: 18px;
	line-height: 27px;
	letter-spacing: normal;
}

.lance-footer__links,
.lance-footer__links .lance-nav__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lance-footer__links a {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
	transition: opacity 0.3s var(--lance-ease-out-expo);
}

.lance-footer__links a:hover {
	opacity: 0.6;
}

.lance-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-top: 48px;
}

.lance-footer__bottom p {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
}

.lance-footer__company {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 15px;
	font-style: normal;
	line-height: 22px;
	opacity: 0.8;
}

.lance-footer__company a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lance-footer__policies {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-footer__policies a {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
	transition: opacity 0.3s var(--lance-ease-out-expo);
}

.lance-footer__policies a:hover {
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Interior pages
   -------------------------------------------------------------------------- */

/* On the homepage the hero's own top padding clears the fixed header; interior
   templates have no hero, so they reserve the header height here. */
.lance-page {
	padding: calc(var(--lance-header-h) + var(--lance-section-y)) var(--lance-section-x) 120px;
}

.lance-page--center {
	text-align: center;
}

.lance-page--center .lance-btn {
	margin-inline: auto;
}

.lance-page__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 48px;
}

.lance-page__title {
	font-size: 45px;
	line-height: 49.5px;
	letter-spacing: -0.04em;
}

.lance-page__meta,
.lance-page__intro {
	font-size: 18px;
	line-height: 27px;
	color: var(--lance-muted);
}

.lance-page__media {
	margin-bottom: 40px;
	border-radius: 20px;
	overflow: hidden;
}

.lance-prose > * + * {
	margin-top: 24px;
}

.lance-prose h2 {
	font-size: 31px;
	line-height: 34.1px;
	letter-spacing: -0.03em;
}

.lance-prose h3 {
	font-size: 24px;
	line-height: 28.8px;
	letter-spacing: -0.03em;
}

.lance-prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lance-prose ul,
.lance-prose ol {
	padding-left: 24px;
	list-style: revert;
}

.lance-prose img {
	border-radius: 12px;
}

.lance-prose blockquote {
	margin: 0;
	padding-left: 20px;
	border-left: 2px solid var(--lance-red);
	font-family: var(--lance-serif);
	font-size: 20px;
	line-height: 30px;
}

.lance-postlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 40px 24px;
}

.lance-postcard {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lance-postcard__media {
	display: block;
	border-radius: 20px;
	overflow: hidden;
}

.lance-postcard__media img {
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.lance-postcard__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lance-postcard__title {
	font-size: 24px;
	line-height: 28.8px;
	letter-spacing: -0.03em;
}

.lance-postcard__meta {
	font-size: 16px;
	color: var(--lance-muted);
}

.pagination,
.post-navigation {
	margin-top: 64px;
}

.pagination .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* ==========================================================================
   Yiwu Market page hero
   ========================================================================== */

/* The table of contents already reads as a divider, so the gap down to the
   next section is trimmed to two thirds of the usual section padding. */
.lance-mhero {
	padding-bottom: calc(var(--lance-section-y) * 2 / 3);
}

.lance-mhero .lance-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.lance-crumbs {
	align-self: flex-start;
	font-size: 14px;
	line-height: 20px;
	color: var(--lance-muted);
}

.lance-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-crumbs li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--lance-mist);
}

.lance-crumbs a:hover,
.lance-crumbs [aria-current="page"] {
	color: var(--lance-text);
}

.lance-mhero__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 820px;
	text-align: center;
}

/* Shared by the Yiwu Market hero and the sections under it. */
.lance-market-eyebrow {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lance-red);
}

.lance-mhero__title {
	font-family: var(--lance-serif);
	font-size: 72px;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lance-mhero__lead {
	max-width: 620px;
	font-size: 22px;
	font-weight: 500;
	line-height: 32px;
	color: var(--lance-text);
}

.lance-mhero__sub {
	max-width: 620px;
	font-size: 18px;
	line-height: 27px;
	color: var(--lance-muted);
}

.lance-mhero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px 32px;
	margin-top: 16px;
}

/* Market photo with the video chip and the districts card sitting on it. */
.lance-mhero__figure {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	margin: 0;
}

.lance-mhero__media {
	position: relative;
	aspect-ratio: 24 / 7;
	border-radius: 20px;
	overflow: hidden;
}

.lance-mhero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lance-mhero__chip,
.lance-mhero__card {
	position: absolute;
	bottom: 24px;
	background: var(--lance-card);
	box-shadow: 0 12px 32px -12px rgba(17, 18, 15, 0.45);
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-mhero__chip:hover,
.lance-mhero__card:hover {
	transform: translateY(-2px);
}

.lance-mhero__chip {
	left: 24px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px 10px 12px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--lance-text);
}

.lance-mhero__chip .lance-icon {
	flex: none;
	width: 28px;
	height: 28px;
}

.lance-mhero__card {
	right: 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 420px;
	padding: 16px 20px;
	border-radius: 16px;
}

.lance-mhero__card-icon {
	flex: none;
	width: 32px;
	height: 32px;
	color: var(--lance-text);
}

.lance-mhero__card-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lance-mhero__card-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	color: var(--lance-text);
}

.lance-mhero__card-sub {
	font-size: 14px;
	line-height: 20px;
	color: var(--lance-muted);
}

.lance-mhero__card-arrow {
	flex: none;
	width: 24px;
	height: 24px;
	margin-left: 8px;
	color: var(--lance-red);
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-mhero__card:hover .lance-mhero__card-arrow {
	transform: translateX(4px);
}

.lance-mhero__caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--lance-card-line);
}

.lance-mhero__note {
	font-size: 14px;
	line-height: 20px;
	color: var(--lance-muted);
}

.lance-mhero__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-mhero__links li {
	display: inline-flex;
	align-items: center;
}

.lance-mhero__links li + li::before {
	content: "\2022";
	margin: 0 14px;
	color: var(--lance-mist);
}

.lance-mhero__links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	line-height: 22px;
	color: var(--lance-muted);
}

.lance-mhero__links a:hover {
	color: var(--lance-text);
}

.lance-mhero__links .lance-icon {
	flex: none;
	width: 20px;
	height: 20px;
}

/* On this page. Static for now; nothing tracks the scrolled section yet. */
.lance-mhero__toc {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px 24px;
	width: 100%;
}

.lance-mhero__toc ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-mhero__toc a {
	display: inline-block;
	padding-bottom: 8px;
	border-bottom: 2px solid transparent;
	font-size: 16px;
	line-height: 24px;
	color: var(--lance-muted);
}

.lance-mhero__toc a:hover {
	color: var(--lance-text);
}

.lance-mhero__toc a.is-active {
	border-bottom-color: var(--lance-red);
	font-weight: 700;
	color: var(--lance-text);
}

/* --------------------------------------------------------------------------
   Yiwu Market: at a glance
   -------------------------------------------------------------------------- */

.lance-glance {
	padding-top: calc(var(--lance-section-y) * 2 / 3);
}

.lance-glance__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 64px;
	align-items: start;
}

.lance-glance__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.lance-glance__title {
	font-family: var(--lance-serif);
	font-size: 45px;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.lance-glance__lead {
	margin-top: 8px;
	font-family: var(--lance-sans);
	font-size: 22px;
	font-weight: 700;
	line-height: 30px;
	color: var(--lance-text);
}

.lance-glance__text {
	max-width: 520px;
	font-size: 17px;
	line-height: 27px;
	color: var(--lance-text);
}

.lance-glance__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	font-size: 17px;
	font-weight: 500;
	line-height: 26px;
	color: var(--lance-red);
	text-decoration: underline;
	text-underline-offset: 5px;
	transition: opacity 0.3s var(--lance-ease-out-expo);
}

.lance-glance__link:hover {
	opacity: 0.7;
}

.lance-glance__link-arrow {
	flex: none;
	width: 20px;
	height: 20px;
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-glance__link:hover .lance-glance__link-arrow {
	transform: translateX(4px);
}

.lance-glance__tip {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	margin-top: 16px;
	padding: 20px 24px;
	border-radius: 12px;
	background: var(--lance-beige);
}

.lance-glance__tip-icon {
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--lance-red);
}

.lance-glance__tip-text {
	padding-left: 20px;
	border-left: 1px solid var(--lance-mist);
}

.lance-glance__tip-label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lance-red);
}

.lance-glance__tip-text p {
	font-size: 16px;
	line-height: 24px;
	color: var(--lance-text);
}

.lance-glance__facts {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lance-glance__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-glance__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 220px;
	padding: 32px 24px;
	border: 1px solid var(--lance-card-line);
	border-radius: 16px;
	text-align: center;
	container-type: inline-size;
	background: var(--lance-card);
	transition: background-color 180ms ease, border-color 180ms ease;
}

@media (hover: hover) {
	.lance-glance__card:hover {
		border-color: transparent;
		background: var(--lance-beige);
	}
}

/* Sized to the card so the longest figure (¥836.5B) still fits on one line. */
.lance-glance__figure {
	font-family: var(--lance-serif);
	font-size: min(64px, 19cqi);
	line-height: 1;
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: var(--lance-text);
}

.lance-glance__card-icon {
	display: flex;
	width: 48px;
	height: 48px;
	margin-bottom: 6px;
	color: var(--lance-red);
}

.lance-glance__card-icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.lance-glance__card-title {
	font-family: var(--lance-serif);
	font-size: 24px;
	line-height: 30px;
	color: var(--lance-text);
}

.lance-glance__card-sub {
	font-size: 15px;
	line-height: 22px;
	color: var(--lance-muted);
}

.lance-glance__sources {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-top: 24px;
	border-top: 1px solid var(--lance-card-line);
	font-size: 15px;
	line-height: 22px;
	color: var(--lance-muted);
}

.lance-glance__sources-icon {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--lance-red);
}

.lance-glance__sources strong {
	font-weight: 700;
	color: var(--lance-text);
}

.lance-glance__sources-note {
	display: block;
}

/* --------------------------------------------------------------------------
   Yiwu Market: the embedded map
   -------------------------------------------------------------------------- */

.lance-mapblock__title {
	margin: 8px 0 0;
	font-family: var(--lance-serif);
	font-size: 45px;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   Yiwu Market: the market directory (search, filters, district tabs)
   -------------------------------------------------------------------------- */

.lance-md {
	scroll-margin-top: calc(var(--lance-header-h) + 16px);
}

.lance-md .lance-container {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.lance-md__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.lance-md__title {
	display: flex;
	flex-direction: column;
	font-family: var(--lance-serif);
	font-size: 56px;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.lance-md__lead {
	max-width: 620px;
	font-size: 17px;
	line-height: 27px;
	color: var(--lance-muted-warm);
}

/* The filters do nothing without script, so they stay hidden until then. */
.lance-md__controls {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.lance-md.is-enhanced .lance-md__controls {
	display: flex;
}

.lance-md__results-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	background: none;
	font-family: var(--lance-sans);
	font-size: 15px;
	color: var(--lance-muted);
	cursor: pointer;
}

.lance-md__results-clear:hover {
	color: var(--lance-text);
}

.lance-md__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-md__filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 20px;
	border: 1px solid var(--lance-card-line);
	border-radius: 999px;
	background: var(--lance-card);
	font-family: var(--lance-sans);
	font-size: 15px;
	line-height: 22px;
	color: var(--lance-text);
	cursor: pointer;
	transition: border-color 0.3s var(--lance-ease-out-expo), background 0.3s var(--lance-ease-out-expo), color 0.3s var(--lance-ease-out-expo);
}

.lance-md__filter .lance-icon {
	flex: none;
	width: 20px;
	height: 20px;
}

.lance-md__filter:hover {
	border-color: var(--lance-red);
}

.lance-md__filter.is-active {
	background: var(--lance-red);
	border-color: var(--lance-red);
	color: var(--lance-on-accent);
	font-weight: 700;
}

.lance-md__results {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--lance-card-line);
	border-radius: 20px;
	background: var(--lance-card);
}

.lance-md__results-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.lance-md__results-title {
	font-family: var(--lance-serif);
	font-size: 28px;
	line-height: 34px;
	letter-spacing: -0.03em;
}

.lance-md__results-sub {
	margin-top: 4px;
	font-size: 15px;
	line-height: 22px;
	color: var(--lance-muted);
}

.lance-md__results-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-md__result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--lance-card-line);
}

.lance-md__result:first-child {
	border-top: 0;
}

.lance-md__result-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.lance-md__result-label {
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.lance-md__result-at {
	font-family: var(--lance-label);
	font-size: 13px;
	line-height: 20px;
	color: var(--lance-muted);
}

.lance-md__result-map {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	border: 1px solid var(--lance-red);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	color: var(--lance-red);
	transition: background 0.3s var(--lance-ease-out-expo), color 0.3s var(--lance-ease-out-expo);
}

.lance-md__result-map:hover {
	background: var(--lance-red);
	color: var(--lance-on-accent);
}

.lance-md__results-empty {
	font-size: 15px;
	line-height: 24px;
	color: var(--lance-muted);
}

.lance-md__results-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding-top: 4px;
}

.lance-md__results-page {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--lance-red);
}

.lance-md__results-page:hover {
	opacity: 0.7;
}

.lance-md__districts {
	display: flex;
	flex-direction: column;
	gap: 20px;
	scroll-margin-top: calc(var(--lance-header-h) + 16px);
}

.lance-md__districts-title {
	font-family: var(--lance-serif);
	font-size: 34px;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.lance-md__districts-sub {
	margin-top: 6px;
	font-size: 16px;
	line-height: 24px;
	color: var(--lance-muted-warm);
}

/* Hidden until scripted: with no script every panel is shown in full. */
.lance-md__tabs {
	display: none;
	overflow-x: auto;
	border: 1px solid var(--lance-card-line);
	border-radius: 14px;
	background: var(--lance-card);
}

.lance-md.is-enhanced .lance-md__tabs {
	display: flex;
}

.lance-md__tab {
	flex: 1 0 auto;
	padding: 14px 24px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-family: var(--lance-sans);
	font-size: 16px;
	line-height: 24px;
	color: var(--lance-muted-warm);
	white-space: nowrap;
	cursor: pointer;
}

.lance-md__tab + .lance-md__tab {
	border-left: 1px solid var(--lance-card-line);
}

.lance-md__tab:first-child {
	border-radius: 13px 0 0 13px;
}

.lance-md__tab:last-child {
	border-radius: 0 13px 13px 0;
}

.lance-md__tab.is-active {
	border-bottom-color: var(--lance-red);
	background: var(--lance-blush);
	color: var(--lance-red);
	font-weight: 700;
}

/* Components below set display:grid/flex, which would otherwise beat the UA
   rule for [hidden] and leave every district panel on screen at once. */
.lance-md [hidden] {
	display: none !important;
}

/* Manrope has no CJK glyphs, and the Figma placeholder face in the stack
   swallows the fallback, so name a CJK family for the Chinese district names. */
.lance-md [lang="zh-Hans"] {
	font-family: var(--lance-sans), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

.lance-md__panel {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 24px;
	padding: 24px;
	border: 1px solid var(--lance-card-line);
	border-radius: 20px;
	background: var(--lance-card);
	scroll-margin-top: calc(var(--lance-header-h) + 24px);
}

.lance-md__panel + .lance-md__panel {
	margin-top: 20px;
}

.lance-md.is-enhanced .lance-md__panel + .lance-md__panel {
	margin-top: 0;
}

.lance-md__panel-media {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lance-md__figure {
	position: relative;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--lance-hero);
	aspect-ratio: 4 / 3;
}

.lance-md__figure-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lance-md__figure-cap {
	position: absolute;
	left: 16px;
	bottom: 16px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(17, 18, 15, 0.72);
	font-family: var(--lance-label);
	font-size: 13px;
	line-height: 20px;
	color: var(--lance-on-dark);
}

/* Covers the figure like the shared control; the icon sits smaller than the
   featured video's so it suits the 4/3 district panel. */
.lance-md__play .lance-play__icon {
	width: 64px;
	height: 64px;
}

.lance-md__play .lance-play__icon::before {
	width: 20px;
	height: 23px;
	margin-left: 5px;
}

.lance-md__panel-name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-family: var(--lance-serif);
	font-size: 28px;
	line-height: 34px;
	letter-spacing: -0.03em;
}

.lance-md__panel-zh {
	font-family: var(--lance-sans);
	font-size: 15px;
	color: var(--lance-muted);
}

.lance-md__panel-sum {
	margin-top: 6px;
	font-size: 15px;
	line-height: 23px;
	color: var(--lance-card-text);
}

.lance-md__panel-ext {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--lance-red);
}

.lance-md__panel-ext:hover {
	opacity: 0.7;
}

.lance-md__panel-ext .lance-icon {
	width: 18px;
	height: 18px;
}

.lance-md__panel-floors {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lance-md__floors-title {
	font-family: var(--lance-serif);
	font-size: 24px;
	line-height: 30px;
	letter-spacing: -0.03em;
}

.lance-md__floors-sub {
	margin-top: 2px;
	font-family: var(--lance-label);
	font-size: 14px;
	line-height: 20px;
	color: var(--lance-muted);
}

.lance-md__floors {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-md__floor {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 12px;
	border-top: 1px solid var(--lance-card-line);
	border-radius: 12px;
}

.lance-md__floor:first-child {
	border-top: 0;
}

.lance-md__floor.is-match {
	background: var(--lance-blush);
	border-top-color: transparent;
	box-shadow: inset 3px 0 0 var(--lance-red);
}

.lance-md__lv {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	height: 30px;
	padding: 0 10px;
	border-radius: 8px;
	background: var(--lance-beige);
	font-family: var(--lance-label);
	font-size: 14px;
	color: var(--lance-text);
}

.lance-md__floor.is-match .lance-lv,
.lance-md__floor.is-match .lance-md__lv {
	background: var(--lance-card);
}

.lance-md__floor-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-grow: 1;
	min-width: 0;
}

.lance-md__floor-cats {
	font-size: 16px;
	line-height: 24px;
}

.lance-md__floor-note,
.lance-md__pending {
	font-family: var(--lance-label);
	font-size: 13px;
	line-height: 20px;
	color: var(--lance-muted);
}

.lance-md__pending {
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--lance-mist);
}

.lance-md__floor-match {
	flex: none;
	align-self: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--lance-card);
	font-family: var(--lance-label);
	font-size: 12px;
	line-height: 18px;
	color: var(--lance-red);
}

.lance-md__panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
	padding-top: 4px;
}

/* Same dark ground as the home page's ask bar (.lance-videos__ask), so the two
   read as one recurring device across the site. */
.lance-md__ask {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 24px;
	border-radius: 20px;
	background: var(--lance-forest);
	color: var(--lance-on-dark);
}

.lance-md__ask-icon {
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--lance-red);
}

.lance-md__ask-text {
	flex-grow: 1;
	min-width: 0;
}

.lance-md__ask-title {
	color: var(--lance-on-dark);
	font-family: var(--lance-serif);
	font-size: 24px;
	line-height: 30px;
	letter-spacing: -0.03em;
}

.lance-md__ask-sub {
	margin-top: 4px;
	font-size: 15px;
	line-height: 23px;
	color: rgba(255, 255, 255, 0.82);
}

/* Category tiles: the product-categories index and a category's related list */
.lance-md__cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.lance-md__cat {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--lance-card-line);
	border-radius: 16px;
	background: var(--lance-card);
	color: var(--lance-text);
	transition: border-color 0.3s var(--lance-ease-out-expo);
}

.lance-md__cat:hover {
	border-color: var(--lance-red);
}

.lance-md__cat-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--lance-blush);
	color: var(--lance-red);
}

.lance-md__cat-icon .lance-icon {
	width: 22px;
	height: 22px;
}

.lance-md__cat-label {
	flex-grow: 1;
	min-width: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
}

.lance-md__cat-at {
	flex: none;
	font-family: var(--lance-label);
	font-size: 12px;
	line-height: 18px;
	color: var(--lance-muted);
}

/* --------------------------------------------------------------------------
   Yiwu Market: a product category page
   -------------------------------------------------------------------------- */

.lance-cat .lance-container {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.lance-cat__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	max-width: 760px;
}

.lance-cat__badge {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--lance-blush);
	color: var(--lance-red);
}

.lance-cat__badge .lance-icon {
	width: 28px;
	height: 28px;
}

.lance-cat__title {
	font-family: var(--lance-serif);
	font-size: 45px;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.lance-cat__lead {
	font-size: 19px;
	line-height: 29px;
	font-weight: 500;
}

.lance-cat__intro {
	font-size: 17px;
	line-height: 27px;
	color: var(--lance-muted-warm);
}

.lance-cat__panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--lance-card-line);
	border-radius: 20px;
	background: var(--lance-card);
}

.lance-cat__panel-title,
.lance-cat__related-title {
	font-family: var(--lance-serif);
	font-size: 28px;
	line-height: 34px;
	letter-spacing: -0.03em;
}

.lance-cat__rows {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-cat__row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	padding: 16px 0;
	border-top: 1px solid var(--lance-card-line);
}

.lance-cat__row:first-child {
	border-top: 0;
}

.lance-cat__row-at {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.lance-cat__row-district {
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.lance-cat__row-district span {
	margin-left: 6px;
	font-weight: 400;
	color: var(--lance-muted);
}

.lance-cat__row-lv {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: 8px;
	background: var(--lance-beige);
	font-family: var(--lance-label);
	font-size: 13px;
}

.lance-cat__row-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.lance-cat__row-match {
	font-size: 16px;
	line-height: 24px;
}

.lance-cat__row-cats {
	font-family: var(--lance-label);
	font-size: 13px;
	line-height: 20px;
	color: var(--lance-muted);
}

.lance-cat__row-map {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--lance-red);
	white-space: nowrap;
}

.lance-cat__row-map:hover {
	opacity: 0.7;
}

.lance-cat__row-map .lance-icon {
	width: 18px;
	height: 18px;
}

.lance-cat__empty {
	font-size: 16px;
	line-height: 25px;
	color: var(--lance-muted);
}

.lance-cat__related {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lance-cat__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lance-cat__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	line-height: 22px;
	color: var(--lance-muted);
}

.lance-cat__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--lance-red);
}

.lance-cat__back .lance-icon {
	width: 18px;
	height: 18px;
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Yiwu Market: plan your visit
   -------------------------------------------------------------------------- */

.lance-mv .lance-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.lance-mv__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 720px;
	text-align: center;
}

.lance-mv__title {
	margin: 8px 0 0;
	font-family: var(--lance-serif);
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.lance-mv__lead {
	margin: 0;
	color: var(--lance-muted);
	font-size: 17px;
	line-height: 26px;
}

.lance-mv__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}

.lance-mv__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--lance-card-line);
	border-radius: 20px;
	background: var(--lance-card);
}

.lance-mv__shot {
	width: 100%;
	aspect-ratio: 16 / 7;
	border-radius: 14px;
	object-fit: cover;
}

.lance-mv__card-head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.lance-mv__card-icon {
	flex: none;
	display: flex;
	width: 56px;
	height: 56px;
	color: var(--lance-red);
}

.lance-mv__card-title {
	font-family: var(--lance-serif);
	font-size: 26px;
	line-height: 1.2;
}

.lance-mv__card-sub {
	margin: 4px 0 0;
	color: var(--lance-muted);
	font-size: 15px;
	line-height: 22px;
}

.lance-mv__callout {
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--lance-beige);
}

.lance-mv__callout--tip {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.lance-mv__callout-icon {
	flex: none;
	display: flex;
	width: 26px;
	height: 26px;
	color: var(--lance-red);
}

.lance-mv__callout-title {
	margin: 0;
	font-family: var(--lance-serif);
	font-size: 17px;
	line-height: 24px;
}

.lance-mv__callout-text {
	margin: 4px 0 0;
	color: var(--lance-muted);
	font-size: 15px;
	line-height: 22px;
}

.lance-mv__rows,
.lance-mv__routes {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-mv__row,
.lance-mv__route {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 0;
	border-top: 1px solid var(--lance-card-line);
}

.lance-mv__rows > .lance-mv__row:first-child,
.lance-mv__routes > .lance-mv__route:first-child {
	border-top: 0;
	padding-top: 4px;
}

.lance-mv__row-icon {
	flex: none;
	display: flex;
	width: 40px;
	height: 40px;
	margin-top: 2px;
	color: var(--lance-red);
}

.lance-mv__card-icon img,
.lance-mv__row-icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.lance-mv__row-title,
.lance-mv__route-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.lance-mv__row-text,
.lance-mv__route-note {
	margin: 3px 0 0;
	color: var(--lance-muted);
	font-size: 15px;
	line-height: 22px;
}

.lance-mv__route-no {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--lance-blush);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lance-mv__route-legs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: center;
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 22px;
}

.lance-mv__route-arrow {
	color: var(--lance-muted);
}

.lance-mv__driver-zh {
	margin: 6px 0 4px;
	font-family: var(--lance-sans), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
	font-size: 22px;
	line-height: 32px;
	letter-spacing: 0.02em;
}

.lance-mv__link {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: var(--lance-red);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.lance-mv__link:hover {
	text-decoration: underline;
}

.lance-mv__link .lance-icon {
	flex: none;
	width: 16px;
	height: 16px;
}

.lance-mv__card-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--lance-card-line);
}

.lance-mv__more {
	flex: 1;
	min-width: 200px;
}

.lance-mv__more > summary {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.lance-mv__more > summary::-webkit-details-marker {
	display: none;
}

.lance-mv__more .lance-icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--lance-muted);
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-mv__more[open] > summary .lance-icon {
	transform: rotate(180deg);
}

.lance-mv__more p {
	margin: 10px 0 0;
	color: var(--lance-muted);
	font-size: 14.5px;
	line-height: 22px;
}

/* Before you travel */
.lance-mv__before {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	margin-top: 8px;
}

.lance-mv__before-label {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lance-muted);
}

.lance-mv__bar {
	border: 1px solid var(--lance-card-line);
	border-radius: 16px;
	background: var(--lance-card);
}

.lance-mv__bar-head {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
}

.lance-mv__bar-head::-webkit-details-marker {
	display: none;
}

.lance-mv__bar-icon {
	flex: none;
	display: flex;
	width: 30px;
	height: 30px;
	color: var(--lance-red);
}

.lance-mv__bar-text {
	flex: 1;
	min-width: 0;
}

.lance-mv__bar-title {
	display: block;
	font-family: var(--lance-serif);
	font-size: 20px;
	line-height: 26px;
}

.lance-mv__bar-sub {
	display: block;
	margin-top: 2px;
	color: var(--lance-muted);
	font-size: 15px;
	line-height: 22px;
}

.lance-mv__bar-mark {
	flex: none;
	display: flex;
	width: 22px;
	height: 22px;
	color: var(--lance-muted);
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-mv__bar[open] .lance-mv__bar-mark {
	transform: rotate(45deg);
}

.lance-mv__bar-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 0 24px 22px 70px;
}

.lance-mv__bar-body p {
	margin: 0;
	color: var(--lance-muted);
	font-size: 15px;
	line-height: 23px;
}

.lance-mv__places {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	list-style: none;
	margin: 6px 0;
	padding: 0;
}
.lance-mv__place {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 10px;
	border: 1px solid var(--lance-line, #e6e2da);
	border-radius: 12px;
	color: var(--lance-ink);
	text-decoration: none;
	transition: background 180ms;
}
a.lance-mv__place:hover { background: var(--lance-beige); }
.lance-mv__place:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.lance-mv__place img { width: 96px; height: 76px; flex: none; object-fit: cover; border-radius: 8px; }
.lance-mv__place strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; }
.lance-mv__place small { display: block; margin-top: 5px; color: var(--lance-muted); font-size: 12px; }
@media (max-width: 1100px) { .lance-mv__places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lance-mv__places { grid-template-columns: 1fr; } }

.lance-mv__recommendations {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 28px;
	width: 100%;
	margin: 4px 0;
	padding-left: 18px;
	color: var(--lance-ink);
	font-size: 15px;
	line-height: 23px;
}

.lance-mv__food-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 4px 0;
	padding: 0;
}

.lance-mv__food-tags li {
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--lance-beige);
	color: var(--lance-ink);
	font-size: 13px;
}

@media (max-width: 600px) {
	.lance-mv__recommendations { grid-template-columns: 1fr; }
}

/* Foot note and outbound links */
.lance-mv__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.lance-mv__foot-note {
	margin: 0;
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 21px;
}

.lance-mv__foot-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 0;
	align-items: center;
	margin: 0;
}

.lance-mv__foot-links .lance-mv__link + .lance-mv__link {
	margin-left: 16px;
	padding-left: 16px;
	border-left: 1px solid var(--lance-card-line);
}

/* Closing call to action for the market page. Lived inside the visit section
   until it was moved to the foot of the page, hence the rename off the mv__
   prefix — it no longer belongs to that block.

   Dark ground, matching .lance-videos__ask and .lance-md__ask. */
.lance-mclose {
	padding-top: 0;
}

.lance-mcta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
	width: 100%;
	padding: 22px 26px;
	border-radius: 16px;
	background: var(--lance-forest);
	color: var(--lance-on-dark);
}

.lance-mcta__icon {
	flex: none;
	display: flex;
	width: 32px;
	height: 32px;
	color: var(--lance-red);
}

.lance-mcta__text {
	flex: 1;
	min-width: 240px;
}

.lance-mcta__title {
	margin: 0;
	color: var(--lance-on-dark);
	font-family: var(--lance-serif);
	font-size: 22px;
	line-height: 28px;
}

.lance-mcta__sub {
	margin: 2px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
	line-height: 22px;
}

/* --------------------------------------------------------------------------
   Yiwu Market: the buying guide that closes the page
   -------------------------------------------------------------------------- */

/* Accent parts of the two-tone icons. The glyph's dark strokes stay on
   currentColor so they follow the theme; setting `color` on the accent paths
   flips only those to brand red, without a second file per mode. */
.lance-icon__accent {
	color: var(--lance-red);
}

.lance-bguide .lance-container {
	display: grid;
	gap: 40px;
}

.lance-bguide__head {
	display: grid;
	justify-items: center;
	gap: 12px;
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.lance-bguide__title {
	font-family: var(--lance-serif);
	font-size: 56px;
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lance-bguide__lead {
	max-width: 620px;
	color: var(--lance-muted);
	font-size: 18px;
	line-height: 27px;
	text-wrap: pretty;
}

/* Six step cards. The first carries the beige tone so the sequence has a
   visible starting point; the rest are plain cards. */
.lance-bguide__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each card carries one palette tint, laid over the card ground as a diagonal
   wash that fades out before the far corner. Holding the tint and its strength
   in two custom properties keeps all six variants to two lines each. */
.lance-bstep {
	--bstep-tint: var(--lance-beige-rgb);
	--bstep-alpha: 0;

	display: flex;
	flex-direction: column;
	padding: 26px 28px 24px;
	border: 1px solid var(--lance-card-line);
	border-radius: 18px;
	background:
		linear-gradient(140deg, rgba(var(--bstep-tint), var(--bstep-alpha)) 0%, rgba(var(--bstep-tint), 0) 88%),
		var(--lance-card);
}

.lance-bstep--beige {
	--bstep-tint: var(--lance-beige-rgb);
	--bstep-alpha: 1;
}

.lance-bstep--blush {
	--bstep-tint: var(--lance-blush-rgb);
	--bstep-alpha: 0.55;
}

.lance-bstep--ivory {
	--bstep-tint: var(--lance-beige-rgb);
	--bstep-alpha: 0.22;
}

.lance-bstep--stone {
	--bstep-tint: var(--lance-mist-rgb);
	--bstep-alpha: 0.4;
}

.lance-bstep--sand {
	--bstep-tint: var(--lance-beige-rgb);
	--bstep-alpha: 0.62;
}

.lance-bstep--mist {
	--bstep-tint: var(--lance-mist-rgb);
	--bstep-alpha: 0.68;
}

.lance-bstep__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Decorative, so it is drawn as page ink at low alpha rather than a fixed grey:
   the same rule then reads correctly on the light card and the dark one. */
.lance-bstep__num {
	font-family: var(--lance-serif);
	font-size: 40px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: rgba(var(--lance-line-rgb), 0.3);
}

.lance-bstep__icon {
	flex: none;
	width: 56px;
	height: 56px;
}

.lance-bstep__title {
	margin-top: 18px;
	font-family: var(--lance-serif);
	font-size: 24px;
	line-height: 30px;
	letter-spacing: -0.02em;
}

.lance-bstep__text {
	margin-top: 10px;
	color: var(--lance-muted);
	font-size: 16px;
	line-height: 24px;
	text-wrap: pretty;
}

/* Pinned to the card foot so the six notes line up across the row. */
.lance-bstep__note {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid rgba(var(--lance-line-rgb), 0.14);
	font-size: 14px;
	line-height: 20px;
	color: var(--lance-muted);
}

.lance-bstep__note-label {
	color: var(--lance-text);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Pre-order checklist strip */
.lance-bguide__before {
	display: grid;
	gap: 18px;
	padding: 26px 30px;
	border-radius: 20px;
	background: var(--lance-beige);
}

.lance-bguide__before-label {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--lance-muted-warm);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.lance-bguide__before-icon {
	flex: none;
	width: 26px;
	height: 26px;
}

.lance-bguide__before-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lance-bguide__before-list li + li {
	padding-left: 20px;
	border-left: 1px solid rgba(var(--lance-line-rgb), 0.16);
}

.lance-bnote {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.lance-bnote__icon {
	flex: none;
	width: 40px;
	height: 40px;
}

.lance-bnote__text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.lance-bnote__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.lance-bnote__sub {
	color: var(--lance-muted-warm);
	font-size: 14px;
	line-height: 21px;
	text-wrap: pretty;
}

/* Independent vs. agent: copy on the left, the two option cards beside it. */
/* Copy, then three cards that escalate. The copy column is given slightly less
   than a full share so the cards — which carry all the reading — keep their
   width. */
/* Centred intro over three cards that escalate. The heading sits above rather
   than beside them so all three share the full width and stay comparable; they
   also stretch to a common height for the same reason. */
.lance-bsupport {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 20px;
	align-items: stretch;
	padding-top: 40px;
	border-top: 1px solid var(--lance-card-line);
}

.lance-bsupport__copy {
	display: grid;
	grid-column: 1 / -1;
	justify-items: center;
	gap: 14px;
	max-width: 660px;
	margin-inline: auto;
	text-align: center;
}

/* Closing line of the copy column, set off by a short rule rather than a full
   border so it reads as a sign-off and not as a divider. */
.lance-bsupport__kicker {
	margin-top: 14px;
	color: var(--lance-muted-warm);
	font-size: 12px;
	font-weight: 600;
	line-height: 19px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.lance-bsupport__kicker::before {
	content: "";
	display: block;
	width: 52px;
	height: 1px;
	margin: 0 auto 18px;
	background: var(--lance-text);
}

.lance-bsupport__title {
	font-family: var(--lance-serif);
	font-size: 40px;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lance-bsupport__text {
	color: var(--lance-muted);
	font-size: 16px;
	line-height: 25px;
	text-wrap: pretty;
}

.lance-bsupport__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--lance-red);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

.lance-bsupport__link-arrow {
	flex: none;
	width: 20px;
	height: 20px;
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-bsupport__link:hover .lance-bsupport__link-arrow {
	transform: translateX(4px);
}

.lance-bcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px 22px 26px;
	border: 1px solid transparent;
	border-radius: 18px;
	background: var(--lance-beige);
}

/* Middle card steps back to a hairline so the Lance card is the only one
   carrying a strong outline. */
.lance-bcard--accent {
	border-color: var(--lance-card-line);
	background: var(--lance-card);
}

/* The third card is the one being recommended: brand outline over a blush
   ground, so it reads as the lifted option without shouting. */
.lance-bcard--lance {
	border-color: var(--lance-red);
	background: linear-gradient(160deg, rgba(var(--lance-blush-rgb), 0.55) 0%, rgba(var(--lance-blush-rgb), 0.22) 100%), var(--lance-card);
}

/* Brand tag in the corner of the Lance card. */
.lance-bcard__flag {
	position: absolute;
	top: 22px;
	right: 20px;
	padding: 4px 11px;
	border: 1px solid var(--lance-red);
	border-radius: 999px;
	color: var(--lance-red);
	font-size: 11px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lance-bcard__icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 8px;
	border-radius: 999px;
	background: rgba(var(--lance-line-rgb), 0.06);
}

.lance-bcard__icon .lance-icon {
	width: 28px;
	height: 28px;
}

/* person and users ship at stroke-width 1.5 in a 24 box — much heavier than the
   duo-* icons beside them. Thinned from here rather than in the files because
   users.svg is shared with the home page, where it keeps its original weight.
   CSS beats the presentation attribute, so one rule covers both glyphs. */
.lance-bcard__icon * {
	stroke-width: 0.58;
}

.lance-bcard--accent .lance-bcard__icon,
.lance-bcard--lance .lance-bcard__icon {
	background: var(--lance-blush);
	color: var(--lance-red);
}

/* Sized so the longest of the three titles still sets on one line — a wrapped
   title would push that card's rule out of step with its neighbours. */
.lance-bcard__title {
	font-family: var(--lance-serif);
	font-size: 22px;
	line-height: 28px;
	letter-spacing: -0.02em;
}

/* Two lines' worth whether the sub needs them or not, for the same reason: the
   rule below has to land at the same height across all three cards. */
.lance-bcard__sub {
	min-height: 44px;
	color: var(--lance-muted);
	font-size: 15px;
	line-height: 22px;
	text-wrap: pretty;
}

.lance-bcard__list {
	display: grid;
	gap: 12px;
	margin: 16px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid rgba(var(--lance-line-rgb), 0.1);
	list-style: none;
}

.lance-bcard__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 21px;
	text-wrap: pretty;
}

.lance-bcard__check {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--lance-muted-warm);
}

.lance-bcard--accent .lance-bcard__check {
	color: var(--lance-red-deep);
}

/* Rows of the Lance card: a tinted glyph, a heading, and a line under it. */
.lance-bfeature__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--lance-card);
	color: var(--lance-red);
}

.lance-bfeature__icon .lance-icon {
	width: 17px;
	height: 17px;
}

/* photo and kanban are stroke icons at 1.5 in a 24 box; the duo-* glyphs beside
   them sit near 2.46% of their own box. Matched here so one row does not read
   heavier than the next. */
.lance-bfeature__icon .lance-icon * {
	stroke-width: 0.6;
}

.lance-bfeature__title {
	display: block;
	font-weight: 700;
}

.lance-bfeature__sub {
	display: block;
	margin-top: 2px;
	color: var(--lance-muted);
	font-size: 13px;
	line-height: 19px;
}

/* Closing line of the Lance card, held to the foot of the stretched card. */
.lance-bcard__note {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(var(--lance-line-rgb), 0.1);
	color: var(--lance-muted);
	font-size: 13px;
	font-style: italic;
	line-height: 19px;
	text-wrap: pretty;
}

/* The two comparison cards carry no closing note, so their list takes the slack
   the stretch creates instead of leaving it under the last row. */
.lance-bcard__list:last-child {
	margin-bottom: 0;
	padding-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Yiwu Market: short videos, the market journal, and the field kit band
   -------------------------------------------------------------------------- */

.lance-mvid .lance-container {
	display: grid;
	gap: 28px;
}

.lance-mvid__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
}

.lance-mvid__title {
	font-family: var(--lance-serif);
	font-size: 34px;
	line-height: 42px;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lance-mvid__sub {
	max-width: 640px;
	margin-top: 8px;
	color: var(--lance-muted);
	font-size: 16px;
	line-height: 24px;
	text-wrap: pretty;
}

.lance-mvid__more,
.lance-mjournal__all {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	color: var(--lance-red);
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
}

.lance-mvid__more-arrow,
.lance-mjournal__all-arrow {
	flex: none;
	width: 18px;
	height: 18px;
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-mvid__more:hover .lance-mvid__more-arrow,
.lance-mjournal__all:hover .lance-mjournal__all-arrow {
	transform: translateX(4px);
}

.lance-mvid__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Reuses .lance-play and video-placeholder.svg from the home page, so a card
   starts playing in place as soon as its youtube_id is filled in. */
.lance-vtile__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	background: var(--lance-hero);
}

.lance-vtile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lance-vtile__media .lance-play__icon {
	width: 56px;
	height: 56px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 8px 24px -8px rgba(17, 18, 15, 0.6);
}

.lance-vtile__media .lance-play__icon::before {
	width: 17px;
	height: 20px;
	margin-left: 4px;
	background: var(--lance-dark);
}

.lance-vtile__duration {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(17, 18, 15, 0.72);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	font-variant-numeric: tabular-nums;
}

.lance-vtile__title {
	margin-top: 14px;
	font-size: 17px;
	font-weight: 700;
	line-height: 24px;
}

.lance-vtile__sub {
	margin-top: 4px;
	color: var(--lance-muted);
	font-size: 15px;
	line-height: 22px;
	text-wrap: pretty;
}

/* The journal's warm ground is a panel the width of the container, not a
   full-bleed section — on a wide screen a full-bleed beige washed the whole
   viewport and the page margins lost their own colour. */
.lance-mjournal .lance-container {
	display: grid;
	gap: 28px;
}

.lance-mjournal__panel {
	display: grid;
	gap: 28px;
	padding: 44px 40px;
	border-radius: 24px;
	background: var(--lance-beige);
}

.lance-mjournal__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 32px;
}

.lance-bguide__eyebrow,
.lance-bsupport__eyebrow,
.lance-mjournal__eyebrow {
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--lance-beige);
	color: var(--lance-muted-warm);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* On the journal's own beige ground the pill needs the card colour instead. */
.lance-mjournal__eyebrow {
	display: inline-block;
	background: var(--lance-card);
}

.lance-mjournal__title {
	margin-top: 14px;
	font-family: var(--lance-serif);
	font-size: 44px;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lance-mjournal__sub {
	max-width: 620px;
	margin-top: 8px;
	color: var(--lance-muted);
	font-size: 16px;
	line-height: 24px;
	text-wrap: pretty;
}

.lance-mjournal__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lance-mjournal__filter {
	padding: 9px 18px;
	border: 1px solid var(--lance-card-line);
	border-radius: 999px;
	background: var(--lance-card);
	color: var(--lance-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	cursor: pointer;
	transition: background 0.3s var(--lance-ease-out-expo), border-color 0.3s var(--lance-ease-out-expo);
}

.lance-mjournal__filter:hover {
	border-color: var(--lance-text);
}

.lance-mjournal__filter[aria-pressed="true"] {
	border-color: transparent;
	background: var(--lance-blush);
	font-weight: 700;
}

.lance-mjournal__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Thumbnail beside the copy, so six entries stay scannable in two rows. Kept
   deliberately low: the journal is a footnote to the page, not a headline. */
.lance-jcard {
	display: grid;
	grid-template-columns: 152px minmax(0, 1fr);
	overflow: hidden;
	border-radius: 12px;
	background: var(--lance-card);
}

/* The dark ground shows through while the placeholder loads and backs any real
   photo that replaces it, so no card ever flashes bare. */
.lance-jcard__media {
	display: block;
	overflow: hidden;
	background: var(--lance-hero);
}

.lance-jcard__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lance-jcard__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 14px 16px;
}

/* The blush pill carries the accent; the label itself takes page ink. Brand red
   on blush measures 3.8:1 light and 2.9:1 dark, which 12px bold text fails. */
.lance-jcard__tag {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--lance-blush);
	color: var(--lance-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 15px;
}

.lance-jcard__title {
	margin-top: 8px;
	font-family: var(--lance-serif);
	font-size: 17px;
	line-height: 23px;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Two lines, whatever the excerpt's length, so one wordy entry cannot stretch
   every card in its row. */
.lance-jcard__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin-top: 5px;
	color: var(--lance-muted);
	font-size: 13px;
	line-height: 19px;
}

.lance-jcard__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin-top: auto;
	padding-top: 10px;
	color: var(--lance-muted);
	font-size: 12px;
	line-height: 18px;
}

.lance-jcard__foot::before {
	content: "";
	order: 1;
	width: 1px;
	height: 12px;
	background: var(--lance-card-line);
}

.lance-jcard__meta {
	order: 0;
}

.lance-jcard__link {
	display: inline-flex;
	order: 2;
	align-items: center;
	gap: 6px;
	color: var(--lance-red);
	font-weight: 700;
}

.lance-jcard__link-arrow {
	flex: none;
	width: 14px;
	height: 14px;
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-jcard__link:hover .lance-jcard__link-arrow {
	transform: translateX(3px);
}

.lance-mjournal__empty {
	margin: 0;
	color: var(--lance-muted);
	text-align: center;
}

.lance-mjournal__all {
	justify-self: center;
}

/* Field kit band. It sits outside the journal panel on the page ground, so it
   takes the same warm colour the panel does to read as part of the chapter.

   The clip lets the cover rise above the band while the band still cuts it off
   at the bottom — inset() with a negative top leaves the top edge open and
   trims the other three. That is what keeps the band shallow no matter how
   large the cover gets. */
.lance-kit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 12px;
	padding: 22px 32px;
	border-radius: 20px;
	background: var(--lance-beige);
	clip-path: inset(-200px 0 -8px 0 round 20px);
}

/* Rises out of the band and runs off its lower edge. The negative bottom margin
   keeps the overhang out of the flex line, so the band measures its text only.

   drop-shadow rather than box-shadow: it follows the render's alpha, so the
   shadow traces the tilted cover instead of a rectangle. Kept a fixed dark
   literal in both themes — a shadow lit by --lance-line-rgb would invert to a
   glow in dark mode. */
.lance-kit__cover {
	display: block;
	flex: none;
	align-self: start;
	width: 220px;
	height: auto;
	margin: -54px 0 -110px;
	filter:
		drop-shadow(2px 3px 4px rgba(17, 18, 15, 0.16))
		drop-shadow(5px 9px 13px rgba(17, 18, 15, 0.24));
}

.lance-kit__text {
	flex: 1 1 320px;
	min-width: 0;
}

.lance-kit__title {
	font-family: var(--lance-serif);
	font-size: 26px;
	line-height: 32px;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Held to one line at desktop width — a second line is what made the band deep. */
.lance-kit__sub {
	margin-top: 4px;
	color: var(--lance-muted);
	font-size: 15px;
	line-height: 22px;
	text-wrap: pretty;
}

.lance-kit__cta {
	flex: none;
	background: var(--lance-red);
}

/* ==========================================================================
   Tablet: 810px - 1199px
   ========================================================================== */

@media (max-width: 1199px) {
	.lance-mhero__title {
		font-size: 56px;
	}

	.lance-mhero__media {
		aspect-ratio: 16 / 7;
	}

	.lance-mhero__card {
		max-width: 340px;
	}

	.lance-glance__inner {
		gap: 40px;
	}

	.lance-glance__title {
		font-size: 38px;
	}

	.lance-glance__card {
		min-height: 190px;
		padding: 24px 20px;
	}

	.lance-glance__figure {
		font-size: min(56px, 19cqi);
	}

	.lance-md__title {
		font-size: 44px;
	}

	.lance-md__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.lance-cat__title {
		font-size: 38px;
	}

	.lance-cat__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lance-nav {
		padding: 12px 24px;
	}

	.lance-hero {
		padding: 72px 24px 24px;
	}

	.lance-hero__card {
		height: auto;
		gap: 24px;
	}

	.lance-hero__body {
		flex: 1 1 50%;
		gap: 48px;
		padding: 24px 0 24px 16px;
	}

	.lance-hero__title {
		font-size: 45px;
		line-height: 49.5px;
	}

	.lance-hero__media {
		flex: 1 1 40%;
		min-height: 480px;
	}

	.lance-about__inner {
		grid-template-columns: 320px 1fr 320px;
		padding-block: 40px;
	}

	.lance-about__title {
		max-width: 720px;
		font-size: 42px;
		line-height: 46.2px;
	}

	.lance-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lance-work__item {
		width: 720px;
	}

	.lance-wcard__media {
		flex: 0 0 340px;
	}

	.lance-stats__panel {
		height: auto;
		flex-direction: column;
	}

	.lance-stats__media {
		flex: none;
		height: 340px;
	}

	.lance-stats__content {
		flex: none;
	}

	.lance-step__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.lance-fee {
		flex-wrap: wrap;
	}

	.lance-fee__text {
		flex-basis: 0;
	}

	.lance-videos__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lance-video {
		min-height: 440px;
	}

	.lance-videos__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
	}

	.lance-vcard {
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		padding: 12px 12px 24px;
	}

	.lance-vcard__media {
		align-self: start;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.lance-vcard__body {
		padding-inline: 12px;
	}

	.lance-cta__app {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		padding-right: 40px;
	}

	.lance-cta__note--left,
	.lance-cta__note--right,
	.lance-cta__skyline {
		display: none;
	}

	.lance-phone {
		left: 50%;
		width: 250px;
	}

	.lance-cta__title {
		font-size: 40px;
		line-height: 44px;
	}

	.lance-cta__trip {
		flex-wrap: wrap;
		padding: 40px;
	}

	.lance-cta__trip-text {
		flex-basis: 100%;
	}

	.lance-footer {
		padding: 72px 24px;
	}

	.lance-footer__top {
		gap: 48px;
	}

	/* Buying guide: two step cards per row, the checklist in two columns, and
	   the support copy above its two cards. */
	.lance-bguide__title {
		font-size: 44px;
	}

	.lance-bguide__steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.lance-bguide__before-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px 20px;
	}

	.lance-bguide__before-list li:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.lance-bsupport__title {
		font-size: 34px;
	}

	/* Videos drop to two per row; journal cards stack their thumbnail on top. */
	.lance-mvid__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.lance-mjournal__title {
		font-size: 36px;
	}

	.lance-mjournal__panel {
		padding: 34px 28px;
	}

	.lance-mjournal__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Phone: up to 809px
   ========================================================================== */

@media (max-width: 809px) {
	.lance-nav {
		padding: 12px 16px;
	}

	.lance-nav__logo {
		padding: 8px 0;
	}

	.lance-nav__wordmark {
		font-size: 18px;
	}

	.lance-nav__wordmark .lance-brand__mark {
		width: 24px;
	}

	/* Hero */
	.lance-hero {
		padding: 24px 16px;
	}

	/* Stacked here, so the blob spreads behind the whole card, not one column. */
	.lance-hero__card::before {
		left: -10%;
		width: 120%;
	}

	.lance-hero__card {
		flex-direction: column-reverse;
		gap: 16px;
		height: auto;
		padding: 12px;
	}

	.lance-hero__body {
		flex: none;
		gap: 32px;
		width: 100%;
		padding: 12px 4px 8px;
	}

	.lance-hero__content {
		gap: 24px;
		max-width: none;
	}

	.lance-hero__title {
		font-size: 33px;
		line-height: 36.3px;
	}

	.lance-hero__sub {
		font-size: 16px;
		line-height: 24px;
	}

	.lance-hero__trust {
		padding-right: 0;
		font-size: 16px;
		line-height: 24px;
	}

	/* The two wrap onto separate lines here, so the divider would dangle. */
	.lance-hero__social {
		padding-left: 0;
		border-left: 0;
		font-size: 15px;
		line-height: 22px;
	}

	.lance-hero__media {
		flex: none;
		width: 100%;
		height: 380px;
	}

	/* Yiwu Market hero */
	.lance-mhero .lance-container {
		gap: 28px;
	}

	.lance-mhero__title {
		font-size: 36px;
	}

	.lance-mhero__lead {
		font-size: 18px;
		line-height: 26px;
	}

	.lance-mhero__sub {
		font-size: 16px;
		line-height: 24px;
	}

	/* The two overlays stop fitting over the photo, so they stack under it. */
	.lance-mhero__media {
		display: flex;
		flex-direction: column;
		gap: 12px;
		aspect-ratio: auto;
		border-radius: 0;
		overflow: visible;
	}

	.lance-mhero__media img {
		height: 260px;
		border-radius: 16px;
	}

	.lance-mhero__chip,
	.lance-mhero__card {
		position: static;
		max-width: none;
		border: 1px solid var(--lance-card-line);
		box-shadow: none;
	}

	.lance-mhero__caption,
	.lance-mhero__toc {
		justify-content: flex-start;
	}

	/* Yiwu Market: at a glance */
	.lance-glance__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.lance-glance__title {
		font-size: 31px;
	}

	.lance-glance__lead {
		font-size: 19px;
		line-height: 27px;
	}

	.lance-glance__tip {
		align-items: flex-start;
	}

	.lance-glance__card {
		min-height: 0;
		padding: 24px 14px;
	}

	.lance-glance__figure {
		font-size: min(48px, 19cqi);
	}

	.lance-glance__card-title {
		font-size: 19px;
		line-height: 25px;
	}

	.lance-glance__card-sub {
		font-size: 14px;
		line-height: 20px;
	}

	.lance-mapblock__title {
		font-size: 31px;
	}

	/* Yiwu Market: the market directory */
	.lance-md .lance-container {
		gap: 28px;
	}

	.lance-md__title {
		font-size: 33px;
	}

	.lance-md__lead {
		font-size: 16px;
		line-height: 24px;
	}

	.lance-md__filter {
		height: 44px;
		padding: 0 16px;
		font-size: 14px;
	}

	.lance-md__results,
	.lance-md__panel {
		padding: 20px 16px;
	}

	.lance-md__results-title,
	.lance-md__panel-name {
		font-size: 24px;
		line-height: 30px;
	}

	.lance-md__result {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.lance-md__districts-title {
		font-size: 27px;
	}

	.lance-md__floor {
		padding: 12px 8px;
	}

	.lance-md__floor-match {
		align-self: flex-start;
	}

	.lance-md__ask {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px 16px;
	}

	.lance-cat .lance-container {
		gap: 28px;
	}

	.lance-cat__title {
		font-size: 31px;
	}

	.lance-cat__lead {
		font-size: 17px;
		line-height: 26px;
	}

	.lance-cat__panel {
		padding: 20px 16px;
	}

	.lance-cat__panel-title,
	.lance-cat__related-title {
		font-size: 24px;
		line-height: 30px;
	}

	.lance-cat__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.lance-cat__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Statement */
	.lance-about {
		padding: 56px 16px;
	}

	.lance-about__inner {
		min-height: 0;
		gap: 12px;
	}

	.lance-about__center {
		margin-bottom: 28px;
	}

	/* Stacked cards all span the column, whatever their text length. */
	.lance-pill {
		align-self: stretch;
	}

	.lance-about__title {
		max-width: none;
		font-size: 31px;
		line-height: 34.1px;
		letter-spacing: -0.03em;
	}

	.lance-about__inner {
		display: flex;
		flex-direction: column;
		padding-block: 0;
	}

	/* Services */
	.lance-services .lance-container,
	.lance-work .lance-container,
	.lance-stats .lance-container,
	.lance-compare .lance-container,
	.lance-quotes .lance-container,
	.lance-steps .lance-container,
	.lance-faq .lance-container {
		gap: 40px;
	}

	.lance-services__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/* Work: swipeable instead of drifting */
	.lance-work .lance-container {
		margin-bottom: 40px;
	}

	.lance-work__viewport {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 16px;
		padding-inline: 16px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.lance-work__viewport::-webkit-scrollbar {
		display: none;
	}

	.lance-work__track {
		animation: none;
		gap: 16px;
	}

	.lance-work__item[aria-hidden="true"] {
		display: none;
	}

	.lance-work__item {
		width: min(88vw, 420px);
		scroll-snap-align: start;
	}

	.lance-wcard {
		flex-direction: column;
		height: auto;
		gap: 8px;
	}

	.lance-wcard__media {
		flex: none;
		height: 260px;
	}

	.lance-wcard__body {
		flex: none;
		gap: 32px;
	}

	/* Stats */
	.lance-stats__cards {
		gap: 32px;
	}

	.lance-stats__media {
		height: 240px;
	}

	/* How it works */
	.lance-deck {
		--deck-step: 52px;
		--deck-inset: 8px;
	}

	.lance-step {
		border-radius: 18px;
	}

	.lance-step__toggle {
		gap: 10px;
		padding: 0 14px 0 16px;
	}

	.lance-step__number {
		padding-right: 10px;
		font-size: 17px;
		line-height: 22px;
	}

	.lance-step__title {
		font-size: 17px;
		line-height: 22px;
	}

	.lance-step__marker {
		width: 28px;
		height: 28px;
	}

	.lance-step__body {
		gap: 20px;
		margin: 0 16px;
		padding: 20px 0 24px;
	}

	.lance-step__lead {
		font-size: 22px;
		line-height: 28px;
	}

	.lance-sample,
	.lance-sheet {
		padding: 16px;
	}

	.lance-sheet__row {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 6px 12px;
	}

	.lance-sheet__thumb {
		width: 40px;
		height: 40px;
	}

	.lance-sheet__facts {
		grid-column: 2;
		justify-content: start;
		text-align: left;
	}

	.lance-sample__days li {
		font-size: 12px;
		line-height: 16px;
	}

	.lance-fee {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		margin-top: -16px;
		padding: 24px 20px;
		border-radius: 20px;
	}

	.lance-fee__value {
		padding-right: 0;
		border-right: 0;
	}

	.lance-fee__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.lance-fee__link {
		justify-content: center;
	}

	.lance-stats__content {
		padding: 20px;
	}

	.lance-stats__list {
		gap: 20px;
	}

	.lance-stats__title {
		font-size: 16px;
		line-height: 24px;
	}

	/* Comparison */
	.lance-compare__cols {
		flex-direction: column;
		max-width: 100%;
	}

	.lance-compare__col {
		flex: none;
		width: 100%;
	}

	/* Testimonials: swipeable */
	.lance-quotes__scroller {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(var(--lance-section-x) * -1);
		padding-inline: var(--lance-section-x);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.lance-quotes__scroller::-webkit-scrollbar {
		display: none;
	}

	.lance-quotes__track {
		gap: 16px;
	}

	.lance-qcard {
		flex: none;
		width: min(84vw, 360px);
		scroll-snap-align: center;
	}

	.lance-dots {
		display: flex;
	}

	.lance-dots[hidden] {
		display: none;
	}

	/* FAQ */
	.lance-faq__question {
		gap: 16px;
		padding: 16px;
	}

	.lance-faq__answer {
		padding: 0 16px 16px;
	}

	/* Videos */
	.lance-videos .lance-container {
		gap: 40px;
	}

	.lance-videos__channel {
		padding-inline: 12px;
		font-size: 15px;
	}

	.lance-videos__channel + .lance-videos__channel {
		border-left: 0;
	}

	.lance-video {
		min-height: 0;
		aspect-ratio: 4 / 5;
		border-radius: 20px;
	}

	.lance-video__caption {
		right: 20px;
		bottom: 60px;
		left: 20px;
	}

	.lance-video__title {
		font-size: 28px;
		line-height: 32px;
	}

	.lance-video__sub {
		font-size: 16px;
		line-height: 24px;
	}

	.lance-video__duration {
		right: auto;
		bottom: 20px;
		left: 20px;
	}

	.lance-play__icon {
		width: 68px;
		height: 68px;
	}

	.lance-videos__side {
		grid-template-columns: minmax(0, 1fr);
	}

	.lance-vcard__title {
		font-size: 26px;
		line-height: 30px;
	}

	.lance-videos__ask {
		flex-direction: column;
		align-items: stretch;
		margin-top: -24px;
		padding: 28px 20px;
		border-radius: 20px;
	}

	.lance-videos__ask-title {
		font-size: 26px;
		line-height: 32px;
	}

	.lance-videos__more {
		flex-direction: column;
		align-items: flex-start;
		margin-top: -8px;
	}

	/* CTA */
	.lance-cta__app {
		grid-template-columns: minmax(0, 1fr);
		padding: 32px 20px 0;
		border-radius: 24px;
	}

	.lance-cta__app-content {
		grid-column: 1;
		padding-block: 0;
	}

	.lance-cta__device {
		grid-row: 2;
		height: 290px;
		margin-top: 32px;
	}

	.lance-phone {
		top: 0;
		width: 240px;
	}

	.lance-cta__title {
		font-size: 31px;
		line-height: 34.1px;
		letter-spacing: -0.03em;
	}

	.lance-cta__text {
		margin: 14px 0 24px;
		font-size: 16px;
		line-height: 24px;
	}

	.lance-cta__trip {
		gap: 24px;
		padding: 28px 20px;
		border-radius: 24px;
	}

	.lance-cta__trip-title {
		font-size: 28px;
		line-height: 34px;
	}

	.lance-cta__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	/* Footer */
	.lance-footer {
		padding: 56px 16px 40px;
	}

	.lance-footer__inner {
		gap: 40px;
	}

	.lance-footer__top {
		flex-direction: column;
		gap: 40px;
	}

	.lance-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-top: 32px;
	}

	.lance-page__title {
		font-size: 31px;
		line-height: 34.1px;
	}

	/* Buying guide: everything stacks to one column. */
	.lance-bguide__title {
		font-size: 34px;
	}

	.lance-bguide__lead {
		font-size: 16px;
		line-height: 24px;
	}

	.lance-bguide__steps,
	.lance-bguide__before-list,
	.lance-bsupport {
		grid-template-columns: 1fr;
	}

	.lance-bstep {
		padding: 22px;
	}

	.lance-bguide__before {
		padding: 22px;
	}

	.lance-bguide__before-list li + li {
		padding-left: 0;
		padding-top: 20px;
		border-left: 0;
		border-top: 1px solid rgba(var(--lance-line-rgb), 0.16);
	}

	.lance-bsupport {
		padding-top: 32px;
	}

	.lance-bsupport__title {
		font-size: 30px;
	}

	.lance-bcard {
		padding: 22px;
	}

	/* Videos and journal both go to one column. */
	.lance-mvid__title {
		font-size: 28px;
		line-height: 34px;
	}

	.lance-mvid__grid,
	.lance-mjournal__grid {
		grid-template-columns: 1fr;
	}

	.lance-mjournal__title {
		font-size: 30px;
	}

	.lance-mjournal__panel {
		padding: 28px 20px;
		border-radius: 18px;
	}

	.lance-mjournal__head {
		align-items: flex-start;
	}

	.lance-mjournal__filters {
		gap: 6px;
	}

	.lance-mjournal__filter {
		padding: 7px 14px;
		font-size: 13px;
	}

	.lance-jcard {
		grid-template-columns: 124px minmax(0, 1fr);
	}

	.lance-jcard__body {
		padding: 13px 14px;
	}

	.lance-kit {
		padding: 22px;
	}

	/* Stacked, the cover has nothing to sit beside, so it centres and keeps only
	   the top overhang. */
	.lance-kit__cover {
		width: 168px;
		margin: -30px auto -6px;
	}

	.lance-kit__cta {
		width: 100%;
	}
}

/* ==========================================================================
   Yiwu Market Map page head
   ========================================================================== */

.lance-maphead {
	padding-bottom: 0;
}

/* The map carries its own 24px margin, so the section adds none on top. */
.lance-mapbody {
	padding-top: 0;
}

.lance-maphead .lance-container,
.lance-mapblock .lance-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Eyebrow, title and purpose line stack centred. Shared by the map page head
   and the map block embedded in the guide. */
.lance-maphead__head,
.lance-mapblock__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.lance-maphead__title {
	margin: 8px 0 0;
	font-family: var(--lance-serif);
	font-size: 44px;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.lance-maphead__lead,
.lance-mapblock__lead {
	margin: 0;
	color: var(--lance-muted);
	font-size: 17px;
}

/* Tucked to the right under the centred block, just above the map. */
.lance-maphead__back,
.lance-mapblock__link {
	display: inline-flex;
	gap: 6px;
	align-self: flex-end;
	align-items: center;
	color: var(--lance-red);
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}

.lance-maphead__back:hover,
.lance-mapblock__link:hover {
	text-decoration: underline;
}

.lance-maphead__back svg,
.lance-mapblock__link svg {
	width: 16px;
	height: 16px;
	flex: none;
}

@media (max-width: 809px) {
	.lance-maphead__title {
		font-size: 32px;
	}
}

/* ==========================================================================
   Services › Market Guide & Translation page, and the request form

   Sections in the order a buyer weighs the service up: hero, a market day
   beside the summary it ends in, included vs. on request, which visit fits,
   fees, what follows, the FAQ and the request form. All on the shared tokens.
   ========================================================================== */

/* Shared: a left-aligned section head, the small red link, and the stacked
   layout every section on the page uses. */
.lance-vhead {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 720px;
}

.lance-vhead__title {
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.lance-vhead__lead {
	color: var(--lance-muted);
	font-size: 15px;
	line-height: 22px;
}

.lance-vlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	color: var(--lance-red);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.lance-vlink .lance-icon {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-vlink:hover .lance-icon {
	transform: translateX(3px);
}

.lance-vscope .lance-container,
.lance-vbooth .lance-container,
.lance-vfees .lance-container,
.lance-vafter .lance-container {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

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

.lance-vhero {
	padding-bottom: 40px;
}

.lance-vhero .lance-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lance-vhero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	width: 100%;
}

.lance-vhero__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 0 40px;
}

/* Warmer and smaller than the shared eyebrow pill, matching the market page. */
.lance-vhero__eyebrow {
	padding: 5px 12px;
	background: var(--lance-beige);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lance-muted-warm);
}

.lance-vhero__title {
	max-width: 520px;
	font-size: 56px;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lance-vhero__lead {
	max-width: 460px;
	color: var(--lance-muted);
	font-size: 16px;
	line-height: 24px;
	text-wrap: pretty;
}

.lance-vhero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin-top: 8px;
}

/* The ghost action is a link beside a button, so it needs the button's
   underline-free, inherited-colour treatment spelled out. */
.lance-vhero__actions .lance-btn--ghost {
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lance-vhero__media img {
	width: 100%;
	height: 460px;
	object-fit: cover;
	border-radius: 16px;
}

/* The detailed sheet adds one line under each product — packaging, sample,
   next step — lined up with the product name and kept to a single row so the
   sheet stays about as tall as the timeline beside it. */
.lance-sheet__more {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	gap: 2px 18px;
	grid-column: 2 / -1;
	margin: -4px 0 0;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--lance-bg);
	font-size: 12px;
	line-height: 17px;
}

/* Label and value run inline, so a long value wraps under its own label
   instead of pushing into the next pair. */
.lance-sheet__more dt,
.lance-sheet__more dd {
	display: inline;
	margin: 0;
}

.lance-sheet__more dt {
	margin-right: 4px;
	color: var(--lance-muted);
}

.lance-sheet__more dt::after {
	content: ":";
}

/* --------------------------------------------------------------------------
   Included, and arranged on request
   -------------------------------------------------------------------------- */

.lance-vscope__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.lance-vscope__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	border: 1px solid var(--lance-card-line);
	border-radius: 14px;
	background: var(--lance-card);
}

/* Beige ground marks the column that costs extra, so the two never blur. */
.lance-vscope__col--request {
	background: var(--lance-beige);
}

.lance-vscope__title {
	font-family: var(--lance-sans);
	font-size: 17px;
	font-weight: 700;
	line-height: 24px;
}

.lance-vscope__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lance-vscope__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 21px;
}

.lance-vscope__list .lance-icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--lance-red);
}

.lance-vscope__col--request .lance-icon {
	color: var(--lance-muted-warm);
}

.lance-vscope__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.lance-vscope__note {
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 21px;
}

/* --------------------------------------------------------------------------
   A market day with Lance
   -------------------------------------------------------------------------- */

.lance-vday .lance-container {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.lance-vday__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 48px;
}

.lance-vday__steps {
	display: flex;
	flex-direction: column;
}

/* A hairline runs down through the icons, joining the day into one line. */
.lance-vday__step {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 16px;
	padding-bottom: 24px;
}

.lance-vday__step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 44px;
	bottom: 0;
	left: 22px;
	width: 1px;
	background: rgba(var(--lance-line-rgb), 0.18);
}

.lance-vday__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--lance-card-line);
	border-radius: 999px;
	background: var(--lance-card);
	color: var(--lance-red);
}

.lance-vday__icon .lance-icon {
	width: 20px;
	height: 20px;
}

.lance-vday__title {
	padding-top: 2px;
	font-family: var(--lance-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.lance-vday__text {
	margin-top: 4px;
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 21px;
}

.lance-vday__sheet {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	scroll-margin-top: calc(var(--lance-header-h) + 24px);
}

.lance-vday__caption {
	color: var(--lance-muted);
	font-size: 13px;
	line-height: 18px;
	text-align: center;
}

/* How the summary reaches the buyer: four short facts in one row. */
.lance-vday__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	padding-top: 28px;
	border-top: 1px solid var(--lance-card-line);
}

.lance-vday__fact {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 16px;
}

/* Line illustrations with dark ink, so like the home service cards they sit on
   --lance-plate, which stays light in dark mode. */
.lance-vday__fact-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--lance-plate);
}

.lance-vday__fact-icon img {
	display: block;
	width: 44px;
	height: 44px;
}

.lance-vday__fact-title {
	font-family: var(--lance-sans);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.lance-vday__fact-text {
	margin-top: 4px;
	color: var(--lance-muted);
	font-size: 13px;
	line-height: 19px;
}

/* --------------------------------------------------------------------------
   At the booth
   -------------------------------------------------------------------------- */

.lance-vbooth__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
	text-align: center;
}

/* Two lines, each its own statement, so each span breaks on its own. */
.lance-vbooth__title {
	font-size: 56px;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.lance-vbooth__title span {
	display: block;
}

.lance-vbooth__lead {
	max-width: 720px;
	text-wrap: balance;
	color: var(--lance-muted);
	font-size: 17px;
	line-height: 26px;
}

.lance-vbooth__grid {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	align-items: center;
	gap: 48px;
}

.lance-vbooth__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 16px;
}

.lance-vbooth__row {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 16px;
	padding: 24px 0;
}

.lance-vbooth__row:first-child {
	padding-top: 0;
}

.lance-vbooth__row:last-child {
	padding-bottom: 0;
}

.lance-vbooth__row + .lance-vbooth__row {
	border-top: 1px solid var(--lance-card-line);
}

.lance-vbooth__no {
	color: var(--lance-red);
	font-family: var(--lance-serif);
	font-size: 26px;
	line-height: 28px;
}

.lance-vbooth__row-title {
	margin-bottom: 6px;
	font-family: var(--lance-sans);
	font-size: 19px;
	font-weight: 700;
	line-height: 26px;
}

.lance-vbooth__q {
	color: var(--lance-muted);
	font-size: 15px;
	line-height: 23px;
}

.lance-vbooth__note {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
	padding-top: 24px;
	border-top: 1px solid var(--lance-card-line);
}

/* Same light plate as the delivery facts, so the dark-ink icon holds up in
   dark mode. */
.lance-vbooth__note-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: var(--lance-plate);
}

.lance-vbooth__note-icon img {
	display: block;
	width: 36px;
	height: 36px;
}

.lance-vbooth__note-text {
	flex: 1;
	color: var(--lance-muted);
	font-size: 15px;
	line-height: 22px;
}

.lance-vbooth__note .lance-vlink {
	align-self: center;
	flex: none;
}

/* --------------------------------------------------------------------------
   Service options & fees
   -------------------------------------------------------------------------- */

.lance-vfees .lance-container {
	padding: 48px 40px;
	border-radius: 24px;
	background: var(--lance-surface);
}

.lance-vfees__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.lance-vfees__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 28px;
	border: 1px solid var(--lance-card-line);
	border-radius: 16px;
	background: var(--lance-card);
}

.lance-vfees__tag {
	color: var(--lance-muted-warm);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lance-vfees__title {
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.lance-vfees__price {
	margin-bottom: 8px;
	color: var(--lance-red);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

.lance-vfees__points {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--lance-card-line);
	width: 100%;
}

.lance-vfees__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 21px;
}

.lance-vfees__points .lance-icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--lance-red);
}

.lance-vfees__extras {
	color: var(--lance-muted-warm);
	font-size: 14px;
	line-height: 21px;
}

.lance-vtip {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	border-radius: 14px;
	background: var(--lance-card);
	border: 1px solid var(--lance-card-line);
}

.lance-vtip__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--lance-red);
}

.lance-vtip > div {
	flex: 1;
}

.lance-vtip__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 22px;
}

.lance-vtip__text {
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 21px;
}

.lance-vtip__btn {
	flex: none;
}

/* --------------------------------------------------------------------------
   After you fly home
   -------------------------------------------------------------------------- */

.lance-vafter__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lance-vafter__row {
	display: grid;
	grid-template-columns: 24px minmax(180px, 240px) minmax(0, 1fr) 18px;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--lance-card-line);
	border-radius: 12px;
	background: var(--lance-card);
	transition: border-color 0.2s ease, transform 0.3s var(--lance-ease-out-expo);
}

.lance-vafter__row:hover {
	border-color: var(--lance-mist);
	transform: translateY(-2px);
}

.lance-vafter__icon {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	color: var(--lance-red);
}

.lance-vafter__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 22px;
}

.lance-vafter__text {
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 21px;
}

.lance-vafter__arrow {
	width: 18px;
	height: 18px;
	color: var(--lance-muted);
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-vafter__row:hover .lance-vafter__arrow {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

/* Full-width rows with a hairline between them, rather than the stacked beige
   cards the home and market pages use. */
.lance-vfaq .lance-container {
	align-items: stretch;
	gap: 24px;
}

.lance-vfaq .lance-faq__list {
	max-width: none;
	gap: 0;
}

.lance-vfaq .lance-faq__item {
	border-bottom: 1px solid var(--lance-card-line);
	border-radius: 0;
	background: none;
}

.lance-vfaq .lance-faq__question {
	padding: 20px 4px;
}

.lance-vfaq .lance-faq__q-text {
	font-size: 15px;
}

/* A chevron, so it turns a half circle instead of the cross glyph's 135°. */
.lance-vfaq .lance-faq__marker {
	width: 22px;
	height: 22px;
	background: none;
	color: var(--lance-muted);
}

.lance-vfaq .lance-faq__question[aria-expanded="true"] .lance-faq__marker {
	transform: rotate(180deg);
}

.lance-vfaq .lance-faq__answer {
	padding: 0 4px 20px;
	font-size: 14px;
	line-height: 21px;
}

/* --------------------------------------------------------------------------
   Request form — closes the market guide page and fills Plan My Trip
   -------------------------------------------------------------------------- */

.lance-vclose {
	padding-top: 0;
}

.lance-plantrip .lance-vclose {
	padding-top: 48px;
}

.lance-inq {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 40px;
	padding: 40px;
	border: 1px solid var(--lance-card-line);
	border-radius: 20px;
	background: var(--lance-beige);
}

.lance-inq__intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lance-vcta__title {
	font-family: var(--lance-serif);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.lance-vcta__sub {
	color: var(--lance-muted-warm);
	font-size: 15px;
	line-height: 22px;
}

.lance-inq__receive {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 8px;
	font-size: 14px;
	line-height: 21px;
}

.lance-inq__receive .lance-icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--lance-red);
}

.lance-inq__fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lance-inq__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.lance-inq__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
}

.lance-inq__field em {
	color: var(--lance-red);
	font-style: normal;
}

.lance-inq__field input[type="text"],
.lance-inq__field input[type="date"],
.lance-inq__field select,
.lance-inq__field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--lance-card-line);
	border-radius: 10px;
	background: var(--lance-card);
	color: var(--lance-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.lance-inq__field textarea {
	resize: vertical;
}

.lance-inq__field input:focus,
.lance-inq__field select:focus,
.lance-inq__field textarea:focus {
	border-color: var(--lance-muted);
	outline: 2px solid transparent;
}

.lance-inq__help {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: 0;
	padding: 0;
	border: 0;
}

.lance-inq__help legend {
	margin-bottom: 8px;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
}

.lance-inq__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	cursor: pointer;
}

.lance-inq__check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--lance-red-deep);
}

.lance-inq__btn {
	align-self: flex-start;
}

.lance-inq__notice {
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 21px;
}

.lance-inq__notice--ok {
	background: var(--lance-card);
	border: 1px solid var(--lance-card-line);
}

.lance-inq__notice--error {
	background: var(--lance-card);
	border: 1px solid var(--lance-red);
	color: var(--lance-red);
}

/* Off-screen rather than display:none, which some bots know to skip. */
.lance-inq__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Tablet: 810px - 1199px
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.lance-vhero__title {
		font-size: 44px;
	}

	.lance-vhero__media img {
		height: 400px;
	}

	.lance-vday__grid,
	.lance-inq {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.lance-vday__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lance-vbooth__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.lance-vbooth__title {
		font-size: 44px;
	}

	.lance-vafter__row {
		grid-template-columns: 24px minmax(0, 1fr) 18px;
		row-gap: 4px;
	}

	.lance-vafter__text {
		grid-column: 2 / 3;
	}

	.lance-vafter__arrow {
		grid-row: 1 / 3;
		grid-column: 3;
	}
}

/* --------------------------------------------------------------------------
   Phone: up to 809px
   -------------------------------------------------------------------------- */

@media (max-width: 809px) {
	.lance-vhero {
		padding-bottom: 24px;
	}

	.lance-vhero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.lance-vhero__head {
		padding: 8px 0 0;
	}

	.lance-vhero__title {
		font-size: 34px;
	}

	.lance-vhero__lead {
		max-width: none;
	}

	.lance-vhero__actions {
		gap: 18px;
	}

	.lance-vhero__media img {
		height: 260px;
		border-radius: 14px;
	}

	.lance-vhead__title {
		font-size: 27px;
	}

	.lance-sheet__more {
		display: flex;
		flex-wrap: wrap;
		gap: 2px 14px;
		grid-column: 1 / -1;
		margin: 0;
	}

	.lance-vday__facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.lance-vscope__grid,
	.lance-vfees__grid,
	.lance-inq__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.lance-vscope__col,
	.lance-vfees__card {
		padding: 20px;
	}

	.lance-vbooth__title {
		font-size: 34px;
	}

	.lance-vbooth__lead {
		font-size: 15px;
		line-height: 22px;
	}

	.lance-vbooth__row {
		grid-template-columns: 36px minmax(0, 1fr);
		gap: 12px;
		padding: 20px 0;
	}

	.lance-vbooth__no {
		font-size: 22px;
	}

	.lance-vbooth__row-title {
		font-size: 17px;
	}

	.lance-vbooth__note {
		flex-wrap: wrap;
	}

	.lance-vbooth__note-text {
		flex-basis: calc(100% - 64px);
	}

	.lance-vfees .lance-container {
		padding: 28px 20px;
		border-radius: 18px;
	}

	.lance-vtip {
		flex-wrap: wrap;
		align-items: flex-start;
		padding: 20px;
	}

	.lance-vtip__btn {
		width: 100%;
	}

	.lance-inq {
		padding: 22px;
	}

	.lance-vcta__title {
		font-size: 26px;
	}

	.lance-inq__btn {
		align-self: stretch;
	}
}

/* ==========================================================================
   Sourcing & Order Management
   Builds on the market guide blocks (.lance-vhead, .lance-vfees, .lance-vday,
   .lance-vafter, .lance-vfaq); only what those do not cover lives here.
   ========================================================================== */

.lance-sfit .lance-container,
.lance-ssend .lance-container {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* --------------------------------------------------------------------------
   Two plans: card extras and the comparison table
   -------------------------------------------------------------------------- */

.lance-splans .lance-container {
	scroll-margin-top: var(--lance-header-h);
}

.lance-splans__sub {
	margin-top: -4px;
	color: var(--lance-muted);
	font-size: 15px;
	line-height: 22px;
}

.lance-splans__best {
	margin-top: auto;
	padding-top: 8px;
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 21px;
}

.lance-splans__btn {
	margin-top: 8px;
}

/* The table may be wider than a phone; it scrolls inside its own frame. */
.lance-splans__scroll {
	overflow-x: auto;
	border: 1px solid var(--lance-card-line);
	border-radius: 16px;
	background: var(--lance-card);
}

.lance-splans__table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 21px;
}

.lance-splans__table th,
.lance-splans__table td {
	padding: 14px 20px;
	border-top: 1px solid var(--lance-card-line);
	text-align: left;
	vertical-align: middle;
}

.lance-splans__table thead th {
	border-top: 0;
	font-size: 15px;
	font-weight: 700;
}

.lance-splans__table tbody th {
	width: 38%;
	color: var(--lance-muted);
	font-weight: 400;
}

.lance-splans__table td {
	width: 31%;
}

.lance-splans__yes {
	width: 18px;
	height: 18px;
	color: var(--lance-red);
	vertical-align: -4px;
}

.lance-splans__no {
	color: var(--lance-muted);
}

/* --------------------------------------------------------------------------
   Which plan fits you
   -------------------------------------------------------------------------- */

.lance-sfit__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lance-sfit__row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto 18px;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--lance-card-line);
	border-radius: 12px;
	background: var(--lance-card);
	transition: border-color 0.2s ease, transform 0.3s var(--lance-ease-out-expo);
}

.lance-sfit__row:hover {
	border-color: var(--lance-mist);
	transform: translateY(-2px);
}

.lance-sfit__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lance-sfit__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.lance-sfit__text {
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 21px;
}

/* Pro is the filled pill, Basic the outlined one, as on the plan buttons. */
.lance-sfit__plan {
	padding: 6px 14px;
	border: 1px solid var(--lance-red);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	white-space: nowrap;
}

.lance-sfit__plan--all-in {
	border-color: var(--lance-red-deep);
	background: var(--lance-red-deep);
	color: var(--lance-on-accent);
}

.lance-sfit__plan--fee {
	color: var(--lance-red);
}

.lance-sfit__arrow {
	width: 18px;
	height: 18px;
	color: var(--lance-muted);
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-sfit__row:hover .lance-sfit__arrow {
	transform: translateX(3px);
}

.lance-sfit__icon,
.lance-ssend__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--lance-card-line);
	border-radius: 999px;
	background: var(--lance-card);
	color: var(--lance-red);
}

.lance-sfit__icon .lance-icon,
.lance-ssend__icon .lance-icon {
	width: 20px;
	height: 20px;
}

/* --------------------------------------------------------------------------
   What to send us
   -------------------------------------------------------------------------- */

.lance-ssend__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 24px;
}

.lance-ssend__item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 16px;
}

.lance-ssend__title {
	padding-top: 2px;
	font-family: var(--lance-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.lance-ssend__text {
	margin-top: 4px;
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 21px;
}

/* --------------------------------------------------------------------------
   From quote to warehouse
   -------------------------------------------------------------------------- */

.lance-sprocess__note {
	padding-top: 24px;
	border-top: 1px solid var(--lance-card-line);
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 21px;
}

/* --------------------------------------------------------------------------
   Proof strip under the hero
   -------------------------------------------------------------------------- */

/* Not a .lance-section (no vertical padding), so it takes the side gutter itself. */
.lance-sproof {
	padding: 0 var(--lance-section-x) 24px;
}

/* The tilted photo stack and its shadow hang lower than a single hero photo,
   so the strip under it needs more room. */
.lance-shhero + .lance-sproof {
	padding-top: 56px;
}

.lance-sproof__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: var(--lance-container);
	margin: 0 auto;
	padding: 24px 0;
	border-top: 1px solid var(--lance-card-line);
	border-bottom: 1px solid var(--lance-card-line);
}

.lance-sproof__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 24px;
}

.lance-sproof__item + .lance-sproof__item {
	border-left: 1px solid var(--lance-card-line);
}

.lance-sproof__item:first-child {
	padding-left: 0;
}

.lance-sproof__value {
	color: var(--lance-red);
	font-family: var(--lance-serif);
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Word headings ("Product Checks") run longer than figures ("700+"). */
.lance-sproof--words .lance-sproof__value {
	font-size: 21px;
	line-height: 1.2;
}

/* Icon style: a line icon over a plain heading. The icons carry the red
   accent, so the heading drops to the text colour. */
.lance-sproof--icons .lance-sproof__item {
	gap: 6px;
}

.lance-sproof__icon {
	display: block;
	width: 64px;
	height: 64px;
	margin-bottom: 8px;
	color: var(--lance-text);
}

.lance-sproof__icon .lance-icon {
	width: 100%;
	height: 100%;
}

.lance-sproof--icons .lance-sproof__value {
	color: var(--lance-text);
	font-family: var(--lance-sans);
	font-size: 17px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0;
}

/* Side style: the icon sits to the left of the heading and text. */
.lance-sproof--side .lance-sproof__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	align-items: start;
	column-gap: 18px;
	row-gap: 4px;
}

.lance-sproof--side .lance-sproof__icon {
	grid-row: 1 / 3;
	margin-bottom: 0;
}

.lance-sproof--side .lance-sproof__value {
	padding-top: 4px;
}

.lance-sproof__label {
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 20px;
}

@media (max-width: 1199px) {
	.lance-sproof--side .lance-sproof__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 24px;
	}

	.lance-sproof--side .lance-sproof__item:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}

	.lance-ssend__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 809px) {
	.lance-ssend__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lance-sproof__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 20px;
		padding: 20px 0;
	}

	.lance-sproof__item,
	.lance-sproof__item:first-child {
		padding: 0 16px 0 0;
	}

	.lance-sproof__item + .lance-sproof__item {
		border-left: 0;
	}

	.lance-sproof__value {
		font-size: 27px;
	}

	.lance-sproof--words .lance-sproof__value {
		font-size: 20px;
	}

	.lance-sproof__icon {
		width: 52px;
		height: 52px;
	}

	.lance-sproof--icons .lance-sproof__value {
		font-size: 16px;
		line-height: 22px;
	}

	.lance-sproof--side .lance-sproof__item {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		align-content: start;
	}

	.lance-sproof--side .lance-sproof__icon {
		grid-row: auto;
		margin-bottom: 4px;
	}

	.lance-sproof--side .lance-sproof__value {
		padding-top: 0;
	}

	.lance-shhero + .lance-sproof {
		padding-top: 24px;
	}

	/* Plan pill drops under the text; the arrow stays on the right. */
	.lance-sfit__row {
		grid-template-columns: 44px minmax(0, 1fr) 18px;
		row-gap: 10px;
		padding: 16px;
	}

	.lance-sfit__plan {
		grid-row: 2;
		grid-column: 2;
		justify-self: start;
	}

	.lance-sfit__arrow {
		grid-row: 1 / 3;
		grid-column: 3;
	}

	.lance-splans__btn {
		align-self: stretch;
	}

	.lance-splans__table {
		min-width: 480px;
	}

	.lance-splans__table th,
	.lance-splans__table td {
		padding: 12px 14px;
	}

	/* Row labels stay put while the two plan columns scroll under them. */
	.lance-splans__table tbody th,
	.lance-splans__table thead th:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		width: 132px;
		background: var(--lance-card);
		box-shadow: 1px 0 0 var(--lance-card-line);
	}
}

/* ==========================================================================
   Inspection & Shipping
   Builds on the market guide blocks (.lance-vhero, .lance-vhead, .lance-vfaq)
   and the sourcing table frame (.lance-splans__scroll); only what those do
   not cover lives here.
   ========================================================================== */

#inspection,
#reports,
#consolidation,
#shipping,
#faqs {
	scroll-margin-top: calc(var(--lance-header-h) + 24px);
}

.lance-shchecks .lance-container,
.lance-shcons .lance-container,
.lance-shload .lance-container,
.lance-shroutes .lance-container {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* A soft round plate behind an outlined icon, shared by the report and
   consolidation steps. */
.lance-shround {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(var(--lance-blush-rgb), 0.9);
	border-radius: 999px;
	background: rgba(var(--lance-blush-rgb), 0.35);
	color: var(--lance-red);
}

.lance-shround .lance-icon {
	width: 22px;
	height: 22px;
}

.lance-shround--lg {
	width: 60px;
	height: 60px;
}

.lance-shround--lg .lance-icon {
	width: 26px;
	height: 26px;
}

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

.lance-shhero__eyebrow {
	color: var(--lance-red);
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lance-shhero__title {
	max-width: none;
	font-size: 48px;
	text-wrap: wrap;
}

.lance-shhero__subtitle {
	display: block;
	font-size: 0.8em;
	font-weight: 400;
}

.lance-shhero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-top: 8px;
}

.lance-shhero__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lance-shhero__link .lance-icon {
	width: 16px;
	height: 16px;
}

/* Three record photos laid on each other like prints. */
.lance-shhero__stack {
	position: relative;
	height: 460px;
}

.lance-shhero__photo {
	position: absolute;
	height: auto;
	border: 8px solid var(--lance-card);
	border-radius: 6px;
	box-shadow: 0 18px 40px rgba(var(--lance-line-rgb), 0.18);
	object-fit: cover;
}

.lance-shhero__photo--1 {
	top: 24px;
	left: 0;
	width: 58%;
	aspect-ratio: 4 / 5;
	transform: rotate(-3deg);
}

.lance-shhero__photo--2 {
	top: 90px;
	right: 0;
	width: 56%;
	aspect-ratio: 4 / 3;
	transform: rotate(3deg);
}

.lance-shhero__photo--3 {
	bottom: 0;
	left: 38%;
	width: 34%;
	aspect-ratio: 4 / 3;
	transform: rotate(-2deg);
}

.lance-shhero__note {
	position: absolute;
	top: 0;
	right: 4%;
	max-width: 190px;
	color: var(--lance-red-deep);
	font-family: var(--lance-serif);
	font-size: 17px;
	font-style: italic;
	line-height: 1.3;
	transform: rotate(-5deg);
}

/* --------------------------------------------------------------------------
   What we check
   -------------------------------------------------------------------------- */

.lance-shchecks__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.lance-shchecks__card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 8px 18px;
	border: 1px solid var(--lance-card-line);
	border-radius: 12px;
	background: var(--lance-card);
}

.lance-shchecks__card img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-bottom: 10px;
	border-radius: 8px;
	object-fit: cover;
}

.lance-shchecks__title {
	padding: 0 8px;
	font-family: var(--lance-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.lance-shchecks__text {
	padding: 0 8px;
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 20px;
}

/* --------------------------------------------------------------------------
   Agree the scope
   -------------------------------------------------------------------------- */

.lance-shscope .lance-container {
	padding: 48px 40px;
	border-radius: 24px;
	background: var(--lance-surface);
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: 40px;
}

.lance-shscope__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lance-shscope__title {
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.lance-shscope__side {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lance-shscope__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.lance-shscope__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 28px 20px;
	border-radius: 12px;
	background: var(--lance-card);
	text-align: center;
}

.lance-shscope__icon {
	margin-bottom: 4px;
	color: var(--lance-red);
}

.lance-shscope__icon .lance-icon {
	width: 34px;
	height: 34px;
}

.lance-shscope__card-title {
	font-family: var(--lance-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.lance-shscope__text,
.lance-shscope__note {
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 20px;
}

.lance-shscope__note {
	text-align: center;
}

/* --------------------------------------------------------------------------
   A report you can act on
   -------------------------------------------------------------------------- */

.lance-shreport .lance-container {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: 40px;
}

.lance-shreport__intro {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.lance-shreport__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

/* An arrow between steps, drawn in the gap. */
.lance-shreport__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.lance-shreport__step:not(:last-child)::after,
.lance-shcons__step:not(:last-child)::after {
	content: "→";
	position: absolute;
	top: 14px;
	right: -14px;
	color: var(--lance-red);
	font-size: 16px;
	line-height: 20px;
}

.lance-shreport__label {
	font-size: 13px;
	line-height: 18px;
}

.lance-shreport__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--lance-card-line);
	border-radius: 14px;
	background: var(--lance-card);
	box-shadow: 0 16px 40px rgba(var(--lance-line-rgb), 0.08);
}

.lance-shreport__card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--lance-card-line);
}

.lance-shreport__tag {
	color: var(--lance-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lance-shreport__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: var(--lance-serif);
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.04em;
}

.lance-shreport__brand small {
	margin-top: 2px;
	color: var(--lance-muted);
	font-family: var(--lance-sans);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lance-shreport__card-body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 0.8fr)) minmax(0, 1.4fr);
	align-items: start;
	gap: 12px;
}

.lance-shreport__photo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--lance-muted);
	font-size: 11px;
	line-height: 15px;
}

.lance-shreport__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	object-fit: cover;
}

.lance-shreport__rows {
	margin: 0;
	border: 1px solid var(--lance-card-line);
	border-radius: 8px;
	font-size: 12px;
	line-height: 16px;
}

.lance-shreport__rows > div {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.lance-shreport__rows > div + div {
	border-top: 1px solid var(--lance-card-line);
}

.lance-shreport__rows dt,
.lance-shreport__rows dd {
	margin: 0;
	padding: 12px 10px;
}

.lance-shreport__rows dt {
	border-right: 1px solid var(--lance-card-line);
	color: var(--lance-muted);
}

.lance-shreport__rows dd {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lance-shreport__rows .lance-icon {
	flex: none;
	width: 14px;
	height: 14px;
}

.lance-shreport__state--review {
	background: rgba(var(--lance-blush-rgb), 0.4);
	color: var(--lance-red-deep);
}

.lance-shreport__state--done {
	color: var(--lance-success);
}

/* --------------------------------------------------------------------------
   Consolidation
   -------------------------------------------------------------------------- */

.lance-shcons .lance-container {
	padding: 48px 40px;
	border-radius: 24px;
	background: var(--lance-surface);
}

.lance-shcons__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.lance-shcons__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.lance-shcons__step:not(:last-child)::after {
	top: 20px;
	right: -24px;
}

.lance-shcons__title {
	color: var(--lance-red);
	font-family: var(--lance-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 22px;
}

.lance-shcons__title span {
	font-family: var(--lance-serif);
	font-size: 18px;
	font-weight: 400;
}

.lance-shcons__text {
	margin-top: 2px;
	color: var(--lance-muted);
	font-size: 13px;
	line-height: 19px;
}

/* --------------------------------------------------------------------------
   Loading, documented
   -------------------------------------------------------------------------- */

.lance-shload__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.lance-shload__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.lance-shload__item img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 11;
	border-radius: 10px;
	object-fit: cover;
}

.lance-shload__item figcaption {
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Shipping routes
   -------------------------------------------------------------------------- */

.lance-shroutes__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 24px;
}

.lance-shroutes__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	align-items: start;
	gap: 32px;
}

.lance-shroutes__table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 20px;
}

.lance-shroutes__table th,
.lance-shroutes__table td {
	padding: 12px 18px;
	border-top: 1px solid var(--lance-card-line);
	text-align: left;
}

.lance-shroutes__table thead th {
	border-top: 0;
	background: var(--lance-surface);
	font-weight: 700;
}

.lance-shroutes__table tbody th {
	font-weight: 700;
}

.lance-shroutes__table td {
	color: var(--lance-muted);
}

.lance-shroutes__note {
	margin-top: 10px;
	color: var(--lance-muted);
	font-size: 13px;
	line-height: 18px;
}

.lance-shroutes__docs {
	display: flex;
	gap: 16px;
	padding: 8px 0 8px 28px;
	border-left: 1px solid var(--lance-card-line);
}

.lance-shroutes__docs-icon {
	color: var(--lance-red);
}

.lance-shroutes__docs-icon .lance-icon {
	width: 32px;
	height: 32px;
}

.lance-shroutes__docs-title {
	margin-bottom: 8px;
	font-family: var(--lance-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 22px;
}

.lance-shroutes__docs li {
	color: var(--lance-muted);
	font-size: 14px;
	line-height: 24px;
}

/* --------------------------------------------------------------------------
   Tablet and phone
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.lance-shhero__title {
		font-size: 44px;
	}

	.lance-shscope .lance-container,
	.lance-shreport .lance-container,
	.lance-shroutes__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.lance-shcons__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lance-shcons__step::after {
		display: none;
	}

	.lance-shload__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lance-shroutes__docs {
		padding: 20px 0 0;
		border-top: 1px solid var(--lance-card-line);
		border-left: 0;
	}
}

@media (max-width: 809px) {
	.lance-shhero__title {
		font-size: 34px;
	}

	.lance-shhero__stack {
		height: 320px;
	}

	.lance-shhero__note {
		font-size: 14px;
		max-width: 140px;
	}

	.lance-shscope .lance-container,
	.lance-shcons .lance-container {
		padding: 28px 20px;
		border-radius: 18px;
	}

	.lance-shchecks__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.lance-shchecks__title {
		font-size: 14px;
		line-height: 20px;
	}

	.lance-shchecks__text {
		font-size: 13px;
		line-height: 18px;
	}

	.lance-shscope__title {
		font-size: 27px;
	}

	.lance-shscope__grid,
	.lance-shcons__steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.lance-shscope__card {
		padding: 22px 18px;
	}

	.lance-shreport__steps {
		gap: 8px;
	}

	.lance-shreport__step:not(:last-child)::after {
		right: -10px;
	}

	.lance-shreport__card-body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lance-shreport__rows {
		grid-column: 1 / -1;
	}

	.lance-shload__grid {
		gap: 12px;
	}
}

/* Shared footer: brand column, four navigation groups and social row. */
.lance-footer{padding:96px 48px;border-radius:0;font-family:var(--lance-sans)}
.lance-footer__inner{gap:64px}
.lance-footer__top{display:grid;grid-template-columns:minmax(240px,1.7fr) repeat(3,minmax(140px,1fr)) minmax(100px,.65fr);gap:40px}
.lance-footer__brand{min-width:0}.lance-footer__brand-text{gap:24px;width:100%}
.lance-footer__wordmark .lance-brand__mark{width:44px;height:44px}.lance-footer__wordmark h3{font-size:30px;line-height:1.2;margin:0}
.lance-footer__tagline{max-width:330px;margin:0;font-size:16px;line-height:1.55}
.lance-footer__company{opacity:.8}.lance-footer__location{display:flex;align-items:center;gap:12px}.lance-footer__location svg{width:22px;height:26px;flex:none}
.lance-footer__col{min-width:0;gap:26px}.lance-footer__col-title{font-weight:700;font-size:18px;margin:0;line-height:1.4}
.lance-footer__links,.lance-footer__links .lance-nav__list{gap:18px;list-style:none;margin:0;padding:0}.lance-footer__links a{display:inline-block;font-size:16px;line-height:1.5;opacity:.85}
.lance-footer__bottom{border-top:1px solid currentColor;border-color:color-mix(in srgb,var(--lance-on-dark) 22%,transparent);padding-top:48px;align-items:center;gap:24px}.lance-footer__bottom p{margin:0;font-size:14px;opacity:.8}
.lance-footer__socials{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}.lance-footer__socials li>a,.lance-footer__socials li>span{display:flex;align-items:center;gap:12px;font-size:15px;opacity:.9}.lance-footer__socials svg{width:24px;height:24px;flex:none}.lance-footer__socials a:hover{opacity:.65}
@media(max-width:1100px){.lance-footer{padding:72px 32px}.lance-footer__top{grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:26px}.lance-footer__links a{font-size:14px}.lance-footer__col-title{font-size:16px}.lance-footer__tagline{font-size:14px}}
@media(max-width:850px){.lance-footer__top{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}.lance-footer__brand{grid-column:1/-1}.lance-footer__tagline{max-width:400px}.lance-footer__bottom{align-items:flex-start;flex-direction:column}.lance-footer__socials{gap:28px}}
@media(max-width:520px){.lance-footer{padding:56px 20px 40px}.lance-footer__inner{gap:40px}.lance-footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}.lance-footer__brand-text{gap:18px}.lance-footer__col{gap:16px}.lance-footer__links,.lance-footer__links .lance-nav__list{gap:12px}.lance-footer__socials{gap:22px;flex-wrap:wrap}.lance-footer__socials li>a,.lance-footer__socials li>span{gap:8px;font-size:13px}.lance-footer__socials svg{width:21px;height:21px}.lance-footer__bottom{padding-top:32px;gap:22px}}

/* Footer typography: Manrope retained, with Intrepid-inspired size/weight hierarchy. */
.lance-footer__col-title{font-size:15px;font-weight:600}
.lance-footer__links a{font-size:13px;font-weight:400}
.lance-footer__tagline{font-size:14px;font-weight:400}
.lance-footer__company{font-size:13px;font-weight:400}
.lance-footer__bottom p{font-size:12px;font-weight:400}
.lance-footer__socials li>a,.lance-footer__socials li>span{font-size:13px;font-weight:400}

/* Quiet social links and an explicit, non-scannable App placeholder. */
.lance-footer__socials li>a,.lance-footer__socials li>span{color:var(--lance-on-dark);opacity:.65;transition:opacity .2s}
.lance-footer__socials svg{width:20px;height:20px}
.lance-footer__socials svg circle,.lance-footer__socials svg rect{fill:currentColor}
.lance-footer__socials svg path[fill="#FFFFFF"]{fill:var(--lance-forest)}
.lance-footer__socials a:hover,.lance-footer__socials a:focus-visible{opacity:1}
.lance-footer__app{display:flex;align-items:center;gap:14px;margin-top:2px}
.lance-footer__app-qr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:76px;height:76px;flex:none;border:1px dashed color-mix(in srgb,var(--lance-on-dark) 30%,transparent);border-radius:8px;color:color-mix(in srgb,var(--lance-on-dark) 60%,transparent)}
.lance-footer__app-qr svg{width:36px;height:36px}
.lance-footer__app-qr span{font-size:8px;letter-spacing:1px}
.lance-footer__app-copy p{margin:0 0 6px;font-size:13px;font-weight:500;opacity:.8}
.lance-footer__app-copy>span{font-size:12px;opacity:.55}

/* Plan My Trip: a visit planning page around the shared inquiry form. */
.trip-page{padding-top:64px;padding-bottom:88px}
.trip-wrap{width:calc(100% - 64px);max-width:1200px;margin:0 auto}
.trip-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;padding-bottom:88px}
.trip-eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;margin:0 0 18px;color:var(--lance-muted-warm)}
.trip-hero h1{font-family:var(--lance-serif);font-size:clamp(36px,3.6vw,52px);font-weight:400;line-height:1.2;letter-spacing:-.025em;margin:0 0 24px}
.trip-lead{font-size:17px;line-height:1.7;color:var(--lance-muted-warm);margin:0 0 24px}
.trip-benefits{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:12px;font-size:14px}
.trip-benefits li{display:flex;gap:10px;align-items:baseline}.trip-benefits li:before{content:'✓';color:#346653;font-weight:700}
.trip-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.trip-actions .lance-btn svg{width:18px;height:18px}
.trip-text-link{font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:5px;line-height:1.6}
.trip-hero__photo{margin:0;position:relative}.trip-hero__photo img{display:block;width:100%;height:450px;object-fit:cover;border-radius:18px}
.trip-hero__photo figcaption{position:absolute;bottom:18px;left:18px;right:18px;padding:16px 18px;border-radius:10px;background:#fffef6eb;color:#29312b;font-size:12px;line-height:1.5}
.trip-section-head{margin-bottom:32px}.trip-section-head h2{font-size:32px;font-weight:500;line-height:1.25;letter-spacing:-.025em;margin:0 0 14px}.trip-section-head>p:last-child:not(.trip-eyebrow){font-size:15px;line-height:1.6;color:var(--lance-muted-warm);margin:0}
.trip-services__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.trip-service{padding:26px 24px;border-radius:14px;color:#25322d}.trip-service--mint{background:#edf8f1}.trip-service--aqua{background:#eff8fa}.trip-service--butter{background:#fcf8e8}.trip-service--lavender{background:#f4effb}.trip-service>.lance-icon{width:28px;height:28px;margin-bottom:22px;color:#486459}.trip-service__label{font-size:11px;font-weight:600;margin:0 0 10px;letter-spacing:.04em}.trip-service h3{font-size:18px;line-height:1.4;margin:0 0 12px;font-weight:600}.trip-service>p:last-child{font-size:13px;line-height:1.7;margin:0;color:#53605b}
.trip-process{padding-top:80px;padding-bottom:72px}.trip-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.trip-steps li{border-top:1px solid var(--lance-card-line);padding-top:22px}.trip-steps li>span{font-size:12px;color:var(--lance-muted-warm)}.trip-steps h3{font-size:19px;margin:14px 0 10px;font-weight:600}.trip-steps p{font-size:14px;line-height:1.7;color:var(--lance-muted-warm);margin:0}
.trip-page #request{padding:0 32px 80px;scroll-margin-top:100px}.trip-page #request>.lance-container{max-width:1200px;padding:0;margin:auto;width:100%}.trip-page .lance-inq{padding:40px;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:54px;background:var(--lance-surface,#fff);border-radius:18px}.trip-page .lance-vcta__title{font-size:36px;margin:0 0 12px}.trip-page .lance-inq__intro{gap:12px}.trip-page .lance-inq__receive{margin-top:16px;line-height:1.8}.trip-page .lance-inq__receive .lance-icon{color:#346653}.trip-form-aside{background:#fcf8e8;color:#39433e;padding:20px;border-radius:10px;margin:16px 0 8px}.trip-form-aside p{font-size:14px;font-weight:600;margin:0 0 8px}.trip-form-aside span{font-size:13px;line-height:1.7;display:block}
.trip-form-heading{font-size:16px;font-weight:600;margin:16px 0 4px;border-top:1px solid var(--lance-card-line);padding-top:24px;display:flex;gap:12px;align-items:center}.trip-form-heading:first-of-type{margin-top:0;padding-top:0;border-top:0}.trip-form-heading>span{font-size:11px;font-weight:500;color:var(--lance-muted-warm)}
.trip-page .lance-inq__field input,.trip-page .lance-inq__field select,.trip-page .lance-inq__field textarea{background:var(--lance-bg,#faf9f6)}.trip-page .lance-inq__help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.trip-page .lance-inq__help legend{margin-bottom:12px}.trip-page .lance-inq__help .lance-inq__check{padding:12px;border:1px solid var(--lance-card-line);border-radius:8px;align-items:flex-start;font-size:12px;line-height:1.6}.trip-page .lance-inq__help .lance-inq__check:has(input:checked){background:#edf8f1;border-color:#7f9e8d;color:#25322d}.trip-form-privacy{font-size:12px;color:var(--lance-muted-warm);line-height:1.7;margin:0}.trip-form-privacy a{text-decoration:underline}.trip-page .lance-inq__btn{align-self:flex-start}
.trip-faq{display:grid;grid-template-columns:.8fr 1.4fr;gap:80px;padding-bottom:80px}.trip-faq details{border-bottom:1px solid var(--lance-card-line);padding:20px 0}.trip-faq details:first-child{border-top:1px solid var(--lance-card-line)}.trip-faq summary{font-size:15px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;line-height:1.6}.trip-faq summary::-webkit-details-marker{display:none}.trip-faq summary span{font-size:22px;font-weight:400}.trip-faq details[open] summary span{transform:rotate(45deg)}.trip-faq details>p{font-size:14px;line-height:1.8;color:var(--lance-muted-warm);margin:14px 24px 0 0}
.trip-guides__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.trip-guides__grid a{position:relative;padding:26px;border:1px solid var(--lance-card-line);border-radius:12px;transition:border-color .2s}.trip-guides__grid a:hover{border-color:#7f9e8d}.trip-guides__grid span{font-size:10px;letter-spacing:.08em;color:var(--lance-muted-warm)}.trip-guides__grid h3{font-size:18px;line-height:1.5;margin:16px 0 10px;font-weight:600}.trip-guides__grid p{font-size:13px;color:var(--lance-muted-warm);margin:0}.trip-guides__grid b{position:absolute;right:24px;top:20px;font-weight:400}
@media(max-width:1000px){.trip-hero{gap:32px}.trip-services__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trip-page .lance-inq{gap:32px;padding:28px}.trip-faq{gap:40px}.trip-hero__photo img{height:420px}}
@media(max-width:700px){.trip-page{padding-top:40px;padding-bottom:56px}.trip-wrap{width:calc(100% - 40px)}.trip-hero{grid-template-columns:1fr;gap:28px;padding-bottom:56px}.trip-hero h1{font-size:36px}.trip-lead{font-size:15px}.trip-hero__photo img{height:300px}.trip-section-head h2{font-size:27px}.trip-services__grid{gap:12px}.trip-service{padding:20px 16px}.trip-service h3{font-size:16px}.trip-process{padding-top:56px;padding-bottom:48px}.trip-steps{grid-template-columns:1fr;gap:24px}.trip-page #request{padding:0 20px 56px}.trip-page .lance-inq{grid-template-columns:1fr;padding:24px 20px;gap:28px}.trip-page .lance-vcta__title{font-size:30px}.trip-page .lance-inq__row,.trip-page .lance-inq__help{grid-template-columns:1fr}.trip-page .lance-inq__btn{width:100%;justify-content:center}.trip-faq{grid-template-columns:1fr;gap:0;padding-bottom:56px}.trip-guides__grid{grid-template-columns:1fr}.trip-actions{gap:18px}}
.trip-page .trip-service h3{color:#25322d;font-family:var(--lance-sans)}
.trip-page .trip-section-head h2,.trip-page .trip-steps h3,.trip-page .trip-guides h3,.trip-page .trip-form-heading{font-family:var(--lance-sans)}
.trip-page .lance-inq{background:var(--lance-card)}
.trip-page{padding-top:104px}
@media(max-width:700px){.trip-page{padding-top:88px}}

/* Direct navigation to the opening-hours guidance within Market Overview. */
#opening-hours{scroll-margin-top:100px}
.lance-hours-source{font-size:12px;line-height:1.7;color:var(--lance-muted-warm)}
.lance-hours-source a{text-decoration:underline;text-underline-offset:3px}

/* Homepage service cards connect directly to the relevant service sections. */
a.lance-scard{color:inherit;text-decoration:none;transition:box-shadow .2s,transform .2s}
a.lance-scard:hover{transform:translateY(-3px);box-shadow:0 8px 22px #11120f0d}
a.lance-scard:focus-visible{outline:2px solid var(--lance-text);outline-offset:5px}
#plans,#process,#inspection,#consolidation,#market-day,#private-label{scroll-margin-top:100px}
.lance-private-label__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.lance-private-label__grid article{padding:26px;border:1px solid var(--lance-card-line);border-radius:14px;background:var(--lance-card)}
.lance-private-label__grid svg{width:26px;height:26px;color:var(--lance-muted-warm);margin-bottom:20px}
.lance-private-label h3{font-family:var(--lance-sans);font-size:18px;line-height:1.4;margin:0 0 12px;font-weight:600}
.lance-private-label p{font-size:14px;line-height:1.8;color:var(--lance-muted-warm)}
.lance-private-label__approval{margin-top:32px;padding:28px;border-radius:14px;background:var(--lance-surface)}
.lance-private-label__approval ol{list-style:decimal-leading-zero;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin:24px 0 0;padding-left:24px}
.lance-private-label__approval li{padding-left:6px;font-size:12px}.lance-private-label__approval strong{display:block;font-size:14px;margin-bottom:8px}.lance-private-label__approval span{display:block;font-size:13px;line-height:1.7;color:var(--lance-muted-warm)}
.lance-private-label__note{padding-top:28px;max-width:900px}.lance-private-label__note a{font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.lance-private-label__grid,.lance-private-label__approval ol{grid-template-columns:1fr;gap:18px}.lance-private-label__approval{padding:24px}}
.lance-private-label .lance-eyebrow{align-self:flex-start;width:fit-content}

/* Product imagery for the shared illustrative sourcing sheet. */
.lance-sheet__thumb:has(img){background:var(--lance-plate);overflow:hidden;border:1px solid var(--lance-border, #d8d4cc);box-sizing:border-box}
.lance-sheet__thumb img{display:block;width:100%;height:100%;object-fit:contain;padding:4px}

/* Sourcing SVG set: generous canvas for fine outlines and red details. */
.lance-ssend__icon .lance-sourcing-icon,
.lance-sprocess .lance-vday__icon .lance-sourcing-icon,
#next .lance-vafter__icon .lance-sourcing-icon {
 width: 48px;
 height: 48px;
 stroke: var(--lance-text-soft, #30352d);
}
/* These two sit in 44px circles; keep the glyph inside the border. */
.lance-ssend__icon .lance-sourcing-icon,
.lance-sprocess .lance-vday__icon .lance-sourcing-icon {
 width: 30px;
 height: 30px;
}
.lance-private-label__grid .lance-sourcing-icon {
 width: 64px;
 height: 64px;
 stroke: var(--lance-text-soft, #30352d);
 margin-bottom: 16px;
}
#next .lance-vafter__icon { width: 48px; height: 48px; }
#next .lance-vafter__row {
 grid-template-columns: 48px minmax(180px, 240px) minmax(0, 1fr) 18px;
}
@media (max-width: 1099px) {
 #next .lance-vafter__row { grid-template-columns: 48px minmax(0, 1fr) 18px; }
}

/* TOC target for "Getting Here". */
#getting-here{scroll-margin-top:calc(var(--lance-header-h) + 24px)}

/* Inspection and shipping share the site's two-colour service SVG library. */
.lance-shscope__icon,
.lance-shround,
.lance-shroutes__docs-icon {
 color: var(--lance-text-soft, #30352d);
}
.lance-shscope__icon .lance-icon {
 width: 60px;
 height: 60px;
 stroke: var(--lance-text-soft, #30352d);
}
.lance-shround {
 border-color: var(--lance-card-line);
 background: var(--lance-card);
}
.lance-shround .lance-icon {
 width: 44px;
 height: 44px;
 stroke: var(--lance-text-soft, #30352d);
}
.lance-shround--lg .lance-icon {
 width: 48px;
 height: 48px;
}
.lance-shroutes__docs-icon .lance-icon {
 width: 48px;
 height: 48px;
 stroke: var(--lance-text-soft, #30352d);
}

/* Native article Details blocks share the home FAQ surface and controls. */
:is(.bp-body,.dg-body) details{
 max-width:650px;border:0;padding:0;margin:16px 0;
}
:is(.bp-body,.dg-body) details > summary{
 position:relative;list-style:none;cursor:pointer;font-family:var(--lance-sans);
 font-size:16px;font-weight:400;line-height:24px;letter-spacing:.01em;
 color:var(--lance-text);
}
:is(.bp-body,.dg-body) details > summary::-webkit-details-marker{display:none}
:is(.bp-body,.dg-body) details > summary::after{
 content:'';position:static;display:block;flex:none;width:28px;height:28px;
 border-radius:50%;color:var(--lance-text);
 background:linear-gradient(currentColor,currentColor) center/13px 1.5px no-repeat,
 linear-gradient(currentColor,currentColor) center/1.5px 13px no-repeat,var(--lance-card);
 transition:transform .4s var(--lance-ease-out-expo);
}
:is(.bp-body,.dg-body) details[open] > summary::after{transform:rotate(135deg)}
:is(.bp-body,.dg-body) details > :not(summary){
 margin:0 20px 16px;font-size:16px;line-height:24px;letter-spacing:.01em;
 color:var(--lance-text);opacity:.72;
}
:is(.bp-body,.dg-body) details > :last-child:not(summary){margin-bottom:0;padding-bottom:20px}
@media(prefers-reduced-motion:reduce){
 :is(.bp-body,.dg-body) details > summary::after{transition:none}
}