/* GENERATED by tools/critical-css/generate.py - DO NOT EDIT.
   Sources (edit these, then regenerate): slideshow_critical.css, styles.css, pdf-download.css */
.slideshow-preview-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.slideshow-initial-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    gap: 16px;
    z-index: 5;
}
.slideshow-initial-loader i {
    font-size: 48px;
    opacity: 0.7;
    animation: slideshow-pulse 1.5s ease-in-out infinite;
}
.slideshow-initial-loader span {
    font-size: 16px;
    opacity: 0.6;
}
@keyframes slideshow-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}
@media (max-width: 480px) {
.slideshow-initial-loader i {
        font-size: 32px;
    }
.slideshow-initial-loader span {
        font-size: 12px;
    }
}
@media (max-width: 320px) {
.slideshow-initial-loader i {
        font-size: 24px;
    }
.slideshow-initial-loader span {
        font-size: 10px;
    }
.slideshow-preview-wrapper {
        border-radius: 6px;
    }
}
:root {
    /* Primary Colors */
    --color-green: rgb(76, 175, 80);
    --color-green-dark: #45a049;
    --color-green-light: rgba(76, 175, 80, 0.1);
    
    --color-blue: rgb(59, 180, 196);
    --color-blue-dark: #2f8f9d;
    --color-blue-light: rgba(59, 180, 196, 0.1);

    --color-yellow: rgb(196, 171, 59);
    --color-yellow-dark: #b39a2a;
    --color-yellow-light: rgba(196, 171, 59, 0.1);

    /* Accessible (WCAG AA) variants — used for interactive UI (button
       backgrounds with white text, body links, focus outlines) where the
       bright brand hues fail contrast. The bright hues above stay for
       decorative fills, icon tints and gradients. */
    /* Each is the LIGHTEST tint of the brand hue that still passes WCAG AA
       (≈4.5:1) with white text / on white — i.e. as close to the original
       brand color as the contrast test allows. */
    --color-green-accessible: #3a863d;   /* white text ≈ 4.5:1 (brand green, min-darkened) */
    --color-blue-accessible: #2a818d;    /* white text / link ≈ 4.5:1 (brand blue, min-darkened) */
    --color-yellow-accessible: #6b5d16;  /* white text ≈ 6.9:1 (dark olive, for small text on white) */
    --color-yellow-button: #877629;      /* darkest-passing tint of the brand yellow — white text ≈ 4.5:1 */
    --color-link: #277884;               /* body link text ≥ 4.5:1 on white AND the
                                            tinted section backgrounds (--color-bg,
                                            --color-bg-alt, blue-light) */

    /* Hover shades — all buttons darken by the same amount on hover so the
       interaction is consistent (bases are already the darkened accessible
       values, so the old *-dark vars would read as lighter). */
    --color-green-hover: #306e32;
    --color-blue-hover: #226a74;
    --color-yellow-hover: #6f6122;
    
    --color-red: rgb(196, 59, 59);
    --color-red-dark: #a52f2f;
    --color-red-light: rgba(196, 59, 59, 0.1);
    
    /* Neutrals */
    --color-white: #ffffff;
    --color-bg: #f8f9fa;
    --color-bg-alt: #f2f2f2;
    --color-border: #e1e1e1;
    --color-border-light: #eee;
    
    --color-text-primary: #2c3e50;
    --color-text-secondary: #555;
    --color-text-muted: #6b7280; /* darkened from #888 for WCAG AA on small print */
    --color-text-light: #767676; /* darkened from #999 - 4.5:1 on white (WCAG AA) */
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.2);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    
    /* Container */
    --container-max: 1200px;
    --container-wide: 1400px;
}
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* Disable mobile-Chrome font boosting: it re-inflates text on the long
       article pages shortly after load, reflowing the whole page (CLS ~0.15
       measured on the four longest guides). */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-white);
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--color-blue-dark);
}
.section-header p a,
.features-optional-note a,
.integration-more-note a,
.integration-cta-links a,
.contact-inline-info p a,
.solutions-router-intro p a,
.solutions-router-guides a,
.priser-card ul li a,
.priser-reassure-list li a,
.priser-reassure p a,
.cta-contact a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
p {
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
}
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}
.container-wide {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 24px;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
}
.btn-primary {
    background: var(--color-green-accessible);
    color: var(--color-white);
}
.btn-primary:hover {
    background: var(--color-green-hover);
    color: var(--color-white);
    transform: translateY(-2px);
    /* glow derived from the accessible button green (#3a863d), not the bright brand hue */
    box-shadow: 0 8px 20px rgba(58, 134, 61, 0.35);
}
.btn-yellow {
    background: var(--color-yellow-button);
    color: #fff;
}
.btn-yellow:hover {
    background: var(--color-yellow-hover);
    color: #fff;
    transform: translateY(-2px);
    /* glow derived from the dark-olive button yellow (#877629), not the bright brand hue */
    box-shadow: 0 8px 20px rgba(135, 118, 41, 0.35);
}
.btn-outline {
    background: white;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
.btn-outline:hover {
    border-color: var(--color-blue);
    /* accessible variant: raw --color-blue text fails ≈4.5:1 on the blue tint */
    color: var(--color-blue-accessible);
    background: var(--color-blue-light);
}
.btn-large {
    padding: 18px 42px;
    font-size: 1.1rem;
}
.section {
    padding: 100px 0;
}
.section-alt {
    background: var(--color-bg);
}
.section:not(.section-alt):not(.cta-section) + .section:not(.section-alt):not(.cta-section),
.section-alt + .section-alt {
    position: relative;
}
.section:not(.section-alt):not(.cta-section) + .section:not(.section-alt):not(.cta-section)::before,
.section-alt + .section-alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1152px, calc(100% - 48px));
    height: 1px;
    background: var(--color-border-light);
}
.section-header {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
}
.section-header h1,
.section-header h2 {
    margin-bottom: 20px;
    /* Distribute words evenly across lines instead of orphaning a single word
       (e.g. "slides") on the last line. Ignored by browsers without support. */
    text-wrap: balance;
}
.section-header p {
    font-size: 1.15rem;
    color: var(--color-text-muted);
}
.section-label {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-blue-light);
    /* Slightly darker than --color-blue-accessible: this small label sits on
       the pale blue tint (not white), which needs the extra depth to pass AA. */
    color: #256f7a;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
}
.header.scrolled {
    box-shadow: var(--shadow-md);
}
.topbar {
    background: var(--color-text-primary);
}
.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 24px;
}
.topbar-social {
    display: flex;
    gap: 4px;
}
.topbar-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 6px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition-fast);
}
.topbar-social a:hover {
    color: var(--color-white);
}
.topbar-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 2px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}
.topbar-login:hover {
    color: var(--color-white);
    text-decoration: underline;
}
.topbar-login i {
    font-size: 0.75rem;
}
.topbar-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition-fast);
}
.topbar-phone:hover {
    color: var(--color-white);
}
.topbar-phone i {
    font-size: 0.75rem;
}
@media (max-width: 900px) {
.topbar-phone {
        display: none;
    }
}
@media (max-width: 768px) {
.topbar {
        display: none;
    }
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    max-width: var(--container-wide);
    margin: 0 auto;
}
.logo {
    display: flex;
    align-items: center;
}
.logo-img {
    height: 60px;
    width: auto;
}
.nav {
    display: flex;
    align-items: center;
    gap: 40px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}
.nav-links a {
    color: var(--color-text-secondary);
    font-weight: 500;
    transition: color var(--transition-fast);
}
.nav-links a:hover {
    color: var(--color-blue-accessible);
}
.nav-links > li {
    position: relative;
}
.nav-links .has-dropdown > a {
    display: inline-flex;
    align-items: center;
}
.nav-caret {
    font-size: 0.65rem;
    margin-left: 6px;
    opacity: 0.7;
    transition: transform var(--transition-fast);
}
.has-dropdown:hover .nav-link-btn,
.has-dropdown.open .nav-link-btn {
    color: var(--color-blue);
}
.has-dropdown:hover .nav-caret,
.has-dropdown:focus-within .nav-caret,
.has-dropdown.open .nav-caret {
    transform: rotate(180deg);
}
.has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 22px;
}
.nav-dropdown {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 300px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 200;
}
.nav-dropdown::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 26px;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown,
.has-dropdown.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}
.nav-dropdown-item:hover {
    background: var(--color-bg);
    color: var(--color-text-primary);
}
.nav-dropdown-item > i {
    color: var(--color-blue);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.nav-dropdown-compact {
    font-size: 0.95rem;
    font-weight: 500;
    padding: 9px 12px;
    gap: 9px;
}
.nav-dropdown-compact > i {
    width: 16px;
    font-size: 0.9em;
}
.nav-dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.nav-dropdown-mega {
    min-width: 820px;
    max-width: min(820px, calc(100vw - 32px));
    left: 50%;
    transform: translate(-42%, 8px);
}
.has-dropdown:hover .nav-dropdown-mega,
.has-dropdown:focus-within .nav-dropdown-mega,
.has-dropdown.open .nav-dropdown-mega {
    transform: translate(-42%, 0);
}
.nav-links .has-dropdown.force-closed .nav-dropdown,
.nav-links .has-dropdown.force-closed .nav-dropdown-mega {
    opacity: 0;
    visibility: hidden;
}
.nav-dropdown-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.nav-dropdown-col {
    display: flex;
    flex-direction: column;
}
.nav-dropdown-col + .nav-dropdown-col {
    border-left: 1px solid var(--color-border-light);
    padding-left: 20px;
}
.nav-dropdown-heading {
    display: block;
    padding: 4px 14px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.nav-dropdown-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 4px 2px;
    padding: 10px 14px 4px;
    border-top: 1px solid var(--color-border-light);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-blue-accessible);
}
.nav-dropdown-footer i:last-child {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
}
.nav-dropdown-footer:hover i:last-child {
    transform: translateX(4px);
}
.nav-cta {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-primary);
    cursor: pointer;
    z-index: 1002;
    position: relative;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(280px, 85vw);
    max-width: 280px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    /* visibility is toggled (with a delay) alongside the slide so the ~25
       links are NOT focusable / announced to screen readers while the menu
       is closed — at every viewport width. */
    visibility: hidden;
    transition: right 0.3s ease, visibility 0s linear 0.3s;
    z-index: 1001;
    /* Fixed close button (top) + scrollable link region + pinned CTA footer.
       The drawer itself no longer scrolls; .mobile-menu-scroll does.
       Top padding = close button bottom edge (20px + 44px) so all 8 nav rows
       plus the pinned footer fit without scrolling on 667px-tall phones (SE). */
    padding: 64px 24px max(24px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mobile-menu.active {
    right: 0;
    visibility: visible;
    transition: right 0.3s ease, visibility 0s;
}
.mobile-menu-close {
    position: absolute;
    /* Keep the close button clear of notches/rounded corners */
    top: max(20px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-primary);
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
}
.mobile-menu-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* fade the lower edge so users see the list continues when scrollable */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mobile-menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mobile-menu-links li a {
    display: block;
    /* Tight 44px rows (10+24+10) so the full menu fits short phone screens */
    padding: 10px 16px;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.mobile-menu-links li a:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
.mobile-menu-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mobile-menu-group.open {
    background: var(--color-bg);
    border-radius: 10px;
    padding-bottom: 6px;
}
.mobile-menu-group.open .mobile-menu-group-toggle:hover,
.mobile-menu-group.open a:hover {
    background: #fff;
}
.mobile-menu-group .mobile-menu-group-links > a {
    padding-left: 24px;
}
.mobile-menu-group a.mobile-menu-group-all {
    font-weight: 600;
    color: var(--color-blue-accessible);
}
.mobile-menu-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2px;
}
.mobile-menu-group .mobile-menu-group-grid a {
    font-size: 0.9rem;
    /* Same 24px text inset as the "Se alle"/single-column sub-links so the
       first grid column aligns with the rows above it */
    padding: 10px 12px 10px 24px;
}
.mobile-menu-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-secondary);
    padding: 10px 16px;
    min-height: 44px;
    text-align: left;
    transition: all 0.2s ease;
}
.mobile-menu-group-toggle:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
.mobile-menu-group-toggle i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}
.mobile-menu-group.open .mobile-menu-group-toggle i {
    transform: rotate(180deg);
}
html.js .mobile-menu-group-links {
    display: none;
}
html.js .mobile-menu-group.open .mobile-menu-group-links {
    display: block;
}
.mobile-menu-group a {
    display: block;
    padding: 10px 16px;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.mobile-menu-group a:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
.mobile-menu-social {
    display: flex;
    gap: 8px;
    padding: 8px 4px 0;
    /* Bottom-aligned in the scroll region (flex column): auto margin absorbs
       the free space on tall screens so the icons sit just above the pinned
       footer's divider instead of hanging under the last nav link. When the
       list overflows there is no free space and the 8px top padding keeps a
       gap under Kontakt instead. No margin-bottom: the scroll region's 12px
       padding + the 44px icon boxes' internal whitespace already visually
       match the divider→phone/Kundelogin gap below (16px + 8px padding). */
    margin-top: auto;
    margin-bottom: 0;
}
.mobile-menu-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-size: 1.3rem;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
}
.mobile-menu-social a:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
@media (max-height: 700px) {
.mobile-menu-social {
        display: none;
    }
}
.mobile-menu-cta {
    flex: 0 0 auto;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mobile-menu-login {
    display: flex;
    align-items: center;
    /* Left-aligned to match the nav rows above (icon + label read as a normal
       left-aligned utility row, not a centered button). */
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 16px;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.mobile-menu-login:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
.mobile-menu-cta .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
}
.mobile-menu-utils {
    display: flex;
    flex-wrap: nowrap;
    /* number pinned left, Kundelogin pinned right — all spare width becomes
       the gap between them */
    justify-content: space-between;
    gap: 6px;
}
.mobile-menu-utils .mobile-menu-login {
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 6px;
    gap: 6px;
    font-size: 0.9rem;
    white-space: nowrap;
}
body.mobile-menu-open {
    overflow: hidden;
}
section[id] {
    scroll-margin-top: 80px;
}
.hero {
    padding: 190px 0 100px;
    background: url('../img/bg.webp') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    /* px anchor, not top:-N% — a %-of-height offset re-resolves when late-loading
       content grows the hero, repainting this 800px glow elsewhere = huge CLS */
    top: -400px;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--color-blue-light) 0%, transparent 70%);
    pointer-events: none;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}
