/* ==========================================================================
   Gemial Digital — Component layer
   --------------------------------------------------------------------------
   Everything here is scoped under .gd-root. Nothing applies until a template
   or a container opts in by carrying that class, which is what makes this
   theme safe to activate on the live Elementor site.

   Contents
     1.  Root and reset
     2.  Typography
     3.  Layout: container, section, grid
     4.  Eyebrow and rules
     5.  Buttons
     6.  Cards
     7.  Stats and spec rows
     8.  Chips and badges
     9.  Media frames
     10. Prose
     11. Forms
     12. Utilities
     13. Accessibility and print
   ========================================================================== */


/* 1. Root and reset
   ========================================================================== */

.gd-root {
	font-family: var(--gd-font-body);
	font-size: var(--gd-text-md);
	line-height: var(--gd-leading-relaxed);
	font-weight: var(--gd-weight-regular);
	color: var(--gd-text);
	background: var(--gd-paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	font-variant-numeric: tabular-nums;
}

.gd-root *,
.gd-root *::before,
.gd-root *::after {
	box-sizing: border-box;
}

.gd-root img,
.gd-root svg,
.gd-root video {
	max-width: 100%;
	height: auto;
	display: block;
}

.gd-root ::selection {
	background: var(--gd-lime);
	color: var(--gd-ink);
}


/* 2. Typography
   ========================================================================== */

.gd-root h1,
.gd-root h2,
.gd-root h3,
.gd-root h4,
.gd-root h5,
.gd-root h6,
.gd-root .gd-h1,
.gd-root .gd-h2,
.gd-root .gd-h3,
.gd-root .gd-h4 {
	font-family: var(--gd-font-display);
	font-weight: var(--gd-weight-semibold);
	letter-spacing: var(--gd-tracking-heading);
	line-height: var(--gd-leading-snug);
	color: var(--gd-text);
	margin: 0 0 var(--gd-space-4);
	text-wrap: balance;
}

.gd-root h1,
.gd-root .gd-h1 {
	font-size: var(--gd-h1);
	line-height: var(--gd-leading-tight);
	letter-spacing: var(--gd-tracking-display);
	font-weight: var(--gd-weight-bold);
}

.gd-root h2,
.gd-root .gd-h2 {
	font-size: var(--gd-h2);
	line-height: 1.1;
	letter-spacing: var(--gd-tracking-display);
	font-weight: var(--gd-weight-bold);
}

.gd-root h3,
.gd-root .gd-h3 { font-size: var(--gd-h3); }

.gd-root h4,
.gd-root .gd-h4 { font-size: var(--gd-h4); }

.gd-root h5 { font-size: var(--gd-h5); }

.gd-root h6 { font-size: var(--gd-h6); }

/* The largest size, for hero statements only. */
.gd-display {
	font-family: var(--gd-font-display);
	font-size: var(--gd-display);
	line-height: 0.98;
	letter-spacing: var(--gd-tracking-display);
	font-weight: var(--gd-weight-bold);
	margin: 0 0 var(--gd-space-6);
	text-wrap: balance;
}

.gd-root p {
	margin: 0 0 var(--gd-space-5);
	text-wrap: pretty;
}

.gd-root p:last-child { margin-bottom: 0; }

.gd-lead {
	font-size: var(--gd-text-lg);
	line-height: var(--gd-leading-relaxed);
	color: var(--gd-text-2);
	max-width: 62ch;
}

.gd-small {
	font-size: var(--gd-text-sm);
	color: var(--gd-text-2);
}

.gd-mono {
	font-family: var(--gd-font-mono);
	font-feature-settings: "kern" 1, "calt" 1;
}

/* Content links only. :where() adds no specificity, and :not([class])
   excludes every component link, so buttons, nav, footer, cards and
   breadcrumbs are all left alone rather than fought with. */
.gd-root a:where(:not([class])) {
	color: var(--gd-forest);
	text-decoration-color: color-mix(in srgb, var(--gd-forest) 35%, transparent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--gd-dur-fast) var(--gd-ease),
		text-decoration-color var(--gd-dur-fast) var(--gd-ease);
}

.gd-root a:where(:not([class])):hover {
	color: var(--gd-forest-deep);
	text-decoration-color: currentColor;
}


/* Dark-ground typography inversion */

.gd-on-dark,
.gd-on-dark p,
.gd-on-dark li { color: var(--gd-text-on-dark-2); }

.gd-on-dark h1,
.gd-on-dark h2,
.gd-on-dark h3,
.gd-on-dark h4,
.gd-on-dark h5,
.gd-on-dark h6,
.gd-on-dark .gd-display { color: var(--gd-text-on-dark); }

.gd-on-dark a { color: var(--gd-lime); }
.gd-on-dark a:hover { color: var(--gd-white); }
.gd-on-dark .gd-lead { color: var(--gd-text-on-dark-2); }


/* 3. Layout
   ========================================================================== */

.gd-container {
	width: 100%;
	max-width: calc(var(--gd-container) + (var(--gd-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gd-gutter);
}

.gd-container--wide {
	max-width: calc(var(--gd-container-wide) + (var(--gd-gutter) * 2));
}

.gd-container--narrow {
	max-width: calc(var(--gd-container-narrow) + (var(--gd-gutter) * 2));
}

.gd-section {
	padding-block: var(--gd-section-y);
	position: relative;
}

.gd-section--lg { padding-block: var(--gd-section-y-lg); }
.gd-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }

.gd-section--tint { background: var(--gd-forest-soft); }
.gd-section--paper { background: var(--gd-paper); }
.gd-section--white { background: var(--gd-white); }

.gd-section--dark {
	background: var(--gd-ink);
	color: var(--gd-text-on-dark-2);
}

/* Fine grid overlay for dark sections. Reads as a technical drawing ground. */
.gd-section--grid::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(172, 246, 1, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(172, 246, 1, 0.05) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
}

.gd-section > * { position: relative; z-index: var(--gd-z-base); }

.gd-grid {
	display: grid;
	gap: var(--gd-space-6);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.gd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.gd-grid--3,
	.gd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.gd-grid--2,
	.gd-grid--3,
	.gd-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Two-column split with an editorial bias. */
.gd-split {
	display: grid;
	gap: clamp(var(--gd-space-8), 5vw, var(--gd-space-16));
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
}

.gd-split--sticky > :first-child {
	position: sticky;
	top: var(--gd-space-16);
}

@media (max-width: 860px) {
	.gd-split { grid-template-columns: minmax(0, 1fr); }
	.gd-split--sticky > :first-child { position: static; }
}


/* 4. Eyebrow and rules
   --------------------------------------------------------------------------
   The monospace eyebrow is the signature of this system. It carries section
   labels, figure numbers and data captions.
   ========================================================================== */

.gd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--gd-space-2);
	font-family: var(--gd-font-mono);
	font-size: var(--gd-text-label);
	font-weight: var(--gd-weight-medium);
	letter-spacing: var(--gd-tracking-label);
	text-transform: uppercase;
	color: var(--gd-text-3);
	margin: 0 0 var(--gd-space-4);
}

.gd-eyebrow::before {
	content: "";
	inline-size: 14px;
	block-size: 2px;
	background: var(--gd-lime);
	flex: none;
}

.gd-eyebrow--plain::before { display: none; }

.gd-on-dark .gd-eyebrow { color: var(--gd-lime); }

.gd-rule {
	border: 0;
	block-size: 1px;
	background: var(--gd-line);
	margin-block: var(--gd-space-8);
}

.gd-on-dark .gd-rule { background: var(--gd-ink-3); }

/* Section number, e.g. 01 / 06 */
.gd-index {
	font-family: var(--gd-font-mono);
	font-size: var(--gd-text-label);
	letter-spacing: var(--gd-tracking-label);
	color: var(--gd-text-3);
	font-variant-numeric: tabular-nums;
}


/* 5. Buttons
   ========================================================================== */

.gd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gd-space-2);
	font-family: var(--gd-font-body);
	font-size: var(--gd-text-sm);
	font-weight: var(--gd-weight-semibold);
	letter-spacing: 0.01em;
	line-height: 1;
	padding: 0.875rem 1.5rem;
	border-radius: var(--gd-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--gd-dur-fast) var(--gd-ease),
		border-color var(--gd-dur-fast) var(--gd-ease),
		color var(--gd-dur-fast) var(--gd-ease),
		transform var(--gd-dur-fast) var(--gd-ease);
}

