/**
 * BPN AI Agents — front-end styles.
 *
 * ---------------------------------------------------------------------------
 * TO CHANGE THE ACCENT COLOUR, EDIT THE ONE VALUE BELOW (--bpn-accent).
 * Everything else derives from it.
 * ---------------------------------------------------------------------------
 *
 * Two deliberate choices worth knowing:
 *
 * 1. Controls declare font-family, colour, and background explicitly rather
 *    than inheriting. Themes commonly set a monospace face on textarea and a
 *    tinted background on :invalid, which is where the raw look came from.
 *
 * 2. Selectors are scoped under a plugin class and are a shade more specific
 *    than usual, so a theme's own form styles do not win.
 */

:root {
	/* THE accent colour. Change this one value to rebrand. */
	--bpn-accent: #1d4ed8;

	/* THE body typeface for everything the plugin renders. */
	--bpn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji";
	--bpn-accent-dark: #1a3fb0;
	--bpn-accent-soft: #eef3ff;
	--bpn-accent-ring: rgba(29, 78, 216, 0.28);

	--bpn-ink: #111827;
	--bpn-ink-soft: #4b5563;
	--bpn-line: #e2e5ea;
	--bpn-line-strong: #cbd2dc;
	--bpn-surface: #ffffff;
	--bpn-surface-soft: #f7f9fc;

	--bpn-success: #166534;
	--bpn-success-soft: #f0fdf4;
	--bpn-danger: #b91c1c;
	--bpn-danger-soft: #fef2f2;
	--bpn-warn-soft: #fef3c7;
	--bpn-warn-ink: #854d0e;

	--bpn-radius: 12px;
	--bpn-radius-sm: 8px;
	--bpn-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
	--bpn-shadow-lift: 0 2px 4px rgba(16, 24, 40, 0.05), 0 14px 32px rgba(16, 24, 40, 0.10);
	--bpn-max: 640px;
}

/* Base ---------------------------------------------------------------- */

/*
 * The typeface is declared outright, not inherited.
 *
 * Inheriting looked correct but picked up whatever the theme had set on the
 * content area — in this case a monospace face, which is also the browser
 * default for textarea. The !important is deliberate and narrow: it is scoped
 * to the plugin's own containers, and it is the only thing that reliably beats
 * a theme rule such as `.entry-content p { font-family: … }`, which is more
 * specific than any sane selector here.
 *
 * `code` and `pre` are excluded so anything genuinely monospaced stays that way.
 */
.bpn-panel,
.bpn-account,
.bpn-pricing,
.bpn-cta,
.bpn-agent,
.bpn-post,
.bpn-cards,
.bpn-section,
.bpn-upsell,
.bpn-panel *:not(code):not(pre):not(kbd):not(samp),
.bpn-account *:not(code):not(pre):not(kbd):not(samp),
.bpn-pricing *:not(code):not(pre):not(kbd):not(samp),
.bpn-cta *:not(code):not(pre):not(kbd):not(samp),
.bpn-agent *:not(code):not(pre):not(kbd):not(samp),
.bpn-post *:not(code):not(pre):not(kbd):not(samp),
.bpn-cards *:not(code):not(pre):not(kbd):not(samp),
.bpn-section *:not(code):not(pre):not(kbd):not(samp),
.bpn-upsell *:not(code):not(pre):not(kbd):not(samp),
.bpn-account-link {
	font-family: var(--bpn-font) !important;
}

.bpn-panel,
.bpn-account,
.bpn-pricing,
.bpn-cta,
.bpn-agent,
.bpn-post {
	color: var(--bpn-ink);
	line-height: 1.6;
	box-sizing: border-box;
}

/* Paragraphs and list items specifically, since themes target these hardest. */
.bpn-panel p,
.bpn-panel li,
.bpn-panel label,
.bpn-account p,
.bpn-account li,
.bpn-account label,
.bpn-cta p,
.bpn-cta li,
.bpn-post p,
.bpn-card p,
.bpn-card li {
	font-family: var(--bpn-font) !important;
	line-height: 1.6;
}

