/* ===========================================================
   RewardRace — Powerful Features Detail (rrPowD)
   Editorial feature-row layout used on the Features page.
   Left column: icon tile + title + description + checkmark
   bullet list. Right column: stylised "Create Reward" form
   mockup with a side preview card. Colour tokens follow the
   shared How It Works / Pricing palette defined in base.css.
   =========================================================== */

.rrPowD {
	--rrpd-bg:                #FFFFFF;
	--rrpd-section-bg:        #FFFFFF;
	--rrpd-heading:           var(--rr-heading);
	--rrpd-text:              var(--rr-text);
	--rrpd-muted:             var(--rr-muted);
	--rrpd-subtle:            var(--rr-subtle);
	--rrpd-accent:            var(--rr-brand);
	--rrpd-accent-soft:       var(--rr-brand-soft);
	--rrpd-accent-tint:       var(--rr-brand-tint);

	--rrpd-icon-bg:           var(--rr-brand-soft);
	--rrpd-icon-color:        var(--rr-brand);

	--rrpd-mockup-bg:         #FFFFFF;
	--rrpd-mockup-border:     var(--rr-border);
	--rrpd-mockup-shadow:     0 1px 2px rgba(11, 10, 20, .04), 0 12px 32px rgba(11, 10, 20, .06);

	--rrpd-input-bg:          #FFFFFF;
	--rrpd-input-border:      rgba(11, 10, 20, .14);
	--rrpd-input-text:        #4A4858;
	--rrpd-input-label:       var(--rr-muted);

	/* Lavender tint matching .rrTrust's soft surface (#FAF8FF) so the
	   Reward Preview card reads as part of the brand system. */
	--rrpd-preview-bg:        #FAF8FF;
	--rrpd-preview-border:    rgba(87, 63, 211, .14);
	--rrpd-preview-shadow:    0 1px 2px rgba(11, 10, 20, .04), 0 6px 18px rgba(87, 63, 211, .08);
	--rrpd-preview-btn-bg:    var(--rr-brand);

	--rrpd-check-color:       var(--rr-brand);

	/* Analytics chart plot height — shared by the y-axis rail and the
	   SVG plot so gridlines and y-labels stay aligned. */
	--rrpd-an-plot-h:         172px;
	--rrpd-an-positive:       #16A34A;

	position: relative;
	font-family: var(--rr-font-sans);
	color: var(--rrpd-text);
	background: var(--rrpd-section-bg);
	box-sizing: border-box;
	overflow: hidden;
}
.rrPowD *, .rrPowD *::before, .rrPowD *::after { box-sizing: border-box; }

/* Dark-mode theming */
.rrPowD--dark,
html[data-theme="dark"] .rrPowD--auto {
	--rrpd-bg:              #0A0912;
	--rrpd-section-bg:      #0A0912;
	--rrpd-icon-bg:         rgba(139, 115, 255, .18);
	--rrpd-icon-color:      #A894FF;
	--rrpd-accent:          #8B73FF;
	--rrpd-mockup-bg:       #14122A;
	--rrpd-mockup-border:   rgba(255, 255, 255, .08);
	--rrpd-mockup-shadow:   0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .45);
	--rrpd-input-bg:        rgba(255, 255, 255, .04);
	--rrpd-input-border:    rgba(255, 255, 255, .10);
	--rrpd-input-text:      #E9E7F2;
	--rrpd-input-label:     #A4A1B8;
	--rrpd-preview-bg:      rgba(139, 115, 255, .10);
	--rrpd-preview-border:  rgba(139, 115, 255, .22);
	--rrpd-preview-shadow:  0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
	--rrpd-preview-btn-bg:  #8B73FF;
	--rrpd-check-color:     #A894FF;
	--rrpd-an-positive:     #34D399;
}

/* ===========================================================
   Decorative dot cluster — right edge accent
   =========================================================== */
