/* Services page pricing (template-parts/components/services-plans.php): the WooCommerce plans, one category at a time behind a row of tabs, in the page's own palette (light paper, black glass, white and warm grey). Plans are white cards; the highlighted plan is black glass like the prompt bar. Colour lives in the card headers (a mesh of one of nine palettes behind a frosted glass orb), echoed by the ticks and the hover glow. Tabs and reveal in assets/js/services-plans.js. */
.seamkt-plans {
	--pl-line: #e4e3df;
	--pl-glass: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.14), transparent 42%), linear-gradient(150deg, #26262a, #0b0b0d 70%);
	--pl-curtain-radius: clamp(28px, 3vw, 48px);
	position: relative;
	z-index: 1;
	isolation: isolate;
	padding: clamp(40px, 4vw, 72px) var(--svc-gutter) clamp(84px, 9vw, 128px);
	overflow: hidden;
	border-top: 1px solid rgba(13, 13, 12, 0.08);
	border-radius: var(--pl-curtain-radius) var(--pl-curtain-radius) 0 0;
	background: var(--svc-paper);
	box-shadow: 0 -30px 80px -34px rgba(13, 13, 12, 0.38);
	color: var(--svc-ink);
}

.seamkt-plans__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Heading ---------- */

.seamkt-plans__intro {
	max-width: 1180px;
	margin: 0 auto;
	text-align: center;
}

