/**
 * DriveBotix Design System v2
 * ---------------------------------------------------------------------------
 * Engineering-grade dark UI for a sensor-hardware manufacturer.
 * Principles: hairline structure, datasheet typography, real data density,
 * restrained motion, no glow / no glassmorphism / no filler cards.
 *
 * Accent derives from the DriveBotix mark (cyan -> blue gradient):
 *   action blue #1E6FFF, technical cyan #22D3EE (data annotation only).
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
	/* surfaces — graphite rather than flat black, so panels separate cleanly */
	--db-void: #0a0c10;
	--db-panel: #11151b;
	--db-panel-2: #171c24;
	--db-panel-3: #1d232d;

	/* light band (used sparingly for tonal rhythm) */
	--db-paper: #f3f5f7;
	--db-paper-2: #e9edf1;
	--db-paper-line: #dbe1e8;
	--db-paper-ink: #0a0c10;
	--db-paper-ink-2: #5a6472;
	--db-paper-ink-3: #8b95a3;

	/* structure */
	--db-line: rgba(255, 255, 255, 0.10);
	--db-line-2: rgba(255, 255, 255, 0.17);
	--db-line-3: rgba(255, 255, 255, 0.26);

	/* ink */
	--db-ink: #f2f5f8;
	--db-ink-2: #9ba5b4;
	--db-ink-3: #6b7480;

	/* accent */
	--db-blue: #1e6fff;
	--db-blue-2: #0b56d0;
	--db-blue-soft: rgba(30, 111, 255, 0.12);
	--db-cyan: #22d3ee;
	--db-cyan-soft: rgba(34, 211, 238, 0.12);

	/* state */
	--db-ok: #21c776;
	--db-warn: #e5a83a;
	--db-err: #ec5b56;

	/* type */
	--db-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--db-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* metrics */
	--db-r: 3px;
	--db-r-lg: 6px;
	--db-wrap: 1280px;
	--db-gutter: 24px;
	--db-nav-h: 64px;
}

/* ==========================================================================
   2. Base — scoped to .db root wrappers so WP admin is untouched
   ========================================================================== */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--db-nav-h) + 16px);
	/* clip (not hidden) so the off-canvas drawer parked off-screen cannot
	   create a phantom horizontal scrollbar on mobile */
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body.db-site {
	background: var(--db-void);
	color: var(--db-ink);
	font-family: var(--db-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	max-width: 100%;
}

.db,
.db * {
	box-sizing: border-box;
}

.db {
	font-family: var(--db-sans);
	color: var(--db-ink);
	font-variant-numeric: tabular-nums;
}

/* Neutralise inherited theme/kit typography inside our components.
   The legacy Darkle kit sets h1 at 110px Poppins on .elementor-kit-34 h1,
   so sizes are reset here and re-declared by the display classes below. */
.db h1,
.db h2,
.db h3,
.db h4,
.db h5,
.db h6 {
	font-family: var(--db-sans) !important;
	color: var(--db-ink);
	margin: 0 !important;
	padding: 0;
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.08;
	text-transform: none !important;
	text-shadow: none !important;
}

.db p {
	margin: 0;
	font-family: var(--db-sans) !important;
	color: var(--db-ink-2);
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
}

.db a {
	color: inherit;
	text-decoration: none;
}

.db ul,
.db ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.db img,
.db svg {
	display: block;
	max-width: 100%;
}

.db strong { color: var(--db-ink); font-weight: 650; }

/* type scale — declared with weight so the legacy kit cannot win */
.db .db-d1,
.db h1.db-d1 { font-size: clamp(33px, 4vw, 54px) !important; font-weight: 750; letter-spacing: -0.028em; line-height: 1.06; }
.db .db-d2,
.db h2.db-d2 { font-size: clamp(27px, 2.9vw, 39px) !important; font-weight: 730; letter-spacing: -0.024em; line-height: 1.1; }
.db .db-d3,
.db h2.db-d3,
.db h3.db-d3 { font-size: clamp(21px, 2vw, 27px) !important; font-weight: 710; letter-spacing: -0.018em; line-height: 1.18; }
.db .db-d4 { font-size: 20px !important; font-weight: 680; letter-spacing: -0.014em; line-height: 1.25; }
.db .db-lead { font-size: clamp(15.5px, 1.2vw, 18px) !important; line-height: 1.62; color: var(--db-ink-2); }
.db .db-body { font-size: 15.5px !important; line-height: 1.65; color: var(--db-ink-2); }
.db .db-small { font-size: 13.5px !important; line-height: 1.55; color: var(--db-ink-2); }

/* mono utilities */
.db-mono,
.db-eyebrow,
.db-num,
.db-val {
	font-family: var(--db-mono);
	font-feature-settings: "tnum" 1, "zero" 1;
}

.db-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--db-ink-3);
}

.db-eyebrow::before {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--db-cyan);
	opacity: 0.8;
}

/* ==========================================================================
   3. Layout
   ========================================================================== */
.db-wrap {
	width: 100%;
	max-width: var(--db-wrap);
	margin: 0 auto;
	padding: 0 var(--db-gutter);
}

.db-band {
	position: relative;
	padding: clamp(56px, 7vw, 104px) 0;
	border-top: 1px solid var(--db-line);
}

.db-band--flush { border-top: 0; }
.db-band--tight { padding: clamp(40px, 4.5vw, 64px) 0; }
.db-band--panel { background: var(--db-panel); }

.db-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 32px 48px;
	align-items: end;
	margin-bottom: clamp(32px, 4vw, 56px);
}

.db-head__title { margin-top: 14px; }
.db-head__aside { padding-bottom: 4px; }

.db-rule {
	height: 1px;
	background: var(--db-line);
	border: 0;
	margin: 0;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.db-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: var(--db-r);
	font-family: var(--db-sans);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
	white-space: nowrap;
}

.db-btn svg { width: 16px; height: 16px; flex: none; }

.db-btn--primary {
	background: var(--db-blue);
	border-color: var(--db-blue);
	color: #fff;
}
.db-btn--primary:hover { background: var(--db-blue-2); border-color: var(--db-blue-2); color: #fff; }

.db-btn--ghost {
	background: transparent;
	border-color: var(--db-line-2);
	color: var(--db-ink);
}
.db-btn--ghost:hover { border-color: var(--db-line-3); background: rgba(255, 255, 255, 0.04); }

.db-btn--quiet {
	background: var(--db-panel-2);
	border-color: var(--db-line);
	color: var(--db-ink);
}
.db-btn--quiet:hover { background: var(--db-panel-3); border-color: var(--db-line-2); }

.db-btn--sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.db-btn--block { width: 100%; }
.db-btn--lg { min-height: 52px; padding: 0 28px; font-size: 15.5px; }

.db-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--db-ink);
	border-bottom: 1px solid var(--db-line-2);
	padding-bottom: 3px;
	transition: color .18s ease, border-color .18s ease, gap .18s ease;
}
.db-link:hover { color: #fff; border-color: var(--db-blue); gap: 12px; }
.db-link svg { width: 14px; height: 14px; }

.db-link--cyan { color: var(--db-cyan); border-color: rgba(34, 211, 238, .35); }
.db-link--cyan:hover { color: var(--db-cyan); border-color: var(--db-cyan); }

/* ==========================================================================
   5. Panels / blueprint devices
   ========================================================================== */
.db-panel {
	position: relative;
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
}

.db-panel--flat { background: transparent; }
.db-panel--2 { background: var(--db-panel-2); }

/* corner ticks = engineering drawing frame */
.db-ticks::before,
.db-ticks::after {
	content: "";
	position: absolute;
	width: 9px;
	height: 9px;
	pointer-events: none;
}
.db-ticks::before {
	top: -1px; left: -1px;
	border-top: 1px solid var(--db-cyan);
	border-left: 1px solid var(--db-cyan);
}
.db-ticks::after {
	bottom: -1px; right: -1px;
	border-bottom: 1px solid var(--db-cyan);
	border-right: 1px solid var(--db-cyan);
}

/* hairline blueprint grid */
.db-grid-bg {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 56px 56px;
}

.db-grid-bg--fine {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .03) 1px, transparent 1px);
	background-size: 28px 28px;
}