/*
 * WordPress wraps a shortcode's leading newline in an empty paragraph, which
 * showed up as a blank gap above the try-free card. The output is trimmed at
 * source now; this clears any empty node a page builder still leaves behind.
 */
.bpn-panel > p:empty,
.bpn-account > p:empty,
.bpn-cta > p:empty,
.bpn-agent > p:empty,
.bpn-panel > br:first-child,
.bpn-agent__upsell:empty,
.bpn-agent__output:empty {
	display: none;
}

.bpn-panel *,
.bpn-account *,
.bpn-pricing *,
.bpn-cta * {
	box-sizing: border-box;
}

/* The card that wraps forms and tools. */
.bpn-panel {
	max-width: var(--bpn-max);
	margin: 0 auto 2rem;
	padding: 32px;
	background: var(--bpn-surface);
	border: 1px solid var(--bpn-line);
	border-radius: var(--bpn-radius);
	box-shadow: var(--bpn-shadow);
}

.bpn-account {
	max-width: 960px;
	margin: 0 auto 2rem;
}

/*
 * The try-it-free grid is a page of cards, not a form, so it drops the panel's
 * white box and narrow column and matches the dashboard's width instead.
 * Otherwise every card would sit inside a second card, half as wide.
 */
.bpn-panel--try {
	max-width: 960px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.bpn-account__greeting {
	margin: 0 0 1.75rem;
	color: var(--bpn-ink-soft);
}

.bpn-agent__title {
	margin: 0 0 1.25rem;
	font-size: 1.5rem;
	line-height: 1.25;
}

.bpn-agent__description {
	margin: 0 0 1.25rem;
	color: var(--bpn-ink-soft);
}

/* Forms --------------------------------------------------------------- */

.bpn-form p,
.bpn-agent__form p {
	margin: 0 0 1.25rem;
}

.bpn-form label,
.bpn-agent__form label {
	display: block;
	margin-bottom: 0.45rem;
	font-family: var(--bpn-font);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--bpn-ink);
}

/* Explicit, and specific enough to beat theme form styling. */
.bpn-panel .bpn-form input[type="text"],
.bpn-panel .bpn-form input[type="email"],
.bpn-panel .bpn-form input[type="password"],
.bpn-panel .bpn-form input[type="search"],
.bpn-panel .bpn-form textarea,
.bpn-panel .bpn-form select,
.bpn-panel .bpn-agent__form input[type="text"],
.bpn-panel .bpn-agent__form input[type="email"],
.bpn-panel .bpn-agent__form textarea,
.bpn-panel .bpn-agent__form select,
.bpn-agent__form input[type="text"],
.bpn-agent__form input[type="email"],
.bpn-agent__form textarea,
.bpn-agent__form select {
	display: block;
	width: 100%;
	padding: 12px 14px;
	font-family: var(--bpn-font);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--bpn-ink);
	/* Kills the tinted :invalid background some themes apply to required fields. */
	background-color: var(--bpn-surface);
	background-image: none;
	border: 1px solid var(--bpn-line-strong);
	border-radius: var(--bpn-radius-sm);
	box-shadow: none;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
	appearance: none;
	-webkit-appearance: none;
}

.bpn-agent__form textarea,
.bpn-form textarea {
	min-height: 120px;
	resize: vertical;
}

.bpn-agent__form select,
.bpn-form select {
	/* Restore a chevron, since the native one is removed with appearance. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234b5563' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

.bpn-panel .bpn-form input:focus,
.bpn-panel .bpn-form textarea:focus,
.bpn-panel .bpn-form select:focus,
.bpn-agent__form input:focus,
.bpn-agent__form textarea:focus,
.bpn-agent__form select:focus {
	outline: none;
	border-color: var(--bpn-accent);
	box-shadow: 0 0 0 4px var(--bpn-accent-ring);
}

/* Never restyle a field as invalid before it has been used. */
.bpn-agent__form :invalid,
.bpn-form :invalid {
	box-shadow: none;
}

.bpn-form__checkbox label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

.bpn-form__checkbox input {
	width: auto;
	margin: 0;
}

/* Two short fields side by side, stacking on small screens. */
.bpn-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1rem;
}