/* One typeface, two voices, as in the hero headline. */
.seamkt-svcpage .seamkt-plans__title {
	margin: 0;
	padding: 0;
	color: var(--svc-ink);
	font-family: var(--svc-font);
	font-size: clamp(18px, 5.6vw, 72px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.045em;
	text-transform: none;
	white-space: nowrap;
}

.seamkt-plans__title span {
	display: inline;
	color: var(--svc-muted);
	font-weight: 300;
}

.seamkt-plans__lead {
	max-width: 34em;
	margin: 20px auto 0;
	color: var(--svc-soft);
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 500;
	line-height: 1.6;
}

/* ---------- Tabs ---------- */

.seamkt-plans__tabs-wrap {
	display: flex;
	justify-content: center;
	margin: clamp(34px, 4vw, 52px) auto 0;
}

.seamkt-plans__tabs {
	display: flex;
	gap: 4px;
	max-width: 100%;
	padding: 6px;
	overflow-x: auto;
	border: 1px solid var(--pl-line);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 18px 40px -28px rgba(13, 13, 12, 0.35);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.seamkt-plans__tabs::-webkit-scrollbar {
	display: none;
}

.seamkt-plans__tabs[hidden] {
	display: none;
}

.seamkt-svcpage .seamkt-plans__tab {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 0 17px 0 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--svc-soft);
	font-family: var(--svc-font);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 300ms ease, color 300ms ease, box-shadow 300ms ease;
}

.seamkt-plans__tab svg {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.seamkt-svcpage .seamkt-plans__tab:hover {
	background: #f3f2ef;
	color: var(--svc-ink);
}

.seamkt-svcpage .seamkt-plans__tab:focus-visible {
	outline: 2px solid var(--svc-ink);
	outline-offset: 2px;
}

/* The selected tab in the prompt bar's black glass. */
.seamkt-svcpage .seamkt-plans__tab[aria-selected='true'] {
	background: var(--pl-glass);
	box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* ---------- Panels ---------- */

.seamkt-plans__panel {
	margin-top: clamp(36px, 4.2vw, 60px);
}

.seamkt-plans__panel[hidden] {
	display: none;
}

/* Without the script every category shows under its own heading. */
.seamkt-svcpage .seamkt-plans__group {
	margin: 0 0 22px;
	color: var(--svc-ink);
	font-family: var(--svc-font);
	font-size: clamp(22px, 2vw, 30px);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-align: center;
	text-transform: none;
}

.seamkt-plans.is-tabbed .seamkt-plans__group {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.seamkt-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 356px));
	justify-content: center;
	gap: clamp(16px, 1.8vw, 24px);
	max-width: 1160px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.seamkt-plan {
	display: flex;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* ---------- Plan card ---------- */

.seamkt-plan__card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	padding: 8px;
	border: 1px solid var(--pl-line);
	border-radius: 30px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(13, 13, 12, 0.04), 0 26px 50px -34px rgba(13, 13, 12, 0.3);
	color: var(--svc-ink);
	transition: transform 500ms var(--svc-ease), box-shadow 500ms var(--svc-ease);
}

.seamkt-plan__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 1px 2px rgba(13, 13, 12, 0.04), 0 40px 70px -38px rgba(var(--tint), 0.55);
}

/* The header: a colourful mesh behind a frosted glass orb, as on the Academy card. Nine
   palettes (orange, red, yellow, blue, violet, teal, lime…) are dealt out by the template
   (data-tone), so the plans in a row never match and each service gets its own set. */
.seamkt-plan {
	--t1: #ffb070;
	--t2: #ff9a5c;
	--t3: #ffe07a;
	--tint: 210, 92, 48;
}

.seamkt-plan[data-tone='1'] {
	--t1: #8cc8ff;
	--t2: #b2a6ff;
	--t3: #ffe08f;
	--tint: 96, 92, 214;
}

.seamkt-plan[data-tone='2'] {
	--t1: #6fe0c4;
	--t2: #a6e57a;
	--t3: #ffe57a;
	--tint: 34, 140, 102;
}

.seamkt-plan[data-tone='3'] {
	--t1: #ff9466;
	--t2: #ffcf6b;
	--t3: #ff7a4d;
	--tint: 206, 72, 52;
}

.seamkt-plan[data-tone='4'] {
	--t1: #74e2e6;
	--t2: #95a4ff;
	--t3: #c9a8ff;
	--tint: 82, 92, 206;
}

.seamkt-plan[data-tone='5'] {
	--t1: #ffd567;
	--t2: #ffaa55;
	--t3: #c2ea7a;
	--tint: 196, 116, 28;
}

.seamkt-plan[data-tone='6'] {
	--t1: #82d2ff;
	--t2: #85e8c8;
	--t3: #eef7a6;
	--tint: 36, 128, 168;
}

.seamkt-plan[data-tone='7'] {
	--t1: #5ec7f7;
	--t2: #ff9b5e;
	--t3: #ffd66e;
	--tint: 52, 108, 186;
}

.seamkt-plan[data-tone='8'] {
	--t1: #ab92ff;
	--t2: #ff8a5c;
	--t3: #ffc970;
	--tint: 126, 82, 198;
}

.seamkt-plan__media {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	overflow: hidden;
	aspect-ratio: 2.1 / 1;
	border-radius: 21px;
	background: var(--t2);
}

.seamkt-plan__media::before {
	content: '';
	position: absolute;
	z-index: -2;
	top: 50%;
	left: 50%;
	width: 150%;
	aspect-ratio: 1;
	background:
		radial-gradient(30% 30% at 30% 40%, var(--t1), transparent 70%),
		radial-gradient(28% 28% at 69% 37%, var(--t3), transparent 70%),
		radial-gradient(30% 30% at 50% 63%, var(--t2), transparent 72%),
		radial-gradient(12% 12% at 62% 58%, rgba(255, 255, 255, 0.85), transparent 72%),
		linear-gradient(135deg, var(--t1), var(--t2) 50%, var(--t3));
	transform: translate(-50%, -50%) rotate(calc(var(--i, 0) * 38deg));
	transition: transform 1600ms var(--svc-ease);
}

/* A fine grain, a pale glow under the orb and a top light, as on frosted glass. */
.seamkt-plan__media::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"),
		radial-gradient(circle at 50% 56%, rgba(255, 255, 255, 0.45), transparent 30%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 45%);
}

.seamkt-plan__card:hover .seamkt-plan__media::before {
	transform: translate(-50%, -50%) rotate(calc(var(--i, 0) * 38deg + 24deg)) scale(1.06);
}