.hero-content {
    max-width: 600px;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--color-green-light);
    color: var(--color-green-dark);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    margin-bottom: 24px;
}
.hero-badge i {
    font-size: 0.85rem;
}
.hero h1 {
    /* Slightly below the global h1 clamp (3.5rem cap) so the long
       "foreninger og sportsklubber" title holds two lines comfortably. */
    font-size: clamp(2.2rem, 5vw, 2.8rem);
    margin-bottom: 24px;
    line-height: 1.15;
}
.hero h1 span {
    color: var(--color-blue-dark);
}
.hero-description {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    margin-bottom: 32px;
    line-height: 1.7;
}
.hero-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.hero-cta-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
}
.hero-demo-note,
.audience-demo-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--color-text-muted); /* ≥4.5:1 on white/tinted hero bg (AA) */
    line-height: 1.5;
    margin: 0;
    padding: 0;
    /* Stay inside the hero column — as inline-flex its intrinsic width could
       otherwise exceed the viewport on narrow phones and push horizontal
       overflow (which clipped the header hamburger below ~440px). */
    max-width: 100%;
}
.hero-demo-note i,
.audience-demo-note i {
    color: var(--color-blue-accessible);
    margin-right: 6px;
    margin-top: 3px;
    flex-shrink: 0;
}
.hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 38px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}
.hero-stat {
    text-align: left;
}
.hero-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-blue);
}
.hero-stat-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.hero-stat-label a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(107, 114, 128, 0.4);
    text-underline-offset: 3px;
}
.hero-stat-label a:hover {
    color: var(--color-blue);
}
.hero-visual {
    position: relative;
}
.hero-image-wrapper {
    position: relative;
    margin-bottom: 24px;
}
.hero-tv-frame {
    position: relative;
    width: 100%;
}
.tv-frame-bg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.25));
}
.hero-slideshow-wrapper {
    position: absolute !important;
    top: 4%;
    left: 2.3%;
    width: 95.5%!important;
    height: 92%;
    overflow: hidden;
    background: #1a1a2e;
    border-radius: 0 !important;
    z-index: 1;
    aspect-ratio: unset !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.hero-slideshow-wrapper .slideshow-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
}
.hero-slideshow-wrapper .slideshow-canvas {
    border-radius: 0;
}
.hero-slideshow-wrapper .slideshow-controls {
    opacity: 1;
}
.hero-slide.active {
    opacity: 1;
}
.hero-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}
.hero-feature-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.hero-feature-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
}
.hero-feature-icon.green { background: var(--color-green); }
.hero-feature-icon.blue { background: var(--color-blue); }
.hero-feature-text {
    font-size: 0.9rem;
}
.hero-feature-text strong {
    display: block;
    color: var(--color-text-primary);
}
.hero-feature-text span {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.hero-testimonial {
    margin-top: 24px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--color-yellow);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}
.hero-testimonial-quote {
    position: relative;
    flex: 1;
}
.hero-testimonial-quote i {
    color: var(--color-yellow);
    font-size: 1rem;
    opacity: 0.5;
    margin-right: 8px;
}
.hero-testimonial-quote p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: 1.5;
    margin: 0;
    display: inline;
}
.hero-testimonial-author {
    padding-left: 20px;
    border-left: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 1rem;
    flex-shrink: 0;
    overflow: hidden;
}
.testimonial-avatar picture {
    display: block;
    width: 100%;
    height: 100%;
}
.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial-author-info strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text-primary);
}
.testimonial-author-info span {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.testimonial-author-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.testimonial-company-logo {
    margin-bottom: 12px;
    opacity: 0.8;
    transition: opacity var(--transition-normal);
}
.testimonial-company-logo:hover {
    opacity: 1;
}
.testimonial-company-logo img {
    height: 28px;
    width: auto;
    object-fit: contain;
}
.hero-testimonial-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -16px;
    font-size: 0.9rem;
    font-weight: 500;
    /* Accessible olive for the text; the star icon keeps the bright brand
       yellow as a decorative accent (see i:first-child below). */
    color: var(--color-yellow-accessible);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.hero-testimonial-link:hover {
    color: var(--color-text-primary);
}
.hero-testimonial-link i:first-child {
    color: var(--color-yellow);
}
.hero-testimonial-link i:last-child {
    margin-left: auto;
    font-size: 0.8rem;
    transition: transform var(--transition-fast);
}
.hero-testimonial-link:hover i:last-child {
    transform: translateX(4px);
}
.problem-section {
    background: var(--color-text-primary);
    color: white;
    padding: 80px 0;
}
.problem-section .section-header {
    margin-bottom: 48px;
}
.problem-section .section-label {
    background: rgba(255,255,255,0.1);
    /* Lightened from --color-yellow: on the translucent white chip over the
       dark navy section, brand yellow only hits 3.58:1 — this passes 4.5:1. */
    color: #dbc56e;
}
.problem-section .section-header h2 {
    color: white;
}
.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.problem-card {
    text-align: center;
    padding: 32px;
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all var(--transition-normal);
    /* Column layout so the guide link pins to the bottom and all three
       cards stay visually level regardless of text length. */
    display: flex;
    flex-direction: column;
}
.problem-card:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-4px);
}
.problem-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-yellow);
}
.problem-card h3 {
    color: white;
    margin-bottom: 12px;
    font-size: 1.25rem;
}
.problem-card p {
    /* 0.9 (not 0.75): these problem statements do the audience qualification,
       so they must read as primary text on the dark background */
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
}
.problem-card-guide {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Single line, always: the labels are deliberately short, nowrap forbids
       wrapping, and the font eases down a touch at the narrowest three-column
       widths so nothing overflows. Every card gets an identical one-line row. */
    white-space: nowrap;
    font-size: clamp(0.75rem, 0.35rem + 0.55vw, 0.875rem);
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    border-top: 1px solid rgba(255,255,255,0.12);
    transition: color var(--transition-fast);
}
.problem-card-guide:hover {
    color: var(--color-yellow);
}
.problem-card-guide i:first-child {
    color: var(--color-yellow);
    font-size: 0.85rem;
}
.problem-card-guide i:last-child {
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
}
.problem-card-guide:hover i:last-child {
    transform: translateX(3px);
}
.problem-card p {
    flex-grow: 1;
    margin-bottom: 20px;
}
.problem-cta {
    text-align: center;
    margin-top: 48px;
}
.section-cta {
    text-align: center;
    margin-top: 48px;
}
.features-count {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 10;
}
.features-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Accessible end-stops so the white text passes WCAG across the gradient */
    background: linear-gradient(135deg, var(--color-green-accessible), var(--color-blue-accessible));
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    cursor: help;
    position: relative;
    transition: all var(--transition-fast);
}
.features-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}
.features-badge .info-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 0.65rem;
    transition: all var(--transition-fast);
}
.features-badge:hover .info-hint {
    background: rgba(255, 255, 255, 0.4);
}
.features-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    width: min(280px, 90vw);
    max-width: 280px;
    padding: 12px 14px;
    background: var(--color-text-primary);
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 10;
    pointer-events: none;
    text-align: center;
}
.features-badge::before {
    content: '';
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--color-text-primary);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 11;
}
.features-badge:hover::after,
.features-badge:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.feature-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}
.feature-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-blue);
}
.feature-card h3 {
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    line-height: 1.3;
}
.feature-card > p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
    flex-grow: 1;
}
.feature-card .feature-example-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    /* 8px 14px matches the base .feature-example-btn so every example/link
       button across all cards is exactly the same size. */
    padding: 8px 14px;
    font-size: 0.8rem;
}
.feature-card-actions {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.feature-card-actions .feature-example-btn {
    /* relative (not static): cancels the absolute positioning above while
       keeping the ::after tap-target expansion anchored to the button */
    position: relative;
    top: auto;
    right: auto;
}
.feature-link-btn-below {
    align-self: flex-start;
}
.feature-link-btn.feature-link-btn-inline {
    display: none;
}
.feature-card-actions .feature-link-btn {
    margin-top: 0;
    align-self: center;
    padding: 8px 14px;
    font-size: 0.8rem;
}
.dynamic-indicator {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-blue-light), rgba(59, 180, 196, 0.3));
    border: 1px solid rgba(59, 180, 196, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    position: relative;
    transition: all var(--transition-fast);
}
.dynamic-indicator i {
    font-size: 0.7rem;
    color: var(--color-blue-dark);
}
.dynamic-indicator:hover {
    background: linear-gradient(135deg, rgba(59, 180, 196, 0.3), rgba(59, 180, 196, 0.5));
    border-color: var(--color-blue);
    transform: scale(1.1);
}
.dynamic-indicator::after {
    content: 'Dynamisk slide – opdateres automatisk';
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 180px;
    padding: 8px 10px;
    background: var(--color-text-primary);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.4;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all var(--transition-fast);
    z-index: 10;
    pointer-events: none;
    text-align: center;
}
.dynamic-indicator::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    right: 8px;
    border: 6px solid transparent;
    border-bottom-color: var(--color-text-primary);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 11;
}
.dynamic-indicator:hover::after,
.dynamic-indicator:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-bottom: 14px;
}
.feature-icon.green { background: var(--color-green-light); color: var(--color-green); }
.feature-icon.blue { background: var(--color-blue-light); color: var(--color-blue); }
.feature-icon.yellow { background: var(--color-yellow-light); color: var(--color-yellow); }
.feature-icon.red { background: var(--color-red-light); color: var(--color-red); }
.feature-example-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}
.feature-example-btn:hover {
    background: var(--color-blue-light);
    border-color: var(--color-blue);
    color: var(--color-link);
}
.feature-example-btn i {
    font-size: 0.75rem;
}
.feature-example-btn,
.feature-link-btn {
    position: relative;
}
.feature-example-btn::after,
.feature-link-btn::after {
    content: '';
    position: absolute;
    top: -7px;
    bottom: -7px;
    left: -4px;
    right: -4px;
}
.feature-link-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-top: 16px;
    padding: 8px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}
