/*!
 * GD Kit — design & motion utilities for core Gutenberg blocks.
 * Every class is applied through a block's "Additional CSS class(es)" field (the `className` attribute).
 * Progressive enhancement: nothing is hidden unless the front-end script has added `gd-js` to <html>,
 * so content stays visible in the editor, without JS, and for prefers-reduced-motion.
 * Icons: Lucide (ISC license) — https://lucide.dev
 */

/* ------------------------------------------------------------------ 0. Tokens */
:root {
	--gd-ink: var(--wp--preset--color--gd-ink, #0b0b1a);
	--gd-paper: var(--wp--preset--color--gd-paper, #f7f6fb);
	--gd-primary: var(--wp--preset--color--gd-primary, #7c3aed);
	--gd-on-primary: var(--wp--preset--color--gd-on-primary, #ffffff);
	--gd-secondary: var(--wp--preset--color--gd-secondary, #06b6d4);
	--gd-accent: var(--wp--preset--color--gd-accent, #f472b6);
	--gd-soft: var(--wp--preset--color--gd-soft, #efe9fe);
	--gd-deep: var(--wp--preset--color--gd-deep, #6d28d9);
	--gd-tint: var(--gd-primary); /* accent for icons, ticks, focus rings — switches to --gd-deep on light surfaces */
	--gd-grad: var(--wp--preset--gradient--gd-brand, linear-gradient(120deg, var(--gd-primary), var(--gd-secondary) 55%, var(--gd-accent)));
	/* Animated gradient text pans a 200%-wide tile sideways, so its gradient must loop: horizontal, and ending on the
	   color it starts with. The plain brand gradient (primary → accent) showed a hard seam mid-word as it panned. */
	--gd-grad-text: linear-gradient(90deg, var(--gd-primary), var(--gd-secondary) 30%, var(--gd-accent) 62%, var(--gd-primary));

	--gd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--gd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--gd-dur: 0.9s;
	--gd-dist: 28px;
	--gd-radius: 22px;
	--gd-radius-sm: 14px;
	--gd-gutter: clamp(1.25rem, 0.6rem + 3.2vw, 3rem);
	--gd-section-pad: clamp(4rem, min(3rem + 7vw, 15vh), 9rem); /* width- and height-aware: shorter on laptop screens */
	--gd-admin-bar: var(--wp-admin--admin-bar--height, 0px);
	--gd-nav-h: 5rem;
	--gd-site-header: 0px; /* a theme header that stays on screen (pages without a gd-nav); measured by the engine */
	--gd-content: 1200px; /* the recipes' contentSize; used to line up pills and the pinned showcase track */
	--gd-gap: 1.25rem; /* space between stacked blocks inside kit sections */
	--gd-gap-lg: clamp(1.25rem, 0.8rem + 1.4vw, 2rem); /* after display/title headings */
	--gd-body-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--gd-display-weight: 700;
	--gd-shadow-sm: 0 1px 2px color-mix(in oklab, var(--gd-ink) 6%, transparent), 0 2px 8px -2px color-mix(in oklab, var(--gd-ink) 8%, transparent);
	--gd-shadow-md: 0 1px 2px color-mix(in oklab, var(--gd-ink) 5%, transparent), 0 14px 32px -14px color-mix(in oklab, var(--gd-ink) 24%, transparent);
	--gd-shadow-lg: 0 2px 6px color-mix(in oklab, var(--gd-ink) 6%, transparent), 0 34px 70px -28px color-mix(in oklab, var(--gd-ink) 42%, transparent);
	/* Surfaces adapt to the section they sit on (see "Surface context" in section 1). */
	--gd-surface: color-mix(in oklab, currentColor 5%, transparent);
	--gd-surface-border: color-mix(in oklab, currentColor 12%, transparent);
	--gd-surface-shadow: 0 0 #0000;
	--gd-surface-highlight: 0 0 #0000;
	--gd-window-bg: color-mix(in oklab, currentColor 4%, transparent);
}
/* Perceptual (OKLCH) interpolation keeps gradients vivid — no muddy grey middle. */
@supports (background: linear-gradient(in oklch, red, blue)) {
	:root {
		--gd-grad: linear-gradient(in oklch 115deg, var(--gd-primary), var(--gd-secondary) 55%, var(--gd-accent));
		--gd-grad-text: linear-gradient(in oklch 90deg, var(--gd-primary), var(--gd-secondary) 30%, var(--gd-accent) 62%, var(--gd-primary));
	}
}

@property --gd-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

/* ------------------------------------------------------------------ 1. Sections & layout */
/* Themes without theme.json (many classic themes, e.g. Kadence) get an extra
   <div class="wp-block-group__inner-container"> inside every Group that isn't flex or grid. Rules that
   target a Group's direct children therefore list both shapes: `.x > .y` and `.x > .wp-block-group__inner-container > .y`. */
/* `:root .x` (specificity 0,2,0) beats WordPress layout rules such as `.wp-container-… > *` and `:root :where(.is-layout-flow) > *`.
   Section padding is stronger still (0,4,0 — the class is repeated on purpose): themes pad every Group that has
   a background (Kadence: `.wp-block-group.has-background { padding: 20px }`, loaded after the kit), which would
   squash every section. A block's own padding setting (an inline style) still wins. */
:root .gd-section.gd-section.gd-section {
	position: relative;
	isolation: isolate;
	overflow: clip; /* clips decorative layers without breaking position:sticky */
	margin-block: 0;
	--gd-pad: var(--gd-section-pad);
	padding-block: var(--gd-pad);
	padding-inline: var(--gd-gutter);
	font-family: var(--gd-font-body, inherit);
	font-size: var(--gd-body-size);
	line-height: 1.65;
}
:root .gd-section.gd-section.gd-tight { --gd-pad: clamp(2.25rem, 1.5rem + 3vw, 4rem); padding-block: var(--gd-pad); }

/* Vertical rhythm inside kit sections, independent of the theme. Classic themes print no block-gap
   rules, so browser/theme em-based margins would leak in (1em of a 76px price = a 76px gap).
   Per-block margin settings (inline styles) still win. */
:root :is(.gd-section, .gd-nav) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote, details, hr, .wp-block-group, .wp-block-columns, .wp-block-buttons, .wp-block-cover, .wp-block-media-text) { margin-block: 0; }
:root .gd-section:where(.is-layout-flow, .is-layout-constrained) > * + *,
:root .gd-section :where(.is-layout-flow, .is-layout-constrained, .wp-block-column, .wp-block-cover__inner-container, .wp-block-media-text__content, details) > * + * { margin-block-start: var(--gd-gap); }
/* Vertical flex groups (cards that push their content apart) keep the kit's rhythm. Specificity (0,0,1) on
   purpose: it beats WordPress's default `:where(.is-layout-flex) { gap: 0.5em }` but loses to the group's own
   Block spacing setting (`.wp-container-…`, 0,1,0). A `:root` prefix here would override that setting. */
div:where(.gd-section .is-layout-flex.is-vertical) { gap: var(--gd-gap); }
:root .gd-section.gd-section.gd-flush { padding-block: 0; }
.gd-screen {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
:root .gd-narrow { max-width: 760px; margin-inline: auto; }
.gd-canvas__main { overflow-x: clip; }
/* Landing Canvas shows no theme chrome, but themes still print their floating back-to-top button through wp_footer
   (Astra's covered page content). The page has its own "Back to top" link and progress bar. */
:is(.gd-canvas, .page-template-gd-canvas) :is(#ast-scroll-top, #kt-scroll-up, #kt-scroll-up-reader, .generate-back-to-top, #scroll-top, .ct-back-to-top, #scroll-to-top, .et_pb_scroll_top) { display: none !important; }
:root .page-template-gd-canvas .wp-site-blocks { padding-block: 0; }

/* Dark/colored sections: make theme heading & link colors follow the section's text color. */
:root .gd-section.has-text-color :where(h1, h2, h3, h4, h5, h6, p, li, summary, figcaption, blockquote, cite),
:root .gd-card.has-text-color :where(h1, h2, h3, h4, h5, h6, p, li) {
	color: inherit;
}
:root .gd-section.has-text-color a:where(:not(.wp-element-button)) { color: inherit; }
/* Text links: a fine, offset underline that firms up on hover. gd-links (footers, link lists): none until hover. */
:root .gd-section a:where(:not(.wp-element-button)) {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
	transition: text-decoration-color 0.25s, color 0.25s, opacity 0.25s;
}
:root .gd-section a:where(:not(.wp-element-button)):hover { text-decoration-color: currentColor; }
:root .gd-section .gd-links a:where(:not(.wp-element-button)) { text-decoration-color: transparent; }
/* A List with gd-links (footer columns): no bullets, even spacing. */
:root .gd-section ul.gd-links { list-style: none; margin-inline: 0; padding: 0; }
:root .gd-section ul.gd-links li { margin: 0; }
:root .gd-section ul.gd-links li + li { margin-block-start: 0.6rem; }
:root .gd-section .gd-links a:where(:not(.wp-element-button)):hover { text-decoration-color: currentColor; }
/* Hairline separators instead of the theme's heavy rule. */
:root .gd-section .wp-block-separator:where(:not(.gd-glow-line, .has-background, .is-style-dots)) {
	border: 0;
	border-top: 1px solid color-mix(in oklab, currentColor 14%, transparent);
	opacity: 1;
	width: auto;
}
/* A left-aligned eyebrow sitting directly in a constrained Group lines up with the text column instead of
   centering itself (WordPress centers each child box, and the pill is narrower than the column). */
:root .gd-section.is-layout-constrained > .gd-eyebrow:not(.has-text-align-center, .has-text-align-right),
:root .gd-section .is-layout-constrained > .gd-eyebrow:not(.has-text-align-center, .has-text-align-right) {
	margin-inline: max(0px, calc((100% - var(--gd-content)) / 2)) auto !important;
}

/* Surface context: accents, cards, windows and badges adapt to the background they sit on.
   Light: crisp white elevated cards + the text-safe deep accent. Dark: frosted cards with a top highlight. */
:is(.has-gd-paper-background-color, .has-gd-soft-background-color, .has-gd-soft-gradient-background) {
	--gd-fg: var(--gd-ink);
	--gd-tint: var(--gd-deep);
	--gd-surface: #fff;
	--gd-surface-border: color-mix(in oklab, var(--gd-ink) 8%, transparent);
	--gd-surface-shadow: var(--gd-shadow-md);
	--gd-surface-highlight: 0 0 #0000;
	--gd-window-bg: #fff;
}
:is(.has-gd-ink-background-color, .has-gd-night-gradient-background, .wp-block-cover) {
	--gd-fg: var(--gd-paper);
	--gd-tint: var(--gd-primary);
	--gd-surface: linear-gradient(180deg, color-mix(in oklab, #fff 7.5%, transparent), color-mix(in oklab, #fff 2.5%, transparent));
	--gd-surface-border: color-mix(in oklab, #fff 11%, transparent);
	--gd-surface-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6);
	--gd-surface-highlight: inset 0 1px 0 color-mix(in oklab, #fff 9%, transparent);
	--gd-window-bg: color-mix(in oklab, var(--gd-ink) 86%, #fff);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.has-gd-primary-background-color {
	--gd-fg: var(--gd-on-primary);
	--gd-tint: var(--gd-on-primary);
	--gd-surface: color-mix(in oklab, #fff 12%, transparent);
	--gd-surface-border: color-mix(in oklab, #fff 24%, transparent);
	--gd-surface-highlight: inset 0 1px 0 color-mix(in oklab, #fff 18%, transparent);
}
/* Dark sections get a faint brand glow from the top for depth (opt out with gd-flat). */
:root .gd-section.has-gd-ink-background-color:not(.gd-flat) { background-image: radial-gradient(90% 55% at 50% 0%, color-mix(in oklab, var(--gd-primary) 13%, transparent), transparent 72%); }
:root .gd-glow-top,
:root .gd-section.gd-glow-top:not(.gd-flat) { background-image: radial-gradient(75% 60% at 50% 0%, color-mix(in oklab, var(--gd-primary) 30%, transparent), transparent 72%); }
/* --gd-bg: the color a block sits on (avatar rings "cut out" of it). */
.has-gd-paper-background-color { --gd-bg: var(--gd-paper); }
:is(.has-gd-soft-background-color, .has-gd-soft-gradient-background) { --gd-bg: var(--gd-soft); }
:is(.has-gd-ink-background-color, .has-gd-night-gradient-background) { --gd-bg: var(--gd-ink); }
.has-gd-primary-background-color { --gd-bg: var(--gd-primary); }
/* Columns that swap sides on desktop but keep reading order on mobile. */
@media (min-width: 782px) { :root .wp-block-columns.gd-reverse { flex-direction: row-reverse; } }

/* Bento grid: put on a Group with grid layout. Children can span with gd-span-2 / gd-row-2. */
:root .gd-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
}
:root .gd-bento > * { margin: 0; min-width: 0; }
@media (max-width: 1023px) {
	:root .gd-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	:root .gd-bento { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) {
	:root .gd-span-2 { grid-column: span 2; }
}
@media (min-width: 1024px) {
	:root .gd-row-2 { grid-row: span 2; }
}
:root .gd-span-full { grid-column: 1 / -1; }
/* Masonry wall: a Group ("layout":{"type":"default"}) whose children — cards, screenshots, photos — flow into
   columns of uneven height, like a testimonial wall. 3 → 2 → 1 columns; reading order runs down each column, and no
   child is split between two columns. New cards can go anywhere: the columns rebalance themselves. */
:root .gd-masonry { --gd-masonry-gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem); column-count: 3; column-gap: var(--gd-masonry-gap); }
@media (max-width: 1023px) { :root .gd-masonry { column-count: 2; } }
@media (max-width: 639px) { :root .gd-masonry { column-count: 1; } }
:root .gd-section .gd-masonry > :not(.wp-block-group__inner-container),
:root .gd-section .gd-masonry > .wp-block-group__inner-container > * { break-inside: avoid; margin-block: 0 var(--gd-masonry-gap); }
/* Columns that sit two per row on phones instead of stacking one per row (footer link lists, small stats).
   A column with gd-span-full takes a whole row. */
@media (max-width: 781px) {
	:root .wp-block-columns.gd-mobile-2col { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem !important; }
	:root .wp-block-columns.gd-mobile-2col > .wp-block-column { flex-basis: auto !important; margin: 0 !important; }
}
/* Swipe row on phones: a grid of cards (videos, products, case studies) stays a grid on desktop and becomes a
   horizontal, snapping swipe row below 782px, with the next card peeking in, instead of a phone-length stack. The
   row runs to the screen edges and its first card lines up with the text column. Works on a grid Group (gd-bento),
   a flex row or Columns. */
@media (max-width: 781px) {
	:root .gd-mobile-swipe {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 0.9rem !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(var(--gd-gutter) * -1) !important; /* beats the constrained layout's auto margins */
		padding: 0.25rem var(--gd-gutter) 0.75rem;
		scroll-padding-inline: var(--gd-gutter);
	}
	:root .gd-mobile-swipe::-webkit-scrollbar { display: none; }
	:root .gd-mobile-swipe > * { flex: 0 0 min(84vw, 22rem) !important; margin: 0 !important; scroll-snap-align: start; }
}

/* Focal point for cropped images: the Image block has aspect ratio + "cover" but no focal point (Cover blocks do).
   gd-focus-left / -right / -top / -bottom on the Image block keep the subject in the crop; combine one of each axis. */
.gd-focus-left { --gd-fx: 12%; }
.gd-focus-right { --gd-fx: 88%; }
.gd-focus-top { --gd-fy: 12%; }
.gd-focus-bottom { --gd-fy: 88%; }
:root :is(.gd-focus-left, .gd-focus-right, .gd-focus-top, .gd-focus-bottom) img { object-position: var(--gd-fx, 50%) var(--gd-fy, 50%); }

/* Sticky helper — put on a Group inside a Column for side-by-side scrolling stories. */
:root .gd-sticky {
	position: sticky;
	top: calc(var(--gd-admin-bar) + max(var(--gd-sticky-top, 6rem), var(--gd-site-header) + 1.5rem));
	align-self: start;
}

/* Responsive visibility (the block stays in the editor). */
@media (max-width: 781px) { :root .gd-hide-mobile { display: none !important; } }
@media (min-width: 782px) { :root .gd-hide-desktop { display: none !important; } }

/* ------------------------------------------------------------------ 2. Typography */
/* :root lifts these above page-builder site styles (Elementor's `.elementor-kit-N h3`, printed on every page of an
   Elementor site, block pages on its Full Width template included); the size presets below still win. */
:root .gd-section :is(h1, h2, h3, h4) {
	font-family: var(--gd-font-display, inherit);
	font-weight: var(--gd-display-weight, 700);
	letter-spacing: calc(-0.025em * var(--gd-track, 1));
	line-height: 1.05;
	text-wrap: balance;
	font-optical-sizing: auto;
}
:root .gd-section :is(h3, h4) { line-height: 1.2; letter-spacing: calc(-0.01em * var(--gd-track, 1)); }
/* Headings keep the case they were written in: Elementor's global H3 style capitalized every word ("Venuelabs.Com
   … To"). A block's own typography setting is inline, so it still wins. */
:root .gd-section :is(h1, h2, h3, h4, h5, h6):not(.gd-eyebrow) { text-transform: none; text-decoration: none; }
.gd-section p { text-wrap: pretty; }
/* Size-aware type: tracking and leading tighten as text gets bigger (the kit's size presets).
   --gd-track (printed by the plugin per display font, or fonts.tracking) scales how much: 1 by default. */
:root .gd-section .has-gd-display-font-size { letter-spacing: calc(-0.04em * var(--gd-track, 1)); line-height: 0.98; }
:root .gd-section .has-gd-title-font-size { letter-spacing: calc(-0.032em * var(--gd-track, 1)); line-height: 1.04; }
:root .gd-section .has-gd-heading-font-size { letter-spacing: calc(-0.026em * var(--gd-track, 1)); line-height: 1.1; }
:root .gd-section .has-gd-subtitle-font-size { letter-spacing: calc(-0.018em * var(--gd-track, 1)); line-height: 1.2; }
:root .gd-section .has-gd-stat-font-size { letter-spacing: calc(-0.045em * var(--gd-track, 1)); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Big numbers are display type: stats and counters with their own size use the display face (lining figures, so
   serif display fonts don't fall back to old-style numerals). A counter inside running text keeps the body face. */
:root .gd-section :is(.has-gd-stat-font-size, .gd-counter[style*="font-size"]) { font-family: var(--gd-font-display, inherit); font-variant-numeric: lining-nums tabular-nums; }
:root .gd-section .has-gd-lead-font-size { line-height: 1.55; letter-spacing: calc(-0.006em * var(--gd-track, 1)); }
:root .gd-section .has-gd-small-font-size { line-height: 1.5; }
/* Readable measure in em, so it scales with the text: ~70 characters for running text, ~60 when centered.
   (68ch would be too wide: "ch" is the width of a zero, wider than an average letter.) gd-narrow opts out. */
:root .gd-section :where(.is-layout-flow, .wp-block-column, .gd-card) > p:not(.gd-scrub-text, .gd-narrow) { max-width: 36em; }
:root .gd-section p.has-text-align-center:not(.gd-scrub-text, .gd-narrow, .gd-quote) { max-width: 32em; }
:root .gd-section :where(.is-layout-flow, .wp-block-column, .gd-card) > p.has-text-align-center { margin-inline: auto; }
/* Rhythm by role: big headlines get room before what follows; eyebrows hug their heading. */
:root .gd-section :is(.has-gd-display-font-size, .has-gd-title-font-size) + * { margin-block-start: var(--gd-gap-lg); }
:root .gd-section .has-gd-heading-font-size + * { margin-block-start: calc(var(--gd-gap) * 1.1); }
:root .gd-section .gd-eyebrow + * { margin-block-start: 0.9rem; }
.gd-section ::selection { background: color-mix(in oklab, var(--gd-primary) 40%, transparent); }

.gd-eyebrow {
	display: block;
	width: fit-content;
	padding: 0.45em 0.95em;
	border-radius: 999px;
	border: 1px solid color-mix(in oklab, currentColor 20%, transparent);
	background: color-mix(in oklab, currentColor 7%, transparent);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}
:root .gd-eyebrow.has-text-align-center { margin-inline: auto; }

.gd-dim { color: color-mix(in oklab, currentColor 72%, transparent); }
.gd-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Eyebrow with a pulsing status dot. */
.gd-eyebrow-dot::before {
	content: "";
	display: inline-block;
	vertical-align: 0.08em;
	width: 0.5em;
	height: 0.5em;
	margin-inline-end: 0.6em;
	border-radius: 50%;
	background: var(--gd-accent);
	box-shadow: 0 0 0 0.22em color-mix(in oklab, var(--gd-accent) 25%, transparent);
	animation: gd-pulse 2.4s var(--gd-ease-in-out) infinite;
}

/* List with check-mark bullets (pricing features, benefits). */
:root .gd-checklist { list-style: none; padding-inline-start: 0; margin-inline-start: 0; }
.gd-checklist li { position: relative; padding-inline-start: 1.9em; margin-block: 0.6em; }
.gd-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.18em;
	width: 1.2em;
	height: 1.2em;
	background: var(--gd-tint);
	-webkit-mask: var(--gd-icon-tick) center / contain no-repeat;
	mask: var(--gd-icon-tick) center / contain no-repeat;
}

/* Emphasis styles: italicize a word (Ctrl/Cmd+I) inside a heading that carries one of these classes. */
.gd-em-grad em,
:is(.gd-gradient-text, .is-style-gd-gradient-text) {
	background: var(--gd-grad-text);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	animation: gd-pan 8s linear infinite;
}
.gd-em-grad em { font-style: normal; padding-inline-end: 0.04em; }
/* Split or blurred words inside a gradient <em> are separate layers: each gets its own gradient. */
.gd-em-grad em :is(.gd-word, .gd-char),
:is(.gd-gradient-text, .is-style-gd-gradient-text) :is(.gd-word, .gd-char) {
	background: var(--gd-grad-text);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: gd-pan 8s linear infinite;
}
.gd-em-serif em {
	font-family: "Instrument Serif", "Playfair Display", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: calc(-0.01em * var(--gd-track, 1));
}
.gd-em-underline em {
	font-style: normal;
	background: linear-gradient(90deg, var(--gd-accent), var(--gd-primary)) no-repeat 0 92% / 0% 0.14em;
	transition: background-size 1.1s var(--gd-ease-out) 0.35s;
}
.gd-em-underline.is-inview em,
.gd-em-underline.is-split em,
html:not(.gd-js) .gd-em-underline em,
.gd-failsafe .gd-em-underline em { background-size: 100% 0.14em; }
/* Marker highlight that sweeps in behind the italic words. */
.gd-em-mark em {
	font-style: normal;
	padding-inline: 0.08em;
	background: linear-gradient(90deg, color-mix(in oklab, var(--gd-accent) 55%, transparent), color-mix(in oklab, var(--gd-primary) 42%, transparent)) no-repeat 0 88% / 0% 0.45em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 1.1s var(--gd-ease-out) 0.35s;
}
.gd-em-mark.is-inview em,
.gd-em-mark.is-split em,
html:not(.gd-js) .gd-em-mark em,
.gd-failsafe .gd-em-mark em { background-size: 100% 0.45em; }
/* Outlined (stroked) italic words. */
.gd-em-outline em { font-style: normal; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: max(1.5px, 0.028em) currentColor; }
/* Rotating words: <em>alive / fast / yours</em> inside a gd-rotate heading (the script builds the stack). */
.gd-rotate__stack { display: inline-grid; vertical-align: bottom; }
.gd-rotate__word { grid-area: 1 / 1; transition: opacity 0.5s var(--gd-ease-out), translate 0.65s var(--gd-ease-out), filter 0.5s var(--gd-ease-out); }
.gd-rotate__word:not(.is-active) { opacity: 0; translate: 0 0.4em; filter: blur(6px); }
.gd-rotate__word.is-leaving { translate: 0 -0.4em; }
.gd-rotate em:has(.gd-rotate__stack) { background: none; animation: none; color: inherit; -webkit-text-fill-color: currentColor; }
.gd-em-grad.gd-rotate .gd-rotate__word {
	background: var(--gd-grad-text);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: gd-pan 8s linear infinite;
	padding-inline-end: 0.04em;
}

/* Spotlight quote (a big centered Paragraph) and rating stars. */
:root .gd-section .gd-quote {
	max-width: 24em;
	margin-inline: auto;
	font-family: var(--gd-font-display, inherit);
	font-weight: 500;
	letter-spacing: calc(-0.022em * var(--gd-track, 1));
	line-height: 1.22;
	text-wrap: balance;
}
:root .gd-section .gd-stars { color: var(--gd-tint); letter-spacing: 0.22em; font-size: 1.05rem; }
:root :is(.has-gd-ink-background-color, .has-gd-night-gradient-background, .wp-block-cover) .gd-stars { color: var(--gd-accent); }

/* ------------------------------------------------------------------ 3. Surfaces & cards */
:is(.gd-card, .is-style-gd-card, .gd-glass, .is-style-gd-glass, .gd-spotlight, .is-style-gd-spotlight, .gd-gradient-border, .is-style-gd-gradient-border) {
	position: relative;
	isolation: isolate;
	border-radius: var(--gd-radius);
}
:root :is(.gd-card, .is-style-gd-card) {
	background: var(--gd-surface);
	border: 1px solid var(--gd-surface-border);
	box-shadow: var(--gd-surface-highlight), var(--gd-surface-shadow);
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
:root :is(.gd-glass, .is-style-gd-glass) {
	background: linear-gradient(180deg, color-mix(in oklab, #fff 13%, transparent), color-mix(in oklab, #fff 4%, transparent));
	border: 1px solid color-mix(in oklab, #fff 22%, transparent);
	-webkit-backdrop-filter: blur(20px) saturate(165%);
	backdrop-filter: blur(20px) saturate(165%);
	box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 30%, transparent), inset 0 -1px 0 color-mix(in oklab, #fff 6%, transparent), 0 30px 60px -30px rgb(0 0 0 / 0.5);
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
/* Card footer: a gd-card-foot block sits at the bottom of its card, so a row of cards lines up. */
:root :is(.gd-card, .is-style-gd-card):has(> .gd-card-foot, > .wp-block-group__inner-container > .gd-card-foot),
:root :is(.gd-card, .is-style-gd-card) > .wp-block-group__inner-container:has(> .gd-card-foot) { display: flex; flex-direction: column; flex: 1 1 auto; }
:root :is(.gd-card, .is-style-gd-card) > .gd-card-foot,
:root :is(.gd-card, .is-style-gd-card) > .wp-block-group__inner-container > .gd-card-foot { margin-block-start: auto !important; padding-block-start: var(--gd-gap); }
:root .gd-glow { box-shadow: 0 0 0 1px color-mix(in oklab, var(--gd-primary) 35%, transparent), 0 24px 70px -18px color-mix(in oklab, var(--gd-primary) 65%, transparent); }
:root .gd-shadow { box-shadow: var(--gd-shadow-lg); }

/* Animated gradient border (::after). Works on any background — the ring is cut out with a mask. */
:is(.gd-gradient-border, .is-style-gd-gradient-border)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1.5px;
	border-radius: inherit;
	background: conic-gradient(from var(--gd-angle), var(--gd-primary), var(--gd-secondary), var(--gd-accent), var(--gd-primary));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	animation: gd-spin-angle 6s linear infinite;
	pointer-events: none;
}
@supports (background: linear-gradient(in oklch, red, blue)) {
	:is(.gd-gradient-border, .is-style-gd-gradient-border)::after { background: conic-gradient(in oklch from var(--gd-angle), var(--gd-primary), var(--gd-secondary), var(--gd-accent), var(--gd-primary)); }
}
/* Border beam: a single comet of light travelling around a gradient-border card. */
:is(.gd-gradient-border, .is-style-gd-gradient-border).gd-beam::after {
	background: conic-gradient(from var(--gd-angle), transparent 0 68%, color-mix(in oklab, var(--gd-accent) 85%, transparent) 80%, var(--gd-primary) 92%, transparent 100%);
	animation-duration: 3.2s;
}

/* Cursor spotlight (::before). The script feeds --gd-mx / --gd-my. */
:is(.gd-spotlight, .is-style-gd-spotlight)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(420px circle at var(--gd-mx, 50%) var(--gd-my, 0%), color-mix(in oklab, var(--gd-primary) 24%, transparent), transparent 62%);
	opacity: 0;
	transition: opacity 0.45s var(--gd-ease-out);
	pointer-events: none;
}
:is(.gd-spotlight, .is-style-gd-spotlight):hover::before { opacity: 1; }

/* Tilted images get a moving glare (the script feeds --gd-mx / --gd-my). */
:root figure.gd-tilt { position: relative; overflow: hidden; border-radius: var(--gd-radius); }
:root figure.gd-tilt::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background: radial-gradient(480px circle at var(--gd-mx, 50%) var(--gd-my, 0%), rgb(255 255 255 / 0.3), transparent 55%);
	mix-blend-mode: soft-light;
	opacity: 0;
	transition: opacity 0.45s var(--gd-ease-out);
}
:root figure.gd-tilt:hover::after { opacity: 1; }

.gd-zoom-hover { overflow: hidden; }
.gd-zoom-hover img { transition: scale 0.9s var(--gd-ease-out); }
.gd-zoom-hover:hover img { scale: 1.06; }

/* Image-free hero visual: a slowly turning gradient orb behind whatever the Group contains. */
.gd-orb { position: relative; isolation: isolate; }
.gd-orb::before {
	content: "";
	position: absolute;
	inset: 8%;
	z-index: -1;
	border-radius: 50%;
	background: conic-gradient(from var(--gd-angle), var(--gd-primary), var(--gd-secondary), var(--gd-accent), var(--gd-primary));
	filter: blur(48px) saturate(130%);
	opacity: 0.85;
	animation: gd-spin-angle 12s linear infinite;
	pointer-events: none;
}

/* ------------------------------------------------------------------ 4. Backgrounds (::before = glow layer, ::after = texture layer) */
.gd-aurora::before,
.gd-mesh::before {
	content: "";
	position: absolute;
	inset: -25%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(38% 46% at 22% 28%, color-mix(in oklab, var(--gd-primary) 72%, transparent), transparent 70%),
		radial-gradient(34% 42% at 78% 22%, color-mix(in oklab, var(--gd-secondary) 62%, transparent), transparent 70%),
		radial-gradient(42% 48% at 62% 82%, color-mix(in oklab, var(--gd-accent) 55%, transparent), transparent 70%);
}
.gd-aurora::before {
	translate: calc(var(--gd-px, 0) * -3.5%) calc(var(--gd-py, 0) * -3%); /* drifts against the cursor */
	filter: blur(70px) saturate(140%);
	opacity: 0.85;
	will-change: transform;
	animation: gd-aurora 20s var(--gd-ease-in-out) infinite alternate;
}
.gd-mesh::before { inset: 0; opacity: 0.55; }

.gd-grid-bg::after,
.gd-dots-bg::after,
.gd-noise::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.gd-grid-bg::after {
	background-image:
		linear-gradient(color-mix(in oklab, currentColor 10%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in oklab, currentColor 10%, transparent) 1px, transparent 1px);
	background-size: 56px 56px;
	/* The visible patch of grid follows the cursor (the script feeds --gd-mx / --gd-my). */
	-webkit-mask-image: radial-gradient(ellipse 60% 55% at var(--gd-mx, 50%) var(--gd-my, 35%), #000 22%, transparent 75%);
	mask-image: radial-gradient(ellipse 60% 55% at var(--gd-mx, 50%) var(--gd-my, 35%), #000 22%, transparent 75%);
}
.gd-dots-bg::after {
	background-image: radial-gradient(color-mix(in oklab, currentColor 20%, transparent) 1px, transparent 1.5px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 65% 60% at var(--gd-mx, 50%) var(--gd-my, 40%), #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 65% 60% at var(--gd-mx, 50%) var(--gd-my, 40%), #000 20%, transparent 75%);
}
.gd-noise::after {
	opacity: 0.12;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Slowly panning gradient background — pair with a gradient preset on the block. */
:root .gd-animated-gradient {
	background-size: 220% 220% !important;
	animation: gd-pan-bg 14s var(--gd-ease-in-out) infinite alternate;
}

/* ------------------------------------------------------------------ 5. Icons (put on a Heading or Paragraph: "gd-icon gd-icon-zap") */
.gd-icon { --gd-icon-color: var(--gd-tint); position: relative; }
.gd-icon::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.1rem;
	border-radius: var(--gd-radius-sm);
	background: color-mix(in oklab, var(--gd-icon-color) 16%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gd-icon-color) 32%, transparent);
}
.gd-icon::after {
	content: "";
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--gd-icon-color);
	-webkit-mask: var(--gd-icon) center / contain no-repeat;
	mask: var(--gd-icon) center / contain no-repeat;
}
.gd-icon.has-text-align-center::before { margin-inline: auto; }
.gd-icon.has-text-align-center::after { left: calc(50% - 0.75rem); }
.gd-icon-secondary { --gd-icon-color: var(--gd-secondary); }
.gd-icon-accent { --gd-icon-color: var(--gd-accent); }
.gd-icon-grad::before { background: var(--gd-grad); box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--gd-primary) 70%, transparent); }
.gd-icon-grad::after { background: #fff; }

/* ------------------------------------------------------------------ 6. Buttons (classes go on the Button block wrapper) */
/* Every button inside kit sections gets hover feedback; the gd-* classes below add emphasis. */
:is(.gd-section, .gd-nav) .wp-block-button__link { text-transform: none; transition: transform 0.35s var(--gd-ease-out), scale 0.2s var(--gd-ease-out), box-shadow 0.35s var(--gd-ease-out), background-color 0.3s, background-size 0.5s var(--gd-ease-out), border-color 0.35s, color 0.3s, filter 0.3s; }
/* Button type and box follow the kit, not the theme. Specificity is deliberately high (five classes): themes style
   outline buttons with four-class selectors of their own (Astra: 1rem / line-height 1em / 2px border), which left
   the outline button a different size from the filled one next to it. The 1px transparent border on every button
   keeps both boxes the same height, because an outline button's border would otherwise add to it.
   A block's own font-size setting still wins: preset classes are !important and custom sizes are inline. */
:root .gd-section .wp-block-buttons .wp-block-button .wp-block-button__link,
:root .gd-nav .wp-block-buttons .wp-block-button .wp-block-button__link {
	font-size: var(--gd-body-size);
	font-weight: 500;
	line-height: 1.25;
	border-style: solid;
	border-width: 1px;
	border-color: transparent;
}
:root .gd-nav .wp-block-buttons .wp-block-button .wp-block-button__link { font-size: 0.95rem; }
:root .gd-section .wp-block-buttons .is-style-outline > .wp-block-button__link:not(.has-background),
:root .gd-nav .wp-block-buttons .is-style-outline > .wp-block-button__link:not(.has-background) {
	border-color: color-mix(in oklab, currentColor 40%, transparent);
}
/* Filled buttons: soft top sheen + a brand-tinted glow. Outline buttons stay transparent on every theme. */
:root :is(.gd-section, .gd-nav) .wp-block-button__link.has-background {
	background-image: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0) 60%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 10px 26px -14px color-mix(in oklab, var(--gd-primary) 80%, transparent);
}
/* Outline buttons stay transparent on every theme; on hover a brand tint wipes in from the left and the hairline
   firms up. The tint is translucent and built from --gd-tint (primary on dark sections, the text-safe deep shade on
   light ones), so the label keeps its contrast either way. */
:root :is(.gd-section, .gd-nav) .is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	background-image: linear-gradient(color-mix(in oklab, var(--gd-tint) 20%, transparent), color-mix(in oklab, var(--gd-tint) 20%, transparent));
	background-repeat: no-repeat;
	background-position: 0 50%;
	background-size: 0% 100%;
	border-color: color-mix(in oklab, currentColor 40%, transparent);
}
:root :is(.gd-section, .gd-nav) .wp-block-button__link:active { scale: 0.97; }
/* Hover: the button lifts slightly in place. Nothing follows the cursor, so the label never slides out from under
   the pointer and neighbouring buttons never appear to move. */
:is(.gd-section, .gd-nav) .wp-block-button:not(.gd-magnetic) .wp-block-button__link:hover,
:is(.gd-section, .gd-nav) .wp-block-button:not(.gd-magnetic) .wp-block-button__link:focus-visible { transform: translateY(-2px); }
:root :is(.gd-section, .gd-nav) .wp-block-button__link.has-background:hover {
	filter: brightness(1.06) saturate(1.04);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.26), 0 18px 38px -18px color-mix(in oklab, var(--gd-primary) 95%, transparent);
}
:root :is(.gd-section, .gd-nav) .is-style-outline > .wp-block-button__link:not(.has-background):hover,
:root :is(.gd-section, .gd-nav) .is-style-outline > .wp-block-button__link:not(.has-background):focus-visible {
	background-size: 100% 100%;
	border-color: color-mix(in oklab, currentColor 72%, transparent);
}
:is(.gd-shine, .is-style-gd-shine) .wp-block-button__link,
.gd-btn-glow .wp-block-button__link,
.gd-btn-arrow .wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: transform 0.35s var(--gd-ease-out), box-shadow 0.35s var(--gd-ease-out), background-color 0.3s;
}
:is(.gd-shine, .is-style-gd-shine) .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 25%, rgb(255 255 255 / 0.5) 50%, transparent 75%);
	translate: -130% 0;
	transition: translate 0.9s var(--gd-ease-out);
}
/* Outline/transparent buttons: sweep in the text color so it shows on light backgrounds too. */
:is(.gd-shine, .is-style-gd-shine) .wp-block-button__link:not(.has-background)::after {
	background: linear-gradient(110deg, transparent 25%, color-mix(in oklab, currentColor 22%, transparent) 50%, transparent 75%);
}
:is(.gd-shine, .is-style-gd-shine) .wp-block-button__link:hover::after { translate: 130% 0; }
:root :is(.gd-section, .gd-nav) .gd-btn-glow .wp-block-button__link { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 14px 36px -12px color-mix(in oklab, var(--gd-primary) 90%, transparent); }
:root :is(.gd-section, .gd-nav) .gd-btn-glow .wp-block-button__link:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 20px 50px -12px color-mix(in oklab, var(--gd-primary) 100%, transparent); }
.gd-btn-arrow .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; }
.gd-btn-arrow .wp-block-button__link::before {
	content: "";
	order: 2;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: var(--gd-icon-arrow) center / contain no-repeat;
	mask: var(--gd-icon-arrow) center / contain no-repeat;
	transition: translate 0.35s var(--gd-ease-out);
}
.gd-btn-arrow .wp-block-button__link:hover::before { translate: 0.3em 0; }

/* Magnetic: the script moves the link toward the cursor; ::before widens the pull zone. */
.gd-magnetic { position: relative; }
.gd-magnetic::before { content: ""; position: absolute; inset: -18px; }
/* No transform transition here: the magnetic script eases the movement itself, and a CSS transition on top
   of it lags behind the cursor. */
.gd-magnetic .wp-block-button__link { transition: scale 0.2s var(--gd-ease-out), box-shadow 0.35s var(--gd-ease-out), background-color 0.3s, color 0.3s, filter 0.3s; will-change: transform; }

/* ------------------------------------------------------------------ 7. Entrance motion (hidden only when the script is running) */
:is(.gd-reveal, .gd-reveal-left, .gd-reveal-right, .gd-reveal-zoom, .gd-reveal-blur, .gd-split, .gd-split-words, .gd-split-chars, .gd-lift, .gd-tilt),
.gd-stagger > :not(.wp-block-group__inner-container),
.gd-stagger > .wp-block-group__inner-container > * {
	transition-property: opacity, translate, scale, filter, transform, box-shadow;
	transition-duration: var(--gd-dur), var(--gd-dur), var(--gd-dur), var(--gd-dur), var(--gd-hover-dur, 0.45s), var(--gd-hover-dur, 0.45s);
	transition-timing-function: var(--gd-ease-out);
	transition-delay: var(--gd-delay, 0s), var(--gd-delay, 0s), var(--gd-delay, 0s), var(--gd-delay, 0s), 0s, 0s;
}
/* Default reveal: fade + rise + a touch of blur — reads as "premium" rather than a plain fade. */
.gd-js:not(.gd-failsafe) :is(.gd-reveal, .gd-reveal-left, .gd-reveal-right, .gd-reveal-zoom, .gd-reveal-blur):not(.is-inview),
.gd-js:not(.gd-failsafe) .gd-stagger > :not(.is-inview, .wp-block-group__inner-container),
.gd-js:not(.gd-failsafe) .gd-stagger > .wp-block-group__inner-container > :not(.is-inview),
.gd-js:not(.gd-failsafe):not(.gd-cinematic) :is(.gd-split, .gd-split-words, .gd-split-chars):not(.is-inview) {
	opacity: 0;
	filter: blur(6px);
}
.gd-js:not(.gd-failsafe) :is(.gd-reveal, .gd-reveal-blur):not(.is-inview),
.gd-js:not(.gd-failsafe) .gd-stagger > :not(.is-inview, .wp-block-group__inner-container),
.gd-js:not(.gd-failsafe) .gd-stagger > .wp-block-group__inner-container > :not(.is-inview),
.gd-js:not(.gd-failsafe):not(.gd-cinematic) :is(.gd-split, .gd-split-words, .gd-split-chars):not(.is-inview) {
	translate: 0 var(--gd-dist);
}
.gd-js:not(.gd-failsafe) .gd-reveal-left:not(.is-inview) { translate: calc(var(--gd-dist) * -1.6) 0; }
.gd-js:not(.gd-failsafe) .gd-reveal-right:not(.is-inview) { translate: calc(var(--gd-dist) * 1.6) 0; }
.gd-js:not(.gd-failsafe) .gd-reveal-zoom:not(.is-inview) { scale: 0.92; }
.gd-js:not(.gd-failsafe) .gd-reveal-blur:not(.is-inview) { filter: blur(16px); }
/* Word-by-word blur-in (cinematic); in lite it's a single blur reveal. */
.gd-blur-words { transition: opacity var(--gd-dur) var(--gd-ease-out) var(--gd-delay, 0s), filter var(--gd-dur) var(--gd-ease-out) var(--gd-delay, 0s); }
.gd-js:not(.gd-failsafe):not(.gd-cinematic) .gd-blur-words:not(.is-inview) { opacity: 0; filter: blur(12px); }
.gd-js.gd-cinematic:not(.gd-failsafe) .gd-blur-words:not(.is-split) { visibility: hidden; }
/* Mask wipe: images/cards are uncovered from the bottom up (use on its own, not with gd-reveal). */
.gd-reveal-mask { transition: clip-path 1.2s var(--gd-ease-out) var(--gd-delay, 0s), scale 1.4s var(--gd-ease-out) var(--gd-delay, 0s); }
.gd-js:not(.gd-failsafe) .gd-reveal-mask:not(.is-inview) { clip-path: inset(100% 0 0 0 round var(--gd-radius)); scale: 1.04; }
/* Cinematic tier: split headlines stay hidden until GSAP SplitText has wrapped them. */
.gd-js.gd-cinematic:not(.gd-failsafe) :is(.gd-split, .gd-split-words, .gd-split-chars):not(.is-split) { visibility: hidden; }

.gd-delay-1 { --gd-delay: 0.1s; }
.gd-delay-2 { --gd-delay: 0.2s; }
.gd-delay-3 { --gd-delay: 0.3s; }
.gd-delay-4 { --gd-delay: 0.45s; }
.gd-delay-5 { --gd-delay: 0.6s; }

/* Hover motion */
:root .gd-lift:hover { transform: translateY(-6px); box-shadow: var(--gd-surface-highlight), var(--gd-shadow-lg), 0 0 0 1px color-mix(in oklab, var(--gd-tint) 24%, transparent); }
/* Pointer depth: put gd-depth on a section; children with gd-depth-1…3 drift against the cursor.
   (Uses transform — nest instead of combining with gd-float / gd-tilt / gd-lift on the same block.) */
:root .gd-depth-1 { transform: translate3d(calc(var(--gd-px, 0) * -10px), calc(var(--gd-py, 0) * -8px), 0); }
:root .gd-depth-2 { transform: translate3d(calc(var(--gd-px, 0) * -22px), calc(var(--gd-py, 0) * -16px), 0); }
:root .gd-depth-3 { transform: translate3d(calc(var(--gd-px, 0) * -38px), calc(var(--gd-py, 0) * -28px), 0); }
.gd-tilt { transform-style: preserve-3d; will-change: transform; }

/* Ambient loops */
.gd-float { animation: gd-float 6s var(--gd-ease-in-out) infinite; }
.gd-float.gd-delay-1, .gd-float.gd-delay-2 { animation-delay: -2s; }
.gd-float.gd-delay-3, .gd-float.gd-delay-4, .gd-float.gd-delay-5 { animation-delay: -4s; }
.gd-spin-slow { animation: gd-spin 24s linear infinite; }
.gd-pulse { animation: gd-pulse 2.4s var(--gd-ease-in-out) infinite; }

/* Scroll-linked (cinematic tier animates these with GSAP; CSS only prepares them). */
.gd-cinematic :is(figure.gd-parallax, figure.gd-parallax-strong) { overflow: hidden; }
.gd-cinematic :is(figure.gd-parallax, figure.gd-parallax-strong) img { scale: 1.22; }
.gd-scrub-text { font-family: var(--gd-font-display, inherit); font-weight: 600; line-height: 1.18; letter-spacing: calc(-0.02em * var(--gd-track, 1)); text-wrap: pretty; }
.gd-cinematic .wp-block-cover:is(.gd-parallax, .gd-parallax-strong) .wp-block-cover__image-background { scale: 1.22; }

/* ------------------------------------------------------------------ 8. Components */
/* Marquee: a Group (flex row, no wrap). The script duplicates the items for a seamless loop. */
:root .gd-marquee {
	overflow: hidden;
	flex-wrap: nowrap;
	--gd-marquee-gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.gd-marquee__track { display: flex; flex-wrap: nowrap; width: max-content; animation: gd-marquee var(--gd-marquee-dur, 40s) linear infinite; }
.gd-marquee__group { display: flex; flex-shrink: 0; align-items: center; gap: var(--gd-marquee-gap); padding-inline-end: var(--gd-marquee-gap); }
:root .gd-marquee__group > * { flex-shrink: 0; margin: 0; }
:root .gd-marquee :is(.gd-card, .gd-glass, .is-style-gd-card, .is-style-gd-glass) { flex-shrink: 0; width: min(380px, 80vw); }
.gd-marquee:hover .gd-marquee__track { animation-play-state: paused; }
.gd-marquee-reverse .gd-marquee__track { animation-direction: reverse; }

/* Logo strip: gd-logos on a Group of Image blocks — a static flex row, or together with gd-marquee. Every logo
   gets the same height, so mixed PNGs read as one quiet row. Light sections: grayscale and dimmed, full color on
   hover. Dark sections: solid white silhouettes, so use transparent PNG/SVG logos there (an opaque white
   background would become a white box). Tune the size with --gd-logo-h on the Group (Additional CSS). */
:root .gd-logos { --gd-logo-h: clamp(1.45rem, 1.05rem + 1.1vw, 2.1rem); align-items: center; }
/* Static rows breathe more than WordPress's 0.5em flex gap. Specificity (0,0,1): the Group's own Block spacing still wins. */
div:where(.gd-logos:not(.gd-marquee)) { gap: 1.5rem clamp(1.75rem, 1rem + 3vw, 3.5rem); }
:root .gd-logos .wp-block-image { flex: none; margin: 0; }
:root .gd-logos .wp-block-image img {
	display: block;
	width: auto !important; /* the Image block's own size settings would make the logos uneven */
	height: var(--gd-logo-h) !important;
	max-width: min(11rem, 40vw);
	object-fit: contain;
	filter: grayscale(1) contrast(1.1);
	opacity: 0.6;
	transition: filter 0.35s var(--gd-ease-out), opacity 0.35s var(--gd-ease-out);
}
:root .gd-logos .wp-block-image:is(:hover, :focus-within) img { filter: none; opacity: 1; }
:root :is(.has-gd-ink-background-color, .has-gd-night-gradient-background, .has-gd-primary-background-color, .wp-block-cover) .gd-logos .wp-block-image img { filter: brightness(0) invert(1); opacity: 0.66; }
:root :is(.has-gd-ink-background-color, .has-gd-night-gradient-background, .has-gd-primary-background-color, .wp-block-cover) .gd-logos .wp-block-image:is(:hover, :focus-within) img { opacity: 1; }

/* Brand wall: gd-brandwall on a Grid Group of gd-brand cards. Each card holds a name (gd-brand-name) and a
   category (gd-brand-kind) — wordmarks set in the page's own type, so a wall of twenty brands costs no images
   and never shows a stray white box. gd-brand-1/-2/-3 tint a name (and its hover glow) with the palette;
   gd-brand-hi inverts one card to the paper colour, the way a highlight reel picks out one frame. */
:root .gd-brandwall {
	gap: clamp(0.55rem, 0.35rem + 0.5vw, 0.9rem);
	/* Fixed counts, so a wall of twelve never ends in a ragged row (WordPress's own auto-fill grid
	   lands on whatever fits). Six, four and two all divide a twelve-name wall. */
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1099px) { :root .gd-brandwall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 679px) { :root .gd-brandwall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:root .gd-section .gd-brandwall > * + *,
:root .gd-section .gd-brandwall > .wp-block-group__inner-container > * + * { margin-block-start: 0; }
:root .gd-brand {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 0.55rem;
	min-height: clamp(6.5rem, 5.5rem + 3vw, 8.5rem);
	padding: clamp(0.9rem, 0.7rem + 0.7vw, 1.4rem);
	text-align: center;
	border-radius: calc(var(--gd-radius) * 0.62);
	background: var(--gd-surface);
	border: 1px solid var(--gd-surface-border);
	transition: transform 0.4s var(--gd-ease-out), border-color 0.4s, box-shadow 0.4s, background-color 0.4s;
}
:root .gd-brand:hover {
	transform: translateY(-4px);
	border-color: color-mix(in oklab, var(--gd-brand, var(--gd-tint)) 58%, transparent);
	box-shadow: 0 22px 46px -30px color-mix(in oklab, var(--gd-brand, var(--gd-tint)) 90%, transparent);
}
:root .gd-brand .gd-brand-name {
	font-family: var(--gd-font-display, inherit);
	font-size: clamp(1rem, 0.92rem + 0.4vw, 1.3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.12;
}
:root .gd-brand .gd-brand-kind { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.52; }
/* The card is a grid, so the kit's flow rhythm must not add a second gap between the two lines. */
:root .gd-section .gd-brand > * + *,
:root .gd-section .gd-brand > .wp-block-group__inner-container > * + * { margin-block-start: 0; }
.gd-brand-1 { --gd-brand: var(--gd-primary); }
.gd-brand-2 { --gd-brand: var(--gd-secondary); }
.gd-brand-3 { --gd-brand: var(--gd-accent); }
/* Names keep their brand hue but are mixed toward the section's text colour, so they stay readable on ink. */
:root .gd-brand:is(.gd-brand-1, .gd-brand-2, .gd-brand-3) .gd-brand-name { color: color-mix(in oklab, var(--gd-brand) 72%, currentColor); }
:root .gd-brand-hi { background: var(--gd-paper); border-color: transparent; color: var(--gd-ink); }
:root .gd-brand-hi:hover { box-shadow: 0 24px 50px -28px color-mix(in oklab, var(--gd-paper) 55%, transparent); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { :root .gd-brand, :root .gd-brand:hover { transform: none; } }

/* Image slider: gd-slider on a Group of Image (or Cover) blocks. The script stacks the slides and adds dots and
   arrows; it crossfades on a timer, pauses on hover, focus and off-screen, and swipes on touch. Without JavaScript
   (and in the editor) the slides just stack, so every image stays visible and editable. Variants: gd-slider-slow,
   gd-slider-fast, gd-slider-manual (no autoplay). */
:root .gd-slider { position: relative; }
.gd-slider__stack { display: grid; }
:root .gd-slider__stack > * { grid-area: 1 / 1; margin: 0 !important; }
.gd-js .gd-slider__stack > .gd-slide {
	opacity: 0;
	scale: 1.025;
	pointer-events: none;
	transition: opacity 0.9s var(--gd-ease-out), scale 1.6s var(--gd-ease-out);
}
.gd-js .gd-slider__stack > .gd-slide.is-active { opacity: 1; scale: 1; pointer-events: auto; }
.gd-slider__ui {
	position: absolute;
	inset: auto 0 clamp(0.6rem, 1.6vw, 1.1rem);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	pointer-events: none;
}
.gd-slider__ui > * { pointer-events: auto; }
.gd-slider__dots {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.6rem;
	border-radius: 999px;
	background: color-mix(in oklab, #000 42%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
/* :root: the dots and arrows are <button>s the engine builds, and page-builder site styles target every button
   (Elementor's `.elementor-kit-N button` turned them into white pills with 47px padding). */
:root .gd-slider__dot {
	width: 0.45rem;
	height: 0.45rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in oklab, #fff 48%, transparent);
	cursor: pointer;
	transition: width 0.35s var(--gd-ease-out), background-color 0.35s;
}
:root .gd-slider__dot.is-active { width: 1.35rem; background: #fff; }
:root .gd-slider__arrow {
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	display: grid;
	place-items: center;
	color: #fff;
	background: color-mix(in oklab, #000 42%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	cursor: pointer;
	transition: background-color 0.3s, translate 0.3s var(--gd-ease-out);
}
:root .gd-slider__arrow:hover { background: color-mix(in oklab, #000 68%, transparent); }
:root .gd-slider__arrow--prev:hover { translate: -2px 0; }
:root .gd-slider__arrow--next:hover { translate: 2px 0; }
.gd-slider__arrow::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}
.gd-slider__arrow--prev::before { rotate: 135deg; translate: 0.1rem 0; }
.gd-slider__arrow--next::before { rotate: -45deg; translate: -0.1rem 0; }
@media (prefers-reduced-motion: reduce) {
	.gd-js .gd-slider__stack > .gd-slide { transition: none; scale: 1; }
	.gd-slider__arrow, .gd-slider__dot { transition: none; }
}

/* Full-bleed background slider: gd-bgslider beside gd-slider on a Group of Images, placed as a section's first
   child. The slides fill the whole section, a scrim keeps the copy readable over any photograph, and the dots
   move to the corner. The section already clips and isolates, so no wrapper is needed. Without JavaScript (and
   in the editor) the group stays in flow and every photo is visible and editable. */
.gd-js :is(.gd-section, .gd-stage) > .gd-bgslider,
.gd-js :is(.gd-section, .gd-stage) > .wp-block-group__inner-container > .gd-bgslider {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: auto;
	max-width: none;
	margin: 0;
	pointer-events: none; /* clicks reach the hero copy; the dots switch themselves back on */
}
/* Everything after the background layer paints above it. */
:root .gd-section > .gd-bgslider ~ *,
:root .gd-section > .wp-block-group__inner-container > .gd-bgslider ~ * { position: relative; z-index: 1; }
:root .gd-section > .gd-bgslider + *,
:root .gd-section > .wp-block-group__inner-container > .gd-bgslider + * { margin-block-start: 0; }
.gd-js .gd-bgslider .gd-slider__stack { position: absolute; inset: 0; }
.gd-js .gd-bgslider .gd-slider__stack > * { height: 100%; }
.gd-js .gd-bgslider :is(figure, img) { width: 100%; height: 100%; margin: 0; border-radius: 0; }
.gd-js .gd-bgslider img {
	display: block;
	object-fit: cover;
	object-position: var(--gd-fx, 58%) var(--gd-fy, 32%); /* gd-focus-* on a slide moves the crop */
}
.gd-js .gd-bgslider .gd-slider__stack > .gd-slide { scale: 1; transition: opacity 1.2s var(--gd-ease-out); }
/* One slow pan across the whole stack, so a slide never jumps back mid-crossfade. */
.gd-js .gd-bgslider .gd-slider__stack { transform-origin: 56% 38%; animation: gd-bg-pan 26s ease-in-out infinite alternate; }
@keyframes gd-bg-pan { from { scale: 1.03; } to { scale: 1.11; } }
/* Scrim: heaviest where the copy sits, lifting toward the side the subject stands on, and fading into the
   section below. --gd-scrim (0–1) turns the whole wash up or down. */
.gd-bgslider .gd-slider__stack::after {
	content: "";
	grid-area: 1 / 1;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(100deg,
			color-mix(in oklab, var(--gd-ink) calc(var(--gd-scrim, 1) * 93%), transparent) 0%,
			color-mix(in oklab, var(--gd-ink) calc(var(--gd-scrim, 1) * 82%), transparent) 36%,
			color-mix(in oklab, var(--gd-ink) calc(var(--gd-scrim, 1) * 46%), transparent) 70%,
			color-mix(in oklab, var(--gd-ink) calc(var(--gd-scrim, 1) * 24%), transparent) 100%),
		linear-gradient(to top, var(--gd-ink) 0%, color-mix(in oklab, var(--gd-ink) 55%, transparent) 15%, transparent 44%),
		linear-gradient(to bottom, color-mix(in oklab, var(--gd-ink) 82%, transparent) 0%, transparent 28%);
}
.gd-bgslider .gd-slider__ui { inset: auto clamp(1rem, 3.5vw, 2.75rem) clamp(1.1rem, 3vh, 2rem) auto; justify-content: flex-end; }
/* Copy column over a background slider: it holds one side of the section instead of sitting in the middle.
   --gd-hero-copy sets its width; gd-hero-copy-end moves it to the other side. */
:root .gd-section > .gd-hero-copy,
:root .gd-section > .wp-block-group__inner-container > .gd-hero-copy { max-width: var(--gd-hero-copy, 46rem); margin-inline: 0 auto; }
:root .gd-section > .gd-hero-copy-end { margin-inline: auto 0; }
@media (max-width: 781px) {
	.gd-js .gd-bgslider img { object-position: var(--gd-fx, 62%) var(--gd-fy, 28%); }
	.gd-bgslider .gd-slider__ui { inset: auto 0 1rem; justify-content: center; }
	/* A phone has no room for a clear side, so the wash turns even: the copy crosses the whole frame. */
	.gd-bgslider .gd-slider__stack::after {
		background:
			linear-gradient(180deg,
				color-mix(in oklab, var(--gd-ink) calc(var(--gd-scrim, 1) * 88%), transparent) 0%,
				color-mix(in oklab, var(--gd-ink) calc(var(--gd-scrim, 1) * 70%), transparent) 52%,
				color-mix(in oklab, var(--gd-ink) calc(var(--gd-scrim, 1) * 88%), transparent) 100%),
			linear-gradient(to top, var(--gd-ink) 0%, transparent 20%);
	}
}
@media (prefers-reduced-motion: reduce) { .gd-js .gd-bgslider .gd-slider__stack { animation: none; scale: 1; } }

/* Video facade: an Image block linked to a YouTube or Vimeo URL, with gd-video. The kit draws a play button, and a
   click swaps the image for the player (youtube-nocookie.com or Vimeo, playing at once), so the page loads no
   third-party player until someone asks for one, and visitors stay on the page. One video plays at a time. Without
   JavaScript (and in the editor) it stays a linked image that opens the video. */
/* The script copies the image's corner radius into --gd-video-radius on the block, so the link that clips the zoom,
   the player that replaces it and a gd-shadow on the block all share the picture's rounded corners. */
:root .gd-video { --gd-play: clamp(3.25rem, 2.6rem + 2.2vw, 4.75rem); position: relative; border-radius: var(--gd-video-radius, 0); }
:root .gd-video > a {
	position: relative;
	isolation: isolate;
	display: block;
	overflow: hidden;
	border-radius: var(--gd-video-radius, 0);
	-webkit-tap-highlight-color: transparent;
}
:root .gd-video > a img { display: block; width: 100%; transition: filter 0.5s var(--gd-ease-out), scale 0.9s var(--gd-ease-out); }
/* The play button: a frosted white disc (::before) with a solid play mark (::after), centred on the image. Both are
   drawn on the link, so they combine with effects that draw on the block itself (gd-window, gd-tilt). */
:root .gd-video > a::before,
:root .gd-video > a::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	pointer-events: none;
	transition: scale 0.45s var(--gd-ease-out), box-shadow 0.45s var(--gd-ease-out);
}
:root .gd-video > a::before {
	z-index: 1;
	width: var(--gd-play);
	height: var(--gd-play);
	border-radius: 50%;
	background: color-mix(in oklab, #fff 94%, transparent);
	box-shadow: 0 0 0 calc(var(--gd-play) * 0.14) color-mix(in oklab, #fff 24%, transparent), 0 18px 40px -12px rgb(0 0 0 / 0.55);
}
:root .gd-video > a::after {
	z-index: 2;
	width: calc(var(--gd-play) * 0.38);
	height: calc(var(--gd-play) * 0.38);
	translate: 7% 0; /* a triangle's optical centre sits right of its box centre */
	background: var(--gd-primary);
	-webkit-mask: var(--gd-icon-play-fill) center / contain no-repeat;
	mask: var(--gd-icon-play-fill) center / contain no-repeat;
}
:root .gd-video > a:is(:hover, :focus-visible)::before {
	scale: 1.1;
	box-shadow: 0 0 0 calc(var(--gd-play) * 0.2) color-mix(in oklab, #fff 28%, transparent), 0 22px 50px -12px color-mix(in oklab, var(--gd-primary) 75%, transparent);
}
:root .gd-video > a:is(:hover, :focus-visible)::after { scale: 1.1; }
:root .gd-video > a:is(:hover, :focus-visible) img { filter: brightness(0.8) saturate(1.05); }
/* The picture zooms only when the script has given the link the image's rounded corners to clip it. */
.gd-js .gd-video > a:is(:hover, :focus-visible) img { scale: 1.04; }
/* The kit's focus ring would square the link's corners (and with them the clipped image): keep the image's radius. */
:root .gd-section .gd-video > a:focus-visible { outline-offset: 4px; border-radius: var(--gd-video-radius, 6px); }
/* Playing: the player takes the image's exact box (the script sets its aspect ratio), so nothing below it moves. */
.gd-video__frame { position: relative; overflow: hidden; border-radius: var(--gd-video-radius, 0); background: #000; }
.gd-video__frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) {
	:root .gd-video > a img, :root .gd-video > a::before, :root .gd-video > a::after { transition: none; }
	.gd-js .gd-video > a:is(:hover, :focus-visible) img { scale: none; }
}

/* Long FAQ lists: gd-faq-more keeps the first six questions and puts the rest behind a button (JS only, so every
   question is in the HTML and visible without JavaScript — good for readers and for search engines). */
:root .gd-faq .gd-faq-hidden { display: none; }
:root .gd-faq .gd-faq-toggle {
	display: block;
	margin: 1.4rem auto 0;
	padding: 0.72rem 1.45rem;
	border-radius: 999px;
	border: 1px solid color-mix(in oklab, currentColor 22%, transparent);
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none; /* page-builder button styles uppercase every <button> */
	cursor: pointer;
	transition: background-color 0.3s, border-color 0.3s;
}
:root .gd-faq .gd-faq-toggle:hover {
	background: color-mix(in oklab, currentColor 8%, transparent);
	border-color: color-mix(in oklab, currentColor 38%, transparent);
}

/* Counters */
.gd-counter { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Horizontal showcase: native swipe row by default (mobile / lite); pinned + scrubbed on desktop cinematic. */
:root .gd-hscroll-track {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(1rem, 0.5rem + 2vw, 2rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block-end: 0.5rem;
}
:root .gd-hscroll-track::-webkit-scrollbar { display: none; }
:root .gd-hscroll-track > * { flex: 0 0 min(82vw, 520px); margin: 0; scroll-snap-align: start; }
/* Cards share one height: WordPress's flex layout centers items, so a Cover photo card (min-height in vh)
   and a text card (min(420px, 48vh)) sat a few pixels out of line. */
:root .gd-hscroll-track { align-items: stretch; }
:root .gd-section.gd-section.gd-hscroll { padding-block: clamp(3rem, 8vh, 6rem); }
/* While pinned, keep the heading clear of the sticky nav. */
html:has(.gd-nav) .gd-section.gd-hscroll.is-hscroll-active { padding-block-start: calc(var(--gd-nav-h) + clamp(1rem, 4vh, 2.5rem)); }
:root .gd-hscroll.is-hscroll-active {
	/* While pinned the section covers the whole screen, so no page background shows beneath it. */
	min-height: calc(100vh - var(--gd-admin-bar) - var(--gd-site-header));
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Pinned, the section is a flex column: WordPress's auto side margins would shrink each heading and paragraph to its
   text and center it, pulling them off the eyebrow's left edge. Give them the full column width again. */
:root .gd-hscroll.is-hscroll-active > :not(.gd-eyebrow, .gd-hscroll-track, .gd-hscroll-bar) { width: 100%; }
:root .gd-hscroll.is-hscroll-active .gd-hscroll-track { overflow: visible; scroll-snap-type: none; width: max-content; max-width: none; }
/* Pinned, the track is wider than the column: start it at the column's left edge (under the heading). */
:root .gd-hscroll-bar {
	position: absolute;
	/* Lines up with the text column, like the track. */
	left: calc(var(--gd-gutter) + max(0px, (100% - 2 * var(--gd-gutter) - var(--gd-content)) / 2));
	right: calc(var(--gd-gutter) + max(0px, (100% - 2 * var(--gd-gutter) - var(--gd-content)) / 2));
	bottom: clamp(1.25rem, 3.5vh, 2.25rem);
	height: 2px;
	border-radius: 2px;
	background: color-mix(in oklab, currentColor 14%, transparent);
	pointer-events: none;
}
:root .gd-hscroll-bar span { display: block; height: 100%; border-radius: inherit; background: var(--gd-grad); transform-origin: 0 50%; scale: var(--gd-p, 0) 1; }
:root .gd-hscroll.is-hscroll-active > .gd-hscroll-track,
:root .gd-hscroll.is-hscroll-active > .wp-block-group__inner-container > .gd-hscroll-track { margin-inline: max(0px, calc((100% - var(--gd-content)) / 2)) 0 !important; }

/* Stacking cards: children stick and pile up (every tier); cinematic also scales the covered card. */
:root .gd-stack > :not(.wp-block-group__inner-container),
:root .gd-stack > .wp-block-group__inner-container > * {
	position: sticky;
	top: calc(var(--gd-admin-bar) + max(5.5rem, var(--gd-site-header) + 1.5rem) + var(--gd-i, 0) * 1.1rem);
	transform-origin: 50% 0;
}
:root .gd-stack > * + *,
:root .gd-stack > .wp-block-group__inner-container > * + * { margin-block-start: 14vh; }

/* Pricing toggle: Buttons block with links to #monthly and #yearly inside a `gd-pricing` section. */
:root :is(.gd-billing, .gd-switch) {
	display: flex;
	width: fit-content;
	margin-inline: auto;
	gap: 0.25rem;
	padding: 0.3rem;
	border-radius: 999px;
	background: color-mix(in oklab, currentColor 8%, transparent);
	border: 1px solid color-mix(in oklab, currentColor 14%, transparent);
}
/* Specificity (0,6,0) on purpose: it has to outrank the kit's own button type rule above. */
:root .gd-section .wp-block-buttons:is(.gd-billing, .gd-switch) .wp-block-button .wp-block-button__link,
:root :is(.gd-billing, .gd-switch) .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 0;
	box-shadow: none;
	font-size: 0.95rem;
	padding: 0.55rem 1.2rem;
	border-radius: 999px;
	font-size: 0.95rem;
	transition: background-color 0.3s, color 0.3s;
}
/* Must outrank the segment rule above, which now carries (0,6,0). */
:root .gd-section .wp-block-buttons:is(.gd-billing, .gd-switch) .wp-block-button.is-active .wp-block-button__link,
:root :is(.gd-billing, .gd-switch) .is-active .wp-block-button__link { background: var(--gd-primary); color: var(--gd-on-primary); }
/* Segments don't jump on hover (this must outrank the section-wide button hover lift). */
:root :is(.gd-section, .gd-nav) :is(.gd-billing, .gd-switch) .wp-block-button__link:hover { transform: none; filter: none; }
/* The switch stays one row. Four tabs used to wrap the pill onto two lines on phones; now the segments tighten there,
   and a row that still doesn't fit scrolls sideways, starting from the first segment (centred content would be cut
   off on the left). Focus rings sit inside the segment, clear of the scrolling edge. */
:root .wp-block-buttons:is(.gd-billing, .gd-switch) { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
:root .wp-block-buttons:is(.gd-billing, .gd-switch)::-webkit-scrollbar { display: none; }
:root :is(.gd-billing, .gd-switch) > .wp-block-button { flex: none; }
:root .gd-section :is(.gd-billing, .gd-switch) .wp-block-button__link:focus-visible { outline-offset: -3px; }
@media (max-width: 600px) {
	:root .gd-section .wp-block-buttons:is(.gd-billing, .gd-switch) .wp-block-button .wp-block-button__link,
	:root :is(.gd-billing, .gd-switch) .wp-block-button__link { padding: 0.5rem 0.9rem; font-size: 0.875rem; }
}
/* Small Android phones (360px): four labels still fit without scrolling. */
@media (max-width: 380px) {
	:root .gd-section .wp-block-buttons:is(.gd-billing, .gd-switch) .wp-block-button .wp-block-button__link,
	:root :is(.gd-billing, .gd-switch) .wp-block-button__link { padding: 0.45rem 0.68rem; font-size: 0.8125rem; }
}
html:not(.gd-js) :is(.gd-billing, .gd-tabs .gd-switch) { display: none; }
/* Tabs: a gd-tabs Group holding a gd-switch Buttons block whose links point to #ids of gd-tab-panel Groups. */
:root.gd-js .gd-tabs .gd-tab-panel:not(.is-active) { display: none !important; }
:root.gd-js .gd-tabs .gd-tab-panel.is-active { animation: gd-panel-in 0.7s var(--gd-ease-out) both; }
body:not(.editor-styles-wrapper) .gd-pricing:not(.is-yearly) .gd-price-yearly,
body:not(.editor-styles-wrapper) .gd-pricing.is-yearly .gd-price-monthly { display: none; }

/* FAQ accordion: Details blocks inside a `gd-faq` Group (one open at a time unless gd-faq-multi).
   Default: each question is a card row with a round +/× control; gd-faq-lines gives a minimal hairline list. */
:root .gd-faq .wp-block-details {
	margin-block: 0;
	padding: 0;
	border-radius: var(--gd-radius-sm);
	background: var(--gd-surface);
	border: 1px solid var(--gd-surface-border);
	box-shadow: var(--gd-surface-highlight);
	transition: border-color 0.3s, box-shadow 0.4s var(--gd-ease-out), background-color 0.3s;
}
:root .gd-section .gd-faq > * + *,
:root .gd-section .gd-faq > .wp-block-group__inner-container > * + * { margin-block-start: 0.75rem; }
:root .gd-faq .wp-block-details[open] {
	border-color: color-mix(in oklab, var(--gd-tint) 45%, transparent);
	box-shadow: var(--gd-surface-highlight), var(--gd-shadow-md);
}
:root .gd-faq summary {
	position: relative;
	display: block;
	padding: 1.15rem 4.25rem 1.15rem 1.35rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--gd-font-display, inherit);
	font-weight: 600;
	font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem);
	line-height: 1.4;
	letter-spacing: calc(-0.01em * var(--gd-track, 1));
	transition: color 0.25s;
}
:root .gd-faq summary::-webkit-details-marker { display: none; }
/* The round control: a tinted disc with a plus drawn from two gradient bars; it turns into a × when open. */
:root .gd-faq summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.1rem;
	width: 2rem;
	height: 2rem;
	margin-top: -1rem;
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center / 0.8rem 1.6px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.6px 0.8rem no-repeat,
		color-mix(in oklab, var(--gd-tint) 12%, transparent);
	transition: rotate 0.45s var(--gd-ease-out), background-color 0.3s, color 0.3s;
}
:root .gd-faq summary:hover { color: var(--gd-tint); }
:root .gd-faq summary:hover::after,
:root .gd-faq details[open] > summary::after { background-color: color-mix(in oklab, var(--gd-tint) 22%, transparent); }
:root .gd-faq details[open] > summary::after { rotate: 135deg; color: var(--gd-tint); }
:root .gd-faq details > :not(summary) {
	margin: 0;
	padding: 0 4.25rem 1.3rem 1.35rem;
	max-width: 68ch;
	color: color-mix(in oklab, currentColor 78%, transparent);
}
:root .gd-faq details > :not(summary) + :not(summary) { margin-top: -0.4rem; }
@media (max-width: 600px) {
	:root .gd-faq summary { padding-inline: 1.1rem 3.6rem; }
	:root .gd-faq summary::after { right: 0.8rem; }
	:root .gd-faq details > :not(summary) { padding-inline: 1.1rem; }
}
:root .gd-faq details[open] > :not(summary) { animation: gd-faq-in 0.5s var(--gd-ease-out) both; }
/* Minimal variant: hairline list, no cards. */
:root .gd-faq-lines .wp-block-details { background: none; border: 0; border-bottom: 1px solid color-mix(in oklab, currentColor 14%, transparent); border-radius: 0; box-shadow: none; }
:root .gd-faq-lines .wp-block-details[open] { box-shadow: none; }
:root .gd-faq-lines summary { padding-inline: 0 3.5rem; }
:root .gd-faq-lines summary::after { right: 0; }
:root .gd-faq-lines details > :not(summary) { padding-inline: 0 3.5rem; }
:root .gd-section .gd-faq-lines > * + *,
:root .gd-section .gd-faq-lines > .wp-block-group__inner-container > * + * { margin-block-start: 0; }
@supports (interpolate-size: allow-keywords) {
	.gd-faq { interpolate-size: allow-keywords; }
	.gd-faq details::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size 0.45s var(--gd-ease-out), content-visibility 0.45s allow-discrete;
	}
	.gd-faq details[open]::details-content { block-size: auto; }
}

/* Closing call-to-action panel: a rounded, glowing Group inside a section (pair it with gd-aurora and
   gd-gradient-border gd-beam on the same Group, and a dark gradient such as gd-night). */
:root .gd-cta-panel {
	position: relative;
	isolation: isolate;
	overflow: clip;
	border-radius: clamp(24px, 1rem + 1.5vw, 40px);
	padding: clamp(3rem, 1.5rem + 5vw, 6.5rem) clamp(1.25rem, 0.5rem + 4vw, 5rem);
	box-shadow: var(--gd-shadow-lg);
}
:root .gd-cta-panel.gd-aurora::before { opacity: 0.7; }

/* Oversized brand wordmark at the very bottom of a footer (a Paragraph with the brand name).
   It fades downward and runs off the section's bottom edge. Decorative: hidden from screen readers. */
:root .gd-section .gd-footer-mark {
	margin-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) calc(-1 * var(--gd-pad, 4rem) - 0.08em);
	font-family: var(--gd-font-display, inherit);
	font-weight: 700;
	font-size: clamp(4.5rem, 0.5rem + 18vw, 18rem);
	line-height: 0.8;
	letter-spacing: calc(-0.055em * var(--gd-track, 1));
	text-align: center;
	white-space: nowrap;
	max-width: none;
	user-select: none;
	pointer-events: none;
	/* --gd-fg, not currentColor: the text itself is transparent here. */
	background: linear-gradient(180deg, color-mix(in oklab, var(--gd-fg, var(--gd-paper)) 24%, transparent) 10%, color-mix(in oklab, var(--gd-fg, var(--gd-paper)) 2%, transparent) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}
:root .gd-section .gd-footer-mark :is(.gd-char, .gd-word, .gd-line) { background: inherit; -webkit-background-clip: text; background-clip: text; }
.gd-footer-mark { --gd-dist: 14vh; } /* with gd-reveal it rises from well below */

/* ------------------------------------------------------------------ 8b. Image-free product visuals */
/* Initials avatar: a short Paragraph ("MC") with gd-avatar, next to a name/role stack in a row Group. */
:root .gd-section .gd-avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	border-radius: 50%;
	background: var(--gd-primary) linear-gradient(140deg, rgb(255 255 255 / 0.28), transparent 62%);
	color: var(--gd-on-primary);
	font-family: var(--gd-font-display, inherit);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: uppercase;
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--gd-primary) 22%, transparent);
}
/* On a primary-filled card a brand-colored disc would vanish into the card: it turns white with brand initials. */
:root .gd-section .has-gd-primary-background-color .gd-avatar {
	background: var(--gd-on-primary);
	color: var(--gd-primary);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--gd-on-primary) 30%, transparent);
}
/* Avatar stack: a List of initials ("MC", "JW", "+2k") with gd-avatars — overlapping discs for social proof. */
:root .gd-section .gd-avatars { display: flex; flex: none; margin-inline: 0; padding: 0 0 0 0.45rem; list-style: none; }
:root .gd-section .gd-avatars li {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	margin: 0 0 0 -0.45rem;
	border-radius: 50%;
	background: var(--gd-primary) linear-gradient(140deg, rgb(255 255 255 / 0.3), transparent 62%);
	color: var(--gd-on-primary);
	font-family: var(--gd-font-display, inherit);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: uppercase;
	box-shadow: 0 0 0 3px var(--gd-bg, var(--gd-paper));
}
/* Neighbouring hues mixed in OKLCH stay vivid (an oklab mix of green and rose turns olive). */
:root .gd-section .gd-avatars li:nth-child(2) { background-color: color-mix(in oklch, var(--gd-primary) 72%, var(--gd-secondary)); }
:root .gd-section .gd-avatars li:nth-child(3) { background-color: color-mix(in oklch, var(--gd-primary) 72%, var(--gd-accent)); }
:root .gd-section .gd-avatars li:nth-child(4) { background-color: color-mix(in oklab, var(--gd-primary) 70%, var(--gd-ink)); }
:root .gd-section .gd-avatars li:last-child:not(:first-child) { background: var(--gd-surface); color: inherit; font-size: 0.72rem; border: 1px solid var(--gd-surface-border); text-transform: none; }
/* Inside plain cards the ring matches the card surface (white on light sections, frosted ink on dark). */
:root .gd-section :is(.gd-card, .is-style-gd-card):not(.has-background) { --gd-bg: color-mix(in oklab, var(--gd-ink) 90%, #fff); }
:root :is(.has-gd-paper-background-color, .has-gd-soft-background-color, .has-gd-soft-gradient-background) :is(.gd-card, .is-style-gd-card):not(.has-background) { --gd-bg: #fff; }
/* Chips: a List with gd-chips becomes a wrap of small pills (tags, integrations, block names). */
:root .gd-section .gd-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-inline: 0; padding: 0; list-style: none; }
:root .gd-section .gd-chips li {
	margin: 0;
	padding: 0.42em 0.9em;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
	background: var(--gd-surface);
	border: 1px solid var(--gd-surface-border);
	box-shadow: var(--gd-surface-highlight);
}
:root .gd-section .gd-chips li:first-child { background: color-mix(in oklab, var(--gd-tint) 16%, transparent); border-color: color-mix(in oklab, var(--gd-tint) 50%, transparent); }
/* Browser/app window: an Image block (figure) or a Group becomes a framed window with a toolbar. */
:root .gd-window {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 16px;
	background: var(--gd-window-bg);
	border: 1px solid var(--gd-surface-border);
	box-shadow: var(--gd-surface-highlight), var(--gd-shadow-lg);
	padding-top: 2.5rem;
}
:root .gd-window:not(figure) { padding: 3.5rem clamp(1rem, 0.6rem + 1.5vw, 1.75rem) clamp(1rem, 0.6rem + 1.5vw, 1.75rem); }
:root .gd-window::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2.5rem;
	background:
		radial-gradient(circle at 1.15rem 50%, #ff5f57 0 0.3rem, transparent 0.33rem),
		radial-gradient(circle at 2rem 50%, #febc2e 0 0.3rem, transparent 0.33rem),
		radial-gradient(circle at 2.85rem 50%, #28c840 0 0.3rem, transparent 0.33rem),
		color-mix(in oklab, currentColor 5%, transparent);
	border-bottom: 1px solid var(--gd-surface-border);
	pointer-events: none;
}
:root figure.gd-window img { display: block; width: 100%; border-radius: 0 !important; }

/* Bar chart from a List block: each item's number (0–100) becomes a bar's height. Plain list without JS / in the editor. */
:root.gd-js .gd-bars {
	display: flex;
	align-items: flex-end;
	gap: clamp(0.3rem, 0.2rem + 0.6vw, 0.7rem);
	height: var(--gd-bars-height, 11rem);
	margin-inline: 0;
	padding: 0;
	list-style: none;
}
:root.gd-js .gd-bars li {
	flex: 1;
	margin: 0;
	height: var(--h, 50%);
	border-radius: 0.6rem 0.6rem 0.25rem 0.25rem;
	background: linear-gradient(180deg, color-mix(in oklab, var(--gd-secondary) 80%, #fff), var(--gd-primary));
	font-size: 0;
	color: transparent;
	transform-origin: 50% 100%;
	transition: scale 1.1s var(--gd-ease-out) calc(var(--gd-i, 0) * 60ms);
}
:root.gd-js .gd-bars li:last-child { background: linear-gradient(180deg, var(--gd-accent), var(--gd-primary)); box-shadow: 0 0 26px -4px color-mix(in oklab, var(--gd-accent) 70%, transparent); }
:root.gd-js:not(.gd-failsafe) .gd-bars:not(.is-inview) li { scale: 1 0.02; }

/* Floating glass badge — a short Paragraph. Inside a gd-stage Group, gd-badge-tl/tr/bl/br pin it to a corner (desktop). */
:root .gd-badge {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 0.95rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	background: var(--gd-surface);
	border: 1px solid var(--gd-surface-border);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	box-shadow: var(--gd-surface-highlight), var(--gd-shadow-md);
}
:root .gd-badge::before { content: ""; flex-shrink: 0; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gd-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--gd-accent) 24%, transparent); }
:root .gd-stage { position: relative; isolation: isolate; }
@media (min-width: 782px) {
	/* Corner badges are decorative labels floating over the visual, so they must not swallow clicks meant for what
	   is underneath (a slider's arrows, a link, a video). */
	:root .gd-stage > :is(.gd-badge-tl, .gd-badge-tr, .gd-badge-bl, .gd-badge-br),
	:root .gd-stage > .wp-block-group__inner-container > :is(.gd-badge-tl, .gd-badge-tr, .gd-badge-bl, .gd-badge-br) { position: absolute; z-index: 2; margin: 0; pointer-events: none; }
	:root .gd-stage :is(.gd-badge-tl, .gd-badge-tr, .gd-badge-bl, .gd-badge-br) a { pointer-events: auto; }
	/* Top badges straddle the frame's top edge (clear of window dots and header text); bottom ones float
	   off the sides, over the visual (bars, image) rather than over text. */
	:root .gd-badge-tl { top: -1.2rem; left: 12%; }
	:root .gd-badge-tr { top: -1.2rem; right: 8%; }
	:root .gd-badge-bl { bottom: 12%; left: -7%; }
	:root .gd-badge-br { bottom: 7%; right: -7%; }
}

/* Glowing gradient line — a Separator block. */
:root .wp-block-separator.gd-glow-line {
	border: 0;
	height: 1px;
	max-width: none;
	opacity: 1;
	background: linear-gradient(90deg, transparent, var(--gd-primary), var(--gd-accent), transparent);
	box-shadow: 0 0 18px 1px color-mix(in oklab, var(--gd-primary) 45%, transparent);
}

/* Sticky navigation bar that turns to glass once the page scrolls. */
:root .gd-nav {
	position: sticky;
	top: var(--gd-admin-bar);
	z-index: 50;
	font-family: var(--gd-font-body, inherit);
	margin-block: 0 calc(var(--gd-nav-h) * -1); /* overlap the hero below instead of pushing it down */
	min-height: var(--gd-nav-h);
	box-sizing: border-box;
	padding-block: 0.9rem;
	padding-inline: var(--gd-gutter);
	transition: background-color 0.4s, box-shadow 0.4s, -webkit-backdrop-filter 0.4s, backdrop-filter 0.4s;
}
:root .gd-nav.is-scrolled {
	background-color: color-mix(in oklab, var(--gd-nav-bg, var(--gd-ink)) 80%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	box-shadow: 0 1px 0 color-mix(in oklab, currentColor 12%, transparent);
}
.gd-nav-light { --gd-nav-bg: var(--gd-paper); }
/* gd-nav-pill: once scrolled, a floating glass capsule appears behind the bar's content. It is drawn by a
   pseudo-element, so nothing reflows; the bar itself stays transparent (a backdrop-filter on the bar would
   stop the capsule from blurring the page behind it). */
:root .gd-nav-pill.is-scrolled { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
:root .gd-nav-pill::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0.6rem max(0.4rem, calc(var(--gd-gutter) - 0.7rem)) 0.6rem max(0.4rem, calc(var(--gd-gutter) - 1.25rem));
	border-radius: 999px;
	background: color-mix(in oklab, var(--gd-nav-bg, var(--gd-ink)) 86%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 13%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.1), 0 18px 44px -22px rgb(0 0 0 / 0.55);
	opacity: 0;
	scale: 0.97 0.9;
	transition: opacity 0.4s, scale 0.55s var(--gd-ease-out);
	pointer-events: none;
}
:root .gd-nav-pill.is-scrolled::before { opacity: 1; scale: 1; }
/* Scrollspy: the menu item for the section in view is marked (set by the script). */
:root .gd-nav .wp-block-navigation-item__content { position: relative; transition: opacity 0.3s; }
:root.gd-js .gd-nav:has(.wp-block-navigation-item.is-active) .wp-block-navigation-item:not(.is-active) > .wp-block-navigation-item__content { opacity: 0.66; }
:root .gd-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.55em;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: var(--gd-accent);
	box-shadow: 0 0 10px var(--gd-accent);
	opacity: 0;
	scale: 0;
	transition: opacity 0.3s, scale 0.4s var(--gd-ease-out);
}
:root .gd-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content::after { opacity: 1; scale: 1; }
/* Brand mark: a gradient tile before the site name (Paragraph with gd-logo-mark). */
.gd-logo-mark::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-end: 0.5em;
	border-radius: 0.3em;
	vertical-align: -0.15em;
	background: var(--gd-grad);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 6px 18px -6px color-mix(in oklab, var(--gd-primary) 80%, transparent);
}
/* Or a real mark: a Row of an Image with gd-logo-chip and the site name, inside a gd-logo-lockup group. The
   chip sits the logo on a paper disc, so a dark monochrome mark still reads on a dark bar. */
:root .gd-logo-lockup { align-items: center; }
:root .gd-logo-chip {
	flex: 0 0 auto;
	width: var(--gd-logo-size, 2.35rem);
	height: var(--gd-logo-size, 2.35rem);
	display: grid;
	place-items: center;
	padding: 0.3rem;
	border-radius: 999px;
	background: var(--gd-paper);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gd-ink) 10%, transparent), 0 8px 20px -10px rgb(0 0 0 / 0.6);
	overflow: hidden;
}
:root .gd-logo-chip img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root .gd-nav a:where(:not(.wp-element-button)) { color: inherit; text-decoration: none; }
/* Menu items get room to breathe (WordPress's default navigation gap is tight on many themes). */
:root .gd-nav .wp-block-navigation .wp-block-navigation__container { gap: clamp(1rem, 0.4rem + 1.3vw, 1.75rem); }
/* Nav CTAs are compact (a per-button padding setting still wins). */
:root .gd-nav .wp-block-button__link:not([style*="padding"]) { padding: 0.6rem 1.2rem; font-size: 0.95rem; }
/* The section under the nav starts below it, even where section padding is small (mobile). */
:root .gd-nav + .gd-section.gd-section.gd-section { padding-block-start: max(var(--gd-section-pad), calc(var(--gd-nav-h) + 2.5rem)); }
@media (max-width: 600px) { :root .gd-nav { top: 0; } }
html:has(.gd-nav) { scroll-padding-top: calc(var(--gd-admin-bar) + 5.5rem); }
/* Kit pages that keep the theme's sticky header (no gd-nav): anchor jumps land below it. */
html.gd-site-header { scroll-padding-top: calc(var(--gd-admin-bar) + var(--gd-site-header) + 1rem); }

/* Scroll progress bar: a Separator block with class gd-progress (front end only). */
.gd-js .gd-progress.wp-block-separator {
	position: fixed;
	inset: var(--gd-admin-bar) 0 auto 0;
	z-index: 100;
	width: 100%;
	max-width: none;
	height: 3px;
	margin: 0 !important;
	border: 0;
	opacity: 1;
	background: var(--gd-grad);
	transform-origin: 0 50%;
	scale: var(--gd-progress, 0) 1;
}
@supports (animation-timeline: scroll()) {
	.gd-js .gd-progress.wp-block-separator { animation: gd-progress linear both; animation-timeline: scroll(root); }
}

/* Accessible focus rings inside kit sections */
.gd-section :is(a, button, summary):focus-visible,
.gd-nav :is(a, button):focus-visible {
	outline: 2px solid var(--gd-tint);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ------------------------------------------------------------------ 9. Lenis smooth scroll (from lenis.css 1.3.x) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ------------------------------------------------------------------ 10. Editor canvas: keep everything visible and calm */
.editor-styles-wrapper :is([class*="gd-"], [class*="gd-"]::before, [class*="gd-"]::after) { animation-play-state: paused !important; }
.editor-styles-wrapper .gd-hscroll-track { flex-wrap: wrap; overflow: visible; }
.editor-styles-wrapper .gd-stack > * { position: relative; top: auto; }
.editor-styles-wrapper .gd-nav { margin-block-end: 0; }
.editor-styles-wrapper .gd-nav:not(.gd-nav-light) { background: var(--gd-ink); border-radius: 999px; padding: 0.6rem 0.75rem 0.6rem 1.4rem; }
.editor-styles-wrapper :is(.gd-depth-1, .gd-depth-2, .gd-depth-3) { transform: none; }
/* The editor never runs the engine: keep toggles and tab switches editable, and show chart data as chips. */
.editor-styles-wrapper :is(.gd-billing, .gd-tabs .gd-switch) { display: flex !important; }
.editor-styles-wrapper .gd-bars { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; list-style: none; }
.editor-styles-wrapper .gd-bars li { margin: 0; padding: 0.15em 0.55em; border-radius: 0.4rem; font-size: 0.8rem; background: color-mix(in oklab, currentColor 10%, transparent); }

/* ------------------------------------------------------------------ 11. Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.gd-js :is(.gd-reveal, .gd-reveal-left, .gd-reveal-right, .gd-reveal-zoom, .gd-reveal-blur, .gd-split, .gd-split-words, .gd-split-chars, .gd-blur-words),
	.gd-js .gd-stagger > *,
	.gd-js .gd-stagger > .wp-block-group__inner-container > * {
		opacity: 1 !important;
		translate: none !important;
		scale: none !important;
		filter: none !important;
		visibility: visible !important;
		transition: none !important;
	}
	:is([class*="gd-"], [class*="gd-"]::before, [class*="gd-"]::after) { animation: none !important; }
	.gd-js .gd-reveal-mask { clip-path: none !important; scale: none !important; }
	:root :is(.gd-depth-1, .gd-depth-2, .gd-depth-3) { transform: none !important; }
	.gd-aurora::before { translate: none !important; }
	:root.gd-js .gd-bars li { scale: none !important; }
	.gd-rotate__word { transition: none !important; }
	.gd-marquee__group[aria-hidden="true"] { display: none; }
	:root .gd-faq details[open] > :not(summary) { animation: none !important; }
	:root .gd-marquee { overflow-x: auto; }
}

/* ------------------------------------------------------------------ 12. Keyframes */
@keyframes gd-aurora {
	0% { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
	50% { transform: translate3d(4%, 3%, 0) rotate(9deg) scale(1.1); }
	100% { transform: translate3d(-2%, 4%, 0) rotate(-7deg) scale(1.03); }
}
@keyframes gd-pan { to { background-position: 200% center; } }
@keyframes gd-pan-bg { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes gd-spin-angle { to { --gd-angle: 360deg; } }
@keyframes gd-spin { to { rotate: 360deg; } }
@keyframes gd-float { 50% { transform: translateY(-14px); } }
@keyframes gd-pulse { 50% { opacity: 0.55; scale: 0.94; } }
@keyframes gd-marquee { to { transform: translateX(-50%); } }
@keyframes gd-progress { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes gd-faq-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@keyframes gd-panel-in { from { opacity: 0; translate: 0 14px; filter: blur(4px); } }

/* ------------------------------------------------------------------ 13. Icon set (Lucide, ISC) */
:root {
	--gd-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--gd-icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--gd-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
	/* Solid play mark with rounded corners (the video play button). */
	--gd-icon-play-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.14v13.72a1 1 0 0 0 1.52.85l10.83-6.86a1 1 0 0 0 0-1.7L9.52 4.29A1 1 0 0 0 8 5.14z'/%3E%3C/svg%3E");
}
.gd-icon-zap { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z'/%3E%3C/svg%3E"); }
.gd-icon-sparkles { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/%3E%3Cpath d='M20 2v4'/%3E%3Cpath d='M22 4h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/svg%3E"); }
.gd-icon-shield-check { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.gd-icon-rocket { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09'/%3E%3Cpath d='M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05'/%3E%3C/svg%3E"); }
.gd-icon-trending-up { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3C/svg%3E"); }
.gd-icon-globe { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); }
.gd-icon-lock { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.gd-icon-heart { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E"); }
.gd-icon-star { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E"); }
.gd-icon-check { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.gd-icon-layers { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/%3E%3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/%3E%3C/svg%3E"); }
.gd-icon-cpu { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 20v2'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M17 20v2'/%3E%3Cpath d='M17 2v2'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M2 17h2'/%3E%3Cpath d='M2 7h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='M20 17h2'/%3E%3Cpath d='M20 7h2'/%3E%3Cpath d='M7 20v2'/%3E%3Cpath d='M7 2v2'/%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='8' y='8' width='8' height='8' rx='1'/%3E%3C/svg%3E"); }
.gd-icon-clock { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.gd-icon-users { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E"); }
.gd-icon-smile { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 10V9'/%3E%3Cpath d='M16.472 15a6 6 0 01-8.943 0'/%3E%3Cpath d='M9 10V9'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }
.gd-icon-wand-sparkles { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72'/%3E%3Cpath d='m14 7 3 3'/%3E%3Cpath d='M5 6v4'/%3E%3Cpath d='M19 14v4'/%3E%3Cpath d='M10 2v2'/%3E%3Cpath d='M7 8H3'/%3E%3Cpath d='M21 16h-4'/%3E%3Cpath d='M11 3H9'/%3E%3C/svg%3E"); }
.gd-icon-palette { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z'/%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='black'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='black'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='black'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='black'/%3E%3C/svg%3E"); }
.gd-icon-gauge { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E"); }
.gd-icon-message-circle { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719'/%3E%3C/svg%3E"); }
.gd-icon-puzzle { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z'/%3E%3C/svg%3E"); }
.gd-icon-target { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
.gd-icon-award { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E"); }
.gd-icon-play { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/%3E%3C/svg%3E"); }
.gd-icon-chart-column { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E"); }
.gd-icon-leaf { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11 20a10 10 0 0010-10 25.9 25.9 0 00-1.04-7.281 1 1 0 00-1.755-.325C15.833 5.5 13 5.5 9.8 6.1A7 7 0 0011 20'/%3E%3Cpath d='M2 21a5 5 0 012.911-4.544C7.613 15.212 8.351 15.24 11 13'/%3E%3C/svg%3E"); }
.gd-icon-infinity { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8'/%3E%3C/svg%3E"); }
.gd-icon-code { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m16 18 6-6-6-6'/%3E%3Cpath d='m8 6-6 6 6 6'/%3E%3C/svg%3E"); }
.gd-icon-mail { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E"); }
.gd-icon-coffee { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10 2v2'/%3E%3Cpath d='M14 2v2'/%3E%3Cpath d='M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1'/%3E%3Cpath d='M6 2v2'/%3E%3C/svg%3E"); }
.gd-icon-package { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpolyline points='3.29 7 12 12 20.71 7'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E"); }
.gd-icon-truck { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }
.gd-icon-gift { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8'/%3E%3Cpath d='M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5'/%3E%3Crect x='3' y='7' width='18' height='4' rx='1'/%3E%3C/svg%3E"); }
.gd-icon-calendar { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E"); }
.gd-icon-credit-card { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3Cpath d='M6 14h2'/%3E%3C/svg%3E"); }
.gd-icon-map-pin { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.gd-icon-camera { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); }
.gd-icon-music { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); }
.gd-icon-book-open { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 5v16'/%3E%3Cpath d='M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z'/%3E%3C/svg%3E"); }
.gd-icon-graduation-cap { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E"); }
.gd-icon-dumbbell { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M17.596 12.768a2 2 0 1 0 2.829-2.829l-1.768-1.767a2 2 0 0 0 2.828-2.829l-2.828-2.828a2 2 0 0 0-2.829 2.828l-1.767-1.768a2 2 0 1 0-2.829 2.829z'/%3E%3Cpath d='m2.5 21.5 1.4-1.4'/%3E%3Cpath d='m20.1 3.9 1.4-1.4'/%3E%3Cpath d='M5.343 21.485a2 2 0 1 0 2.829-2.828l1.767 1.768a2 2 0 1 0 2.829-2.829l-6.364-6.364a2 2 0 1 0-2.829 2.829l1.768 1.767a2 2 0 0 0-2.828 2.829z'/%3E%3Cpath d='m9.6 14.4 4.8-4.8'/%3E%3C/svg%3E"); }
.gd-icon-utensils { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E"); }
.gd-icon-house { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.gd-icon-briefcase { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E"); }
.gd-icon-headphones { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); }
.gd-icon-phone { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E"); }
.gd-icon-sun { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E"); }
.gd-icon-moon { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E"); }
.gd-icon-flame { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4'/%3E%3C/svg%3E"); }
.gd-icon-recycle { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5'/%3E%3Cpath d='M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12'/%3E%3Cpath d='m14 16-3 3 3 3'/%3E%3Cpath d='M8.293 13.596 7.196 9.5 3.1 10.598'/%3E%3Cpath d='m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843'/%3E%3Cpath d='m13.378 9.633 4.096 1.098 1.097-4.096'/%3E%3C/svg%3E"); }
.gd-icon-shopping-bag { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.103 6.034h17.794'/%3E%3Cpath d='M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z'/%3E%3C/svg%3E"); }
.gd-icon-shopping-cart { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18'/%3E%3Cpath d='M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25'/%3E%3Ccircle cx='18' cy='20' r='2'/%3E%3Ccircle cx='8' cy='20' r='2'/%3E%3C/svg%3E"); }
.gd-icon-badge-check { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m16 9-5.5 5.5L8 12'/%3E%3C/svg%3E"); }
.gd-icon-thumbs-up { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3Cpath d='M7 10v12'/%3E%3C/svg%3E"); }
.gd-icon-handshake { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E"); }
.gd-icon-lightbulb { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
.gd-icon-cloud { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E"); }
.gd-icon-bell { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E"); }
.gd-icon-settings { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.gd-icon-plane { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E"); }
.gd-icon-sprout { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M14 9.536V7a4 4 0 0 1 4-4h1.5a.5.5 0 0 1 .5.5V5a4 4 0 0 1-4 4 4 4 0 0 0-4 4c0 2 1 3 1 5a5 5 0 0 1-1 3'/%3E%3Cpath d='M4 9a5 5 0 0 1 8 4 5 5 0 0 1-8-4'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); }
.gd-icon-paw-print { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='20' cy='16' r='2'/%3E%3Cpath d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/svg%3E"); }
.gd-icon-shirt { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E"); }
.gd-icon-scissors { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M8.12 8.12 12 12'/%3E%3Cpath d='M20 4 8.12 15.88'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M14.8 14.8 20 20'/%3E%3C/svg%3E"); }
.gd-icon-stethoscope { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11 2v2'/%3E%3Cpath d='M5 2v2'/%3E%3Cpath d='M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1'/%3E%3Cpath d='M8 15a6 6 0 0 0 12 0v-3'/%3E%3Ccircle cx='20' cy='10' r='2'/%3E%3C/svg%3E"); }
.gd-icon-building-2 { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10 12h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3'/%3E%3Cpath d='M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16'/%3E%3C/svg%3E"); }
.gd-icon-wallet { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E"); }
.gd-icon-percent { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='19' x2='5' y1='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); }
.gd-icon-sparkle { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/%3E%3C/svg%3E"); }