/* GENERATED by tools/critical-css/generate.py - DO NOT EDIT.
   Sources (edit these, then regenerate): slideshow_critical.css, styles.css, legal.css, audience.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;
}
.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-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-sm {
    padding: 60px 0;
}
.section-alt {
    background: var(--color-bg);
}
.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-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;
}
.audience-demo-note {
    /* .audience-hero-cta above carries 36px margin-bottom; pull the microcopy
       back up so it hugs the buttons it describes (~20px effective gap) */
    margin-top: -16px;
    margin-bottom: 28px; /* breathing room before the hero fact badges */
}
.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-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);
}
.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;
}
.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;
}
.js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+10) {
    display: none;
}
.showcase-slide.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.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-slide.active .showcase-slide-more {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    transition-delay: 0.4s;
}
.diagonal-split-container:hover .diagonal-split-image:not(:hover) .diagonal-split-label {
    opacity: 0.4;
}
@keyframes pulse-ring {
    0% {
        width: 120px;
        height: 120px;
        opacity: 0.5;
    }
    100% {
        width: 350px;
        height: 350px;
        opacity: 0;
    }
}
@keyframes line-flow {
    0% {
        stroke-dashoffset: 24;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes float-subtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
@media (max-width: 768px) {
@keyframes pulse-ring {
        0% {
            width: 80px;
            height: 80px;
            opacity: 0.8;
        }
        100% {
            width: 200px;
            height: 200px;
            opacity: 0;
        }
    }
}
@keyframes comparison-scroll-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
.faq-heading {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}
.faq-item.active .faq-question i {
    transform: rotate(180deg);
}
.js .faq-answer {
    display: none;
}
.js .faq-item.active .faq-answer {
    display: block;
}
.cta-box {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 60px;
    box-shadow: var(--shadow-lg);
    max-width: 800px;
    margin: 0 auto;
}
.cta-section-flat .cta-box {
    background: transparent;
    box-shadow: none;
    padding: 0;
    position: relative;
    z-index: 1;
}
.cta-section-flat .cta-box p {
    color: var(--color-text-secondary);
}
.cta-section-flat .cta-contact {
    color: var(--color-text-secondary);
}
.cta-box h2 {
    margin-bottom: 16px;
}
.cta-box p {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    margin-bottom: 32px;
}
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.cta-contact {
    margin-top: 24px;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}
.cta-box .cta-contact {
    margin-bottom: 0;
}
.cta-contact a {
    /* Was the bright brand blue, which fails AA as text on any light bg
       (see the accessible-variants note in :root) — use the body-link color. */
    color: var(--color-link);
    font-weight: 500;
}
.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;
}
@media (max-width: 480px) {
.cta-section {
        padding: 60px 0;
    }
}
.cta-pricing-view:not(.active) {
    display: none;
}
.cta-form-view:not(.active) {
    display: none;
}
.cta-view.exiting {
    opacity: 0;
    pointer-events: none;
}
.cta-view.entering {
    opacity: 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;
}
.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;
}
.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) {
.contact-form-card {
        max-width: 100%;
    }
}
@media (max-width: 480px) {
.contact-form-card {
        padding: 20px;
    }
}
.features-optional-note {
    text-align: center;
    margin: 32px auto 0;
    max-width: 720px;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.features-optional-note i {
    color: var(--color-blue);
    margin-right: 6px;
}
.features-optional-note-top {
    margin: 0 auto 28px;
    font-size: 1rem;
    color: var(--color-text-secondary);
}
.cta-fading {
    opacity: 0 !important;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.cta-hidden {
    display: none !important;
}
.contact-inline {
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
    transition: opacity 0.35s ease;
}
html.js .contact-inline {
    display: none;
    opacity: 0;
}
html.js .contact-inline.active {
    display: block;
}
html.js .contact-inline.visible {
    opacity: 1;
}
.contact-inline-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
}
.contact-inline-info h3 {
    font-size: 2rem;
    margin-bottom: 12px;
}
.contact-inline-info > p {
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}
.contact-inline-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contact-inline-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--color-text-secondary);
}
.contact-inline-list li i {
    color: var(--color-green);
    margin-top: 4px;
}
.contact-inline-formcol {
    min-width: 0;
}
.contact-inline .contact-form-card {
    max-width: none;
    width: 100%;
    padding: 28px;
}
.contact-inline .contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}
.contact-inline .contact-form-grid .form-group-full {
    grid-column: 1 / -1;
}
.contact-inline-alt {
    margin: 0;
    font-size: 0.95rem;
    /* Sits directly on the cta-section band (no card behind it): muted gray
       was only 4.4:1 on the teal tint, secondary passes comfortably. */
    color: var(--color-text-secondary);
    line-height: 1.8;
}
.kontakt-person {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-yellow);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.kontakt-person-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.kontakt-person-photo picture {
    display: block;
    width: 100%;
    height: 100%;
}
.kontakt-person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(2);
    transform-origin: 50% 13%;
}
.kontakt-person-text p {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--color-text-secondary);
    margin: 0 0 8px;
    line-height: 1.5;
}
.kontakt-person-text strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text-primary);
}
.kontakt-person-text span {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
@media (max-width: 600px) {
.kontakt-person {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
}
.founder-card {
    max-width: 680px;
    margin: 48px auto 0;
}
.section-header-row {
    display: flex;
    align-items: center;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto 48px;
}
.section-header-side {
    flex: 1.3;
    min-width: 0;
}
.section-header-side .section-header {
    text-align: left;
    margin: 0;
    max-width: none;
}
.features-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 32px;
}
.features-meta-row .features-count {
    margin: 0;
    text-align: right;
    flex-shrink: 0;
}
.features-meta-row .features-optional-note {
    margin: 0;
    text-align: left;
    max-width: 640px;
}
@media (max-width: 900px) {
.features-meta-row {
        flex-direction: column;
        gap: 16px;
    }
.features-meta-row .features-count,
    .features-meta-row .features-optional-note {
        text-align: center;
    }
}
.section-header-row .founder-card {
    flex: 1;
    margin: 0;
    max-width: 460px;
}
@media (max-width: 900px) {
.section-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }
.section-header-side .section-header {
        text-align: center;
    }
.section-header-row .founder-card {
        max-width: none;
        margin: 0 auto;
        width: 100%;
    }
.section-header-aside .audience-screenshot {
        max-width: none;
        width: 100%;
    }
}
.section-header-row .section-header-aside {
    flex: 1;
    max-width: 460px;
    min-width: 0;
}
.section-header-aside .audience-screenshot {
    margin-top: 20px;
}
@media (max-width: 900px) {
.section-header-row .section-header-aside {
        max-width: none;
        margin: 0 auto;
        width: 100%;
    }
}
.section-guide-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}
.section-guide-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    text-align: left;
}
.features-intro .section-header-row {
    margin-bottom: 0;
}
.section-guide-item .feature-icon {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    margin-bottom: 0;
}
.section-guide-item p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
}
.section-guide-item p a {
    font-weight: 600;
}
@media (max-width: 768px) {
.contact-inline-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}
@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-testimonial { order: 9; width: 100%; max-width: 720px; margin: 28px auto 0; }
.features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
.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;
    }
