/* ==========================================================================
   DGN premium design layer (Foundation 5 sites)
   Loaded after dgn-ux.css by includes/DGN_UX.cfm only for a premium brand ([DESIGN] Layer=premium in the brand INI)
   or a preview (?dgnui=premium). Every rule sits under body[data-ui="premium"], so the classic look is untouched and the
   rules win over page stylesheets linked later (shop.css, memberhome.css). Text is never added, removed or re-cased here.
   Server-printed variables (DGN_UX.cfm): --dgn-site, --dgn-site-rgb, --dgn-site-ink, --dgn-site-on-dark, --dgn-site-on-light.
   Shared rules only: anything scoped to one brand (body[data-brand="..."]) lives in that brand's own X:\<Site>\scripts\Premium.css,
   which DGN_UX.cfm links right after this file.
   ========================================================================== */

/* ---- P0. Tokens ---- */
body[data-ui="premium"] {
	--dgn-r-s: 8px;
	--dgn-r-m: 12px;
	--dgn-r-l: 18px;
	--dgn-r-pill: 999px;
	--dgn-ease: cubic-bezier(.2, .7, .2, 1);
	--dgn-t-fast: 160ms;
	--dgn-t-mid: 280ms;
	--dgn-t-slow: 600ms;
	--dgn-zoom: 1.06;
	--dgn-blur: 14px;
	--dgn-glow-k: 1;
	/* brand accent (default: the INI SiteColor); per-brand blocks below may set their own from the brand's Base.css */
	--dgn-accent: var(--dgn-site);
	--dgn-accent-rgb: var(--dgn-site-rgb);
	--dgn-tint-rgb: 16, 14, 18;
}
/* dark scheme surfaces */
body[data-ui="premium"][data-scheme="dark"] {
	--dgn-surface-1: rgba(var(--dgn-tint-rgb), .72);
	--dgn-surface-2: rgba(var(--dgn-tint-rgb), .86);
	--dgn-line: rgba(255, 255, 255, .12);
	--dgn-line-brand: rgba(var(--dgn-accent-rgb), .55);
	--dgn-text: #f2f2f4;
	--dgn-text-2: #c9c9cf;
	--dgn-on-surface: var(--dgn-site-on-dark);
	--dgn-elev-2: 0 4px 14px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .5);
	--dgn-elev-3: 0 12px 40px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .5);
	--dgn-glow-1: 0 0 calc(14px * var(--dgn-glow-k)) rgba(var(--dgn-accent-rgb), .35);
	--dgn-glow-2: 0 0 calc(28px * var(--dgn-glow-k)) rgba(var(--dgn-accent-rgb), .45);
}
/* light scheme surfaces (SIV, RLC) */
body[data-ui="premium"][data-scheme="light"] {
	--dgn-tint-rgb: 255, 255, 255;
	--dgn-surface-1: rgba(255, 255, 255, .86);
	--dgn-surface-2: rgba(255, 255, 255, .94);
	--dgn-line: rgba(17, 17, 17, .12);
	--dgn-line-brand: rgba(var(--dgn-accent-rgb), .6);
	--dgn-text: #1a1a1f;
	--dgn-text-2: #4a4a52;
	--dgn-on-surface: var(--dgn-site-on-light);
	--dgn-elev-2: 0 4px 14px rgba(20, 20, 40, .14), 0 1px 3px rgba(20, 20, 40, .1);
	--dgn-elev-3: 0 12px 40px rgba(20, 20, 40, .2), 0 2px 6px rgba(20, 20, 40, .12);
	--dgn-glow-1: 0 0 calc(14px * var(--dgn-glow-k)) rgba(var(--dgn-accent-rgb), .25);
	--dgn-glow-2: 0 0 calc(28px * var(--dgn-glow-k)) rgba(var(--dgn-accent-rgb), .32);
}

/* ---- P1. Focus ring (keyboard only) ---- */
body[data-ui="premium"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--dgn-on-surface);
	outline-offset: 2px;
}

/* ---- P4. Section titles: brand font and colour kept, a short brand ornament under the title, soft glow on dark ---- */
body[data-ui="premium"][data-scheme="dark"] :is(.TextHomeTop, .TextHomeTopHome) {
	text-shadow: 0 0 calc(18px * var(--dgn-glow-k)) rgba(var(--dgn-accent-rgb), .32);
}
body[data-ui="premium"] .TextHomeTop:not(:has(+ hr))::after {
	content: "";
	display: block;
	width: var(--dgn-ornament-w, 84px);
	height: var(--dgn-ornament-h, 4px);
	margin: 8px 0 2px;
	background: var(--dgn-ornament, linear-gradient(90deg, var(--dgn-accent), rgba(var(--dgn-accent-rgb), 0)));
	clip-path: var(--dgn-ornament-clip, none);
	border-radius: var(--dgn-ornament-r, 0);
	box-shadow: var(--dgn-ornament-glow, none);
}
/* centred titles get a centred ornament */
body[data-ui="premium"] :is(.text-center.TextHomeTop, .text-center > .TextHomeTop, .text-center > div > .TextHomeTop, .TextHomeTop[style*="center"], [style*="text-align: center"] > .TextHomeTop, [style*="text-align:center"] > .TextHomeTop, [align="center"] > .TextHomeTop)::after {
	margin-left: auto;
	margin-right: auto;
}
/* the month line under "Coming Soon" (line-height .8 inline) keeps clear of the ornament */
body[data-ui="premium"] .TextHomeTopblue {
	padding-top: 6px;
}
/* the home intro title already has its own underline (LAB / ABC / AID Base.css): same ornament look */
body[data-ui="premium"] .TextHomeTopHome::after {
	border: 0;
	height: 3px;
	width: 10em;
	max-width: 100%;
	margin-top: 6px;
	background: linear-gradient(90deg, var(--dgn-accent), rgba(var(--dgn-accent-rgb), .35) 60%, rgba(var(--dgn-accent-rgb), 0));
}

/* ---- P5. Content cards: rounded, softer brand frame, glow on hover / keyboard focus, picture zoom ---- */
body[data-ui="premium"] :is(.PicBox, .VideoBoxMembers, .VideoBox, .PicturesBox) {
	position: relative;
	transition: border-color var(--dgn-t-mid) var(--dgn-ease);
}
/* the glow is a pseudo layer whose opacity animates (cheap); the card itself never moves, so the info pop-ups keep their stacking */
body[data-ui="premium"] :is(.PicBox, .VideoBoxMembers, .VideoBox, .PicturesBox)::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dgn-t-mid) var(--dgn-ease);
}
body[data-ui="premium"] :is(.PicBox, .VideoBoxMembers, .VideoBox, .PicturesBox):is(:hover, :focus-within)::before {
	opacity: 1;
}
body[data-ui="premium"] :is(.PicBox, .PicturesBox) :is(.ImgBoxHome, a.reviewsAlink) {
	overflow: hidden;
	border-radius: calc(var(--dgn-r-m) - 4px);
}
body[data-ui="premium"] :is(.PicBox, .PicturesBox) :is(.ImgBoxHome, a.reviewsAlink) img {
	transition: transform var(--dgn-t-slow) var(--dgn-ease);
}
@media (hover: hover) and (pointer: fine) {
	body[data-ui="premium"] :is(.PicBox, .PicturesBox):is(:hover, :focus-within) :is(.ImgBoxHome, a.reviewsAlink) img {
		transform: scale(var(--dgn-zoom));
	}
}

/* ---- P6. Glass panels: home intro, model intro ---- */
body[data-ui="premium"] :is(.PicturesBoxHome, .PicturesBox:has(> h1.TextHomeTop)) {
	background: var(--dgn-surface-1) !important;
	border: 1px solid var(--dgn-line);
	border-radius: var(--dgn-r-l);
	box-shadow: var(--dgn-elev-3), inset 0 1px 0 rgba(255, 255, 255, .06);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	@media (min-width: 768px) {
		body[data-ui="premium"][data-scheme="dark"] .PicturesBoxHome {
			-webkit-backdrop-filter: blur(var(--dgn-blur)) saturate(1.2);
			backdrop-filter: blur(var(--dgn-blur)) saturate(1.2);
		}
}
}

/* ---- P9. Pagination: round pills, the current page in the brand colour ---- */
body[data-ui="premium"] ul.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	height: auto;
	margin-left: 0;
}
body[data-ui="premium"] ul.pagination li {
	float: none;
	display: block;
	margin: 0;
	height: auto;
}
body[data-ui="premium"] ul.pagination li a,
body[data-ui="premium"] ul.pagination li button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--dgn-line);
	border-radius: var(--dgn-r-pill);
	background: var(--dgn-surface-2);
	color: var(--dgn-text);
	font-family: var(--dgn-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-shadow: none;
	transition: border-color var(--dgn-t-fast) var(--dgn-ease), color var(--dgn-t-fast) var(--dgn-ease), box-shadow var(--dgn-t-fast) var(--dgn-ease);
}
body[data-ui="premium"] ul.pagination li:not(.current) a:hover,
body[data-ui="premium"] ul.pagination li:not(.current) a:focus-visible {
	border-color: var(--dgn-line-brand);
	color: var(--dgn-on-surface);
	background: var(--dgn-surface-2);
	box-shadow: var(--dgn-glow-1);
}
body[data-ui="premium"] ul.pagination li.current a,
body[data-ui="premium"] ul.pagination li.current a:hover {
	border-color: transparent;
	background: var(--dgn-accent);
	color: var(--dgn-accent-ink, var(--dgn-site-ink));
	box-shadow: var(--dgn-glow-1);
}
/* on page 1 the « arrow is marked "current" (nothing before it): shown as a quiet pill, not as the current page */
body[data-ui="premium"] ul.pagination li.current:first-child:not(:last-child) a {
	border-color: var(--dgn-line);
	background: var(--dgn-surface-2);
	color: var(--dgn-text-2);
	box-shadow: none;
	cursor: default;
}
/* "unavailable" is still clickable on these pages: no dimming */
body[data-ui="premium"] ul.pagination li.unavailable a {
	opacity: 1;
	cursor: pointer;
}
/* LAB / ABC / AID draw two corner brackets on the home intro panel: they sit in the panel's own corners
   (the glass blur makes the panel their containing block, so they are placed against it on every width) */
body[data-ui="premium"] .PicturesBoxHome {
	position: relative;
}
body[data-ui="premium"] .PicturesBoxHome::before {
	top: 10px;
	right: 10px;
	width: 18px;
	height: 18px;
}
body[data-ui="premium"] .PicturesBoxHome::after {
	bottom: 10px;
	left: 10px;
	width: 18px;
	height: 18px;
}

/* ---- P10. Buttons keep their brand backgrounds and gain a bevel, a soft lift and a brand glow ---- */
body[data-ui="premium"] :is(.buttonDGNMiddle, .buttonDGN, .billPayButtons, .billPayButtonsLite, .tributeButtons):not(.postfix) {
	border-radius: 10px;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .1));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 6px rgba(0, 0, 0, .3);
	transition: transform var(--dgn-t-fast) var(--dgn-ease), box-shadow var(--dgn-t-fast) var(--dgn-ease), filter var(--dgn-t-fast) var(--dgn-ease);
}
body[data-ui="premium"] .buttonDGNMiddle.dgn-cta {
	border-radius: 14px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 3px rgba(var(--dgn-accent-rgb), .35), var(--dgn-glow-2), 0 8px 20px rgba(0, 0, 0, .35);
}
@media (hover: hover) and (pointer: fine) {
	body[data-ui="premium"] :is(.buttonDGNMiddle, .buttonDGN, .billPayButtons, .billPayButtonsLite, .tributeButtons):not(.postfix):hover {
		transform: translateY(-1px);
		filter: brightness(1.06);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px rgba(0, 0, 0, .35), var(--dgn-glow-1);
	}
	body[data-ui="premium"] .buttonDGNMiddle.dgn-cta:hover {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 3px rgba(var(--dgn-accent-rgb), .5), var(--dgn-glow-2), 0 10px 24px rgba(0, 0, 0, .4);
	}
}
body[data-ui="premium"] :is(.buttonDGNMiddle, .buttonDGN, .billPayButtons, .billPayButtonsLite, .tributeButtons):not(.postfix):active {
	transform: translateY(0);
	filter: brightness(.96);
}

/* ---- P10. Form fields: porcelain inputs, brand focus ring ---- */
body[data-ui="premium"] :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], select, textarea):not(.chosen-search-input) {
	border: 1px solid rgba(17, 17, 17, .18);
	border-radius: var(--dgn-r-s);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
	transition: border-color var(--dgn-t-fast) var(--dgn-ease), box-shadow var(--dgn-t-fast) var(--dgn-ease);
}
body[data-ui="premium"] :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], select):not(.chosen-search-input) {
	min-height: 44px;
}
body[data-ui="premium"] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus {
	border-color: var(--dgn-site-on-light);
	box-shadow: 0 0 0 3px rgba(var(--dgn-accent-rgb), .3);
	outline: none;
}
/* search pill: the field and its button stay one rounded unit */
body[data-ui="premium"] .postfix-round .button.postfix {
	min-height: 44px;
}

/* ---- P8. Description pop-ups on the cards: dark glass, brand edge, pop-in ---- */
body[data-ui="premium"] .info-popup {
	background: rgba(22, 22, 26, .94) !important;
	border: 1px solid var(--dgn-line-brand);
	border-radius: var(--dgn-r-m) !important;
	box-shadow: var(--dgn-elev-3), var(--dgn-glow-1) !important;
	color: #f2f2f4 !important;
	line-height: 1.5;
	transform-origin: 50% 0;
	animation: dgn-pop var(--dgn-t-mid) var(--dgn-ease);
}
body[data-ui="premium"] .info-popup .fi-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	font-size: 16px;
}
@keyframes dgn-pop {
	from { opacity: 0; transform: translateY(-4px) scale(.98); }
	to { opacity: 1; transform: none; }
}

/* ---- P2. Header: logo glow, desktop menu as a centred glass capsule, JOIN as a brand pill ---- */
@media (min-width: 768px) {
	body[data-ui="premium"] #contentMenu .MainMenuLink {
		clear: both; /* the capsule is a flex box (its own formatting context): without this it squeezes beside the floated logo column at some tablet widths */
	}
	body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink,
	body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink:hover {
		transition: color var(--dgn-t-fast) var(--dgn-ease), background-color var(--dgn-t-fast) var(--dgn-ease);
	}
}
/* sticky quick menu and the drawer: dark glass on every scheme (their links are light), brand hairline */
body[data-ui="premium"] .dgn-sticky {
	background: rgba(14, 14, 16, .8);
	border-bottom: 0;
	box-shadow: inset 0 -2px 0 rgba(var(--dgn-accent-rgb), .9), 0 8px 24px rgba(0, 0, 0, .35);
}
body[data-ui="premium"] .dgn-drawer__panel {
	background: rgba(18, 18, 22, .9);
	border-right: 0;
	box-shadow: inset -3px 0 0 var(--dgn-accent), 12px 0 40px rgba(0, 0, 0, .5);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	body[data-ui="premium"] .dgn-sticky {
		background: rgba(14, 14, 16, .68);
		-webkit-backdrop-filter: blur(var(--dgn-blur)) saturate(1.4);
		backdrop-filter: blur(var(--dgn-blur)) saturate(1.4);
	}
	body[data-ui="premium"] .dgn-drawer__panel {
		background: rgba(18, 18, 22, .8);
		-webkit-backdrop-filter: blur(var(--dgn-blur)) saturate(1.3);
		backdrop-filter: blur(var(--dgn-blur)) saturate(1.3);
	}
}
body[data-ui="premium"] .dgn-sticky a.dgn-sticky__link[aria-current="page"],
body[data-ui="premium"] .dgn-drawer a.dgn-drawer__link[aria-current="page"] {
	box-shadow: inset 0 -2px 0 var(--dgn-accent);
}