.gd-btn:active { transform: translateY(1px); }

.gd-btn:focus-visible {
	outline: none;
	box-shadow: var(--gd-focus-ring);
}

.gd-btn--sm { padding: 0.625rem 1.125rem; font-size: var(--gd-text-xs); }
.gd-btn--lg { padding: 1.0625rem 2rem; font-size: var(--gd-text-base); }
.gd-btn--block { display: flex; inline-size: 100%; }

/* Primary — forest on light */
.gd-root .gd-btn--primary {
	background: var(--gd-forest);
	color: var(--gd-white);
}

.gd-root .gd-btn--primary:hover {
	background: var(--gd-forest-deep);
	color: var(--gd-white);
}

/* Lime — the loud one. Dark ink text, only on dark grounds. */
.gd-root .gd-btn--lime {
	background: var(--gd-lime);
	color: var(--gd-ink);
}

.gd-root .gd-btn--lime:hover {
	background: var(--gd-white);
	color: var(--gd-ink);
}

.gd-btn--lime:focus-visible { box-shadow: var(--gd-focus-ring-dark); }

/* Outline on light */
.gd-root .gd-btn--outline {
	background: transparent;
	border-color: var(--gd-line-strong);
	color: var(--gd-text);
}

.gd-root .gd-btn--outline:hover {
	border-color: var(--gd-forest);
	color: var(--gd-forest);
	background: var(--gd-forest-soft);
}