h1 {
        font-size: 1.8rem;
    }
.btn-large {
        padding: 14px 24px;
        font-size: 1rem;
    }
}
@media (max-width: 768px) {
.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;
    }
.cta-box {
        padding: 40px 24px;
    }
}
@media (max-width: 480px) {
.btn {
        width: 100%;
    }
.cta-buttons {
        flex-direction: column;
    }
.hero-testimonial {
        padding: 16px;
        gap: 16px;
    }
}
@media (max-width: 320px) {
.container,
    .container-wide {
        padding: 0 10px;
    }
.header-inner {
        padding: 10px 10px;
    }
h1 {
        font-size: 1.5rem;
    }
h2 {
        font-size: 1.3rem;
    }
h3 {
        font-size: 1.1rem;
    }
.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;
    }
.section {
        padding: 50px 0;
    }
.slideshow-preview-wrapper {
        border-radius: 8px;
    }
.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;
    }
}
.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: 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;
    }
}
.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-old {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(220, 38, 38, 0.55);
    text-decoration-thickness: 2px;
    margin-right: 2px;
}
.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;
    }
}
@media (max-width: 768px) {
.hero-testimonial { order: 9; margin-top: 28px; }
.section {
        padding: 48px 0;
    }
.section-header,
    .problem-section .section-header {
        margin-bottom: 24px;
    }
.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;
    }
