/*
 * Category bento ([bdn_bento], [bdn_bento_group], [bdn_bento_card]) — category pages.
 * Rebuilt from prototype/category-bento.html in the site palette: green #127A71 / #28BDB1,
 * yellow underline #FFC400, ink #10282C, warm greys, Poppins. Title = theme H2 size.
 */

.bfi-bento {
	--bb-ink: #10282C;
	--bb-slate: #2B4448;
	--bb-muted: #5C6B6D;
	--bb-soft: #8A9597;
	--bb-green: #127A71;
	--bb-green-2: #28BDB1;
	--bb-green-50: #EEF8F7;
	--bb-green-200: #BFE5E1;
	--bb-cream: #FAF9F7;
	--bb-warm: #F5F3F0;
	--bb-line: #ECE8E2;
	--bb-line-strong: #D9D3C9;
	--bb-yellow: #F8C83E;
	--bb-shadow-sm: 0 1px 2px rgba(16, 40, 44, .05), 0 1px 1px rgba(16, 40, 44, .03);
	--bb-shadow-md: 0 14px 34px rgba(16, 40, 44, .08), 0 2px 6px rgba(16, 40, 44, .04);
	--bb-ease: cubic-bezier(.2, .7, .2, 1);
	font-family: Poppins, sans-serif;
	color: var(--bb-ink);
	text-align: left;
}
.bfi-bento *,
.bfi-bento *::before,
.bfi-bento *::after {
	box-sizing: border-box;
}
.bfi-bento p,
.bfi-bento h2,
.bfi-bento h3,
.bfi-bento h4,
.bfi-bento ul,
.bfi-bento ol,
.bfi-bento li {
	margin: 0;
	padding: 0;
}
.bfi-bento ul,
.bfi-bento ol {
	list-style: none;
}
.bfi-bento li::before {
	display: none; /* theme list bullets */
}
.bfi-bento__icon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

/* ── Heading ──────────────────────────────────────────────────────── */
.bfi-bento__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 64px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--bb-line);
}
.bfi-bento__head-main {
	flex: 1 1 auto;
	max-width: 680px;
}
.bfi-bento .bfi-bento__eyebrow {
	margin-bottom: 18px;
	color: var(--bb-green);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.bfi-bento .bfi-bento__title {
	color: var(--bb-ink);
	text-align: left;
}
.bfi-bento__mark {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}
.bfi-bento__mark::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.12em;
	height: .24em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 276 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9.5C46.1081 3.00787 164.955 -0.376652 274 5.06167' fill='none' stroke='%23FFC400' stroke-width='5.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
}
.bfi-bento .bfi-bento__lead {
	flex: 0 1 400px;
	color: var(--bb-muted);
	font-size: 18px;
	line-height: 1.6;
}
.bfi-bento__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}
.bfi-bento a.bfi-bento__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--bb-line-strong);
	border-radius: 100px;
	background: #fff;
	color: var(--bb-slate);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: var(--bb-shadow-sm);
	transition: border-color .18s var(--bb-ease), background .18s var(--bb-ease), transform .18s var(--bb-ease);
}
.bfi-bento a.bfi-bento__chip span {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 22px;
	padding: 0 6px;
	border-radius: 100px;
	background: var(--bb-green-50);
	color: var(--bb-green);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
}
.bfi-bento a.bfi-bento__chip:hover {
	border-color: var(--bb-green-200);
	background: var(--bb-green-50);
	color: var(--bb-ink);
	transform: translateY(-1px);
}