/* Outline on dark */
.gd-root .gd-btn--outline-dark {
	background: transparent;
	border-color: var(--gd-ink-3);
	color: var(--gd-text-on-dark);
}

.gd-root .gd-btn--outline-dark:hover {
	border-color: var(--gd-lime);
	color: var(--gd-lime);
	background: rgba(172, 246, 1, 0.06);
}

.gd-btn--outline-dark:focus-visible { box-shadow: var(--gd-focus-ring-dark); }

/* WhatsApp */
.gd-root .gd-btn--whatsapp,
.gd-root .gd-btn--wa {
	background: var(--gd-whatsapp);
	color: #04310f;
}

.gd-root .gd-btn--whatsapp:hover,
.gd-root .gd-btn--wa:hover {
	background: var(--gd-whatsapp-deep);
	color: var(--gd-white);
}

/* Quiet text button with a moving arrow */
.gd-root .gd-btn--link {
	padding: 0;
	background: none;
	border: none;
	color: var(--gd-forest);
	font-weight: var(--gd-weight-semibold);
}

.gd-btn--link .gd-btn__arrow {
	transition: transform var(--gd-dur) var(--gd-ease);
}

.gd-btn--link:hover .gd-btn__arrow { transform: translateX(3px); }

.gd-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gd-space-3);
	align-items: center;
}


/* 6. Cards
   ========================================================================== */

.gd-card {
	background: var(--gd-white);
	border: var(--gd-border);
	border-radius: var(--gd-radius-md);
	padding: var(--gd-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--gd-space-3);
	transition: border-color var(--gd-dur) var(--gd-ease),
		box-shadow var(--gd-dur) var(--gd-ease),
		transform var(--gd-dur) var(--gd-ease);
}