.steps-grid {
        margin-top: 32px;
    }
.js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+5) {
        display: none;
    }
}
@media (max-width: 480px) {
.nav-cta .btn,
    .mobile-sticky-cta .btn {
        width: auto;
    }
}
@media (max-width: 768px) {
.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;
    }
.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-link-btn-below {
        display: none;
    }
}
@media (max-width: 768px) {
.contact-inline-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: auto;
        max-width: 460px;
        margin: 0 auto 28px;
    }
.contact-inline-list li {
        display: inline-flex;
        align-items: center;
        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);
    }
.contact-inline-list li > i {
        flex-shrink: 0;
        color: var(--color-green);
        font-size: 0.85rem;
        margin-top: 0;
    }
.contact-inline-info {
        text-align: center;
    }
.contact-inline .contact-form-back {
        display: flex;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 1024px) {
.mobile-divider-top {
        border-top: 1px solid var(--color-border-light);
    }
}
@media (min-width: 901px) and (max-width: 1024px) {
.audience-hero-visual .hero-testimonial,
    .integration-hero-visual .hero-testimonial {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
.audience-hero-visual .hero-testimonial-author,
    .integration-hero-visual .hero-testimonial-author {
        border-left: none;
        padding-left: 0;
        /* left-aligned under the left-aligned quote (the base centers the
           logo/name for the desktop side-by-side column) */
        align-items: flex-start;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
.section {
        padding: 72px 0;
    }
.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;
    }
.js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+9) {
        display: none;
    }
}
@media (min-width: 601px) and (max-width: 768px) {
.features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@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: 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;
    }