@media (min-width: 560px) {
	.bpn-field-row {
		grid-template-columns: 1fr 1fr;
	}
}

/* Buttons -------------------------------------------------------------- */

.bpn-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--bpn-radius-sm);
	background: var(--bpn-accent);
	color: #fff;
	font-family: var(--bpn-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease-out, transform 160ms ease-out, box-shadow 160ms ease-out;
}

.bpn-button:hover,
.bpn-button:focus {
	background: var(--bpn-accent-dark);
	color: #fff;
	text-decoration: none;
}

.bpn-button:active {
	transform: translateY(1px);
}

.bpn-button:focus-visible {
	outline: 3px solid var(--bpn-accent);
	outline-offset: 2px;
}

.bpn-button[disabled],
.bpn-button:disabled {
	opacity: 0.55;
	cursor: default;
	transform: none;
}

.bpn-button--secondary {
	background: var(--bpn-surface);
	border-color: var(--bpn-line-strong);
	color: var(--bpn-ink);
}

.bpn-button--secondary:hover,
.bpn-button--secondary:focus {
	background: var(--bpn-accent-soft);
	border-color: var(--bpn-accent);
	color: var(--bpn-accent-dark);
}

.bpn-button--small {
	min-height: 38px;
	padding: 8px 14px;
	font-size: 0.9rem;
}

.bpn-button--large {
	min-height: 54px;
	padding: 15px 30px;
	font-size: 1.05rem;
}

.bpn-button--block {
	display: flex;
	width: 100%;
}

/* Full-width buttons on phones. */
@media (max-width: 559px) {
	.bpn-button {
		display: flex;
		width: 100%;
	}

	.bpn-links,
	.bpn-post__actions {
		text-align: center;
	}
}

.bpn-links {
	margin-top: 1.5rem;
	font-size: 0.95rem;
	color: var(--bpn-ink-soft);
}

.bpn-links a {
	color: var(--bpn-accent);
	font-weight: 600;
}

.bpn-help {
	margin-top: 0.5rem;
	font-size: 0.88rem;
	color: var(--bpn-ink-soft);
}

/* Notices -------------------------------------------------------------- */

.bpn-notice {
	padding: 14px 16px;
	margin: 0 0 1.5rem;
	border: 1px solid var(--bpn-line);
	border-left: 4px solid var(--bpn-ink-soft);
	border-radius: var(--bpn-radius-sm);
	background: var(--bpn-surface-soft);
	font-size: 0.95rem;
}

.bpn-notice--error {
	border-left-color: var(--bpn-danger);
	background: var(--bpn-danger-soft);
}

.bpn-notice--success {
	border-left-color: var(--bpn-success);
	background: var(--bpn-success-soft);
}

/* Agent tool ----------------------------------------------------------- */

.bpn-agent__quota,
.bpn-agent__trial-note {
	margin: 0 0 1.25rem;
	padding: 12px 14px;
	border-radius: var(--bpn-radius-sm);
	background: var(--bpn-accent-soft);
	font-size: 0.95rem;
	color: var(--bpn-ink);
}

.bpn-agent__trial-note strong {
	color: var(--bpn-accent-dark);
}

/* The finished post ---------------------------------------------------- */

.bpn-result {
	padding: 16px;
	margin-top: 1.5rem;
	border: 1px solid var(--bpn-line);
	border-radius: var(--bpn-radius-sm);
	background: var(--bpn-surface-soft);
	white-space: pre-wrap;
	font-family: var(--bpn-font);
}