.feature-link-btn:hover {
    background: var(--color-yellow-light);
    border-color: var(--color-yellow);
    color: var(--color-yellow-accessible);
}
.feature-link-btn i {
    font-size: 0.75rem;
}
.feature-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.feature-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.feature-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 90%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-modal-overlay.active .feature-modal {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.feature-modal-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 33px 20px;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-white);
}
.feature-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.feature-modal-close {
    /* 44×44 min tap target (WCAG 2.5.8); icon stays ~1.1rem so the visual
       weight is unchanged — only the hit area grows */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.feature-modal-close:hover {
    background: rgba(0, 0, 0, 0.08);
}
.feature-modal-close:hover i {
    color: var(--color-text-primary);
}
.feature-modal-close i {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}
.feature-modal-image {
    width: 100%;
    height: 288px;
    background: linear-gradient(135deg, var(--color-blue), var(--color-green));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.feature-modal-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
    z-index: 0;
}
.feature-modal-image:has(.feature-modal-tv-frame[style*="block"])::before {
    display: none;
}
.feature-modal-image:has(.feature-modal-tv-frame[style*="block"]) {
    margin-top: 30px;
    height: auto;
    background: transparent;
    overflow: visible;
    /* Breathing room on both sides so the TV frame isn't edge-to-edge */
    padding: 0 33px;
    box-sizing: border-box;
}
@media (max-width: 480px) {
.feature-modal-image {
        height: 200px;
    }
}
.feature-modal-image-placeholder {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.95);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: #666;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.feature-modal-static-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.feature-modal-image:has(.feature-modal-static-image[style*="block"])::before {
    display: none;
}
.feature-modal-tv-frame {
    position: relative;
    width: 100%;
}
.feature-modal-tv-frame .tv-frame-bg {
    position: static;
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 0 0 transparent);
}
.feature-modal-slideshow-wrapper {
    position: absolute !important;
    top: 4%;
    left: 2.3%;
    width: 95.5% !important;
    height: 92%;
    z-index: 2;
    border-radius: 0px!important;
    overflow: hidden;
    background: #1a1a2e;
}
.feature-modal-slideshow-wrapper .slideshow-container {
    border-radius: 0;
    box-shadow: none;
}
.feature-modal-slideshow-wrapper .slideshow-canvas {
    border-radius: 0;
}
.feature-modal-slideshow-wrapper .slideshow-controls {
    display: none !important;
}
.feature-modal-slideshow-wrapper .slideshow-progress-bar {
    display: none !important;
}
.feature-modal-content {
    padding: 20px 33px 33px;
}
.feature-modal-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.feature-modal-icon.green { color: var(--color-green); }
.feature-modal-title-area {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}
.feature-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.2;
}
.feature-modal-dynamic-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: linear-gradient(135deg, var(--color-blue-light), rgba(59, 180, 196, 0.25));
    border: 1px solid rgba(59, 180, 196, 0.4);
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-blue-dark);
}
.feature-modal-dynamic-badge i {
    font-size: 0.7rem;
}
.feature-modal-description {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}
.feature-modal-dynamic-info {
    background: linear-gradient(135deg, var(--color-blue-light), rgba(59, 180, 196, 0.15));
    border: 1px solid rgba(59, 180, 196, 0.3);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.feature-modal-dynamic-info > i {
    color: var(--color-blue);
    font-size: 1.2rem;
    margin-top: 2px;
}
.feature-modal-dynamic-info > div {
    flex: 1;
}
.feature-modal-dynamic-info strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-blue-dark);
    margin-bottom: 4px;
}
.feature-modal-dynamic-info p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}
.feature-modal-dynamic-info.is-collapsible {
    padding: 12px 14px;
    margin-bottom: 16px;
}
.feature-modal-dynamic-info.is-collapsible strong {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0;
}
.feature-modal-dynamic-info.is-collapsible strong::after {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--color-blue);
    transition: transform var(--transition-fast);
}
.feature-modal-dynamic-info.is-collapsible.is-open strong::after {
    transform: rotate(180deg);
}
.feature-modal-dynamic-info.is-collapsible p {
    display: none;
    margin-top: 8px;
}
.feature-modal-dynamic-info.is-collapsible.is-open p {
    display: block;
}
.features-toggle-wrapper {
    /* Only meaningful with JS — without it all cards are already shown, so the
       "Vis flere" button would do nothing. Hidden by default, shown via .js. */
    display: none;
    justify-content: center;
    margin: 40px 0;
    max-height: 100px;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease 0.3s, margin 0.3s ease 0.3s;
}
.js .features-toggle-wrapper {
    display: flex;
}
.features-toggle-wrapper.hidden {
    opacity: 0;
    max-height: 0;
    margin: 0;
    pointer-events: none;
}
.features-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 1rem;
}
.features-audience-note {
    max-width: 760px;
    margin: 32px auto 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+10) {
    display: none;
}
.showcase-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 80px 0;
}
.showcase-item:nth-child(even) {
    direction: rtl;
}
.showcase-item:nth-child(even) > * {
    direction: ltr;
}
.showcase-content {
    max-width: 520px;
}
@media (min-width: 1025px) {
.showcase-item-integration {
        grid-template-columns: 1fr;
    }
.showcase-item-integration .showcase-content {
        display: grid;
        /* Match the alternating design: this is the 2nd (even) showcase, so the
           hub sits on the LEFT and the text on the right. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 80px;
        max-width: 100%;
        align-items: center;
        direction: ltr;
    }
.showcase-item-integration .integration-hub {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
.showcase-item-integration .showcase-copy-head {
        grid-column: 2;
        grid-row: 1;
        max-width: 520px;
        align-self: end;
    }
.showcase-item-integration .showcase-copy-body {
        grid-column: 2;
        grid-row: 2;
        max-width: 520px;
        align-self: start;
    }
}
.showcase-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--color-blue-light);
    color: var(--color-blue-dark);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
    text-transform: uppercase;
}
.showcase-content h3 {
    font-size: 1.75rem;
    margin-bottom: 20px;
}
.showcase-content p {
    font-size: 1.05rem;
    margin-bottom: 24px;
}
.showcase-features {
    list-style: none;
}
.showcase-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    color: var(--color-text-secondary);
}
.showcase-features li i {
    color: var(--color-green);
    font-size: 1.1rem;
    margin-top: 2px;
}
.showcase-cta {
    margin-top: 24px;
}
.showcase-image {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.showcase-slideshow {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-dark, #1a1a2e);
}
.showcase-slideshow-track {
    position: relative;
    width: 100%;
    height: 100%;
}
@media (prefers-reduced-motion: reduce) {
.showcase-slide {
        transition: none !important;
        transform: none !important;
    }
}
.showcase-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
    overflow: hidden;
}
.showcase-slide picture {
    display: block;
    width: 100%;
    height: 100%;
}
.showcase-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.showcase-slide.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.showcase-slideshow-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.showcase-slideshow:hover .showcase-slideshow-controls {
    opacity: 1;
}
@media (hover: none) {
.showcase-slideshow-controls {
        opacity: 1;
    }
}
.showcase-slideshow-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}
.showcase-slideshow-btn:hover {
    background: var(--color-white);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.showcase-slideshow-btn:active {
    transform: scale(0.95);
}
.showcase-slideshow-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}
.showcase-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
.showcase-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
}
.showcase-dot:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.15);
}
.showcase-dot.active {
    background: var(--color-white);
    border-color: var(--color-white);
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.showcase-slideshow-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-green-accessible);
    color: var(--color-white);
    padding: 20px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 10;
}
.showcase-caption-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 500;
}
.showcase-caption-content i {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: rgb(255 255 255);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
    transition: transform 0.3s ease;
    color: #4caf50;
}
.showcase-caption-content i::before {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1;
}
.showcase-caption-content span {
    transition: opacity 0.3s ease;
}
.showcase-slide-more {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--color-yellow-button);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
    transform: scale(0) rotate(-10deg);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.showcase-slide.active .showcase-slide-more {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    transition-delay: 0.4s;
}
.showcase-slide-more i {
    font-size: 1rem;
    color: #fff;
}
@media (max-width: 768px) {
.showcase-image.showcase-slideshow {
        aspect-ratio: 1;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
    }
.showcase-slideshow-controls {
        opacity: 1;
        padding: 0 8px;
    }
.showcase-slideshow-btn {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
.showcase-slideshow-dots {
        display: none;
    }
.showcase-slideshow-caption {
        padding: 10px 14px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
.showcase-caption-content {
        font-size: 0.8rem;
        gap: 9px;
    }
.showcase-caption-content i {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.75rem;
    }
.showcase-slide-more {
        top: 12px;
        right: 12px;
        padding: 6px 12px;
        font-size: 0.75rem;
        gap: 6px;
    }
}
.diagonal-split-container {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-dark, #1a1a2e);
}
.diagonal-split-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.3s ease,
                z-index 0s 0.5s;
    cursor: pointer;
}
.diagonal-split-image:hover {
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.3s ease,
                z-index 0s 0s;
}
.diagonal-split-image picture {
    display: block;
    width: 100%;
    height: 100%;
}
.diagonal-split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.diagonal-split-left {
    clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%);
    z-index: 2;
}
.diagonal-split-right {
    clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
    z-index: 2;
}
.diagonal-split-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 46%,
        rgba(255, 255, 255, 0.15) 46%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.15) 54%,
        transparent 54%
    );
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s ease;
}
.diagonal-split-label {
    position: absolute;
    padding: 10px 18px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 4;
    box-shadow: var(--shadow-md);
}
.diagonal-split-left .diagonal-split-label {
    top: 20px;
    left: 20px;
    background: var(--color-green-accessible);
}
.diagonal-split-right .diagonal-split-label {
    bottom: 20px;
    right: 20px;
    background: var(--color-blue-accessible);
}
.diagonal-split-container:hover .diagonal-split-left:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    z-index: 5;
}
.diagonal-split-container:hover .diagonal-split-left:hover ~ .diagonal-split-divider {
    opacity: 0;
}
.diagonal-split-container:hover .diagonal-split-right:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    z-index: 5;
}
.diagonal-split-container .diagonal-split-left:hover .diagonal-split-label {
    background: var(--color-green-hover);
    transform: scale(1.05);
}
.diagonal-split-container .diagonal-split-right:hover .diagonal-split-label {
    background: var(--color-blue-hover);
    transform: scale(1.05);
}
.diagonal-split-container:hover .diagonal-split-image:not(:hover) .diagonal-split-label {
    opacity: 0.4;
}
.diagonal-split-image:hover img {
    transform: scale(1.02);
}
.diagonal-split-container:has(.diagonal-split-image:hover) .diagonal-split-divider {
    opacity: 0;
}
.integration-hub {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.integration-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.integration-logo-center {
    width: 120px;
    height: 120px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(59, 180, 196, 0.3);
    position: relative;
    z-index: 10;
}
.integration-logo-center img {
    width: 80%;
    height: auto;
    object-fit: contain;
}
.integration-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid var(--color-blue);
    animation: pulse-ring 6s ease-out infinite;
    opacity: 0;
}
.integration-pulse.pulse-2 {
    animation-delay: 2s;
}
.integration-pulse.pulse-3 {
    animation-delay: 4s;
}
@keyframes pulse-ring {
    0% {
        width: 120px;
        height: 120px;
        opacity: 0.5;
    }
    100% {
        width: 350px;
        height: 350px;
        opacity: 0;
    }
}
.integration-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.integration-line {
    stroke: var(--color-blue);
    stroke-width: 2;
    stroke-dasharray: 8 4;
    stroke-linecap: round;
    opacity: 0.4;
    animation: line-flow 2s linear infinite;
}
.integration-line.line-2 { animation-delay: 0.25s; }
.integration-line.line-3 { animation-delay: 0.5s; }
.integration-line.line-4 { animation-delay: 0.75s; }
.integration-line.line-5 { animation-delay: 1s; }
.integration-line.line-6 { animation-delay: 1.25s; }
.integration-line.line-7 { animation-delay: 1.5s; }
.integration-line.line-8 { animation-delay: 1.75s; }
@keyframes line-flow {
    0% {
        stroke-dashoffset: 24;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
.integration-logos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}
.integration-logo-item {
    position: absolute;
    width: 100px;
    height: 50px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: float-subtle 4s ease-in-out infinite;
}
.integration-logo-item:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
    z-index: 20;
}
.integration-logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
@keyframes float-subtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
.integration-logo-item:nth-child(2) { animation-delay: 0.5s; }
.integration-logo-item:nth-child(3) { animation-delay: 1s; }
.integration-logo-item:nth-child(4) { animation-delay: 1.5s; }
.integration-logo-item:nth-child(5) { animation-delay: 2s; }
.integration-logo-item:nth-child(6) { animation-delay: 2.5s; }
.integration-logo-item:nth-child(7) { animation-delay: 3s; }
.integration-logo-item:nth-child(8) { animation-delay: 3.5s; }
.logo-pos-1 {
    top: 8%;
    left: 8%;
}
.logo-pos-2 {
    top: 2%;
    left: calc(50% - 50px);
}
.logo-pos-3 {
    top: 8%;
    right: 8%;
}
.logo-pos-4 {
    top: calc(50% - 25px);
    right: 3%;
}
.logo-pos-5 {
    bottom: 8%;
    right: 8%;
}
.logo-pos-6 {
    bottom: 2%;
    left: calc(50% - 50px);
}
.logo-pos-7 {
    bottom: 8%;
    left: 8%;
}
.logo-pos-8 {
    top: calc(50% - 25px);
    left: 3%;
}
@media (max-width: 768px) {
.integration-logo-center {
        width: 80px;
        height: 80px;
    }
.integration-pulse {
        width: 80px;
        height: 80px;
    }
@keyframes pulse-ring {
        0% {
            width: 80px;
            height: 80px;
            opacity: 0.8;
        }
        100% {
            width: 200px;
            height: 200px;
            opacity: 0;
        }
    }
.integration-logo-item {
        width: 70px;
        height: 35px;
        padding: 6px 10px;
    }
}
.comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.comparison-scroll-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.comparison-scroll-hint i {
    color: var(--color-green);
    animation: comparison-scroll-nudge 1.6s ease-in-out infinite;
}
@keyframes comparison-scroll-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
.comparison-scroll-hint i { animation: none; }
}
.comparison-table {
    width: 100%;
    /* On narrow screens the wrapper scrolls horizontally rather than squishing
       the 3 columns illegibly — same pattern as the legal tables. Keeps the
       full table (and its text) in the mobile-indexed DOM for SEO. */
    min-width: 520px;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.comparison-table th,
.comparison-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}
.comparison-table thead th {
    background: var(--color-bg);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-primary);
}
.comparison-table thead th:first-child {
    width: 45%;
}
.comparison-table tbody td:first-child {
    font-weight: 500;
    color: var(--color-text-primary);
}
.comparison-table .highlight-col {
    background: var(--color-blue-light);
    text-align: center;
}
.comparison-table tbody td:not(:first-child) {
    text-align: center;
}
.comparison-table thead th:not(:first-child) {
    text-align: center;
}
.comparison-table .cell-note {
    font-size: inherit;
    /* darkened from --color-text-muted: on the pale blue .highlight-col tint
       the muted gray is only 4.44:1 */
    color: #646c79;
    margin-left: 4px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
}
.comparison-table td a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.comparison-table thead .highlight-col {
    background: var(--color-blue-accessible);
    color: white;
}
.check-yes {
    color: var(--color-green);
    font-size: 1.2rem;
}
.check-no {
    color: var(--color-red);
    font-size: 1.2rem;
}
.pricing-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255,255,255,0.2);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.price-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}
.price-currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.price-value {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}
.price-period {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}
.price-setup {
    margin-top: 12px;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}