/* ---- P3. Home hero (home.cfm .video-banner): vignette, glowing Join Now, glass points strip;
        the headline, Join Now and the points are shown on every width (the classic page hides them below 1200px) ---- */
body[data-ui="premium"] .video-banner .video-here {
	position: relative;
}
body[data-ui="premium"] .video-banner .video-here::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 75% 70% at 50% 45%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .5));
}
body[data-ui="premium"] .video-banner .video-content :is(h1, h2) {
	text-shadow: 0 2px 14px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .8);
}
body[data-ui="premium"] .video-banner .video-content .join-now-btn a {
	color: var(--dgn-site-on-dark);
	background: rgba(10, 10, 12, .72);
	border: 1px solid rgba(var(--dgn-accent-rgb), .7);
	border-radius: 18px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--dgn-glow-2), 0 10px 30px rgba(0, 0, 0, .45);
	transition: background-color var(--dgn-t-mid) var(--dgn-ease), color var(--dgn-t-mid) var(--dgn-ease), transform var(--dgn-t-fast) var(--dgn-ease);
	animation: dgn-hero-glow 3.2s ease-in-out infinite;
}
body[data-ui="premium"] .video-banner .video-content .join-now-btn a:is(:hover, :focus-visible) {
	color: var(--dgn-site-ink);
	background: var(--dgn-accent);
	transform: translateY(-1px);
}
@keyframes dgn-hero-glow {
	0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 calc(18px * var(--dgn-glow-k)) rgba(var(--dgn-accent-rgb), .35), 0 10px 30px rgba(0, 0, 0, .45); }
	50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 calc(34px * var(--dgn-glow-k)) rgba(var(--dgn-accent-rgb), .6), 0 10px 30px rgba(0, 0, 0, .45); }
}
body[data-ui="premium"] .video-banner .video-points {
	/* above the video: .video-here is positioned in premium (for the vignette) and comes later in the markup, so without a
	   z-index the video covered this strip wherever the video is as tall as the banner (wide screens) */
	z-index: 2;
	background: rgba(var(--dgn-tint-rgb), .5);
	border-top: 1px solid rgba(var(--dgn-accent-rgb), .45);
	bottom: 0;
}
body[data-ui="premium"][data-scheme="light"] .video-banner .video-points {
	background: rgba(12, 12, 16, .5);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	body[data-ui="premium"] .video-banner .video-points {
		-webkit-backdrop-filter: blur(var(--dgn-blur)) saturate(1.2);
		backdrop-filter: blur(var(--dgn-blur)) saturate(1.2);
	}
}
body[data-ui="premium"] .video-banner .video-points li {
	border-right-color: rgba(255, 255, 255, .16);
}
body[data-ui="premium"] .video-banner .video-points li:last-child {
	border-right: 0;
}
/* 768-1199: over the video */
@media (max-width: 1199.98px) {
	body[data-ui="premium"] .video-banner .video-content.d-none,
	body[data-ui="premium"] .video-banner .video-points.d-none {
		display: block !important;
	}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
	/* the banner is as tall as the video (its 450px minimum left a black band under wide cover videos); the points follow it */
	body[data-ui="premium"] .video-banner { display: flex; flex-direction: column; min-height: 0; }
	body[data-ui="premium"] .video-banner .video-here { order: 0; }
	body[data-ui="premium"] .video-banner .video-here video { display: block; min-height: 250px; object-fit: cover; }
	body[data-ui="premium"] .video-banner .video-points { order: 1; position: static; }
	body[data-ui="premium"] .video-banner .video-content { top: 7%; }
	body[data-ui="premium"] .video-banner .video-content h1 { padding-left: 32px; padding-right: 32px; }
	body[data-ui="premium"] .video-banner .video-content h2 { padding-left: 40px; padding-right: 40px; }
	body[data-ui="premium"] .video-banner .video-points .centerwrap { width: 100%; max-width: 100%; }
	body[data-ui="premium"] .video-banner .video-points .video_row { padding-left: 12px !important; padding-right: 12px !important; margin: 0; }
	body[data-ui="premium"] .video-banner .video-points li { font-size: 14px; line-height: 1.3; margin: 8px 0; padding: 0 6px; }
}
/* below 768: the video first, then the headline and Join Now on a glass card, then the points in two columns */
@media (max-width: 767.98px) {
	body[data-ui="premium"] .video-banner {
		display: flex;
		flex-direction: column;
		background: transparent;
	}
	body[data-ui="premium"] .video-banner .video-here { order: 0; background: #000; }
	body[data-ui="premium"] .video-banner .video-content {
		order: 1;
		position: relative;
		top: auto;
		width: auto;
		margin: -28px 12px 0;
		padding: 18px 14px 20px;
		background: rgba(var(--dgn-tint-rgb), .82);
		border: 1px solid var(--dgn-line);
		border-radius: var(--dgn-r-l);
		box-shadow: var(--dgn-elev-3);
		z-index: 2;
	}
	body[data-ui="premium"][data-scheme="light"] .video-banner .video-content {
		background: rgba(18, 18, 22, .88);
	}
	body[data-ui="premium"] .video-banner .video-content h1 { padding-left: 0; padding-right: 0; font-size: 20px; }
	body[data-ui="premium"] .video-banner .video-content h2 { font-size: 15px; margin-top: 6px !important; }
	body[data-ui="premium"] .video-banner .video-points {
		order: 2;
		position: static;
		margin: 12px 12px 4px;
		width: auto;
		border: 1px solid var(--dgn-line);
		border-radius: var(--dgn-r-m);
		background: rgba(var(--dgn-tint-rgb), .82);
	}
	body[data-ui="premium"][data-scheme="light"] .video-banner .video-points {
		background: rgba(18, 18, 22, .88);
	}
	body[data-ui="premium"] .video-banner .video-points .centerwrap { width: 100%; max-width: 100%; }
	body[data-ui="premium"] .video-banner .video-points .video_row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 0;
		padding: 4px 0 !important;
	}
	body[data-ui="premium"] .video-banner .video-points li {
		font-size: 14px;
		line-height: 1.3;
		margin: 0;
		padding: 8px 8px;
		border-right: 0;
	}
	body[data-ui="premium"] .video-banner .video-points li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .16); }
	body[data-ui="premium"] .video-banner .video-points li:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
}

/* ---- P14. Footer: gradient hairline on top, links underline on hover ---- */
body[data-ui="premium"] #wrapper2 {
	border-top: 1px solid transparent;
	border-image: linear-gradient(90deg, rgba(var(--dgn-accent-rgb), 0), rgba(var(--dgn-accent-rgb), .8), rgba(var(--dgn-accent-rgb), 0)) 1 0 0 0;
}
body[data-ui="premium"] #wrapper2 .footerlink a {
	background: linear-gradient(currentColor, currentColor) no-repeat 50% 100% / 0 1px;
	transition: background-size var(--dgn-t-mid) var(--dgn-ease), color var(--dgn-t-fast) var(--dgn-ease);
}
body[data-ui="premium"] #wrapper2 .footerlink a:is(:hover, :focus-visible) {
	background-size: 100% 1px;
}

/* ---- P5b. Video cards: the poster always fills a 16:9 frame (no grey #777 box when the player has not started or the file
        is missing); works with the production video.js fluid player too (its own padding-top stays, box-sizing is border-box) ---- */
body[data-ui="premium"] .VideoBoxMembers > :is(div[style*="#777"], div:has(> video, > .video-js)) {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: 0;
	background: #0e0e10 !important;
}
body[data-ui="premium"] .VideoBoxMembers > :is(div[style*="#777"], div:has(> video, > .video-js)) > :is(video, .video-js) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	background-color: transparent;
}
body[data-ui="premium"] .VideoBoxMembers .vjs-poster {
	background-size: cover;
}
body[data-ui="premium"] .VideoBoxMembers .video-js .vjs-big-play-button {
	top: 50%;
	left: 50%;
	margin: -32px 0 0 -32px;
}
@media (max-width: 640px) {
	body[data-ui="premium"] .VideoBoxMembers .video-js .vjs-big-play-button {
		width: 44px;
		height: 44px;
		margin: -22px 0 0 -22px;
		font-size: 26px;
		line-height: 40px;
	}
}

/* ---- P6. Panels: login box, side boxes in the shop ---- */
body[data-ui="premium"] :is(.MambLogBox, .TextBoxLikePicture) {
	background-color: var(--dgn-surface-1);
	border: 1px solid var(--dgn-line);
	border-radius: var(--dgn-r-l);
	box-shadow: inset 0 3px 0 rgba(var(--dgn-accent-rgb), .85), var(--dgn-elev-2);
}

/* ---- P7. Store panels (shop.cfm, home): each store keeps its own pastel; rounded, lifted, a brand line on top ---- */
body[data-ui="premium"] .row.rowpad {
	border-radius: var(--dgn-r-l) !important;
	border: 1px solid rgba(255, 255, 255, .28);
	box-shadow: inset 0 3px 0 rgba(var(--dgn-accent-rgb), .9), var(--dgn-elev-3);
}
/* blue info boxes (mall directory, help box) become brand panels with link chips */
body[data-ui="premium"] :is(.MallMenu, .BlueAdText, .SupportMenuLinks) {
	background: var(--dgn-surface-2) !important;
	color: var(--dgn-text) !important;
	border: 1px solid var(--dgn-line-brand);
	border-radius: var(--dgn-r-l);
	box-shadow: var(--dgn-elev-2);
}
body[data-ui="premium"] :is(.MallMenu, .BlueAdText, .SupportMenuLinks) a {
	color: var(--dgn-on-surface) !important;
}
body[data-ui="premium"] .MallMenu hr {
	border-color: var(--dgn-line);
}
body[data-ui="premium"] .MallMenu > .columns > a {
	display: inline-block;
	box-sizing: border-box;
	margin: 3px;
	padding: 4px 12px;
	border: 1px solid var(--dgn-line);
	border-radius: var(--dgn-r-pill);
	color: var(--dgn-text) !important;
	transition: border-color var(--dgn-t-fast) var(--dgn-ease), color var(--dgn-t-fast) var(--dgn-ease);
}
body[data-ui="premium"] .MallMenu > .columns > a:is(:hover, :focus-visible) {
	border-color: var(--dgn-line-brand);
	color: var(--dgn-on-surface) !important;
}
@media (max-width: 1024px) {
	body[data-ui="premium"] .MallMenu > .columns > a {
		flex-basis: calc(50% - 6px);
		text-align: center;
	}
}

/* ---- P11. Dialogs: one rounded, lifted look (their own colours stay); blurred page behind ---- */
body[data-ui="premium"] :is(.reveal-modal, .reveal, .jconfirm .jconfirm-box, .jBox-container) {
	border-radius: var(--dgn-r-l) !important;
	box-shadow: var(--dgn-elev-3), 0 0 0 1px rgba(var(--dgn-accent-rgb), .35) !important;
}
body[data-ui="premium"] :is(.reveal-modal-bg, .reveal-overlay, .jconfirm .jconfirm-bg, .jBox-overlay) {
	background-color: rgba(8, 8, 10, .62) !important;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	body[data-ui="premium"] :is(.reveal-modal-bg, .reveal-overlay, .jconfirm .jconfirm-bg, .jBox-overlay) {
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}
}
body[data-ui="premium"] .reveal-modal .close-reveal-modal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	line-height: 1;
}

/* ---- P12. Search / games side panels: the pull tab in the brand colour (it was a fixed red on every brand) ---- */
body[data-ui="premium"] :is(.customizer, .gamemizer) a:is(.customizer-toggle, .gamemizer-toggle) {
	color: var(--dgn-accent-ink, var(--dgn-site-ink));
	box-shadow: var(--dgn-glow-1), -4px 4px 14px rgba(0, 0, 0, .3);
}
body[data-ui="premium"] :is(.customizer, .gamemizer).open {
	box-shadow: -18px 0 50px rgba(0, 0, 0, .4), inset 3px 0 0 var(--dgn-accent);
}

/* ---- P13. Video player: round brand play button, brand progress and volume, soft control bar ---- */
body[data-ui="premium"] .video-js .vjs-big-play-button {
	width: 64px;
	height: 64px;
	margin-top: -32px;
	margin-left: -32px;
	font-size: 40px;
	line-height: 60px;
	border: 2px solid rgba(255, 255, 255, .9);
	border-radius: 50%;
	background-color: rgba(var(--dgn-accent-rgb), .82);
	color: var(--dgn-accent-ink, var(--dgn-site-ink));
	box-shadow: var(--dgn-glow-2), 0 6px 18px rgba(0, 0, 0, .45);
	transition: transform var(--dgn-t-fast) var(--dgn-ease), background-color var(--dgn-t-fast) var(--dgn-ease);
}
body[data-ui="premium"] .video-js:not(.vjs-big-play-centered) .vjs-big-play-button {
	margin: 0;
}
body[data-ui="premium"] .video-js:hover .vjs-big-play-button,
body[data-ui="premium"] .video-js .vjs-big-play-button:focus {
	background-color: var(--dgn-accent);
	transform: scale(1.06);
}
body[data-ui="premium"] .video-js .vjs-control-bar {
	background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .25) 70%, rgba(0, 0, 0, 0));
}
body[data-ui="premium"] .video-js :is(.vjs-play-progress, .vjs-volume-level) {
	background-color: var(--dgn-accent);
	color: var(--dgn-accent);
}
body[data-ui="premium"] .video-js .vjs-slider {
	background-color: rgba(255, 255, 255, .25);
}
body[data-ui="premium"] .video-js .vjs-load-progress div {
	background: rgba(255, 255, 255, .3);
}

/* ---- P15. Member account box (.ControlBar, includes/Members_ControlPanel.cfm): on dark schemes it is brand glass like the
   other premium panels instead of a white block; light schemes (SIV, RLC) keep the white box. Pills / name font come from the include. ---- */
body[data-ui="premium"][data-scheme="dark"] .ControlBar #DGNUIControlBar {
	background: var(--dgn-surface-2);
	color: var(--dgn-text-2);
	border-color: var(--dgn-accent);
	box-shadow: var(--dgn-elev-2), var(--dgn-glow-1);
	-webkit-backdrop-filter: blur(var(--dgn-blur));
	backdrop-filter: blur(var(--dgn-blur));
}
body[data-ui="premium"][data-scheme="dark"] .ControlBar #DGNUIControlBar :is(#DGNUIControlBar_Relationship, #DGNUIControlBar_Tokens) { color: var(--dgn-text); }
body[data-ui="premium"][data-scheme="dark"] .ControlBar #DGNUIControlBar :is(#DGNUIControlBar_ChangeRelationship, #DGNUIControlBar_GetMoreTokens) { color: var(--dgn-site-on-dark); }
body[data-ui="premium"][data-scheme="dark"] .ControlBar #DGNUIControlBar #DGNUIControlBar_Name { background-color: rgba(var(--dgn-accent-rgb), .24); }
body[data-ui="premium"][data-scheme="dark"] .ControlBar #DGNUIControlBar #DGNUIControlBar_Name a { color: var(--dgn-text); }