.seamkt-plan__orb {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(68px, 5.6vw, 82px);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 34%),
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2) 58%, rgba(var(--tint), 0.3));
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.7),
		inset 0 7px 12px rgba(255, 255, 255, 0.85),
		inset 0 -12px 20px rgba(var(--tint), 0.3),
		0 20px 30px -14px rgba(var(--tint), 0.55);
	backdrop-filter: blur(10px) saturate(1.3);
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	color: #fff;
	transition: transform 700ms var(--svc-ease);
}

/* Its soft shadow on the "floor". */
.seamkt-plan__orb::after {
	content: '';
	position: absolute;
	z-index: -1;
	bottom: -14px;
	left: 18%;
	width: 64%;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--tint), 0.32), transparent);
	filter: blur(3px);
	transition: transform 700ms var(--svc-ease), opacity 700ms ease;
}

.seamkt-plan__orb svg {
	width: 44%;
	height: 44%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 1px 1.5px rgba(var(--tint), 0.8)) drop-shadow(0 3px 8px rgba(var(--tint), 0.45));
}

.seamkt-plan__card:hover .seamkt-plan__orb {
	transform: translateY(-4px) scale(1.04);
}

.seamkt-plan__card:hover .seamkt-plan__orb::after {
	opacity: 0.6;
	transform: translateY(4px) scale(0.86);
}

.seamkt-plan__badge,
.seamkt-plan__flag {
	position: absolute;
	top: 12px;
	padding: 7px 13px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.seamkt-plan__badge {
	left: 12px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 6px 16px -8px rgba(var(--tint), 0.5);
	color: #111;
}

.seamkt-plan__flag {
	right: 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: var(--pl-glass);
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.seamkt-plan__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px 14px 14px;
}

.seamkt-svcpage .seamkt-plan__name {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: var(--svc-font);
	font-size: clamp(20px, 1.6vw, 23px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.025em;
	text-transform: none;
}

.seamkt-svcpage .seamkt-plan__name a {
	color: inherit;
	text-decoration: none;
}

.seamkt-svcpage .seamkt-plan__name a:hover,
.seamkt-svcpage .seamkt-plan__name a:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	outline: none;
}

/* Two lines held for every tagline, so prices and buttons line up across a row. */
.seamkt-plan__tagline {
	min-height: 2.9em;
	margin: 6px 0 0;
	color: var(--svc-soft);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
}

.seamkt-plan__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin: 14px 0 0;
}

.seamkt-plan__prefix {
	flex: 1 0 100%;
	color: var(--svc-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.seamkt-plan__amount {
	font-size: clamp(36px, 3vw, 44px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
}

.seamkt-plan__amount.is-range {
	font-size: clamp(26px, 2.2vw, 30px);
	letter-spacing: -0.035em;
}

.seamkt-plan__per {
	color: var(--svc-muted);
	font-size: 15px;
	font-weight: 500;
}

/* The button in the prompt bar's black glass; white on the highlighted plan. */
.seamkt-svcpage .seamkt-plan__cta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	margin: 18px 0 0;
	padding: 0 20px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: var(--pl-glass);
	box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.005em;
	text-decoration: none;
	text-transform: none;
	transition: transform 300ms var(--svc-ease), box-shadow 300ms var(--svc-ease);
}

.seamkt-plan__cta svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 300ms var(--svc-ease);
}

.seamkt-svcpage .seamkt-plan__cta:hover,
.seamkt-svcpage .seamkt-plan__cta:focus-visible {
	box-shadow: 0 18px 32px -18px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.26);
	color: #fff;
	outline: none;
	transform: translateY(-2px);
}

.seamkt-plan__cta:hover svg,
.seamkt-plan__cta:focus-visible svg {
	transform: translateX(3px);
}

.seamkt-svcpage .seamkt-plan__cta:focus-visible {
	outline: 2px solid var(--svc-ink);
	outline-offset: 3px;
}