.price-setup strong {
    color: var(--color-text-primary);
}
.story-section {
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
    color: white;
}
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}
.story-image-wrapper {
    text-align: left;
}
.story-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    object-fit: cover;
}
.story-image-wrapper .story-signature {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.story-signature-content {
    text-align: left;
}
.story-image-wrapper .story-cta {
    margin-top: 0;
    align-self: stretch;
    justify-content: center;
}
.story-content h2 {
    color: white;
    margin-bottom: 24px;
}
.story-content {
    position: relative;
    padding: 26px 38px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-xl);
}
.story-content p {
    color: rgba(255,255,255,0.9);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}
.story-content a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}
.story-content a:hover {
    text-decoration-color: #fff;
}
.story-signature {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.signature-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}
.signature-title {
    font-size: 1rem;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}
.signature-role {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    margin-top: 4px;
}
.story-cta {
    margin-top: 32px;
}
.btn-outline-light {
    background: transparent;
    color: white;
    border: 2px solid rgba(255,255,255,0.5);
}
.btn-outline-light:hover {
    background: rgba(255,255,255,0.1);
    border-color: white;
    color: white;
}
.faq-grid {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    overflow: hidden;
}
.faq-heading {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
    transition: background var(--transition-fast);
}
.faq-question:hover {
    background: var(--color-bg);
}
.faq-question i {
    color: var(--color-blue);
    transition: transform var(--transition-normal);
}
.faq-item.active .faq-question i {
    transform: rotate(180deg);
}
.faq-answer {
    padding: 0 24px 24px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}