/* ==========================================================================
   6. Data primitives (datasheet look)
   ========================================================================== */
.db-dl {
	display: grid;
	grid-template-columns: minmax(120px, 44%) minmax(0, 1fr);
}

.db-dl > div {
	display: contents;
}

.db-dl dt,
.db-dl dd {
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid var(--db-line);
	font-size: 13.5px;
}

.db-dl dt {
	color: var(--db-ink-3);
	font-family: var(--db-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-right: 16px;
	align-self: center;
}

.db-dl dd {
	color: var(--db-ink);
	font-family: var(--db-mono);
	font-size: 13px;
	text-align: right;
}

.db-dl--wide { grid-template-columns: minmax(160px, 38%) minmax(0, 1fr); }
.db-dl--left dd { text-align: left; }

/* spec table (multi-column variants) */
.db-spec {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.db-spec caption {
	text-align: left;
	font-family: var(--db-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--db-cyan);
	padding: 0 0 10px;
}

.db-spec th,
.db-spec td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--db-line);
	text-align: left;
	vertical-align: top;
}

.db-spec thead th {
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--db-ink-3);
	font-weight: 500;
	border-bottom-color: var(--db-line-2);
	white-space: nowrap;
}

.db-spec tbody th {
	font-weight: 500;
	color: var(--db-ink-2);
	font-size: 13px;
	width: 46%;
}

.db-spec td {
	font-family: var(--db-mono);
	color: var(--db-ink);
	font-size: 12.5px;
	white-space: nowrap;
}

.db-spec tbody tr:hover th,
.db-spec tbody tr:hover td { background: rgba(255, 255, 255, .022); }

.db-spec--2col tbody th { width: 40%; }

/* stat / metric row */
.db-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	overflow: hidden;
	background: var(--db-panel);
}

.db-metric {
	padding: 20px 22px;
	border-right: 1px solid var(--db-line);
	min-width: 0;
}
.db-metric:last-child { border-right: 0; }

.db-metric__k {
	display: block;
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--db-ink-3);
	margin-bottom: 8px;
}

.db-metric__v {
	font-family: var(--db-mono);
	font-size: 18px;
	font-weight: 500;
	color: var(--db-ink);
	letter-spacing: -0.01em;
}

.db-metric__v em {
	font-style: normal;
	color: var(--db-cyan);
}

/* ==========================================================================
   7. Navbar
   ========================================================================== */
.db-nav {
	position: sticky;
	top: 0;
	z-index: 800;
	background: rgba(8, 9, 11, 0.86);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid var(--db-line);
	/* An autoplaying <video> in the hero is a strong signal for browsers to
	   promote it to its own GPU compositor layer. Combined with this bar's
	   backdrop-filter, some engines then paint that layer above the sticky
	   bar regardless of z-index. Forcing this bar onto its own stable layer
	   keeps it pinned on top. */
	transform: translateZ(0);
}

.db-nav__in {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--db-gutter);
	height: var(--db-nav-h);
	display: flex;
	align-items: center;
	gap: 28px;
}

.db-nav__logo {
	display: flex;
	align-items: center;
	flex: none;
}
.db-nav__logo img { height: 34px; width: auto; }

.db-nav__menu {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: 8px;
}

.db-nav__item { position: relative; }

.db-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	border-radius: var(--db-r);
	font-size: 14px;
	font-weight: 550;
	color: var(--db-ink-2);
	transition: color .16s ease, background .16s ease;
}

.db-nav__link:hover,
.db-nav__item[aria-expanded="true"] .db-nav__link { color: var(--db-ink); background: rgba(255, 255, 255, .05); }

.db-nav__link.is-current { color: var(--db-ink); }
.db-nav__link.is-current::after {
	content: "";
	position: absolute;
	left: 12px; right: 12px; bottom: -12px;
	height: 1px;
	background: var(--db-cyan);
}

.db-nav__caret { width: 12px; height: 12px; opacity: .6; transition: transform .18s ease; }
.db-nav__item:hover .db-nav__caret { transform: rotate(180deg); }

.db-nav__spacer { flex: 1 1 auto; }

.db-nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }

.db-nav__icon {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink-2);
	position: relative;
	transition: color .16s, border-color .16s, background .16s;
}
.db-nav__icon:hover { color: var(--db-ink); border-color: var(--db-line-2); background: rgba(255,255,255,.04); }
.db-nav__icon svg { width: 17px; height: 17px; }

.db-nav__count {
	position: absolute;
	top: -6px; right: -6px;
	min-width: 17px; height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--db-blue);
	color: #fff;
	font-family: var(--db-mono);
	font-size: 10px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.db-nav__count[data-count="0"] { display: none; }

/* dropdown */
.db-drop {
	position: absolute;
	top: calc(100% + 14px);
	left: -8px;
	width: 460px;
	background: var(--db-panel);
	border: 1px solid var(--db-line-2);
	border-radius: var(--db-r-lg);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.db-nav__item:hover > .db-drop,
.db-nav__item:focus-within > .db-drop {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.db-drop__row {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 10px;
	border-radius: var(--db-r);
	transition: background .15s ease;
}
.db-drop__row:hover { background: var(--db-panel-2); }

.db-drop__thumb {
	height: 46px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	background: var(--db-void);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.db-drop__thumb svg,
.db-drop__thumb img { width: 100%; height: 100%; object-fit: contain; }

.db-drop__name { font-family: var(--db-mono); font-size: 13px; font-weight: 500; color: var(--db-ink); }
.db-drop__desc { font-size: 12px; color: var(--db-ink-3); margin-top: 3px; line-height: 1.4; }
.db-drop__meta { font-family: var(--db-mono); font-size: 11.5px; color: var(--db-ink-3); text-align: right; white-space: nowrap; }

.db-drop__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
	padding: 12px 10px 4px;
	border-top: 1px solid var(--db-line);
}

/* burger + drawer — `.db .db-nav__burger` (0,2,0) outranks the kit's bare
   `button` rule (0,1,1), same fix as the other bare-<button> elements. */
.db .db-nav__burger {
	display: none;
	width: 38px; height: 38px;
	padding: 0;
	align-items: center; justify-content: center;
	background: transparent;
	border-style: solid;
	border-width: 1px;
	border-color: var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink);
	font-size: 0;
	cursor: pointer;
}
.db-nav__burger svg { width: 18px; height: 18px; }

.db-scrim {
	position: fixed;
	inset: 0;
	background: rgba(4, 5, 7, .72);
	z-index: 950;
	opacity: 0;
	visibility: hidden;
	transition: opacity .24s ease, visibility .24s;
}

.db-drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(380px, 90vw);
	z-index: 960;
	background: var(--db-panel);
	border-left: 1px solid var(--db-line-2);
	transform: translateX(101%);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
}

body.db-drawer-open { overflow: hidden; }
body.db-drawer-open .db-drawer { transform: none; }
body.db-drawer-open .db-scrim { opacity: 1; visibility: visible; }

.db-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--db-nav-h);
	padding: 0 18px 0 20px;
	border-bottom: 1px solid var(--db-line);
	flex: none;
}
.db-drawer__top img { height: 26px; }

/* `.db .db-drawer__close` (0,2,0) must outrank the legacy Elementor kit's
   `.elementor-kit-34 button` (0,1,1) — see the auth-modal close button note
   below for the full explanation of this bare-<button> vulnerability. */
.db .db-drawer__close {
	width: 40px; height: 40px;
	padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent;
	border-style: solid;
	border-width: 1px;
	border-color: var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink);
	font-size: 0;
	cursor: pointer;
}
.db-drawer__close svg { width: 18px; height: 18px; }

