/**
 * Red Bluff Deals — Core
 * Home page, signup form, buttons. Scoped so it never leaks into the theme.
 */

.rbd-home {
	/* Dark treatment: near-black ground, red as the single accent, generous
	   contrast so it still reads in bright sun on a phone. */
	--rbd-red: #e12b35;
	--rbd-red-dark: #ff4a54;
	--rbd-ink: #f4f1ee;        /* primary text */
	--rbd-ink-2: #a8a09b;      /* secondary text */
	--rbd-ground: #0e0d0d;     /* page background */
	--rbd-panel: #191717;      /* cards and raised surfaces */
	--rbd-rule: #2e2a29;       /* borders */
	--rbd-tint: #151313;       /* alternating band */

	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	color: var(--rbd-ink);
	background: var(--rbd-ground);
}

/* REMOVED 19 Aug 2026 — `.rbd-home::before`, a full-viewport dark layer.
   Do not put it back. What it did, and why it went:

   It was `position: fixed; inset: 0; background: var(--rbd-ground);
   z-index: -1` — meant to stretch the dark ground edge to edge so the theme's
   own page background did not show as a light gutter.

   z-index:-1 should have kept it behind everything. It did not. `.rbd-home`
   comes after the site header in the document, and the layer painted with it,
   so a fixed sheet the size of the viewport ended up ON TOP of the header and
   the footer. Both rendered normally — correct size, correct position,
   opacity 1, visibility visible — and were simply painted over. On a dark
   theme that reads as an empty black band rather than as a bug, which is why
   it survived so long.

   It caused two separate failures. First, every header control on the home and
   business pages was unclickable, because the layer also won hit testing. That
   was patched earlier the same day with `pointer-events: none`, which restored
   the clicks — but only the clicks. **The header and footer stayed invisible,
   and the hit tests kept passing, because pointer-events:none removes an
   element from hit testing while leaving it painting.** Verifying clickability
   proved nothing about visibility.

   Removing it outright fixes both, and costs nothing: the child theme already
   sets `body { background-color: var(--rbdt-ground) }` and `.rbd-home` sets its
   own background, so the page stays dark edge to edge with no layer at all.
   Confirmed on live by disabling the rule and screenshotting — logo, burger,
   Sign In, Add Listing and the whole footer all reappeared on an unchanged
   dark background. */

/* ---------------------------------------------------------------- buttons */

.rbd-btn {
	display: inline-block;
	padding: 13px 26px;
	border: 2px solid transparent;
	border-radius: 3px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rbd-btn--lg {
	padding: 16px 32px;
	font-size: 1.05rem;
}

.rbd-btn--primary {
	background: var(--rbd-red);
	border-color: var(--rbd-red);
	color: #fff !important;
}

.rbd-btn--primary:hover,
.rbd-btn--primary:focus {
	background: var(--rbd-red-dark);
	border-color: var(--rbd-red-dark);
	color: #fff !important;
}

.rbd-btn--ghost {
	background: transparent;
	border-color: var(--rbd-rule);
	color: var(--rbd-ink) !important;
}

.rbd-btn--ghost:hover,
.rbd-btn--ghost:focus {
	background: var(--rbd-panel);
	border-color: var(--rbd-ink-2);
	color: var(--rbd-ink) !important;
}

.rbd-btn--dark {
	background: var(--rbd-red);
	border-color: var(--rbd-red);
	color: #fff !important;
}

.rbd-btn--dark:hover,
.rbd-btn--dark:focus {
	background: var(--rbd-red-dark);
	border-color: var(--rbd-red-dark);
	color: #14100f !important;
}

.rbd-btn:focus-visible {
	outline: 3px solid var(--rbd-red);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ hero */

.rbd-hero {
	padding: 56px 0 44px;
	text-align: center;
	border-bottom: 1px solid var(--rbd-rule);
}

.rbd-hero__eyebrow {
	margin: 0 0 14px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rbd-red);
}

.rbd-hero__title {
	margin: 0 0 18px;
	font-size: clamp( 2rem, 5.5vw, 3.4rem );
	line-height: 1.05;
	letter-spacing: -0.025em;
	font-weight: 800;
	text-wrap: balance;
}

.rbd-hero__sub {
	max-width: 34em;
	margin: 0 auto 30px;
	font-size: 1.13rem;
	line-height: 1.6;
	color: var(--rbd-ink-2);
}

.rbd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* ----------------------------------------------------------- video spot */

.rbd-vid {
	max-width: 860px;
	margin: 34px auto 0;
	text-align: left;
}

.rbd-vid__play,
.rbd-vid__player {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	background-color: #1b1815;
	background-size: cover;
	background-position: center;
	border: 0;
	padding: 0;
	margin: 0;
}

.rbd-vid__play {
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.rbd-vid__play::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.28 );
	transition: background-color 0.15s ease;
}

