/* GENERATED - do not edit. Concatenated from the css/ partials by the MSBuild BundleStaticAssets target (build) and sync-public-assets.ps1 (dev). Edit the partials, not this file. */
/* =============================================================================
   GRIDNOW — Static Site Styles
   Tokens → Reset → Primitives → Components → Layouts
   ============================================================================= */

/* --- Tokens -------------------------------------------------------------- */
:root {
    /* GRIDNOW light palette (matches WP site). Dark-on-light, accent blue. */
    --color-bg: #ffffff;
    /* single default light grey for muted/subtle surfaces — keep all three equal */
    --color-bg-muted: #f5f6f7;
    --color-bg-subtle: #f5f6f7;
    --color-bg-sidebar: #f5f6f7;
    --color-bg-elevated: #ffffff;
    --color-footer-bg: #1a1f2e; /* dark footer stays per WP design */
    --color-footer-text: #e5e7eb;
    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;
    --color-text: #202036;
    --color-text-muted: #545966;
    --color-text-subtle: #8b929c;
    --color-accent: #3b82f6;
    --color-accent-on: #ffffff;
    --color-accent-hover: #2563eb;
    --color-accent-muted: #eff6ff;
    --color-accent-soft: #93c5fd;
    --color-brand-yellow: #f5a623;
    --color-brand-yellow-dark: #f59e0b;
    --color-code-bg: #1e293b;
    --color-code-text: #e2e8f0;
    --color-danger: #ef4444;
    --color-success: #22c55e;
    --on-dark-strong: rgba(255, 255, 255, 0.85);
    --on-dark-muted: rgba(255, 255, 255, 0.72);
    --on-dark-subtle: rgba(255, 255, 255, 0.60);

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --fw-light: 350;
    --fw-standard: 400;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --fs-2xs: 0.6875rem;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;
    --fs-fluid-sm: clamp(1.375rem, 2vw, 1.875rem); /* 22→30px sub-headings */
    --fs-fluid-md: clamp(1.75rem, 3vw, 2.5rem); /* 28→40px section titles */
    --fs-fluid-lg: clamp(2.25rem, 5vw, 4rem); /* 36→64px hero / display */

    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-base: 1.6;
    --lh-loose: 1.75;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    --shadow-sm: 0 1px 2px rgba(16, 20, 28, 0.04);
    --shadow-md: 0 6px 20px rgba(16, 20, 28, 0.06);

    --container-narrow: 44rem;
    --container-medium: 64rem;
    --container-wide: 80rem;

    --header-height: 80px;
    --header-height-mobile: 75px;
    --footer-height: 130px;
    --sidebar-width: 18rem;
    --toc-width: 16rem;

    --hero-min-height: 35rem;        /* search/listing hero + .hero--simple (Kontakt/Impressum) */
    --hero-min-height-tall: 60vh;    /* marketing page-top heros (.gn-herotabs / .gn-heroprev) */

    --trans-fast: 120ms ease;
    --trans-base: 200ms ease;
}

/* Inter @font-face is registered at the end of this file (GN-TYPOGRAPHY-SYSTEM) so the editor canvas gets it too. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Full-bleed sections use width:100vw, which includes the vertical scrollbar
     width and so overflows the content box by ~15px → a stray horizontal
     scrollbar. Clip it here. `clip` (not `hidden`) keeps the viewport as the
     scroll container, so the sticky header still works. */
    overflow-x: clip;
}

/* Force Inter site-wide. Excludes code/pre so they keep the mono stack. */
body, body :not(code):not(pre):not(kbd):not(samp) {
    font-family: var(--font-sans);
}

/* Default body paragraphs a touch lighter (Inter is variable). */
p {
    font-weight: var(--fw-light);
}

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

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--trans-fast);
}

a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

button {
    font: inherit;
    cursor: pointer;
}

ul, ol {
    list-style: none;
}

/* --- Primitives ---------------------------------------------------------- */
.stack > * + * {
    margin-top: var(--stack-gap, var(--space-5));
}

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

.center-x {
    display: flex;
    justify-content: center;
}

/* --- Site Header --------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(9, 11, 14, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
    height: var(--header-height);
    display: flex;
    align-items: center;
    color: #fff;
}

.site-header .site-header__nav a,
.site-header .site-header__group > a,
.site-header .site-header__group-label,
.site-header .site-header__login {
    color: var(--on-dark-strong);
}

.site-header .site-header__nav a:hover,
.site-header .site-header__group > a:hover,
.site-header .site-header__nav a.active,
.site-header .site-header__login:hover {
    color: #fff;
}

.site-header .site-header__burger {
    color: #fff;
}

.site-header .lang-switcher__toggle {
    color: var(--on-dark-muted);
}

.site-header .lang-switcher:hover .lang-switcher__toggle,
.site-header .lang-switcher:focus-within .lang-switcher__toggle {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

.site-header .lang-switcher__toggle img {
    filter: invert(100%);
}

.site-header__inner {
    width: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: flex;
    align-items: center;
    align-self: stretch;
    height: 100%;
    gap: var(--space-5);
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header__logo img {
    width: 50px;
    height: 50px;
}

.site-header__nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 1.5rem;
    flex: 1;
    margin-left: var(--space-5);
}

.site-header__nav a {
    color: #fff;
    font-weight: var(--fw-standard);
    font-size: var(--fs-lg);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 1rem 0.5rem;
    text-decoration: none;
    border-bottom: 4px solid transparent;
    transition: border-color var(--trans-fast);
}

.site-header__nav a:hover,
.site-header__nav a:focus {
    color: #fff;
    text-decoration: none;
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

.site-header__nav a.active {
    color: #fff;
    text-decoration: none;
    border-bottom-color: #fca801;
}

.site-header__group {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}

.site-header__group > a,
.site-header__group-label {
    color: #fff;
    font-weight: var(--fw-standard);
    font-size: var(--fs-lg);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 1rem 0.5rem;
    border-bottom: 4px solid transparent;
    transition: border-color var(--trans-fast);
}

.site-header__group > a:hover,
.site-header__group > a:focus {
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

.site-header__group:has(> a.active) > a,
.site-header__group.is-active > a {
    border-bottom-color: #fca801;
}

/* Header keeps one consistent size — no partial shrink. The lang switcher, CTA
   and login icon never scaled, so the nav links shouldn't either ("garnichts"). */
.site-header__group-label {
    user-select: none;
    cursor: default;
}

/* Submenu / dropdown — dark panel, opens on hover */
.site-header__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    margin-top: 4px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(38, 44, 56, 0.98);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

/* invisible bridge so the cursor can cross the gap without the menu closing */
.site-header__submenu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.site-header .site-header__submenu a {
    display: block;
    padding: 0.75rem 1.1rem;
    white-space: nowrap;
    border-radius: 8px;
    border-bottom: 0;
    color: var(--on-dark-muted);
    transition: color var(--trans-fast), background var(--trans-fast);
}

.site-header .site-header__submenu a:hover,
.site-header .site-header__submenu a:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 0;
}

.site-header .site-header__submenu a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.site-header__group:hover .site-header__submenu,
.site-header__group:focus-within .site-header__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
}

/* chevron indicator on expandable items (groups only exist when there are children) */
.site-header__group > a::after,
.site-header__group > .site-header__group-label::after {
    content: "";
    width: 0.7em;
    height: 0.7em;
    margin-left: 0.55rem;
    flex-shrink: 0;
    background-color: currentColor;
    opacity: 0.65;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 160ms ease, opacity var(--trans-fast);
}

.site-header__group:hover > a::after,
.site-header__group:focus-within > a::after,
.site-header__group:hover > .site-header__group-label::after,
.site-header__group:focus-within > .site-header__group-label::after {
    opacity: 1;
    transform: rotate(180deg);
}

/* parent trigger shows the bar on hover/focus (white) and the orange selected
   marker when the current page lives inside it */
.site-header__group:hover > a,
.site-header__group:hover > .site-header__group-label,
.site-header__group:focus-within > a,
.site-header__group:focus-within > .site-header__group-label {
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

.site-header__group.is-active > a,
.site-header__group.is-active > .site-header__group-label,
.site-header__group:has(> a.active) > a {
    border-bottom-color: #fca801;
}

@media (prefers-reduced-motion: reduce) {
    .site-header__submenu {
        transform: none;
        transition: opacity 80ms ease, visibility 0s linear 80ms;
    }

    .site-header__group:hover .site-header__submenu,
    .site-header__group:focus-within .site-header__submenu {
        transform: none;
        transition: opacity 80ms ease, visibility 0s;
    }

    .site-header__group:hover > a::after,
    .site-header__group:focus-within > a::after,
    .site-header__group:hover > .site-header__group-label::after,
    .site-header__group:focus-within > .site-header__group-label::after {
        transform: none;
    }

    .lang-switcher__menu {
        transform: none;
        transition: opacity 80ms ease, visibility 0s linear 80ms;
    }

    .lang-switcher:hover .lang-switcher__menu,
    .lang-switcher:focus-within .lang-switcher__menu {
        transform: none;
        transition: opacity 80ms ease, visibility 0s;
    }

    .lang-switcher:hover .lang-switcher__toggle::after,
    .lang-switcher:focus-within .lang-switcher__toggle::after {
        transform: none;
    }
}

.site-header__actions {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: var(--space-3);
    flex-shrink: 0;
    margin-left: auto;
}

.site-header__login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--on-dark-strong);
    padding: 0;
    border-radius: 50%;
    transition: color var(--trans-fast), background var(--trans-fast);
}

.site-header__login:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.site-header__login svg {
    display: block;
}

.site-header__login:hover {
    color: var(--color-text);
    text-decoration: none;
}

/* Burger — only shown on mobile */
.site-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
}

.site-header__burger-close {
    display: none;
}

.site-header.is-open .site-header__burger-open {
    display: none;
}

.site-header.is-open .site-header__burger-close {
    display: block;
}

.site-header__drawer {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0.98) 0%, rgba(17, 24, 39, 0.98) 100%);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    padding: var(--space-4) var(--space-5) var(--space-6);
    z-index: 49;
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
    color: #fff;
}

.site-header__drawer a,
.site-header__drawer-section {
    display: block;
    padding: 14px 4px;
    color: var(--on-dark-strong);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-transform: none;
    letter-spacing: normal;
}

.site-header__drawer a:hover {
    color: #fff;
    text-decoration: none;
}

.site-header__drawer-section {
    color: var(--on-dark-subtle);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 0;
    padding-top: var(--space-4);
}

.site-header__drawer-sub {
    padding-left: 1.5rem;
    font-size: var(--fs-base);
    color: var(--on-dark-muted);
}

.site-header__drawer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: var(--space-4) 0;
}

.site-header__drawer-langpicker {
    border: 0 !important;
    padding: 0 !important;
}

.site-header__drawer-langpicker > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    font-weight: var(--fw-standard);
    padding: 0.5rem 0;
    user-select: none;
}

.site-header__drawer-langpicker > summary::-webkit-details-marker {
    display: none;
}

.site-header__drawer-langpicker-chev {
    margin-left: auto;
    transition: transform 0.2s;
    opacity: 0.7;
}

.site-header__drawer-langpicker[open] > summary .site-header__drawer-langpicker-chev {
    transform: rotate(180deg);
}

.site-header__drawer-langpicker-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.25rem;
    padding-left: 1.8rem;
}

.site-header__drawer-langpicker-item {
    color: var(--on-dark-muted) !important;
    font-size: var(--fs-base);
    padding: 0.4rem 0;
    text-decoration: none;
    border-bottom: 0 !important;
}

.site-header__drawer-langpicker-item.is-current {
    color: #fff !important;
    font-weight: var(--fw-semibold);
}

.site-header__drawer-login {
    color: #fff !important;
    font-weight: var(--fw-semibold) !important;
}

.site-header__drawer-cta {
    display: inline-flex !important;
    margin-top: var(--space-3);
    padding: 12px 22px !important;
    border-bottom: 0 !important;
    align-self: flex-start;
    color: #fff !important;
}

.site-header.is-open .site-header__drawer {
    display: block;
}

/* Primary button — blue rounded CTA */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    transition: background var(--trans-fast), color var(--trans-fast);
    border: 0;
    cursor: pointer;
    text-decoration: none;
}

.btn--primary {
    background: var(--color-accent);
    color: #fff;
}

.btn--primary:hover {
    background: var(--color-accent-hover);
    color: #fff;
    text-decoration: none;
}

/* Header "Get in touch" CTA — match nav link size */
.site-header .site-header__cta {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    padding: 10px 20px;
}

.btn--brand {
    background: var(--color-brand-yellow);
    color: var(--color-text);
    padding: 12px 24px;
    font-size: var(--fs-base);
}

.btn--brand:hover {
    background: #e59714;
    color: var(--color-text);
    text-decoration: none;
}

/* Language switcher */
.lang-switcher {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    align-self: stretch;
}

.lang-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    border-bottom: 4px solid transparent;
    color: var(--color-text-muted);
    font-weight: var(--fw-standard);
    font-size: var(--fs-lg);
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
    transition: color var(--trans-fast), border-color var(--trans-fast);
}

.lang-switcher__toggle img {
    filter: invert(85%);
}

.lang-switcher__toggle:hover {
    color: var(--color-text);
}

/* chevron affordance — mirrors the Lösungen group trigger */
.lang-switcher__toggle::after {
    content: "";
    width: 0.7em;
    height: 0.7em;
    flex-shrink: 0;
    background-color: currentColor;
    opacity: 0.65;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 160ms ease, opacity var(--trans-fast);
}

.lang-switcher:hover .lang-switcher__toggle::after,
.lang-switcher:focus-within .lang-switcher__toggle::after {
    opacity: 1;
    transform: rotate(180deg);
}

/* popout — same dark glass panel as the Lösungen submenu */
.lang-switcher__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    margin-top: 4px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(38, 44, 56, 0.98);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

/* invisible bridge so the cursor can cross the gap without the menu closing */
.lang-switcher__menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.lang-switcher:hover .lang-switcher__menu,
.lang-switcher:focus-within .lang-switcher__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
}

.lang-switcher__item {
    display: block;
    padding: 0.75rem 1.1rem;
    white-space: nowrap;
    border-radius: 8px;
    color: var(--on-dark-muted);
    font-weight: var(--fw-standard);
    transition: color var(--trans-fast), background var(--trans-fast);
}

.lang-switcher__item:hover,
.lang-switcher__item:focus {
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.08);
}

.lang-switcher__item.is-current {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

/* --- Main ---------------------------------------------------------------- */
.site-main {
    min-height: calc(100vh - var(--header-height) - 80px);
    /* Guard: oversized/full-bleed children (e.g. the mobile Lottie at 120vw) must
       never produce a horizontal scrollbar. `clip` kills h-overflow without making
       a scroll container (unlike `hidden`), so vertical scroll + sticky stay intact. */
    overflow-x: clip;
}

/* --- Page layouts (selectable per page in editor) ------------------------- */
.layout-page .layout-page__content {
    width: 100%;
    margin: 0 auto;
    /* Horizontal padding keeps plain text blocks (headings, paragraphs, forms)
     away from the container edge. Section-style `.gn-*` blocks cancel this
     padding with negative margin (rule below) so their backgrounds hit the
     container edge while inner content stays centered via their own padding. */
    padding: var(--space-6) var(--space-5);
}

.layout-page--default .layout-page__content {
    max-width: var(--container-wide);
}

.layout-page--narrow .layout-page__content {
    max-width: var(--container-medium);
}

.layout-page--wide .layout-page__content {
    max-width: 80rem;
}

.layout-page--full .layout-page__content {
    max-width: none;
    padding: 0;
}

/* Full-bleed escape: hero-style blocks always break out to the viewport edge.
   Other section blocks only bleed under the `full` layout variant — otherwise
   they stay within the selected container width (default/narrow/wide). Any
   block can opt into a bleed via the `.full-bleed` class. */
.layout-page__content > .hero,
.layout-page__content > .gn-hero,
.layout-page__content > .gn-herotabs,
.layout-page__content > .gn-heroprev,
.layout-page__content > .gn-partner,
.layout-page__content > .gn-logos,
.layout-page__content > .gn-feed,
.layout-page__content > .full-bleed,
.layout-page__content > .gn-platform,
.layout-page--full .layout-page__content > .gn-principles,
.layout-page--full .layout-page__content > .gn-ucc,
.layout-page--full .layout-page__content > .gn-featurelist,
.layout-page--full .layout-page__content > .gn-demo,
.layout-page--full .layout-page__content > .gn-feed,
.layout-page--full .layout-page__content > .gn-stats,
.layout-page--full .layout-page__content > .gn-features,
.layout-page--full .layout-page__content > .gn-testimonial,
.layout-page--full .layout-page__content > .gn-pricing,
.layout-page--full .layout-page__content > .gn-faq,
.layout-page--full .layout-page__content > .gn-team,
.layout-page--full .layout-page__content > .gn-newsletter,
.layout-page--full .layout-page__content > .gn-contact {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
}

/* Section blocks span the container edge-to-edge by cancelling the outer
   horizontal padding — the block's own inner padding keeps its content
   centered. (Full-bleed rules above override this for the `full` variant.) */
.layout-page__content > .gn-principles,
.layout-page__content > .gn-ucc,
.layout-page__content > .gn-featurelist,
.layout-page__content > .gn-demo,
.layout-page__content > .gn-stats,
.layout-page__content > .gn-features,
.layout-page__content > .gn-testimonial,
.layout-page__content > .gn-pricing,
.layout-page__content > .gn-faq,
.layout-page__content > .gn-team,
.layout-page__content > .gn-newsletter,
.layout-page__content > .gn-contact {
    margin-left: calc(-1 * var(--space-5));
    margin-right: calc(-1 * var(--space-5));
}

/* Shared page-top hero base. Carries ONLY the lowest-common-denominator
   geometry every dark hero band needs. Lives here (loads BEFORE the block
   partials 45/55/60/65/70/75) so each hero block's own rule still wins for its
   specifics — background, exact min-height, layout, header pull-up. Deliberately
   NO margin-top here: the under-header pull-up is a dark-band + first-child
   concern, so it stays per-block (a mid-page or light hero must not yank itself
   up under the sticky header). Full-bleed for .gn-hero is wired into the list
   above. Adopt by adding `gn-hero` to a hero section's class list. */
.gn-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    min-height: var(--hero-min-height);
}