.js .faq-answer {
    display: none;
}
.js .faq-item.active .faq-answer {
    display: block;
}
.cta-section {
    /* Brand-teal tint instead of neutral gray: 13 pages end with a gray
       .section-alt directly before this band, and two near-identical grays
       blended into each other. blue-light is an approved tinted section bg
       (link contrast verified, see --color-link) and separates by hue. */
    background: var(--color-blue-light);
    text-align: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.cta-pricing-combined {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.cta-bg-pattern {
    display: none;
}
.cta-pricing-left {
    min-width: 0;
    color: var(--color-text-primary);
    text-align: left;
}
.cta-eyebrow {
    display: inline-block;
    background: var(--color-green-accessible);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}
.cta-pricing-left h2 {
    font-size: 2.4rem;
    margin-bottom: 16px;
    color: var(--color-text-primary);
    line-height: 1.2;
    text-align: left;
}
.cta-description {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    margin-bottom: 32px;
    line-height: 1.7;
}
.cta-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    display: grid;
    gap: 14px;
}
.cta-features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: var(--color-text-primary);
}
.cta-features-list .feature-icon {
    width: 24px;
    height: 24px;
    background: var(--color-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0px;
}
.cta-features-list .feature-icon i {
    font-size: 0.7rem;
    color: white;
}
.cta-trust-badges {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.trust-badge i {
    color: var(--color-green);
    font-size: 0.9rem;
}
.cta-pricing-right {
    position: relative;
    min-width: 0;
}
.pricing-card {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
    border: 2px solid var(--color-blue);
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -12px rgba(0,0,0,0.5);
}
.pricing-card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 30px 30px 25px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.pricing-card-header .pricing-badge {
    background: linear-gradient(135deg, var(--color-green), var(--color-green-dark));
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pricing-card-header .price-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}
.pricing-card-header .price-currency {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text-muted);
    align-self: flex-start;
    margin-top: 8px;
}
.pricing-card-header .price-value {
    font-size: 4rem;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1;
    letter-spacing: -2px;
}
.pricing-card-header .price-period {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    font-weight: 500;
}
.pricing-card-header .price-setup {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
}
.pricing-card-body {
    padding: 30px;
}
.pricing-card-body .btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.btn-glow {
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4);
    position: relative;
    overflow: hidden;
}
.btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}
.btn-glow:hover::before {
    left: 100%;
}
.btn-glow:hover {
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
    transform: translateY(-2px);
}
.pricing-guarantees {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.pricing-guarantees span {
    display: flex;
    /* center (not flex-start): when a label wraps to two lines (the
       30-dages-garanti item) the icon centers against the whole text block
       instead of riding the first line */
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}
.pricing-guarantees i {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.pricing-guarantees span:has(> span) {
    display: block;
    text-align: center;
    text-wrap: balance;
    font-weight: 600;
}
.pricing-card-footer {
    background: #f8fafc;
    padding: 16px 30px;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.05);
}
.pricing-card-footer p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.pricing-card-footer a {
    color: var(--color-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}
.pricing-card-footer a:hover {
    color: var(--color-blue-dark);
    text-decoration: underline;
}
@media (max-width: 900px) {
.cta-pricing-combined {
        padding: 0 20px;
    }
.cta-pricing-view {
        grid-template-columns: 1fr;
        gap: 40px;
    }
.cta-pricing-left {
        text-align: left;
    }
.cta-pricing-left h2 {
        font-size: 2rem;
        text-align: left;
    }
.cta-features-list {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
.cta-features-list li {
        justify-content: flex-start;
    }
.cta-trust-badges {
        justify-content: center;
        gap: 8px;
    }
.trust-badge {
        background: rgba(255, 255, 255, 0.75);
        border: 1px solid var(--color-border-light);
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
.pricing-card-header .price-value {
        font-size: 3.5rem;
    }
}
@media (max-width: 480px) {
.cta-section {
        padding: 60px 0;
    }
.pricing-guarantees {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}
.cta-pricing-combined {
    position: relative;
    /* Allow shadows to show - no overflow: hidden */
}
.cta-view {
    opacity: 1;
    transition: opacity 0.35s ease;
    min-height: 480px; /* Consistent height for both views */
}
.cta-pricing-view {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 50px;
    align-items: center;
}
.cta-pricing-view:not(.active) {
    display: none;
}
.cta-form-view {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
}
.cta-form-view:not(.active) {
    display: none;
}
.cta-view.exiting {
    opacity: 0;
    pointer-events: none;
}
.cta-view.entering {
    opacity: 0;
}
.cta-form-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--color-text-primary);
    text-align: left;
    min-width: 0;
}
.cta-form-left .cta-eyebrow {
    display: block;
    margin-bottom: 8px;
}
.cta-form-left h2 {
    font-size: 2.4rem;
    margin-bottom: 16px;
    color: var(--color-text-primary);
    line-height: 1.2;
}
.cta-form-left .cta-description {
    margin-bottom: 28px;
}
.cta-form-left .cta-features-list {
    margin-bottom: 28px;
}
.cta-contact-alt {
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}
.cta-contact-alt p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.contact-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}
.contact-phone:hover {
    color: var(--color-blue-dark);
}
.contact-phone i {
    font-size: 0.95rem;
}
.cta-form-right {
    display: flex;
    justify-content: center;
    /* Grid items default to min-width:auto and won't shrink below their
       content, which pushed this column (and the whole card) past the
       viewport. Allow it to shrink to its track. */
    min-width: 0;
}
.contact-form-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 20px;
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 1;
}
.cta-form-right .contact-form-card {
    max-width: none;
    padding: 28px;
}
.contact-form-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 12px;
    transition: color 0.2s ease, transform 0.2s ease;
}
.contact-form-back:hover {
    color: var(--color-blue);
    transform: translateX(-4px);
}
.contact-form-back i {
    font-size: 0.85rem;
}
.contact-form-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cta-form-right .contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}
.cta-form-right .contact-form-grid .form-group-full {
    grid-column: 1 / -1;
}
.contact-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.contact-form label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.contact-form label .required {
    color: var(--color-red);
}
.contact-form .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.contact-form .input-wrapper i {
    position: absolute;
    left: 12px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
    transition: color 0.2s ease;
}
.contact-form .input-wrapper.textarea-wrapper i {
    top: 12px;
    align-self: flex-start;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 10px 10px 36px;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--color-text-primary);
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form textarea {
    resize: vertical;
    min-height: 70px;
}
.contact-form select {
    width: 100%;
    padding: 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--color-text-primary);
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(59, 180, 196, 0.1);
}
@media (hover: none) {
.contact-form input,
    .contact-form textarea,
    .contact-form select {
        font-size: 16px;
    }
.contact-form input,
    .contact-form select {
        min-height: 44px;
    }
}
.contact-form input.input-error {
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px var(--color-red-light);
}
.turnstile-fallback {
    margin: 10px 0 0;
    font-size: 0.9rem;
    color: var(--color-red-dark);
}
.turnstile-fallback i {
    margin-right: 6px;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    outline: 3px solid var(--color-blue-accessible);
    outline-offset: 2px;
}
.contact-form input:focus + i,
.contact-form textarea:focus + i,
.contact-form .input-wrapper:focus-within i {
    color: var(--color-blue);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #64748b; /* darkened from #94a3b8 for WCAG AA (~4.6:1 on white) */
}
.cf-turnstile {
    display: flex;
    justify-content: center;
    margin: 0;
}
.contact-form-footer {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.contact-form-footer .btn-full {
    width: 100%;
    padding: 12px 20px;
}
.form-privacy {
    /* Inline text (not flex): a flex row would treat the link and the trailing
       period as separate items, so the link couldn't flow inline with the
       sentence and wrapped off on its own with a stray gap. */
    text-align: center;
    line-height: 1.5;
    font-size: 0.875rem; /* keep readable small print at ≥14px */
    color: var(--color-text-muted);
    margin: 0;
}
.label-optional {
    font-weight: 400;
    color: var(--color-text-muted);
}
.form-privacy i {
    color: var(--color-green);
    font-size: 0.8rem;
    margin-right: 4px;
}
.form-privacy a {
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-link);
}
.form-optin {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    font-size: 0.875rem; /* keep readable small print at ≥14px */
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
    cursor: pointer;
}
.form-optin input[type="checkbox"] {
    flex-shrink: 0;
    /* 24px = WCAG 2.5.8 minimum tap target (axe target-size) — the checkbox
       sits inline in the form grid, so it can't lean on surrounding spacing */
    width: 24px;
    height: 24px;
    margin: 0;
    /* The accessible (darker) green like the buttons: against the bright
       brand green the browser auto-picks a BLACK checkmark; the darker
       shade gets a white one, matching the rest of the interactive UI */
    accent-color: var(--color-green-accessible);
    cursor: pointer;
}
.turnstile-row {
    margin-top: 2px;
    overflow: hidden;
    animation: turnstileSlideIn 0.4s ease 0.2s forwards;
    max-height: 0;
    opacity: 0;
}
@keyframes turnstileSlideIn {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 80px;
        opacity: 1;
    }
}
.turnstile-row #turnstileWidget {
    width: 100% !important;
}
.contact-form-message {
    margin-top: 14px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 500;
    overflow: hidden;
    animation: messageSlideIn 0.35s ease forwards;
}
@keyframes messageSlideIn {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
    }
    to {
        opacity: 1;
        max-height: 100px;
        padding-top: 16px;
        padding-bottom: 16px;
        margin-top: 14px;
    }
}
.contact-form-message.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.contact-form-message.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.contact-form-success {
    text-align: center;
    padding: 20px 10px;
    animation: fadeInUp 0.5s ease;
}
.success-next-steps {
    text-align: left;
    max-width: 420px;
    margin: 0 auto 14px;
    padding-left: 22px;
}
.success-next-steps li {
    margin-bottom: 8px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.success-next-steps li strong {
    color: var(--color-text-primary);
}
.success-story-tip {
    font-size: 0.95rem;
    margin-bottom: 4px;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.contact-form-success .success-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-green), #22c55e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    animation: scaleIn 0.5s ease 0.2s both;
}
@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
.contact-form-success .success-icon i {
    font-size: 1.8rem;
    color: white;
}
.contact-form-success p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}
@media (max-width: 900px) {
.cta-form-view {
        grid-template-columns: 1fr;
        gap: 30px;
    }
.cta-form-left {
        text-align: center;
    }
.cta-form-left h2 {
        font-size: 2rem;
    }
.cta-form-left .cta-features-list {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
.cta-contact-alt {
        text-align: center;
    }
.contact-form-card {
        max-width: 100%;
    }
}
@media (max-width: 480px) {
.contact-form-card {
        padding: 20px;
    }
}
.cta-fading {
    opacity: 0 !important;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.cta-hidden {
    display: none !important;
}
html.js .contact-inline {
    display: none;
    opacity: 0;
}
html.js .contact-inline.active {
    display: block;
}
html.js .contact-inline.visible {
    opacity: 1;
}
@media (max-width: 600px) {
.contact-inline .contact-form-grid,
    .cta-form-right .contact-form-grid {
        grid-template-columns: 1fr;
    }
}
.footer {
    background: var(--color-text-primary);
    color: white;
    padding: 60px 0 30px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.28fr 0.6fr 0.7fr 1.1fr;
    gap: 64px;
    margin-bottom: 40px;
}
.footer-links a.footer-see-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    /* Brand teal nudged lighter: --color-blue is 4.45:1 on the #2c3e50 footer,
       just under the 4.5:1 AA minimum. */
    color: #44bccc;
    transition: gap var(--transition-fast), color var(--transition-fast);
}
.footer-see-all i {
    font-size: 0.8em;
}
.footer-links a.footer-see-all:hover {
    gap: 11px;
    color: #fff;
}
.footer-brand-links {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.footer-brand-links li {
    margin-bottom: 0;
}
.footer-brand-links a {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.8rem;
    line-height: 1.2;
    /* 0.75 alpha: ≥4.5:1 AA on the chip's lightened translucent background
       (matches .footer-link-btn — 0.6 only clears AA on plain footer navy) */
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.footer-brand-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.1rem;
    /* 0.75 alpha: ≥4.5:1 AA on the lightened translucent background
       (same rationale as .footer-brand-links a) */
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.footer-social a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.footer-brand .logo {
    margin-bottom: 16px;
}
.footer-brand p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
}
.footer-title {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.footer-links {
    list-style: none;
}
.footer-links li {
    margin-bottom: 12px;
}
.footer-links a {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    transition: color var(--transition-fast);
}
.footer-links:not(.footer-brand-links) a {
    display: inline-block;
    padding: 4px 0;
}
.footer-links a:hover {
    color: white;
}
.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
}
.footer-contact-item i {
    color: var(--color-blue);
    width: 20px;
}
.footer-contact-item-stack {
    align-items: flex-start;
}
.footer-contact-item-stack i {
    margin-top: 4px;
}
.footer-contact-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-contact-value {
    white-space: nowrap;
}
.footer-contact-item a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.footer-contact-item a:hover {
    color: var(--color-white);
}
.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.footer-copyright {
    /* 0.5 alpha lands at 4.05:1 on the footer navy; 0.6 passes 4.5:1 AA. */
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
}
@media (max-width: 1024px) {
.hero-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
        text-align: center;
    }
.hero-content,
    .hero-visual {
        display: contents;
    }
.hero-badge { order: 1; align-self: center; margin-bottom: 16px; }
.hero-content h1 { order: 2; margin-bottom: 20px; }
.hero-description { order: 3; max-width: 680px; margin: 0 auto 24px; }
.hero-image-wrapper { order: 4; width: 100%; max-width: 720px; min-width: 0; margin: 0 auto 24px; }
.hero-features-grid { order: 5; width: 100%; max-width: 720px; margin: 0 auto 28px; }
.hero-cta {
        order: 6;
        justify-content: center;
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
    }
.hero-cta .btn {
        flex: 1 1 0;
        min-width: 0;
    }
.hero-cta-notes { order: 7; max-width: 640px; margin: 20px auto 0; }
.hero-stats { order: 8; justify-content: center; margin-top: 28px; }
.hero-testimonial { order: 9; width: 100%; max-width: 720px; margin: 28px auto 0; }
.features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
.showcase-item {
        grid-template-columns: 1fr;
        gap: 40px;
    }
.showcase-item:nth-child(even) {
        direction: ltr;
    }
.showcase-content {
        max-width: 100%;
    }
.story-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
.story-image-wrapper {
        text-align: center;
    }
.story-image-wrapper picture,
    .story-section .story-image,
    .story-image {
        display: block;
        width: 100%;
        margin: 0 auto;
    }
.story-image-wrapper .story-signature {
        align-items: center;
    }
.story-signature-content {
        text-align: center;
    }
.footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}
@media (min-width: 1120px) and (max-width: 1200px) {
.nav-links {
        gap: 22px;
    }
}
@media (min-width: 926px) and (max-width: 1119px) {
.logo-img {
        height: 48px;
    }
.nav {
        gap: 12px;
    }
.nav-links {
        /* 10px is the fit-minimum at 926px; grow toward 20px as room appears */
        gap: clamp(10px, 5vw - 36px, 20px);
    }
.nav-links a {
        font-size: 0.875rem;
    }
.nav-cta .btn {
        padding: 10px 14px;
        font-size: 0.875rem;
    }
}
@media (max-width: 1199px) {
.nav-links .has-dropdown {
        position: static;
    }
.nav-dropdown-mega {
        left: 16px;
        right: 16px;
        min-width: 0;
        max-width: none;
        transform: translate(0, 8px);
    }
.has-dropdown:hover .nav-dropdown-mega,
    .has-dropdown:focus-within .nav-dropdown-mega,
    .has-dropdown.open .nav-dropdown-mega {
        transform: translate(0, 0);
    }
}
@media (max-width: 925px) {
.nav-links {
        display: none;
    }
.nav-cta .btn {
        padding: 10px 18px;
        font-size: 0.9rem;
        min-height: 44px;
    }
.mobile-menu-toggle {
        display: block;
    }
.nav {
        gap: 16px;
    }
html:not(.js) .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px 16px;
        row-gap: 8px;
    }
html:not(.js) .mobile-menu-toggle {
        display: none;
    }
}
@media (max-width: 600px) {
.nav-cta {
        display: none;
    }
html:not(.js) .nav-cta {
        display: flex;
    }
}
@media (max-width: 420px) {
.header-inner {
        padding: 12px 16px;
    }
.logo-img {
        height: 45px;
    }
.mobile-menu-toggle {
        font-size: 1.25rem;
    }
.nav-cta .btn {
        padding: 8px 14px;
        font-size: 0.85rem;
        /* keep the compact look but preserve the 44px min tap target
           (.btn is inline-flex with centered content) */
        min-height: 44px;
    }
.container,
    .container-wide {
        padding: 0 14px;
    }
.hero-inner {
        padding: 0 14px;
    }
h1 {
        font-size: 1.8rem;
    }
.hero-description {
        font-size: 1rem;
        margin-bottom: 24px;
    }
.btn-large {
        padding: 14px 24px;
        font-size: 1rem;
    }
.hero-stats {
        gap: 24px;
        margin-top: 32px;
        padding-top: 24px;
    }
.hero-features-grid {
        gap: 12px;
        margin-top: 16px;
    }
.hero-feature-card {
        padding: 14px 16px;
    }
}
@media (max-width: 768px) {
.hero {
        padding: 120px 0 60px;
    }
.section {
        padding: 60px 0;
    }
.features-grid,
    .problem-grid {
        grid-template-columns: 1fr;
    }
.feature-modal {
        width: 95%;
        max-height: 85vh;
    }
.feature-modal-image {
        height: 180px;
    }
.feature-modal-image:has(.feature-modal-tv-frame[style*="block"]) {
        padding: 0 18px;
    }
.feature-modal-dynamic-badge span {
        display: none;
    }
.feature-modal-dynamic-badge {
        padding: 5px 7px;
        gap: 0;
    }
.feature-modal-content {
        padding: 20px 24px 24px;
    }
.feature-modal-header {
        gap: 12px;
    }
.feature-modal-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
.feature-modal-title {
        font-size: 1.2rem;
    }
.pricing-card {
        margin: 0 16px;
    }
.comparison-table th,
    .comparison-table td {
        padding: 14px 16px;
        font-size: 0.9rem;
    }
}
@media (max-width: 480px) {
.btn {
        width: 100%;
    }
.showcase-cta .fa-arrow-right {
        display: none;
    }
.hero-cta {
        flex-wrap: nowrap;
        gap: 10px;
    }
.hero-cta-icon {
        display: none;
    }
.hero-cta .btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
        white-space: nowrap;
    }