.rbd-vid__play:hover::after,
.rbd-vid__play:focus-visible::after {
	background: rgba( 0, 0, 0, 0.14 );
}

.rbd-vid__play:focus-visible {
	outline: 3px solid var(--rbd-red);
	outline-offset: 3px;
}

.rbd-vid__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	z-index: 1;
	width: 74px;
	height: 74px;
	line-height: 74px;
	text-align: center;
	border-radius: 50%;
	background: var(--rbd-red);
	color: #fff;
	font-size: 26px;
	padding-left: 5px; /* optically centre the triangle */
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.4 );
}

.rbd-vid__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 10px 0 0;
	font-size: 0.88rem;
	color: var(--rbd-ink-2);
}

.rbd-vid__flag {
	display: inline-block;
	margin: 0;
	padding: 3px 9px;
	background: var(--rbd-red);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	border-radius: 2px;
}

.rbd-vid__book {
	margin-left: auto;
	font-weight: 700;
	color: var(--rbd-red-dark);
}

/* Empty state doubles as an advert for the advert.
   No aspect-ratio here: pairing 16/9 with a height cap shrinks the width and
   leaves the box hanging left of everything else on wide screens. */
.rbd-vid--empty .rbd-vid__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	min-height: 240px;
	padding: 36px 24px;
	text-align: center;
	border: 2px dashed var(--rbd-rule);
	border-radius: 6px;
	background: var(--rbd-panel);
}

.rbd-vid--empty .rbd-vid__pitch {
	margin: 0;
	max-width: 34em;
	color: var(--rbd-ink-2);
}

/* -------------------------------------------------------------- sections */

.rbd-section {
	padding: 48px 0;
	border-bottom: 1px solid var(--rbd-rule);
}

.rbd-section:last-child {
	border-bottom: 0;
}

.rbd-section--tint {
	background: var(--rbd-tint);
	border-bottom: 1px solid var(--rbd-rule);
	margin: 0 -20px;
	padding-left: 20px;
	padding-right: 20px;
}

.rbd-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 22px;
}

.rbd-section__title {
	margin: 0 0 22px;
	font-size: clamp( 1.5rem, 3vw, 2rem );
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 800;
}

.rbd-section__head .rbd-section__title {
	margin: 0;
}

.rbd-section__link {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--rbd-red-dark);
}

/* ----------------------------------------------------------------- tiles */

.rbd-tiles {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 16px;
}

.rbd-tile {
	display: block;
	padding: 24px;
	background: var(--rbd-panel);
	border: 1px solid var(--rbd-rule);
	border-top: 4px solid var(--rbd-red);
	border-radius: 6px;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.rbd-tile:hover,
.rbd-tile:focus {
	transform: translateY( -2px );
	border-color: var(--rbd-red);
	box-shadow: 0 10px 26px rgba( 0, 0, 0, 0.55 );
}

/* Informational tiles that aren't links shouldn't behave like them. */
.rbd-tile--static,
.rbd-tile--static:hover,
.rbd-tile--static:focus {
	transform: none;
	box-shadow: none;
	cursor: default;
}

.rbd-tile__label {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.rbd-tile__desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--rbd-ink-2);
}

/* -------------------------------------------------------- sell / business */

.rbd-sell,
.rbd-biz {
	max-width: 46em;
}

.rbd-sell__title,
.rbd-biz__title {
	margin: 0 0 12px;
	font-size: clamp( 1.5rem, 3vw, 2rem );
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 800;
}