.bpn-result--error {
	background: var(--bpn-danger-soft);
	border-color: #fecaca;
}

.bpn-post {
	margin-top: 1.75rem;
	padding: 24px;
	border: 1px solid var(--bpn-line);
	border-radius: var(--bpn-radius);
	background: var(--bpn-surface);
	box-shadow: var(--bpn-shadow);
}

.bpn-post__title {
	margin: 0 0 1.25rem;
	font-size: 1.2rem;
}

.bpn-post__image {
	margin: 0 0 1.5rem;
}

.bpn-post__image img {
	display: block;
	width: 100%;
	max-width: 440px;
	height: auto;
	border-radius: var(--bpn-radius);
	box-shadow: var(--bpn-shadow);
}

.bpn-post__copy {
	padding: 18px;
	border: 1px solid var(--bpn-line);
	border-radius: var(--bpn-radius-sm);
	background: var(--bpn-surface-soft);
}

.bpn-post__hook {
	margin: 0 0 0.85rem;
	font-weight: 700;
	font-size: 1.05rem;
}

.bpn-post__caption {
	margin: 0 0 0.85rem;
	white-space: pre-wrap;
}

.bpn-post__hashtags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

.bpn-tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--bpn-accent-soft);
	color: var(--bpn-accent-dark);
	font-size: 0.88rem;
	font-weight: 500;
}

.bpn-post__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.25rem 0 0;
}

@media (min-width: 560px) {
	.bpn-post__actions .bpn-button {
		width: auto;
		flex: 0 0 auto;
	}
}

.bpn-post__note {
	margin: 1.1rem 0 0;
	font-size: 0.88rem;
	color: var(--bpn-ink-soft);
}

.bpn-post__status:empty {
	display: none;
}

.bpn-post__warning {
	margin: 0 0 1.25rem;
	padding: 12px 14px;
	border: 1px solid var(--bpn-line);
	border-radius: var(--bpn-radius-sm);
	background: var(--bpn-warn-soft);
	color: var(--bpn-warn-ink);
	font-size: 0.9rem;
}

/* A newsletter header is wide, so it is not held to the post image's width. */
.bpn-post--newsletter .bpn-post__image img {
	max-width: 100%;
}

/* Image card ----------------------------------------------------------- */

/*
 * The picture is the product here, so it gets the full column. Capping the
 * height keeps a 1080 × 1920 story from pushing the download button off screen.
 */
.bpn-post--image .bpn-post__image img {
	max-width: 100%;
	max-height: 70vh;
	width: auto;
	margin: 0 auto;
}

.bpn-image__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.1rem;
}

.bpn-image__dims,
.bpn-image__style {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--bpn-surface-soft);
	color: var(--bpn-ink-soft);
	font-size: 0.85rem;
	font-weight: 500;
}

.bpn-image__dims {
	font-variant-numeric: tabular-nums;
}

.bpn-image__resize {
	margin: 0 0 1.1rem;
}

.bpn-image__resize label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.bpn-image__resize select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--bpn-line-strong);
	border-radius: var(--bpn-radius-sm);
	background-color: var(--bpn-surface);
	color: var(--bpn-ink);
	font-family: var(--bpn-font);
	font-size: 1rem;
}

.bpn-image__resize select:focus {
	outline: none;
	border-color: var(--bpn-accent);
	box-shadow: 0 0 0 3px var(--bpn-accent-ring);
}

/* Transcript card ------------------------------------------------------ */

/*
 * A transcript can run to thousands of words, so it scrolls inside the card
 * rather than pushing the copy and download buttons far below the fold.
 */
.bpn-transcript {
	max-height: 460px;
	overflow-y: auto;
	line-height: 1.7;
}

.bpn-transcript p {
	margin: 0 0 0.9rem;
}

.bpn-transcript p:last-child {
	margin-bottom: 0;
}

/* File input ----------------------------------------------------------- */

/*
 * Left as the browser's own control rather than restyled into a button. A
 * custom file picker is one more thing to get wrong on mobile, and people
 * already know what this one does.
 */