.gd-card--link:hover {
	border-color: var(--gd-line-strong);
	box-shadow: var(--gd-shadow-md);
	transform: translateY(-2px);
}

.gd-card--flush { padding: 0; overflow: hidden; }

.gd-card--dark {
	background: var(--gd-ink-2);
	border-color: var(--gd-ink-3);
	color: var(--gd-text-on-dark-2);
}

.gd-card--dark:hover { border-color: var(--gd-lime); }

.gd-card__title {
	font-family: var(--gd-font-display);
	font-size: var(--gd-h4);
	font-weight: var(--gd-weight-semibold);
	letter-spacing: var(--gd-tracking-heading);
	line-height: var(--gd-leading-snug);
	margin: 0;
}

.gd-card__body {
	font-size: var(--gd-text-base);
	color: var(--gd-text-2);
	margin: 0;
}

.gd-card__foot {
	margin-top: auto;
	padding-top: var(--gd-space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gd-space-3);
}

/* Full-card link overlay, keeps the card a single hit target. */
.gd-card--link { position: relative; }

.gd-card__overlay-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--gd-z-raised);
}


/* 7. Stats and spec rows
   ========================================================================== */

.gd-stat { display: flex; flex-direction: column; gap: var(--gd-space-1); }

.gd-stat__value {
	font-family: var(--gd-font-display);
	font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
	font-weight: var(--gd-weight-bold);
	letter-spacing: var(--gd-tracking-display);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--gd-text);
}

.gd-on-dark .gd-stat__value { color: var(--gd-white); }

.gd-stat__value--lime { color: var(--gd-lime-dim); }
.gd-on-dark .gd-stat__value--lime { color: var(--gd-lime); }

.gd-stat__label {
	font-family: var(--gd-font-mono);
	font-size: var(--gd-text-label);
	letter-spacing: var(--gd-tracking-label);
	text-transform: uppercase;
	color: var(--gd-text-3);
}

/* Spec table. Label left, value right, dotted leader between.
   This is the component that does most of the technical signalling. */
.gd-specs {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: var(--gd-text-sm);
}

.gd-specs__row {
	display: flex;
	align-items: baseline;
	gap: var(--gd-space-3);
	padding-block: var(--gd-space-3);
	border-bottom: var(--gd-border);
}

.gd-specs__row:first-child { border-top: var(--gd-border); }

.gd-on-dark .gd-specs__row { border-color: var(--gd-ink-3); }

.gd-specs__label {
	font-family: var(--gd-font-mono);
	font-size: var(--gd-text-label);
	letter-spacing: var(--gd-tracking-label);
	text-transform: uppercase;
	color: var(--gd-text-3);
	flex: none;
}

.gd-specs__dots {
	flex: 1 1 auto;
	border-bottom: 1px dotted var(--gd-line-strong);
	transform: translateY(-0.25em);
	min-inline-size: var(--gd-space-4);
}

.gd-on-dark .gd-specs__dots { border-color: var(--gd-ink-3); }

.gd-specs__value {
	font-weight: var(--gd-weight-medium);
	color: var(--gd-text);
	text-align: right;
	flex: none;
}

.gd-on-dark .gd-specs__value { color: var(--gd-text-on-dark); }

@media (max-width: 520px) {
	.gd-specs__row { flex-wrap: wrap; }
	.gd-specs__dots { display: none; }
	.gd-specs__value { text-align: left; inline-size: 100%; }
}


/* 8. Chips and badges
   ========================================================================== */

.gd-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--gd-space-2);
	font-family: var(--gd-font-mono);
	font-size: var(--gd-text-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.375rem 0.625rem;
	border-radius: var(--gd-radius-xs);
	border: var(--gd-border);
	background: var(--gd-white);
	color: var(--gd-text-2);
	white-space: nowrap;
}