.rbd-sell__text,
.rbd-biz__text {
	margin: 0 0 22px;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--rbd-ink-2);
}

.rbd-section--biz {
	background: var(--rbd-panel);
	border: 1px solid var(--rbd-rule);
	border-radius: 6px;
	margin: 0 0 48px;
	padding: 40px 32px;
	border-bottom: 1px solid var(--rbd-rule);
}

.rbd-section--biz .rbd-biz__text {
	color: var(--rbd-ink-2);
}

/* ------------------------------------------------------------ signup form */

.rbd-sub {
	max-width: 40em;
}

.rbd-sub__title {
	margin: 0 0 10px;
	font-size: clamp( 1.4rem, 2.6vw, 1.8rem );
	font-weight: 800;
	letter-spacing: -0.02em;
}

.rbd-sub__text {
	margin: 0 0 20px;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--rbd-ink-2);
}

.rbd-sub__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
}

.rbd-sub__input {
	flex: 1 1 240px;
	min-width: 0;
	padding: 13px 15px;
	font-size: 1rem;
	border: 2px solid var(--rbd-rule);
	border-radius: 3px;
	background: var(--rbd-panel);
	color: var(--rbd-ink);
}

.rbd-sub__input::placeholder {
	color: var(--rbd-ink-2);
}

.rbd-sub__input:focus {
	outline: none;
	border-color: var(--rbd-red);
}

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.rbd-sub__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

.rbd-sub__msg {
	flex: 1 0 100%;
	margin: 4px 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	min-height: 1.2em;
}

.rbd-sub__msg.is-ok {
	color: #6fbf92;
}

.rbd-sub__msg.is-error {
	color: var(--rbd-red-dark);
}

/* Screen-reader-only labels, in case the theme doesn't define this. */
.rbd-home .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