/* --- Platform intro (light · Lottie + text) ----------------------------- */
.gn-platform {
    background: var(--color-bg-subtle);
}

.gn-platform__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--space-9) var(--space-5);
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
}

.gn-platform__media {
    width: calc(100% + 4rem);
    margin-left: -4rem;
    margin-right: -2rem;
}

.gn-platform__lottie {
    width: 100%;
    aspect-ratio: 1096 / 1020;
}

.gn-platform__lottie svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.gn-platform__body {
    max-width: 40rem;
}

.gn-platform__title {
    font-size: var(--fs-fluid-sm);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-5);
}

.gn-platform__text {
    font-size: var(--fs-lg);
    line-height: var(--lh-base);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
}

.gn-platform__cta {
    margin-top: var(--space-3);
}

@media (max-width: 860px) {
    .gn-platform__inner {
        /* minmax(0,1fr) — NOT plain 1fr (= minmax(auto,1fr)): the `auto` min would let
           the oversized Lottie widen its own track and create a h-scrollbar. */
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
        padding: var(--space-8) var(--space-5);
    }

    .gn-platform__media {
        /* Render the Lottie MUCH bigger than the column; it is centred on GRID NOW so
           the clipped left/right edges only trim the outer margin. min-width:0 stops the
           oversized grid item from widening its track; .site-main's overflow-x:clip kills
           any h-scroll. The translate/margin nudge the diagram a touch right + down. */
        width: 150vw;
        max-width: none;
        min-width: 0;
        justify-self: center;
        margin: calc(var(--space-5) + 2rem) 0 0;
        transform: translateX(4%);
    }

    .gn-platform__body {
        max-width: none;
    }
}

/* --- Site Footer --------------------------------------------------------- */
.site-footer {
    margin-top: var(--space-9);
    padding: var(--space-7) 0 var(--space-5);
    background: #0b1220;
    color: var(--on-dark-muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

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

.site-footer a:hover {
    color: #fff;
}

.site-footer__main {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: grid;
    grid-template-columns: 160px repeat(4, 1fr);
    gap: var(--space-6);
    align-items: flex-start;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.site-footer__col--logo {
    align-items: flex-start;
}

.site-footer__col--logo img {
    width: 140px;
    height: auto;
}

.site-footer__col--about p {
    margin: 0;
    color: var(--on-dark-subtle);
}

.site-footer__heading {
    color: #fff;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.25rem;
}

.site-footer__label {
    color: var(--on-dark-subtle);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0.5rem 0 0.25rem;
}

.site-footer__value {
    color: #fff;
    font-weight: var(--fw-semibold);
}

.site-footer__text {
    color: var(--on-dark-subtle);
    font-size: var(--fs-sm);
}

.site-footer__text a {
    color: var(--on-dark-strong);
    border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
}

.site-footer__accent-link {
    color: var(--color-brand-yellow) !important;
    border-bottom: 1px dotted rgba(252, 168, 0, 0.5);
}

.site-footer__accent-link:hover {
    color: var(--color-brand-yellow) !important;
}

.site-footer__divider {
    max-width: var(--container-wide);
    margin: var(--space-6) auto var(--space-5);
    padding: 0 var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__bottom {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-5);
}

.site-footer__copy {
    color: var(--on-dark-subtle);
    font-size: var(--fs-xs);
}

.site-footer__legal {
    display: flex;
    gap: var(--space-5);
    justify-content: center;
    flex-wrap: wrap;
}

.site-footer__legal a {
    color: var(--on-dark-muted);
    font-size: var(--fs-xs);
}

.site-footer__legal a:hover {
    color: #fff;
}

.site-footer__gn-logo {
    justify-self: end;
}

.site-footer__gn-logo img {
    height: 32px;
    width: auto;
    opacity: 0.9;
}

@media (max-width: 960px) {
    .site-footer__main {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__col--logo {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .site-footer__main {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .site-footer__bottom {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .site-footer__gn-logo {
        justify-self: center;
    }

    .site-footer__legal {
        justify-content: center;
    }
}

/* --- Prose (rendered markdown) ------------------------------------------- */
.prose {
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    color: var(--color-text);
}

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

.prose h2, .prose h3, .prose h4 {
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.prose h2 {
    font-size: var(--fs-2xl);
    margin-top: var(--space-7);
    padding-top: var(--space-2);
}

.prose h3 {
    font-size: var(--fs-xl);
    margin-top: var(--space-6);
}

.prose h4 {
    font-size: var(--fs-lg);
    margin-top: var(--space-5);
}

.prose p {
}

.prose a {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    text-underline-offset: 3px;
}

.prose a:hover {
    text-decoration-color: var(--color-accent);
}

.prose ul, .prose ol {
    padding-left: var(--space-5);
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

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

.prose blockquote {
    border-left: 3px solid var(--color-accent);
    padding: var(--space-3) var(--space-5);
    background: var(--color-accent-muted);
    border-radius: var(--radius-sm);
    font-style: italic;
}

.prose code:not(pre code) {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-bg-subtle);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.prose pre {
    background: var(--color-code-bg);
    color: var(--color-code-text);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.prose pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-family: var(--font-mono);
}

.prose img {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.prose th, .prose td {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.prose th {
    font-weight: var(--fw-semibold);
    background: var(--color-bg-muted);
}

.prose hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-7) 0;
}

/* --- Article layout ------------------------------------------------------ */
.layout-article .site-main {
    padding: var(--space-7) var(--space-5);
}

.article {
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.article__head {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.article__title {
    font-size: var(--fs-4xl);
    line-height: var(--lh-tight);
    letter-spacing: -0.035em;
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-4);
}

.article__cover {
    margin-top: var(--space-5);
}

.article__cover img {
    width: 100%;
    border-radius: var(--radius-lg);
}

.article__lede {
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
    line-height: var(--lh-snug);
    margin-top: var(--space-4);
}

.article__body {
    margin-top: var(--space-6);
}

.article__related {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.article__related-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-5);
}

.article-meta {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    color: var(--color-text-subtle);
    font-size: var(--fs-sm);
}

.article-meta__author::before {
    content: "·";
    margin-right: var(--space-3);
    color: var(--color-border-strong);
}

.article-meta__tags {
    display: flex;
    gap: var(--space-2);
    font-size: var(--fs-xs);
}

.article-meta__tags li {
    background: var(--color-bg-muted);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

/* --- Article cards (listing / related) ----------------------------------- */
.article-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.article-cards--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--space-5);
}

.article-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--trans-base), box-shadow var(--trans-base), border-color var(--trans-base);
}

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

.article-card__cover {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.article-card__body {
    padding: var(--space-4) var(--space-5);
}

.article-card__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-2);
    font-weight: var(--fw-semibold);
}

.article-card__title a {
    text-decoration: none;
}

.article-card__title a:hover {
    color: var(--color-accent);
}

.article-card__excerpt {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-3);
}

.article-card__date {
    color: var(--color-text-subtle);
    font-size: var(--fs-xs);
}

/* --- Listing ------------------------------------------------------------- */
.layout-listing .site-main {
    padding: var(--space-7) var(--space-5);
}

.listing {
    max-width: var(--container-wide);
    margin: 0 auto;
}

/* ── Global content alignment ─────────────────────────────────────────────────
   Line every layout's main content up with the header band (logo left edge ↔
   "Get in touch" right edge). Header band = container-wide minus its side padding,
   centered. Each container becomes a border-box of container-wide with space-5
   side padding, centered → its content edges hit the same x as the header.
   site-main side padding is zeroed where present so it doesn't add a 2nd offset.
   Full-bleed pages are excluded so they keep breaking out to 100vw. */
.layout-page:not(.layout-page--full) .layout-page__content,
.layout-article .article,
.layout-listing .listing,
.layout-docs .docs-shell {
    box-sizing: border-box;
    max-width: var(--container-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.layout-article .site-main,
.layout-listing .site-main {
    padding-left: 0;
    padding-right: 0;
}

.listing__head {
    margin-bottom: var(--space-7);
    text-align: center;
}

.listing__title {
    font-size: var(--fs-4xl);
    letter-spacing: -0.035em;
    font-weight: var(--fw-bold);
}

.listing__lede {
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
    margin-top: var(--space-3);
    max-width: var(--container-narrow);
    margin-left: auto;
    margin-right: auto;
}

.listing__empty {
    text-align: center;
    color: var(--color-text-subtle);
    padding: var(--space-8) 0;
}

/* --- Docs layout --------------------------------------------------------- */
.layout-docs .site-main {
    padding: 0;
}

/* Docs DETAIL view = light-grey "desk"; the shell sits on a white sheet, mirroring
   the Insights article detail layout. Scoped to the docs body class so the docs
   LANDING (which uses listing-layout, not layout-docs) stays unaffected. */
body.layout-docs {
    background: var(--color-bg-muted);
}

.docs-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--toc-width);
    max-width: var(--container-wide);
    /* Flush under the header (no top gap); only the bottom corners are rounded. */
    margin: 0 auto var(--space-8);
    gap: var(--space-6);
    padding: var(--space-7);
    padding-top: var(--space-5);
    align-items: start;
    /* White "sheet" on the grey desk (mirrors .gn-insight-body). */
    background: var(--color-bg-elevated);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Pages without an on-page TOC: drop the empty TOC column so the content
   fills the width up to the CTA edge instead of leaving a gap on the right. */
.docs-shell:not(:has(.toc)) {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

/* Sidebar */
.docs-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    max-height: calc(100vh - var(--header-height) - var(--space-6));
    overflow-y: auto;
    padding-right: var(--space-3);
    font-size: var(--fs-sm);
    border-right: 1px solid var(--color-border);
}

.sidebar__list {
    display: flex;
    flex-direction: column;
}

.sidebar__list--nested {
    margin-left: var(--space-3);
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-border);
    margin-top: var(--space-2);
}

.sidebar__item {
    padding: 2px 0;
}

.sidebar__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-standard);
    line-height: var(--lh-snug);
}

.sidebar__link:hover {
    color: var(--color-text);
    background: var(--color-bg-muted);
    text-decoration: none;
}

.sidebar__item--active > .sidebar__link {
    color: var(--color-accent);
    background: var(--color-accent-muted);
    font-weight: var(--fw-semibold);
}

.sidebar__item--section > details > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    letter-spacing: 0.01em;
    outline: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    user-select: none;
}

.sidebar__item--section > details > summary::marker,
.sidebar__item--section > details > summary::-webkit-details-marker {
    display: none;
}

.sidebar__item--section > details > summary::before {
    content: "▸";
    font-size: 0.7em;
    transition: transform var(--trans-fast);
    color: var(--color-text-subtle);
}

.sidebar__item--section > details[open] > summary::before {
    transform: rotate(90deg);
}

.sidebar__item--section > details > summary:hover {
    color: var(--color-accent);
}

.docs-sidebar a:focus, .docs-sidebar summary:focus,
.gn-insight-toc-links a:focus {
    outline: none;
}

/* Docs Page */
.docs-page {
    min-width: 0;
    /* Outer insets now come from the .docs-shell sheet padding. */
    padding: 0;
}

.docs-page__head {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.docs-page__title {
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    letter-spacing: -0.03em;
    font-weight: var(--fw-bold);
}

.docs-page__lede {
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
    margin-top: var(--space-3);
}

.docs-page__body {
    margin-top: var(--space-5);
}

/* Breadcrumbs */
.breadcrumbs {
    margin-bottom: var(--space-4);
    font-size: var(--fs-sm);
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    color: var(--color-text-subtle);
}

.breadcrumbs__item {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}

.breadcrumbs__item a {
    color: var(--color-text-muted);
}

.breadcrumbs__sep {
    color: var(--color-border-strong);
}

/* Toolbar (Print + collapse "On this page") sitting at the right of the
   breadcrumb row. */
.docs-page__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.docs-page__topbar .breadcrumbs {
    margin-bottom: 0;
}

.docs-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.docs-toolbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0.75;
    transition: opacity var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);
}

.docs-toolbar__btn:hover {
    opacity: 1;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.docs-toolbar__btn svg {
    display: block;
}

/* Collapse button: chevron points right (toward the rail's edge) while open, and
   flips to point left (pull back open) once the rail is collapsed. */
.docs-toolbar__btn--toc[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Collapsed state: drop the TOC column so the content fills the width. */
.docs-shell.is-toc-collapsed {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.docs-shell.is-toc-collapsed .toc {
    display: none;
}

/* Print: drop all chrome, let the article fill the page. */
@media print {
    .no-print,
    .site-header,
    .site-footer,
    .docs-sidebar,
    .toc,
    .docs-prevnext {
        display: none !important;
    }

    body.layout-docs {
        background: #fff;
    }

    .layout-docs .docs-shell {
        display: block;
        max-width: 100%;
        margin: 0;
        padding: 0;
        background: #fff;
        border-radius: 0;
    }
}

/* Prev/Next — moved OUT of the .docs-shell sheet to sit on the grey desk below it
   (like the Insights article's related section). Two columns: previous left, next right. */
.docs-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    max-width: var(--container-wide);
    margin: var(--space-4) auto var(--space-8);
}

.docs-prevnext__link {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--color-bg-elevated);
    transition: border-color var(--trans-fast), background var(--trans-fast);
    gap: var(--space-1);
}

.docs-prevnext__link:hover {
    text-decoration: none;
    border-color: var(--color-accent);
    background: var(--color-accent-muted);
}

.docs-prevnext__link--next {
    text-align: right;
    grid-column: 2;
}

.docs-prevnext__link--prev:only-child {
    grid-column: 1 / span 2;
    max-width: 20rem;
}

.docs-prevnext__label {
    font-size: var(--fs-xs);
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.docs-prevnext__title {
    font-weight: var(--fw-semibold);
}

/* TOC (right rail) */
.toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    max-height: calc(100vh - var(--header-height) - var(--space-6));
    overflow-y: auto;
    font-size: var(--fs-sm);
}

.toc__title {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-subtle);
    margin-bottom: var(--space-3);
}

/* The left "rail" lives on the list; the active item paints its own segment in
   the accent colour (scroll-spy adds .is-active via 10-toc-scrollspy.js). */
.toc__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-left: 2px solid var(--color-border);
}

.toc__item a {
    display: block;
    border-left: 2px solid transparent;
    margin-left: -2px;
    padding: 2px 0 2px var(--space-3);
    color: var(--color-text-muted);
    line-height: var(--lh-snug);
    transition: color var(--trans-fast), border-color var(--trans-fast);
}

.toc__item a:hover {
    color: var(--color-text);
    border-left-color: var(--color-border-strong);
    text-decoration: none;
}

.toc__item a.is-active {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    font-weight: var(--fw-semibold);
}

.toc__item--level-3 a {
    padding-left: var(--space-5);
    font-size: var(--fs-xs);
}

/* Article TOC (inline at top of article) */
.layout-article .toc {
    position: static;
    max-height: none;
    border-left: none;
    padding-left: 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-muted);
    border-radius: var(--radius-md);
    margin: var(--space-5) 0;
}

/* --- Clickable group/folder titles in the sidebar ----------------------- */
/* The <summary> still toggles (via its chevron/whitespace); the inner link
   navigates to the group page (onclick stopPropagation prevents a toggle). */