.features-catalog .features-toggle-wrapper {
        display: none;
    }
}
.section-cta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}
@media (max-width: 600px) {
.section-cta-row .btn {
        width: 100%;
        justify-content: center;
        min-height: 56px;
        align-items: center;
    }
}
@media (max-width: 1024px) {
.js #featuresGrid.solutions-grid:not(.features-expanded) > .solution-card:nth-child(n+5) {
        display: none;
    }
}
@media (max-width: 900px) {
.founder-card {
        max-width: 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;
    }
}
.header-solid {
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.legal-breadcrumb {
    display: flex;
    align-items: center;
    /* long trails (Forside > Losninger > Infoskaerm til idraetscentre...)
       must wrap tidily on narrow phones instead of overflowing */
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}
@media (max-width: 480px) {
.legal-breadcrumb {
        gap: 4px 8px;
        font-size: 0.85rem;
    }
}
.legal-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.legal-breadcrumb a:hover {
    color: var(--color-blue);
}
.legal-breadcrumb i.fa-chevron-right {
    font-size: 0.7rem;
}
@media print {
.header,
    .footer,
    .legal-breadcrumb,
    .mobile-menu-toggle,
    .nav-cta {
        display: none !important;
    }
a {
        text-decoration: none;
        color: inherit;
    }
body {
        font-size: 11pt;
        line-height: 1.5;
    }
}
@media (max-width: 900px) {
.legal-breadcrumb {
        justify-content: center;
    }
}
.audience-hero {
    padding: 180px 0 70px;
    background: url('../img/bg.webp') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}
.audience-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--color-blue-light) 0%, transparent 70%);
    pointer-events: none;
}
.audience-hero .container {
    max-width: var(--container-wide);
    position: relative;
    z-index: 1;
}
.audience-hero .legal-breadcrumb {
    margin-bottom: 28px;
}
.audience-hero-inner {
    display: flex;
    align-items: center;
    gap: 60px;
}
.audience-hero-text {
    flex: 1 1 0;
    min-width: 0;
}
.audience-hero-visual {
    flex: 0 0 48%;
    min-width: 0;
}
.audience-hero h1 {
    max-width: 860px;
    margin-bottom: 20px;
}
@media (min-width: 901px) and (max-width: 1200px) {
.audience-hero h1 {
        font-size: clamp(2rem, 3.3vw, 2.8rem);
    }
}
.audience-hero-lead {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 740px;
    margin-bottom: 28px;
}
.audience-hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.audience-hero-facts {
    display: flex;
    gap: 12px 28px;
    flex-wrap: wrap;
}
.audience-hero-fact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.audience-hero-fact i {
    color: var(--color-green);
}
a.audience-hero-fact {
    text-decoration: none;
}
a.audience-hero-fact span {
    text-decoration: underline;
    text-decoration-color: rgba(107, 114, 128, 0.4);
    text-underline-offset: 3px;
}
a.audience-hero-fact:hover {
    color: var(--color-blue);
}
.section-cta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}
@media (max-width: 1024px) {
.audience-hero {
        padding: 165px 0 60px;
    }
}
@media (max-width: 900px) {
.audience-hero .legal-breadcrumb {
        justify-content: center;
    }
.audience-hero-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
.audience-hero-text,
    .audience-hero-visual {
        display: contents;
    }
.audience-hero-text > *,
    .audience-hero-visual > * {
        order: 9;
    }
.audience-hero h1 {
        order: 1;
        text-align: center;
    }
.audience-hero-lead {
        order: 2;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
.audience-hero-visual .hero-tv-frame {
        order: 3;
        width: 100%;
        max-width: 720px;
        margin: 0 auto 24px;
        align-self: center;
    }
.audience-hero-cta {
        order: 4;
        justify-content: center;
        width: 100%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
.audience-hero-cta .btn {
        flex: 1 1 0;
        min-width: 0;
    }
.audience-demo-note {
        order: 5;
        text-align: center;
        /* shrink-wrap and center like the front-page note: the box hugs the
           text (icon rides its left edge) but never exceeds the TV/CTA column.
           width:100% would pin the icon to the far column edge instead. */
        align-self: center;
        width: auto;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
.audience-hero-facts {
        order: 6;
        justify-content: center;
        /* no extra gap: the demo-note above carries 28px bottom margin */
        margin-top: 0;
    }
.audience-hero-fact {
        justify-content: center;
        text-align: center;
    }
.audience-hero-visual .hero-testimonial {
        order: 8;
        width: 100%;
        max-width: 720px;
        margin: 24px auto 0;
        align-self: center;
    }
}
@media (max-width: 768px) {
.audience-hero {
        padding: 120px 0 50px;
    }
.audience-hero-lead {
        font-size: 1.05rem;
    }
.section-cta-row .btn {
        width: 100%;
        justify-content: center;
        min-height: 56px;
        align-items: center;
    }
a.audience-hero-fact {
        min-height: 44px;
    }
}
@media (min-width: 601px) and (max-width: 768px) {
.section-cta-row .btn {
        width: auto;
    }
}
@media (max-width: 480px) {
.audience-hero-cta .btn {
        /* flex-basis auto (not the tablet 0): basis 0 would beat width:100%
           and squeeze the pair side-by-side with wrapped labels */
        flex: 1 1 auto;
        width: 100%;
        justify-content: center;
    }
.audience-hero-facts {
        gap: 10px 20px;
    }
}
.audience-screenshot { max-width: 720px; margin: 32px auto 0; }
.audience-screenshot img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); display: block; }
.audience-screenshot figcaption { text-align: center; font-size: 0.9rem; color: var(--color-text-muted); margin-top: 12px; }
@media (max-width: 900px) {
.audience-screenshot {
        max-width: none;
    }
}
@media (max-width: 600px) {
.audience-hero-cta .btn .fa-rocket {
        display: none;
    }
}
@media (min-width: 481px) and (max-width: 600px) {
.audience-hero-cta .btn {
        padding-left: 14px;
        padding-right: 14px;
        white-space: nowrap;
    }
}
@media (max-width: 900px) {
.audience-demo-note > i {
        display: none;
    }
}
@media (max-width: 900px) {
.section-alt .audience-screenshot img {
        aspect-ratio: 2 / 1;
        object-fit: cover;
        object-position: center;
    }
}
@media (max-width: 340px) {
.audience-hero h1 {
        font-size: 1.85rem;
    }
}