.price-value {
        font-size: 3rem;
    }
.hero-features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
.hero-feature-card {
        padding: 12px 14px;
    }
.hero-feature-icon {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        font-size: 1rem;
    }
.hero-feature-text {
        font-size: 0.85rem;
    }
.hero-feature-text span {
        font-size: 0.8rem;
    }
.hero-testimonial {
        padding: 16px;
        gap: 16px;
    }
}
@media (max-width: 430px) {
.hero-cta {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: stretch;
    }
.hero-cta .btn {
        flex: 1 1 auto;
        width: 100%;
        white-space: normal;
        min-height: 44px;
    }
}
@media (max-width: 320px) {
.container,
    .container-wide {
        padding: 0 10px;
    }
.header-inner {
        padding: 10px 10px;
    }
.hero-inner {
        padding: 0 10px;
    }
.hero {
        padding: 100px 0 40px;
    }
h1 {
        font-size: 1.5rem;
    }
h2 {
        font-size: 1.3rem;
    }
h3 {
        font-size: 1.1rem;
    }
.hero-description {
        font-size: 0.95rem;
    }
.hero-badge {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
.btn {
        padding: 10px 16px;
        font-size: 0.85rem;
        /* keep a 44px tap target even with the tighter padding */
        min-height: 44px;
    }
.btn-large {
        padding: 12px 20px;
        font-size: 0.9rem;
        min-height: 44px;
    }
.logo-img {
        height: 36px;
    }
.hero-stats {
        gap: 16px;
    }
.hero-stat-value {
        font-size: 1.5rem;
    }
.hero-stat-label {
        font-size: 0.8rem;
    }
.section {
        padding: 50px 0;
    }
.slideshow-preview-wrapper {
        border-radius: 8px;
    }
.hero-feature-card {
        padding: 10px 12px;
        gap: 10px;
    }
.hero-feature-icon {
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        font-size: 0.9rem;
    }
.hero-feature-text {
        font-size: 0.8rem;
    }
.hero-feature-text span {
        font-size: 0.75rem;
    }
.hero-testimonial {
        padding: 12px;
        gap: 12px;
        flex-direction: column;
    }
.hero-testimonial-author {
        padding-left: 0;
        border-left: none;
        padding-top: 12px;
        border-top: 1px solid var(--color-border-light);
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}
.js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 4000;
    padding: 12px 20px;
    background: var(--color-blue-dark);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top var(--transition-fast);
}
.skip-link:focus {
    top: 12px;
}
.skip-link:hover,
.skip-link:focus {
    color: #fff;
}
#main-content {
    outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-blue-accessible);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
html {
        scroll-behavior: auto;
    }
*,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
.js .reveal {
        opacity: 1;
        transform: none;
    }
}
.comparison-note {
    text-align: center;
    margin-top: 32px;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.comparison-note i {
    color: var(--color-blue);
}
.comparison-cta {
    margin-top: 40px;
}
.features-badge.tooltip-visible::after,
.features-badge.tooltip-visible::before,
.features-badge:focus-visible::after,
.features-badge:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px) {
.showcase-image.diagonal-split-container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
        background: none;
        overflow: visible;
        box-shadow: none;
    }
.diagonal-split-image {
        position: relative;
        width: 100%;
        height: auto;
        clip-path: none !important;
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-md);
        cursor: default;
        /* Card = caption bar on top + screenshot below. The floating pill
           labels covered the (already dense) UI screenshots when stacked;
           as attached title bars they read as intentional window chrome. */
        display: flex;
        flex-direction: column;
    }
.diagonal-split-image picture {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
    }
.diagonal-split-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
.diagonal-split-label {
        position: static;
        border-radius: 0;
        box-shadow: none;
        justify-content: center;
        padding: 10px 14px;
    }
.diagonal-split-divider {
        display: none;
    }
}
@media (max-width: 768px) {
.contact-form input,
    .contact-form textarea {
        font-size: 16px;
    }
.contact-form input {
        min-height: 46px;
    }
#contactSubmitBtn {
        width: 100%;
        min-height: 48px;
    }
.feature-modal {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}
.step-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 40px 28px 28px;
    box-shadow: var(--shadow-md);
    text-align: center;
}
.step-number {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-blue-accessible);
    color: var(--color-white);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}