.db-drawer__body { padding: 8px 0 20px; }

.db-drawer__sec {
	padding: 14px 20px 6px;
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--db-ink-3);
}

.db-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 50px;
	padding: 0 20px;
	font-size: 16px;
	font-weight: 550;
	color: var(--db-ink);
	border-bottom: 1px solid var(--db-line);
}
.db-drawer__link:active { background: var(--db-panel-2); }
.db-drawer__link span.db-mono { font-size: 12px; color: var(--db-ink-3); font-weight: 400; }

.db-drawer__foot {
	margin-top: auto;
	padding: 20px;
	border-top: 1px solid var(--db-line);
	display: grid;
	gap: 10px;
	flex: none;
}

/* ==========================================================================
   8. Cinematic stage hero (full viewport, video-ready)
   The media layer accepts the brand film when it is delivered; until then an
   engineered placeholder stage carries the same composition.
   ========================================================================== */
.db-stage {
	position: relative;
	min-height: calc(100svh - var(--db-nav-h));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #050608;
	border-bottom: 1px solid var(--db-line);
	isolation: isolate;
	z-index: 0;
}

.db-stage__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.db-stage__media video,
.db-stage__media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* the source film frames its subject toward the top - centering the
	   crop (the object-fit default) trims into that instead of the empty
	   lower portion of the frame. Anchor to the top so any cropping a tall
	   viewport forces comes off the bottom, not the top. */
	object-position: 50% 0%;
	display: block;
}

/* --- engineered placeholder stage ------------------------------------- */
.db-stage__art { position: absolute; inset: 0; overflow: hidden; }

.db-stage__glow {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(46% 40% at 68% 34%, rgba(34, 211, 238, .16), transparent 62%),
		radial-gradient(52% 46% at 22% 72%, rgba(30, 111, 255, .16), transparent 66%),
		radial-gradient(70% 60% at 50% 8%, rgba(12, 22, 40, .9), transparent 70%);
	animation: db-breathe 16s ease-in-out infinite alternate;
}

.db-stage__mesh {
	position: absolute;
	inset: -2px;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(120% 90% at 50% 34%, #000 25%, transparent 78%);
	-webkit-mask-image: radial-gradient(120% 90% at 50% 34%, #000 25%, transparent 78%);
	animation: db-drift 90s linear infinite;
}

.db-stage__fig {
	position: absolute;
	top: 48%;
	right: 1%;
	width: min(58vw, 830px);
	transform: translateY(-50%);
	opacity: .66;
	animation: db-float 18s ease-in-out infinite alternate;
}
.db-stage__fig svg { width: 100%; height: auto; }

.db-stage__scan {
	position: absolute;
	left: 0;
	right: 0;
	height: 140px;
	background: linear-gradient(to bottom, transparent, rgba(34, 211, 238, .055) 48%, transparent);
	border-top: 1px solid rgba(34, 211, 238, .16);
	animation: db-scan 11s cubic-bezier(.45, .05, .55, .95) infinite;
}

.db-stage__veil {
	position: absolute;
	inset: 0;
	/* lighter than the original, but not as exposed as the first pass — a
	   flat, casually-shot phone clip needs more of this than a professionally
	   graded film would to still read as premium */
	background:
		linear-gradient(90deg, rgba(5, 6, 8, .74) 0%, rgba(5, 6, 8, .56) 38%, rgba(5, 6, 8, .17) 66%, rgba(5, 6, 8, .38) 100%),
		linear-gradient(0deg, rgba(5, 6, 8, .74) 0%, rgba(5, 6, 8, .20) 44%, rgba(5, 6, 8, .38) 100%);
}

@keyframes db-breathe { from { opacity: .72; } to { opacity: 1; } }
@keyframes db-drift { from { background-position: 0 0, 0 0; } to { background-position: 72px 72px, 72px 72px; } }
@keyframes db-float { from { transform: translateY(-52%); } to { transform: translateY(-46%); } }
@keyframes db-scan { 0% { top: -12%; } 55% { top: 104%; } 100% { top: 104%; } }

@media (prefers-reduced-motion: reduce) {
	.db-stage__glow,
	.db-stage__mesh,
	.db-stage__fig,
	.db-stage__scan { animation: none; }
	.db-stage__scan { display: none; }
}

/* --- stage content ---------------------------------------------------- */
.db-stage__body {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding: clamp(48px, 8vh, 92px) 0 clamp(44px, 7vh, 84px);
}

.db-stage__copy { max-width: 56rem; }

.db-stage__title {
	font-size: clamp(32px, 3.5vw, 51px);
	font-weight: 750;
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: #fff;
	max-width: 26ch;
	text-wrap: balance;
}
.db-stage__title em {
	font-style: normal;
	background: linear-gradient(96deg, #4ee2ff 4%, #2f8bff 74%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.db-stage__deck {
	margin-top: 22px;
	max-width: 54ch;
	font-size: clamp(15.5px, 1.15vw, 18px);
	line-height: 1.62;
	color: #b8c1cd;
}

.db-stage__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

/* legacy hero (kept for interior pages) */
.db-hero {
	position: relative;
	border-bottom: 1px solid var(--db-line);
	overflow: hidden;
	background:
		radial-gradient(120% 80% at 82% 8%, rgba(30, 111, 255, .10), transparent 60%),
		var(--db-void);
}

.db-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255,255,255,.032) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,.032) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 85%);
	-webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 85%);
	pointer-events: none;
}

.db-hero__in {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
	gap: clamp(32px, 4.5vw, 64px);
	align-items: center;
	padding: clamp(44px, 5vw, 74px) 0 clamp(40px, 4.4vw, 66px);
}

.db-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 27px;
	padding: 0 11px 0 9px;
	border: 1px solid var(--db-line-2);
	border-radius: 100px;
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--db-ink-2);
	margin-bottom: 22px;
}
.db-hero__badge i {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--db-cyan);
	box-shadow: 0 0 0 3px rgba(34, 211, 238, .16);
	flex: none;
}

.db-hero__title { max-width: 21ch; }
.db-hero__title em { font-style: normal; color: var(--db-ink-3); }

.db-hero__sub {
	margin-top: 20px;
	max-width: 52ch;
	font-size: clamp(15.5px, 1.15vw, 17.5px);
	line-height: 1.6;
	color: var(--db-ink-2);
}

.db-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.db-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--db-line);
}

.db-hero__fact {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--db-mono);
	font-size: 11.5px;
	color: var(--db-ink-3);
	letter-spacing: .02em;
}
.db-hero__fact::before {
	content: "";
	width: 12px;
	height: 1px;
	background: var(--db-cyan);
	flex: none;
}
.db-hero__fact b { color: var(--db-ink); font-weight: 500; }
.db-hero__fact i { display: none; }

/* hero technical figure */
.db-figure {
	position: relative;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	background: linear-gradient(180deg, rgba(20, 25, 34, .82), rgba(14, 17, 22, .82));
	padding: 18px;
}

.db-figure__cap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 2px 14px;
	border-bottom: 1px solid var(--db-line);
	margin-bottom: 14px;
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--db-ink-3);
}
.db-figure__cap b { color: var(--db-cyan); font-weight: 500; }

.db-figure__art { position: relative; }
.db-figure__art svg { width: 100%; height: auto; }

.db-figure__legend {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-top: 14px;
	background: var(--db-line);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	overflow: hidden;
}
.db-figure__legend div {
	background: var(--db-panel);
	padding: 11px 12px;
}
.db-figure__legend span {
	display: block;
	font-family: var(--db-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--db-ink-3);
	margin-bottom: 5px;
}
.db-figure__legend b {
	font-family: var(--db-mono);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--db-ink);
}

/* ==========================================================================
   9. Marquee / capability strip
   ========================================================================== */