.sidebar__summary .sidebar__link--section,
.sidebar__summary .sidebar__label--section {
    flex: 1;
    min-width: 0;
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.sidebar__summary .sidebar__link--section:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.sidebar__summary.is-active .sidebar__link--section {
    color: var(--color-accent);
}

/* --- Docs FOLDER/group page (docs-folder.sbn) --------------------------- */
/* Hero: folder title + summary on the left, documentation illustration right. */
.docs-folder-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.42fr);
    gap: var(--space-6);
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.docs-folder-hero .docs-page__title {
    margin: 0;
}

.docs-folder-hero .docs-page__lede {
    margin-top: var(--space-3);
}

.docs-folder-hero__media img {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: auto;
    margin-left: auto;
}

/* Child cards reuse .gn-insights-grid / .gn-insights-card--noimg, but sit on a
   light-grey fill (so they read as cards on the white sheet, like the old site). */
.docs-folder-children {
    margin-top: var(--space-6);
}

.docs-folder-children .gn-insights-card {
    background: var(--color-bg-muted);
    border: 0;
    transition: background var(--trans-fast);
}

.docs-folder-children .gn-insights-card:hover {
    background: var(--color-accent-muted);
}

.docs-folder-children__more {
    margin-top: var(--space-3);
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
}

@media (max-width: 800px) {
    .docs-folder-hero {
        grid-template-columns: 1fr;
    }

    .docs-folder-hero__media {
        display: none;
    }
}

/* --- Docs landing intro band ("Zwischenbereich") ------------------------- */
/* Rendered by listing-layout.sbn below the hero/search and above the section
   cards: intro copy on the left, an illustration on the right. Aligned to the
   page container so it lines up with the hero and the card grid. */
.gn-docs-intro {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5rem) var(--space-5);
}

.gn-docs-intro__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.gn-docs-intro__text {
    font-size: var(--fs-lg);
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: 60ch;
}

.gn-docs-intro__text p {
    margin: 0;
}

.gn-docs-intro__media {
    justify-self: center;
}

.gn-docs-intro__media img {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto;
}

@media (max-width: 800px) {
    .gn-docs-intro__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .gn-docs-intro__media {
        max-width: 22rem;
        margin: 0 auto;
    }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
    .docs-shell {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    }

    .layout-docs .toc {
        display: none;
    }
}

/* Full desktop nav (6 top-level items + dropdown + lang switcher + CTA) needs a
   wide row (~1200px of content); below this it can't fit on one line, so the
   burger takes over before the nav would wrap or overflow horizontally. */
@media (max-width: 1240px) {
    .site-header .site-header__nav,
    .site-header .site-header__login,
    .site-header .site-header__cta,
    .site-header .lang-switcher {
        display: none !important;
    }

    .site-header .site-header__burger {
        display: inline-flex;
    }

    .site-header {
        height: var(--header-height-mobile);
    }

    .site-header .site-header__drawer {
        top: var(--header-height-mobile);
        max-height: calc(100vh - var(--header-height-mobile));
    }
}

@media (max-width: 720px) {
    .docs-shell {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-4);
        margin: 0 auto var(--space-6);
    }

    .docs-sidebar {
        position: static;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-3) 0;
    }

    .site-header__nav {
        gap: var(--space-3);
    }

    .article__title {
        font-size: var(--fs-3xl);
    }

    .listing__title {
        font-size: var(--fs-3xl);
    }

    .docs-page {
        padding: 0;
    }

    .docs-prevnext {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .docs-prevnext__link--next {
        grid-column: 1;
    }
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.75rem 1.25rem;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast);
    cursor: pointer;
    text-decoration: none;
    letter-spacing: -0.005em;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn--primary {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

.btn--primary:hover {
    background: var(--color-accent-hover);
    color: white;
}

.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.btn--ghost:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: var(--color-accent-muted);
}

/* --- Landing layout ------------------------------------------------------ */
.layout-landing .site-main {
    padding: 0;
}

/* Hero — shares geometry with the .gn-hero base (position/overflow/color/min-height);
   this rule only declares what's .hero-specific. */
.hero {
    background: linear-gradient(180deg, #0b1220 0%, #111827 100%);
    margin-top: calc(-1 * var(--header-height));
    /* full-bleed for the background; the inner container insets the content to the site grid */
    padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-9);
    /* default min height; overridable per-instance via the `minHeight` trait (emitted inline).
       center the content vertically so it doesn't stick to the top of a tall hero.
       taller default so the (now image-backed) hero has real presence, capped so it
       never dwarfs the content on very tall viewports */
    min-height: clamp(32rem, 78vh, 52rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero__container {
    position: relative;
    z-index: 1;
    /* fill to max-width then center — width:100% is needed because .hero is a flex
       column and margin:auto on a flex item disables the stretch, which otherwise
       leaves this grid at an intrinsic width and pushes the copy off the page grid
       (so the headline no longer lines up with the header logo edge). */
    width: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: grid;
    grid-template-columns: minmax(0, var(--hero-text-fr, 1.15fr)) minmax(0, var(--hero-media-fr, 1fr));
    gap: var(--space-7);
    align-items: center;
}

.hero > * {
    position: relative;
    z-index: 1;
    max-width: var(--container-wide);
}

.hero__inner {
    max-width: 36rem;
}

.hero__eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-accent-soft);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-4);
}

.hero__headline {
    font-size: var(--fs-fluid-lg);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: var(--fw-extrabold);
    margin-bottom: var(--space-4);
    color: #fff;
}

.hero__sub {
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    color: var(--on-dark-strong);
    margin-bottom: var(--space-6);
    max-width: 34rem;
}

.hero .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.hero .btn--ghost:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.05);
}

.hero__ctas {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.hero__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 26rem;
    width: 100%;
}

.hero__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, var(--color-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
}

.hero__pulse {
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Hero — amber brand variant (matches the use-cases split hero: eyebrow-bar + amber CTA) */
.hero--amber .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    letter-spacing: 0.12em;
    color: var(--gn-accent);
}

.hero--amber .hero__eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.6rem;
    height: 3px;
    border-radius: 2px;
    background: var(--gn-accent);
}

.hero--amber .btn--primary {
    background: var(--gn-accent);
    color: var(--color-text);
    border-color: var(--gn-accent);
}

.hero--amber .btn--primary:hover {
    background: var(--gn-accent-dark);
    border-color: var(--gn-accent-dark);
    color: var(--color-text);
}

.hero--amber .hero__pulse {
    background: radial-gradient(circle, color-mix(in srgb, var(--gn-accent) 32%, transparent), transparent 70%);
}

/* Hero — background-image variant (full-bleed image + overlay, like the use-cases hero); orbit visual is auto-hidden in the template when an image is set */
.hero--bg {
    background: var(--gn-ink, #101820);
}

.hero--bg .hero__bg, .hero--bg .hero__overlay {
    position: absolute;
    inset: 0;
    max-width: none;
    z-index: 0;
}

.hero--bg .hero__bg {
    background-size: cover;
    background-position: center;
}

.hero--bg .hero__overlay {
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(11, 18, 32, 0.94) 0%, rgba(11, 18, 32, 0.66) 46%, rgba(11, 18, 32, 0.28) 100%),
        linear-gradient(0deg, rgba(11, 18, 32, 0.5) 0%, rgba(11, 18, 32, 0) 40%);
}

/* Keep headline + body crisp on bright/busy photos */
.hero--bg .hero__inner {
    text-shadow: 0 1px 24px rgba(8, 12, 22, 0.45);
}

/* Simple variant — a clean single-column page header for content pages
   (Kontakt, Impressum, Datenschutz …): the shorter shared hero height, no
   decorative orbit visual, wider single copy column. */
.hero--simple {
    min-height: var(--hero-min-height);
}

.hero--simple .hero__container {
    grid-template-columns: 1fr;
}

.hero--simple .hero__inner {
    max-width: 52rem;
}

.hero--simple .hero__visual {
    display: none;
}

/* Align modifier — center the hero copy (single column, like the home hero).
   Default (no modifier) stays left-aligned to the page grid / logo edge. */
.hero--center .hero__container {
    grid-template-columns: 1fr;
    justify-items: center;
}

.hero--center .hero__inner {
    max-width: 56rem;
    text-align: center;
}

.hero--center .hero__ctas {
    justify-content: center;
}

.hero--center .hero__visual {
    display: none;
}

/* Hero video media — fills the visual column. Click-to-play shows the poster +
   an accent play button; autoplay variants play muted/looped (no button). */
.hero__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #0b1220;
    box-shadow: var(--shadow-md);
}

.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-brand-yellow);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 34px rgba(8, 12, 22, 0.45);
    transition: transform 0.15s ease, background 0.15s ease;
}

.hero__play:hover {
    transform: scale(1.07);
    background: var(--color-brand-yellow-dark);
}

.hero__play svg {
    width: 1.9rem;
    height: 1.9rem;
    margin-left: 0.18rem;   /* optical centering of the play triangle */
}

/* Click-to-play media is a button that opens the lightbox (assets/js/35-hero-video.js). */
.hero__media--modal {
    cursor: pointer;
}

.hero__media--modal:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Hero media holding a Lottie animation instead of a video. Transparent (no dark
   video plate / shadow / clipping) so a Lottie with alpha floats over the hero;
   the [data-gn-lottie] player is driven by 60-lottie.js (published) /
   initCanvasLottie (editor). */
.hero__media--lottie {
    background: transparent;
    box-shadow: none;
    overflow: visible;
    /* Direct size control (video uses the column-ratio classes; a Lottie is sized
       here so "Lottie-Größe" is clearly visible). Centered in its media column. */
    max-width: 78%;
    margin-inline: auto;
}

.hero--lottie-sm .hero__media--lottie {
    max-width: 50%;
}

.hero--lottie-lg .hero__media--lottie {
    max-width: 100%;
}

.hero__lottie {
    width: 100%;
    height: 100%;
}

.hero__lottie > svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Content media mode: the media column is a free drop zone (no dark video plate /
   fixed 16:10 box) — dropped blocks flow and drive the height. */
.hero__media--content {
    background: transparent;
    box-shadow: none;
    overflow: visible;
    aspect-ratio: auto;
    min-height: 4rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    justify-content: center;
}

/* Editor-only empty-state hint (the [data-gn-ph] attr is emitted by the editor
   renderer, not by the published hero.sbn, so it never shows on the live page). */
.hero__media--content[data-gn-ph]:empty::before {
    content: attr(data-gn-ph);
    display: block;
    padding: var(--space-6);
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-lg);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: var(--fs-sm);
}

/* Video on the left, copy on the right (default = copy-left / media-right). */
.hero--media-left .hero__container {
    grid-template-columns: minmax(0, var(--hero-media-fr, 1fr)) minmax(0, var(--hero-text-fr, 1.15fr));
}

.hero--media-left .hero__media {
    order: -1;
}

/* Video size presets — adjust the text:video column ratio. S = small video,
   L = video larger than the copy (like the old site). Medium is the default
   (no class). Works on either side via the shared --hero-*-fr custom props. */
.hero--video-sm .hero__container {
    --hero-text-fr: 1.6fr;
    --hero-media-fr: 1fr;
}

.hero--video-lg .hero__container {
    --hero-text-fr: 1fr;
    --hero-media-fr: 1.4fr;
}

@media (max-width: 820px) {
    /* Stack on mobile: copy on top, video below — even in the media-left layout. */
    .hero--media-left .hero__media {
        order: 0;
    }
}

/* Hero video lightbox — full-screen modal with a dark backdrop; the video fills
   90% of the viewport on desktop, 100% on mobile. Built + toggled by
   assets/js/35-hero-video.js (one shared element, reused per hero). */
.gn-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.gn-video-modal.is-open {
    display: flex;
}

.gn-video-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 22, 0.82);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.gn-video-modal__dialog {
    position: relative;
    z-index: 1;
    width: 90vw;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gn-video-modal__frame {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gn-video-modal__video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(8, 12, 22, 0.55);
    background: #000;
}

.gn-video-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(8, 12, 22, 0.55);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gn-video-modal__close:hover {
    background: rgba(8, 12, 22, 0.85);
}

@media (max-width: 820px) {
    .gn-video-modal__dialog {
        width: 100vw;
        height: 100vh;
    }

    .gn-video-modal__video {
        border-radius: 0;
    }
}

/* Stats */
.stats {
    background: var(--color-bg-muted);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-5);
}

.stats__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-5);
}

.stat {
    text-align: center;
}

.stat__value {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.03em;
    color: var(--color-accent);
    line-height: 1;
}

.stat__label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

/* Features */
.features {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--space-9) var(--space-5);
}

.features__head {
    max-width: 40rem;
    margin: 0 auto var(--space-7);
    text-align: center;
}

.features__title {
    font-size: var(--fs-fluid-md);
    letter-spacing: -0.03em;
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-3);
}

.features__sub {
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-5);
}

.feature {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    transition: border-color var(--trans-base), transform var(--trans-base), box-shadow var(--trans-base);
}

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

.feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-accent-muted);
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.feature__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-2);
}

.feature__body {
    color: var(--color-text-muted);
    line-height: var(--lh-base);
    font-size: var(--fs-sm);
}

/* CTA */
.cta {
    background: linear-gradient(135deg, var(--color-accent-muted), color-mix(in srgb, var(--color-accent) 10%, transparent));
    border-top: 1px solid var(--color-border);
    padding: var(--space-8) var(--space-5);
}

.cta__inner {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.cta__headline {
    font-size: var(--fs-fluid-md);
    letter-spacing: -0.03em;
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-3);
}

.cta__body {
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
    margin-bottom: var(--space-5);
}

.cta__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 820px) {
    .hero {
        padding: calc(var(--header-height-mobile) + var(--space-7)) 0 var(--space-8);
    }

    .hero__container {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .hero__visual {
        display: none;
    }

    .hero--bg .hero__overlay {
        background: linear-gradient(180deg, rgba(11, 18, 32, 0.6) 0%, rgba(11, 18, 32, 0.9) 100%);
    }

    .features, .cta {
        padding: var(--space-7) var(--space-5);
    }
}

/* --- Testimonial -------------------------------------------------------- */
.testimonial {
    padding: var(--space-8) var(--space-6);
}

.testimonial__inner {
    max-width: 52rem;
    margin: 0 auto;
    text-align: center;
}

.testimonial__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.testimonial__quote {
    font-size: var(--fs-xl);
    font-weight: var(--fw-standard);
    line-height: 1.4;
    margin: 0 0 var(--space-5);
    border: 0;
    padding: 0;
}

.testimonial__quote::before {
    content: '\201C';
}

.testimonial__quote::after {
    content: '\201D';
}

.testimonial__attribution {
    display: inline-flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
}

.testimonial__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial__author {
    font-weight: var(--fw-semibold);
}

.testimonial__role {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* --- Pricing ------------------------------------------------------------ */
.pricing {
    padding: var(--space-8) var(--space-6);
}

.pricing__head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto var(--space-7);
}

.pricing__title {
    font-size: var(--fs-2xl);
    margin: 0 0 var(--space-3);
}

.pricing__sub {
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
}

.pricing__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-5);
}

.pricing-tier {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-tier--featured {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(90, 180, 255, 0.12);
}

.pricing-tier__badge {
    position: absolute;
    top: -0.6rem;
    right: var(--space-5);
    background: var(--color-accent);
    color: var(--color-bg);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}

.pricing-tier__name {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-lg);
}

.pricing-tier__price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: var(--space-3);
}

.pricing-tier__amount {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
}

.pricing-tier__cadence {
    color: var(--color-text-muted);
}

.pricing-tier__desc {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
    font-size: var(--fs-sm);
}

.pricing-tier__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    font-size: var(--fs-sm);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pricing-tier__features li::before {
    content: '\2713  ';
    color: var(--color-accent);
}

.pricing-tier__cta {
    margin-top: auto;
    align-self: stretch;
    text-align: center;
}

/* --- FAQ ---------------------------------------------------------------- */
.faq {
    padding: var(--space-8) var(--space-6);
}

.faq__head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto var(--space-6);
}

.faq__title {
    font-size: var(--fs-2xl);
    margin: 0 0 var(--space-3);
}

.faq__sub {
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
}

.faq__list {
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
}

.faq-item[open] {
    border-color: var(--color-accent);
}

.faq-item__question {
    cursor: pointer;
    padding: var(--space-4) var(--space-5);
    font-weight: var(--fw-semibold);
    list-style: none;
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

.faq-item__question::after {
    content: '+';
    float: right;
    font-weight: var(--fw-standard);
    color: var(--color-text-muted);
}

.faq-item[open] .faq-item__question::after {
    content: '\2212';
}

.faq-item__answer {
    padding: 0 var(--space-5) var(--space-4);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* --- Team --------------------------------------------------------------- */
.team {
    padding: var(--space-8) var(--space-6);
}

.team__head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto var(--space-6);
}

.team__title {
    font-size: var(--fs-2xl);
    margin: 0 0 var(--space-3);
}

.team__sub {
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
}

.team__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-5);
}