.bpn-panel .bpn-agent__form input[type="file"] {
	display: block;
	width: 100%;
	padding: 12px;
	border: 1px dashed var(--bpn-line-strong);
	border-radius: var(--bpn-radius-sm);
	background: var(--bpn-surface-soft);
	color: var(--bpn-ink);
	font-family: var(--bpn-font);
	font-size: 0.95rem;
	cursor: pointer;
}

.bpn-panel .bpn-agent__form input[type="file"]:focus {
	outline: none;
	border-color: var(--bpn-accent);
	box-shadow: 0 0 0 3px var(--bpn-accent-ring);
}

/* Newsletter card ------------------------------------------------------ */

.bpn-subjects {
	margin: 0 0 1.25rem;
	padding: 16px 18px;
	border: 1px solid var(--bpn-line);
	border-radius: var(--bpn-radius-sm);
	background: var(--bpn-accent-soft);
}

.bpn-subjects__title {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bpn-ink-soft);
}

.bpn-subjects__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpn-subjects__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--bpn-line);
}

.bpn-subjects__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.bpn-subjects__item:first-child {
	padding-top: 0;
}

.bpn-subjects__text {
	font-weight: 600;
	line-height: 1.4;
}

/* The copy button must not shrink away from its label on a narrow screen. */
.bpn-subjects__item .bpn-button {
	width: auto;
	flex: 0 0 auto;
	white-space: nowrap;
}

.bpn-preheader {
	margin: 0 0 1.25rem;
	color: var(--bpn-ink-soft);
	font-size: 0.92rem;
}

.bpn-preheader__label {
	font-weight: 600;
	color: var(--bpn-ink);
}

.bpn-newsletter p {
	margin: 0 0 0.9rem;
	white-space: pre-wrap;
}

.bpn-newsletter p:last-child {
	margin-bottom: 0;
}

.bpn-newsletter__greeting {
	font-weight: 600;
}

.bpn-newsletter__heading {
	margin: 1.4rem 0 0.5rem;
	font-size: 1.02rem;
	font-weight: 700;
}

/* The one call to action, marked so it is obvious there is only one. */
.bpn-newsletter__cta {
	margin-top: 1.4rem;
	padding: 12px 14px;
	border-left: 3px solid var(--bpn-accent);
	background: var(--bpn-surface);
	font-weight: 500;
}

.bpn-newsletter__signoff {
	margin-top: 1.25rem;
	color: var(--bpn-ink-soft);
}

/* An opt-in checkbox sits inline with its label, unlike the stacked fields. */
.bpn-checkbox label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-weight: 500;
	cursor: pointer;
}

.bpn-checkbox input[type="checkbox"] {
	width: auto;
	margin: 0;
	flex: 0 0 auto;
}

/* Dashboard ------------------------------------------------------------ */

.bpn-section {
	margin: 0 0 3rem;
}

.bpn-section__title {
	margin: 0 0 0.4rem;
	font-size: 1.35rem;
}

.bpn-section__lead {
	margin: 0 0 1.5rem;
	color: var(--bpn-ink-soft);
}

.bpn-empty {
	padding: 32px 24px;
	border: 1px dashed var(--bpn-line-strong);
	border-radius: var(--bpn-radius);
	background: var(--bpn-surface-soft);
	text-align: center;
}

.bpn-empty__title {
	margin: 0 0 0.4rem;
	font-weight: 700;
}