.rrPowD__dots {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(90px, 9vw, 170px);
	height: clamp(220px, 30vh, 360px);
	pointer-events: none;
	z-index: 0;
	display: block;

	background-image: radial-gradient(
		circle at center,
		var(--rr-brand-light) 1px,
		transparent 1.4px
	);
	background-size: 12px 12px;
	background-position: 0 0;
	opacity: .5;

	-webkit-mask-image: radial-gradient(
		ellipse 70% 70% at 70% 50%,
		#000 0%,
		rgba(0, 0, 0, .85) 32%,
		rgba(0, 0, 0, .4)  60%,
		rgba(0, 0, 0, .1)  82%,
		transparent 95%
	);
	mask-image: radial-gradient(
		ellipse 70% 70% at 70% 50%,
		#000 0%,
		rgba(0, 0, 0, .85) 32%,
		rgba(0, 0, 0, .4)  60%,
		rgba(0, 0, 0, .1)  82%,
		transparent 95%
	);
}
@media (max-width: 960px) {
	.rrPowD__dots { display: none; }
}
html[data-theme="dark"] .rrPowD__dots { opacity: .28; }

/* ===========================================================
   Layout
   =========================================================== */
.rrPowD__wrap {
	max-width: var(--rr-container);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 3vw, 2.5rem);
	position: relative;
	z-index: 1;
}

/* ===========================================================
   Heading
   =========================================================== */
.rrPowD__head {
	margin: 0 auto var(--rr-space-12);
	max-width: var(--rr-head-max-width);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.rrPowD .rrPowD__eyebrow {
	display: inline-flex;
	align-items: center;
	font-size: var(--rr-fs-2xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rrpd-accent);
	margin-bottom: var(--rr-space-4);
}

.rrPowD .rrPowD__title {
	font-size: var(--rr-fs-h2);
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: var(--rr-lh-snug);
	margin: 0;
	color: var(--rrpd-heading);
	text-wrap: balance;
}
.rrPowD__titleLead,
.rrPowD__titleTail { color: inherit; }

.rrPowD .rrPowD__titleAccent {
	color: var(--rrpd-accent) !important;
	font-weight: 800;
	font-style: normal !important;
}

.rrPowD .rrPowD__subtitle {
	margin: var(--rr-space-4) 0 0;
	color: var(--rrpd-muted);
	font-size: var(--rr-fs-lg);
	line-height: var(--rr-lh-relaxed);
	font-weight: 400;
}

/* ===========================================================
   Rows
   =========================================================== */
.rrPowD__rows {
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 6vw, 5.5rem);
	max-width: 1180px;
	margin: 0 auto;
}

/* The article (.rrPowD__row) is now just a positioning/background box.
   The 3-column grid lives on .rrPowD__rowInner so a has-bg row can
   break out to full viewport width while its content stays centred. */
.rrPowD__row { display: block; }

/* Three columns: icon | text | mockup. The icon column is content-sized
   so it sits tight against the text block, mirroring the reference.

   Three rows (1fr auto 1fr) let the icon+text pair sit in the middle
   row and stay vertically centred against the taller mockup card,
   which spans all three rows. Both icon and text use align-self:start
   inside row 2 so the icon's top edge stays flush with the heading. */
.rrPowD__rowInner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr);
	grid-template-rows: 1fr auto 1fr;
	column-gap: clamp(1rem, 2vw, 1.75rem);
	row-gap: var(--rr-space-6);
}

/* Default layout (mockup on the right): icon col 1, text col 2, mockup col 3 */
.rrPowD__col--icon   { grid-column: 1; grid-row: 2; align-self: start; }
.rrPowD__col--text   { grid-column: 2; grid-row: 2; align-self: start; }
.rrPowD__col--mockup { grid-column: 3; grid-row: 1 / span 3; align-self: stretch; }

/* Alternating layout — mockup on left, then icon, then text */
.rrPowD__row--mockup-left .rrPowD__rowInner {
	grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr);
}
.rrPowD__row--mockup-left .rrPowD__col--mockup { grid-column: 1; }
.rrPowD__row--mockup-left .rrPowD__col--icon   { grid-column: 2; }
.rrPowD__row--mockup-left .rrPowD__col--text   { grid-column: 3; }