/* ── Groups ───────────────────────────────────────────────────────── */
.bfi-bento__group {
	padding-top: 72px;
	scroll-margin-top: 90px;
}
.bfi-bento__group-head {
	max-width: 640px;
	margin-bottom: 28px;
}
.bfi-bento .bfi-bento__num {
	margin-bottom: 10px;
	color: var(--bb-green);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.bfi-bento .bfi-bento__group-title {
	color: var(--bb-ink);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
}
.bfi-bento .bfi-bento__group-text {
	margin-top: 10px;
	color: var(--bb-muted);
	font-size: 17px;
	line-height: 1.6;
}

.bfi-bento__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-flow: row dense;
	gap: 20px;
}
.bfi-bento__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	padding: 28px;
	overflow: hidden;
	border: 1px solid var(--bb-line);
	border-radius: 24px;
	background: var(--bb-cream);
	transition: border-color .25s var(--bb-ease), box-shadow .25s var(--bb-ease), transform .25s var(--bb-ease);
}
.bfi-bento__card:hover {
	border-color: var(--bb-line-strong);
	box-shadow: var(--bb-shadow-md);
	transform: translateY(-2px);
}
.bfi-bento__card--large {
	grid-column: 1 / span 7;
	grid-row: span 2;
	padding: 32px 32px 0;
	background:
		radial-gradient(90% 70% at 100% 0%, rgba(40, 189, 177, .12) 0%, rgba(40, 189, 177, 0) 60%),
		radial-gradient(70% 60% at 0% 100%, rgba(248, 200, 62, .12) 0%, rgba(248, 200, 62, 0) 60%),
		var(--bb-cream);
}
.bfi-bento__card--small {
	grid-column: 8 / span 5;
}
.bfi-bento__group--flip .bfi-bento__card--large {
	grid-column: 6 / span 7;
}
.bfi-bento__group--flip .bfi-bento__card--small {
	grid-column: 1 / span 5;
}
.bfi-bento .bfi-bento__card-title {
	color: var(--bb-ink);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}
.bfi-bento__card--large .bfi-bento__card-title {
	font-size: 22px;
}
.bfi-bento .bfi-bento__card-desc {
	margin-top: 8px;
	color: var(--bb-muted);
	font-size: 15px;
	line-height: 1.6;
}
.bfi-bento__card--large .bfi-bento__card-text {
	max-width: 460px;
}
.bfi-bento__visual {
	margin-top: auto;
}

/* Shared small pieces */
.bfi-bento__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}
.bfi-bento__tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border: 1px solid var(--bb-line);
	border-radius: 100px;
	background: #fff;
	color: var(--bb-slate);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}
.bfi-bento__tag--soft {
	border-color: var(--bb-green-200);
	background: var(--bb-green-50);
	color: var(--bb-green);
}
.bfi-bento__tag.is-on {
	border-color: var(--bb-green);
	background: var(--bb-green);
	color: #fff;
	box-shadow: 0 6px 14px rgba(18, 122, 113, .25);
}

/* ── Picture: app window with steps ───────────────────────────────── */
.bfi-bento__window {
	position: relative;
	margin: 0 -4px;
	border: 1px solid var(--bb-line);
	border-bottom: 0;
	border-radius: 18px 18px 0 0;
	background: #fff;
	box-shadow: 0 -10px 40px rgba(16, 40, 44, .07);
}
.bfi-bento__window-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 46px;
	padding: 0 18px;
	border-bottom: 1px solid var(--bb-line);
}
.bfi-bento__dots {
	display: inline-flex;
	gap: 6px;
}
.bfi-bento__dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #E6E1D9;
}
.bfi-bento__dots i:first-child {
	background: var(--bb-yellow);
}
.bfi-bento__window-label {
	color: var(--bb-soft);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.bfi-bento .bfi-bento__window .bfi-bento__steps {
	position: relative;
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 18px 18px 22px; /* the theme resets <ol> padding */
	list-style: none;
}
/* Dashed line joining the step icons */
.bfi-bento__steps::before {
	content: "";
	position: absolute;
	top: 50px;
	bottom: 60px;
	left: 50px;
	border-left: 2px dashed var(--bb-green-200);
}
.bfi-bento .bfi-bento__step {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	margin: 0;
	padding: 12px;
	border: 1px solid transparent;
	border-radius: 16px;
}
.bfi-bento .bfi-bento__step:last-child {
	z-index: 1;
	margin-top: 6px;
	border-color: var(--bb-line);
	background: var(--bb-cream);
}
.bfi-bento__step-icon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--bb-green-200);
	border-radius: 12px;
	background: var(--bb-green-50);
	color: var(--bb-green);
}
.bfi-bento__step:last-child .bfi-bento__step-icon {
	border-color: var(--bb-green);
	background: var(--bb-green);
	color: #fff;
}
.bfi-bento__step-body {
	display: block;
	min-width: 0;
}
.bfi-bento__step-label {
	display: block;
	color: var(--bb-soft);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
}
.bfi-bento__step-title {
	display: block;
	margin-top: 2px;
	color: var(--bb-ink);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
}
.bfi-bento__mini-text {
	display: block;
	margin-top: 4px;
	color: var(--bb-muted);
	font-size: 13px;
	line-height: 1.5;
}
.bfi-bento__mini-list {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
	margin-top: 10px !important;
}
.bfi-bento .bfi-bento__mini-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--bb-line);
	border-radius: 12px;
	background: #fff;
	color: var(--bb-ink);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}