@media ( max-width: 640px ) {
	.rbd-hero {
		padding: 36px 0 32px;
	}

	.rbd-hero__actions .rbd-btn {
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.rbd-tile,
	.rbd-btn {
		transition: none;
	}

	.rbd-tile:hover,
	.rbd-tile:focus {
		transform: none;
	}
}

/* ==========================================================================
   Front-page deal spots
   These are the paid placements, so they are built to look bought rather than
   filled in: real photography, a defined surface, and one obvious action.

   The palette is redeclared on the block itself rather than read from :root.
   rbd-map.css publishes a light-mode palette under the same names at :root,
   and scoping here means load order between the two plugins cannot decide
   what colour this section comes out.
   ========================================================================== */

/* ⚠️ The detail card is listed here too, and must stay listed.

   These tokens are scoped rather than global on purpose (see above), but the
   deal card markup is reused on /deal/{business}/ — which is NOT inside
   .rbd-deals. That left every --rbdd-* undefined there, so
   `.rbd-deal__badge { background: var(--rbdd-red) }` collapsed to transparent
   and the RED HOT badge rendered as white text on a bright photo: invisible.

   Caught by screenshot on 19 Aug, having passed every other check. Any future
   wrapper that reuses .rbd-deal__* markup has to be added to this selector. */

.rbd-deals,
.rbd-dp {
	--rbdd-red: #e12b35;
	--rbdd-red-dark: #ff4a54;
	--rbdd-ink: #f4f1ee;
	--rbdd-ink-2: #a8a09b;
	--rbdd-panel: #191717;
	--rbdd-rule: #2e2a29;
}

.rbd-deals {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 20px;
}

@media (max-width: 900px) {
	.rbd-deals {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.rbd-deals {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------- the card */

.rbd-deal {
	display: flex;
	flex-direction: column;
	background: var(--rbdd-panel);
	border: 1px solid var(--rbdd-rule);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.18s ease, border-color 0.18s ease;
}

.rbd-deal:hover {
	transform: translateY(-2px);
	border-color: #4a4442;
}

/* ------------------------------------------------------------ the photos */

.rbd-deal__media {
	position: relative;
	display: grid;
	aspect-ratio: 4 / 3;
	/* This is a flex item, and flex items default to min-height:auto — which
	   lets the photos inside dictate the height and quietly overrule the
	   aspect ratio. Zeroing it here is what actually makes the ratio hold. */
	min-height: 0;
	background: #221f1e;
	gap: 2px;
}

.rbd-deal__media--quad {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.rbd-deal__media--pair {
	grid-template-columns: 1fr 1fr;
}

.rbd-deal__media--single,
.rbd-deal__media--blank {
	grid-template-columns: 1fr;
	place-items: center;
}

.rbd-deal__photo {
	width: 100%;
	height: 100%;
	/* Grid items get an automatic minimum size from their content, which was
	   letting these 240px photos push the panel past its declared aspect
	   ratio. Zeroing the minimum lets aspect-ratio actually govern. */
	min-width: 0;
	min-height: 0;
	object-fit: cover;
	display: block;
}

/* Fallback when an advertiser has sent no pictures yet. */

.rbd-deal__initial {
	font-size: 3rem;
	font-weight: 700;
	color: var(--rbdd-ink-2);
	opacity: 0.5;
}

/* The two corner tags. Absolute so they sit over the photo grid. */

.rbd-deal__badge,
.rbd-deal__flag {
	position: absolute;
	top: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 6px 9px;
	border-radius: 999px;
}

.rbd-deal__badge {
	left: 10px;
	background: var(--rbdd-red);
	color: #fff;
}

.rbd-deal__flag {
	right: 10px;
	background: rgba( 0, 0, 0, 0.62 );
	color: var(--rbdd-ink);
	font-weight: 600;
}

/* --------------------------------------------------------------- the copy */

.rbd-deal__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 18px 18px;
}

.rbd-deal__kicker {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rbdd-red-dark);
}

.rbd-deal__name {
	margin: 0 0 8px;
	font-size: 1.25rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--rbdd-ink);
}

/* The offer is the reason the card exists, so it outweighs the business name. */

.rbd-deal__offer {
	margin: 0 0 8px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rbdd-red-dark);
}

.rbd-deal__tagline {
	margin: 0 0 10px;
	font-style: italic;
	color: var(--rbdd-ink-2);
	line-height: 1.45;
}

.rbd-deal__meta {
	margin: 0 0 16px;
	font-size: 0.875rem;
	color: var(--rbdd-ink-2);
}

/* Push the buttons to the bottom so cards of unequal copy still line up. */

.rbd-deal__actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
	flex-wrap: wrap;
}

.rbd-deal__actions .rbd-btn {
	flex: 1 1 auto;
	text-align: center;
	white-space: nowrap;
}

/* ------------------------------------------------------- available slot */

.rbd-deal--open {
	background: transparent;
	border-style: dashed;
	border-color: #4a3d3c;
}

.rbd-deal--open:hover {
	border-color: var(--rbdd-red);
	transform: none;
}

.rbd-deal__open {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex: 1 1 auto;
	padding: 34px 22px;
	min-height: 260px;
}

.rbd-deal__open-mark {
	font-size: 2.25rem;
	line-height: 1;
	margin-bottom: 12px;
}

.rbd-deal__open-title {
	margin: 0 0 8px;
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--rbdd-ink);
}

.rbd-deal__open-text {
	margin: 0 0 18px;
	color: var(--rbdd-ink-2);
	line-height: 1.5;
	max-width: 27ch;
}

/* ------------------------------------------------------- section heading */

.rbd-flame {
	margin-right: 8px;
}