/* Row with its own tinted background (e.g. Referral Programs panel).
   Full-bleed: breaks out of .rrPowD__wrap padding + .rrPowD__rows
   max-width so the colour reaches both viewport edges, while the
   inner 1180px grid stays centred. */
.rrPowD__row--has-bg {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
	border-radius: 0;
}
.rrPowD__row--has-bg .rrPowD__rowInner {
	max-width: 1180px;
	margin-inline: auto;
}

/* ===========================================================
   Column 1 — icon tile
   =========================================================== */
.rrPowD__col--icon {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
}

.rrPowD__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 16px;
	background: var(--rrpd-icon-bg);
	color: var(--rrpd-icon-color);
	flex-shrink: 0;
}
.rrPowD__icon svg { width: 32px; height: 32px; display: block; }

/* ===========================================================
   Column 2 — text + bullets
   =========================================================== */
.rrPowD__col--text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.rrPowD .rrPowD__rowTitle {
	font-size: clamp(1.25rem, .9rem + .6vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.25;
	margin: 0 0 var(--rr-space-3);
	color: var(--rrpd-heading);
}

.rrPowD .rrPowD__rowDesc {
	font-size: var(--rr-fs-sm);
	line-height: 1.55;
	margin: 0 0 var(--rr-space-5);
	color: var(--rrpd-muted);
	font-weight: 400;
	max-width: 420px;
}

.rrPowD__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rrPowD__bulletItem {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rrPowD__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--rrpd-check-color);
	background: transparent;
	flex-shrink: 0;
}
.rrPowD__check svg { width: 18px; height: 18px; display: block; }

.rrPowD .rrPowD__bullet {
	font-size: var(--rr-fs-sm);
	color: var(--rrpd-text);
	font-weight: 500;
	letter-spacing: -.005em;
	line-height: 1.4;
}

/* ===========================================================
   Right column — mockup card
   =========================================================== */
.rrPowD__col--mockup {
	min-width: 0;
}

.rrPowD__mockup {
	background: var(--rrpd-mockup-bg);
	border: 1px solid var(--rrpd-mockup-border);
	border-radius: var(--rr-radius-xl);
	box-shadow: var(--rrpd-mockup-shadow);
	padding: clamp(1.25rem, 2vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: var(--rr-space-5);
	transition: transform var(--rr-dur-base) var(--rr-ease-out),
	            box-shadow var(--rr-dur-base) var(--rr-ease-out);
}
.rrPowD__mockup:hover {
	transform: translateY(-2px);
}

.rrPowD__mockupTitle {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--rrpd-heading);
}

/* Outer grid: form area | preview side card */
.rrPowD__mockupBody {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(.875rem, 1.5vw, 1.25rem);
	align-items: center;
}

/* ----- Form area (left): own 2-col grid so --full spans BOTH columns ----- */
.rrPowD__formArea {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 14px;
	min-width: 0;
}

.rrPowD__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.rrPowD__field--full {
	grid-column: 1 / -1;
}

.rrPowD__fieldLabel {
	font-size: 11px;
	font-weight: 500;
	color: var(--rrpd-input-label);
	letter-spacing: 0;
	line-height: 1.2;
}

.rrPowD__fieldInput {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	background: var(--rrpd-input-bg);
	border: 1px solid var(--rrpd-input-border);
	border-radius: 8px;
	padding: 9px 11px;
	min-height: 38px;
}

.rrPowD__fieldValue {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--rrpd-input-text);
	letter-spacing: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rrPowD__fieldChev {
	display: inline-flex;
	color: var(--rrpd-input-label);
	flex-shrink: 0;
}

/* ----- Preview side card (right) ----- */
.rrPowD__preview {
	align-self: center;
	background: var(--rrpd-preview-bg);
	border: 1px solid var(--rrpd-preview-border);
	border-radius: 12px;
	box-shadow: var(--rrpd-preview-shadow);
	padding: 16px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	text-align: left;
}

.rrPowD__previewTitle {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--rrpd-heading);
	letter-spacing: -.005em;
	line-height: 1.2;
}