.db-strip {
	border-top: 1px solid var(--db-line);
	border-bottom: 1px solid var(--db-line);
	background: var(--db-panel);
	overflow: hidden;
}

.db-strip__in {
	display: flex;
	align-items: stretch;
	max-width: 1440px;
	margin: 0 auto;
}

.db-strip__item {
	flex: 1 1 0;
	padding: 16px 22px;
	border-right: 1px solid var(--db-line);
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.db-strip__item:last-child { border-right: 0; }

.db-strip__item svg { width: 18px; height: 18px; color: var(--db-cyan); flex: none; }

.db-strip__k {
	font-family: var(--db-mono);
	font-size: 11px;
	line-height: 1.45;
	letter-spacing: .03em;
	color: var(--db-ink-3);
	min-width: 0;
}
.db-strip__k b { display: block; color: var(--db-ink); font-weight: 500; font-size: 11.5px; margin-top: 2px; }

/* ==========================================================================
   10. Product family (datasheet rows, no add-to-cart)
   ========================================================================== */
.db-family {
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	overflow: hidden;
	background: var(--db-panel);
}

.db-family__head,
.db-prow {
	display: grid;
	grid-template-columns: 132px minmax(0, 1.35fr) minmax(0, 1.5fr) 132px 132px;
	align-items: center;
	gap: 20px;
}

.db-family__head {
	padding: 12px 22px;
	border-bottom: 1px solid var(--db-line-2);
	background: var(--db-panel-2);
}

.db-family__head span {
	font-family: var(--db-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--db-ink-3);
}
.db-family__head span:nth-child(4),
.db-family__head span:nth-child(5) { text-align: right; }

.db-prow {
	padding: 18px 22px;
	border-bottom: 1px solid var(--db-line);
	transition: background .16s ease;
	position: relative;
}
.db-prow:last-child { border-bottom: 0; }
.db-prow:hover { background: rgba(255, 255, 255, .022); }

.db-prow__vis {
	height: 78px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	background: var(--db-void);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: border-color .16s ease;
}
.db-prow:hover .db-prow__vis { border-color: var(--db-line-2); }
.db-prow__vis svg, .db-prow__vis img { width: 100%; height: 100%; object-fit: contain; }

.db-prow__name {
	font-family: var(--db-mono);
	font-size: 17px;
	font-weight: 500;
	color: var(--db-ink);
	letter-spacing: -0.01em;
}
.db-prow__role {
	font-size: 12.5px;
	color: var(--db-ink-3);
	margin-top: 5px;
	line-height: 1.45;
}

.db-prow__specs {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Plain checkmark + sentence, not a .db-chip pill — chips are sized for
   short mono spec values ("±16 g"); wrapping a full feature sentence in
   one looked broken (oversized bordered boxes). */
.db-prow__feat {
	display: flex;
	align-items: flex-start;
	gap: 7px;
}
.db-prow__feat svg { width: 13px; height: 13px; color: var(--db-cyan); flex: none; margin-top: 3px; }
.db-prow__feat span { font-size: 13px; line-height: 1.45; color: var(--db-ink-2); }

.db-chip {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 9px;
	border: 1px solid var(--db-line);
	border-radius: 2px;
	background: var(--db-panel-2);
	font-family: var(--db-mono);
	font-size: 10.5px;
	color: var(--db-ink-2);
	white-space: nowrap;
}
.db-chip--cyan { border-color: rgba(34,211,238,.28); color: var(--db-cyan); background: var(--db-cyan-soft); }

.db-prow__price { text-align: right; }
.db-prow__price b {
	display: block;
	font-family: var(--db-mono);
	font-size: 15px;
	font-weight: 500;
	color: var(--db-ink);
}
.db-prow__price span {
	display: block;
	font-family: var(--db-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--db-ink-3);
	margin-top: 4px;
}
.db-prow__price .db-quote { color: var(--db-cyan); font-size: 13px; }

.db-prow__go { display: flex; justify-content: flex-end; }

/* ==========================================================================
   11. Capabilities (editorial two-column list)
   ========================================================================== */
.db-caps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--db-line);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	overflow: hidden;
}

.db-cap {
	background: var(--db-void);
	padding: clamp(22px, 2.4vw, 32px);
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.db-cap__ico {
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--db-line-2);
	border-radius: var(--db-r);
	color: var(--db-cyan);
}
.db-cap__ico svg { width: 17px; height: 17px; }

.db-cap__n {
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	color: var(--db-ink-3);
	display: block;
	margin-bottom: 9px;
}
.db-cap h3 { font-size: 17.5px; font-weight: 660; letter-spacing: -0.012em; }
.db-cap p { margin-top: 9px; font-size: 14px; line-height: 1.6; }

.db-cap__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}

/* ==========================================================================
   12. Applications
   ========================================================================== */
.db-apps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1px;
	background: var(--db-line);
	border-top: 1px solid var(--db-line);
	border-bottom: 1px solid var(--db-line);
}

.db-app {
	background: var(--db-void);
	padding: 30px 24px 30px;
	transition: background .18s ease;
}
.db-app:hover { background: var(--db-panel); }

.db-app__ico { color: var(--db-cyan); margin-bottom: 18px; }
.db-app__ico svg { width: 24px; height: 24px; }

.db-app h3 {
	font-size: 16px;
	font-weight: 660;
	letter-spacing: -0.01em;
}

.db-app p {
	margin-top: 9px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--db-ink-3);
}

.db-app__n {
	font-family: var(--db-mono);
	font-size: 10px;
	color: var(--db-ink-3);
	letter-spacing: .14em;
	display: block;
	margin-bottom: 14px;
}

/* ==========================================================================
   13. Split feature (image/diagram + copy)
   ========================================================================== */
.db-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.db-split--rev .db-split__media { order: 2; }

.db-split__copy h2 { margin-bottom: 16px; }

.db-checks { display: grid; gap: 12px; margin-top: 24px; }

.db-check {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}
.db-check svg { width: 18px; height: 18px; color: var(--db-cyan); margin-top: 2px; }
.db-check b { display: block; font-size: 14.5px; font-weight: 620; color: var(--db-ink); }
.db-check span { display: block; font-size: 13.5px; color: var(--db-ink-3); margin-top: 3px; line-height: 1.5; }

/* Feature/summary table — bordered rows (like .db-spec) but a single
   column of full sentences instead of label:value pairs, so text wraps
   normally instead of the monospace/nowrap treatment .db-spec uses for
   short values. Used by the product page "Summary" section. */
.db-feattable { width: 100%; border-collapse: collapse; }
.db-feattable td { padding: 13px 4px; border-bottom: 1px solid var(--db-line); }
.db-feattable tr:last-child td { border-bottom: 0; }
.db-feattable__row { display: flex; align-items: flex-start; gap: 10px; }
.db-feattable__row svg { width: 16px; height: 16px; color: var(--db-cyan); flex: none; margin-top: 3px; }
.db-feattable__row span { font-size: 14.5px; line-height: 1.6; color: var(--db-ink-2); }

/* ==========================================================================
   14. Resources
   ========================================================================== */
.db-res {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

/* Still used standalone on the /resources/ page's "Technical library" group
   cards (COMING SOON / N FILES AVAILABLE) — the homepage teaser cards below
   no longer show a tag, but this class itself must stay defined. */
.db-tag {
	font-family: var(--db-mono);
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--db-ink-3);
	border: 1px solid var(--db-line);
	border-radius: 2px;
	padding: 3px 7px;
}

.db-rescard {
	display: flex;
	flex-direction: column;
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	padding: 22px;
	transition: border-color .18s ease, background .18s ease;
}
.db-rescard:hover { border-color: var(--db-line-2); background: var(--db-panel-2); }

.db-rescard > svg { width: 20px; height: 20px; color: var(--db-cyan); margin-bottom: 16px; flex: none; }

/* Still used on the /resources/ page's own cards (icon + file-count/"coming
   soon" tag row) — the homepage teaser cards below don't use this wrapper
   any more, but the class must stay defined for that page. */
