/* The X discount panel. Site tokens and site components only: the same accent, the
   same rectangular button at radius 8, the same type scale as everything else. */

.bgwxp {
	max-width: 620px; margin: 28px 0; padding: 22px 24px;
	background: var(--surface, rgba(26,23,20,.05));
	border: 1px solid var(--line2, rgba(26,23,20,.14));
	border-radius: 14px;
	font-family: 'Inter', -apple-system, sans-serif;
}
.bgwxp-k {
	margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .2em;
	text-transform: uppercase; color: var(--accent, #9b2f2c);
}
.bgwxp-h {
	margin: 0 0 8px; font-family: 'Fraunces', Georgia, serif; font-weight: 600;
	font-size: 24px; line-height: 1.15; color: var(--text, #1a1714);
}
.bgwxp-b { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--text2, #4a443d); }

.bgwxp-rows { list-style: none; margin: 0 0 16px; padding: 0; }
.bgwxp-rows li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	padding: 11px 0; border-top: 1px solid var(--line2, rgba(26,23,20,.12));
}
.bgwxp-rows li:last-child { border-bottom: 1px solid var(--line2, rgba(26,23,20,.12)); }
.bgwxp-need { font-size: 14.5px; line-height: 1.4; color: var(--text, #1a1714); }

.bgwxp-price { flex: none; text-align: right; white-space: nowrap; }
.bgwxp-price b {
	font-family: 'Fraunces', Georgia, serif; font-size: 20px;
	color: var(--accent, #9b2f2c); font-variant-numeric: tabular-nums;
}
.bgwxp-price s {
	margin-left: 7px; font-size: 13px; color: var(--text2, #4a443d); opacity: .65;
	font-variant-numeric: tabular-nums;
}
.bgwxp-price em {
	display: block; font-style: normal; font-size: 11px; letter-spacing: .08em;
	text-transform: uppercase; color: var(--text2, #4a443d); opacity: .8;
}

.bgwxp-btn { margin: 4px 0 12px; }
.bgwxp-fine { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text2, #4a443d); }
.bgwxp-fine + .bgwxp-fine { margin-top: 5px; }
.bgwxp-fine a { color: var(--accent, #9b2f2c); }

@media (max-width: 560px) {
	.bgwxp { padding: 18px 16px; }
	.bgwxp-rows li { flex-direction: column; gap: 4px; }
	.bgwxp-price { text-align: left; }
	.bgwxp-price em { display: inline; margin-left: 8px; }
}


/* ---------- the compact one, under the Continue with X button ----------
   Not a button and not a card: a line of text with a plus in front of it. Anything
   with a border and a fill next to a stack of real buttons reads as another button,
   and this is an aside, not a thing to press instead of signing up. */
.bgwxp-mini {
	/* Pulled up under the button. The social buttons carry their own bottom margin, so
	   sitting at zero still left a gap that read as a separate block rather than a note
	   about the button above it. */
	margin: -9px 0 16px; padding: 0; border: 0; background: none;
	font-family: 'Inter', -apple-system, sans-serif;
}
.bgwxp-mini > summary {
	list-style: none; cursor: pointer; padding: 1px 0 4px;
	font-size: 13px; line-height: 1.45; color: var(--text2, #4a443d);
	display: flex; align-items: baseline; gap: 7px;
}
.bgwxp-mini > summary:hover { color: var(--accent, #9b2f2c); }
.bgwxp-mini > summary::-webkit-details-marker { display: none; }
.bgwxp-mini > summary::before {
	content: '+'; flex: none; width: 9px; text-align: center;
	font-size: 13px; line-height: 1; color: var(--accent, #9b2f2c);
}
.bgwxp-mini[open] > summary::before { content: '−'; }

.bgwxp-mini .bgwxp-rows { margin: 2px 0 0; padding: 0 0 0 16px; }
.bgwxp-mini .bgwxp-rows li { padding: 7px 0; }
.bgwxp-mini .bgwxp-rows li:first-child { border-top: 0; }
.bgwxp-mini .bgwxp-rows li:last-child { border-bottom: 0; }
.bgwxp-mini .bgwxp-need { font-size: 13px; }
.bgwxp-mini .bgwxp-price b { font-size: 16px; }
.bgwxp-mini .bgwxp-price s { font-size: 12px; }
.bgwxp-mini .bgwxp-price em { font-size: 10px; }
.bgwxp-mini .bgwxp-fine { padding: 6px 0 0 16px; font-size: 12px; line-height: 1.55; }


/* ---------- the discount, confirmed at the checkout ----------
   Not an advert. A receipt line, explaining a price that is lower than the one they
   were quoted, so the number does not read as a mistake. */
.bgwxp-on {
	margin: 0 0 18px; padding: 13px 15px;
	border-left: 2px solid var(--accent, #9b2f2c);
	background: var(--surface, rgba(26,23,20,.05));
	border-radius: 0 8px 8px 0;
	font-family: 'Inter', -apple-system, sans-serif;
}
.bgwxp-on-h {
	margin: 0 0 4px; font-size: 13px; font-weight: 600;
	color: var(--accent, #9b2f2c);
}
.bgwxp-on-b { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text, #1a1714); }
.bgwxp-on-f { margin: 5px 0 0; font-size: 12px; line-height: 1.55; color: var(--text2, #4a443d); }