/**
 * The plan page and the code field.
 *
 * Every colour and size is a token. The fallbacks that used to sit beside them are gone: they hid a
 * token that did not exist (--akem-ink-soft) behind a grey from another palette, and a transparent
 * accent behind a blue nobody saw, so the held plan had no outline at all.
 *
 * Plain and quiet on purpose: the paid rebuild decides how this page looks. What is here is the part
 * that cannot wait for it - controls at the same 48px as the rest of the site, so a thumb can hit
 * them, and enough space that two tiers read as two things.
 */

.agen-plans {
	display: grid;
	gap: var(--akem-space-6);
	max-width: var(--theme-normal-container-max-width, 1290px);
	margin-inline: auto;
}

.agen-plan {
	border: 1px solid var(--akem-hairline);
	border-radius: var(--akem-radius);
	padding: var(--akem-space-5);
}

.agen-plan--held {
	border-color: var(--akem-navy);
	border-width: 2px;
}

.agen-plan__name {
	margin: 0 0 var(--akem-space-2);
}

.agen-plan__rate {
	margin: 0 0 var(--akem-space-4);
	color: var(--akem-grey);
}

.agen-plan__held {
	margin: 0 0 var(--akem-space-4);
	font-weight: var(--akem-weight-label);
	color: var(--akem-navy);
}

.agen-plan__periods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--akem-space-3);
}

.agen-plan__period {
	display: flex;
	align-items: center;
	gap: var(--akem-space-3);
	flex-wrap: wrap;
}

.agen-plan__label {
	flex: 1 1 auto;
}

.agen-plan__price {
	font-weight: 500;
}

/* The two buttons here look like every other button on the site, and that look is written once, in
   buttons.css. They were shaped here and left uncoloured, which is how the parent theme's own blue
   ended up on the only page that sells anything. */

.agen-plans__warning,
.agen-plan__warning {
	color: var(--akem-danger);
}