.rbd-section__lede {
	margin: -4px 0 0;
	color: var(--rbd-ink-2, #a8a09b);
}

/* ---------------------------------------------------------------------------
   Merchant Hub — the signed-in business's own screen.

   LIGHT, deliberately, while the public site stays dark: this is a back-office
   tool and it reads as one, the way a billing screen does. Taken from Will's
   Merchant Hub mockup.

   Every colour is a token so a dark toggle is later a swap and not a rewrite.
   The tokens are declared on `.rbd-portal` and NOT on `:root`, because three
   stylesheets on this site have already collided on `--rbd-*` variables and
   produced near-black text on a near-black ground. Scoping them here means
   this palette cannot reach anything else, and nothing else can reach it.

   To add the dark toggle later: copy the block below, change the values, and
   wrap it in `.rbd-portal[data-rbdp-theme="dark"]`. Nothing else needs
   touching — no rule underneath uses a literal colour.
   --------------------------------------------------------------------------- */

.rbd-portal {
	--rbdp-bg: #f8fafc;
	--rbdp-surface: #ffffff;
	--rbdp-border: #e2e8f0;
	--rbdp-ink: #1e293b;
	--rbdp-ink-2: #64748b;
	--rbdp-primary: #991b1b;
	--rbdp-on-primary: #ffffff;
	--rbdp-up: #047857;
	--rbdp-down: #b91c1c;
	--rbdp-flat: #64748b;
	--rbdp-warn-bg: #fef3c7;
	--rbdp-warn-ink: #92400e;
	--rbdp-radius: 12px;
	--rbdp-radius-btn: 8px;

	background-color: var(--rbdp-bg);
	color: var(--rbdp-ink);
	padding: 24px;
	margin: 0 auto;
	max-width: 1100px;
	border-radius: var(--rbdp-radius);
	font-size: 16px;
	line-height: 1.5;
}

.rbd-portal *,
.rbd-portal *::before,
.rbd-portal *::after {
	box-sizing: border-box;
}

.rbd-portal h1,
.rbd-portal h2,
.rbd-portal strong,
.rbd-portal a {
	color: var(--rbdp-ink);
}

/* Sample-data banner. Deliberately loud: a merchant must never mistake a
   demonstration number for their own. */

.rbdp-demo {
	background-color: var(--rbdp-warn-bg);
	color: var(--rbdp-warn-ink);
	border-radius: var(--rbdp-radius-btn);
	padding: 10px 14px;
	margin: 0 0 20px;
	font-size: 0.875rem;
	font-weight: 600;
}

.rbdp-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 24px;
}

.rbdp-head__title {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.rbdp-head__sub,
.rbdp-head__week {
	margin: 4px 0 0;
	color: var(--rbdp-ink-2);
	font-size: 0.875rem;
}

/* Stat cards. Every number carries its comparison — the one habit worth
   copying wholesale from Google Ads. A figure with nothing beside it cannot
   be acted on. */

.rbdp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: 24px;
}

.rbdp-card {
	background-color: var(--rbdp-surface);
	border: 1px solid var(--rbdp-border);
	border-radius: var(--rbdp-radius);
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.rbdp-card__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rbdp-ink-2);
}

.rbdp-card__value {
	margin: 6px 0 0;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.rbdp-card__delta,
.rbdp-card__note {
	margin: 8px 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
}

.rbdp-card__note {
	color: var(--rbdp-ink-2);
	font-weight: 400;
}

.rbdp-card__delta--up { color: var(--rbdp-up); }
.rbdp-card__delta--down { color: var(--rbdp-down); }
.rbdp-card__delta--flat { color: var(--rbdp-flat); }

.rbdp-card__vs,
.rbdp-card__pct {
	color: var(--rbdp-ink-2);
	font-weight: 400;
	margin-left: 4px;
}

.rbdp-panel {
	background-color: var(--rbdp-surface);
	border: 1px solid var(--rbdp-border);
	border-radius: var(--rbdp-radius);
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.rbdp-panel__title {
	margin: 0 0 8px;
	font-size: 1.125rem;
	font-weight: 600;
}

.rbdp-panel__text {
	margin: 0 0 16px;
	color: var(--rbdp-ink-2);
	max-width: 60ch;
}

.rbdp-slot {
	margin: 0 0 6px;
}

.rbdp-slot__runs {
	color: var(--rbdp-ink-2);
	font-size: 0.875rem;
	margin-left: 6px;
}

.rbdp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

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

.rbdp-table th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rbdp-ink-2);
}

.rbdp-table a {
	color: var(--rbdp-primary);
}

.rbdp-yes { color: var(--rbdp-up); font-weight: 600; }
.rbdp-no { color: var(--rbdp-down); font-weight: 600; }