/* ---- P16. Lobby books section (members/memberhome.cfm .splash: welcome story + DGNBooks shelf). The shared light splash photo
   sat behind brand text colours made for dark pages (YTF sky blue / gold, LAB white = unreadable; DGN/RLC had no panel at all).
   Now one premium glass panel; the text uses the premium text tokens, accents the brand colour adjusted to the surface. ---- */
body[data-ui="premium"] .splash { background: none; }
body[data-ui="premium"] .splash > .center.row {
	background: var(--dgn-surface-1);
	border: 1px solid var(--dgn-line);
	border-top: 3px solid var(--dgn-accent);
	border-radius: var(--dgn-r-l);
	box-shadow: var(--dgn-elev-2);
	-webkit-backdrop-filter: blur(var(--dgn-blur));
	backdrop-filter: blur(var(--dgn-blur));
	padding-top: 16px;
	padding-bottom: 16px;
}
body[data-ui="premium"] .splash .details :is(p, .TextHomeoblsmall2, .OLT_Story, #OLT_Annoucement) { color: var(--dgn-text-2); text-shadow: none; }
body[data-ui="premium"] .splash .details p.TextHomeoblsmall2[style*="bold"] { color: var(--dgn-text); }
body[data-ui="premium"] .splash .details :is(.TextHomeobl, #OLT_ILU) { color: var(--dgn-on-surface); }
body[data-ui="premium"] .splash .details hr { border-color: var(--dgn-line); }
/* memberhome nests <hr>/<div> in <p>: the parser closes the <p> early and leaves empty <p></p> gaps (+ a closing rule with nothing under it) */
body[data-ui="premium"] .splash .details > :is(p:empty, hr:has(+ p:empty:last-child)) { display: none; }
/* The panel padding made long welcome texts (LAB) taller than the fixed 550px splash = the panel ran over the button below: grow with
   the content. The book preview keeps its own height (.preview); per-brand DGNBooks.css copies (KSZ/KSZ2/AID) fix .center at 700px. */
body[data-ui="premium"] .splash { interpolate-size: allow-keywords; }
body[data-ui="premium"] .splash:not(.preview) { height: auto; }
body[data-ui="premium"] .splash > .center.row { height: auto; }
/* Speech bubble (.msg-icn, typed text) = the premium pop-up look (R3 tooltips): dark plate, brand edge, light text, a real tail and a
   typing caret. Anchored bottom-right: longer lines grow up and left while the tail stays put over the shelf (margin-top:-71px assumed
   no panel padding and grew down onto the panel edge); the tail tip ends 8px above the panel. */
body[data-ui="premium"] .splash .msg-icn { top: auto; bottom: calc(100% + 22px); right: 40px; margin-top: 0; min-width: 0; max-width: 320px; padding: 11px 18px; border: 1px solid var(--dgn-line-brand); border-radius: 18px; background: #16161a; box-shadow: var(--dgn-elev-3), 0 0 22px rgba(var(--dgn-accent-rgb), .22); color: #f2f2f4; font: 400 15px/1.45 var(--dgn-font-body); text-shadow: none; }
body[data-ui="premium"] .splash .msg-icn::before { top: auto; left: auto; right: 28px; bottom: -8px; width: 14px; height: 14px; border: 0; border-right: 1px solid var(--dgn-line-brand); border-bottom: 1px solid var(--dgn-line-brand); border-radius: 0 0 3px 0; background: #16161a; clip-path: none; transform: rotate(45deg); }
body[data-ui="premium"] .splash .msg-icn::after { position: static; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--dgn-accent); clip-path: none; animation: dgn-caret 1s steps(1) infinite; }
@keyframes dgn-caret { 50% { opacity: 0; } }
/* Shelf: margin-top -20px pushed it over the accent edge; brand scrollbar (R2b) + the news box "more below" line (R2) */
body[data-ui="premium"] .splash .bookshelf { margin-top: -12px; height: 522px; animation: dgn-more linear both; animation-timeline: scroll(self); }
@media (prefers-reduced-motion: reduce) { body[data-ui="premium"] .splash .bookshelf { animation: none; } body[data-ui="premium"] .splash .msg-icn::after { animation: none; } }
/* Reading mode (a book is open: .show-samples/.show-bar hide the welcome + shelf): the empty panel shrank to a 36px strip under the
   book toolbar. The panel steps back while a book is open; the toolbar's 22px grey sprites (contents / download / close) become round
   glass buttons with icon-font glyphs; close lines up with the book's right edge (#book-wrapper margin 20px). */
body[data-ui="premium"] .splash > .center.row { transition: background-color .6s, border-color .6s, box-shadow .6s; }
body[data-ui="premium"] .splash.show-samples > .center.row { background-color: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-ui="premium"] .splash .samples .share { display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 0; }
body[data-ui="premium"] :is(.splash .samples .share .icon, .splash .samples .quit, .splash > .icon.zoom-out) { display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 0; border: 1px solid var(--dgn-line-brand); border-radius: 50%; background: #16161ae6; box-shadow: var(--dgn-elev-2); color: #f2f2f4; font-size: 16px; line-height: 1; text-shadow: none; cursor: pointer; transition: background-color .15s, color .15s, transform .15s; }
body[data-ui="premium"] :is(.splash .samples .share .icon, .splash .samples .quit, .splash > .icon.zoom-out):is(:hover, :focus-visible) { background: var(--dgn-accent); color: var(--dgn-site-ink); transform: translateY(-1px); }
body[data-ui="premium"] :is(.splash .samples .share .table-contents, .splash .samples .quit, .splash > .icon.zoom-out)::before { font-family: "foundation-icons"; font-style: normal; font-weight: normal; speak: none; -webkit-font-smoothing: antialiased; }
body[data-ui="premium"] .splash .samples .share .table-contents::before { content: "\f169"; } /* fi-list */
body[data-ui="premium"] .splash .samples .quit { top: 0; right: 20px; }
body[data-ui="premium"] .splash .samples .quit::before { content: "\f217"; } /* fi-x */
body[data-ui="premium"] .splash > .icon.zoom-out::before { content: "\f21a"; } /* fi-zoom-out */

/* ---- P17. (i) buttons added by dgn-ux.js section 5 (captions that had only a hover tooltip): same glass circle as the shared cards ---- */
body[data-ui="premium"] .dgn-has-info > i.dgn-info-auto { left: 4px; width: 28px; height: 28px; background: var(--ed-ib); box-shadow: inset 0 0 0 1px var(--ed-ir); color: var(--ed-ic, var(--dgn-on-surface)); font-size: 18px; line-height: 31px; text-shadow: none; }
body[data-ui="premium"] .dgn-info-popup { padding: 14px 16px; }

/* ---- P18. (removed CHATBUILD 2026-11-09: the old Private Messenger box of includes/chatbox.cfm is gone; the chat dock that replaced it
   has its own styles in common/scripts/dgn-chat/dgn-chat-dock.css) ---- */

/* ---- P19. Info pages: contactus / topvideos / faq / news / wall(of shame|glory). Hooks: #content.dgn-page.dgn-<page>. Content sat
   loose on the page photo (contact labels #222 on dark brands = invisible); now premium panels like the lobby (P16). Text unchanged. ---- */
body[data-ui="premium"] :is(.dgn-contact .wrapperAbot > .columns, .dgn-faq .wrapperAbot > .columns, .dgn-top-month, .dgn-news .content-news, .dgn-news .newsletter-box, .dgn-wall .dgn-wall-empty) {
	background: var(--dgn-surface-1) !important; /* !important: newsletter box inline */
	border: 1px solid var(--dgn-line) !important;
	border-radius: var(--dgn-r-l) !important;
	box-shadow: var(--dgn-elev-2);
	-webkit-backdrop-filter: blur(var(--dgn-blur));
	backdrop-filter: blur(var(--dgn-blur));
}
body[data-ui="premium"] :is(.dgn-contact .wrapperAbot > .columns, .dgn-faq .wrapperAbot > .columns, .dgn-top-month, .dgn-news .newsletter-box) { border-top: 3px solid var(--dgn-accent) !important; }

/* contactus: form card + help card side by side, labels readable, sections separated */
body[data-ui="premium"] .dgn-contact .wrapperAbot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 8px; }
body[data-ui="premium"] .dgn-contact .wrapperAbot::before, body[data-ui="premium"] .dgn-contact .wrapperAbot::after { display: none; }
@media (min-width: 768px) { body[data-ui="premium"] .dgn-contact .wrapperAbot { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; } }
body[data-ui="premium"] .dgn-contact .wrapperAbot > .columns { float: none; width: auto; padding: 22px 24px; }
body[data-ui="premium"] .dgn-contact .wrapperAbot > .columns > br { display: none; }
body[data-ui="premium"] .dgn-contact .InputText { display: block; margin: 14px 0 6px; color: var(--dgn-text-2); font-size: 14px; font-weight: 600; text-shadow: none; }
body[data-ui="premium"] .dgn-contact .InputText + br { display: none; }
body[data-ui="premium"] .dgn-contact #ContactUsPreForm p:empty { display: none; }
body[data-ui="premium"] .dgn-contact #ContactUsPreForm img { display: block; max-width: 100%; height: auto; margin: 0 0 8px; border-radius: var(--dgn-r-s); }
body[data-ui="premium"] .dgn-contact #ContactUsPreForm :is(input, select, textarea) { margin-bottom: 4px; }
body[data-ui="premium"] .dgn-contact #ContactUsPreForm button[type="submit"] { width: 100%; margin: 14px 0 0; }
body[data-ui="premium"] .dgn-contact h3.TextHomeTop { margin-top: 0; }
body[data-ui="premium"] .dgn-contact h3.MembersRightmiddle { margin: 20px 0 8px; padding-top: 18px; border-top: 1px solid var(--dgn-line); }
body[data-ui="premium"] .dgn-contact h3.TextHomeoblsmall { margin: 0; color: var(--dgn-text-2); font-size: 15.5px; line-height: 1.65; text-shadow: none; }

/* topvideos: month cards (layout dgn-ux.css 11g), rank chips, #1 in the brand colour */
body[data-ui="premium"] .dgn-top-month > p.MembersRightmiddle { color: var(--dgn-on-surface); }
body[data-ui="premium"] .dgn-top-month > ol > li > a { color: var(--dgn-text); font-size: 15px; font-weight: 600; transition: background-color .15s; }
body[data-ui="premium"] .dgn-top-month > ol > li > a:is(:hover, :focus-visible) { background: rgba(var(--dgn-accent-rgb), .14); color: var(--dgn-text); }
body[data-ui="premium"] .dgn-top-month > ol > li > a::before { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--dgn-text) 12%, transparent); color: var(--dgn-text); font-size: 13px; }
body[data-ui="premium"] .dgn-top-month > ol > li:first-child > a::before { background: var(--dgn-accent); color: var(--dgn-site-ink); }
body[data-ui="premium"] .dgn-top-thumb { box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

/* faq: one reading panel; questions open their answers (dgn-ux.js section 6) */
body[data-ui="premium"] .dgn-faq .wrapperAbot > .columns { margin-top: 8px; padding: 26px clamp(18px, 4vw, 40px) 30px; }
body[data-ui="premium"] .dgn-faq .wrapperAbot > .columns > br { display: none; }
body[data-ui="premium"] .dgn-faq .wrapperAbot > .columns > p.TextHomeoblsmall { color: var(--dgn-text-2); }
body[data-ui="premium"] .dgn-faq .wrapperAbot > .columns > hr { margin: 6px 0 4px; border-color: var(--dgn-line); }
body[data-ui="premium"] .dgn-faq h3.MembersRightmiddle { margin: 30px 0 4px; }
body[data-ui="premium"] .dgn-faq a[style*="color:Red"] { color: var(--dgn-on-surface) !important; text-decoration: underline; text-underline-offset: 2px; } /* !important: inline red on every brand */
body[data-ui="premium"] .dgn-faq--js .dgn-faq__q { position: relative; margin: 0; padding: 14px 44px 14px 0; border-top: 1px solid var(--dgn-line); cursor: pointer; transition: color .15s; }
body[data-ui="premium"] .dgn-faq--js .dgn-faq__q::after { content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--dgn-accent); border-bottom: 2px solid var(--dgn-accent); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
body[data-ui="premium"] .dgn-faq--js .dgn-faq__q[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }
body[data-ui="premium"] .dgn-faq--js .dgn-faq__q:is(:hover, :focus-visible) { color: var(--dgn-on-surface); }
body[data-ui="premium"] .dgn-faq--js .dgn-faq__a { padding: 0 0 16px; }
body[data-ui="premium"] .dgn-faq--js .dgn-faq__a :is(p, ul, li) { color: var(--dgn-text-2); }
body[data-ui="premium"] .dgn-faq--js .dgn-faq__a p:empty { display: none; }

/* news: each item a card row; the [+] becomes a chevron (state read from the body's inline display); newsletter = brand card */
body[data-ui="premium"] .dgn-news .content-news { margin: 0 0 12px; overflow: hidden; }
body[data-ui="premium"] .dgn-news .content-news > hr { display: none; }
body[data-ui="premium"] .dgn-news .news-header { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; padding: 15px 56px 15px 18px; cursor: pointer; transition: background-color .15s; }
body[data-ui="premium"] .dgn-news .news-header:hover { background: rgba(var(--dgn-accent-rgb), .08); }
body[data-ui="premium"] .dgn-news .news-title { color: var(--dgn-text); font-size: 17px; font-weight: 700; }
body[data-ui="premium"] .dgn-news .news-date { color: var(--dgn-text-2); font-size: 13.5px; font-weight: 400; }
body[data-ui="premium"] .dgn-news .news-site a { color: var(--dgn-on-surface); }
body[data-ui="premium"] .dgn-news .toggle-news { position: absolute; right: 14px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; border: 1px solid var(--dgn-line-brand); border-radius: 50%; background: rgba(var(--dgn-accent-rgb), .14); color: var(--dgn-accent); font-size: 0; text-decoration: none; }
body[data-ui="premium"] .dgn-news .toggle-news::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
body[data-ui="premium"] .dgn-news .content-news:has(> .news-body:not([style*="none"])) .toggle-news::before { transform: translateY(2px) rotate(-135deg); }
body[data-ui="premium"] .dgn-news .news-body { padding: 0 18px 18px; color: var(--dgn-text-2); }
body[data-ui="premium"] .dgn-news .newsletter-box { padding: 22px !important; } /* !important: inline */
body[data-ui="premium"] .dgn-news .newsletter-box h3 { color: var(--dgn-on-surface) !important; } /* !important: inline */
body[data-ui="premium"] .dgn-news .newsletter-box p { color: var(--dgn-text-2) !important; } /* !important: inline */
body[data-ui="premium"] .dgn-news #newsletterEmail { min-height: 44px; border: 1px solid rgba(17, 17, 17, .18) !important; border-radius: var(--dgn-r-s) !important; background: #fff !important; color: #1a1a1f !important; } /* !important: inline dark field = the P10 field */
body[data-ui="premium"] .dgn-news #newsletterSubmit { min-height: 44px; border-radius: 999px !important; background: var(--dgn-site) !important; color: var(--dgn-site-ink) !important; } /* !important: inline white on the brand colour */

/* wall: readable intro on every scheme, the empty wall as a card */
body[data-ui="premium"] .dgn-wall h5 { color: var(--dgn-text-2) !important; font-size: 16px; line-height: 1.6; } /* !important: inline #ccc / #000 */
body[data-ui="premium"] .dgn-wall .dgn-wall-empty { margin: 8px 0 24px; padding: 44px 20px 40px; border-style: dashed !important; text-align: center; }
body[data-ui="premium"] .dgn-wall .dgn-wall-empty::before { content: "\f200"; display: block; margin-bottom: 8px; color: var(--dgn-accent); font: normal 46px/1 "foundation-icons"; } /* fi-torsos-all */
body[data-ui="premium"] .dgn-wall .dgn-wall-empty h3 { margin: 0; color: var(--dgn-text-2) !important; } /* !important: inline */

/* ---- P20. reviews.cfm (#content.dgn-reviews; the dark-scheme panel is R5). Review-site rows = cards with the logo on a white chip
   (the logos are drawn for white, 40px wide was unreadable); member reviews = quote cards, now above the directory; the add-review
   box = a card with a sane textarea (rows=25 was ~420px); text in the surface tokens instead of the brand colour. Text unchanged. ---- */
body[data-ui="premium"][data-scheme="dark"] #content.dgn-reviews a:not(.buttonDGNMiddle) { color: var(--dgn-site-on-dark); } /* the page's own #content a/p use the on-light brand colour for its white panel */
body[data-ui="premium"][data-scheme="dark"] #content.dgn-reviews p:not(.TextHomeTop, .TextBoxLikePicture) { color: var(--dgn-text-2); }
body[data-ui="premium"] #content.dgn-reviews .dgn-sreview { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; margin: 0 0 12px !important; padding: 12px; border: 1px solid var(--dgn-line); border-radius: var(--ed-r); background: var(--ed-strip); } /* !important: inline margin */
body[data-ui="premium"] #content.dgn-reviews .dgn-sreview::before, body[data-ui="premium"] #content.dgn-reviews .dgn-sreview::after { display: none; }
body[data-ui="premium"] #content.dgn-reviews .dgn-sreview > .columns { float: none; width: auto; padding: 0; }
body[data-ui="premium"] #content.dgn-reviews .dgn-sreview > .columns:first-child > a { display: grid; place-items: center; height: 64px; padding: 6px; border-radius: 8px; background: #fff; }
body[data-ui="premium"] #content.dgn-reviews .dgn-sreview > .columns:first-child img { width: auto; max-width: 100%; max-height: 52px; object-fit: contain; }
body[data-ui="premium"] #content.dgn-reviews .dgn-sreview h3 { margin: 0 0 4px; line-height: 1.2; }
body[data-ui="premium"] #content.dgn-reviews .dgn-sreview p { margin: 0; color: var(--dgn-text-2); font-size: 14.5px; line-height: 1.5; }
body[data-ui="premium"] #content.dgn-reviews .dgn-mreviews { margin: 26px 0 30px; }
body[data-ui="premium"] #content.dgn-reviews p.dgn-mreview { position: relative; margin: 0 0 12px; padding: 16px 18px 16px 54px; border: 1px solid var(--dgn-line); border-left: 3px solid var(--dgn-accent); border-radius: var(--ed-r); background: var(--ed-strip); color: var(--dgn-text); font-size: 16px; line-height: 1.55; }
body[data-ui="premium"] #content.dgn-reviews p.dgn-mreview::before { content: "\201C"; position: absolute; left: 14px; top: 8px; color: var(--dgn-accent); font: 700 46px/1 Georgia, "Times New Roman", serif; }
body[data-ui="premium"] #content.dgn-reviews .dgn-mreviews p:not(.dgn-mreview, .TextHomeTop) { color: var(--dgn-text-2); }
body[data-ui="premium"] #content.dgn-reviews .row > .medium-2.small-3.columns > ul a { color: var(--dgn-text-2); }
body[data-ui="premium"] #content.dgn-reviews .row > .medium-2.small-3.columns > ul a:is(:hover, :focus-visible) { color: var(--dgn-on-surface); }
body[data-ui="premium"] #content.dgn-reviews p.TextBoxLikePicture { padding: 18px 20px !important; font-size: 15px !important; line-height: 1.55; } /* !important: inline height/size */
body[data-ui="premium"] #content.dgn-reviews p.TextBoxLikePicture :is(strong, em) { color: var(--dgn-on-surface); }
body[data-ui="premium"] #content.dgn-reviews #reviewbox:has(textarea) { margin-top: 18px; padding: 16px 16px 18px; border: 1px solid var(--dgn-line); border-top: 3px solid var(--dgn-accent); border-radius: var(--dgn-r-l); background: var(--ed-strip); }
body[data-ui="premium"] #content.dgn-reviews #reviewbox p.TextHomeTop { margin-bottom: 4px; }
body[data-ui="premium"] #content.dgn-reviews #reviewbox .InputText { margin-bottom: 10px; color: var(--dgn-text-2) !important; font-size: 13px; font-weight: 400; } /* !important: inline #999 */
body[data-ui="premium"] #content.dgn-reviews #DGN_Text_Massege { height: 220px; min-height: 140px; margin-bottom: 12px; resize: vertical; }
body[data-ui="premium"] #content.dgn-reviews #reviewbox .buttonDGNMiddle { width: 100%; }
@media (max-width: 640px) { body[data-ui="premium"] #content.dgn-reviews .dgn-sreview { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; } }

/* ---- P21. Documents (#content.dgn-doc: TOS, Privacy, AUP, CSCE, Anti-Trafficking, Refunds, Support, 18 U.S.C.). The text ran
   1,000px wide straight on the page photo with invisible list numbers; now a reading panel, section rules, brand list markers and a
   contents column (layout dgn-ux.css 11h). Text unchanged. ---- */
body[data-ui="premium"] :is(#content.dgn-doc .wrapperAbot > .columns, .dgn-doc-toc) { border: 1px solid var(--dgn-line); border-top: 3px solid var(--dgn-accent); border-radius: var(--dgn-r-l); background: var(--dgn-surface-1); box-shadow: var(--dgn-elev-2); -webkit-backdrop-filter: blur(var(--dgn-blur)); backdrop-filter: blur(var(--dgn-blur)); }
body[data-ui="premium"] #content.dgn-doc .wrapperAbot > .columns { margin-top: 8px; padding: 22px clamp(18px, 3.5vw, 40px) 30px; }
body[data-ui="premium"] #content.dgn-doc .wrapperAbot > .columns :is(p, li, h3.TextHomeoblsmall) { color: var(--dgn-text-2); font-size: 16px; line-height: 1.7; text-shadow: none; }
body[data-ui="premium"] #content.dgn-doc .wrapperAbot > .columns :is(p, li, h3) :is(b, strong) { color: var(--dgn-text); }
body[data-ui="premium"] #content.dgn-doc :is(h3, h6).TextHomeobl { margin: 28px 0 10px; padding-top: 20px; border-top: 1px solid var(--dgn-line); color: var(--dgn-on-surface); font-size: 17px; line-height: 1.35; letter-spacing: .02em; }
body[data-ui="premium"] #content.dgn-doc h3.MembersRightmiddle { margin: 22px 0 8px; }
body[data-ui="premium"] #content.dgn-doc h3.TextHomeTop > .TextHomeTopblue { display: block; float: none !important; margin-top: 4px; color: var(--dgn-text-2); font: 600 14px/1.4 var(--dgn-font-body) !important; letter-spacing: .02em; text-align: left !important; text-shadow: none; } /* the date: floated right it squeezed the first paragraph; !important: inline */
body[data-ui="premium"] #content.dgn-doc .wrapperAbot > .columns :is(ul, ol) { margin: 0 0 14px 1.4em; }
body[data-ui="premium"] #content.dgn-doc .wrapperAbot > .columns li { margin-bottom: 4px; padding-left: 4px; }
body[data-ui="premium"] #content.dgn-doc .wrapperAbot > .columns li::marker { color: var(--dgn-accent); font-weight: 700; }
body[data-ui="premium"] #content.dgn-doc .wrapperAbot > .columns a:not(.button, .buttonDGNMiddle) { color: var(--dgn-on-surface); text-underline-offset: 2px; }
body[data-ui="premium"] #content.dgn-doc a[style*="color:Red"] { color: var(--dgn-on-surface) !important; text-decoration: underline; } /* !important: inline red on every brand */
body[data-ui="premium"] .dgn-doc-toc { padding: 12px 8px; }
body[data-ui="premium"] .dgn-doc-toc summary { padding: 4px 10px; color: var(--dgn-text); }
body[data-ui="premium"] .dgn-doc-toc summary::marker { color: var(--dgn-accent); }
body[data-ui="premium"] .dgn-doc-toc a { color: var(--dgn-text-2); transition: background-color .15s, color .15s; }
body[data-ui="premium"] .dgn-doc-toc a:is(:hover, :focus-visible) { background: rgba(var(--dgn-accent-rgb), .1); color: var(--dgn-text); }
body[data-ui="premium"] .dgn-doc-toc a[aria-current] { background: rgba(var(--dgn-accent-rgb), .16); box-shadow: inset 3px 0 0 var(--dgn-accent); color: var(--dgn-text); }

/* ---- P22. Join / upgrade (purchase.cfm = members/upgrade.cfm, #DGNForm). Labels were brand-dark on dark brands (invisible), plan
   cards light grey boxes on the page photo, the selected plan's feature lines black on dark, the feature list a 1,300px wall and
   COMPARE OPTIONS the stock blue. Plan cards now premium surfaces: chosen = brand ring, not available = dimmed, current = brand bar. ---- */
body[data-ui="premium"] #DGNForm .InputText { color: var(--dgn-text-2); font-size: 14px; font-weight: 600; text-shadow: none; }
body[data-ui="premium"] #DGNForm .paymentMethod { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--dgn-line); border-radius: var(--dgn-r-l); background: var(--dgn-surface-2); box-shadow: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
body[data-ui="premium"] #DGNForm .paymentMethod:hover { border-color: var(--dgn-line-brand); box-shadow: 0 0 0 1px var(--dgn-line-brand), var(--dgn-elev-2); }
body[data-ui="premium"] #DGNForm .radio-btn:checked + .paymentMethod { border-color: var(--dgn-accent); box-shadow: 0 0 0 2px var(--dgn-accent), 0 0 24px rgba(var(--dgn-accent-rgb), .3); }
body[data-ui="premium"] #DGNForm .radio-btn:disabled + .paymentMethod { cursor: not-allowed; opacity: .5; filter: grayscale(.5); box-shadow: none; }
body[data-ui="premium"] #DGNForm .radio-btn.selected:disabled + .paymentMethod { opacity: 1; filter: none; border-color: var(--dgn-accent); box-shadow: inset 4px 0 0 var(--dgn-accent); } /* the member's current tier */
body[data-ui="premium"] #DGNForm .paymentMethod .TextHomeTopblue { color: var(--dgn-on-surface); }
body[data-ui="premium"] #DGNForm .paymentMethod :is(.TextHomeoblsmall, em) { color: var(--dgn-text-2); text-shadow: none; }
body[data-ui="premium"] #DGNForm .paymentMethod .large-8 > p.TextHomeTop { color: var(--dgn-text); }
body[data-ui="premium"] #DGNForm #compareOptions { height: auto !important; margin: 4px 0 12px; } /* !important: inline */
body[data-ui="premium"] #DGNForm a.button.postfix[href*="compare.cfm"] { height: 44px !important; margin: 0 !important; border-radius: 999px; background: var(--dgn-site); color: var(--dgn-site-ink); font-size: 15px !important; font-weight: 700; } /* !important: inline */
body[data-ui="premium"] #DGNForm .TextBoxLikePicture:has(.CustomList) { max-height: min(640px, 75vh); padding: 16px 18px !important; overflow: auto !important; overscroll-behavior: contain; border: 1px solid var(--dgn-line); border-radius: var(--dgn-r-l); background: var(--dgn-surface-1); } /* the feature list scrolls inside its panel (R2b scrollbar); !important: inline padding + dgn-ux.css ".TextBoxLikePicture { overflow: visible !important }", which let the list spill over CONTINUE and the small print */
body[data-ui="premium"] #DGNForm .CustomList :is(.CustomListUnSelected, .CustomListUnSelected li) { color: var(--dgn-text-2); }
body[data-ui="premium"] #DGNForm .CustomList :is(.CustomListSelected, .CustomListSelected li) { color: var(--dgn-text); font-weight: 600; }
body[data-ui="premium"] #DGNForm .CustomList li::before { color: var(--dgn-accent); }
body[data-ui="premium"] #DGNForm .switch-toggle label { color: var(--dgn-text-2); text-shadow: none; } /* One-Time / Monthly: stock light blue on every brand */
body[data-ui="premium"] #DGNForm .switch-toggle input:checked + label { color: var(--dgn-site-ink); }

/* ---- P24. Join / upgrade wizard (purchase.cfm, #DGNForm) - design pass. Each step a premium card under a step bar (dgn-ux.js
   section 8, labels = the steps' own titles), checklists neutral until met (they were all red before anything was typed), plan
   cards with a numbered badge instead of the cloud art pulled up by -125px, payment tiles white for the processor logos, BACK
   secondary, the billing small print quiet. Text unchanged. ---- */
body[data-ui="premium"] #DGNForm { --dgn-ok: #1f7a3a; }
body[data-ui="premium"][data-scheme="dark"] #DGNForm { --dgn-ok: #7ee2a0; }
body[data-ui="premium"] #DGNForm > .row:first-of-type .TextHomeoblsmall { /* first-of-type: the form's first child is the hidden AuthCode input */ display: block; margin: 2px 0 6px; color: var(--dgn-text-2); font-size: 15px; text-shadow: none; }
/* step bar */
.dgn-steps { display: flex; margin: 10px 0 18px; padding: 0; list-style: none; }
.dgn-steps > li { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--dgn-text-2, #666); font: 600 12.5px/1.25 var(--dgn-font-body); text-align: center; }
.dgn-steps > li::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 2px; border-radius: 2px; background: var(--dgn-line, #ccc); }
.dgn-steps > li:first-child::before { display: none; }
.dgn-steps > li :is(.dgn-steps__n) { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--dgn-line, #ccc); border-radius: 50%; background: var(--dgn-surface-2, #fff); color: var(--dgn-text-2, #666); font-size: 14px; font-weight: 700; transition: background-color .2s, border-color .2s, color .2s; }
.dgn-steps > li.is-done::before, .dgn-steps > li.is-current::before { background: var(--dgn-accent, var(--dgn-site)); }
.dgn-steps > li.is-done .dgn-steps__n { border-color: var(--dgn-accent, var(--dgn-site)); color: var(--dgn-on-surface, var(--dgn-site)); }
.dgn-steps > li.is-current { color: var(--dgn-text, #222); }
.dgn-steps > li.is-current .dgn-steps__n { border-color: var(--dgn-site); background: var(--dgn-site); color: var(--dgn-site-ink); box-shadow: 0 0 0 4px rgba(var(--dgn-site-rgb), .22); }
.dgn-steps__t { display: block; padding: 0 4px; overflow-wrap: normal; } /* wrap at spaces only ("Relations|hip" on phones) */
@media (max-width: 640px) { .dgn-steps > li:not(.is-current) .dgn-steps__t { display: none; } }
.dgn-steps:not(:has(> li:nth-child(3))) { max-width: 420px; margin-left: auto; margin-right: auto; } /* a member's upgrade: plan + payment only */
body[data-ui="premium"] #DGNForm #selectedText:not(:has(*)) { display: none !important; } /* empty until a plan text is shown; !important: inline flex + 100px */
/* each step a card */
body[data-ui="premium"] #DGNForm .StepBoxes { margin: 0 auto 16px; padding: 20px 12px 16px; border: 1px solid var(--dgn-line); border-top: 3px solid var(--dgn-accent); border-radius: var(--dgn-r-l); background: var(--dgn-surface-1); box-shadow: var(--dgn-elev-2); -webkit-backdrop-filter: blur(var(--dgn-blur)); backdrop-filter: blur(var(--dgn-blur)); }
body[data-ui="premium"] #DGNForm .StepBoxes > .columns:first-child > p.TextHomeTop { margin-bottom: 14px; }
body[data-ui="premium"] #DGNForm .StepBoxes label:not(.paymentMethod) { color: var(--dgn-text); font-size: 15px; line-height: 1.5; }
body[data-ui="premium"] #DGNForm .StepBoxes input[type="checkbox"] { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--dgn-accent); }
body[data-ui="premium"] #DGNForm .StepBoxes .name-field, body[data-ui="premium"] #DGNForm .StepBoxes .email-field { margin-bottom: 10px; }
/* checklists: neutral until met */
body[data-ui="premium"] #DGNForm .innerGroupingBox { margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--dgn-line); border-radius: 14px; background: color-mix(in srgb, var(--dgn-text) 4%, transparent); box-shadow: none; font-size: 14.5px; }
body[data-ui="premium"] #DGNForm .innerGroupingBox li { display: flex; align-items: center; gap: 10px; padding: 4px 0; line-height: 1.4; }
body[data-ui="premium"] #DGNForm .innerGroupingBox li.invalid { color: var(--dgn-text-2); }
body[data-ui="premium"] #DGNForm .innerGroupingBox li.valid:has(.ux-criteria-box-checked) { color: var(--dgn-ok); font-weight: 600; } /* green only when actually ticked (blank codes are "valid" with an empty box) */
body[data-ui="premium"] #DGNForm .innerGroupingBox li.valid:not(:has(.ux-criteria-box-checked)) { color: var(--dgn-text-2); }
body[data-ui="premium"] #DGNForm .innerGroupingBox li p { margin: 0; }
body[data-ui="premium"] #DGNForm .innerGroupingBox li:has(#DGNPStep2_PromotionHeading a:empty) { display: none; } /* no promotion: no empty ticked line */
body[data-ui="premium"] #DGNForm .StepBoxes a:not([class*="button"]):not(.paymentMethod) { color: var(--dgn-on-surface); text-decoration: underline; text-underline-offset: 2px; }
body[data-ui="premium"] #DGNForm :is(.ux-criteria-box, .ux-criteria-box-checked) { flex: none; width: 18px; height: 18px; margin: 0; border-radius: 50%; }
body[data-ui="premium"] #DGNForm .ux-criteria-box { border: 2px solid color-mix(in srgb, var(--dgn-text) 30%, transparent); background: transparent; }
body[data-ui="premium"] #DGNForm .ux-criteria-box-checked { border: 2px solid var(--dgn-ok); background: var(--dgn-ok); }
body[data-ui="premium"] #DGNForm .ux-criteria-box-checked::before { inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; line-height: 1; }
body[data-ui="premium"] #DGNForm .innerGroupingBox .InputText { color: var(--dgn-text); }
body[data-ui="premium"] #DGNForm .innerGroupingBox :is(p, .row, .columns) { color: var(--dgn-text-2); }
/* plan cards: number badge instead of the cloud */
body[data-ui="premium"] #DGNForm .paymentMethod[for^="RelationshipType"] { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; }
body[data-ui="premium"] #DGNForm .paymentMethod[for^="RelationshipType"] > .columns { float: none; width: auto !important; padding: 0; margin: 0 !important; } /* !important: inline width/margin */
body[data-ui="premium"] #DGNForm .paymentMethod[for^="RelationshipType"] img[src*="wewe"] { display: none; }
body[data-ui="premium"] #DGNForm .paymentMethod .TextHomeTopvalue { margin: 0; text-align: center; }
body[data-ui="premium"] #DGNForm .paymentMethod .TextHomeTopvalue > p.TextHomeTop { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto; border: 2px solid var(--dgn-line-brand); border-radius: 50%; background: rgba(var(--dgn-accent-rgb), .12); color: var(--dgn-on-surface); font-size: 24px; line-height: 1; letter-spacing: 0; }
body[data-ui="premium"] #DGNForm .radio-btn:checked + .paymentMethod .TextHomeTopvalue > p.TextHomeTop { border-color: var(--dgn-site); background: var(--dgn-site); color: var(--dgn-site-ink); }
body[data-ui="premium"] #DGNForm .paymentMethod :is(p.TextHomeTop, .TextHomeTopblue)::after { display: none; } /* the title dots */
body[data-ui="premium"] #DGNForm .paymentMethod .PackagesRemainingText { margin-top: 4px; color: var(--dgn-text-2); font: italic 11px var(--dgn-font-body); }
body[data-ui="premium"] #DGNForm .paymentMethod .large-8 > p { margin: 0 0 4px; }
body[data-ui="premium"] #DGNForm .paymentMethod .large-8 > p.TextHomeTopblue { font-size: 21px; line-height: 1.15; }
body[data-ui="premium"] #DGNForm .paymentMethod .large-8 > p.TextHomeTop { margin: 6px 0 0; font: 700 21px/1.2 var(--dgn-font-body); letter-spacing: .01em; }
body[data-ui="premium"] #DGNForm .radio-btn:disabled + .paymentMethod .TextHomeTopblue::after,
body[data-ui="premium"] #DGNForm .radio-btn.selected:disabled + .paymentMethod .TextHomeTopblue::after { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--dgn-text) 12%, transparent); color: var(--dgn-text-2); font: 600 11px/1.4 var(--dgn-font-body); letter-spacing: .02em; vertical-align: 3px; } /* "(disabled)" / "(selected)" labels from the page's own CSS, as pills */
body[data-ui="premium"] #DGNForm .radio-btn.selected:disabled + .paymentMethod .TextHomeTopblue::after { background: var(--dgn-site); color: var(--dgn-site-ink); }
/* one-time / monthly switch */
body[data-ui="premium"] #DGNForm .switch-toggle { margin: 0 0 14px; border: 1px solid var(--dgn-line); border-radius: 999px; background: color-mix(in srgb, var(--dgn-text) 6%, transparent); box-shadow: none; }
body[data-ui="premium"] #DGNForm .switch-toggle label { border: 0 !important; border-radius: 999px !important; font: 700 14px/2.4 var(--dgn-font-body) !important; letter-spacing: .04em !important; } /* !important: page CSS 3px border + Anja font */
body[data-ui="premium"] #DGNForm .switch-toggle a.button-active-select { border: 0 !important; border-radius: 999px !important; background: var(--dgn-site) !important; box-shadow: var(--dgn-elev-2); } /* !important: page CSS */
/* payment processors: white tiles for their logos */
body[data-ui="premium"] #DGNForm .paymentMethod[for^="options"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 14px 12px; background: #fff; }
body[data-ui="premium"] #DGNForm .paymentMethod[for^="options"] img { max-height: 44px; width: auto; margin: 0 !important; } /* !important: inline margins */
/* buttons + small print */
body[data-ui="premium"] #DGNForm #BackStepBT { border: 2px solid var(--dgn-line-brand) !important; background: transparent !important; color: var(--dgn-text) !important; box-shadow: none !important; text-shadow: none; } /* !important: the button system; BACK is secondary */
body[data-ui="premium"] #DGNForm #BackStepBT:hover { background: rgba(var(--dgn-accent-rgb), .1) !important; }
body[data-ui="premium"] #DGNForm .BillingFooterText { max-width: 780px; margin: 0 auto 10px; color: var(--dgn-text-2); font-size: 13px; font-weight: 400 !important; line-height: 1.6; text-shadow: none; } /* !important: inline bold */
body[data-ui="premium"] #DGNForm .BillingFooterText:first-child { font-size: 12px; font-weight: 700 !important; letter-spacing: .06em; }
body[data-ui="premium"] #DGNForm .BillingFooterText a { color: var(--dgn-on-surface); text-decoration: underline; text-underline-offset: 2px; }

/* ---- P23. Shop (shop.cfm / members/shop.cfm). Every store had its own pastel or black box (shop.css: green, grey, light blue, cream,
   pink, black, orange; inline pink for Custom Videos) with #333 text forced on top (dgn-ux.css) - one premium panel each now, text in
   the surface tokens, brand bullets; the custom-video terms a quiet note instead of white italics on bright red. (Gift cards 2-up was
   tried: their .shop cards switch to a tall stacked layout when narrow - kept one per row.) ---- */
body[data-ui="premium"] #content .row.rowpad:is(.SupportStore, .customvideosbox, .SendYourSexStore, .GiftCardsStore, .TributeStore, .IdolStore, .GameStore, .LevelUpStore, .TokenStore) {
	padding-top: 14px; padding-bottom: 14px;
	border: 1px solid var(--dgn-line); border-top: 3px solid var(--dgn-accent); border-radius: var(--dgn-r-l) !important;
	background: var(--dgn-surface-1) !important; /* !important: inline + shop.css pastels */
	box-shadow: var(--dgn-elev-2); color: var(--dgn-text-2);
	-webkit-backdrop-filter: blur(var(--dgn-blur)); backdrop-filter: blur(var(--dgn-blur));
}
body[data-ui="premium"] #content :is(.SupportStore, .customvideosbox, .SendYourSexStore, .GiftCardsStore, .TributeStore, .IdolStore, .GameStore, .LevelUpStore, .TokenStore) :is(.TextHomeoblsmall2, .TextHomeoblsmall, .BillPayList, .BillPayList li, .TokensList, .TokensList li, .FeaturesList li, .StoreSubHeading, .ShopTokensGroup, .ShopTokensGroup span, p, em, label, .columns) { color: var(--dgn-text-2); text-shadow: none; }
body[data-ui="premium"] #content :is(.SupportStore, .customvideosbox, .SendYourSexStore, .GiftCardsStore, .TributeStore, .IdolStore, .GameStore, .LevelUpStore, .TokenStore) :is(strong, b, .TextHomeTopSm, h3) { color: var(--dgn-text); }
body[data-ui="premium"] #content :is(.SupportStore, .customvideosbox, .SendYourSexStore, .GiftCardsStore, .TributeStore, .IdolStore, .GameStore, .LevelUpStore, .TokenStore) :is(.BillPayList, .TokensList) li::before { color: var(--dgn-accent); }
body[data-ui="premium"] #content :is(.SupportStore, .customvideosbox, .SendYourSexStore, .GiftCardsStore, .TributeStore, .IdolStore, .GameStore, .LevelUpStore, .TokenStore) a:not([class]) { color: var(--dgn-on-surface); text-decoration: underline; text-underline-offset: 2px; }
body[data-ui="premium"] #content :is(.SupportStore, .customvideosbox, .SendYourSexStore, .GiftCardsStore, .TributeStore, .IdolStore, .GameStore, .LevelUpStore, .TokenStore) hr { border-color: var(--dgn-line); }
body[data-ui="premium"] #content .customvideosbox small.error { display: block; margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--dgn-line); border-left: 3px solid var(--dgn-accent); border-radius: 10px; background: rgba(var(--dgn-accent-rgb), .08); color: var(--dgn-text-2); font-size: 13.5px; font-style: normal; line-height: 1.6; }
body[data-ui="premium"] #content .customvideosbox small.error a { color: var(--dgn-on-surface); }

/* ---- Scroll reveal (dgn-ux.js section 4 adds the classes; without JS nothing is hidden) ---- */
body[data-ui="premium"] .dgn-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--dgn-t-slow) var(--dgn-ease), transform var(--dgn-t-slow) var(--dgn-ease), border-color var(--dgn-t-mid) var(--dgn-ease);
}
body[data-ui="premium"] .dgn-reveal.dgn-in {
	opacity: 1;
	transform: none;
}
@media print {
	body[data-ui="premium"] .dgn-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---- Motion: no looping glow, zoom or pop-in for people who ask for less motion ---- */
/* MARQUEE 2026-11-10 (owner: "Marquee now show but not move on other PC"): the top message line (includes/Marquee.cfm, jQuery Marquee)
   is content, not decoration - its moving strip (.js-marquee-wrapper) keeps its animation here. On a PC that asks for less motion
   (Windows "Animation effects" off) it stood still; it still stops while the mouse is on it (pauseOnHover). */
@media (prefers-reduced-motion: reduce) {
	body[data-ui="premium"] *:not(.js-marquee-wrapper),
	body[data-ui="premium"] *::before,
	body[data-ui="premium"] *::after {
		animation: none !important;
		transition-duration: 1ms !important;
	}
	body[data-ui="premium"] .dgn-reveal {
		opacity: 1;
		transform: none;
	}
}
/* Windows high contrast / forced colours: plain solid surfaces */
@media (forced-colors: active) {
	body[data-ui="premium"] * {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}

/* ==========================================================================
   Brand settings (palette, ornament, per-brand fixes): moved to each brand's X:\<Site>\scripts\Premium.css;
   palette values come only from each brand's own Base.css / INI colour
   ========================================================================== */

/* ==========================================================================
   Round 2 (owner review): "editorial" header, menu band, video / photo cards, captions, Bonus section.
   Chosen by three independent judges from three designs; verified on 8 brands at 344-1920px (text unchanged,
   no overflow, hover moves nothing, contrast and focus rings measured). Kept LAST in this file: it overrides the
   earlier header capsule and card rules above. Source of truth for this section: this file.
   ========================================================================== */
/*! editorial override: load after dgn-premium.css */
/* colours from premium vars / brand Base.css only; this source documents every rule (tools/build.py writes override.css) */
body[data-ui="premium"] {
	--ed-head: 176px; --ed-logo: 120px; --ed-px: 16px; --ed-ls: .08em; --ed-fs: 15px; --ed-cap: 44px; --ed-clh: 19px; --ed-bp: 52px; --ed-dt: 10px; --ed-dh: 24px;
	--ed-band: linear-gradient(#0003, #0003), rgba(var(--dgn-tint-rgb), .62); --ed-hair: #ffffff29; --ed-link: var(--dgn-text);
	--ed-pill: var(--dgn-accent); --ed-pill-ink: var(--dgn-accent-ink, var(--dgn-site-ink));
	--ed-strip: rgb(var(--dgn-tint-rgb)); --ed-ink: var(--dgn-text); --ed-line: rgba(var(--dgn-accent-rgb), .9);
	--ed-r: var(--dgn-r-m); --ed-ri: calc(var(--ed-r) - 1px); --ed-hover: 0 0 0 1px rgba(var(--dgn-accent-rgb), .75), 0 14px 34px #0005;
	--ed-ib: #ffffff24; --ed-ir: #ffffff38; --ed-fa: #fff; --ed-fb: #0c0c0ee6; /* info circle; two-tone focus ring */
}
body[data-ui="premium"][data-scheme="light"] { --ed-band: #ffffffb3; --ed-hair: #11111124; --ed-strip: #fff; --ed-ring: #11111180; --ed-ib: rgba(var(--dgn-accent-rgb), .1); --ed-ir: rgba(var(--dgn-accent-rgb), .4); }

/* E1. Header: logo centred, never upscaled; the members marquee keeps clear of it */
body[data-ui="premium"] #wrapper { display: flex; flex-direction: column; height: auto; min-height: var(--ed-head); }
body[data-ui="premium"] #wrapper > .row { display: flex; flex: 1 0 auto; align-items: center; justify-content: center; width: 100%; }
body[data-ui="premium"] #wrapper > .row > .columns { display: flex; justify-content: center; width: auto; max-width: 100%; margin: 0; padding: 0 16px; }
body[data-ui="premium"] #wrapper > .marquee-with-options { flex: none; }
body[data-ui="premium"] #wrapper > .marquee-with-options ~ .row { padding: 8px 0; }
body[data-ui="premium"] #wrapper a:has(> img[alt="Logo"]) { display: block; width: fit-content; max-width: 100%; margin: 0 auto; line-height: 0; }
body[data-ui="premium"] #wrapper a > img[alt="Logo"] { float: none !important; display: block; width: auto !important; height: auto !important; max-width: 100%; max-height: var(--ed-logo); margin: 0 !important; }
body[data-ui="premium"][data-scheme="dark"] #wrapper a > img[alt="Logo"] { filter: drop-shadow(0 6px 14px #0008); }

/* E2. Menu band; inline links so wrapped rows balance */
body[data-ui="premium"] #contentMenu { position: relative; clear: both; margin-top: 0; padding: 0; background: var(--ed-band); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body[data-ui="premium"] #contentMenu::before,
body[data-ui="premium"] #contentMenu::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--ed-hair) 15%, var(--ed-hair) 85%, transparent); }
body[data-ui="premium"] #contentMenu::after { top: auto; bottom: 0; }
body[data-ui="premium"] #contentMenu > .row { max-width: 1280px; }
body[data-ui="premium"] #contentMenu .MainMenuLink {
	display: block; float: none; width: 100%; max-width: none; margin: 0; padding: 6px var(--ed-side, 16px);
	background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
	text-align: center; text-wrap: balance; font-size: 0; line-height: 0;
}
body[data-ui="premium"] #contentMenu .MainMenuLink > br { display: none; }
body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink,
body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink:hover {
	position: relative; z-index: 0; display: inline-flex; align-items: center; vertical-align: top; height: var(--ed-mh, 44px); margin: 0 2px;
	padding: 0 calc(var(--ed-px) - var(--ed-ls)) 0 var(--ed-px); border: 0; border-radius: 0; background: none; box-shadow: none; filter: none;
	color: var(--ed-link); font: var(--ed-fw, 600) var(--ed-fs)/1 var(--ed-ff, var(--dgn-font-body)); letter-spacing: var(--ed-ls); text-shadow: var(--ed-ts, none);
}
body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink::after { content: ""; position: absolute; left: var(--ed-px); right: var(--ed-px); bottom: var(--ed-ub, 9px); height: 2px; border-radius: 1px; background: var(--ed-line); box-shadow: none; transform: scaleX(0); transition: transform var(--dgn-t-mid) var(--dgn-ease); }
body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink:is(:hover, :focus-visible, [aria-current="page"])::after { transform: scaleX(1); }
/* JOIN: a compact pill inside the full-height tap target */
body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink[href$="/join.cfm"],
body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink[href$="/join.cfm"]:is(:hover, :focus-visible) { background: none; box-shadow: none; filter: none; color: var(--ed-pill-ink); font-weight: var(--ed-jw, 700); text-shadow: none; }
body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink[href$="/join.cfm"]::before { content: ""; position: absolute; z-index: -1; inset: 8px 4px; border-radius: var(--dgn-r-pill); background: var(--ed-pill); box-shadow: inset 0 1px 0 #fff4; }
body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink[href$="/join.cfm"]:hover::before { filter: brightness(var(--ed-jb, 1.1)); box-shadow: inset 0 1px 0 #fff4, 0 0 0 2px var(--ed-ring, #ffffff8c); }
body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink[href$="/join.cfm"]::after { display: none; }
/* focus: two-tone ring, >= 3:1 on every band */
body[data-ui="premium"] :is(#contentMenu .MainMenuLink .MenuLink[href], #wrapper > .row a):focus-visible { outline: 3px solid var(--ed-fa); outline-offset: 0; box-shadow: 0 0 0 5px var(--ed-fb); border-radius: 8px; }
body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink[href$="/join.cfm"][href]:focus-visible { border-radius: var(--dgn-r-pill); }
body[data-ui="premium"] #content { margin-top: 28px; }
body[data-ui="premium"] :is(#content:has(> .video-banner:first-child), #content > .video-banner:first-child) { margin-top: 0; } /* same specificity as the two selectors */

@media (min-width: 1024px) {
	body[data-ui="premium"] { --ed-fs: 16px; --ed-side: 56px; } /* clear of the side tabs */
	body[data-ui="premium"] .VideoBoxMembers { --ed-cfs: 16px; --ed-clh: 19px; } /* at 1024 too (the tablet block reaches 1024) */
}
@media (min-width: 1024px) and (max-width: 1279.98px) { body[data-ui="premium"] { --ed-px: 13px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	body[data-ui="premium"] { --ed-head: 144px; --ed-logo: 96px; --ed-px: 12px; }
}
@media (max-width: 767.98px) {
	body[data-ui="premium"] { --ed-head: 104px; --ed-logo: 68px; --ed-px: 10px; --ed-mh: 40px; --ed-ub: 8px; }
	body[data-ui="premium"] #contentMenu .MainMenuLink { padding: 4px 8px; }
	body[data-ui="premium"] #contentMenu .MainMenuLink .MenuLink[href$="/join.cfm"]::before { inset: 6px 0; }
	body[data-ui="premium"] #content { margin-top: 20px; }
	body[data-ui="premium"] .row.rowpad:has(> .columns > div > .PicturesBox) { width: auto; margin-inline: 10px; } /* the Bonus row only: store panels keep their width */
	body[data-ui="premium"] .row.rowpad > .columns:first-child + .columns:has(> div > .PicturesBox):has(+ br) { width: 100%; }
}
@media (max-width: 360px) { body[data-ui="premium"] { --ed-logo: 62px; --ed-px: 8px; --ed-ls: .06em; }
}
@media (min-width: 1200px) {
	body[data-ui="premium"] .video-banner .video-content :is(h1, h2) { margin-inline: auto; text-wrap: balance; }
	body[data-ui="premium"] .video-banner .video-content h2 { max-width: 38em; }
}
@media (min-width: 1400px) { body[data-ui="premium"] .video-banner .video-content h1 { max-width: 40em; }
}

/* E3. Cards */
/* Foundation columns (members Lobby FavCard / Next Update) are not cards: their 15px gutter stays. :where() keeps this rule at 0,3,3 for every card */
body[data-ui="premium"] :is(.VideoBoxMembers, .PicBox, div:where(:not(.columns)):has(> .PicturesBox > a.reviewsAlink)) { position: relative; padding: 0; border: 1px solid var(--dgn-line); border-radius: var(--ed-r); background: var(--ed-strip); box-shadow: var(--dgn-elev-2); }
body[data-ui="premium"] :is(.PicBox, .VideoBoxMembers, .VideoBox, .PicturesBox)::before { box-shadow: var(--ed-hover); }
/* 16:9 frame + player/poster fill: dgn-premium P5b (vjs-fluid padding-top kept); here radius, zoom, centred play */
body[data-ui="premium"] .VideoBoxMembers > :is(div[style*="#777"], div:has(> video, > .video-js)) { border-radius: var(--ed-ri) var(--ed-ri) 0 0; container-type: inline-size; }
/* cards in one row end level: the card fills its column (the row is flex at phone / tablet widths) and the caption strip fills the card */
body[data-ui="premium"] :is(.columns:has(> .VideoBoxMembers), .columns > .VideoBoxMembers) { display: flex; flex-flow: column; }
body[data-ui="premium"] :is(.columns > .VideoBoxMembers, .VideoBoxMembers > :is(a:has(> .VideoBoxTextMembers), .VideoBoxTextMembers)) { flex: 1 0 auto; }
body[data-ui="premium"] .VideoBoxMembers > a:has(> .VideoBoxTextMembers) { display: grid !important; } /* only against the <a>'s inline display:block */
body[data-ui="premium"] .VideoBoxMembers > div:has(> .vjs-has-started) { z-index: 1; } /* a started player sits above its date chip (control bar stays reachable) */
body[data-ui="premium"] .VideoBoxMembers :is(video, .vjs-poster) { transition: transform var(--dgn-t-slow) var(--dgn-ease); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	body[data-ui="premium"] .VideoBoxMembers:hover > :is(div[style*="#777"], div:has(> video, > .video-js)) > video.video-js,
	body[data-ui="premium"] .VideoBoxMembers:hover :not(.vjs-has-started) > .vjs-poster { transform: scale(1.04); }
}
body[data-ui="premium"] .VideoBoxMembers .video-js .vjs-big-play-button { width: var(--ed-bp); height: var(--ed-bp); margin: calc(var(--ed-bp) / -2) 0 0 calc(var(--ed-bp) / -2); font-size: calc(var(--ed-bp) * .58); line-height: calc(var(--ed-bp) - 4px); border: 2px solid #ffffffd9; background-color: #0c0c0e80; color: #fff; box-shadow: 0 6px 18px #0006; }
body[data-ui="premium"] .VideoBoxMembers .video-js:hover .vjs-big-play-button { background-color: var(--ed-pill); color: var(--ed-pill-ink); }
/* "JOIN NOW WATCH FULL" (page rule: nowrap / 24px): wraps and scales to the frame */
body[data-ui="premium"] .VideoBoxMembers .vjs-paused-overlay { box-sizing: border-box; width: max-content; max-width: calc(100% - 16px); white-space: normal; font-size: clamp(14px, 6.4cqi, 24px); line-height: 1.2; text-align: center; text-wrap: balance; }
body[data-ui="premium"] :is(.PicBox, .VideoBoxMembers, .row.rowpad:has(> .columns > div > .PicturesBox)) > br { display: none; }
body[data-ui="premium"] .info-popup .fi-x { flex: none; } /* its 32px circle (dgn-premium P8) never shrinks under 24px beside a long title */
body[data-ui="premium"] .VideoBoxMembers > .info-popup { top: 100%; } /* the card is a flex column: the pop-up (inline position:absolute, no top) would otherwise open at the card top; this keeps it 5px under the caption */
body[data-ui="premium"] .PicBox :is(.ImgBoxHome, .ImgBoxHome a.reviewsAlink) { border-radius: var(--ed-ri) var(--ed-ri) 0 0; }
body[data-ui="premium"] :is(.PicBox .ImgBoxHome, .PicturesBox > a.reviewsAlink) img { border-radius: 0 !important; }
body[data-ui="premium"] :is(.VideoBoxMembers .VideoBoxTextMembers, .PicBox .PicBoxTextBox, .PicBox > .VideoBoxTextMembers, .PicturesBox + .PicturesBoxText) {
	height: auto; min-height: var(--ed-cap); margin: 0; left: 0; top: 0; border: 0; border-radius: 0 0 var(--ed-ri) var(--ed-ri); box-shadow: none;
	background: linear-gradient(var(--ed-line), var(--ed-line)) 0 0 / 100% 2px no-repeat border-box, var(--ed-strip);
}
body[data-ui="premium"] .PicBox .PicBoxTextBox { padding: 0; }
/* titles wrap (never an ellipsis); transparent borders: 3px top = the line, the sides = room for the info icon */
body[data-ui="premium"] :is(.VideoBoxMembers .VideoBoxTextMembers, .PicBoxTextBox .PicBoxText, .PicBox > .VideoBoxTextMembers, .PicturesBox + .PicturesBoxText) {
	display: flex; align-items: center; justify-content: center; height: auto; min-height: var(--ed-cap);
	border-style: solid; border-color: transparent; border-width: 3px var(--ed-br, 0) 0 var(--ed-bl, 0);
	color: var(--ed-ink); font: 600 var(--ed-cfs, 15px)/var(--ed-clh) var(--dgn-font-body); text-align: center; text-shadow: none; white-space: normal; text-wrap: balance; overflow: visible;
}
body[data-ui="premium"] :is(.VideoBoxMembers .VideoBoxTextMembers, .PicBoxTextBox .PicBoxText) { --ed-bl: 2px; --ed-br: 26px; }
body[data-ui="premium"] :is(.PicBox > .VideoBoxTextMembers, .PicturesBox + .PicturesBoxText) { position: relative; padding: 0 14px; }
body[data-ui="premium"] .PicBox > .VideoBoxTextMembers { text-indent: -.25em; } /* leading &nbsp; */
/* info: a 28px glass circle, centred on the title (+1.5px: the 3px top border) */
body[data-ui="premium"] :is(.PicBoxText, .VideoBoxMembers .VideoBoxTextMembers) > i.info-icon-trigger { left: 4px; top: calc(50% + 1.5px); width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--ed-ib); box-shadow: inset 0 0 0 1px var(--ed-ir); line-height: 31px; color: var(--ed-ic, var(--dgn-on-surface)); text-shadow: none; }
body[data-ui="premium"] :is(.PicBoxText, .VideoBoxTextMembers, .PicturesBoxText) > :is(span[id^="date_"], span[style*="bottom"]) {
	position: absolute !important; left: var(--ed-dt) !important; bottom: calc(100% + 10px) !important; padding: 3px 9px; border: 1px solid #ffffff2e;
	border-radius: var(--dgn-r-pill); background: #0c0c0e99; color: #fff; font-family: var(--dgn-font-body); font-weight: 600; line-height: 1.35; letter-spacing: .03em; text-indent: 0; text-shadow: none !important;
}
/* video date: on the poster */
body[data-ui="premium"] .VideoBoxMembers > a > .VideoBoxTextMembers > span[id^="date_"] { bottom: 100% !important; margin-bottom: var(--ed-dm, calc(56.25% - var(--ed-dt) - var(--ed-dh))); }
body[data-ui="premium"] .VideoBoxMembers > .VideoBoxTextMembers > span[id^="date_"] { top: var(--ed-dt); bottom: auto !important; left: var(--ed-dt) !important; }

/* E4. Bonus / Coming Soon */
body[data-ui="premium"] .row.rowpad:has(> .columns > div > .PicturesBox) { display: flex; flex-wrap: wrap; justify-content: center; }
body[data-ui="premium"] .row.rowpad:has(> .columns > div > .PicturesBox) > .columns:first-child { text-align: center; }
body[data-ui="premium"] .row.rowpad:has(> .columns > div > .PicturesBox) > .columns:first-child .TextHomeTop::after { margin-inline: auto; }
body[data-ui="premium"] div:has(> .PicturesBox > a.reviewsAlink) { margin-bottom: 24px; }
body[data-ui="premium"] div:where(:not(.columns)):has(> .PicturesBox > a.reviewsAlink):is(:hover, :focus-within) { box-shadow: var(--ed-hover); }
body[data-ui="premium"] .PicturesBox:has(> a.reviewsAlink) { padding: 0; border: 0; border-radius: var(--ed-ri) var(--ed-ri) 0 0; background: none; box-shadow: none; }
body[data-ui="premium"] .PicturesBox:has(> a.reviewsAlink)::before { display: none; }
body[data-ui="premium"] .PicturesBox > a.reviewsAlink { display: block; border-radius: inherit; }
/* photo cards: keyboard ring on the card (the image link outline is clipped by .ImgBoxHome overflow); 0,4,2 beats the card box-shadow (0,3,3) */
body[data-ui="premium"] .PicBox:has(a[href]:focus-visible) { outline: 3px solid var(--ed-fa); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ed-fb); }
@media (prefers-reduced-motion: reduce) { body[data-ui="premium"] { --dgn-zoom: 1; }
} /* no photo hover zoom either */
@media (prefers-reduced-motion: no-preference) { /* the title rides with its picture's reveal */
	body[data-ui="premium"] .PicturesBox.dgn-reveal + .PicturesBoxText { transition: opacity var(--dgn-t-slow) var(--dgn-ease), transform var(--dgn-t-slow) var(--dgn-ease); }
	body[data-ui="premium"] .PicturesBox.dgn-reveal:not(.dgn-in) + .PicturesBoxText { opacity: 0; transform: translateY(14px); }
}

/* E5. Tablets (to 1024: Foundation large starts at 1025): video cards two-up, clear of the side tabs; the Bonus row matches their inset */
@media (min-width: 641px) and (max-width: 1024.98px) {
	body[data-ui="premium"] { --ed-cap: 52px; --ed-cfs: 14px; --ed-clh: 16px; }
	body[data-ui="premium"] .row:has(> .columns:not(.large-12) > .VideoBoxMembers) { display: flex; flex-wrap: wrap; margin: 0 auto; padding: 0 20px; }
	body[data-ui="premium"] .row:has(> .columns:not(.large-12) > .VideoBoxMembers) > .columns { width: 100%; padding: 0 12px; }
	body[data-ui="premium"] .row:has(> .columns:not(.large-12) > .VideoBoxMembers) > .columns:has(> .VideoBoxMembers) { width: 50%; }
	body[data-ui="premium"] .row:has(> .columns > .PicBox) { margin: 0 auto; padding: 0 24px; }
	body[data-ui="premium"] .row.rowpad:has(> .columns > div > .PicturesBox) { width: auto; margin-inline: 32px; }
}
/* E6. Phones */
@media (max-width: 640px) {
	body[data-ui="premium"] { --ed-cap: 50px; --ed-cfs: 13px; --ed-clh: 15px; --ed-bp: 44px; --ed-dt: 6px; --ed-dh: 22px; }
	body[data-ui="premium"] :is(.VideoBoxMembers .VideoBoxTextMembers, .PicBoxTextBox .PicBoxText) { --ed-bl: 6px; --ed-br: 30px; }
	body[data-ui="premium"] .VideoBoxMembers .VideoBoxTextMembers > span[id^="date_"] { padding: 2px 7px; }
	body[data-ui="premium"] .VideoBoxMembers > img[alt="Hot"] { width: min(100px, 34%) !important; height: auto !important; aspect-ratio: 10 / 7; } /* !important: inline size */
}
@media (max-width: 420px) { /* the smallest tiles: the date sits bottom-left of the poster, clear of the play button and the price / Hot badges */
	body[data-ui="premium"] { --ed-bp: 38px; --ed-dt: 4px; --ed-dh: 18px; --ed-dm: 4px; }
	body[data-ui="premium"] .VideoBoxMembers .VideoBoxTextMembers > span[id^="date_"] { padding: 1px 6px; line-height: 1.2; }
}

/* ==========================================================================
   Round 3 (owner review): the Round 2 look on pages with their own markup: RLC and DGN own home pages
   (.VideoBox cards, Coming Soon carousel), reviews, aboutme, stories, videos4sale, tooltips, sticky JOIN.
   Verified on 8 brands 344-1920px (text unchanged, no overflow, hover moves nothing). Kept after Round 2.
   ========================================================================== */
/*! Round 3: brand-own pages in the Round 2 "editorial" look. Load after dgn-premium.css (its --ed-* tokens) */

/* R1. RLC home .VideoBox and DGN "Coming Soon" orbit = Round 2 E3/E4 card: shell, strip, chips */
body[data-ui="premium"] :is(.VideoBox, .PicturesBox:has(> .orbit-container)) { height: auto !important; padding: 0; border: 1px solid var(--dgn-line); border-radius: var(--ed-r); background: var(--ed-strip); box-shadow: var(--dgn-elev-2); } /* !important: inline height */
body[data-ui="premium"] :is(.VideoBox .VideoBoxText, .orbit-slides-container > li > .orbit-caption) {
	position: relative; top: auto; display: flex; flex: 1 0 auto; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: auto; min-height: var(--ed-cap); margin: 0; padding: 0 14px;
	border: solid transparent; border-width: 3px 0 0; border-radius: 0 0 var(--ed-ri) var(--ed-ri); box-shadow: none; background: linear-gradient(var(--ed-line), var(--ed-line)) 0 0 / 100% 2px no-repeat border-box, var(--ed-strip);
	color: var(--ed-ink); font: 600 var(--ed-cfs, 15px)/var(--ed-clh) var(--dgn-font-body); text-align: center; text-shadow: none; white-space: normal; text-wrap: balance; overflow: visible;
} /* no info icon here: symmetric padding */
body[data-ui="premium"] :is(.VideoBoxText > span[style*="bottom"], .orbit-caption > span[style*="bottom"], .orbit-container > .orbit-slide-number) {
	padding: 3px 9px; border: 1px solid #ffffff2e; border-radius: var(--dgn-r-pill); background: #0c0c0e99; color: #fff; font: 600 12px/1.35 var(--dgn-font-body); letter-spacing: .03em; text-shadow: none !important;
} /* !important: inline */
/* RLC: flex rows (cards end level); 16:9 frame (!important: inline img styles) */
body[data-ui="premium"] .row:has(> .columns > .VideoBox) { display: flex; flex-wrap: wrap; }
body[data-ui="premium"] .row:has(> .columns > .VideoBox)::before, body[data-ui="premium"] .row:has(> .columns > .VideoBox)::after, body[data-ui="premium"] .VideoBox > br { display: none; }
body[data-ui="premium"] :is(.columns:has(> .VideoBox), .VideoBox) { display: flex; flex-flow: column; }
body[data-ui="premium"] .VideoBox { flex: 1 0 auto; }
body[data-ui="premium"] .VideoBox > a.reviewsAlink { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ed-ri) var(--ed-ri) 0 0; }
body[data-ui="premium"] .VideoBox > a.reviewsAlink > img { display: block; float: none !important; width: 100% !important; height: 100% !important; padding: 0 !important; border-radius: 0 !important; object-fit: cover; transition: transform var(--dgn-t-slow) var(--dgn-ease); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { body[data-ui="premium"] .VideoBox:hover > a.reviewsAlink > img { transform: scale(1.04); }
}
body[data-ui="premium"] .VideoBox .play-btn, body[data-ui="premium"] .VideoBox:hover .play-btn { display: grid; place-items: center; box-sizing: border-box; width: var(--ed-bp); height: var(--ed-bp); padding: 0; border: 2px solid #ffffffd9; border-radius: 50%; background: #0c0c0e80; box-shadow: 0 6px 18px #0006; }
body[data-ui="premium"] .VideoBox .play-btn::after { display: block; left: 2px; border-width: calc(var(--ed-bp) * .2) 0 calc(var(--ed-bp) * .2) calc(var(--ed-bp) * .32); border-left-color: #fff; }
body[data-ui="premium"] .VideoBox:hover .play-btn { background: var(--ed-pill); } /* hover fills only */
body[data-ui="premium"] .VideoBox:hover .play-btn::after { border-left-color: var(--ed-pill-ink); }
body[data-ui="premium"] .VideoBoxText > span[style*="bottom"] { top: var(--ed-dt); left: var(--ed-dt) !important; bottom: auto !important; }
body[data-ui="premium"] .VideoBoxMembers > .VideoBoxTextMembers > span[style*="bottom"] { top: var(--ed-dt); left: var(--ed-dt) !important; bottom: auto !important; } /* videos4sale id-less date (static caption): on the poster, as E3's direct-child date */
@media (min-width: 1024px) { body[data-ui="premium"] .VideoBox { --ed-cfs: 16px; }
}
@media (min-width: 641px) and (max-width: 1024.98px) { /* two-up, E5 inset */
	body[data-ui="premium"] .row:has(> .columns > .VideoBox) { margin: 0 auto; padding: 0 20px; }
	body[data-ui="premium"] .row > .columns:has(> .VideoBox) { width: 50%; padding: 0 12px; }
}
@media (max-width: 640px) { body[data-ui="premium"] :is(.VideoBoxText, .VideoBoxMembers > .VideoBoxTextMembers) > span[style*="bottom"] { padding: 2px 7px; }
}
@media (max-width: 420px) { /* bottom-left of the poster (margin % = card width) */
	body[data-ui="premium"] :is(.VideoBoxText > span[style*="bottom"], .VideoBoxMembers > .VideoBoxTextMembers > :is(span[id^="date_"], span[style*="bottom"])) { top: 0; margin-top: calc(56.25% - var(--ed-dh) - var(--ed-dm)); padding: 1px 6px; line-height: 1.2; }
}
/* orbit: the shown slide sets the height; one slide = no arrows / timer / dots; "1 of 1" stays, as a chip */
body[data-ui="premium"] .PicturesBox > .orbit-container { border-radius: var(--ed-ri); }
body[data-ui="premium"] .orbit-container > .orbit-slides-container { height: auto !important; margin: 0; } /* !important: inline */
body[data-ui="premium"] .orbit-slides-container > li.active { position: relative; }
body[data-ui="premium"] .orbit-slides-container > li > img { width: 100%; }
body[data-ui="premium"] .orbit-caption > a.reviewsAlink { color: inherit; text-underline-offset: 3px; }
body[data-ui="premium"] .orbit-caption > a.reviewsAlink:is(:hover, :focus-visible) { color: inherit; text-decoration: underline; }
body[data-ui="premium"] .orbit-caption > span[style*="bottom"] { left: var(--ed-dt) !important; bottom: calc(100% + 10px) !important; }
body[data-ui="premium"] .orbit-container:not(:has(> .orbit-slides-container > li + li)) > :is(.orbit-prev, .orbit-next, .orbit-timer, .orbit-bullets-container) { display: none; }
body[data-ui="premium"] .PicturesBox .orbit-bullets { top: auto; margin: 8px auto; }
body[data-ui="premium"] .PicturesBox .orbit-container > .orbit-slide-number { top: var(--ed-dt); right: var(--ed-dt); left: auto; padding: 0 4px; }
body[data-ui="premium"] .PicturesBox .orbit-container:has(> .orbit-slides-container > li + li) > .orbit-slide-number { right: auto; left: var(--ed-dt); } /* with 2+ slides the orbit timer sits top-right: the counter moves to the free top-left */
body[data-ui="premium"] .orbit-container > .orbit-slide-number span { padding: 3px 2px; line-height: inherit; }
body[data-ui="premium"] div:has(+ div > .PicturesBox > .orbit-container) > .TextHomeTopblue { margin-bottom: 12px; }

/* R2. News box: always scrollable (touch; no hover reflow); a brand line while more is below */
body[data-ui="premium"] .columns > div[onmouseover*="overflow"] { overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: rgba(var(--dgn-accent-rgb), .7) transparent; animation: dgn-more linear both; animation-timeline: scroll(self); } /* !important: inline */
@keyframes dgn-more { 0%, 92% { box-shadow: inset 0 -2px 0 rgba(var(--dgn-accent-rgb), .6); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { body[data-ui="premium"] .columns > div[onmouseover*="overflow"] { box-shadow: inset 0 -2px 0 rgba(var(--dgn-accent-rgb), .6); }
}
/* R2b. Every inner scroll box (lobby bookshelf, TV guide "On Today", chat, lists) gets the news-box scrollbar: thin, brand thumb, no
   track. :where() = zero specificity, so a component with its own scrollbar colours keeps them; the page (root) scrollbar stays native. */
:where(body[data-ui="premium"] *) { scrollbar-width: thin; scrollbar-color: rgba(var(--dgn-accent-rgb), .7) transparent; }

/* R3. Caption tooltips (no info icon on brand homes): info pop-up look, wider = shorter; margin-right keeps an auto-width tip clear of the fixed side tabs (small: width 100%, unaffected) */
body[data-ui="premium"] .tooltip { max-width: min(540px, calc(100vw - 32px)); margin-right: 64px; padding: 12px 14px; border: 1px solid var(--dgn-line-brand); border-radius: var(--ed-r); background: #16161af0; box-shadow: var(--dgn-elev-3); color: #f2f2f4; font: 400 14px/1.5 var(--dgn-font-body); }
body[data-ui="premium"] .tooltip > .nub { border-bottom-color: #16161af0; }

/* R4. Sticky menu = Round 2 band: underline, JOIN pill; sizes fixed on hover */
body[data-ui="premium"] .dgn-sticky a.dgn-sticky__link:is([href], [aria-current]) {
	position: relative; z-index: 0; display: inline-flex; align-items: center; height: var(--ed-mh, 44px); padding: 0 calc(var(--ed-px) - var(--ed-ls)) 0 var(--ed-px); border-radius: 0;
	background: none; box-shadow: none; filter: none; outline: 0; font: 600 var(--ed-fs)/1 var(--dgn-font-body); letter-spacing: var(--ed-ls); animation: none;
}
body[data-ui="premium"] .dgn-sticky a.dgn-sticky__link::after { content: ""; position: absolute; left: var(--ed-px); right: var(--ed-px); bottom: var(--ed-ub, 9px); height: 2px; border-radius: 1px; background: var(--ed-line); transform: scaleX(0); transition: transform var(--dgn-t-mid) var(--dgn-ease); }
body[data-ui="premium"] .dgn-sticky a.dgn-sticky__link:is(:hover, :focus-visible, [aria-current="page"])::after { transform: scaleX(1); }
body[data-ui="premium"] .dgn-sticky a.dgn-sticky__link.dgn-join { font-weight: 700; }
body[data-ui="premium"] .dgn-sticky a.dgn-join::before { content: ""; position: absolute; z-index: -1; inset: 8px 4px; border-radius: var(--dgn-r-pill); background: var(--ed-pill); box-shadow: inset 0 1px 0 #fff4; }
body[data-ui="premium"] .dgn-sticky a.dgn-join:hover::before { filter: brightness(var(--ed-jb, 1.1)); box-shadow: inset 0 1px 0 #fff4, 0 0 0 2px #ffffff8c; }
body[data-ui="premium"] .dgn-sticky a.dgn-join::after { display: none; }
body[data-ui="premium"] .dgn-sticky a.dgn-sticky__link:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 5px #0c0c0ee6; border-radius: 8px; }
@media (max-width: 767.98px) { body[data-ui="premium"] .dgn-sticky a.dgn-join::before { inset: 6px 0; }
}

/* R5. reviews.cfm: premium panel on dark schemes, quote 4.5:1, directory grid */
body[data-ui="premium"][data-scheme="dark"] #content > .row[style*="background-color:#ffffff"][style*="border-radius: 20px"] { padding-top: 28px !important; background: var(--dgn-surface-1) !important; border: 1px solid var(--dgn-line); box-shadow: inset 0 3px 0 rgba(var(--dgn-accent-rgb), .9), var(--dgn-elev-3); } /* !important: inline */
body[data-ui="premium"][data-scheme="dark"] #content > .row[style*="background-color:#ffffff"][style*="border-radius: 20px"] a.TextHomeTopblue > img { border-radius: 2px; background: #fff; box-shadow: 0 0 0 3px #fff; } /* third-party logos (e.g. black wordmark on transparent) keep the white ground they were drawn for; the 3px frame is a shadow, so no logo or tile changes size */
body[data-ui="premium"] p.TextBoxLikePicture[style*="color"] { color: var(--dgn-text) !important; } /* !important: inline */
body[data-ui="premium"] .row:has(> .medium-2.small-3.columns) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
body[data-ui="premium"] .row:has(> .medium-2.small-3.columns)::before, body[data-ui="premium"] .row:has(> .medium-2.small-3.columns)::after { display: none; }
body[data-ui="premium"] .row > .medium-2.small-3.columns { display: flex; flex-flow: column; align-items: center; gap: 6px; float: none; width: auto; padding: 8px 4px; border: 1px solid var(--dgn-line); border-radius: var(--ed-r); background: var(--ed-strip); text-align: center; }
body[data-ui="premium"] .row > .medium-2.small-3.columns > a:first-child { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; }
body[data-ui="premium"] .row > .medium-2.small-3.columns > ul { margin: 0; list-style: none; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
@media (min-width: 1025px) { body[data-ui="premium"] .row:has(> .medium-2.small-3.columns) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 360px) { body[data-ui="premium"] .row > .medium-2.small-3.columns > ul { font-size: 13px; }
}

/* R6. contactus: headings stack; selfie placeholder under the band, never upscaled */
body[data-ui="premium"] #content h2.SendUs + h2.SendUs2 { margin-top: 0; }
body[data-ui="premium"] #content img[src*="FileNotFound220x330"][style*="margin-top"] { display: block; width: auto !important; height: auto !important; max-width: min(100%, 330px); margin: 0 auto !important; border: 0 !important; border-radius: var(--ed-r); } /* !important: inline */

/* R7. memberslogin contrast >= 4.5:1 (brand colours) */
body[data-ui="premium"][data-scheme="light"] :is(.MambLogBox h2.MEMBERS, a[data-reveal-id="LoginProblem"]) { color: var(--dgn-on-surface); }

/* R8. aboutme: Round 2 play circle, room under the player, closing headline inside its picture */
body[data-ui="premium"] #DGNVP_00 .vjs-big-play-button { top: 50%; left: 50%; width: var(--ed-bp); height: var(--ed-bp); margin: calc(var(--ed-bp) / -2) 0 0 calc(var(--ed-bp) / -2); border: 2px solid #ffffffd9; border-radius: 50%; background-color: #0c0c0e80; color: #fff; font-size: calc(var(--ed-bp) * .58); line-height: calc(var(--ed-bp) - 4px); box-shadow: 0 6px 18px #0006; }
body[data-ui="premium"] #DGNVP_00:hover .vjs-big-play-button { background-color: var(--ed-pill); color: var(--ed-pill-ink); }
body[data-ui="premium"] .row.rowpad > .columns:has(> .row > #DGNVP_00) { padding-bottom: 20px; }
@media (max-width: 640px) { /* last line ~14px above the picture bottom (20% / -26% margins, 934x503 art) */
	body[data-ui="premium"] .row.rowpad[style*="height: 0px"] h1[style*="top:150px"] { top: calc(27.85vw - 7px) !important; font-size: clamp(20px, 6.2vw, 34px); line-height: 1.2; } /* !important: inline */
}

/* R9. DGN about: premium panel, text 4.5:1, heading clear of the top line */
body[data-ui="premium"][data-scheme="dark"] .main > .row.rowpad:has(> p.TextHomeTop) { padding-top: 24px; background: var(--dgn-surface-1); color: var(--dgn-text); }
body[data-ui="premium"][data-scheme="dark"] .main > .row.rowpad:has(> p.TextHomeTop) p:not(.TextHomeTop) { color: var(--dgn-text); }

/* RLC own home (.VideoBox): the (i) description button and pop-up like the shared cards. The caption becomes the icon's
   positioning box, so its date chip is placed on the poster with Round 2's trick (a percentage margin = 56.25% of the
   card width = the 16:9 poster height); at <=420px --ed-dm puts it bottom-left, as on the other video cards */
body[data-ui="premium"] .VideoBox .VideoBoxText:has(> i.info-icon-trigger) {
	position: relative !important;
	padding-left: 36px;
	padding-right: 36px;
}
body[data-ui="premium"] .VideoBox .VideoBoxText > i.info-icon-trigger {
	position: absolute;
	left: 4px;
	top: calc(50% - .5px);
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	border-radius: 50%;
	background: var(--ed-ib);
	box-shadow: inset 0 0 0 1px var(--ed-ir);
	color: var(--ed-ic, var(--dgn-on-surface));
	font-size: 18px !important;
	line-height: 31px;
	text-align: center;
	text-shadow: none;
}
body[data-ui="premium"] .VideoBox .VideoBoxText:has(> i.info-icon-trigger) > span[style*="bottom"] {
	top: auto;
	bottom: 100% !important;
	margin: 0 0 var(--ed-dm, calc(56.25% - var(--ed-dt) - var(--ed-dh)));
}
body[data-ui="premium"] .VideoBox > .info-popup {
	top: 100%;
}

/* Member pages (checked logged in, 2026-10-03) */
/* shop.cfm / members/shop.cfm: shop.css paints the mall directory links #0088cc; the premium chips are outlined pills */
body[data-ui="premium"] .MallMenu > .columns > a {
	background-color: transparent;
}
/* members/membershipdetails.cfm (details.css): the grey card with grey text (about 2:1) becomes the brand surface */
body[data-ui="premium"] .container:has(> .rightbox) {
	background: var(--dgn-surface-2);
	border: 1px solid var(--dgn-line);
	box-shadow: var(--dgn-elev-3), inset 0 3px 0 rgba(var(--dgn-accent-rgb), .85);
}
body[data-ui="premium"] .container:has(> .rightbox) .rightbox p {
	color: var(--dgn-text);
}
body[data-ui="premium"] .container:has(> .rightbox) .rightbox p.textdetails {
	color: var(--dgn-text-2);
}
/* Members on phones: the fixed account panel (.ControlBar, about 32-162px from the top) covered the first menu row,
   because the compact premium header is shorter than the classic one. Keep the menu below the panel. */
@media (max-width: 767.98px) {
	body[data-ui="premium"]:has(> .ControlBar) #wrapper {
		min-height: 168px;
	}
}

/* ===== Side tabs clear of the content (2026-10-04) ===== */
/* The TV (left) and search (right) pull tabs are fixed to the window edges: 54 x 50 px from 1024 px (games / search
   components.css), 26 x 44 px low on the screen below 1024 px (dgn-ux.css 10g). Up to 1139 px the 1000 px page grid left
   them over cards, captions, text and buttons. Here the page steps in from the edges just enough: --dgn-tabs-gut pads
   #content and the footer, --dgn-tab-clear (tab width + 3-4 px) is where content may start. The hero and RLC's own bands
   stay edge to edge with their text inside --dgn-tab-clear. From 1140 px nothing here applies. Roll back: delete this
   section (it ends at the AID brand block). */
@media (max-width: 1023.98px) { body[data-ui="premium"] { --dgn-tabs-gut: 18px; --dgn-tab-clear: 29px; }
}
@media (min-width: 1024px) and (max-width: 1139.98px) { body[data-ui="premium"] { --dgn-tabs-gut: 58px; --dgn-tab-clear: 58px; }
}
@media (max-width: 1139.98px) {
	body[data-ui="premium"] :is(#content, #wrapper2) { padding-left: var(--dgn-tabs-gut); padding-right: var(--dgn-tabs-gut); }
	/* full-bleed parts stay edge to edge: home hero, RLC bands, a footer inside #content (memberslogin); min-width outranks
	   the hero's .w-100 width without !important */
	body[data-ui="premium"] #content > :is(.video-banner:first-child, section, .cta-one, #wrapper2) { min-width: calc(100% + 2 * var(--dgn-tabs-gut)); margin-left: calc(-1 * var(--dgn-tabs-gut)); margin-right: calc(-1 * var(--dgn-tabs-gut)); }
	body[data-ui="premium"] #content > section > .container { padding-left: var(--dgn-tab-clear); padding-right: var(--dgn-tab-clear); }
	body[data-ui="premium"] #content > .mailchimp-one .inner-container { margin-left: calc(var(--dgn-tab-clear) - var(--dgn-tabs-gut)); margin-right: calc(var(--dgn-tab-clear) - var(--dgn-tabs-gut)); } /* RLC home join card */
	/* the narrower video cards: a long caption word may no longer widen the caption past its card */
	body[data-ui="premium"] .VideoBoxMembers > a:has(> .VideoBoxTextMembers) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023.98px) { /* panels that reach the row edge: framed rows (.rowpad: stores, aboutme; the reviews panel), and those a nested Foundation row (-15px
	   margins) pulls out: shop stores, mall directory, join boxes */
	body[data-ui="premium"] #content .row.rowpad,
	body[data-ui="premium"] #content > .row[style*="border-radius"] { width: auto; margin-left: calc(var(--dgn-tab-clear) - var(--dgn-tabs-gut)); margin-right: calc(var(--dgn-tab-clear) - var(--dgn-tabs-gut)); }
	body[data-ui="premium"] #content .columns > .row:is(.rowpad, .MallMenu, .BlueAdText) { margin-left: calc(var(--dgn-tab-clear) - var(--dgn-tabs-gut) - 15px); margin-right: calc(var(--dgn-tab-clear) - var(--dgn-tabs-gut) - 15px); }
	body[data-ui="premium"] #content .columns > div:is(.PinkAdTextFm, .OffAdTextFm, .BlueAdText) { margin-left: calc(var(--dgn-tab-clear) - var(--dgn-tabs-gut)); margin-right: calc(var(--dgn-tab-clear) - var(--dgn-tabs-gut)); }
	/* purchase.cfm: the framed step boxes and the full-width CONTINUE row (its column has an inline padding: 0) */
	body[data-ui="premium"] #content .row:is(.StepBoxes, :has(> .columns[style*="padding: 0"] > .buttonDGNMiddle)) { width: auto; margin-left: calc(var(--dgn-tab-clear) - var(--dgn-tabs-gut)); margin-right: calc(var(--dgn-tab-clear) - var(--dgn-tabs-gut)); }
}
@media (min-width: 768px) and (max-width: 1139.98px) { /* hero points strip (a band over the video here) */
	body[data-ui="premium"] .video-banner .video-points .centerwrap { padding-left: calc(var(--dgn-tab-clear) - 12px); padding-right: calc(var(--dgn-tab-clear) - 12px); }
}
@media (max-width: 767.98px) { /* hero glass card and points strip; the strip is centred by .mx-auto (!important), so its width sets the inset; #_ outranks brand blocks */
	body[data-ui="premium"] .video-banner .video-content { margin-left: var(--dgn-tab-clear); margin-right: var(--dgn-tab-clear); }
	body[data-ui="premium"]:not(#_) .video-banner .video-points { width: calc(100% - 2 * var(--dgn-tab-clear)); }
	/* shop token store: the nowrap "become a member" button ran past its panel */
	body[data-ui="premium"] .ShopTokensGroup a.tributeButtons { max-width: 100%; white-space: normal; }
}

/* ---- P25. Mails (members/mails.cfm, #content.dgn-page.dgn-mails). The DataTables list was a bare white Foundation table with an ID
   column and the member's own address repeated on every row (both now hidden in the page script); now one premium panel, readable
   rows that open the mail on click (the mail itself shows in a sandboxed frame inside the dialog). Text unchanged. ---- */
body[data-ui="premium"] .dgn-mails #mailsTbl_wrapper {
	margin: 8px 0 34px;
	padding: 18px clamp(14px, 3vw, 28px) 20px;
	background: var(--dgn-surface-1);
	border: 1px solid var(--dgn-line);
	border-top: 3px solid var(--dgn-accent);
	border-radius: var(--dgn-r-l);
	box-shadow: var(--dgn-elev-2);
	-webkit-backdrop-filter: blur(var(--dgn-blur));
	backdrop-filter: blur(var(--dgn-blur));
}
body[data-ui="premium"] .dgn-mails :is(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_processing) { color: var(--dgn-text-2); font-size: 14px; }
body[data-ui="premium"] .dgn-mails :is(.dataTables_length, .dataTables_filter) label { color: var(--dgn-text-2); font-size: 14px; }
body[data-ui="premium"] .dgn-mails .dataTables_filter input { min-width: 200px; margin-left: 8px; border-radius: var(--dgn-r-pill); }
body[data-ui="premium"] .dgn-mails .dataTables_length select { border-radius: var(--dgn-r-s); }
body[data-ui="premium"] .dgn-mails table.dataTable { width: 100% !important; margin: 12px 0 6px !important; background: transparent; border: 0; border-collapse: separate; border-spacing: 0 6px; }
body[data-ui="premium"] .dgn-mails table.dataTable thead { background: transparent; }
body[data-ui="premium"] .dgn-mails table.dataTable thead th { padding: 6px 16px 8px; border: 0; border-bottom: 1px solid var(--dgn-line); background: transparent; color: var(--dgn-text-2); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body[data-ui="premium"] .dgn-mails table.dataTable tbody tr { background: color-mix(in srgb, var(--dgn-text) 6%, transparent) !important; cursor: pointer; transition: background-color var(--dgn-t-fast), box-shadow var(--dgn-t-fast); } /* !important: Foundation zebra rows */
body[data-ui="premium"] .dgn-mails table.dataTable tbody tr:is(:hover, :focus-within) { background: rgba(var(--dgn-accent-rgb), .14) !important; box-shadow: inset 3px 0 0 var(--dgn-accent); }
body[data-ui="premium"] .dgn-mails table.dataTable tbody td { padding: 14px 16px; border: 0; color: var(--dgn-text); font-size: 15px; line-height: 1.4; vertical-align: middle; }
body[data-ui="premium"] .dgn-mails table.dataTable tbody td:first-child { border-radius: var(--dgn-r-m) 0 0 var(--dgn-r-m); }
body[data-ui="premium"] .dgn-mails table.dataTable tbody td:last-child { border-radius: 0 var(--dgn-r-m) var(--dgn-r-m) 0; }
body[data-ui="premium"] .dgn-mails table.dataTable tbody td.dgn-mail-subject { font-weight: 600; overflow-wrap: break-word; }
body[data-ui="premium"] .dgn-mails table.dataTable tbody td.dgn-mail-date { width: 1%; color: var(--dgn-text-2); font-size: 14px; white-space: nowrap; }
body[data-ui="premium"] .dgn-mails table.dataTable tbody td.dgn-mail-action { width: 1%; padding-left: 4px; }
body[data-ui="premium"] .dgn-mails table.dataTable thead th:is(.dgn-mail-date, .dgn-mail-action) { width: 1%; white-space: nowrap; }
body[data-ui="premium"] .dgn-mails table.dataTable tbody td.dataTables_empty { color: var(--dgn-text-2); text-align: center; cursor: default; }
body[data-ui="premium"] .dgn-mails .btn-view { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--dgn-accent); color: var(--dgn-site-ink); box-shadow: var(--dgn-glow-1); transition: transform var(--dgn-t-fast) var(--dgn-ease); }
body[data-ui="premium"] .dgn-mails .btn-view i { color: var(--dgn-site-ink); font-size: 15px; }
body[data-ui="premium"] .dgn-mails table.dataTable tbody tr:hover .btn-view { transform: scale(1.08); }
@media (max-width: 640px) {
	body[data-ui="premium"] .dgn-mails #mailsTbl_wrapper > .row > .columns { width: 100%; float: none; }
	body[data-ui="premium"] .dgn-mails :is(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate) { float: none; text-align: left; }
	body[data-ui="premium"] .dgn-mails table.dataTable :is(th, td).dgn-mail-action { display: none; } /* the whole row opens the mail */
	body[data-ui="premium"] .dgn-mails .dataTables_filter input { width: 100%; min-width: 0; margin: 6px 0 0; }
	body[data-ui="premium"] .dgn-mails table.dataTable tbody td { padding: 12px 10px; font-size: 14.5px; }
}