.bpn-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 620px) {
	.bpn-cards {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
}

.bpn-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px;
	border: 1px solid var(--bpn-line);
	border-radius: var(--bpn-radius);
	background: var(--bpn-surface);
	box-shadow: var(--bpn-shadow);
	transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.bpn-card--owned {
	border-top: 3px solid var(--bpn-success);
}

.bpn-card--locked {
	border-top: 3px solid var(--bpn-accent);
	background: linear-gradient(180deg, var(--bpn-accent-soft) 0%, var(--bpn-surface) 55%);
}

.bpn-card--locked:hover {
	transform: translateY(-3px);
	box-shadow: var(--bpn-shadow-lift);
}

.bpn-card--try {
	border-top: 3px solid var(--bpn-accent);
	background: linear-gradient(180deg, var(--bpn-accent-soft) 0%, var(--bpn-surface) 55%);
}

.bpn-card--try:hover {
	transform: translateY(-3px);
	box-shadow: var(--bpn-shadow-lift);
}

/* The header above the grid, outside the cards. */
.bpn-try__actions {
	margin: 0 0 0.6rem;
}

.bpn-try__foot {
	margin: 0 0 1.75rem;
	color: var(--bpn-ink-soft);
	font-size: 0.92rem;
}

.bpn-try__foot a {
	color: var(--bpn-accent);
	font-weight: 600;
}

@media (min-width: 560px) {
	.bpn-try__actions .bpn-button {
		width: auto;
		display: inline-block;
	}
}

.bpn-card__title {
	margin: 0 0 0.7rem;
	font-size: 1.1rem;
	line-height: 1.35;
}

.bpn-card__teaser {
	margin: 0 0 1.1rem;
	color: var(--bpn-ink-soft);
	font-size: 0.97rem;
}

.bpn-card__meter {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin: 0 0 0.6rem;
}

.bpn-meter__value {
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
	/* Tabular figures stop the number jiggling as the allowance changes. */
	font-variant-numeric: tabular-nums;
	color: var(--bpn-success);
}

.bpn-meter__label {
	font-size: 0.92rem;
	color: var(--bpn-ink-soft);
}

.bpn-card__source,
.bpn-card__note {
	margin: 0;
	font-size: 0.88rem;
	color: var(--bpn-ink-soft);
}

.bpn-card__flag {
	margin: 0 0 0.7rem;
}

.bpn-card__price {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 0 0.3rem;
}

.bpn-price {
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--bpn-ink);
}

.bpn-price__period {
	font-size: 0.9rem;
	color: var(--bpn-ink-soft);
}

.bpn-card__actions {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin-top: 1.25rem;
}

.bpn-card__actions form {
	margin: 0;
}

.bpn-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--bpn-surface-soft);
	color: var(--bpn-ink-soft);
	font-size: 0.8rem;
	font-weight: 600;
}

.bpn-badge--soon {
	background: var(--bpn-warn-soft);
	color: var(--bpn-warn-ink);
}

.bpn-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--bpn-surface-soft);
	font-size: 0.85rem;
}

.bpn-status--active {
	background: var(--bpn-success-soft);
	color: var(--bpn-success);
}

.bpn-status--inactive {
	color: var(--bpn-ink-soft);
}

/* Create-an-account call to action ------------------------------------- */

.bpn-cta {
	padding: 28px;
	border: 1px solid var(--bpn-accent);
	border-radius: var(--bpn-radius);
	background: linear-gradient(180deg, var(--bpn-accent-soft) 0%, var(--bpn-surface) 70%);
	text-align: center;
}

.bpn-cta__title {
	margin: 0 0 0.6rem;
	font-size: 1.35rem;
	line-height: 1.3;
}

.bpn-cta__lead {
	margin: 0 auto 1.25rem;
	max-width: 46ch;
	color: var(--bpn-ink-soft);
}

.bpn-cta__points {
	display: inline-block;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	text-align: left;
}

.bpn-cta__points li {
	position: relative;
	margin: 0 0 0.45rem;
	padding-left: 1.75rem;
	font-weight: 500;
}

/* A tick drawn in CSS rather than an emoji. */
.bpn-cta__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 0.65rem;
	height: 0.35rem;
	border-left: 2px solid var(--bpn-accent);
	border-bottom: 2px solid var(--bpn-accent);
	transform: rotate(-45deg);
}