.db-rescard__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.db-rescard__top svg { width: 20px; height: 20px; color: var(--db-cyan); }

.db-rescard h3 { font-size: 16px; font-weight: 650; }

/* Bare video box, no title/description/card chrome — the same treatment
   .db-split__media gets on the About page. Stretches to the row height
   set by the compact Documentation/SDK column beside it, so it settles at
   a normal card-sized height instead of an arbitrary tall aspect ratio. */
.db-res__film {
	height: 100%;
	min-height: 0;
}
.db-res__film .db-film,
.db-res__film .db-film__stage {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* Documentation + SDK share the resources grid column, stacked instead of
   side-by-side, each compact enough that the pair matches the Analytics
   card's height rather than doubling the whole row's height. */
.db-res__stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}

.db-rescard--mini {
	flex: 1 1 0;
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
}
.db-rescard--mini__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	flex: none;
	border-radius: var(--db-r);
	background: var(--db-cyan-soft);
	color: var(--db-cyan);
}
.db-rescard--mini__ico svg { width: 18px; height: 18px; }
.db-rescard--mini__body { flex: 1 1 auto; min-width: 0; }
.db-rescard--mini__body h3 { font-size: 15px; }
.db-rescard--mini__body p { margin-top: 4px; }

.db-rescard p { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--db-ink-3); flex: 1 1 auto; }

/* Link row is icon-only and right-aligned across every card in this
   section — no repeated "See availability" / "Open library" text. */
.db-rescard__go {
	margin-top: 18px;
	align-self: flex-end;
	display: inline-flex;
	width: 30px; height: 30px;
	flex: none;
	align-items: center; justify-content: center;
	border-radius: 50%;
	color: var(--db-ink-3);
	transition: color .18s ease, background .18s ease, transform .18s ease;
}
.db-rescard__go svg { width: 14px; height: 14px; }
.db-rescard:hover .db-rescard__go { color: var(--db-cyan); background: rgba(34, 211, 238, .1); transform: translateX(2px); }
.db-rescard--mini .db-rescard__go { margin-top: 0; align-self: center; margin-left: auto; }


/* ==========================================================================
   15. CTA
   ========================================================================== */
.db-cta {
	position: relative;
	border: 1px solid var(--db-line-2);
	border-radius: var(--db-r-lg);
	background:
		radial-gradient(90% 140% at 88% 0%, rgba(30, 111, 255, .16), transparent 62%),
		var(--db-panel);
	padding: clamp(30px, 4vw, 54px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
	overflow: hidden;
}

.db-cta__copy h2 { max-width: 24ch; }
.db-cta__copy p { margin-top: 12px; max-width: 56ch; }

.db-cta__acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   16. Footer
   ========================================================================== */
.db-foot {
	background: var(--db-void);
	border-top: 1px solid var(--db-line);
}

.db-foot__in {
	max-width: 1440px;
	margin: 0 auto;
	padding: clamp(44px, 5vw, 68px) var(--db-gutter) 0;
}

.db-foot__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
	gap: 44px;
	padding-bottom: 48px;
}

.db-foot__brand img { height: 30px; margin-bottom: 18px; }
.db-foot__brand p { font-size: 13.5px; line-height: 1.6; color: var(--db-ink-3); max-width: 34ch; }

.db-foot h4 {
	font-family: var(--db-mono);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--db-ink-2);
	margin-bottom: 20px;
	font-weight: 600;
}

.db-foot__list { display: grid; gap: 14px; }
.db-foot__list a { font-size: 13.5px; color: var(--db-ink-2); transition: color .15s; }
.db-foot__list a:hover { color: var(--db-ink); }
.db-foot__list a .db-mono { font-size: 11.5px; color: var(--db-ink-3); }

.db-foot__contact { display: grid; gap: 14px; }
.db-foot__contact div { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 11px; align-items: start; }
.db-foot__contact svg { width: 15px; height: 15px; color: var(--db-ink-3); margin-top: 3px; }
.db-foot__contact span, .db-foot__contact a { font-size: 13.5px; color: var(--db-ink-2); line-height: 1.5; }
.db-foot__contact a:hover { color: var(--db-ink); }

.db-foot__bar {
	border-top: 1px solid var(--db-line);
	padding: 18px 0 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	flex-wrap: wrap;
}

.db-foot__bar p,
.db-foot__bar a {
	font-family: var(--db-mono);
	font-size: 11px;
	color: var(--db-ink-3);
	letter-spacing: .04em;
}
.db-foot__bar a:hover { color: var(--db-ink-2); }
.db-foot__legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* ==========================================================================
   17. Forms
   ========================================================================== */
.db-field { display: grid; gap: 7px; }

.db-label {
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--db-ink-3);
}
.db-label .db-req { color: var(--db-cyan); }

.db-input,
.db-select,
.db-textarea {
	width: 100%;
	min-height: 46px;
	padding: 12px 14px;
	background: var(--db-panel-2);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink);
	font-family: var(--db-sans);
	font-size: 15px;
	transition: border-color .16s, box-shadow .16s, background .16s;
	appearance: none;
}

.db-textarea { min-height: 128px; resize: vertical; line-height: 1.55; }

.db-input::placeholder,
.db-textarea::placeholder { color: var(--db-ink-3); }

.db-input:focus,
.db-select:focus,
.db-textarea:focus {
	outline: 0;
	border-color: var(--db-blue);
	box-shadow: 0 0 0 3px rgba(30, 111, 255, .16);
	background: var(--db-panel-3);
}

.db-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ba5b4' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 38px;
}

/* Browser-autofilled fields.
   Chrome and Safari force their own light background on autofilled inputs and
   ignore background-color, which left light text unreadable. The inset shadow
   is the only way to repaint the field, and -webkit-text-fill-color is the only
   way to recolour the text. The long transition delay stops the yellow flash
   that appears before the override applies. */
.db-input:-webkit-autofill,
.db-select:-webkit-autofill,
.db-textarea:-webkit-autofill,
.db input:-webkit-autofill,
.db select:-webkit-autofill,
.db textarea:-webkit-autofill,
.woocommerce input:-webkit-autofill,
.woocommerce select:-webkit-autofill,
.woocommerce-page input:-webkit-autofill,
.woocommerce-page select:-webkit-autofill,
.db-captcha ~ input:-webkit-autofill {
	-webkit-text-fill-color: var(--db-ink);
	caret-color: var(--db-ink);
	-webkit-box-shadow: 0 0 0 1000px var(--db-panel-2) inset;
	box-shadow: 0 0 0 1000px var(--db-panel-2) inset;
	border-color: var(--db-line);
	transition: background-color 100000s ease-out 0s;
}

.db-input:-webkit-autofill:focus,
.db-select:-webkit-autofill:focus,
.db-textarea:-webkit-autofill:focus,
.db input:-webkit-autofill:focus,
.woocommerce input:-webkit-autofill:focus,
.woocommerce select:-webkit-autofill:focus,
.woocommerce-page input:-webkit-autofill:focus,
.woocommerce-page select:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--db-panel-3) inset, 0 0 0 3px rgba(30, 111, 255, .16);
	box-shadow: 0 0 0 1000px var(--db-panel-3) inset, 0 0 0 3px rgba(30, 111, 255, .16);
	border-color: var(--db-blue);
}

/* Firefox uses its own autofill mechanism and honours normal properties. */
.db-input:autofill,
.db-select:autofill,
.db-textarea:autofill,
.db input:autofill,
.woocommerce input:autofill,
.woocommerce-page input:autofill {
	background: var(--db-panel-2);
	color: var(--db-ink);
	border-color: var(--db-line);
}

.db-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.db-form__grid { display: grid; gap: 16px; }