.step-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--color-white);
}
.step-icon.green { background: linear-gradient(135deg, #4caf50, #2e7d32); }
.step-icon.blue { background: linear-gradient(135deg, #3bb4c4, #2f8f9d); }
.step-icon.yellow { background: linear-gradient(135deg, #c4ab3b, #9a8730); }
.step-card h3 {
    margin-bottom: 10px;
}
.step-card p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}
@media (max-width: 900px) {
.steps-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}
.pricing-cta-note {
    text-align: center;
    margin: 10px 0 14px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* Safe-area padding on all sides so the bar stays tappable on notched
       phones (incl. landscape) */
    padding: 12px calc(16px + env(safe-area-inset-right))
             calc(12px + env(safe-area-inset-bottom))
             calc(16px + env(safe-area-inset-left));
    background: var(--color-white);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(110%);
    /* visibility keeps the off-screen bar out of the tab order and the
       accessibility tree (same recipe as .mobile-menu): delay the visibility
       flip until the slide-out transition has finished. */
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.mobile-sticky-cta.visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
}
.mobile-sticky-cta-price {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    /* min-width:0 lets the price column shrink and its subtext wrap to two
       lines instead of clipping "Ekskl. moms ·" off on narrower pages */
    min-width: 0;
}
.mobile-sticky-cta-price strong {
    font-size: 1.05rem;
    color: var(--color-text-primary);
}
.mobile-sticky-cta-price span {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    /* wrap rather than clip so the full "Ekskl. moms · ingen binding" shows */
    white-space: normal;
}
.mobile-sticky-cta .btn {
    padding: 12px 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 600px) {
.mobile-sticky-cta {
        display: flex;
    }
}
@media (max-width: 600px) {
.footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
.footer-grid > .footer-brand { order: 1; }
.footer-grid > .footer-column:nth-child(4) { order: 2; }
.footer-grid > .footer-column:nth-child(2) { order: 3; }
.footer-grid > .footer-column:nth-child(3) { order: 4; }
.footer-bottom {
        flex-direction: column;
        text-align: center;
    }
.footer-brand,
    .footer-column {
        text-align: center;
    }
.footer-brand .logo img {
        margin: 0 auto;
    }
.footer-brand-links,
    .footer-social {
        justify-content: center;
    }
.footer-contact-item {
        justify-content: center;
        /* wrapped lines (the address) stay flush against their icon instead
           of centering away from it under the inherited text-align */
        text-align: left;
    }
.footer {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
.footer-links:not(.footer-brand-links) a {
        padding: 8px 0;
    }
}
.cta-feature-note {
    margin: -12px 0 24px;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-muted);
}
.faq-toggle-wrapper {
    display: none;
    justify-content: center;
    margin-top: 24px;
}
.faq-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 1rem;
}
@media (max-width: 900px) {
.cta-pricing-view,
    .cta-form-view {
        grid-template-columns: 1fr;
        gap: 36px;
    }
.cta-view {
        min-height: 0;
    }
.cta-features-list {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}
@media (max-width: 768px) {
.hero {
        padding: 104px 0 48px;
    }
.hero-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
.hero-content,
    .hero-visual {
        display: contents;
    }
.hero-badge { order: 1; margin-bottom: 16px; align-self: center; }
.hero-content h1 { order: 2; margin-bottom: 20px; }
.hero-description { order: 3; margin-bottom: 20px; }
.hero-image-wrapper { order: 4; margin: 0 0 20px; }
.hero-features-grid { order: 5; margin: 0 0 24px; }
.hero-cta { order: 6; justify-content: center; }
.hero-cta-notes { order: 7; }
.hero-stats { order: 8; }
.hero-testimonial { order: 9; margin-top: 28px; }
.hero-stats {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        gap: 20px 36px;
        margin-top: 28px;
        padding-top: 24px;
    }
.hero-feature-card {
        text-align: left;
    }
.hero-stat {
        text-align: center;
    }
.hero-stat-value {
        font-size: 1.4rem;
        line-height: 1.3;
    }
.hero-stat-label {
        font-size: 0.85rem;
    }
.section {
        padding: 48px 0;
    }
.problem-section {
        padding: 48px 0;
    }
.section-header,
    .problem-section .section-header {
        margin-bottom: 24px;
    }
.problem-grid {
        gap: 14px;
    }
.problem-card {
        padding: 24px 20px;
    }
.problem-cta,
    .section-cta {
        margin-top: 28px;
    }
.features-count {
        margin-bottom: 1.25rem;
    }
.features-badge {
        font-size: 0.9rem;
        padding: 0.6rem 1.1rem;
        gap: 6px;
    }
.features-badge .info-hint {
        width: 16px;
        height: 16px;
        font-size: 0.6rem;
    }
.features-grid {
        gap: 16px;
    }
.features-toggle-wrapper {
        margin: 24px 0 0;
    }
.showcase-item {
        padding: 36px 0;
        gap: 28px;
    }
.showcase-item + .showcase-item {
        border-top: 1px solid var(--color-border-light);
    }
.showcase-item-integration .integration-hub {
        margin: 8px 0 28px;
    }
.showcase-cta {
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Span the content column like the hero CTAs (capped to the checklist
           chips' width so the button doesn't dwarf the copy above it) */
        width: 100%;
        max-width: 420px;
    }
.steps-grid {
        margin-top: 32px;
    }
.comparison-cta {
        margin-top: 24px;
    }
.js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+5) {
        display: none;
    }
.comparison-scroll-hint {
        display: flex;
    }
.comparison-table-scroll {
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
                mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }
.story-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        /* the desktop grid rule's align-items:start carries over and lets
           one-line headings shrink-wrap into a left-anchored box */
        align-items: stretch;
    }
.story-image-wrapper,
    .story-content {
        display: contents;
    }
.story-content h2 {
        order: 1;
        text-align: center;
        margin-bottom: 20px;
    }
.story-image-wrapper picture {
        order: 2;
        max-width: 330px;
        margin: 0 auto 24px;
    }
.story-grid .story-image {
        order: 2;
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
        aspect-ratio: 16 / 9;
        object-position: 0px -30px;
    }
.story-content p {
        order: 3;
        font-size: 1rem;
    }
.story-image-wrapper .story-signature {
        order: 4;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        margin-top: 8px;
        padding-top: 20px;
    }
.story-signature-content {
        text-align: center;
    }
.pricing-card {
        margin: 0;
        max-width: none;
    }
}
@media (max-width: 480px) {
.nav-cta .btn,
    .mobile-sticky-cta .btn {
        width: auto;
    }
}
@media (max-width: 768px) {
.hero-inner {
        align-items: stretch;
    }
.hero-image-wrapper,
    .hero-tv-frame {
        width: 100%;
    }
.hero-testimonial {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
        padding: 20px 18px;
    }
.hero-testimonial-author {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
.testimonial-author-row {
        justify-content: center;
    }
.hero-testimonial-link {
        justify-content: center;
    }
.feature-card {
        text-align: center;
    }
.feature-card .feature-icon {
        margin-left: auto;
        margin-right: auto;
    }
.feature-card > p {
        text-align: center;
        margin-bottom: 16px;
    }
.feature-card-actions {
        justify-content: center;
    }
.showcase-content {
        text-align: center;
    }
.showcase-features,
    .cta-features-list {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
.cta-pricing-left,
    .cta-pricing-left h2,
    .cta-form-left h2 {
        text-align: center;
    }
.cta-form-left {
        align-items: center;
        text-align: center;
    }
.cta-feature-note {
        text-align: center;
    }
.cta-contact-alt {
        text-align: center;
    }
.story-content p {
        text-align: center;
    }
.problem-card {
        padding: 20px 16px;
    }
.problem-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 12px;
        font-size: 1.25rem;
    }
.problem-card h3 {
        /* Breathing room so the guide-link's border-top divider doesn't hug
           the heading descenders */
        margin-bottom: 16px;
        font-size: 1.1rem;
    }
.js .faq-grid:not(.faq-expanded) .faq-item.faq-mobile-hidden {
        display: none;
    }
.js .faq-toggle-wrapper {
        display: flex;
    }
.faq-toggle-wrapper.hidden {
        display: none;
    }
}
@media (max-width: 768px) {
.hero-testimonial-author {
        border-left: none;
        padding-left: 0;
        gap: 8px;
    }
.hero-testimonial-link {
        margin-top: 4px;
        padding: 9px 18px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
        font-size: 0.85rem;
        color: var(--color-text-secondary);
        width: fit-content;
    }
.hero-testimonial-link i:last-child {
        margin-left: 4px;
    }
.feature-card-actions {
        position: static;
        justify-content: center;
        flex-wrap: wrap;
        /* auto (matching .feature-card > .feature-example-btn) so the actions row
           bottom-aligns exactly like the single-button cards; the gap above comes
           from the paragraph's margin-bottom, so Holdkalender's two buttons sit at
           the same height as every other card's "Se eksempel". */
        margin-top: auto;
    }
.feature-card-actions .dynamic-indicator {
        position: absolute;
        top: 20px;
        right: 20px;
    }
.feature-card-actions .dynamic-indicator::after,
    .feature-card-actions .dynamic-indicator::before {
        display: none;
    }
.feature-card > .feature-example-btn {
        position: relative;
        top: auto;
        right: auto;
        align-self: center;
        /* auto (not a fixed gap) so the button bottom-aligns and a taller +
           shorter card sharing a row on the 768px 2-col grid keep level buttons.
           The minimum gap above the button comes from the paragraph's
           margin-bottom below, so it never hugs the text when copy fills the card. */
        margin-top: auto;
    }
.feature-card > .feature-link-btn {
        align-self: center;
        margin-top: auto;
    }
.feature-card .feature-example-btn,
    .feature-card .feature-link-btn {
        white-space: nowrap;
        line-height: 1.2;
        min-height: 38px;
        align-items: center;
    }
.feature-card-actions .feature-link-btn-inline {
        display: inline-flex;
        align-self: center;
    }
.feature-link-btn-below {
        display: none;
    }
.showcase-features {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        max-width: 420px;
        margin: 0 auto;
    }
.showcase-features li {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        background: rgba(76, 175, 80, 0.09);
        border: 1px solid rgba(76, 175, 80, 0.2);
        border-radius: var(--radius-pill);
        font-size: 0.85rem;
        line-height: 1.3;
        text-align: left;
        color: var(--color-text-secondary);
    }
.showcase-features li > i {
        flex-shrink: 0;
        margin-top: 0;
        color: var(--color-green);
        font-size: 0.85rem;
    }
#integrationer .showcase-features li {
        background: rgba(196, 171, 59, 0.1);
        border-color: rgba(196, 171, 59, 0.35);
    }
#integrationer .showcase-features li > i {
        color: var(--color-yellow-dark);
    }
#administration .showcase-features li {
        background: rgba(59, 180, 196, 0.1);
        border-color: rgba(59, 180, 196, 0.35);
    }
#administration .showcase-features li > i {
        color: var(--color-blue);
    }
}
@media (max-width: 900px) {
.cta-features-list,
    .cta-form-left .cta-features-list {
        display: flex;
        /* row (base .contact-inline-list is column — stretched pills otherwise) */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: auto;
        max-width: 460px;
        margin: 0 auto 28px;
    }
.cta-features-list li {
        display: inline-flex;
        align-items: center;
        /* centered content: irrelevant for one-line chips (they hug their
           text) but keeps a chip whose label has to wrap symmetric instead
           of leaving a lopsided gap after the text (a wrapped flex item
           keeps the full line width — the box can't shrink to wrapped text) */
        justify-content: center;
        text-align: center;
        gap: 7px;
        padding: 7px 13px;
        background: rgba(76, 175, 80, 0.09);
        border: 1px solid rgba(76, 175, 80, 0.2);
        border-radius: var(--radius-pill);
        font-size: 0.85rem;
        line-height: 1.3;
        color: var(--color-text-secondary);
    }
.cta-features-list .feature-icon {
        width: auto;
        height: auto;
        background: none;
        flex-shrink: 0;
    }
.cta-features-list .feature-icon i {
        color: var(--color-green);
        font-size: 0.85rem;
    }
.cta-feature-note {
        text-align: center;
    }
}
@media (max-width: 768px) {
.showcase-slideshow-caption {
        align-items: center;
        text-align: center;
    }
.showcase-caption-content {
        justify-content: center;
    }
.showcase-caption-content span {
        display: flex;
        align-items: center;
        min-height: 2.4em;
    }
.story-image-wrapper .story-signature {
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-lg);
        border-top: none;
        padding: 20px;
        /* 16px top gap so the signature card doesn't butt against the photo above */
        margin: 16px auto 0;
        gap: 12px;
        width: 100%;
        max-width: 330px;
        box-sizing: border-box;
    }
.pricing-card-header .price-main {
        flex-wrap: wrap;
    }
.pricing-card-header .price-currency {
        width: 100%;
        text-align: center;
        align-self: auto;
        margin: 0;
        font-size: 0.95rem;
    }
.pricing-card-header {
        padding: 24px 20px 20px;
    }
.pricing-card-body {
        padding: 24px 20px;
    }