.team-member {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
}

.team-member__photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--space-3);
    display: block;
}

.team-member__name {
    margin: 0 0 0.25rem;
    font-size: var(--fs-lg);
}

.team-member__role {
    color: var(--color-accent);
    font-size: var(--fs-sm);
    margin: 0 0 var(--space-3);
}

.team-member__bio {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin: 0 0 var(--space-3);
}

.team-member__link {
    font-size: var(--fs-sm);
    color: var(--color-accent);
    text-decoration: none;
}

.team-member__link:hover {
    text-decoration: underline;
}

/* --- Newsletter --------------------------------------------------------- */
.newsletter {
    padding: var(--space-8) var(--space-6);
}

.newsletter__inner {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.newsletter__title {
    font-size: var(--fs-2xl);
    margin: 0 0 var(--space-3);
}

.newsletter__sub {
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
    margin-bottom: var(--space-5);
}

.newsletter__form {
    display: flex;
    gap: var(--space-2);
    max-width: 30rem;
    margin: 0 auto;
    flex-wrap: wrap;
}

.newsletter__field {
    flex: 1 1 14rem;
}

.newsletter__field input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
    color: var(--color-text);
}

.newsletter__status {
    flex-basis: 100%;
    margin: var(--space-2) 0 0;
    font-size: var(--fs-sm);
}

.newsletter__disclaimer {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    margin-top: var(--space-3);
}

/* --- Contact form ------------------------------------------------------- */
.contact {
    padding: var(--space-8) var(--space-6);
}

.contact__head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto var(--space-6);
}

.contact__title {
    font-size: var(--fs-2xl);
    margin: 0 0 var(--space-3);
}

.contact__sub {
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
}

.contact__form {
    max-width: 42rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.contact__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--fs-sm);
}

.contact__field > span {
    color: var(--color-text-muted);
}

.contact__field input, .contact__field textarea {
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--fs-base);
}

.contact__submit {
    align-self: flex-start;
    margin-top: var(--space-2);
}

.contact__status {
    font-size: var(--fs-sm);
    margin: var(--space-2) 0 0;
}

[data-gn-status].is-success {
    color: var(--color-accent);
}

[data-gn-status].is-error {
    color: var(--color-danger);
}

/* --- Lottie ------------------------------------------------------------- */
.lottie {
    padding: var(--space-7) var(--space-6);
}

.lottie__inner {
    text-align: center;
}

.lottie__title {
    font-size: var(--fs-2xl);
    margin: 0 0 var(--space-4);
}

.lottie__caption {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    margin-top: var(--space-3);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .contact__row {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================
   Insights — light theme (ported from WordPress gridnow-insights plugin)
   Scoped to body.gn-insights-article-view / .gn-insights-archive-view so the
   dark site shell isn't affected.
   ======================================================================== */

.gn-insights-article-view,
.gn-insights-archive-view {
    --gn-accent: var(--color-accent);
    --gn-border: #e5e7eb;
    --gn-muted: var(--color-text-muted);
    --gn-surface: var(--color-bg-muted);
    --gn-text: var(--color-text);
    background: #fff;
    color: var(--gn-text);
}

/* Archive (listing) sits on the default light grey so the white cards lift off it. */
.gn-insights-archive-view {
    background: var(--color-bg-muted);
}

.gn-insights-article-view .site-main,
.gn-insights-archive-view .site-main {
    padding: 0;
}

/* ── Archive ──────────────────────────────────────────────────────────── */
.gn-insights-archive {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 2rem var(--space-5) 4rem;
    font-family: var(--font-body, inherit);
}

.gn-insights-header {
    margin-bottom: 2rem;
}

.gn-insights-header h1 {
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-bold);
    margin: 0 0 0.5rem;
    color: var(--gn-text);
}

/* ── Search hero (Insights archive only) ──────────────────────────────── */
.gn-insights-hero {
    position: relative;
    color: #fff;
    min-height: var(--hero-min-height);
    background-color: #0b1220;
    background-image: linear-gradient(180deg, rgba(11, 18, 32, 0.5) 0%, rgba(11, 18, 32, 0.8) 100%), var(--gn-hero-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gn-insights-hero__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 6rem) var(--space-5) clamp(2.5rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.gn-insights-hero__title {
    font-size: var(--fs-fluid-lg);
    font-weight: var(--fw-extrabold);
    margin: 0;
    color: #fff;
    line-height: 1.1;
}

.gn-insights-hero__subtitle {
    margin: 0;
    max-width: 42ch;
    color: var(--on-dark-strong);
    font-size: var(--fs-base);
    line-height: 1.6;
}

/* Search bar — a floating white "pill" that straddles the hero's bottom edge
   (~half protrudes up into the hero) via a negative margin, then sticks just
   below the (sticky) site header on scroll so it never slides off the top. */
.gn-insights-searchbar {
    /* Not sticky. Negative top straddles the hero's bottom edge; position+z-index
       keep it ABOVE the (relatively-positioned) hero instead of behind it. */
    position: relative;
    z-index: 1;
    margin-top: -10rem;
}

.gn-insights-searchbar__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    /* Align the search bar with the card grid (same side padding). */
    padding: 0 var(--space-5);
}

/* The search box: white, semi-rounded, flat (no drop shadow); bare input + button. */
/* Plain white search box (input + button) — aligned with the page, no frame. */
.gn-insights-search {
    display: flex;
    width: 100%;
}

.gn-insights-search__field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 0.45rem;
}

.gn-insights-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius-md);
    padding: 0.7rem 1.25rem;
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--color-text);
}

.gn-insights-search__input::placeholder {
    color: var(--color-text-subtle);
}

.gn-insights-search__input:focus {
    outline: none;
}

.gn-insights-search__btn {
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-md);
    padding: 0.7rem clamp(1.25rem, 3vw, 2.1rem);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    font-family: inherit;
    color: #fff;
    background: var(--gn-accent);
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.gn-insights-search__btn:hover {
    opacity: 0.92;
}

.gn-insights-search__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

@media (max-width: 560px) {
    .gn-insights-searchbar {
        margin-top: -4rem;
    }

    .gn-insights-search__field {
        flex-direction: column;
        align-items: stretch;
    }

    .gn-insights-search__input, .gn-insights-search__btn {
        border-radius: var(--radius-md);
    }
}

/* Pagination — dark squared buttons, active page in accent (matches app UI). */
.gn-insights-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin: var(--space-6) 0 0;
}

.gn-insights-pager__btn {
    min-width: 40px;
    height: 40px;
    padding: 0 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-md);
    background: #1f2937;
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.gn-insights-pager__btn:hover:not(:disabled):not(.is-active) {
    background: #374151;
}

.gn-insights-pager__btn.is-active {
    background: var(--color-accent);
    cursor: default;
}

.gn-insights-pager__btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.gn-insights-pager__gap {
    align-self: center;
    padding: 0 0.15rem;
    color: var(--color-text-muted);
}

/* Spacing below the floating pill, above the card grid. */
.gn-insights-searchbar + .gn-insights-archive {
    padding-top: clamp(1rem, 2.5vw, 2rem);
}

/* Active-search state: hide the tag filter; show a result-count line. */
.gn-insights-archive.is-searching .gn-insights-tags {
    display: none;
}

.gn-insights-results__status {
    margin: 0 0 1.5rem;
    color: var(--gn-muted);
    font-size: var(--fs-base);
}

.gn-insights-subtitle {
    color: var(--gn-muted);
    font-size: var(--fs-base);
    margin: 0;
    line-height: 1.6;
}

.gn-insights-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

/* Filter pills mirror the card category badges: solid colour, white text, 8px
   radius, no border. The per-tag colour is set inline (style="background:…")
   from the same TagPill.Color the card badges use, so a filter reads as the
   badge for that category. Unselected pills dim back so the active one stands
   out; the search JS toggles .is-active by data-tag. */
.gn-insights-tag-pill {
    display: inline-block;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-standard);
    line-height: 1.4;
    color: #fff;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--color-accent);
    opacity: 0.6;
    text-decoration: none;
    transition: opacity 0.12s ease, box-shadow 0.12s ease;
}

.gn-insights-tag-pill:hover {
    opacity: 0.85;
}

.gn-insights-tag-pill.is-active {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.gn-insights-tag-pill:focus-visible {
    outline: none;
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

/* Cards mirror the homepage insights-feed cards (rounded, image-zoom on hover,
   no lift). On this WHITE archive page they use white + a soft shadow for
   definition (the feed's paper-on-dark wouldn't read on white). */
.gn-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-5);
    align-items: stretch;
}

.gn-insights-card {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
}

.gn-insights-card:hover {
    text-decoration: none;
}

.gn-insights-card.featured {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
}

.gn-insights-card.featured .gn-insights-card-image {
    width: 48%;
    min-height: 320px;
    flex-shrink: 0;
    aspect-ratio: auto;
}

.gn-insights-card.featured .gn-insights-card-body {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    justify-content: center;
    gap: 0.9rem;
}

.gn-insights-card.featured .gn-insights-card-title {
    font-size: var(--fs-fluid-sm);
}

.gn-insights-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e5e9ef;
}

.gn-insights-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gn-insights-card:hover .gn-insights-card-image img {
    transform: scale(1.06);
}

.gn-insights-card-body {
    padding: var(--space-5) var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.6rem;
}

/* Tags render as solid filled badges over the top-left of the card image. */
.gn-insights-card-tags {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 2;
    display: flex;
    gap: 0.5rem;
    margin: 0;
    flex-wrap: wrap;
}

.gn-insights-card-tag {
    font-size: var(--fs-sm);
    font-weight: var(--fw-standard);
    color: #fff;
    line-height: 1.4;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--color-accent);
}

.gn-insights-card-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    margin: 0;
    color: var(--color-text);
    line-height: 1.25;
}

.gn-insights-card-excerpt {
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.gn-insights-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--gn-muted);
    margin-top: 0.4rem;
}

.gn-insights-card-meta > span:not(:last-child)::after {
    content: '·';
    margin-left: 0.5rem;
}

.gn-insights-card-author {
    font-weight: var(--fw-semibold);
}

.gn-insights-empty {
    color: var(--gn-muted);
    font-style: italic;
    text-align: center;
    padding: 4rem 0;
}

/* ── Article ──────────────────────────────────────────────────────────── */
.gn-insight-single {
    font-family: var(--font-body, inherit);
}

/* Article DETAIL view = light-grey "desk"; everything below the full-bleed hero sits on a
   white sheet (.gn-insight-body). Scoped to this body class so listings/other pages stay white. */
body.gn-insights-article-view {
    background: var(--color-bg-muted);
}

.gn-insight-hero {
    width: 100%;
    min-height: 20vh;
    background-size: cover;
    background-position: center;
    background-color: #1a1a2e;
    position: relative;
    margin-top: calc(-1 * var(--header-height));
}

.gn-insight-hero-overlay {
    background: rgba(29, 35, 49, 0.75);
    min-height: calc(20vh + var(--header-height));
    display: flex;
    align-items: flex-end;
    padding-top: var(--header-height);
}

.gn-insight-hero-content {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 6rem var(--space-5) 4rem;
    width: 100%;
    color: #fff;
    font-weight: var(--fw-standard);
}

/* Hero meta row: tags + date + reading time on a single line (matches legacy layout). */
.gn-insight-hero-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}

.gn-insight-hero-line .gn-insight-hero-tags,
.gn-insight-hero-line .gn-insight-hero-meta {
    margin-bottom: 0;
}

.gn-insight-hero-tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.gn-insight-hero-tag {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-standard);
    background: var(--gn-accent);
    color: #fff;
}

.gn-insight-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--on-dark-strong);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-standard);
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    margin-bottom: 1.25rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.gn-insight-back:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.gn-insight-hero-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: var(--fs-base);
    font-weight: var(--fw-standard);
    color: #fff;
    margin-bottom: 1rem;
}

.gn-insight-hero-date,
.gn-insight-hero-readtime {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.gn-insight-hero-meta svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.gn-insight-hero-title {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-standard);
    line-height: 1.4;
    margin: 16px 0;
    color: #fff;
}

.gn-insight-hero-author {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: #fff;
}

.gn-insight-author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-dark-muted);
    margin-right: 16px;
}

.gn-insight-body {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-7);
    padding-left: var(--space-6);
    padding-top: var(--space-6);
    align-items: start;
    max-width: var(--container-wide);
    /* white "sheet" floating on the light-grey article-view body */
    margin: 0 auto var(--space-8);
    background: var(--color-bg-elevated);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    /*box-shadow: var(--shadow-md);*/
}

.gn-insight-sidebar {
    position: sticky;
    top: 7rem;
    padding-top: 1rem;
    padding-right: var(--space-5);
    border-right: 1px solid var(--color-border);
}

.gn-insight-toc {
    font-size: var(--fs-sm);
}

.gn-insight-toc-title {
    display: block;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--gn-text);
    text-decoration: none;
    margin-bottom: 0.75rem;
    line-height: 1.35;
}

.gn-insight-toc-title:hover {
    color: var(--gn-accent);
}

.gn-insight-toc-links {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-left: var(--space-3);
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-border);
}

.gn-insight-toc-links a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-standard);
    line-height: var(--lh-snug);
    text-decoration: none;
    transition: color var(--trans-fast), background var(--trans-fast);
}

.gn-insight-toc-links a:hover {
    color: var(--color-text);
    background: var(--color-bg-muted);
    text-decoration: none;
}

.gn-insight-toc-links a.active {
    color: var(--color-accent);
    background: var(--color-accent-muted);
    font-weight: var(--fw-semibold);
}

.gn-insight-toc-links a.gn-docs-toc-sub {
    padding-left: var(--space-5);
    font-size: var(--fs-sm);
}

.gn-insight-share {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gn-border);
}

.gn-insight-share-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--gn-text);
    margin-bottom: 0.6rem;
}

.gn-insight-share-icons {
    display: flex;
    gap: 0.5rem;
}

.gn-insight-share-icons a,
.gn-insight-share-icons button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--gn-border);
    background: #fff;
    color: var(--gn-muted);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}

.gn-insight-share-icons a:hover,
.gn-insight-share-icons button:hover {
    border-color: var(--gn-accent);
    color: var(--gn-accent);
}

.gn-insight-content {
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    min-width: 0;
}

.gn-insight-content h1,
.gn-insight-content h2,
.gn-insight-content h3,
.gn-insight-content h4,
.gn-insight-content h5,
.gn-insight-content h6 {
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--color-text);
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.gn-insight-content h1 {
    font-size: var(--fs-3xl);
    margin: var(--space-7) 0 var(--space-3);
}

.gn-insight-content h1:first-child {
    margin-top: 0;
}

.gn-insight-content h2 {
    font-size: var(--fs-2xl);
    margin: var(--space-7) 0 var(--space-3);
    padding-top: var(--space-2);
}

.gn-insight-content h3 {
    font-size: var(--fs-xl);
    margin: var(--space-6) 0 var(--space-2);
}

.gn-insight-content h4 {
    font-size: var(--fs-lg);
    margin: var(--space-5) 0 var(--space-2);
}

.gn-insight-content h5 {
    font-size: var(--fs-base);
    margin: var(--space-5) 0 var(--space-2);
}

.gn-insight-content h6 {
    font-size: var(--fs-sm);
    margin: var(--space-4) 0 var(--space-2);
}

.gn-insight-content p {
    margin: 0 0 1rem;
}

.gn-insight-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

.gn-insight-content a {
    color: var(--gn-accent);
}

.gn-insight-content blockquote {
    border-left: 3px solid var(--gn-accent);
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    color: var(--gn-muted);
    background: var(--gn-surface);
    border-radius: 0 6px 6px 0;
}

.gn-insight-content ul, .gn-insight-content ol {
    margin: 0 0 1rem;
}

.gn-insight-content li {
    margin-bottom: 0.35rem;
}

.gn-insight-content code {
    background: var(--gn-surface);
    padding: 0.15em 0.35em;
    border-radius: 4px;
    font-size: 0.9em;
}

.gn-insight-content pre {
    background: #1e293b;
    color: var(--color-code-text);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
}

.gn-insight-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.gn-insight-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.gn-insight-content th, .gn-insight-content td {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--gn-border);
    text-align: left;
}

.gn-insight-content th {
    background: var(--gn-surface);
    font-weight: var(--fw-semibold);
}

.gn-insight-content em {
    font-style: italic;
}

.gn-insight-content strong {
    color: var(--gn-text);
}

/* Image credits ("Bildreferenzen") — fine print on the article desk, sits between the
   white body sheet and the related grid. Left-aligned + muted, matches related container. */
.gn-insight-credits {
    /* Sits at the foot of the article content INSIDE the white sheet, separated from
       the body by a divider (moved here from the grey desk below the sheet). */
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-text-subtle);
}