.rrPowD__previewBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--rrpd-icon-bg);
	color: var(--rrpd-icon-color);
	margin: 4px 0;
}
.rrPowD__previewBadge svg { width: 22px; height: 22px; display: block; }

.rrPowD__previewValue {
	font-size: 13px;
	font-weight: 600;
	color: var(--rrpd-heading);
	letter-spacing: -.005em;
	line-height: 1.3;
}

.rrPowD__previewBtn {
	margin-top: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rrpd-preview-btn-bg);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	padding: 9px 12px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(87, 63, 211, .25);
	text-align: center;
	width: 100%;
	min-height: 34px;
}

/* ===========================================================
   Referral mockup — alternate card layout
   Stats row · referral link with copy button · share icons
   =========================================================== */
.rrPowD__mockup--referral {
	gap: clamp(1.25rem, 2vw, 1.75rem);
	padding: clamp(1.5rem, 2.4vw, 2rem);
}

.rrPowD__mockup--referral .rrPowD__mockupTitle {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---- Stats row ---- */
.rrPowD__refStats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(.75rem, 1.5vw, 1.25rem);
}

.rrPowD__refStat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.rrPowD__refStatLabel {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--rrpd-muted);
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rrPowD__refStatValue {
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-weight: 800;
	color: var(--rrpd-heading);
	letter-spacing: -.02em;
	line-height: 1.15;
}

.rrPowD__refStatChange {
	font-size: 12px;
	font-weight: 600;
	color: #16A34A;
	letter-spacing: 0;
	line-height: 1.2;
}

/* ---- Referral link row ---- */
.rrPowD__refLink {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rrPowD__refLinkLabel {
	font-size: 13px;
	font-weight: 700;
	color: var(--rrpd-heading);
	letter-spacing: -.005em;
	line-height: 1.2;
}

.rrPowD__refLinkRow {
	display: flex;
	align-items: stretch;
	gap: 10px;
	min-width: 0;
}

.rrPowD__refLinkInput {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	background: var(--rrpd-input-bg);
	border: 1px solid var(--rrpd-input-border);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--rrpd-input-text);
	letter-spacing: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-height: 38px;
}

.rrPowD__refCopyBtn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--rrpd-accent-soft);
	color: var(--rrpd-accent);
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 0 14px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	min-height: 38px;
	min-width: 78px;
}
.rrPowD__refCopyIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.rrPowD__refCopyIcon svg { display: block; }

/* ---- Share row ---- */
.rrPowD__refShare {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rrPowD__refShareLabel {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--rrpd-muted);
	letter-spacing: 0;
	line-height: 1.2;
}

.rrPowD__refShareIcons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.rrPowD__refShareIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: rgba(11, 10, 20, .05);
	color: var(--rrpd-muted);
	flex-shrink: 0;
}
.rrPowD__refShareIcon svg { width: 15px; height: 15px; display: block; }