.bpn-cta__actions {
	margin: 0 0 1rem;
}

.bpn-cta__foot {
	margin: 0;
	font-size: 0.92rem;
	color: var(--bpn-ink-soft);
}

.bpn-cta__foot a {
	color: var(--bpn-accent);
	font-weight: 600;
}

/* Pricing -------------------------------------------------------------- */

.bpn-pricing {
	max-width: 1040px;
	margin: 0 auto 2rem;
}

.bpn-plans {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 620px) {
	.bpn-plans {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

.bpn-plan {
	padding: 24px;
	border: 1px solid var(--bpn-line);
	border-radius: var(--bpn-radius);
	background: var(--bpn-surface);
	box-shadow: var(--bpn-shadow);
}

.bpn-plan--bundle {
	border-top: 3px solid var(--bpn-accent);
}

.bpn-plan__name {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
}

.bpn-plan__price {
	margin: 0 0 0.7rem;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.bpn-plan__period {
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--bpn-ink-soft);
}

.bpn-plan__description,
.bpn-plan__includes {
	margin: 0 0 1.1rem;
	color: var(--bpn-ink-soft);
	font-size: 0.95rem;
}

.bpn-plan__owned {
	margin: 0;
	font-weight: 700;
	color: var(--bpn-success);
}

.bpn-plan__unavailable {
	margin: 0;
	color: var(--bpn-ink-soft);
}

/* Slot picker ---------------------------------------------------------- */

.bpn-slots {
	margin: 0 0 1.1rem;
	padding: 16px;
	border: 1px solid var(--bpn-line);
	border-radius: var(--bpn-radius-sm);
	background: var(--bpn-surface-soft);
}

.bpn-slots legend {
	padding: 0 0.4rem;
	font-weight: 600;
	font-size: 0.95rem;
}

.bpn-slots__option {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0.45rem 0;
	font-weight: 400;
	cursor: pointer;
}

.bpn-slots__option input {
	width: auto;
	margin: 0;
}

.bpn-slots__option input[disabled] {
	cursor: default;
}

.bpn-slots__option input[disabled] ~ * {
	opacity: 0.5;
}

/* Locked plan card ----------------------------------------------------- */

.bpn-lock {
	padding: 24px;
	border: 1px solid var(--bpn-line);
	border-radius: var(--bpn-radius);
	background: var(--bpn-surface);
	box-shadow: var(--bpn-shadow);
}

.bpn-lock__label {
	margin: 0 0 0.2rem;
	color: var(--bpn-ink-soft);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bpn-lock__name {
	margin: 0 0 0.35rem;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.3;
}

.bpn-lock__meta,
.bpn-lock__note {
	margin: 0;
	color: var(--bpn-ink-soft);
	font-size: 0.9rem;
}

/* A queued swap is news, so it gets the notice treatment. */
.bpn-lock__queued {
	margin-top: 1.1rem;
	padding: 14px 16px;
	border: 1px solid var(--bpn-line);
	border-radius: var(--bpn-radius-sm);
	background: var(--bpn-accent-soft);
}

.bpn-lock__switching {
	margin: 0 0 0.7rem;
	font-size: 0.95rem;
}

.bpn-lock__queued form {
	margin: 0;
}

.bpn-lock__note {
	margin-top: 1.1rem;
}

.bpn-lock__upsell {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--bpn-line);
}

.bpn-lock__upsell p {
	margin: 0 0 0.9rem;
	color: var(--bpn-ink-soft);
	font-size: 0.95rem;
}

.bpn-lock__upsell p:last-child {
	margin-bottom: 0;
}

/*
 * Changing tool is deliberate, so it sits behind a disclosure rather than
 * being a permanently open picker.
 */
.bpn-swap {
	margin-top: 1.1rem;
}

.bpn-swap__summary {
	display: inline-block;
	padding: 0.2rem 0;
	color: var(--bpn-accent);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.bpn-swap__summary:focus-visible {
	outline: 2px solid var(--bpn-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.bpn-swap[open] .bpn-swap__summary {
	margin-bottom: 0.9rem;
}

.bpn-swap__form {
	margin: 0;
	padding: 16px;
	border: 1px solid var(--bpn-line);
	border-radius: var(--bpn-radius-sm);
	background: var(--bpn-surface-soft);
}

.bpn-swap__form p:last-child {
	margin-bottom: 0;
}

.bpn-button--small {
	padding: 0.45rem 0.95rem;
	font-size: 0.85rem;
}

/* Upsell after a free run ---------------------------------------------- */

.bpn-upsell {
	margin-top: 1.75rem;
	padding: 24px;
	border: 2px solid var(--bpn-accent);
	border-radius: var(--bpn-radius);
	background: linear-gradient(180deg, var(--bpn-accent-soft) 0%, var(--bpn-surface) 70%);
}

.bpn-upsell__headline {
	margin: 0 0 0.4rem;
	font-size: 1.2rem;
}

.bpn-upsell__subtext {
	margin: 0 0 1.25rem;
	color: var(--bpn-ink-soft);
}

.bpn-upsell__plans {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.8rem;
}

@media (min-width: 560px) {
	.bpn-upsell__plans {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

.bpn-upsell__plan {
	display: block;
	padding: 16px;
	border: 1px solid var(--bpn-line-strong);
	border-radius: var(--bpn-radius-sm);
	background: var(--bpn-surface);
	text-decoration: none;
	color: inherit;
	transition: border-color 160ms ease-out, transform 160ms ease-out;
}

.bpn-upsell__plan:hover {
	border-color: var(--bpn-accent);
	transform: translateY(-2px);
}

.bpn-upsell__plan-name {
	display: block;
	font-weight: 600;
}

.bpn-upsell__plan-price {
	display: block;
	margin: 0.25rem 0 0.5rem;
	font-size: 1.35rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bpn-upsell__plan-cta {
	display: inline-block;
	color: var(--bpn-accent);
	font-weight: 600;
}

/* Tables --------------------------------------------------------------- */

.bpn-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.75rem;
	font-size: 0.95rem;
}

.bpn-table th,
.bpn-table td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--bpn-line);
	text-align: left;
	vertical-align: top;
}

.bpn-table th {
	font-weight: 600;
	color: var(--bpn-ink-soft);
	font-size: 0.88rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Header account button ------------------------------------------------ */

.bpn-account-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	text-decoration: none;
}

.bpn-account-link--plain {
	min-height: 0;
	display: inline;
	padding: 0;
	background: none;
	border: 0;
	color: var(--bpn-accent);
	font-weight: 600;
}

.bpn-menu-item > a {
	font-weight: 600;
}

/* Respect a request for less movement. */
@media (prefers-reduced-motion: reduce) {
	.bpn-button,
	.bpn-card,
	.bpn-upsell__plan {
		transition: none;
	}

	.bpn-card--locked:hover,
	.bpn-card--try:hover,
	.bpn-upsell__plan:hover,
	.bpn-button:active {
		transform: none;
	}
}

/* Admin ---------------------------------------------------------------- */

.bpn-admin__inline {
	display: inline-block;
	margin: 0 0.5rem 0.35rem 0;
	vertical-align: middle;
}

.bpn-admin__url {
	display: inline-block;
	padding: 8px 12px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	font-size: 1.02em;
	user-select: all;
}

.bpn-check {
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 22px;
	border-radius: 50%;
	text-align: center;
	font-weight: 700;
	color: #fff;
}

.bpn-check--ok {
	background: var(--bpn-success);
}

.bpn-check--warn {
	background: #b45309;
}

.bpn-check--bad {
	background: var(--bpn-danger);
}

.bpn-pill {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9em;
}

.bpn-pill--test {
	background: #dbeafe;
	color: #1e40af;
}

.bpn-pill--live {
	background: #fee2e2;
	color: #991b1b;
}