.bfi-bento__avatar {
	display: grid;
	place-items: center;
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bb-green), var(--bb-green-2));
	color: #fff;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .04em;
}
.bfi-bento .bfi-bento__tick {
	width: 22px;
	height: 22px;
	padding: 4px;
	border-radius: 50%;
	background: var(--bb-green);
	color: #fff;
	stroke-width: 2.6;
}
.bfi-bento__mini-note {
	display: block;
	margin-top: 8px;
	padding: 10px 12px;
	border-left: 3px solid var(--bb-yellow);
	border-radius: 0 10px 10px 0;
	background: #FFF8E1;
	color: var(--bb-slate);
	font-size: 13px;
	font-style: italic;
	line-height: 1.5;
}
.bfi-bento__mini-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 8px 14px;
	border-radius: 100px;
	background: var(--bb-yellow);
	color: #242820;
	font-size: 13px;
	font-weight: 600;
}
.bfi-bento__mini-btn .bfi-bento__icon {
	width: 15px;
	height: 15px;
}
.bfi-bento .bfi-bento__caption {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 22px 18px;
	color: var(--bb-soft);
	font-size: 12px;
	line-height: 1.4;
}
.bfi-bento .bfi-bento__caption::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bb-green-2);
}

/* ── Picture: chips ───────────────────────────────────────────────── */
.bfi-bento__chip-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 18px;
	border: 1px solid var(--bb-line);
	border-radius: 18px;
	background: #fff;
}
.bfi-bento__chip-cloud .bfi-bento__tag {
	padding: 7px 14px;
	font-size: 13.5px;
}

/* ── Picture: route ───────────────────────────────────────────────── */
.bfi-bento__route {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 18px;
	border: 1px solid var(--bb-line);
	border-radius: 18px;
	background: #fff;
}
.bfi-bento__place {
	display: grid;
	gap: 2px;
	flex: 0 1 auto;
	min-width: 0;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--bb-warm);
}
.bfi-bento__place small,
.bfi-bento__fact small {
	color: var(--bb-soft);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
}
.bfi-bento__place b {
	color: var(--bb-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}
.bfi-bento__place--end {
	background: var(--bb-green-50);
}
.bfi-bento__place--end b {
	color: var(--bb-green);
}
.bfi-bento__route-line {
	position: relative;
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 60px;
	height: 60px;
	margin-bottom: 14px;
}
.bfi-bento__route-line svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.bfi-bento__route-line path {
	fill: none;
	stroke: var(--bb-green-2);
	stroke-width: 2;
	stroke-dasharray: 5 6;
	vector-effect: non-scaling-stroke;
	animation: bfi-bento-dash 1.6s linear infinite;
}
.bfi-bento__route-line i {
	position: absolute;
	left: 0;
	top: 80%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--bb-green);
	box-shadow: 0 0 0 1px var(--bb-green-200);
	animation: bfi-bento-x 3.2s var(--bb-ease) infinite, bfi-bento-y 3.2s ease-in-out infinite;
}
@keyframes bfi-bento-dash {
	to { stroke-dashoffset: -22; }
}
@keyframes bfi-bento-x {
	0% { left: 3%; opacity: 0; }
	12% { opacity: 1; }
	88% { opacity: 1; }
	100% { left: 97%; opacity: 0; }
}
@keyframes bfi-bento-y {
	0%, 100% { top: 80%; }
	50% { top: 12%; }
}