.db-note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 12.5px;
	color: var(--db-ink-3);
	line-height: 1.5;
}
.db-note svg { width: 14px; height: 14px; margin-top: 2px; flex: none; color: var(--db-ink-3); }
.db-note a { color: var(--db-ink-2); border-bottom: 1px solid var(--db-line-2); }

.db-checkbox {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 11px;
	align-items: start;
	font-size: 13.5px;
	color: var(--db-ink-2);
	cursor: pointer;
}
.db-checkbox input {
	appearance: none;
	width: 18px; height: 18px;
	border: 1px solid var(--db-line-2);
	border-radius: 2px;
	background: var(--db-panel-2);
	margin: 1px 0 0;
	cursor: pointer;
	position: relative;
}
.db-checkbox input:checked { background: var(--db-blue); border-color: var(--db-blue); }
.db-checkbox input:checked::after {
	content: "";
	position: absolute;
	left: 5px; top: 2px;
	width: 5px; height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(42deg);
}

/* messages */
.db-msg {
	display: flex;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--db-r);
	border: 1px solid var(--db-line);
	font-size: 13.5px;
	line-height: 1.5;
	background: var(--db-panel-2);
	color: var(--db-ink);
}
.db-msg svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.db-msg--ok { border-color: rgba(33, 199, 118, .34); background: rgba(33, 199, 118, .08); }
.db-msg--ok svg { color: var(--db-ok); }
.db-msg--err { border-color: rgba(236, 91, 86, .34); background: rgba(236, 91, 86, .08); }
.db-msg--err svg { color: var(--db-err); }
.db-msg--info svg { color: var(--db-cyan); }
.db-msg[hidden] { display: none; }

/* busy state */
.db-btn.is-busy { pointer-events: none; opacity: .72; }
.db-btn.is-busy::after {
	content: "";
	width: 14px; height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: db-spin .65s linear infinite;
}
@keyframes db-spin { to { transform: rotate(360deg); } }

/* hCaptcha holder */
.db-captcha { min-height: 78px; }
.db-captcha iframe { border-radius: var(--db-r); }

/* ==========================================================================
   18. Motion
   Content is never hidden behind scroll listeners — sections are always
   readable, motion is limited to a short settle on first paint.
   ========================================================================== */
.db-rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
	.db-rv { animation: db-settle .5s cubic-bezier(.22, 1, .36, 1) both; }
	@keyframes db-settle {
		from { opacity: 0; transform: translateY(10px); }
		to { opacity: 1; transform: none; }
	}
}

