/* The one upgrade message, loaded on every page so any product can use it. */

/* ---- the one upgrade message ----
   Centre of the screen, over everything, and it waits. Anything to do with a plan
   is a decision, and a decision does not belong in a corner toast that leaves on
   its own before it has been read. */
/* No fade on the backdrop. It was the one thing that could leave the whole dialog
   built, positioned and invisible, and a message about money is not worth risking
   for a sixth of a second of polish. The card still eases in, and if that never
   runs the dialog is simply there, which is the correct failure. */
.bgwd-up-back {
	position: fixed; inset: 0; z-index: 9000;
	display: flex; align-items: center; justify-content: center; padding: 20px;
	background: rgba(26,23,20,.5);
}
.bgwd-up {
	width: 100%; max-width: 460px; padding: 30px 32px 26px; border-radius: 16px;
	background: var(--bg, #faf7f2);
	border: 1px solid var(--line2, rgba(26,23,20,.14));
	box-shadow: 0 24px 60px rgba(26,23,20,.28);
	animation: bgwd-up-in .16s ease both;
}
@keyframes bgwd-up-in {
	from { transform: translateY(8px) scale(.985); }
	to   { transform: none; }
}
.bgwd-up-k {
	margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: var(--accent, #9b2f2c);
}
.bgwd-up-h {
	margin: 0 0 12px; font-family: 'Fraunces', Georgia, serif; font-weight: 600;
	font-size: 22px; line-height: 1.25; color: var(--text, #1a1714);
}
.bgwd-up-b {
	margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: var(--text2, #4a443d);
}
.bgwd-up-p {
	margin: 0 0 22px; font-size: 13.5px; font-weight: 600; color: var(--text, #1a1714);
}
.bgwd-up-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.bgwd-up-row .bgwd-btn { text-decoration: none; }

@media (max-width: 480px) {
	.bgwd-up { padding: 24px 22px 20px; }
	.bgwd-up-row { flex-direction: column-reverse; }
	.bgwd-up-row .bgwd-btn { width: 100%; text-align: center; }
}

/* The two allowances, side by side. What each plan gives, and nothing about why
   anybody might want the larger one. */
.bgwd-up-t {
	margin: 0 0 22px; border-top: 1px solid var(--line2, rgba(26,23,20,.12));
}
.bgwd-up-tr {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	padding: 10px 0; border-bottom: 1px solid var(--line2, rgba(26,23,20,.12));
	font-size: 14px; color: var(--text2, #4a443d);
}
.bgwd-up-tr b { font-size: 15px; color: var(--text, #1a1714); }
.bgwd-up-tr.is-up { color: var(--accent, #9b2f2c); font-weight: 600; }
.bgwd-up-tr.is-up b { color: var(--accent, #9b2f2c); }