/* ── Picture: facts ───────────────────────────────────────────────── */
.bfi-bento__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
}
.bfi-bento__fact {
	display: grid;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--bb-line);
	border-radius: 16px;
	background: #fff;
}
.bfi-bento__fact b {
	color: var(--bb-ink);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
}

/* ── Picture: contact ─────────────────────────────────────────────── */
.bfi-bento__person {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 12px 14px;
	align-items: center;
	padding: 16px 18px;
	border: 1px solid var(--bb-line);
	border-radius: 18px;
	background: #fff;
}
.bfi-bento__person-photo {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bb-green-50), #DDF1EE);
	color: var(--bb-green);
}
.bfi-bento__person-text {
	display: grid;
	min-width: 0;
}
.bfi-bento__person-text b {
	color: var(--bb-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}
.bfi-bento__person-text small {
	color: var(--bb-muted);
	font-size: 13px;
	line-height: 1.4;
}
.bfi-bento__person .bfi-bento__tags {
	grid-column: 1 / -1;
	margin-top: 0;
}

/* ── Picture: note ────────────────────────────────────────────────── */
.bfi-bento__note {
	padding: 16px 18px;
	border: 1px solid #F3E2A6;
	border-radius: 16px;
	background: linear-gradient(180deg, #FFF8DF 0%, #FFF3CC 100%);
	box-shadow: 0 8px 18px rgba(196, 150, 20, .10);
	transform: rotate(-1deg);
}
.bfi-bento__note small {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #8A6A0C;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.bfi-bento__note small .bfi-bento__icon {
	width: 14px;
	height: 14px;
}
.bfi-bento .bfi-bento__note p {
	margin-top: 6px;
	color: var(--bb-slate);
	font-size: 15px;
	line-height: 1.5;
}

/* ── Picture: recent updates ──────────────────────────────────────── */
.bfi-bento__updates {
	display: grid !important;
	gap: 8px;
}
.bfi-bento .bfi-bento__updates li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--bb-line);
	border-radius: 14px;
	background: #fff;
	color: var(--bb-ink);
	font-size: 14px;
	line-height: 1.35;
}
.bfi-bento__updates li > span:nth-child(2) {
	flex: 1 1 auto;
	min-width: 0;
}
.bfi-bento__updates em {
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 100px;
	background: var(--bb-warm);
	color: var(--bb-muted);
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
}
.bfi-bento__updates li:first-child em {
	background: var(--bb-green-50);
	color: var(--bb-green);
}
.bfi-bento__upd-dot {
	position: relative;
	flex: 0 0 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bb-line-strong);
}
.bfi-bento__upd-dot.is-new {
	background: var(--bb-green-2);
}
.bfi-bento__upd-dot.is-new::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--bb-green-2);
	opacity: 0;
	animation: bfi-bento-pulse 2s ease-out infinite;
}
@keyframes bfi-bento-pulse {
	0% { transform: scale(.5); opacity: .8; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* ── Badge ("New") on a group label and its chip ──────────────────── */
.bfi-bento .bfi-bento__badge {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 3px 9px;
	border-radius: 100px;
	background: var(--bb-yellow);
	color: var(--bb-ink);
	font-size: 10.5px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.3;
	text-transform: uppercase;
	vertical-align: 1px;
}
.bfi-bento a.bfi-bento__chip .bfi-bento__badge {
	margin-left: 2px;
	padding: 2px 7px;
	font-size: 9.5px;
}

/* ── App window step: trade route ─────────────────────────────────── */
.bfi-bento__track {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	color: var(--bb-slate);
	font-size: 12.5px;
	line-height: 1.3;
}
.bfi-bento__track b {
	flex: 0 0 auto;
	font-weight: 500;
}
.bfi-bento__track-line {
	position: relative;
	flex: 1 1 auto;
	min-width: 40px;
	max-width: 160px;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--bb-green-2) 0 5px, transparent 5px 10px);
}
.bfi-bento__track-line::before,
.bfi-bento__track-line::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--bb-green);
}
.bfi-bento__track-line::before { left: -2px; }
.bfi-bento__track-line::after { right: -2px; }
.bfi-bento__track-line i {
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--bb-green-2);
	box-shadow: 0 0 0 1px var(--bb-green-200);
	animation: bfi-bento-sail 3.2s var(--bb-ease) infinite;
}
@keyframes bfi-bento-sail {
	0% { left: 0; opacity: 0; }
	12% { opacity: 1; }
	85% { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}

/* Trade card (app window with a route step): faint globe in the free space */
.bfi-bento__card--large:has(.bfi-bento__track)::after {
	content: "";
	position: absolute;
	top: 24px;
	right: -70px;
	z-index: 0;
	width: 340px;
	height: 340px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%2328BDB1' stroke-width='.8'%3E%3Ccircle cx='100' cy='100' r='96'/%3E%3Cellipse cx='100' cy='100' rx='44' ry='96'/%3E%3Cellipse cx='100' cy='100' rx='76' ry='96'/%3E%3Cellipse cx='100' cy='100' rx='96' ry='34'/%3E%3Cpath d='M4 100h192M14 56h172M14 144h172M100 4v192'/%3E%3Ccircle cx='62' cy='72' r='3.5' fill='%23127A71' stroke='none'/%3E%3Ccircle cx='140' cy='128' r='3.5' fill='%23127A71' stroke='none'/%3E%3Cpath d='M62 72Q120 60 140 128' stroke='%23127A71' stroke-width='1.2' stroke-dasharray='3 3'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .35;
	pointer-events: none;
}
.bfi-bento__card--large:has(.bfi-bento__track) > * {
	position: relative;
	z-index: 1;
}

/* ── Picture: shipment record ─────────────────────────────────────── */
.bfi-bento__ship {
	padding: 16px 18px 18px;
	border: 1px solid var(--bb-line);
	border-radius: 18px;
	background: #fff;
}
.bfi-bento__ship-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--bb-line-strong);
}
.bfi-bento__ship-icon {
	display: grid;
	flex: 0 0 40px;
	place-items: center;
	height: 40px;
	border-radius: 12px;
	background: var(--bb-green);
	color: #fff;
}
.bfi-bento__ship-title {
	display: grid;
	min-width: 0;
}
.bfi-bento__ship-title b {
	color: var(--bb-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
.bfi-bento__ship-title small {
	color: var(--bb-soft);
	font-size: 12.5px;
	line-height: 1.4;
}
.bfi-bento__ship-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 14px;
	padding-top: 14px;
}
.bfi-bento__ship-field {
	display: grid;
	gap: 1px;
	align-content: start;
	min-width: 0;
}
.bfi-bento__ship-field small {
	color: var(--bb-soft);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
}
.bfi-bento__ship-field b {
	color: var(--bb-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/* ── Picture: bar chart ───────────────────────────────────────────── */
.bfi-bento__volume {
	padding: 16px 18px 14px;
	border: 1px solid var(--bb-line);
	border-radius: 18px;
	background: #fff;
}
.bfi-bento__volume-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.bfi-bento__volume-head small {
	color: var(--bb-soft);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
}
.bfi-bento__volume-head b {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 100px;
	background: var(--bb-green-50);
	color: var(--bb-green);
	font-size: 12.5px;
	font-weight: 600;
}
.bfi-bento__volume-head .bfi-bento__icon {
	width: 14px;
	height: 14px;
}
.bfi-bento__bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 96px;
	margin-top: 14px;
	padding-bottom: 1px;
	border-bottom: 1px solid var(--bb-line);
}
.bfi-bento__bars i {
	flex: 1 1 0;
	height: var(--h, 50%);
	min-height: 4px;
	border-radius: 6px 6px 2px 2px;
	background: linear-gradient(180deg, #CDEBE7, var(--bb-green-50));
	transform-origin: bottom;
}
.bfi-bento__bars i.is-last {
	background: linear-gradient(180deg, var(--bb-green-2), var(--bb-green));
}
.bfi-bento__volume-axis {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	color: var(--bb-soft);
	font-size: 11.5px;
	line-height: 1.3;
}

/* ── Entrance (script adds bfi-bento--anim; no script = all shown) ── */
.bfi-bento--anim .bfi-bento__card {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--bb-ease), transform .6s var(--bb-ease), border-color .25s var(--bb-ease), box-shadow .25s var(--bb-ease);
}
.bfi-bento--anim .bfi-bento__card.is-in {
	opacity: 1;
	transform: none;
}
.bfi-bento--anim .bfi-bento__card.is-in:hover {
	transform: translateY(-2px);
}
.bfi-bento--anim .bfi-bento__card:nth-child(2) {
	transition-delay: .08s;
}
.bfi-bento--anim .bfi-bento__card:nth-child(3) {
	transition-delay: .16s;
}
.bfi-bento--anim .bfi-bento__step {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .5s var(--bb-ease), transform .5s var(--bb-ease);
	transition-delay: calc(.25s + var(--bfi-bento-i, 0) * .12s);
}
.bfi-bento--anim .is-in .bfi-bento__step {
	opacity: 1;
	transform: none;
}
.bfi-bento--anim .bfi-bento__bars i {
	transform: scaleY(0);
	transition: transform .7s var(--bb-ease);
	transition-delay: calc(.3s + var(--bfi-bento-i, 0) * .05s);
}
.bfi-bento--anim .is-in .bfi-bento__bars i {
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.bfi-bento__route-line path,
	.bfi-bento__route-line i,
	.bfi-bento__track-line i,
	.bfi-bento__upd-dot.is-new::after {
		animation: none;
	}
	.bfi-bento__track-line i {
		display: none;
	}
	.bfi-bento__route-line i {
		left: 50%;
		top: 12%;
	}
}

/* ── Scroll effect "stack" (effect="stack"; the script adds --stack-on on
   desktop screens and sets each group's top). Plain white groups. ──── */
.bfi-bento--stack-on .bfi-bento__group {
	position: sticky;
	top: var(--bfi-stack-top, 96px);
	padding-top: 40px;
	padding-bottom: 40px;
	background: #fff;
	transform-origin: 50% 0;
	will-change: transform;
}
.bfi-bento--stack-on .bfi-bento__group > * {
	opacity: calc(1 - var(--bfi-stack-p, 0) * .55);
}

/* ── Tablet ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.bfi-bento__head {
		gap: 40px;
	}
	.bfi-bento__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bfi-bento__card--large,
	.bfi-bento__group--flip .bfi-bento__card--large {
		grid-column: 1 / -1;
		grid-row: auto;
	}
	.bfi-bento__card--small,
	.bfi-bento__group--flip .bfi-bento__card--small {
		grid-column: auto;
	}
	.bfi-bento__card--large .bfi-bento__card-text {
		max-width: 560px;
	}
}

/* ── Phone ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.bfi-bento__head {
		display: block;
		padding-bottom: 28px;
	}
	.bfi-bento .bfi-bento__eyebrow {
		margin-bottom: 14px;
		font-size: 11px;
	}
	.bfi-bento__mark {
		white-space: normal;
	}
	.bfi-bento .bfi-bento__title {
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.bfi-bento .bfi-bento__lead {
		margin-top: 16px;
		font-size: 16px;
	}
	.bfi-bento__chips {
		margin-top: 20px;
	}
	.bfi-bento a.bfi-bento__chip {
		font-size: 13px;
	}
	.bfi-bento__group {
		padding-top: 48px;
	}
	.bfi-bento .bfi-bento__group-title {
		font-size: 24px;
	}
	.bfi-bento .bfi-bento__group-text {
		font-size: 16px;
	}
	.bfi-bento__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	.bfi-bento__card {
		padding: 22px;
		border-radius: 20px;
	}
	.bfi-bento__card--large {
		padding: 24px 18px 0;
	}
	.bfi-bento__card--large .bfi-bento__card-title {
		font-size: 20px;
	}
	.bfi-bento__window {
		margin: 0 -6px;
	}
	.bfi-bento .bfi-bento__window .bfi-bento__steps {
		padding: 12px 10px 16px;
	}
	.bfi-bento__steps::before {
		top: 42px;
		left: 40px;
	}
	.bfi-bento .bfi-bento__step {
		gap: 12px;
		padding: 10px;
	}
	.bfi-bento__route {
		padding: 14px;
	}
	.bfi-bento__place {
		padding: 8px 10px;
	}
	.bfi-bento__route-line {
		min-width: 28px;
	}
	.bfi-bento__place b {
		font-size: 14px;
	}
}