/* ==========================================================================
   19. Responsive
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1180px) {
	.db-family__head,
	.db-prow { grid-template-columns: 104px minmax(0, 1.2fr) minmax(0, 1.2fr) 112px 108px; gap: 14px; }
	.db-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
	.db-foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
	:root { --db-gutter: 20px; }

	.db-nav__menu { display: none; }
	.db .db-nav__burger { display: inline-flex; }
	.db-nav__actions .db-btn--primary { display: none; }

	.db-hero__in { grid-template-columns: 1fr; gap: 34px; padding-top: 44px; }
	.db-hero__title { max-width: 20ch; }
	.db-figure { max-width: 620px; }

	.db-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
	.db-head__aside { padding-bottom: 0; }

	.db-strip__in { flex-wrap: wrap; }
	.db-strip__item { flex: 1 1 44%; border-bottom: 1px solid var(--db-line); }
	.db-strip__item:nth-child(2n) { border-right: 0; }

	.db-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.db-res { grid-template-columns: 1fr; }
	.db-split { grid-template-columns: 1fr; gap: 28px; }
	.db-split--rev .db-split__media { order: 0; }
	.db-cta { grid-template-columns: 1fr; }
	.db-caps { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
	/* product family collapses to stacked records. !important: section 22
	   ("Product family row refinements", further down this file) sets an
	   unconditional (non-media-query) .db-prow grid-template-columns that
	   otherwise wins by source order at every width, including here -
	   collapsing this rule's "name"/"specs"/"price"/"go" grid-template-areas
	   onto only the first two of its five tracks and squeezing the model
	   name into ~40px. That was the "DXN-" wraps onto its own huge-looking
	   line, big dead space to the right" bug. */
	.db-family__head { display: none; }
	.db-prow {
		grid-template-columns: 88px minmax(0, 1fr) !important;
		grid-template-areas:
			"vis name"
			"specs specs"
			"price go" !important;
		gap: 14px 16px;
		padding: 18px;
	}
	.db-prow__vis { grid-area: vis; height: 62px; }
	.db-prow__id { grid-area: name; }
	.db-prow__specs { grid-area: specs; }
	.db-prow__price { grid-area: price; text-align: left; align-self: center; }
	.db-prow__go { grid-area: go; align-self: center; }

	/* Hero, below tablet width.
	   The media layer is built for abstract placeholder art or a wide-format
	   film and is normally a full-bleed background behind the headline. A
	   real landscape clip forced to cover a phone-height container is
	   cropped down to a thin centre strip — most of the frame is lost, which
	   is exactly the kind of "clipped, doesn't make sense" video that gets
	   noticed. Below this width the media becomes a contained block, sized to
	   its own aspect ratio, sitting above the copy instead of behind it, so
	   the whole frame is always visible and the headline gets its own
	   uncontested space underneath. */
	.db-stage { min-height: auto; }
	.db-stage__media {
		position: relative;
		inset: auto;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		z-index: auto;
	}
	/* contain, not cover: the supplied film has on-screen data overlays close
	   to its own frame edges, and any crop — even the few percent a mismatched
	   ratio needs — was slicing through them. Contain guarantees the whole
	   frame is always visible; the dark stage background shows through any
	   sliver of letterboxing instead. */
	.db-stage__media video { object-fit: contain; background: #050608; }
	.db-stage__art { position: absolute; }
	.db-stage__fig { width: min(64vw, 340px); }
	.db-stage__veil { display: none; }
	.db-stage__body { padding: 30px 0 38px; }
	.db-stage__cta { flex-direction: column; }
	.db-stage__cta .db-btn { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
	:root { --db-gutter: 16px; }

	.db-band { padding: 48px 0; }
	.db-hero__facts { gap: 8px 18px; }
	.db-hero__cta { display: grid; grid-template-columns: 1fr; }
	.db-hero__cta .db-btn { width: 100%; }

	.db-apps { grid-template-columns: 1fr; }
	.db-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.db-metric { border-bottom: 1px solid var(--db-line); min-width: 0; }
	.db-metric:nth-child(2n) { border-right: 0; }
	/* long single values such as "Vilnius, Lithuania" must not force the track
	   wider than the card, which overflow: hidden would then clip */
	.db-metric__v, .db-metric__k { overflow-wrap: anywhere; }

	.db-form__row { grid-template-columns: 1fr; }
	.db-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
	.db-foot__bar { flex-direction: column; align-items: flex-start; }

	.db-cta { padding: 26px 20px; }
	.db-cta__acts { display: grid; grid-template-columns: 1fr; width: 100%; }
	.db-cta__acts .db-btn { width: 100%; }

	.db-spec td, .db-spec tbody th { padding: 9px 10px; font-size: 12px; }
	.db-dl dt { font-size: 10.5px; }
	.db-dl dd { font-size: 12px; }
}


/* ==========================================================================
   20. Typography guard
   The legacy Darkle Elementor kit declares oversized h1–h6 sizes globally.
   Component heading sizes are re-asserted here so the design system always
   wins regardless of stylesheet order.
   ========================================================================== */
.db .db-stage__title { font-size: clamp(32px, 3.5vw, 51px) !important; line-height: 1.06 !important; }
.db .db-stage__deck { font-size: clamp(15.5px, 1.15vw, 18px) !important; line-height: 1.62 !important; }
.db .db-buy__name { font-size: clamp(22px, 2vw, 27px) !important; line-height: 1.15 !important; }
.db .db-pcard__name { font-size: 19px !important; }
.db .db-prow__name { font-size: 17px !important; }
.db .db-cap h3 { font-size: 17.5px !important; line-height: 1.3 !important; }
.db .db-app h3 { font-size: 16px !important; line-height: 1.3 !important; }
.db .db-rescard h3 { font-size: 16px !important; line-height: 1.3 !important; }
.db .db-sec__head h2 { font-size: 21px !important; line-height: 1.2 !important; }
.db .db-empty h2 { font-size: 21px !important; }
.db .db-infocard h3 { font-size: 15px !important; margin-bottom: 14px !important; }
.db .db-tl h3 { font-size: 17px !important; }
.db .db-acct-hero h2 { font-size: 22px !important; }
.db .db-foot h4 { font-size: 13px !important; letter-spacing: .12em !important; margin-bottom: 20px !important; }
.db .db-drawer__link { font-size: 16px !important; }
.db .db-prose h2 { font-size: 24px !important; }
.db .db-prose h3 { font-size: 18.5px !important; }
.db .db-prose h4 { font-size: 16px !important; }
.db .db-prose p,
.db .db-prose li { font-size: 15.5px !important; line-height: 1.7 !important; }
.db .db-metric__v { font-size: 18px !important; }
.db .db-check b { font-size: 14.5px !important; }
.db .db-dlrow b { font-size: 14px !important; }
.db .db-resrow b { font-size: 14.5px !important; }

/* ==========================================================================
   21. Light band
   One inverted section per page breaks the monotony of a fully dark site and
   reads as deliberate art direction rather than a dark template.
   ========================================================================== */
.db-band--light {
	background: var(--db-paper);
	border-top: 1px solid var(--db-paper-line);
	border-bottom: 1px solid var(--db-paper-line);
	color: var(--db-paper-ink);
}

.db-band--light h1,
.db-band--light h2,
.db-band--light h3,
.db-band--light h4 { color: var(--db-paper-ink) !important; }

.db-band--light p,
.db-band--light .db-body,
.db-band--light .db-lead { color: var(--db-paper-ink-2) !important; }

.db-band--light .db-eyebrow { color: var(--db-paper-ink-3); }
.db-band--light .db-eyebrow::before { background: var(--db-blue); opacity: 1; }

.db-band--light .db-apps {
	background: var(--db-paper-line);
	border-top: 0;
	border-bottom: 0;
}
.db-band--light .db-app { background: var(--db-paper); }
.db-band--light .db-app:hover { background: #fff; }
.db-band--light .db-app__ico { color: var(--db-blue); }
.db-band--light .db-app__n { color: var(--db-paper-ink-3); }
.db-band--light .db-app p { color: var(--db-paper-ink-2) !important; }

.db-band--light .db-chip {
	background: #fff;
	border-color: var(--db-paper-line);
	color: var(--db-paper-ink-2);
}
.db-band--light .db-chip--cyan {
	background: rgba(30, 111, 255, .07);
	border-color: rgba(30, 111, 255, .22);
	color: #1558cc;
}

.db-band--light .db-btn--ghost {
	border-color: #c9d2dc;
	color: var(--db-paper-ink);
}
.db-band--light .db-btn--ghost:hover { background: #fff; border-color: #9fadbc; }

.db-band--light .db-link {
	color: var(--db-paper-ink);
	border-color: #c9d2dc;
}
.db-band--light .db-link:hover { color: #000; border-color: var(--db-blue); }

.db-band--light .db-rule { background: var(--db-paper-line); }

.db-band--light .db-dl dt { color: var(--db-paper-ink-3); }
.db-band--light .db-dl dd { color: var(--db-paper-ink); }
.db-band--light .db-dl dt,
.db-band--light .db-dl dd { border-top-color: var(--db-paper-line); }

/* ==========================================================================
   22. Product family row refinements
   ========================================================================== */
.db-family__head,
.db-prow {
	grid-template-columns: 116px minmax(0, 1.25fr) minmax(0, 1.45fr) 158px 150px;
}

.db-prow__vis { height: 72px; background: linear-gradient(180deg, #131922, #0d1117); }
.db-prow__vis svg { width: 100%; height: 100%; }

.db-prow__price b { font-size: 15px; white-space: nowrap; }
.db-prow__price span { font-size: 9.5px; }
.db-prow__price .db-quote { font-size: 13.5px; }

/* hover: cyan edge marker reads as a selected instrument row */
.db-prow::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 2px;
	background: var(--db-cyan);
	opacity: 0;
	transition: opacity .16s ease;
}
.db-prow:hover::before { opacity: 1; }

@media (min-width: 1025px) and (max-width: 1180px) {
	.db-family__head,
	.db-prow { grid-template-columns: 100px minmax(0, 1.1fr) minmax(0, 1.1fr) 140px 132px; gap: 14px; }
}

/* ==========================================================================
   23. Footer: statutory identity strip + controls
   ========================================================================== */
.db-foot__grid { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .85fr)) minmax(0, 1.1fr); }

.db-foot__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.db-foot__badges .db-chip { gap: 6px; height: 26px; }
.db-foot__badges .db-chip svg { color: var(--db-ink-3); }

.db .db-foot__cookiebtn {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-family: var(--db-sans);
	font-size: 13.5px;
	color: var(--db-ink-2);
	cursor: pointer;
	text-align: left;
	transition: color .15s;
}
.db .db-foot__cookiebtn:hover { color: var(--db-ink); }

.db-foot__legal-strip {
	border-top: 1px solid var(--db-line);
	padding: 22px 0 20px;
}

.db-foot__legalgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px 28px;
}
.db-foot__legalgrid > div { display: grid; gap: 5px; min-width: 0; }
.db-foot__legalgrid span {
	font-family: var(--db-mono);
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--db-ink-3);
}
.db-foot__legalgrid b {
	font-size: 13px;
	font-weight: 550;
	color: var(--db-ink-2);
	line-height: 1.45;
}
.db-foot__pending {
	font-style: normal;
	font-family: var(--db-mono);
	font-size: 11.5px;
	color: var(--db-warn);
	opacity: .85;
}

.db-foot__consumer {
	margin-top: 18px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--db-ink-3);
	max-width: 110ch;
}
.db-foot__consumer a { color: var(--db-ink-2); border-bottom: 1px solid var(--db-line-2); }
.db-foot__consumer a:hover { color: var(--db-ink); }