.pricing-card-body .btn {
        white-space: nowrap;
        padding: 14px 12px;
        font-size: 1rem;
    }
}
@media (min-width: 590px) and (max-width: 768px) {
.story-grid .story-image,
    .story-image-wrapper .story-signature {
        max-width: none;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
.section {
        padding: 72px 0;
    }
.problem-section {
        padding: 64px 0;
    }
.hero {
        padding: 160px 0 72px;
    }
.hero-stats {
        flex-wrap: wrap;
        row-gap: 20px;
    }
.steps-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
.step-card {
        min-width: 0;
    }
.step-card h3,
    .step-card p {
        overflow-wrap: anywhere;
    }
.hero-testimonial {
        text-align: left;
    }
.hero-testimonial-link {
        flex-basis: 100%;
        margin-top: -8px;
    }
.hero-testimonial-link i:last-child {
        margin-left: 4px;
    }
.problem-grid {
        gap: 20px;
    }
.problem-card {
        padding: 28px 20px;
        /* let the grid tracks shrink below the guide label's nowrap width */
        min-width: 0;
    }
.problem-card-guide {
        white-space: normal;
    }
.problem-card h3 {
        font-size: 1.15rem;
    }
.problem-card p {
        font-size: 0.9rem;
    }
.js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+9) {
        display: none;
    }
.showcase-item {
        padding: 56px 0;
        gap: 32px;
    }
.showcase-item + .showcase-item {
        border-top: 1px solid var(--color-border-light);
    }
.showcase-cta {
        width: 100%;
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
.showcase-content {
        max-width: 620px;
        margin: 0 auto;
        text-align: center;
    }
.showcase-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, auto));
        gap: 10px 32px;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
.showcase-image,
    .integration-hub {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
.story-grid {
        display: flex;
        flex-direction: column;
        /* gap 0 (not the inherited 40px): with the wrappers flattened, a flex
           gap inserts itself between every paragraph on top of their own
           margins — spacing comes from the children's margins alone */
        gap: 0;
    }
.story-grid .story-image-wrapper,
    .story-grid .story-content {
        display: contents;
    }
.story-content > p {
        margin-top: 0;
        margin-bottom: 20px;
    }
.story-content h2 {
        order: 1;
        width: 100%;
        max-width: 720px;
        margin: 0 auto 28px;
        text-align: center;
    }
.story-image-wrapper picture {
        order: 2;
        width: 100%;
        max-width: 720px;
        margin: 0 auto 28px;
    }
.story-grid .story-image {
        aspect-ratio: 2;
        object-position: 0 -62px;
    }
.story-content > *:not(h2) {
        order: 3;
        width: 100%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
.story-image-wrapper .story-signature {
        order: 4;
        width: 100%;
        max-width: 720px;
        margin: 24px auto 0;
        /* name/title block left, "Lad os tage en snak" CTA to its right */
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
    }
.story-image-wrapper .story-cta {
        align-self: center;
    }
}
@media (min-width: 769px) and (max-width: 900px) {
.cta-form-left {
        align-items: center;
        text-align: center;
    }
.cta-pricing-left,
    .cta-pricing-left h2 {
        text-align: center;
    }
.pricing-card {
        max-width: none;
    }
.cta-contact-alt {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
.cta-contact-alt p {
        margin: 0;
    }
}
@media (min-width: 601px) and (max-width: 768px) {
.features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
.hero-stats {
        grid-template-columns: repeat(4, auto);
        gap: 20px 28px;
    }
}
@media (min-width: 701px) and (max-width: 768px) {
.steps-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
.step-card {
        min-width: 0;
        padding: 24px 16px;
    }
.step-card h3,
    .step-card p {
        overflow-wrap: anywhere;
    }
}
@media (min-width: 601px) and (max-width: 900px) {
.problem-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
.problem-card {
        width: 100%;
        max-width: 560px;
    }
}
@media (min-width: 601px) and (max-width: 1024px) {
.footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 32px;
    }
.footer-brand {
        grid-column: 1 / -1;
        max-width: 560px;
    }
}
.kk-feedback [hidden],
.missing-system [hidden],
.lead-survey [hidden] {
    display: none !important;
}
.kk-feedback-vote:hover:not(:disabled) {
    background: var(--color-green-light);
    border-color: var(--color-green-accessible);
    color: var(--color-green-accessible);
}
.kk-feedback-vote.selected {
    opacity: 1;
    background: var(--color-green-light);
    border-color: var(--color-green-accessible);
    color: var(--color-green-accessible);
}
.kk-feedback-error {
    margin: 10px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-red);
}
.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;
}
[data-tooltip].tooltip-suppressed::before,
[data-tooltip].tooltip-suppressed::after {
    display: none !important;
}
.lead-survey {
    margin: 24px 0 20px;
}
.lead-survey-question {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}
.lead-survey-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.lead-survey-pill {
    min-height: 44px;
    padding: 8px 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.lead-survey-pill:hover:not(:disabled) {
    background: var(--color-blue-light);
    border-color: var(--color-blue);
    color: var(--color-link);
}
.lead-survey-thanks {
    font-weight: 600;
    color: var(--color-green-accessible);
    margin: 0;
}
.success-follow {
    margin: 18px 0 20px;
}
.success-follow-text {
    margin: 0 0 10px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.success-follow-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.success-follow-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
}
.success-follow-links a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.guide-follow-links .fa-facebook,
.success-follow-links .fa-facebook {
    color: #1877f2;
}
.guide-follow-links .fa-instagram,
.success-follow-links .fa-instagram {
    color: #d62976;
}
@media (min-width: 1025px) {
.js .features-catalog #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+10) {
        display: flex;
    }
}
@media (max-width: 600px) {
.hero-cta-icon {
        display: none;
    }
}
@media (min-width: 481px) and (max-width: 600px) {
.hero-cta .btn {
        padding-left: 14px;
        padding-right: 14px;
        white-space: nowrap;
    }
}
@media (max-width: 1024px) {
.hero-demo-note > i {
        display: none;
    }
}
@media (max-width: 1024px) {
.js #featuresGrid.solutions-grid:not(.features-expanded) > .solution-card:nth-child(n+5) {
        display: none;
    }
}
.footer-brand-links .footer-link-btn {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.8rem;
    line-height: 1.2;
    font-family: inherit;
    /* 0.75 alpha: ≥4.5:1 AA on the chip's lightened translucent background
       (0.6 only clears AA on the plain footer navy) */
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.footer-brand-links .footer-link-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.consent-banner[hidden] {
    display: none;
}
.consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Below the mobile menu and feature modal (1001) so it can't swallow taps
       on their bottom-pinned CTAs; still above all page content. */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    animation: consent-banner-in 0.35s ease;
}
@keyframes consent-banner-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.consent-banner {
        animation: none;
    }
}
.consent-banner p {
    margin: 0;
    max-width: 640px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}
.consent-banner p a {
    color: var(--color-link);
    text-decoration: underline;
}
.consent-banner-actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}
.consent-banner-btn {
    padding: 8px 20px;
    font-size: 0.9rem;
}
.consent-banner-decline {
    background: var(--color-white);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
.consent-banner-decline:hover {
    background: var(--color-bg-alt);
}
@media (max-width: 600px) {
.consent-banner-actions {
        width: 100%;
    }
.consent-banner-btn {
        flex: 1;
        justify-content: center;
    }
}
.cta-slideup[hidden] {
    display: none;
}
.cta-slideup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Below the consent banner (1000): consent always owns the bottom edge.
       Same layer as the mobile sticky CTA (900), but main.js never shows
       both — the slide-up stands down when the sticky bar is in play. */
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    /* Extra right padding keeps the wrapping content row clear of the
       absolutely positioned close button */
    padding: 14px 52px 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    /* Hidden state: parked below the viewport; .visible slides it up */
    transform: translateY(100%);
    transition: transform 0.35s ease;
}
.cta-slideup.visible {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.cta-slideup {
        transition: none;
    }
}
.cta-slideup p {
    margin: 0;
    max-width: 560px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
}
.cta-slideup .btn {
    flex-shrink: 0;
    padding: 10px 24px;
    font-size: 0.95rem;
}
.cta-slideup-close {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
}
.cta-slideup-close:hover {
    color: var(--color-text-primary);
}
@media (max-width: 600px) {
.cta-slideup {
        gap: 10px;
        padding: 14px 20px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        padding-top: 16px;
    }
.cta-slideup p {
        font-size: 0.9rem;
        padding-right: 32px; /* keep the first line clear of the × */
    }
.cta-slideup .btn {
        width: 100%;
        justify-content: center;
    }
}
.kk-pdf-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: linear-gradient(135deg, #f8fafc 0%, #eef8fa 100%);
    border: 1px solid #d6eaee;
    border-left: 4px solid #3bb4c4;
    border-radius: 12px;
    padding: 24px;
    margin: 32px 0;
}
.kk-pdf-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3bb4c4;
    color: #fff;
    border-radius: 12px;
    font-size: 24px;
}
.kk-pdf-body {
    flex: 1 1 auto;
    min-width: 0;
}
.kk-pdf-title {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    line-height: 1.3;
    color: #1f2933;
}
.kk-pdf-desc {
    margin: 0 0 16px 0;
    color: #52606d;
    font-size: 0.95rem;
    line-height: 1.55;
}
.kk-pdf-form {
    margin-top: 2px;
    max-width: 440px;
}
.kk-pdf-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2933;
    margin-bottom: 8px;
}
.kk-pdf-label i {
    color: #3bb4c4;
}
.js .vc-dl-collapsed:not(.vc-dl-revealed) {
    display: none;
}
.js .vc-dl-revealed {
    animation: kk-dl-reveal 0.4s ease both;
}
@keyframes kk-dl-reveal {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.js .vc-dl-revealed { animation: none; }
}
html:not(.js) .vc-dl-more-wrap {
    display: none;
}
.vc-dl-card .kk-pdf-toggle:hover,
.vc-dl-card .kk-pdf-submit:hover:not(:disabled) {
    background: #b02a37;
}
.kk-pdf-alt {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #cbd7dc;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.kk-pdf-alt-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-link, #277884);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}
.kk-pdf-alt-link:hover {
    text-decoration: underline;
    color: var(--color-link, #277884);
}
.kk-pdf-free-note {
    margin: 0;
    font-size: 0.82rem;
    color: #7b8794;
}
.kk-pdf-inputrow {
    display: flex;
    gap: 8px;
}
.kk-pdf-email {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #cbd7dc;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1f2933;
    background: #fff;
}
.kk-pdf-email:focus {
    outline: none;
    border-color: #3bb4c4;
    box-shadow: 0 0 0 3px rgba(59, 180, 196, 0.18);
}
.kk-pdf-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 10px 16px;
    /* accessible variant: white on bright brand blue is only 2.46:1 */
    background: var(--color-blue-accessible, #2a818d);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.kk-pdf-submit:hover:not(:disabled) {
    background: var(--color-blue-hover, #226a74);
}
.kk-pdf-submit:disabled {
    opacity: 0.7;
    cursor: default;
}
.kk-pdf-form .form-optin {
    margin-top: 10px;
}
.kk-pdf-status {
    margin: 10px 0 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    min-height: 1px;
}
@media (max-width: 600px) {
.kk-pdf-card {
        flex-direction: column;
        gap: 14px;
        padding: 20px;
    }
.kk-pdf-form {
        max-width: none;
    }
.kk-pdf-inputrow {
        flex-direction: column;
    }
.kk-pdf-email {
        width: 100%;
        font-size: 16px;
        padding: 12px 14px;
    }
.kk-pdf-submit {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
        padding: 12px 16px;
    }
}