.seamkt-plan__features {
	display: grid;
	gap: 11px;
	margin: 22px 0 0;
	padding: 20px 2px 0;
	border-top: 1px solid var(--pl-line);
	list-style: none;
}

.seamkt-plan__features li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 11px;
	align-items: start;
	margin: 0;
	padding: 0;
	color: #2b2a27;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
}

/* A soft grey disc with a fine tick; an outlined dash for what the plan leaves out. */
.seamkt-plan__tick {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: rgba(var(--tint), 0.13);
	color: rgb(var(--tint));
}

.seamkt-plan__tick svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.seamkt-plan__features li.is-off {
	color: var(--svc-muted);
}

.seamkt-plan__features li.is-off .seamkt-plan__tick {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--pl-line);
	color: var(--svc-muted);
}

/* Long lists stay at six lines until the visitor asks for the rest. */
.seamkt-plan__features.is-clamped li:nth-child(n + 7) {
	display: none;
}

.seamkt-svcpage .seamkt-plan__more {
	align-self: flex-start;
	margin: 14px 0 0 33px;
	padding: 2px 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: inherit;
	font-family: var(--svc-font);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	cursor: pointer;
	opacity: 0.72;
	transition: opacity 200ms ease;
}

.seamkt-svcpage .seamkt-plan__more:hover,
.seamkt-svcpage .seamkt-plan__more:focus-visible {
	background: none;
	color: inherit;
	opacity: 1;
}

.seamkt-svcpage .seamkt-plan__more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- The highlighted plan: black glass ---------- */

.seamkt-plan.is-featured .seamkt-plan__card {
	border-color: transparent;
	background:
		radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.12), transparent 40%),
		linear-gradient(165deg, #1f1f22, #0b0b0d 70%);
	box-shadow: 0 44px 80px -40px rgba(var(--tint), 0.6), 0 30px 60px -40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	color: #f4f2ee;
}

.seamkt-plan.is-featured .seamkt-plan__tagline,
.seamkt-plan.is-featured .seamkt-plan__features li {
	color: rgba(244, 242, 238, 0.74);
}

.seamkt-plan.is-featured .seamkt-plan__prefix,
.seamkt-plan.is-featured .seamkt-plan__per,
.seamkt-plan.is-featured .seamkt-plan__features li.is-off {
	color: rgba(244, 242, 238, 0.46);
}

.seamkt-plan.is-featured .seamkt-plan__features {
	border-top-color: rgba(255, 255, 255, 0.1);
}