.gn-insight-credits-label {
    display: block;
    font-weight: var(--fw-semibold);
    margin-bottom: 0.25rem;
    color: var(--color-text-muted);
}

.gn-insight-credits-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gn-insight-credits-list li {
    font-style: italic;
}

.gn-insight-related {
    max-width: var(--container-wide);
    margin: 1rem auto 0;
    padding: 2rem 0;
}

.gn-insight-related h3 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    text-align: left;
    margin: 0 0 1.5rem;
    color: var(--gn-text);
}

.gn-insight-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.gn-insight-related-card {
    position: relative;
    display: block;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #1a1a2e;
    text-decoration: none;
    color: #fff;
    transition: transform 0.2s;
}

.gn-insight-related-card:hover {
    transform: scale(1.01);
}

.gn-insight-related-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
}

.gn-insight-related-tags {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.gn-insight-related-tag {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    background: var(--gn-accent);
    color: #fff;
}

.gn-insight-related-overlay h4 {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    margin: 0;
    line-height: 1.3;
    color: #fff;
}

@media (max-width: 900px) {
    .gn-insight-body {
        grid-template-columns: 1fr;
        padding: var(--space-5);
        gap: 1.5rem;
        margin: var(--space-5) var(--space-4) var(--space-6);
        border-radius: var(--radius-md);
    }

    .gn-insight-sidebar {
        position: static;
        order: 2;
        border-top: 1px solid var(--gn-border);
        border-right: none;
        padding-top: 1.5rem;
        padding-right: 0;
        margin-top: 2rem;
    }

    .gn-insight-content {
        order: 1;
    }

    .gn-insight-related-grid {
        grid-template-columns: 1fr;
    }

    /* Keep related aligned with the card's mobile inset (margin var(--space-4) + padding var(--space-5)). */
    .gn-insight-related {
        margin-left: var(--space-4);
        margin-right: var(--space-4);
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .gn-insight-hero-title {
        font-size: var(--fs-2xl);
    }

    .gn-insight-hero-content {
        padding: calc(var(--header-height-mobile) + 3rem) 1.5rem 3rem;
    }

    .gn-insights-card.featured {
        flex-direction: column;
    }

    .gn-insights-card.featured .gn-insights-card-image {
        width: 100%;
        min-height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 600px) {
    .gn-insights-grid {
        grid-template-columns: 1fr;
    }

    .gn-insights-archive {
        padding: 1rem 1rem 3rem;
    }

    .gn-insight-hero-title {
        font-size: var(--fs-fluid-sm);
    }

    .gn-insight-hero-content {
        padding: calc(var(--header-height-mobile) + 2rem) 1rem 2.5rem;
    }
}

/* --- Figma Landing Blocks ----------------------------------------------- */
.gn-heroprev {
    /* position/overflow/color from the shared .gn-hero base */
    background: #1d2331;
    margin-top: calc(-1 * var(--header-height));
    /* taller marketing-hero default; overridable per-instance via the `minHeight` trait (emitted inline) */
    min-height: var(--hero-min-height-tall);
}

.gn-heroprev__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
}

.gn-heroprev__bg--pattern {
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 70%), #1d2331;
}

.gn-heroprev__inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: calc(var(--header-height) + 4rem) 1.5rem clamp(180px, 28vw, 360px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.gn-heroprev__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding-top: 2rem;
}

.gn-heroprev__eyebrow {
    color: var(--on-dark-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.gn-heroprev__title {
    font-size: var(--fs-fluid-lg);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    margin: 0;
    color: #fff;
}

.gn-heroprev__sub {
    font-size: var(--fs-xl);
    font-weight: var(--fw-standard);
    line-height: 1.2;
    color: var(--on-dark-strong);
    margin: 0;
    max-width: 732px;
}

.gn-heroprev__cta {
    margin-top: 0.5rem;
}

.gn-heroprev__frame {
    width: 100%;
    max-width: 1232px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05), 0 0 16px rgba(0, 0, 0, 0.15);
    background: #fff;
}

.gn-heroprev__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gn-heroprev__desc {
    max-width: 732px;
    text-align: center;
    font-size: var(--fs-xl);
    font-weight: var(--fw-standard);
    line-height: 1.2;
    color: var(--color-text);
    background: #fff;
    margin: 0;
    padding: 2rem 1.5rem;
    border-radius: 8px;
}

.gn-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 2rem 1rem;
}

.gn-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-lg);
    line-height: 1.2;
    color: var(--color-text);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.gn-tab:hover {
    background: #e6e6e6;
    color: var(--color-text);
}

.gn-tab.is-active, .gn-tab.is-active:hover {
    background: #000;
    color: #fff;
    font-weight: var(--fw-semibold);
}

.gn-principles {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.gn-principles::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    background: var(--color-bg-muted);
    z-index: -1;
}

.gn-principles__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: end;
    margin-bottom: 3rem;
}

.gn-principles__eyebrow {
    grid-column: 1;
    color: var(--color-accent);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    margin-bottom: 0.5rem;
}

.gn-principles__title {
    grid-column: 1;
    grid-row: 2;
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    margin: 0;
    color: var(--color-text);
}

.gn-principles__lead {
    grid-column: 2;
    grid-row: 2;
    color: var(--color-text-muted);
    margin: 0;
    font-size: var(--fs-base);
}

.gn-principles__head .btn {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    white-space: nowrap;
}