/* Brand-coloured share tiles */
.rrPowD__refShareIcon--facebook { background: #1877F2; color: #FFFFFF; }
.rrPowD__refShareIcon--twitter  { background: #1DA1F2; color: #FFFFFF; }
.rrPowD__refShareIcon--whatsapp { background: #25D366; color: #FFFFFF; }

/* Dark-mode share tile defaults */
html[data-theme="dark"] .rrPowD__refShareIcon,
.rrPowD--dark .rrPowD__refShareIcon {
	background: rgba(255, 255, 255, .06);
	color: var(--rrpd-input-label);
}
html[data-theme="dark"] .rrPowD__refShareIcon--facebook,
.rrPowD--dark .rrPowD__refShareIcon--facebook,
html[data-theme="dark"] .rrPowD__refShareIcon--twitter,
.rrPowD--dark .rrPowD__refShareIcon--twitter,
html[data-theme="dark"] .rrPowD__refShareIcon--whatsapp,
.rrPowD--dark .rrPowD__refShareIcon--whatsapp { color: #FFFFFF; }

/* ===========================================================
   VIP Tiers mockup — alternate card layout
   Card title · list of tier rows, each with a coloured circular
   icon badge, tier name, points range, discount, kebab menu.
   =========================================================== */
.rrPowD__mockup--vip {
	gap: clamp(1rem, 1.8vw, 1.5rem);
	padding: clamp(1.25rem, 2vw, 1.75rem);
}

.rrPowD__mockup--vip .rrPowD__mockupTitle {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.rrPowD__vipTiers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(.625rem, 1vw, .875rem);
}

.rrPowD__vipTier {
	display: grid;
	grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.3fr) auto auto;
	align-items: center;
	gap: clamp(.625rem, 1.2vw, 1rem);
	min-width: 0;
}

.rrPowD__vipTierIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--rr-radius-pill);
	background: var(--rrpd-icon-bg);
	color: #FFFFFF;
	flex-shrink: 0;
	box-shadow: 0 1px 2px rgba(11, 10, 20, .08);
}
.rrPowD__vipTierIcon svg { width: 16px; height: 16px; display: block; }

.rrPowD__vipTierName {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--rrpd-heading);
	letter-spacing: -.005em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rrPowD__vipTierRange {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--rrpd-muted);
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rrPowD__vipTierDiscount {
	font-size: 13px;
	font-weight: 700;
	color: var(--rrpd-heading);
	letter-spacing: -.005em;
	line-height: 1.2;
	white-space: nowrap;
	justify-self: end;
}

.rrPowD__vipTierMenu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--rrpd-muted);
	opacity: .7;
	flex-shrink: 0;
}
.rrPowD__vipTierMenu svg { display: block; }

/* Dark-mode tweaks — softer icon shadow, slightly more contrast */
html[data-theme="dark"] .rrPowD__vipTierIcon,
.rrPowD--dark .rrPowD__vipTierIcon {
	box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ===========================================================
   Coupons mockup — alternate card layout
   Card header (title + Create button) · filter tabs · list of
   coupon rows, each with a code, discount, usage count and an
   on/off toggle switch. Static — no hover state on the inner
   controls (button / tabs / toggles).
   =========================================================== */
.rrPowD__mockup--coupon {
	gap: clamp(1rem, 1.7vw, 1.35rem);
	padding: clamp(1.25rem, 2vw, 1.75rem);
}

/* ---- Header: title + Create Coupon button ---- */
.rrPowD__couponHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.rrPowD__mockup--coupon .rrPowD__mockupTitle {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.rrPowD__couponCta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rrpd-accent);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	padding: 9px 14px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(87, 63, 211, .25);
	white-space: nowrap;
}

/* ---- Filter tabs ---- */
.rrPowD__couponTabs {
	display: flex;
	align-items: flex-end;
	gap: clamp(1rem, 2.4vw, 1.75rem);
	border-bottom: 1px solid var(--rrpd-mockup-border);
}

.rrPowD__couponTab {
	position: relative;
	padding-bottom: 10px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--rrpd-muted);
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
}

.rrPowD__couponTab--active {
	color: var(--rrpd-accent);
	font-weight: 700;
}
.rrPowD__couponTab--active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--rrpd-accent);
	border-radius: 2px;
}