.gd-chip--brand {
	background: var(--gd-forest-soft);
	border-color: color-mix(in srgb, var(--gd-forest) 20%, transparent);
	color: var(--gd-forest-deep);
}

.gd-chip--lime {
	background: var(--gd-lime-soft);
	border-color: color-mix(in srgb, var(--gd-lime-dim) 35%, transparent);
	color: #3f5c00;
}

.gd-chip--signal {
	background: var(--gd-signal-soft);
	border-color: color-mix(in srgb, var(--gd-signal) 22%, transparent);
	color: #075a97;
}

.gd-chip--dark {
	background: var(--gd-ink-2);
	border-color: var(--gd-ink-3);
	color: var(--gd-text-on-dark-2);
}

.gd-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gd-space-2);
}

/* Live indicator dot, for "currently managed" status. */
.gd-dot {
	inline-size: 6px;
	block-size: 6px;
	border-radius: var(--gd-radius-pill);
	background: var(--gd-lime-dim);
	flex: none;
}

.gd-dot--live {
	background: var(--gd-lime-dim);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-lime-dim) 20%, transparent);
}


/* 9. Media frames
   ========================================================================== */

.gd-frame {
	position: relative;
	overflow: hidden;
	border: var(--gd-border);
	border-radius: var(--gd-radius-md);
	background: var(--gd-white);
}

.gd-frame--dark { border-color: var(--gd-ink-3); background: var(--gd-ink-2); }

.gd-frame__img { inline-size: 100%; display: block; }

/* Browser chrome for site screenshots. */
.gd-browser {
	border: var(--gd-border);
	border-radius: var(--gd-radius-md);
	overflow: hidden;
	background: var(--gd-white);
	box-shadow: var(--gd-shadow-md);
}

.gd-browser__bar {
	display: flex;
	align-items: center;
	gap: var(--gd-space-2);
	padding: var(--gd-space-3) var(--gd-space-4);
	background: #f2f5f3;
	border-bottom: var(--gd-border);
}

.gd-browser__dots { display: flex; gap: 6px; flex: none; }

.gd-browser__dot {
	inline-size: 9px;
	block-size: 9px;
	border-radius: var(--gd-radius-pill);
	background: var(--gd-line-strong);
}

.gd-browser__url {
	font-family: var(--gd-font-mono);
	font-size: var(--gd-text-label);
	color: var(--gd-text-3);
	background: var(--gd-white);
	border: var(--gd-border);
	border-radius: var(--gd-radius-xs);
	padding: 0.25rem 0.625rem;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Long full-page screenshots: cap the height and fade the cut. */
.gd-shot {
	position: relative;
	overflow: hidden;
	max-block-size: 520px;
}

.gd-shot::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 120px;
	background: linear-gradient(to bottom, transparent, var(--gd-white));
	pointer-events: none;
}

.gd-shot--tall { max-block-size: 760px; }


/* 10. Prose
   ========================================================================== */

.gd-prose { max-width: 68ch; }

.gd-prose > * + * { margin-top: var(--gd-space-5); }

.gd-prose h2 { margin-top: var(--gd-space-12); }
.gd-prose h3 { margin-top: var(--gd-space-8); }

.gd-prose ul,
.gd-prose ol {
	padding-inline-start: var(--gd-space-5);
	margin-block: 0;
}

.gd-prose li + li { margin-top: var(--gd-space-2); }

.gd-prose li::marker { color: var(--gd-lime-dim); }

.gd-prose blockquote {
	margin: var(--gd-space-8) 0;
	padding-inline-start: var(--gd-space-5);
	border-inline-start: 2px solid var(--gd-lime);
	font-size: var(--gd-text-lg);
	line-height: var(--gd-leading-normal);
	color: var(--gd-text);
}

.gd-prose code {
	font-family: var(--gd-font-mono);
	font-size: 0.9em;
	background: var(--gd-forest-soft);
	padding: 0.15em 0.4em;
	border-radius: var(--gd-radius-xs);
}