.gn-principles__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.gn-principles__item {
    padding: 2rem 1.5rem;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gn-principles__item:first-child {
    border-left: 0;
}

.gn-principles__icon img {
    width: 48px;
    height: 48px;
}

.gn-principles__name {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    margin: 0;
    color: var(--color-text);
}

.gn-principles__desc {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.gn-featurelist {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.gn-featurelist--reverse {
    direction: rtl;
}

.gn-featurelist--reverse > * {
    direction: ltr;
}

.gn-featurelist__media {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f1f5f9;
}

.gn-featurelist__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gn-featurelist__body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gn-featurelist__eyebrow {
    color: var(--color-accent);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
}

.gn-featurelist__title {
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    margin: 0;
    color: var(--color-text);
}

.gn-featurelist__rows {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gn-featurelist__row-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    margin: 0 0 0.25rem;
    color: var(--color-text);
}

.gn-featurelist__row-body {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.gn-partner {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 4rem max(1.5rem, calc((100vw - 1280px) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 480px;
    align-items: center;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.gn-partner__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, #2a3344 0%, #1a1f2e 100%);
}

.gn-partner__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.65) 100%);
}

.gn-partner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gn-partner__logo {
    position: absolute;
    bottom: 1.5rem;
    left: max(1.5rem, calc((100vw - 1280px) / 2 + 1.5rem));
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 6px;
    z-index: 1;
    color: #fff;
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.12em;
}

.gn-partner__logo img {
    height: 36px;
    width: auto;
}

.gn-partner__logo--text {
    font-size: var(--fs-base);
}

.gn-partner__panel {
    position: relative;
    justify-self: end;
    width: min(760px, 100%);
}

.gn-partner__card {
    position: relative;
    z-index: 1;
    width: 100%;
    background: #fff;
    color: var(--color-text);
    padding: 6rem 3rem 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.30));
    /* speech-bubble: angled (cut) top-left edge + downward tail near bottom-right */
    clip-path: polygon(
            0% 3.75rem,
            100% 0%,
            100% calc(100% - 2.5rem),
            85% calc(100% - 2.5rem),
            80% 100%,
            75% calc(100% - 2.5rem),
            0 calc(100% - 2.5rem)
    );
}

.gn-partner__cardlogo {
    margin-top: 0.75rem;
}

.gn-partner__cardlogo img {
    height: 46px;
    width: auto;
    display: block;
}

.gn-partner__cardlogo--text {
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.12em;
    color: #c8102e;
}

.gn-partner__eyebrow {
    position: absolute;
    top: 1.25rem;
    left: 0.25rem;
    z-index: 2;
    color: var(--color-accent);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
}

.gn-partner__eyebrow:empty {
    display: none;
}

.gn-partner__title {
    font-size: var(--fs-fluid-sm);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    margin: 0;
    color: var(--color-text);
}

.gn-partner__text {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
}

.gn-partner--nophoto .gn-partner__media {
    background: linear-gradient(135deg, var(--color-accent) 0%, #1a1f2e 100%);
}

.gn-demo {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow: hidden;
}

.gn-demo__top {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 2.5rem;
    align-items: center;
}

.gn-demo__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gn-demo__eyebrow {
    color: var(--color-accent);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
}

.gn-demo__title {
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    margin: 0;
    color: var(--color-text);
}

.gn-demo__lead {
    font-weight: var(--fw-semibold);
    margin: 0;
    color: var(--color-text);
}

.gn-demo__text {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.gn-demo__body .btn {
    align-self: flex-start;
}

/* Large dashboard preview: keeps natural aspect, gets a 0.5rem translucent frame,
   and is sized larger than its grid track so it bleeds to the right and is clipped
   by .gn-demo's overflow:hidden (legacy gridnow.com demo look). min-width:0 keeps
   the oversized image from stretching the grid track. */
.gn-demo__media {
    min-width: 0;
    align-self: center;
}

.gn-demo__media img {
    display: block;
    width: clamp(580px, 62vw, 1120px);
    max-width: none;
    height: auto;
    border-radius: 16px;
    border: 0.5rem solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.gn-demo__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 1.5rem 0;
}

.gn-demo__stat {
    display: flex;
    gap: 0.75rem;
    padding: 0 1.5rem;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    align-items: flex-start;
}

.gn-demo__stat:first-child {
    border-left: 0;
}

.gn-demo__stat-icon img {
    width: 32px;
    height: 32px;
}

.gn-demo__stat-title {
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.gn-demo__stat-text {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* demo-stats — amber "request a demo" variant (yellow band; pairs with stats:[] for a clean CTA) */
/* Coloured "request a demo" band. Colours come from an inline style fed by the
   bg/fg design-token traits (no fixed theme). `--bleed` = full-bleed band layout
   (added when a background is chosen); `--themed` = heading/text/CTA inherit the
   chosen foreground colour. Background + text colour live in the section's inline
   style so the editor canvas renders them exactly like the published page. */
.gn-demo--bleed {
    border-radius: 0;
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.layout-page__content > .gn-demo--bleed {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.gn-demo--bleed .gn-demo__top {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-left: var(--space-5);
    padding-right: 0;
}

.gn-demo--themed .gn-demo__eyebrow,
.gn-demo--themed .gn-demo__title,
.gn-demo--themed .gn-demo__lead,
.gn-demo--themed .gn-demo__text {
    color: inherit;
}

.gn-demo--themed .gn-demo__eyebrow {
    opacity: 0.7;
}

.gn-demo--themed .btn--brand,
.gn-demo--themed .btn--primary {
    background: #1f7cd9;
    color: #fff;
    border-color: #1f7cd9;
}

.gn-demo--themed .btn--brand:hover,
.gn-demo--themed .btn--primary:hover {
    background: #1668bd;
    color: #fff;
    border-color: #1668bd;
}

.gn-demo--themed .gn-demo__media img {
    border-color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 900px) {
    .gn-featurelist, .gn-partner, .gn-demo__top {
        grid-template-columns: 1fr;
    }

    .gn-demo--bleed .gn-demo__top {
        padding-right: var(--space-5);
    }

    .gn-demo__media img {
        width: 100%;
        border-width: 0.375rem;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    }

    .gn-principles__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gn-principles__item:nth-child(3) {
        border-left: 0;
    }

    .gn-demo__stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .gn-demo__stat {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding-top: 1rem;
    }

    .gn-demo__stat:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .gn-principles__head {
        grid-template-columns: 1fr;
    }

    .gn-principles__head .btn, .gn-principles__lead {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .gn-principles__grid {
        grid-template-columns: 1fr;
    }

    .gn-principles__item {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .gn-principles__item:first-child {
        border-top: 0;
    }

    .gn-heroprev__title {
        font-size: var(--fs-fluid-md);
    }

    .gn-heroprev__sub, .gn-heroprev__desc {
        font-size: var(--fs-base);
    }

    .gn-tab {
        font-size: var(--fs-sm);
        padding: 10px 16px;
    }

    .gn-heroprev__inner {
        gap: 3rem;
        padding-bottom: 220px;
    }

    .gn-ptabs {
        margin-top: -80px;
    }
}

/* --- Preview Tabs (interactive) ----------------------------------------- */
.gn-ptabs {
    max-width: 1280px;
    margin: clamp(-360px, -28vw, -180px) auto 0;
    padding: 0 1.5rem 4rem;
    position: relative;
    z-index: 2;
}

.gn-ptabs__panels {
    position: relative;
    display: grid;
}

.gn-ptabs__panels > * {
    grid-area: 1 / 1;
}

.gn-ptabs__panel {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gn-ptabs__panel.is-active {
    opacity: 1;
    visibility: visible;
}

.gn-ptabs__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05), 0 0 16px rgba(0, 0, 0, 0.12);
}

.gn-ptabs__media video, .gn-ptabs__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gn-ptabs__desc {
    max-width: 732px;
    margin: 0 auto;
    text-align: center;
    font-size: var(--fs-xl);
    font-weight: var(--fw-standard);
    line-height: 1.3;
    color: var(--color-text);
}

.gn-ptabs__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-top: 2rem;
}

.gn-ptabs__pill {
    border: 0;
}

/* DE /contact demo modal — calmer close button (subtle grey, not red) */
#gn-demo-modal .gn-modal__close {
    background: transparent;
    color: var(--color-text-subtle);
}

#gn-demo-modal .gn-modal__close:hover {
    background: #f1f3f5;
    color: var(--color-text);
}

/* --- Hero + Tabs (unified block) --------------------------------------- */
.gn-herotabs {
    /* position/overflow from the shared .gn-hero base; color/background overridden
       here because herotabs paints via its own __bg/__overlay layers */
    color: inherit;
    background: transparent;
    margin-top: calc(-1 * var(--header-height));
    /* taller marketing-hero default; overridable per-instance via the `minHeight` trait (emitted inline) */
    min-height: var(--hero-min-height-tall);
}

.gn-herotabs__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 30%;
    left: 0;
    background-size: cover;
    background-position: center;
}

.gn-herotabs__bg--pattern {
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 70%), #1d2331;
}

/* Solid-colour overlay on top of the bg image. Color + opacity are
   configurable via the gn-hero-tabs `overlayColor` / `overlayOpacity` traits
   (default: #1d2331 @ 50%). Inherits position from .gn-herotabs__bg so it
   covers exactly the same area (top:0 → bottom:30%). */
.gn-herotabs__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 30%;
    left: 0;
    background: #1d2331;
    opacity: 0.5;
    pointer-events: none;
}

.gn-herotabs__inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: calc(var(--header-height) + 4rem) 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.gn-herotabs__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.gn-herotabs__eyebrow {
    color: var(--on-dark-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
}

.gn-herotabs__title {
    font-size: var(--fs-fluid-lg);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    margin: 0;
    color: #fff;
}

.gn-herotabs__sub {
    font-size: var(--fs-xl);
    font-weight: var(--fw-standard);
    line-height: 1.3;
    color: var(--on-dark-strong);
    margin: 0;
    max-width: 760px;
}

.gn-herotabs__panels {
    position: relative;
    width: 100%;
    display: grid;
    margin-top: 2rem;
}

.gn-herotabs__panels > * {
    grid-area: 1 / 1;
}

.gn-herotabs__panel {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
}

.gn-herotabs__panel.is-active {
    opacity: 1;
    visibility: visible;
}

.gn-herotabs__media {
    width: 100%;
    max-width: 1232px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05), 0 0 16px rgba(0, 0, 0, 0.15);
}

.gn-herotabs__media video, .gn-herotabs__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Descriptions now live BELOW the pills (figma.com order: media → pills → text).
   Only the active panel's description is shown, toggled by the ptabs JS.
   All descriptions are stacked in a single grid cell (same technique as
   __panels) so the container always reserves the height of the TALLEST
   description. That keeps the section's total height constant when switching
   tabs — without this, a 2-line→4-line swap changed the section height, which
   (a) reflowed everything below and (b) re-framed the absolutely-positioned
   hero bg/overlay (sized to bottom:30% of the section) → the "jumping/flicker"
   of the upper part. Cross-fade via opacity/visibility instead of display. */
.gn-herotabs__descs {
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: start;
}

.gn-herotabs__descs > * {
    grid-area: 1 / 1;
}

.gn-herotabs__desc {
    max-width: 880px;
    text-align: center;
    font-size: var(--fs-xl);
    font-weight: var(--fw-standard);
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
}

/* Hide-until-active is SCOPED to descriptions inside the dedicated __descs
   container (the published .sbn structure). In the GrapesJS editor the desc
   still lives INSIDE each panel and is shown/hidden by the panel's own
   is-active state — a global `.gn-herotabs__desc{opacity:0}` rule would hide it
   even in the active panel (white/invisible text in the canvas). */
.gn-herotabs__descs > .gn-herotabs__desc {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s;
}

.gn-herotabs__descs > .gn-herotabs__desc.is-active {
    opacity: 1;
    visibility: visible;
}

/* The cross-fade reads as "restless" — during the swap both the empty media box
   and the text dip toward transparent (you briefly see the bg straight through
   the white box). For visitors who asked the OS for less motion, switch panels
   and descriptions INSTANTLY: the new content is fully visible immediately, no
   fade, no dip. Layout stays put either way (constant-height grid stacks). */
@media (prefers-reduced-motion: reduce) {
    .gn-herotabs__panel,
    .gn-herotabs__descs > .gn-herotabs__desc {
        transition: none;
    }
}

.gn-herotabs__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* The pills sit on the dark hero (bg image + #1d2331 overlay), so an unselected
   pill defaults to a white background with dark text — readable everywhere, not
   just on mobile. Only the selected pill goes dark (#0b1220 + white text). Hover
   is a SOLID light grey, not a translucent dark: a translucent fill over white
   would let the dark hero bleed through the pill. */
.gn-herotabs__pill {
    background: #fff;
    color: var(--color-text);
}

.gn-herotabs__pill:hover {
    background: #e6e6e6;
}

.gn-herotabs__pill.is-active, .gn-herotabs__pill.is-active:hover {
    background: #0b1220;
    color: #fff;
    font-weight: var(--fw-semibold);
}

@media (max-width: 640px) {
    /* Title/subtitle sizes now scale continuously via clamp() above — no abrupt
     step here, so the hero text shrinks smoothly instead of plateauing then
     jumping. Only the vertical rhythm is tightened on small screens. */
    .gn-herotabs__inner {
        gap: 2.5rem;
    }
}

/* --- Use-Case Carousel --------------------------------------------------- */
.gn-ucc {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.gn-ucc__eyebrow {
    color: var(--color-accent);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    margin-bottom: 0.25rem;
}

.gn-ucc__title {
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    margin: 0 0 0.5rem;
    color: var(--color-text);
}

.gn-ucc__headrow {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gn-ucc__lead {
    flex: 1;
    color: var(--color-text);
    font-size: var(--fs-lg);
    font-weight: var(--fw-standard);
    margin: 0;
}

.gn-ucc__nav {
    display: flex;
    gap: 0.5rem;
}

.gn-ucc__navbtn {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 0;
    background: rgba(11, 18, 32, 0.06);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.gn-ucc__navbtn svg {
    width: 26px;
    height: 26px;
    stroke-width: 2.25;
}

.gn-ucc__navbtn:hover:not(:disabled) {
    background: var(--color-accent);
    color: #fff;
}

.gn-ucc__navbtn:active:not(:disabled) {
    transform: scale(0.93);
}

.gn-ucc__row {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    align-items: stretch;
}

.gn-ucc__intro {
    flex: 0 0 350px;
    height: 400px;
    padding: 2rem 1rem 1rem;
    border-radius: 8px;
    background: var(--color-accent);
    color: var(--color-accent-on);
    position: relative;
    overflow: hidden;
}

.gn-ucc__intro-slide {
    position: absolute;
    inset: 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s;
}

.gn-ucc__intro-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.gn-ucc__intro-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    margin: 0;
    line-height: 1.2;
}

.gn-ucc__intro-body {
    flex: 1;
    font-size: var(--fs-base);
    line-height: 1.5;
    margin: 0;
    overflow-y: auto;
}

.gn-ucc__more {
    color: #fff;
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.gn-ucc__track {
    flex: 1;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
}

.gn-ucc__track::-webkit-scrollbar {
    height: 0;
}

.gn-ucc__card {
    flex: 0 0 auto;
    width: 533px;
    height: 400px;
    border-radius: 8px;
    background: #f6f7f9;
    border: 1px solid #f6f7f9;
    overflow: hidden;
    scroll-snap-align: start;
    position: relative;
    display: block;
    text-decoration: none;
}

.gn-ucc__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gn-ucc__card-title {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    color: #fff;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    padding: 1.5rem 0.5rem 0.75rem;
}

.gn-ucc__dots {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 1.5rem;
}

.gn-ucc__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    transition: width 0.2s, background 0.2s;
}

.gn-ucc__dot.is-active {
    width: 20px;
    background: #0b1220;
}

/* Use-Case Carousel — interaction polish (drag / focus / keyboard); see site.js */
.gn-ucc__track {
    cursor: grab;
    overscroll-behavior-x: contain;
}

.gn-ucc__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}

.gn-ucc__card {
    scroll-snap-stop: always;
}

.gn-ucc__card img {
    -webkit-user-drag: none;
    user-drag: none;
}

.gn-ucc__track:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 10px;
}

.gn-ucc__navbtn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Card body focuses (grab cursor inherited from the track); only the title text opens the article. */
.gn-ucc__card-title {
    cursor: pointer;
}

.gn-ucc__card-title:hover {
    text-decoration: underline;
}

/* --- Insights Feed ------------------------------------------------------- */
/* .gn-feed is a full-bleed dark band. Article cards are populated client-side from
   /api/insights (see site.js [data-gn-feed]); the newsletter card is server-rendered. */
.gn-feed {
    position: relative;
    overflow: hidden;
    background: #1d2331;
    color: #fff;
}

/* Only when the feed is the FIRST block (standalone insights landing) does it pull up
   under the transparent header; as a mid-page section it keeps normal flow. */
.layout-page__content > .gn-feed:first-child {
    margin-top: calc(-1 * var(--header-height));
}

.layout-page__content > .gn-feed:first-child .gn-feed__inner {
    padding-top: calc(var(--header-height) + var(--space-7));
}

/* Optional diffuse section background — image + colored overlay, like the hero header. */
.gn-feed__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.gn-feed__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gn-feed__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--space-8) var(--space-5);
}

/* Framed mode: head + cards float in a rounded dark tile on the background image
   (the use-case-page hero look). The inner padding becomes the gap where the bg peeks. */
.gn-feed__body--tile {
    position: relative;
    z-index: 1;
    background: var(--gn-ink, #101820);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 3.5rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.gn-feed__head {
    margin-bottom: var(--space-6);
}

/* Framed: hero text (image + text) sits OUTSIDE the tile, centered on the background —
   like the homepage hero. The tile is pulled up slightly to nest beneath the hero band. */
.gn-feed__head--hero {
    text-align: center;
    max-width: 60rem;
    min-height: var(--hero-min-height);
    margin: 0 auto;
    padding-bottom: var(--space-7);
}

.gn-feed__head--hero .gn-feed__title {
    font-size: var(--fs-fluid-lg);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.gn-feed__head--hero .gn-feed__sub {
    margin: var(--space-4) auto 0;
    max-width: 52ch;
    color: var(--on-dark-strong);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

.gn-feed__head--hero + .gn-feed__body--tile {
    margin-top: calc(-1 * var(--space-6));
}

/* Editorial showcase: curated use-case cards are fewer, larger and image-led
   (2-up) — distinct from the compact 3-col insights feed. */
.gn-feed__grid--showcase {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.gn-feed__grid--showcase .gn-feed__card-media {
    aspect-ratio: 16 / 9;
}

.gn-feed__grid--showcase .gn-feed__card-body {
    padding: var(--space-6) var(--space-6) var(--space-7);
    gap: var(--space-4);
}

.gn-feed__grid--showcase .gn-feed__card-title {
    font-size: var(--fs-fluid-sm);
    font-weight: var(--fw-bold);
}

.gn-feed__grid--showcase .gn-feed__card-excerpt {
    font-size: var(--fs-lg);
}

.gn-feed__grid--showcase .gn-feed__card-more {
    font-size: var(--fs-lg);
}

@media (max-width: 760px) {
    .gn-feed__grid--showcase {
        grid-template-columns: 1fr;
    }
}

/* Split hero: dark hero band (optional bg image + optional right-side image) with a LIGHT
   cards zone below — like the use-case detail pages, distinct from the centered homepage hero. */
.gn-feed--split {
    background: transparent;
}

.gn-feed__hero {
    position: relative;
    overflow: hidden;
    background: var(--gn-ink, #101820);
    color: #fff;
}

.gn-feed__split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.gn-feed__split--solo {
    grid-template-columns: 1fr;
}

.gn-feed__split--solo .gn-feed__split-copy {
    max-width: 56rem;
}

.gn-feed__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--gn-accent, var(--color-brand-yellow));
    margin: 0 0 var(--space-4);
}

.gn-feed__eyebrow-bar {
    display: inline-block;
    width: 1.6rem;
    height: 3px;
    border-radius: 2px;
    background: var(--gn-accent, var(--color-brand-yellow));
}

.gn-feed__split .gn-feed__title {
    font-size: var(--fs-fluid-lg);
    font-weight: var(--fw-extrabold);
    line-height: 1.05;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.gn-feed__split .gn-feed__sub {
    margin: var(--space-4) 0 0;
    max-width: 46ch;
    color: var(--on-dark-muted);
}

.gn-feed__split-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.gn-feed__split .gn-btn--accent {
    background: var(--gn-accent, var(--color-brand-yellow));
    color: var(--color-text);
    border: 0;
}

.gn-feed__split .gn-btn--accent:hover {
    background: var(--gn-accent-dark, var(--color-brand-yellow-dark));
}

.gn-feed__split .gn-btn--ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: transparent;
}

.gn-feed__split .gn-btn--ghost:hover {
    border-color: var(--gn-accent, var(--color-brand-yellow));
    color: var(--gn-accent, var(--color-brand-yellow));
}

.gn-feed__split-media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.gn-feed__split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

/* Light cards zone below the hero */
.gn-feed__cards {
    background: #f3f4f6;
}

.gn-feed__cards-inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--space-8) var(--space-5);
}

.gn-feed__cards .gn-feed__card {
    background: #fff;
}

@media (max-width: 860px) {
    .gn-feed__split {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

.gn-feed__title {
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-extrabold);
    line-height: 1.1;
    margin: 0;
    color: #fff;
}

.gn-feed__sub {
    font-size: var(--fs-lg);
    font-weight: var(--fw-standard);
    line-height: 1.35;
    color: var(--on-dark-muted);
    margin: var(--space-3) 0 0;
    max-width: 60ch;
}

.gn-feed__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: stretch;
}

.gn-feed__card {
    background: #fff;
    color: var(--color-text);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

/* Flat — no drop shadow; only the card image zooms slightly on hover. */
.gn-feed__card:hover {
    text-decoration: none;
}

.gn-feed__card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #e5e9ef;
    overflow: hidden;
}

.gn-feed__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gn-feed__card:hover .gn-feed__card-media img {
    transform: scale(1.06);
}

.gn-feed__card-tags {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.gn-feed__tag {
    font-size: var(--fs-sm);
    font-weight: var(--fw-standard);
    color: #fff;
    line-height: 1.4;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--color-accent);
}

.gn-feed__card-body {
    padding: var(--space-5) var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.gn-feed__card-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    margin: 0;
    color: var(--color-text);
}

.gn-feed__card-excerpt {
    flex: 1;
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
}

.gn-feed__card-more {
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    font-size: var(--fs-base);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Newsletter card — fills the wide trailing slot (image #2 layout). */
.gn-feed__news {
    grid-column: span 2;
    background: var(--color-bg-muted);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    justify-content: center;
}

.gn-feed__news-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    margin: 0;
    color: var(--color-text);
}

.gn-feed__news-body {
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 64ch;
}

.gn-feed__news-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.gn-feed__news-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 1rem;
    font: inherit;
    color: var(--color-text);
    background: #fff;
    border: 1px solid rgba(16, 24, 32, 0.2);
    border-radius: var(--radius-md);
}

.gn-feed__news-field input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-color: transparent;
}

.gn-feed__news-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--fs-base);
    line-height: 1.45;
    color: var(--color-text-muted);
}

.gn-feed__news-consent input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

.gn-feed__news-submit {
    align-self: flex-start;
}

.gn-feed__news-status {
    margin: 0;
    font-size: var(--fs-sm);
}

.gn-feed__news-status.is-success {
    color: var(--color-success);
}

.gn-feed__news-status.is-error {
    color: var(--color-danger);
}

/* --- Insights feed: one tidy row of article previews + a full-width newsletter
   row beneath it. Previously the newsletter was squeezed beside a single trailing
   card and stretched tall; now it spans the full grid width on its own row as a
   two-column band (text + input left / consent + button right). Article previews trimmed per
   breakpoint so the row above always fills completely: 3 cards at 3-col, 2 at
   2-col (mobile stacks). Scoped to the plain insights grid so the 2-up
   showcase / use-case feeds are untouched. */
.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__news {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    /* Everything stacks full width, line by line: title, intro text, consent, then a
     full-width action bar (email input flex:1 + button, EQUAL height). The <form> is
     display:contents so consent / actions / status place via grid-area regardless of
     DOM order; site.js wraps input + button into .gn-feed__news-actions. */
    grid-template-areas:
    "title"
    "body"
    "consent"
    "actions"
    "status";
    row-gap: var(--space-4);
    align-items: start;
}

.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__news-title {
    grid-area: title;
    margin: 0;
}

.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__news-body {
    grid-area: body;
    margin: 0;
    max-width: none;
}

.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__news-form {
    display: contents;
}

.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__news-consent {
    grid-area: consent;
    align-self: start;
}