.rbdp-btn {
	display: inline-block;
	background-color: var(--rbdp-primary);
	color: var(--rbdp-on-primary);
	border-radius: var(--rbdp-radius-btn);
	padding: 10px 18px;
	font-weight: 600;
	text-decoration: none;
}

.rbdp-btn:hover,
.rbdp-btn:focus {
	color: var(--rbdp-on-primary);
	opacity: 0.9;
}

.rbdp-foot {
	margin: 0;
	color: var(--rbdp-ink-2);
	font-size: 0.8125rem;
	max-width: 70ch;
}

.rbdp-gate {
	background-color: var(--rbdp-surface);
	border: 1px solid var(--rbdp-border);
	border-radius: var(--rbdp-radius);
	padding: 32px;
	text-align: center;
}

.rbdp-gate__title {
	margin: 0 0 8px;
	font-size: 1.5rem;
	font-weight: 700;
}

.rbdp-gate__text {
	margin: 0 0 20px;
	color: var(--rbdp-ink-2);
}

/* The table is the one thing that can overflow a phone. It scrolls inside its
   own panel rather than pushing the whole page sideways. */

@media (max-width: 700px) {
	.rbd-portal {
		padding: 16px;
		border-radius: 0;
	}

	.rbdp-panel {
		padding: 16px;
	}

	.rbdp-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------------
   Deal detail card — /deal/{business}/

   The page where a click turns into a lead. Dark, like the rest of the public
   site; the Merchant Hub above is the only light surface here.
   --------------------------------------------------------------------------- */

.rbd-dealpage {
	padding: 32px 20px 56px;
}

.rbd-dp {
	max-width: 720px;
	margin: 0 auto;
	background-color: var(--rbdd-panel, #191717);
	border: 1px solid var(--rbdd-rule, #2e2a29);
	border-radius: 14px;
	overflow: hidden;
}

.rbd-dp__body {
	padding: 24px;
}

.rbd-dp__kicker {
	margin: 0 0 6px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rbdd-red, #e12b35);
}

.rbd-dp__name {
	margin: 0 0 10px;
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--rbdd-ink, #f4f1ee);
}

.rbd-dp__offer {
	margin: 0 0 10px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--rbdd-red, #e12b35);
}

.rbd-dp__tagline {
	margin: 0 0 10px;
	font-style: italic;
	color: var(--rbdd-ink, #f4f1ee);
}

.rbd-dp__meta {
	margin: 0 0 6px;
	color: var(--rbdd-ink-2, #a8a09b);
	font-size: 0.9375rem;
}

.rbd-dp__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
}

/* Third-tier action. Their website is available but must not compete with the
   button that actually produces the lead. */

.rbd-btn--quiet {
	background: none;
	border: 1px solid var(--rbdd-rule, #2e2a29);
	color: var(--rbdd-ink-2, #a8a09b);
}

.rbd-btn--quiet:hover,
.rbd-btn--quiet:focus {
	color: var(--rbdd-ink, #f4f1ee);
}

.rbd-dp__note {
	margin: 14px 0 0;
	font-size: 0.875rem;
	color: var(--rbdd-ink-2, #a8a09b);
}

/* The wall. A crawler is served exactly this, so nothing is cloaked. */

.rbd-dp__gate {
	margin: 22px 0 0;
	padding: 20px;
	border: 1px dashed var(--rbdd-rule, #2e2a29);
	border-radius: 12px;
	text-align: center;
}

.rbd-dp__gate-text {
	margin: 0 0 14px;
	color: var(--rbdd-ink, #f4f1ee);
	font-weight: 600;
}

.rbd-dp__gate-why {
	margin: 12px 0 0;
	font-size: 0.8125rem;
	color: var(--rbdd-ink-2, #a8a09b);
}

.rbd-dp__back {
	margin: 24px 0 0;
	font-size: 0.9375rem;
}

@media (max-width: 600px) {
	.rbd-dealpage { padding: 20px 14px 40px; }
	.rbd-dp__body { padding: 18px; }
	.rbd-dp__name { font-size: 1.5rem; }
	.rbd-dp__actions .rbd-btn { flex: 1 1 100%; text-align: center; }
}