.seamkt-plan.is-featured .seamkt-plan__tick {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.seamkt-plan.is-featured .seamkt-plan__features li.is-off .seamkt-plan__tick {
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	color: rgba(244, 242, 238, 0.5);
}

.seamkt-svcpage .seamkt-plan.is-featured .seamkt-plan__cta {
	border-color: #fff;
	background: #fff;
	box-shadow: none;
	color: #111;
}

.seamkt-svcpage .seamkt-plan.is-featured .seamkt-plan__cta:hover,
.seamkt-svcpage .seamkt-plan.is-featured .seamkt-plan__cta:focus-visible {
	background: #e6e6e6;
	color: #111;
}

.seamkt-svcpage .seamkt-plan.is-featured .seamkt-plan__cta:focus-visible {
	outline-color: #fff;
}

/* ---------- Notes ---------- */

.seamkt-plans__note {
	max-width: 46em;
	margin: clamp(26px, 2.6vw, 36px) auto 0;
	color: var(--svc-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
}

/* ---------- Motion ---------- */

/* Cards rise in when the section first appears and whenever another tab is chosen. */
.seamkt-plans.is-waiting .seamkt-plan {
	opacity: 0;
}

.seamkt-plans__panel.is-entering .seamkt-plan {
	animation: plan-in 760ms var(--svc-ease) calc(var(--i) * 90ms) both;
}

@keyframes plan-in {
	from {
		opacity: 0;
		filter: blur(6px);
		translate: 0 28px;
	}
}

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

/* Three across: the highlighted plan stands a little taller, like the price sheets. Two plans sit level. */
@media (min-width: 1000px) {
	.seamkt-plans__grid.is-trio .seamkt-plan.is-featured {
		margin-top: -14px;
		margin-bottom: 14px;
	}
}

/* Phones: the tabs scroll sideways and the plans become a swipeable row that peeks the next card. */
@media (max-width: 760px) {
	.seamkt-plans__tabs-wrap {
		justify-content: flex-start;
		margin-right: calc(-1 * var(--svc-gutter));
		margin-left: calc(-1 * var(--svc-gutter));
	}

	/* Loose chips running off the screen edge, so the row reads as one to swipe. */
	.seamkt-plans__tabs {
		gap: 8px;
		width: 100%;
		padding: 4px var(--svc-gutter) 10px;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		scroll-padding: 0 var(--svc-gutter);
	}

	.seamkt-svcpage .seamkt-plans__tab {
		min-height: 42px;
		padding: 0 15px 0 13px;
		border: 1px solid var(--pl-line);
		background: #fff;
		font-size: 15px;
	}

	.seamkt-svcpage .seamkt-plans__tab[aria-selected='true'] {
		border-color: transparent;
	}

	.seamkt-plans__grid {
		display: flex;
		justify-content: flex-start;
		gap: 12px;
		margin: 0 calc(-1 * var(--svc-gutter));
		padding: 6px var(--svc-gutter) 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--svc-gutter);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.seamkt-plans__grid::-webkit-scrollbar {
		display: none;
	}

	.seamkt-plan {
		flex: 0 0 min(84vw, 340px);
		scroll-snap-align: start;
	}

	/* One plan at a time behind a bar of plan names (services-plans.js) instead of the row to
	   swipe: the bar is a soft white pill with the chosen plan in ink, and the cards share one
	   cell, so the block keeps the height of the tallest. The chosen card rises in (plan-in). */
	.seamkt-plans__pick {
		display: flex;
		gap: 4px;
		margin: 2px 0 16px;
		padding: 4px;
		border: 1px solid var(--pl-line);
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 12px 26px -22px rgba(13, 13, 12, 0.4);
	}

	.seamkt-plans .seamkt-plans__pick button {
		position: relative;
		flex: 1 1 0;
		min-width: 0;
		min-height: 42px;
		margin: 0;
		padding: 0 10px;
		overflow: hidden;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: #57554f;
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: -0.01em;
		line-height: 1;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
		transition: background-color 0.3s ease, color 0.3s ease;
	}

	.seamkt-plans .seamkt-plans__pick button[aria-pressed='true'] {
		background: #111;
		color: #fff;
	}

	/* The featured plan carries a small dot. */
	.seamkt-plans__pick button.is-featured::after {
		position: absolute;
		top: 9px;
		right: 12px;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #f08a4b;
		content: '';
	}

	.seamkt-plans__grid.has-pick {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		margin: 0;
		padding: 0 0 20px;
		overflow: visible;
		scroll-snap-type: none;
	}

	.seamkt-plans__grid.has-pick .seamkt-plan {
		grid-area: 1 / 1;
		flex: none;
	}

	.seamkt-plans__grid.has-pick .seamkt-plan:not(.is-shown) {
		visibility: hidden;
		opacity: 0;
		animation: none;
	}

	.seamkt-plan__card {
		border-radius: 22px;
	}

	.seamkt-plan__card:hover {
		transform: none;
	}

	.seamkt-plan__media {
		aspect-ratio: 2.5 / 1;
		border-radius: 15px;
	}

	.seamkt-plan__body {
		padding: 18px 10px 10px;
	}

	.seamkt-plans__note {
		margin-top: 14px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.seamkt-plans__panel.is-entering .seamkt-plan {
		animation: none;
	}

	.seamkt-plans.is-waiting .seamkt-plan {
		opacity: 1;
	}
}