.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__news-actions {
    grid-area: actions;
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__news-field {
    flex: 1 1 16rem;
    min-width: 0;
}

.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__news-field input {
    height: 100%;
    box-sizing: border-box;
}

.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__news-submit {
    align-self: stretch;
}

.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__news-status {
    grid-area: status;
}

/* Submit uses the site's STANDARD semi-rounded button (--radius-md) instead of the
   gn-btn pill — matches the header "Get in touch" CTA. Colour set via the two vars
   below: blue (default) -> --color-accent; swap to --color-brand-yellow or --gn-ink. */
.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__news-submit {
    --gn-news-btn-bg: var(--color-accent);
    --gn-news-btn-bg-hover: var(--color-accent-hover);
    --gn-news-btn-fg: #fff;
    border-radius: var(--radius-md);
    background: var(--gn-news-btn-bg);
    color: var(--gn-news-btn-fg);
    padding: 12px 24px;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    border: 0;
}

.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__news-submit:hover {
    background: var(--gn-news-btn-bg-hover);
    color: var(--gn-news-btn-fg);
}

/* Hide article previews past the first row. Cards are <a>, so nth-of-type counts
   only real cards — the trailing newsletter <div> and <div> skeletons are unaffected. */
.gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__card:nth-of-type(n+4) {
    display: none;
}

@media (min-width: 601px) and (max-width: 960px) {
    .gn-feed__grid:not(.gn-feed__grid--showcase) .gn-feed__card:nth-of-type(n+3) {
        display: none;
    }
}

/* The newsletter band is single-column at every width, so no breakpoint override is
   needed — the action bar's flex-wrap handles narrow screens (button drops below). */

/* Skeleton placeholders shown while the article fetch is in flight. */
.gn-feed__card--skeleton {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 320px;
    pointer-events: none;
}

.gn-feed__card--skeleton .gn-feed__card-media {
    background: rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-motion: no-preference) {
    .gn-feed__card--skeleton {
        animation: gn-feed-pulse 1.4s ease-in-out infinite;
    }
}

@keyframes gn-feed-pulse {
    0%, 100% {
        opacity: 0.55;
    }
    50% {
        opacity: 0.9;
    }
}

@media (max-width: 960px) {
    .gn-ucc__row {
        flex-direction: column;
    }

    .gn-ucc__intro {
        flex: 0 0 auto;
        height: auto;
        width: 100%;
        min-height: 180px;
        padding: 1.5rem 1.25rem;
    }

    .gn-ucc__intro-slide {
        position: static;
        inset: auto;
        display: none;
    }

    .gn-ucc__intro-slide.is-active {
        display: flex;
    }

    .gn-ucc__intro-body {
        overflow-y: visible;
    }

    .gn-ucc__card {
        width: 80vw;
        height: 320px;
    }

    .gn-feed__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gn-feed__news {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .gn-feed__grid {
        grid-template-columns: 1fr;
    }

    .gn-feed__news {
        grid-column: span 1;
    }
}

/* --- Logo marquee (gn-logos) — raw-HTML partner/logo strips ------------- */
.gn-logos {
    padding: var(--space-7, 3rem) 0;
    overflow: hidden;
    background: var(--color-bg-subtle, #f3f4f6);
}

.gn-logos__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.gn-logos__track {
    display: flex;
    width: max-content;
    animation: gn-logos-scroll 45s linear infinite;
}

.gn-logos__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: clamp(3.5rem, 8vw, 7rem);
    padding-right: clamp(3.5rem, 8vw, 7rem);
}

.gn-logos__logo {
    flex: 0 0 auto;
    height: 44px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

@keyframes gn-logos-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Logo marquee is a decorative loop - it runs for ALL visitors, INCLUDING
   prefers-reduced-motion: the site owner wants full motion (a frozen marquee
   reads as broken). Do NOT re-add a `@media (prefers-reduced-motion: reduce)`
   block disabling .gn-logos__track here. */

/* --- Print --------------------------------------------------------------- */
@media print {
    .site-header, .site-footer, .docs-sidebar, .toc, .docs-prevnext, .lang-switcher {
        display: none;
    }

    .docs-shell, .article, .listing {
        max-width: none;
        padding: 0;
        margin: 0;
    }

    .gn-insight-sidebar, .gn-insight-related, .gn-insights-tags {
        display: none;
    }

    .gn-insight-body {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   GRIDNOW design tokens — used by hero-orbit and the upcoming dark-section
   blocks (signal-asset-view, signal-normalization, communication-protocols,
   wrap-extend, pillar-cards, cta banner). Defined once so block CSS stays
   consistent.
   ========================================================================= */
:root {
    --gn-ink: var(--color-text);
    --gn-ink-2: #1a242f;
    --gn-paper: #f6f7f2;
    --gn-accent: var(--color-brand-yellow);
    --gn-accent-dark: var(--color-brand-yellow-dark);
    --gn-line: rgba(255, 255, 255, 0.10);
    --gn-text-dim: var(--color-text-subtle);
/* ── Page Cards ───────────────────────────────────────────────────────────
   Curated "pages as cards" block (editor: drag "Page Cards", pick pages via the
   dropdown). Deliberately REUSES the Insights listing card visuals
   (.gn-insights-grid / .gn-insights-card / .featured in 55-insights.css) so the
   cards read identically to the Insights feed. This file only adds the section
   wrapper + optional heading + the "more" affordance. */
.gn-page-cards {
    padding-block: var(--space-7);
}

/* No own max-width / side gutter: the block always renders inside the page
   content column (.layout-page__content), which already constrains width and
   applies the 24px gutter. Re-imposing them here double-inset the heading and
   cards 24px to the right of the hero text — let the inner sit flush with the
   column so cards align with the hero and every other block. */
.gn-page-cards__inner {
    margin: 0;
    padding: 0;
}

.gn-page-cards__head {
    margin-bottom: var(--space-6);
}

.gn-page-cards__eyebrow {
    color: var(--color-accent, #2f6df6);
    font-size: var(--fs-xs, 0.8125rem);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.gn-page-cards__title {
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    margin: 0;
    color: var(--color-text);
}

.gn-page-cards__subtitle {
    margin: var(--space-3) 0 0;
    max-width: 60ch;
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    line-height: 1.6;
}

/* "Mehr →" affordance at the foot of each card body (the whole card is the
   link). Mirrors the feed card-more: accent, semibold, arrow nudges on hover. */
.gn-page-cards__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
    color: var(--color-accent);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
}

.gn-page-cards__more span {
    transition: transform 0.2s ease;
}

.gn-insights-card:hover .gn-page-cards__more span {
    transform: translateX(3px);
}

/* The featured (first) card's body is vertically centred by 55-insights.css; give
   its "more" link a touch more headroom so it doesn't crowd the excerpt. */
.gn-insights-card.featured .gn-page-cards__more {
    margin-top: var(--space-2);
}
}

/* --- hero-orbit ---------------------------------------------------------- */
/* .gn-orbit is an (optionally full-bleed) wrapper. The dark visual lives in
   .gn-orbit__card so an optional full-width section background can sit behind it
   and the card can protrude a configurable amount below the background band. */
.gn-orbit {
    position: relative;
    display: block;
    /* default min height; overridable per-instance via the `minHeight` trait (emitted inline) */
    min-height: 60vh;
}

/* full-width background band behind the card; its height leaves the card
   protruding below by --gn-orbit-overhang (set inline from the cardOverhang prop). */
.gn-orbit__section-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - var(--gn-orbit-overhang, 0%));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

.gn-orbit__section-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 24, 32, 0.32) 0%, rgba(16, 24, 32, 0.08) 45%, rgba(16, 24, 32, 0.50) 100%);
}

/* When the bleed orbit is the FIRST block on a page, pull its background band up
   behind the sticky header to the very top of the viewport (top: 0). Only the top
   edge moves — the bottom edge (and the card overhang) stay put, so the card layout
   is unchanged. The header (z-index 50) still renders over the band. */
.layout-page__content > .gn-orbit--bleed:first-child .gn-orbit__section-bg {
    top: calc(-1 * (var(--header-height) + var(--space-6)));
    height: calc(100% - var(--gn-orbit-overhang, 0%) + var(--header-height) + var(--space-6));
}

.gn-orbit__card {
    position: relative;
    z-index: 1;
    max-width: 1360px; /* dark box: slight bleed past the 1280 header container */
    margin: 0 auto;
    background: var(--gn-ink);
    color: #fff;
    overflow: hidden;
    padding: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 56px);
    border-radius: 12px;
}

.gn-orbit__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* 50 / 50 */
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    /* match the header's content band (container-wide minus its side padding) so the
     hero content's left/right edges line up with the logo and the "Get in touch" button */
    max-width: calc(var(--container-wide) - 2 * var(--space-5));
    margin: 0 auto;
}

@media (max-width: 960px) {
    .gn-orbit__inner {
        grid-template-columns: 1fr;
    }
}

.gn-orbit__copy {
    max-width: 640px;
}

.gn-orbit__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    font-size: var(--fs-xs);
    color: var(--gn-text-dim);
    margin-bottom: 28px;
}

.gn-orbit__eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gn-accent);
    box-shadow: 0 0 12px var(--gn-accent);
}

.gn-orbit__headline {
    font-size: var(--fs-fluid-lg);
    line-height: 1.02;
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: #fff;
}

.gn-orbit__sub {
    font-size: var(--fs-xl);
    line-height: 1.55;
    color: var(--gn-text-dim);
    margin: 0 0 36px;
}

.gn-orbit__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.gn-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gn-btn--accent {
    background: var(--gn-accent);
    color: var(--gn-ink);
}

.gn-btn--accent:hover {
    background: var(--gn-accent-dark);
}

.gn-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.gn-btn--ghost:hover {
    background: #fff;
    color: var(--gn-ink);
}

.gn-btn__arrow {
    transition: transform 0.15s;
}

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

.gn-orbit__visual {
    position: relative;
    width: 100%;
    max-width: 100%; /* fill the whole column instead of capping at 560px */
    aspect-ratio: 1 / 0.84;
    margin: 0 auto;
}

.gn-orbit__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(251, 191, 36, 0.18) 0%, transparent 60%);
    filter: blur(40px);
    pointer-events: none;
    animation: gn-orbit-glow-pulse 5s ease-in-out infinite;
}

@keyframes gn-orbit-glow-pulse {
    0%, 100% {
        opacity: 0.65;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.gn-orbit__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2; /* rings (and their comet/moon dots) draw OVER the center core */
}

/* Clean concentric orbits — true circles via aspect-ratio (width/height percentages
   reference different axes and would render ellipses). Layered radii: comet 31% <
   moon 38% < outer 42%, all around the 24% core. */
/* outer "sun orbit" — a clearly drawn dashed amber path */
.gn-orbit__ring--outer {
    width: 84%;
    height: auto;
    aspect-ratio: 1 / 1;
    border: 1px dashed rgba(251, 191, 36, 0.32);
}

/* the moon's orbit — a clearly visible solid circle the moon travels along */
.gn-orbit__ring--mid {
    width: 76%;
    height: auto;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(148, 163, 184, 0.45);
    animation: gn-orbit-spin 34s linear infinite reverse;
}

/* the comet's orbit — full faint amber circle with a bright leading arc */
.gn-orbit__ring--rotate {
    width: 62%;
    height: auto;
    aspect-ratio: 1 / 1;
    border: 1.5px solid rgba(251, 191, 36, 0.30);
    border-top-color: rgba(251, 191, 36, 0.9);
    animation: gn-orbit-spin 18s linear infinite;
}

@keyframes gn-orbit-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* sonar pulses emanating from behind the core (ride the static outer ring) */
.gn-orbit__ring--outer::before,
.gn-orbit__ring--outer::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(251, 191, 36, 0.5);
    transform-origin: center;
    animation: gn-orbit-sonar 5s ease-out infinite;
}

.gn-orbit__ring--outer::after {
    animation-delay: 2.5s;
}

@keyframes gn-orbit-sonar {
    0% {
        transform: scale(0.45);
        opacity: 0;
    }
    16% {
        opacity: 0.45;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* THE MOON — a shaded pale sphere riding the mid (visible) orbit */
.gn-orbit__ring--mid::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -9px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fafdff 0%, #cdd7e3 55%, #9aa7b6 100%);
    box-shadow: 0 0 16px 2px rgba(226, 232, 240, 0.5), inset -2px -2px 4px rgba(0, 0, 0, 0.35);
}

/* glowing comet head leading the amber sweep */
.gn-orbit__ring--rotate::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    border-radius: 50%;
    background: var(--gn-accent);
    box-shadow: 0 0 18px 3px rgba(251, 191, 36, 0.85);
}

.gn-orbit__center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--gn-ink-2);
    border: 1px solid rgba(251, 191, 36, 0.32);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    display: grid;
    place-items: center;
    z-index: 1; /* sits BEHIND the orbit rings (z-index 2); nodes (z-index 3) stay on top */
}

.gn-orbit__center-inner {
    position: relative;
    overflow: hidden;
    width: 76%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #0a1218;
    border: 1px solid rgba(148, 163, 184, 0.18);
    display: grid;
    place-items: center;
    text-align: center;
}

/* When a center image is present, let it fill (almost) the whole core and drop the
   inner ring/border + the lighter annulus around it — the image's circular clip IS
   the edge. This makes the image noticeably larger and removes the "border" ring. */
.gn-orbit__center:has(.gn-orbit__center-media) {
    background: transparent;
    border-color: transparent;
    /* soften the dark halo so it no longer darkly frames the image — a light,
     semi-transparent ring through which the image still reads */
    box-shadow: 0 4px 36px rgba(0, 0, 0, 0.20);
}

.gn-orbit__center-inner:has(.gn-orbit__center-media) {
    width: 96%;
    background: transparent;
    border-color: transparent;
}

/* the dimming wash is only needed to keep overlaid TEXT legible — drop it when the
   core has no text so the image shows at full brightness */
.gn-orbit__center-inner:not(:has(.gn-orbit__center-label)):not(:has(.gn-orbit__center-eyebrow)) .gn-orbit__center-media::after {
    display: none;
}

/* configurable center media (e.g. an SVG) — clipped to the core circle by the
   parent's overflow:hidden, sitting behind the optional text. The rings rotate
   around it because the center itself is static. */
.gn-orbit__center-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    box-sizing: border-box; /* so centerImagePadding insets the image inside the circle */
    pointer-events: none;
}

.gn-orbit__center-media img,
.gn-orbit__center-media svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: center; /* centerImageScale grows from the middle, cropped by the circle */
}

/* subtle wash so overlaid text stays legible over busy artwork */
.gn-orbit__center-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(10, 18, 24, 0.25) 0%, rgba(10, 18, 24, 0.55) 100%);
}

.gn-orbit__center-label {
    position: relative;
    z-index: 1;
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.gn-orbit__center-label--accent {
    color: var(--gn-accent);
    animation: gn-orbit-now-pulse 3.6s ease-in-out infinite;
}

@keyframes gn-orbit-now-pulse {
    0%, 100% {
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
    }
    50% {
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 0 20px rgba(251, 191, 36, 0.6);
    }
}

.gn-orbit__center-eyebrow {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    font-size: var(--fs-2xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gn-text-dim);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.gn-orbit__node {
    position: absolute;
    z-index: 3;
    width: 34%;
    max-width: 160px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(15, 23, 32, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.20);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    animation: gn-orbit-float 6s ease-in-out infinite;
}

@keyframes gn-orbit-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-9px);
    }
}

.gn-orbit__node-bar {
    display: block;
    width: 38px;
    height: 6px;
    border-radius: 999px;
    background: var(--gn-accent);
    margin-bottom: 10px;
}

.gn-orbit__node-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: #fff;
}

.gn-orbit__node-meta {
    margin-top: 4px;
    font-size: var(--fs-2xs);
    color: var(--gn-text-dim);
}

.gn-orbit__node--n1 {
    left: 0%;
    top: 2%;
    animation-delay: 0s;
}

.gn-orbit__node--n2 {
    right: 0%;
    top: 0%;
    animation-delay: 1.2s;
}

.gn-orbit__node--n3 {
    left: 0%;
    bottom: 8%;
    animation-delay: 2.4s;
}

.gn-orbit__node--n4 {
    right: 0%;
    bottom: 4%;
    animation-delay: 0.6s;
}

.gn-orbit__node--n5 {
    left: 33%;
    bottom: 0%;
    animation-delay: 1.8s;
}

@media (max-width: 760px) {
    .gn-orbit__visual {
        max-width: 420px;
    }

    .gn-orbit__node {
        width: 40%;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .gn-orbit__node-bar {
        width: 30px;
        height: 5px;
    }

    .gn-orbit__node-label {
        font-size: var(--fs-xs);
    }

    .gn-orbit__node-meta {
        font-size: var(--fs-2xs);
    }
}

/* NOTE: the orbit hero animations (ring rotation, comet/moon, sonar pulses, glow
   breathing, NOW text-glow, card float) intentionally run for ALL visitors —
   including those with prefers-reduced-motion — because this decorative brand hero
   reads as static/broken otherwise. Do NOT re-add a `@media (prefers-reduced-motion)`
   block here to disable them; that was tried and the site owner wants full motion. */

/* --- signal-asset-view --------------------------------------------------- */
.gn-sav {
    display: block;
    padding: clamp(48px, 6vw, 96px) clamp(16px, 4vw, 56px);
}

.gn-sav__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
}

@media (max-width: 960px) {
    .gn-sav__inner {
        grid-template-columns: 1fr;
    }
}

.gn-sav__copy {
    max-width: 560px;
}

.gn-sav__eyebrow {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gn-accent-dark);
    margin-bottom: 18px;
}

.gn-sav__title {
    font-size: var(--fs-fluid-md);
    line-height: 1.05;
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    color: var(--gn-ink);
    margin: 0 0 22px;
}

.gn-sav__body {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 28px;
}

.gn-sav__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gn-sav__bullet {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--color-text-muted);
}

.gn-sav__check {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gn-accent);
    color: var(--gn-ink);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
}

.gn-sav__viz {
    position: relative;
    width: 100%;
}

.gn-sav__viz-card {
    position: relative;
    border-radius: 24px;
    padding: clamp(20px, 3vw, 32px);
    background: radial-gradient(circle at 1.5px 1.5px, rgba(148, 163, 184, 0.45) 1px, transparent 0) 0 0/22px 22px,
    #f1f5f9;
    border: 1px solid rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.gn-sav__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.gn-sav__pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.20);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.gn-sav__pill-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f1f5f9;
    color: var(--gn-ink);
    flex: 0 0 auto;
}

.gn-sav__pill-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.gn-sav__center {
    margin: clamp(24px, 3vw, 40px) auto 0;
    width: clamp(140px, 14vw, 180px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.06);
    position: relative;
    z-index: 1;
}

.gn-sav__center-l1 {
    font-size: var(--fs-fluid-sm);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    color: var(--gn-ink);
}

.gn-sav__center-l2 {
    font-size: var(--fs-fluid-sm);
    font-weight: var(--fw-extrabold);
    line-height: 1.1;
    color: var(--gn-accent-dark);
}

@media (max-width: 540px) {
    .gn-sav__grid {
        grid-template-columns: 1fr;
    }
}

/* --- signal-normalization ------------------------------------------------ */
.gn-sn {
    display: block;
    padding: clamp(48px, 6vw, 96px) clamp(16px, 4vw, 56px);
}

.gn-sn__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
}

@media (max-width: 960px) {
    .gn-sn__inner {
        grid-template-columns: 1fr;
    }
}

.gn-sn__copy {
    max-width: 560px;
}

.gn-sn__eyebrow {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gn-accent-dark);
    margin-bottom: 18px;
}

.gn-sn__title {
    font-size: var(--fs-fluid-md);
    line-height: 1.05;
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    color: var(--gn-ink);
    margin: 0 0 22px;
}

.gn-sn__body {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 28px;
}

.gn-sn__pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 540px) {
    .gn-sn__pills {
        grid-template-columns: 1fr;
    }
}

.gn-sn__pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.20);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.gn-sn__pill-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f1f5f9;
    color: var(--gn-ink);
    flex: 0 0 auto;
}

.gn-sn__pill-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.gn-sn__card {
    background: var(--gn-ink);
    color: #fff;
    border-radius: 24px;
    padding: clamp(24px, 3vw, 36px);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}

.gn-sn__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.gn-sn__card-eyebrow {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gn-accent);
    margin-bottom: 10px;
}

