/*
 * Packages. Figma 2812:88386 desktop: centred stack, 32 gaps: header/XL; tabs
 * (tag/medium 44 high, 10 apart, selected filled + tick); intro 576 wide (header/L,
 * body/S, centred, 12/16 gaps); cards 480 wide 24 apart (card/pricing: border light,
 * r20, p20, shadow 0 4 8 .05, gap 20: head name header/M + body/XS | icon tile 71 bg
 * purple r8 icon 33; divider; "What you get;" subtitle/M grey; ticks 20 green body/S
 * 12 apart; extras box bg purple r8 16/10 with dividers; button/M filled);
 * note subtitle/S grey 508 wide.
 * Mobile 2819:92447: left-aligned, header/L, tabs swipe, intro 350, cards stacked 16 apart,
 * no note under the cards.
 * Info popup: popup/info 2298:50018 / mobile 1472:18795 (see packages.js).
 */

.packages.section--join { margin-top: calc(44px - var(--section-gap)); }

.packages__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.packages__title { font: var(--f-header-xl); color: var(--c-text-dark); text-align: center; }

.packages__tabs {
	gap: 10px;
	max-width: 100%;
	scroll-snap-type: none;
}

.packages__tab { --icon-size: 12px; font: var(--f-subtitle-m); }
.packages__tab-tick { display: none; }
.packages__tab[aria-selected="true"] .packages__tab-tick { display: inline-block; }

.packages__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 100%;
}

.packages__panel[hidden] { display: none; }

.packages__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 576px;
	color: var(--c-text-dark);
	text-align: center;
}

.packages__intro-title { font: var(--f-header-l); }
.packages__intro-text { font: var(--f-body-s); }
.packages__intro-text > * + * { margin-top: 16px; }

.packages__cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 24px;
	width: 100%;
}

/* card/pricing */
.pricing {
	display: flex;
	flex: 0 1 480px;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	min-width: 0;
	padding: 19px;                      /* 20 minus the border */
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-l);
	background: var(--c-bg-white);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .05);
}

.pricing__body { display: flex; flex-direction: column; gap: 20px; }

.pricing__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--c-border-light);
}

.pricing__name-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding-right: 16px;
	color: var(--c-text-dark);
}

.pricing__name { font: var(--f-header-m); }
.pricing__text { font: var(--f-body-xs); }
.pricing__price { margin-top: 8px; font: var(--f-header-l); }
.pricing__price-note { font: var(--f-body-xs); color: var(--c-text-grey); }

.pricing__icon {
	--icon-size: 33px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 71px;
	height: 71px;
	border-radius: var(--r-xs);
	background: var(--c-bg-purple);
	color: var(--c-primary);
}

.pricing__get { display: flex; flex-direction: column; gap: 16px; }
.pricing__label { font: var(--f-subtitle-m); color: var(--c-text-grey); }
.pricing__lists { display: flex; flex-direction: column; gap: 12px; }

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

.pricing__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font: var(--f-body-s);
	color: var(--c-text-dark);
}

.pricing__tick { --icon-size: 20px; color: var(--c-secondary); }
.pricing__item strong { font-weight: 800; }
.pricing__item small { font: var(--f-body-xs); }
.pricing__item small.is-muted { color: var(--c-text-grey); }

.pricing__list--extras {
	padding: 16px 10px;
	border-radius: var(--r-xs);
	background: var(--c-bg-purple);
}

.pricing__list--extras .pricing__item + .pricing__item {
	padding-top: 12px;
	border-top: 1px solid var(--c-border-light);
}

/* icon/info after "Trusted Trader Portal Access": 20px green, 6 after the text */
.pricing__info {
	--icon-size: 20px;
	display: inline-flex;
	margin-left: 6px;
	vertical-align: -5px;
	color: var(--c-secondary);
	border-radius: 50%;
	transition: transform .15s ease;
}

.pricing__info:hover { transform: scale(1.1); }

.packages__note {
	max-width: 508px;
	font: var(--f-subtitle-s);
	color: var(--c-text-grey);
	text-align: center;
}

@media (max-width: 767px) {
	.packages.section--join { margin-top: calc(24px - var(--section-gap)); }

	.packages__inner { align-items: stretch; gap: 24px; }
	.packages__title { font: var(--f-header-l); text-align: left; }

	.packages__tabs {
		margin-right: calc(-1 * var(--gutter));
		padding-right: var(--gutter);
	}

	.packages__panel { align-items: stretch; gap: 24px; }
	.packages__intro { max-width: none; text-align: left; }
	.packages__intro-title { font: var(--f-header-m); }

	.packages__cards { flex-direction: column; gap: 16px; }
	.pricing { flex: none; }
	.packages__note { display: none; }
}

/* ---------- popup/info (2298:50018, mobile 1472:18795) ---------- */
.info-popup {
	width: min(480px, calc(100vw - 40px));
	max-width: none;
	max-height: calc(100dvh - 40px);
	padding: 0 0 20px;
	border: 0;
	border-radius: var(--r-l);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.info-popup[open] { display: flex; flex-direction: column; gap: 24px; }

/* Same backdrop as the shared lightbox: #090313 at 50% over a blurred page (background blur 2298:50239). */
.info-popup::backdrop {
	background: rgba(9, 3, 19, .5);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.info-popup__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	height: 260px;
	padding: 70px 16px;
	background: var(--c-bg-grey);
}

.info-popup__logos { display: flex; align-items: center; }

.info-popup__logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 90px;
	height: 90px;
	margin-left: -22px;
	border: 1px solid var(--c-border-light);
	border-radius: 50%;
	background: var(--c-bg-purple);
	overflow: hidden;
}

.info-popup__logo--main { width: 120px; height: 120px; margin-left: 0; }
.info-popup__logo--main + .info-popup__logo { margin-left: -28px; }

.info-popup__logo-img { width: 74px; height: 32px; object-fit: contain; }
.info-popup__logo--main .info-popup__logo-img { width: 48px; height: 48px; }
.info-popup__logo--crop .info-popup__logo-img { width: 44px; height: 44px; object-fit: cover; object-position: left center; }

.info-popup__more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .5);
	color: var(--c-text-white);
	font: var(--f-header-m);
}

.info-popup__close {
	--icon-size: 16px;
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-s);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
	transition: background-color .15s ease, color .15s ease;
}

.info-popup__close:hover { background: var(--c-border-dark); color: var(--c-text-white); }

.info-popup__body { display: flex; flex-direction: column; gap: 24px; padding-inline: 20px; }
.info-popup__text { display: flex; flex-direction: column; gap: 16px; }
.info-popup__title { font: var(--f-header-xs); }

.info-popup__copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font: var(--f-body-s);
}

.info-popup__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding-left: 24px;
	list-style: disc;
}