/* ---- Coupon rows ---- */
.rrPowD__couponList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.rrPowD__couponRow {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(.5rem, 1.4vw, 1rem);
	padding: 13px 0;
	border-bottom: 1px solid var(--rrpd-mockup-border);
}
.rrPowD__couponRow:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.rrPowD__couponCode {
	font-size: 13px;
	font-weight: 700;
	color: var(--rrpd-heading);
	letter-spacing: -.005em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rrPowD__couponDiscount,
.rrPowD__couponUsage {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--rrpd-muted);
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Toggle switch (static, on/off state only) ---- */
.rrPowD__couponToggle {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 34px;
	height: 19px;
	padding: 2px;
	border-radius: var(--rr-radius-pill);
	background: rgba(11, 10, 20, .18);
	flex-shrink: 0;
	justify-self: end;
}
.rrPowD__couponToggle--on {
	justify-content: flex-end;
	background: var(--rrpd-accent);
}

.rrPowD__couponToggleKnob {
	width: 15px;
	height: 15px;
	border-radius: var(--rr-radius-pill);
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(11, 10, 20, .25);
	flex-shrink: 0;
}

/* Dark-mode — lift the off-state track so it stays visible */
html[data-theme="dark"] .rrPowD__couponToggle,
.rrPowD--dark .rrPowD__couponToggle {
	background: rgba(255, 255, 255, .16);
}
html[data-theme="dark"] .rrPowD__couponToggle--on,
.rrPowD--dark .rrPowD__couponToggle--on {
	background: var(--rrpd-accent);
}

/* ===========================================================
   Image mockup — strips the card chrome (background/border/
   padding) so the artwork sits on the row's tinted panel with
   only a soft purple halo + drop shadow grounding it. Matches
   the hero's image presentation for visual consistency.
   =========================================================== */
.rrPowD__mockup--image {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
	overflow: visible;
}
.rrPowD__mockup--image:hover {
	transform: none;
}
.rrPowD__mockupHalo {
	position: absolute;
	inset: -8% -6%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(60% 55% at 50% 50%, rgba(139, 115, 255, .32) 0%, rgba(139, 115, 255, .1) 45%, transparent 75%);
	filter: blur(40px);
}
.rrPowD--dark .rrPowD__mockupHalo,
html[data-theme="dark"] .rrPowD--auto .rrPowD__mockupHalo {
	background:
		radial-gradient(60% 55% at 50% 50%, rgba(139, 115, 255, .42) 0%, rgba(87, 63, 211, .18) 45%, transparent 75%);
}
.rrPowD__mockupImg {
	position: relative;
	z-index: 1;
	max-width: 100%;
	height: auto;
	display: block;
	box-shadow: inset 0 0 0 1px rgba(87, 63, 211, .12);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
	filter:
		drop-shadow(0 24px 50px rgba(75, 58, 181, .22))
		drop-shadow(0 8px 20px rgba(11, 10, 20, .08));
	animation: rrPowD-img-float 8s ease-in-out infinite;
}
.rrPowD__mockup--image:hover .rrPowD__mockupImg {
	transform: translateY(-4px) scale(1.01);
}
.rrPowD--dark .rrPowD__mockupImg,
html[data-theme="dark"] .rrPowD--auto .rrPowD__mockupImg {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
	filter:
		drop-shadow(0 24px 50px rgba(0, 0, 0, .55))
		drop-shadow(0 8px 20px rgba(0, 0, 0, .35));
}

@keyframes rrPowD-img-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
	.rrPowD__mockupImg { animation: none; }
	.rrPowD__mockup--image:hover .rrPowD__mockupImg { transform: none; }
}

/* ===========================================================
   Analytics mockup — alternate card layout
   Card header (title + period select) · 4-up KPI stat row ·
   line/area chart with y-axis labels, gridlines and x-axis
   labels. Fully static — no hover state on the select, stats
   or chart.
   =========================================================== */
.rrPowD__mockup--analytics {
	gap: clamp(1rem, 1.8vw, 1.5rem);
	padding: clamp(1.25rem, 2vw, 1.75rem);
}

/* ---- Header: title + period select ---- */
.rrPowD__anHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.rrPowD__mockup--analytics .rrPowD__mockupTitle {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

/* "Demo" pill — flags the referral & analytics mockups as illustrative
   data. Sits inline next to the mockup title, matching the Hero
   widget's dashboard treatment for cross-widget visual consistency. */
.rrPowD__demo {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 8px 2px 7px;
	background: rgba(255, 176, 32, .14);
	border: 1px solid rgba(255, 176, 32, .35);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #B26A00;
	line-height: 1;
	white-space: nowrap;
	transform: translateY(-1px);
}
.rrPowD__demoDot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #FFB020;
	box-shadow: 0 0 0 2px rgba(255, 176, 32, .2);
	flex-shrink: 0;
}
.rrPowD--dark .rrPowD__demo,
html[data-theme="dark"] .rrPowD--auto .rrPowD__demo {
	background: rgba(255, 196, 84, .14);
	border-color: rgba(255, 196, 84, .35);
	color: #FFC454;
}