.gn-sn__card-title {
    font-size: var(--fs-fluid-sm);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    margin: 0;
    color: #fff;
}

.gn-sn__card-icon {
    color: var(--gn-accent);
    flex: 0 0 auto;
}

.gn-sn__layers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gn-sn__layer {
    padding: 16px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.gn-sn__layer-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: #fff;
    margin-bottom: 4px;
}

.gn-sn__layer-body {
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--gn-text-dim);
}

/* --- wrap-extend --------------------------------------------------------- */
.gn-we {
    display: block;
    padding: clamp(48px, 6vw, 96px) clamp(16px, 4vw, 56px);
}

.gn-we__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (max-width: 960px) {
    .gn-we__inner {
        grid-template-columns: 1fr;
    }
}

.gn-we__card {
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 16px;
}

.gn-we__card-inner {
    position: relative;
    border-radius: 20px;
    background: var(--gn-ink);
    color: #fff;
    padding: clamp(24px, 3vw, 36px);
    overflow: hidden;
}

.gn-we__glow {
    position: absolute;
    right: -90px;
    top: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(251, 191, 36, 0.20);
    filter: blur(40px);
    pointer-events: none;
}

.gn-we__icon-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.gn-we__icon-tile {
    display: grid;
    place-items: center;
    height: 88px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--gn-accent);
}

.gn-we__progress {
    position: relative;
    z-index: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
    margin-bottom: 12px;
}

.gn-we__progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--gn-accent);
    transition: width 0.6s ease;
}

.gn-we__progress-labels {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-2xs);
    color: var(--gn-text-dim);
    margin-bottom: 32px;
}

.gn-we__card-title {
    position: relative;
    z-index: 1;
    font-size: var(--fs-fluid-sm);
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    color: #fff;
}

.gn-we__card-body {
    position: relative;
    z-index: 1;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--gn-text-dim);
    margin: 0;
    max-width: 32rem;
}

.gn-we__copy {
    max-width: 560px;
}

.gn-we__eyebrow {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gn-accent-dark);
    margin-bottom: 18px;
}

.gn-we__title {
    font-size: var(--fs-fluid-md);
    line-height: 1.05;
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    color: var(--gn-ink);
    margin: 0 0 22px;
}

.gn-we__body {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 28px;
}

.gn-we__tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 540px) {
    .gn-we__tiles {
        grid-template-columns: 1fr;
    }
}

.gn-we__tile {
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--color-text-muted);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

/* --- pillar-cards -------------------------------------------------------- */
.gn-pc {
    display: block;
}

.gn-pc__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

.gn-pc__inner--overlap {
    margin-top: -40px;
}

@media (max-width: 960px) {
    .gn-pc__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .gn-pc__inner {
        grid-template-columns: 1fr;
    }

    .gn-pc__inner--overlap {
        margin-top: 0;
    }
}

.gn-pc__card {
    background: var(--gn-pc-card-bg, transparent);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid transparent;
}

/* backdrop / border are opt-in via Properties (wrapper modifier classes) */
.gn-pc--shadow .gn-pc__card {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
}

.gn-pc--border .gn-pc__card {
    border-color: rgba(148, 163, 184, 0.25);
}

/* rounded corners toggle (default on; .gn-pc--sharp squares them) */
.gn-pc--sharp .gn-pc__card {
    border-radius: 0;
}

/* optional icon / svg on top */
.gn-pc__icon {
    margin-bottom: 16px;
    line-height: 0;
}

.gn-pc__icon img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.gn-pc__kicker {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin-bottom: 4px;
}

.gn-pc__value {
    font-size: var(--fs-fluid-sm);
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
    color: var(--gn-ink);
    margin-bottom: 8px;
    line-height: 1.05;
}

.gn-pc__label {
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* --- features (icon variant) -- additive, untouched when no icons set ---- */
.features__grid--icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
}

@media (max-width: 960px) {
    .features__grid--icons {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .features__grid--icons {
        grid-template-columns: 1fr;
    }
}

.feature--with-icon {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.15s;
}

.feature--with-icon:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.feature--with-icon .feature__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--gn-ink);
    color: var(--gn-accent);
    margin-bottom: 18px;
}

.feature--with-icon .feature__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-extrabold);
    color: var(--gn-ink);
    margin: 0 0 8px;
}

.feature--with-icon .feature__body {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
}

/* --- cta banner variant -- yellow audit-CTA from the JSX design ---------- */
.cta--banner {
    position: relative;
    overflow: hidden;
    margin: clamp(48px, 6vw, 96px) auto;
    max-width: 1280px;
    padding: clamp(32px, 4vw, 56px);
    border-radius: 32px;
    background: var(--gn-accent);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

@media (max-width: 880px) {
    .cta--banner {
        grid-template-columns: 1fr;
    }
}

.cta--banner__gradient {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.25), transparent);
    pointer-events: none;
}

.cta--banner__copy {
    position: relative;
    z-index: 1;
}

.cta--banner__headline {
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--gn-ink);
    margin: 0 0 20px;
}

.cta--banner__body {
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 36rem;
}

.cta--banner__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

@media (max-width: 880px) {
    .cta--banner__actions {
        justify-content: flex-start;
    }
}

.gn-btn--ink {
    background: var(--gn-ink);
    color: #fff;
}

.gn-btn--ink:hover {
    background: #000;
}

.gn-btn--ink-line {
    background: transparent;
    color: var(--gn-ink);
    border: 1px solid var(--gn-ink);
}

.gn-btn--ink-line:hover {
    background: var(--gn-ink);
    color: #fff;
}

/* ---- Optional background-image layer for the 5 new gn blocks --------- */
.gn-orbit, .gn-sav, .gn-sn, .gn-we, .gn-pc {
    position: relative;
    isolation: isolate;
}

.gn-orbit__bg, .gn-sav__bg, .gn-sn__bg, .gn-we__bg, .gn-pc__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

.gn-orbit__inner, .gn-sav__inner, .gn-sn__inner, .gn-we__inner, .gn-pc__inner {
    position: relative;
    z-index: 1;
}

/* --- Contact Page (gn-cp) -----------------------------------------------
   Styles for the contact page's raw-HTML block (person intro, contact
   cards, contact information, partner). These MUST live here in site.css —
   NOT inline in the page's blocksJson. An inline <style> in the block was
   silently dropped on a GrapesJS save once, which removed every rule below
   and blew the portrait photo up to full viewport width (layout destroyed).
   site.css survives editor saves; keep this here. */
.gn-cp {
    color: var(--color-text);
}

.gn-cp__container {
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.gn-cp__eyebrow {
    display: inline-block;
    color: var(--color-accent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

/* Person / intro */
.gn-cp__person {
    padding-block: var(--space-8);
}

.gn-cp__person-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
}

.gn-cp__photo {
    margin: 0;
}

.gn-cp__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.gn-cp__name {
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    margin: 0 0 var(--space-4);
}

.gn-cp__quote {
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--color-accent);
    background: var(--color-accent-muted);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

.gn-cp__bio {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

/* Contact cards — full-bleed muted band */
.gn-cp__cards.gn-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--color-bg-muted);
    border-block: 1px solid var(--color-border);
    padding-block: var(--space-8);
}

.gn-cp__cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.gn-cp__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.gn-cp__card h3 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin: 0;
}

.gn-cp__card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.gn-cp__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding: 0.65rem 1.2rem;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background var(--trans-fast), color var(--trans-fast);
}

.gn-cp__btn--dark {
    background: var(--color-footer-bg);
    color: #fff;
}

.gn-cp__btn--dark:hover {
    background: #0b1220;
    color: #fff;
    text-decoration: none;
}

.gn-cp__socials {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.gn-cp__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);
}

.gn-cp__socials a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    text-decoration: none;
}

.gn-cp__socials svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Contact information */
.gn-cp__info {
    padding-block: var(--space-8);
}

.gn-cp__section-title {
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    margin: 0 0 var(--space-6);
}

.gn-cp__info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-7);
}

.gn-cp__info-grid h4 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-2);
}

.gn-cp__info-grid p {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.gn-cp__info-social h4 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-3);
}

.gn-cp__textsocials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.gn-cp__textsocials a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
}

.gn-cp__textsocials a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.gn-cp__textsocials svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.gn-cp__legal p {
    margin: 0 0 var(--space-2);
    color: var(--color-text-subtle);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
}

.gn-cp__legal a {
    color: var(--color-accent);
}

/* Partner */
.gn-cp__partner {
    padding-block: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.gn-cp__partner-head {
    margin-bottom: var(--space-6);
}

.gn-cp__partner-head h2 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    margin: 0;
}

.gn-cp__partner-row {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: center;
}

.gn-cp__partner-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 240px;
}

.gn-cp__partner-body p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

/* Responsive */
@media (max-width: 860px) {
    .gn-cp__person-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .gn-cp__photo {
        max-width: 320px;
    }

    .gn-cp__cards-grid {
        grid-template-columns: 1fr;
    }

    .gn-cp__partner-row {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .gn-cp__partner-logo img {
        max-width: 200px;
    }
}

@media (max-width: 560px) {
    .gn-cp__info-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Energy 4.0 feature-list: device ring shows fully (portrait SVG, not cropped) ── */
.gn-featurelist__media img[src$="device-fan-vertical.svg"] {
    object-fit: contain;
}

.gn-featurelist__media:has(img[src$="device-fan-vertical.svg"]) {
    aspect-ratio: auto;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.gn-featurelist__media:has(img[src$="device-fan-vertical.svg"]) img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
}


/* --- Lead-capture modal (gn-modal) — demo/contact request forms -----------
   Canonical styles so blocks only carry markup+script (inline <style> is
   stripped on GrapesJS save). Used by #gn-demo-modal / #gn-contact-modal. */
.gn-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.gn-modal.is-open {
    display: flex;
}

.gn-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 15, 26, .6);
}

.gn-modal__dialog {
    position: relative;
    z-index: 1;
    background: #fff;
    width: 100%;
    max-width: 620px;
    border-radius: 8px;
    padding: 40px 44px;
    box-shadow: 0 30px 80px rgba(8, 15, 26, .4);
}

.gn-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-subtle);
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.gn-modal__close:hover {
    background: #f1f3f5;
    color: var(--color-text);
}

.gn-modal__dialog h2 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-standard);
    color: var(--color-text);
    margin: 0 0 .8rem;
}

.gn-modal__intro {
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    line-height: 1.6;
    margin: 0 0 1.6rem;
}

.gn-modal__field {
    display: block;
    margin: 0 0 1rem;
}

.gn-modal__field span {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-bottom: .3rem;
}

.gn-modal__field input, .gn-modal__field textarea {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid #c7ccd4;
    border-radius: 4px;
    font: inherit;
    color: var(--color-text);
}

.gn-modal__field input:focus, .gn-modal__field textarea:focus {
    outline: 2px solid #1f7cd9;
    border-color: #1f7cd9;
}

.gn-modal__consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 1.2rem;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.gn-modal__consent input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.gn-modal__submit {
    background: #1f7cd9;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: .8rem 1.6rem;
    font: inherit;
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: opacity .15s ease;
}

.gn-modal__submit:hover {
    background: #1668bd;
}

.gn-modal__submit:disabled {
    opacity: .45;
    cursor: not-allowed;
    background: #1f7cd9;
}

.gn-modal__success {
    background: #e7f6ec;
    border: 1px solid #b6e2c4;
    color: var(--color-success);
    padding: 1rem;
    border-radius: 6px;
    margin: 0 0 1rem;
}

.gn-modal__error {
    background: #fdecec;
    border: 1px solid #f5bcbc;
    color: var(--color-danger);
    padding: .7rem 1rem;
    border-radius: 6px;
    margin: 0 0 1rem;
    font-size: var(--fs-sm);
}


/* --- Section (generic drop-container) ----------------------------------- */
/* Optional eyebrow + header + a content area that hosts other blocks. Authored
   via the `section` CMS block; children render through the recursive publisher. */
.gn-section {
    padding: clamp(40px, 6vw, 88px) 0;
}

.gn-section--bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Independent top/bottom padding overrides — trait-driven (Section > Abstand
   oben/unten), same clamp scale as the default so presets stay proportional. */
.gn-section.gn-section--pt-none { padding-top: 0; }
.gn-section.gn-section--pt-sm   { padding-top: clamp(20px, 3vw, 44px); }
.gn-section.gn-section--pt-lg   { padding-top: clamp(60px, 9vw, 132px); }
.gn-section.gn-section--pt-xl   { padding-top: clamp(80px, 12vw, 176px); }

.gn-section.gn-section--pb-none { padding-bottom: 0; }
.gn-section.gn-section--pb-sm   { padding-bottom: clamp(20px, 3vw, 44px); }
.gn-section.gn-section--pb-lg   { padding-bottom: clamp(60px, 9vw, 132px); }
.gn-section.gn-section--pb-xl   { padding-bottom: clamp(80px, 12vw, 176px); }

.gn-section--screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.gn-section__inner {
    width: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.gn-section__eyebrow {
    color: var(--color-accent, #2f6df6);
    font-size: var(--fs-xs, 0.8125rem);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}

.gn-section__title {
    font-family: var(--font-sans);
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    margin: 0 0 1.5rem;
}

.gn-section__content {
    display: block;
}

/* Published page hides empty chrome via the .sbn `if`; the editor always renders
   eyebrow/title so they stay clickable to edit. */


/* --- Global heading typography ------------------------------------------ */
/* Enforce the Inter-first stack + a consistent weight per level on ALL headings,
   so no block ever falls back to Arial/system and weights stay uniform. Block
   classes still set their own font-size; these are the baseline family + weight. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
}

h1 {
    font-weight: var(--fw-extrabold);
}

h2 {
    font-weight: var(--fw-bold);
}

h3 {
    font-weight: var(--fw-bold);
}

h4 {
    font-weight: var(--fw-semibold);
}

h5 {
    font-weight: var(--fw-semibold);
}

h6 {
    font-weight: var(--fw-semibold);
}

/* contact info cards — restored from stripped inline style 2026-06-24 (see editor_strips_inline_style) */
.gn-cp__infocard {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 12px 34px rgba(16, 28, 45, .06);
    padding: 32px 36px;
}

.gn-cp__infocard--wide {
    max-width: 960px;
    margin: 0 auto 28px;
}

.gn-cp__info .gn-cp__addr {
    margin: 0 0 1rem;
    color: var(--color-text);
    line-height: 1.75;
    font-size: var(--fs-base);
}

.gn-cp__addr:last-child {
    margin-bottom: 0;
}

.gn-cp__sicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #121212;
    color: #fff;
    flex: 0 0 auto;
}

.gn-cp__sicon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

@media (max-width: 900px) {
    .gn-cp__infocard {
        padding: 26px 24px;
    }

    .gn-cp__infocard--wide {
        margin-bottom: 20px;
    }
}


/* ============================================================================
   GN-TYPOGRAPHY-SYSTEM
   1) Register the self-hosted Inter @font-face HERE in site.css. The GrapesJS
      editor canvas loads ONLY site.css (canvas.styles=['/assets/site.css']), so
      WITHOUT this rule the canvas — and anything not including the page shell —
      has no "Inter" family and silently falls back to a system font.
   2) The 7 sanctioned text styles. All Inter, fixed weights, 3 text colours.
      Editor "Text" blocks + the "Textstil" trait apply these classes so authors
      never hand-pick fonts / sizes / colours.
   ============================================================================ */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/inter-variable.woff2") format("woff2");
}

.gn-eyebrow, .gn-display, .gn-header, .gn-subheader, .gn-lead, .gn-paragraph, .gn-caption {
    font-family: var(--font-sans);
    margin: 0;
}

.gn-eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.gn-display {
    font-size: var(--fs-fluid-lg);
    font-weight: var(--fw-extrabold);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--color-text);
}

.gn-header {
    font-size: var(--fs-fluid-md);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.gn-subheader {
    font-size: var(--fs-fluid-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.gn-lead {
    font-size: var(--fs-lg);
    font-weight: var(--fw-standard);
    line-height: var(--lh-snug);
    color: var(--color-text-muted);
}

.gn-paragraph {
    font-size: var(--fs-base);
    font-weight: var(--fw-light);
    line-height: var(--lh-base);
    color: var(--color-text);
}

.gn-caption {
    font-size: var(--fs-sm);
    font-weight: var(--fw-standard);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* colour modifiers (the only sanctioned text colours) — after the base styles so they win */
.gn-text--default {
    color: var(--color-text);
}

.gn-text--muted {
    color: var(--color-text-muted);
}

.gn-text--accent {
    color: var(--color-accent);
}

/* alignment modifiers */
.gn-text--left {
    text-align: left;
}

.gn-text--center {
    text-align: center;
}

.gn-text--right {
    text-align: right;
}

/* end GN-TYPOGRAPHY-SYSTEM */