:root {
	--dd-splash-offset-bottom: 20px;
	--dd-splash-offset-left: 20px;
	--dd-splash-bubble-min: 220px;
}

.dd-splash {
	--dd-splash-bg: #21382D;
	--dd-splash-color: #FFFFFF;
	--dd-splash-bubble-max: 400px;
	position: relative;
	width: 100%;
	z-index: 50;
}

.dd-splash__bubble,
.dd-splash__banner {
	background-color: var(--dd-splash-bg);
	color: var(--dd-splash-color);
	box-sizing: border-box;
}

.dd-splash__bubble a,
.dd-splash__banner a {
	color: inherit;
}

a.dd-splash__bubble,
a.dd-splash__banner {
	text-decoration: none;
	cursor: pointer;
}

.dd-splash__content :first-child,
.dd-splash__banner-text :first-child {
	margin-top: 0;
}

.dd-splash__content :last-child,
.dd-splash__banner-text :last-child {
	margin-bottom: 0;
}

.dd-splash [role="button"] {
	cursor: pointer;
}

.dd-splash [role="button"]:focus-visible,
a.dd-splash__bubble:focus-visible,
a.dd-splash__banner:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

/* Mobile banner — fixed strip below the site header. Slides up with the header on scroll-down. */
.dd-splash__banner {
	display: block;
	position: fixed;
	top: var(--dd-splash-header-offset, 0px);
	left: 0;
	right: 0;
	z-index: 50;
	padding: 8px 10px;
	text-align: center;
	font-size: clamp(12px, 3.6vw, 16px);
	line-height: 1.4;
	transition: transform .3s ease;
}

body:has(> header.scroll-down) .dd-splash__banner {
	transform: translateY(calc(-100% - var(--dd-splash-header-offset, 0px)));
}

.dd-splash__banner-text {
	max-width: 720px;
	margin: 0 auto;
}

.dd-splash__banner-text p {
	margin: 0;
	font-size: small;
}

.dd-splash__banner img {
	max-width: 100%;
	height: auto;
}

/* Desktop bubble — circular floating element, NOT in flow */
.dd-splash__bubble-wrap {
	display: none;
}

.dd-splash__bubble {
	display: none;
}

@media (min-width: 1024px) {
	.dd-splash__banner {
		display: none;
	}

	/* Zero-size anchor pinned to the viewport's bottom-left on load;
	   scrolls with the page because it's positioned off .dd-splash (in flow at top of body). */
	.dd-splash__bubble-wrap {
		display: block;
		position: absolute;
		top: calc(100vh - var(--dd-splash-offset-bottom));
		left: var(--dd-splash-offset-left);
		width: 0;
		height: 0;
	}

	/* Bubble's bottom-left corner sits on the anchor — grows up and right.
	   JS sets --dd-splash-bubble-size once the content is measured; until then
	   the bubble falls back to the min size. */
	.dd-splash__bubble {
		--dd-splash-bubble-size: var(--dd-splash-bubble-min);
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
		width: var(--dd-splash-bubble-size);
		height: var(--dd-splash-bubble-size);
		max-width: var(--dd-splash-bubble-max);
		max-height: var(--dd-splash-bubble-max);
		border-radius: 50%;
		padding: calc(var(--dd-splash-bubble-size) * var(--dd-splash-bubble-pad, 0.12));
		font-size: 15px;
		line-height: 1.4;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	}
}