.rrPowD__anSelect {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--rrpd-input-bg);
	border: 1px solid var(--rrpd-input-border);
	border-radius: 8px;
	padding: 7px 11px;
	font-size: 12px;
	font-weight: 500;
	color: var(--rrpd-input-text);
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
}

.rrPowD__anSelectChev {
	display: inline-flex;
	align-items: center;
	color: var(--rrpd-input-label);
	flex-shrink: 0;
}
.rrPowD__anSelectChev svg { display: block; }

/* ---- KPI stat row ---- */
.rrPowD__anStats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(.5rem, 1.4vw, 1.125rem);
}

.rrPowD__anStat {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.rrPowD__anStatLabel {
	font-size: 11px;
	font-weight: 500;
	color: var(--rrpd-muted);
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rrPowD__anStatValue {
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 800;
	color: var(--rrpd-heading);
	letter-spacing: -.02em;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rrPowD__anStatChange {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--rrpd-an-positive);
	letter-spacing: 0;
	line-height: 1.2;
}

/* ---- Chart: y-axis rail · plot · x-axis rail ---- */
.rrPowD__anChart {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: var(--rrpd-an-plot-h) auto;
	column-gap: 10px;
	row-gap: 8px;
}

.rrPowD__anYAxis {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

.rrPowD__anYLabel {
	font-size: 10px;
	font-weight: 500;
	color: var(--rrpd-muted);
	letter-spacing: 0;
	line-height: 1;
}

.rrPowD__anPlot {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.rrPowD__anSvg {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--rrpd-accent);
	overflow: visible;
}

.rrPowD__anGrid {
	stroke: var(--rrpd-mockup-border);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.rrPowD__anArea { stroke: none; }

.rrPowD__anLine {
	stroke: var(--rrpd-accent);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.rrPowD__anXAxis {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	justify-content: space-between;
	gap: .25rem;
}

.rrPowD__anXLabel {
	font-size: 10px;
	font-weight: 500;
	color: var(--rrpd-muted);
	letter-spacing: 0;
	line-height: 1;
	white-space: nowrap;
}

/* ===========================================================
   More Features grid — compact icon-card grid that closes the
   section. Each card reuses the mockup card surface and the
   feature icon tile treatment from the Points & Rewards row.
   =========================================================== */
/* Full-bleed: the 8-card row breaks out of .rrPowD__wrap padding so it
   gets the site's full container width, rather than being capped to the
   narrower 1180px feature-row column. That extra width is what keeps
   each card wide enough for a tidy two-line label. */
.rrPowD__more {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-top: clamp(3rem, 6vw, 5.5rem);
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.rrPowD .rrPowD__moreHead {
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
	text-align: center;
	font-size: clamp(1.375rem, 1rem + 1.1vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: var(--rr-lh-snug);
	color: var(--rrpd-heading);
	text-wrap: balance;
}

.rrPowD__moreGrid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--rr-container);
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: clamp(.5rem, .9vw, .875rem);
}

.rrPowD__moreCard {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: clamp(1.1rem, 1.6vw, 1.4rem) clamp(.4rem, .7vw, .625rem);
	background: var(--rrpd-mockup-bg);
	border: 1px solid var(--rrpd-mockup-border);
	border-radius: var(--rr-radius-xl);
	box-shadow: var(--rrpd-mockup-shadow);
	transition: transform var(--rr-dur-base) var(--rr-ease-out),
	            box-shadow var(--rr-dur-base) var(--rr-ease-out);
}
.rrPowD__moreCard:hover {
	transform: translateY(-3px);
}

.rrPowD__moreIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--rrpd-icon-bg);
	color: var(--rrpd-icon-color);
	flex-shrink: 0;
}
.rrPowD__moreIcon svg { width: 24px; height: 24px; display: block; }

/* Label tuned so multi-word names settle on two lines; min-height
   reserves both lines so every card keeps an identical height. */
.rrPowD .rrPowD__moreLabel {
	min-height: 2.7em;
	font-size: .78125rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.012em;
	color: var(--rrpd-heading);
	text-wrap: balance;
}

/* ===========================================================
   Responsive
   ----- Desktop ≥960px : 3 columns (icon | text | mockup)
   ----- 960 ≥ vp > 640 : icon + text in row, mockup wraps below
   ----- ≤640px         : everything stacks (icon → text → mockup)
   =========================================================== */

/* More Features — 8 cards only stay readable on wide desktops; below
   that, fold to a 4-up grid (two rows) so cards never get squeezed. */
@media (max-width: 1200px) {
	.rrPowD__moreGrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(.75rem, 1.6vw, 1.25rem);
		max-width: 720px;
	}
}

/* Tablet — keep icon+text in row, drop the mockup beneath. */
@media (max-width: 960px) {
	.rrPowD__rowInner,
	.rrPowD__row--mockup-left .rrPowD__rowInner {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto;
	}
	.rrPowD__col--icon   { grid-column: 1; grid-row: 1; align-self: start; }
	.rrPowD__col--text   { grid-column: 2; grid-row: 1; align-self: start; }
	.rrPowD__col--mockup { grid-column: 1 / -1; grid-row: 2; }

	.rrPowD__rowDesc { max-width: none; }

	.rrPowD__row--has-bg {
		padding-block: clamp(2rem, 6vw, 3rem);
		padding-inline: clamp(1rem, 4vw, 1.75rem);
	}
}

/* Below tablet — tighten padding + heading */
@media (max-width: 720px) {
	.rrPowD__wrap {
		padding: clamp(2.5rem, 8vw, 4rem) clamp(1rem, 5vw, 1.5rem);
	}
	.rrPowD__head {
		margin-bottom: var(--rr-space-8);
	}
	.rrPowD .rrPowD__title {
		font-size: clamp(1.625rem, 5.5vw, 2.25rem);
	}
	.rrPowD__rows {
		gap: clamp(2.5rem, 10vw, 4rem);
	}
}

/* Phone — full vertical stack and collapse mockup body. */
@media (max-width: 640px) {
	.rrPowD__rowInner,
	.rrPowD__row--mockup-left .rrPowD__rowInner {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.rrPowD__col--icon,
	.rrPowD__col--text,
	.rrPowD__col--mockup {
		grid-column: 1;
		grid-row: auto;
	}
	.rrPowD__col--icon { justify-content: flex-start; }

	.rrPowD__mockupBody {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.rrPowD__preview {
		align-self: stretch;
	}
}

/* Very small — stack the form fields one per row. */
@media (max-width: 380px) {
	.rrPowD__formArea {
		grid-template-columns: 1fr;
	}
	.rrPowD__field--full {
		grid-column: 1 / -1;
	}
}

/* Phone — keep the 3 referral stats compact and let the link row
   stack so the Copy button doesn't squeeze the URL off-screen. */
@media (max-width: 520px) {
	.rrPowD__refStats {
		gap: .75rem;
	}
	.rrPowD__refStatValue {
		font-size: 1.125rem;
	}
	.rrPowD__refLinkRow {
		flex-direction: column;
		gap: 8px;
	}
	.rrPowD__refCopyBtn {
		width: 100%;
	}

	/* VIP tier rows — drop the range column so name + discount stay
	   on a single line and don't squeeze the badge. */
	.rrPowD__vipTier {
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		gap: .625rem;
	}
	.rrPowD__vipTierRange {
		grid-column: 1 / -1;
		grid-row: 2;
		padding-left: 42px;
		margin-top: -2px;
	}

	/* Coupon rows — code + discount + toggle stay in line, the usage
	   count drops to its own line so nothing gets squeezed. */
	.rrPowD__couponRow {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		gap: .25rem .625rem;
	}
	.rrPowD__couponUsage {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	/* Analytics — 4 KPI stats wrap to a 2×2 grid, chart shortens. */
	.rrPowD {
		--rrpd-an-plot-h: 144px;
	}
	.rrPowD__anStats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .875rem 1rem;
	}

	/* More Features — drop to a 2-up grid on phones. */
	.rrPowD__moreGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Reduced-motion — no hover lift */
@media (prefers-reduced-motion: reduce) {
	.rrPowD__mockup:hover,
	.rrPowD__moreCard:hover { transform: none; }
}