/* Checklist, for scope and deliverable lists. */
.gd-checks { list-style: none; padding: 0; margin: 0; }

.gd-checks li {
	position: relative;
	padding-inline-start: var(--gd-space-6);
	margin-block: var(--gd-space-3);
	color: var(--gd-text-2);
}

.gd-checks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	inline-size: 9px;
	block-size: 5px;
	border-inline-start: 2px solid var(--gd-lime-dim);
	border-block-end: 2px solid var(--gd-lime-dim);
	transform: rotate(-45deg);
}

.gd-on-dark .gd-checks li::before {
	border-color: var(--gd-lime);
}


/* 11. Forms
   ========================================================================== */

.gd-field {
	display: flex;
	flex-direction: column;
	gap: var(--gd-space-2);
}

.gd-label {
	font-family: var(--gd-font-mono);
	font-size: var(--gd-text-label);
	letter-spacing: var(--gd-tracking-label);
	text-transform: uppercase;
	color: var(--gd-text-3);
}

.gd-input,
.gd-select,
.gd-textarea {
	font-family: var(--gd-font-body);
	font-size: var(--gd-text-base);
	color: var(--gd-text);
	background: var(--gd-white);
	border: var(--gd-border-strong);
	border-radius: var(--gd-radius-sm);
	padding: 0.75rem 0.875rem;
	inline-size: 100%;
	transition: border-color var(--gd-dur-fast) var(--gd-ease),
		box-shadow var(--gd-dur-fast) var(--gd-ease);
}

.gd-input:focus,
.gd-select:focus,
.gd-textarea:focus {
	outline: none;
	border-color: var(--gd-forest);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-forest) 14%, transparent);
}

.gd-textarea { min-block-size: 140px; resize: vertical; }


/* 12. Utilities
   ========================================================================== */

.gd-stack > * + * { margin-top: var(--gd-space-4); }
.gd-stack-sm > * + * { margin-top: var(--gd-space-2); }
.gd-stack-lg > * + * { margin-top: var(--gd-space-8); }

.gd-center { text-align: center; }
.gd-center-x { margin-inline: auto; }

.gd-measure { max-width: 62ch; }
.gd-measure-sm { max-width: 48ch; }

.gd-flex { display: flex; gap: var(--gd-space-4); }
.gd-flex-between { display: flex; justify-content: space-between; gap: var(--gd-space-4); }
.gd-items-center { align-items: center; }
.gd-wrap { flex-wrap: wrap; }

.gd-hide { display: none !important; }

@media (max-width: 780px) {
	.gd-hide\@md { display: none !important; }
}

.gd-sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* 13. Accessibility and print
   ========================================================================== */

.gd-root :focus-visible {
	outline: 2px solid var(--gd-forest);
	outline-offset: 2px;
}

.gd-on-dark :focus-visible { outline-color: var(--gd-lime); }

.gd-skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: var(--gd-space-4);
	z-index: var(--gd-z-modal);
	background: var(--gd-ink);
	color: var(--gd-white);
	padding: var(--gd-space-3) var(--gd-space-4);
	border-radius: var(--gd-radius-sm);
}

.gd-skip-link:focus { inset-block-start: var(--gd-space-4); }

/* Scroll reveal. Elements start hidden only when motion is allowed, so a
   JS failure or a reduced-motion preference never hides content. */
@media (prefers-reduced-motion: no-preference) {
	.gd-reveal {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity var(--gd-dur-slow) var(--gd-ease-out),
			transform var(--gd-dur-slow) var(--gd-ease-out);
	}

	.gd-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gd-root *,
	.gd-root *::before,
	.gd-root *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.gd-root { background: #fff; color: #000; }
	.gd-section { padding-block: 1rem; }
	.gd-btn, .gd-skip-link { display: none !important; }
	.gd-card { border: 1px solid #ccc; box-shadow: none; }
}