@media (max-width: 1180px) {
	.db-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.db-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.db-foot__legalgrid { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
}

/* related-model price must never wrap */
.db-prow__price b,
.db-prow__price b .woocommerce-Price-amount { white-space: nowrap; }

/* WooCommerce formatted prices.
   A price is nested markup: span.woocommerce-Price-amount > bdi >
   span.woocommerce-Price-currencySymbol. Several components style their bare
   `span` children, which also caught those internals — pushing the currency
   symbol onto its own line and applying label typography to the figure. Price
   internals always render inline, on one line, inheriting the component's own
   type. Keyed on two classes so component rules cannot outrank them. */
.db .woocommerce-Price-amount,
.db .woocommerce-Price-amount bdi,
.db .woocommerce-Price-currencySymbol,
.woocommerce-account .woocommerce-Price-amount,
.woocommerce-account .woocommerce-Price-amount bdi,
.woocommerce-account .woocommerce-Price-currencySymbol {
	display: inline;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

/* ==========================================================================
   24. Elevated band (replaces the near-white band)
   A hard white section next to a near-black one reads as a jump-cut. The
   contrast break is kept, but within the dark palette: a lifted, blue-tinted
   surface with brighter hairlines.
   ========================================================================== */
.db-band--light {
	background:
		radial-gradient(90% 120% at 15% 0%, rgba(34, 211, 238, .055), transparent 60%),
		radial-gradient(80% 120% at 90% 100%, rgba(30, 111, 255, .07), transparent 62%),
		#151b23;
	border-top: 1px solid rgba(255, 255, 255, .13);
	border-bottom: 1px solid rgba(255, 255, 255, .13);
	color: var(--db-ink);
}

.db-band--light h1,
.db-band--light h2,
.db-band--light h3,
.db-band--light h4 { color: var(--db-ink) !important; }

.db-band--light p,
.db-band--light .db-body,
.db-band--light .db-lead { color: var(--db-ink-2) !important; }

.db-band--light .db-eyebrow { color: var(--db-ink-3); }
.db-band--light .db-eyebrow::before { background: var(--db-cyan); opacity: .9; }

.db-band--light .db-apps {
	background: rgba(255, 255, 255, .13);
	border-top: 0;
	border-bottom: 0;
}
.db-band--light .db-app { background: #151b23; }
.db-band--light .db-app:hover { background: #1a212a; }
.db-band--light .db-app__ico { color: var(--db-cyan); }
.db-band--light .db-app__n { color: var(--db-ink-3); }
.db-band--light .db-app p { color: var(--db-ink-3) !important; }

.db-band--light .db-chip {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .14);
	color: var(--db-ink-2);
}
.db-band--light .db-chip--cyan {
	background: var(--db-cyan-soft);
	border-color: rgba(34, 211, 238, .3);
	color: var(--db-cyan);
}

.db-band--light .db-btn--ghost { border-color: var(--db-line-2); color: var(--db-ink); }
.db-band--light .db-btn--ghost:hover { background: rgba(255, 255, 255, .05); border-color: var(--db-line-3); }

.db-band--light .db-link { color: var(--db-ink); border-color: var(--db-line-2); }
.db-band--light .db-link:hover { color: #fff; border-color: var(--db-blue); }

.db-band--light .db-check svg { color: var(--db-cyan); }
.db-band--light .db-check b { color: var(--db-ink); }
.db-band--light .db-check span { color: var(--db-ink-3); }

.db-band--light .db-dl dt { color: var(--db-ink-3); }
.db-band--light .db-dl dd { color: var(--db-ink); }
.db-band--light .db-dl dt,
.db-band--light .db-dl dd { border-top-color: var(--db-line); }

/* ==========================================================================
   25. Cart drawer (slide-over mini cart)
   ========================================================================== */
.db-cartscrim {
	position: fixed;
	inset: 0;
	background: rgba(4, 5, 7, .70);
	z-index: 950;
	opacity: 0;
	visibility: hidden;
	transition: opacity .24s ease, visibility .24s;
}

.db-cartpanel {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(420px, 92vw);
	z-index: 960;
	background: var(--db-panel);
	border-left: 1px solid var(--db-line-2);
	transform: translateX(101%);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
	display: flex;
	flex-direction: column;
	box-shadow: -24px 0 60px rgba(0, 0, 0, .5);
}

body.db-cart-open { overflow: hidden; }
body.db-cart-open .db-cartpanel { transform: none; }
body.db-cart-open .db-cartscrim { opacity: 1; visibility: visible; }

/* Sign-in / register / lost-password modal.
   The panel markup (.db-auth) is the same shortcode output used by the
   standalone /login/, /registration/ and /lost-password/ pages, so this
   wrapper only positions and animates — it does not restyle the card. */
.db-authscrim {
	position: fixed;
	inset: 0;
	background: rgba(3, 4, 6, .62);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 970;
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, visibility .22s;
}

.db-authmodal__box {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 980;
	width: min(460px, 92vw);
	max-height: 88vh;
	/* overflow lives on the inner panel, not here: this box also holds the
	   close button, positioned to sit outside its bounds, which an overflow
	   value other than visible on this element would clip to a sliver */
	overflow: visible;
	transform: translate(-50%, -50%) scale(.96);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.db-authmodal__panel { max-height: 88vh; overflow-y: auto; }

body.db-auth-open { overflow: hidden; }
body.db-auth-open .db-authscrim { opacity: 1; visibility: visible; }
body.db-auth-open .db-authmodal__box { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

/* The legacy Elementor kit's global button rule (`.elementor-kit-34 button`,
   specificity 0,1,1) outranks a bare `.db-authmodal__close` (0,1,0) and was
   bleeding in a 15px/30px padding, 3px border-radius and blue border-color,
   turning this into a blue pill with the X icon squeezed invisible inside.
   `.db .db-authmodal__close` (0,2,0) outranks the kit rule and restates
   every property the kit rule also sets, not just the ones we care about. */
.db .db-authmodal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border-style: solid;
	border-width: 1px;
	border-color: var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink-2);
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
.db .db-authmodal__close:hover,
.db .db-authmodal__close:focus { border-color: var(--db-line-2); color: var(--db-ink); }

.db-authmodal__panel .db-auth { max-width: none; margin: 0; }
.db-authmodal__panel .db-auth__panel { padding-top: 56px; }

@media (max-width: 480px) {
	.db .db-authmodal__close { top: 8px; right: 8px; }
}

.db-cartpanel__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 16px 0 20px;
	min-height: var(--db-nav-h);
	border-bottom: 1px solid var(--db-line);
	flex: none;
}
.db-cartpanel__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--db-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--db-ink-2);
}
.db-cartpanel__title b {
	font-family: var(--db-mono);
	color: var(--db-cyan);
	font-weight: 500;
}
/* Same kit-vs-bare-button specificity fix as the auth-modal/drawer close
   buttons: `.db .db-cartpanel__close` (0,2,0) outranks the kit's (0,1,1). */
.db .db-cartpanel__close {
	width: 38px; height: 38px;
	padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent;
	border-style: solid;
	border-width: 1px;
	border-color: var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink-2);
	font-size: 0;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}
.db .db-cartpanel__close:hover { color: var(--db-ink); border-color: var(--db-line-2); }

.db-cartpanel__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 0;
}

.db-cartitem {
	display: grid;
	grid-template-columns: 66px minmax(0, 1fr) auto;
	gap: 14px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--db-line);
	align-items: center;
}

.db-cartitem__vis {
	height: 58px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	background: var(--db-void);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.db-cartitem__vis svg,
.db-cartitem__vis img { width: 100%; height: 100%; object-fit: contain; }

.db-cartitem__name {
	font-family: var(--db-mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--db-ink);
	display: block;
}
.db-cartitem__meta {
	font-size: 12px;
	color: var(--db-ink-3);
	margin-top: 4px;
	display: block;
}
.db-cartitem__right { text-align: right; display: grid; gap: 6px; justify-items: end; }
.db-cartitem__price {
	font-family: var(--db-mono);
	font-size: 13.5px;
	color: var(--db-ink);
	white-space: nowrap;
}
.db-cartitem__remove {
	font-family: var(--db-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--db-ink-3);
	border-bottom: 1px solid transparent;
	cursor: pointer;
	background: none;
	border-top: 0; border-left: 0; border-right: 0;
	padding: 0;
}
.db-cartitem__remove:hover { color: var(--db-err); border-bottom-color: currentColor; }

.db-cartpanel__empty {
	padding: 44px 24px;
	text-align: center;
	display: grid;
	justify-items: center;
	gap: 10px;
}
.db-cartpanel__empty svg { color: var(--db-ink-3); }
.db-cartpanel__empty p { font-size: 14px; color: var(--db-ink-2); max-width: 30ch; }

.db-cartpanel__foot {
	flex: none;
	border-top: 1px solid var(--db-line-2);
	background: var(--db-panel-2);
	padding: 18px 20px 20px;
	display: grid;
	gap: 12px;
}
.db-cartpanel__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.db-cartpanel__row span { font-size: 13.5px; color: var(--db-ink-2); }
.db-cartpanel__row b { font-family: var(--db-mono); font-size: 18px; color: var(--db-ink); }
.db-cartpanel__note { font-size: 12px; color: var(--db-ink-3); line-height: 1.5; }
.db-cartpanel__acts { display: grid; gap: 8px; }
.db-cartpanel__acts .db-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.db-cartpanel { transition: none; }
}