/* GENERATED by tools/critical-css/generate.py - DO NOT EDIT.
   Sources (edit these, then regenerate): styles.css, legal.css, audience.css, cost-calculator.css, pdf-download.css, story.css */
: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-secondary {
    background: var(--color-blue-accessible);
    color: var(--color-white);
}
.btn-secondary:hover {
    background: var(--color-blue-hover);
    color: var(--color-white);
    transform: translateY(-2px);
    /* glow derived from the accessible button blue (#2a818d), not the bright brand hue */
    box-shadow: 0 8px 20px rgba(42, 129, 141, 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;
}
.btn-small {
    padding: 10px 20px;
    font-size: 0.9rem;
}
.section {
    padding: 100px 0;
}
.section-alt {
    background: var(--color-bg);
}
.section:not(.section-alt):not(.cta-section) + .section:not(.section-alt):not(.cta-section),
.section-alt + .section-alt {
    position: relative;
}
.section:not(.section-alt):not(.cta-section) + .section:not(.section-alt):not(.cta-section)::before,
.section-alt + .section-alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1152px, calc(100% - 48px));
    height: 1px;
    background: var(--color-border-light);
}
.section-header {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
}
.section-header h1,
.section-header h2 {
    margin-bottom: 20px;
    /* Distribute words evenly across lines instead of orphaning a single word
       (e.g. "slides") on the last line. Ignored by browsers without support. */
    text-wrap: balance;
}
.section-header p {
    font-size: 1.15rem;
    color: var(--color-text-muted);
}
.section-label {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-blue-light);
    /* Slightly darker than --color-blue-accessible: this small label sits on
       the pale blue tint (not white), which needs the extra depth to pass AA. */
    color: #256f7a;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
}
.header.scrolled {
    box-shadow: var(--shadow-md);
}
.topbar {
    background: var(--color-text-primary);
}
.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 24px;
}
.topbar-social {
    display: flex;
    gap: 4px;
}
.topbar-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 6px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition-fast);
}
.topbar-social a:hover {
    color: var(--color-white);
}
.topbar-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 2px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}
.topbar-login:hover {
    color: var(--color-white);
    text-decoration: underline;
}
.topbar-login i {
    font-size: 0.75rem;
}
.topbar-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition-fast);
}
.topbar-phone:hover {
    color: var(--color-white);
}
.topbar-phone i {
    font-size: 0.75rem;
}
@media (max-width: 900px) {
.topbar-phone {
        display: none;
    }
}
@media (max-width: 768px) {
.topbar {
        display: none;
    }
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    max-width: var(--container-wide);
    margin: 0 auto;
}
.logo {
    display: flex;
    align-items: center;
}
.logo-img {
    height: 60px;
    width: auto;
}
.nav {
    display: flex;
    align-items: center;
    gap: 40px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}
.nav-links a {
    color: var(--color-text-secondary);
    font-weight: 500;
    transition: color var(--transition-fast);
}
.nav-links a:hover {
    color: var(--color-blue-accessible);
}
.nav-links > li {
    position: relative;
}
.nav-links .has-dropdown > a {
    display: inline-flex;
    align-items: center;
}
.nav-caret {
    font-size: 0.65rem;
    margin-left: 6px;
    opacity: 0.7;
    transition: transform var(--transition-fast);
}
.has-dropdown:hover .nav-link-btn,
.has-dropdown.open .nav-link-btn {
    color: var(--color-blue);
}
.has-dropdown:hover .nav-caret,
.has-dropdown:focus-within .nav-caret,
.has-dropdown.open .nav-caret {
    transform: rotate(180deg);
}
.has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 22px;
}
.nav-dropdown {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 300px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 200;
}
.nav-dropdown::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 26px;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown,
.has-dropdown.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}
.nav-dropdown-item:hover {
    background: var(--color-bg);
    color: var(--color-text-primary);
}
.nav-dropdown-item > i {
    color: var(--color-blue);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.nav-dropdown-compact {
    font-size: 0.95rem;
    font-weight: 500;
    padding: 9px 12px;
    gap: 9px;
}
.nav-dropdown-compact > i {
    width: 16px;
    font-size: 0.9em;
}
.nav-dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.nav-dropdown-mega {
    min-width: 820px;
    max-width: min(820px, calc(100vw - 32px));
    left: 50%;
    transform: translate(-42%, 8px);
}
.has-dropdown:hover .nav-dropdown-mega,
.has-dropdown:focus-within .nav-dropdown-mega,
.has-dropdown.open .nav-dropdown-mega {
    transform: translate(-42%, 0);
}
.nav-links .has-dropdown.force-closed .nav-dropdown,
.nav-links .has-dropdown.force-closed .nav-dropdown-mega {
    opacity: 0;
    visibility: hidden;
}
.nav-dropdown-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.nav-dropdown-col {
    display: flex;
    flex-direction: column;
}
.nav-dropdown-col + .nav-dropdown-col {
    border-left: 1px solid var(--color-border-light);
    padding-left: 20px;
}
.nav-dropdown-heading {
    display: block;
    padding: 4px 14px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.nav-dropdown-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 4px 2px;
    padding: 10px 14px 4px;
    border-top: 1px solid var(--color-border-light);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-blue-accessible);
}
.nav-dropdown-footer i:last-child {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
}
.nav-dropdown-footer:hover i:last-child {
    transform: translateX(4px);
}
.nav-cta {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-primary);
    cursor: pointer;
    z-index: 1002;
    position: relative;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(280px, 85vw);
    max-width: 280px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    /* visibility is toggled (with a delay) alongside the slide so the ~25
       links are NOT focusable / announced to screen readers while the menu
       is closed — at every viewport width. */
    visibility: hidden;
    transition: right 0.3s ease, visibility 0s linear 0.3s;
    z-index: 1001;
    /* Fixed close button (top) + scrollable link region + pinned CTA footer.
       The drawer itself no longer scrolls; .mobile-menu-scroll does.
       Top padding = close button bottom edge (20px + 44px) so all 8 nav rows
       plus the pinned footer fit without scrolling on 667px-tall phones (SE). */
    padding: 64px 24px max(24px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mobile-menu.active {
    right: 0;
    visibility: visible;
    transition: right 0.3s ease, visibility 0s;
}
.mobile-menu-close {
    position: absolute;
    /* Keep the close button clear of notches/rounded corners */
    top: max(20px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-primary);
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
}
.mobile-menu-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* fade the lower edge so users see the list continues when scrollable */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mobile-menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mobile-menu-links li a {
    display: block;
    /* Tight 44px rows (10+24+10) so the full menu fits short phone screens */
    padding: 10px 16px;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.mobile-menu-links li a:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
.mobile-menu-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mobile-menu-group.open {
    background: var(--color-bg);
    border-radius: 10px;
    padding-bottom: 6px;
}
.mobile-menu-group.open .mobile-menu-group-toggle:hover,
.mobile-menu-group.open a:hover {
    background: #fff;
}
.mobile-menu-group .mobile-menu-group-links > a {
    padding-left: 24px;
}
.mobile-menu-group a.mobile-menu-group-all {
    font-weight: 600;
    color: var(--color-blue-accessible);
}
.mobile-menu-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2px;
}
.mobile-menu-group .mobile-menu-group-grid a {
    font-size: 0.9rem;
    /* Same 24px text inset as the "Se alle"/single-column sub-links so the
       first grid column aligns with the rows above it */
    padding: 10px 12px 10px 24px;
}
.mobile-menu-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-secondary);
    padding: 10px 16px;
    min-height: 44px;
    text-align: left;
    transition: all 0.2s ease;
}
.mobile-menu-group-toggle:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
.mobile-menu-group-toggle i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}
.mobile-menu-group.open .mobile-menu-group-toggle i {
    transform: rotate(180deg);
}
html.js .mobile-menu-group-links {
    display: none;
}
html.js .mobile-menu-group.open .mobile-menu-group-links {
    display: block;
}
.mobile-menu-group a {
    display: block;
    padding: 10px 16px;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.mobile-menu-group a:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
.mobile-menu-social {
    display: flex;
    gap: 8px;
    padding: 8px 4px 0;
    /* Bottom-aligned in the scroll region (flex column): auto margin absorbs
       the free space on tall screens so the icons sit just above the pinned
       footer's divider instead of hanging under the last nav link. When the
       list overflows there is no free space and the 8px top padding keeps a
       gap under Kontakt instead. No margin-bottom: the scroll region's 12px
       padding + the 44px icon boxes' internal whitespace already visually
       match the divider→phone/Kundelogin gap below (16px + 8px padding). */
    margin-top: auto;
    margin-bottom: 0;
}
.mobile-menu-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-size: 1.3rem;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
}
.mobile-menu-social a:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
@media (max-height: 700px) {
.mobile-menu-social {
        display: none;
    }
}
.mobile-menu-cta {
    flex: 0 0 auto;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mobile-menu-login {
    display: flex;
    align-items: center;
    /* Left-aligned to match the nav rows above (icon + label read as a normal
       left-aligned utility row, not a centered button). */
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 16px;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.mobile-menu-login:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
.mobile-menu-cta .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
}
.mobile-menu-utils {
    display: flex;
    flex-wrap: nowrap;
    /* number pinned left, Kundelogin pinned right — all spare width becomes
       the gap between them */
    justify-content: space-between;
    gap: 6px;
}
.mobile-menu-utils .mobile-menu-login {
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 6px;
    gap: 6px;
    font-size: 0.9rem;
    white-space: nowrap;
}
body.mobile-menu-open {
    overflow: hidden;
}
section[id] {
    scroll-margin-top: 80px;
}
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
}
.trust-strip-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.trust-strip-item i {
    color: var(--color-green);
}
a.trust-strip-item {
    text-decoration: underline;
    text-decoration-color: rgba(107, 114, 128, 0.4);
    text-underline-offset: 3px;
}
a.trust-strip-item:hover {
    color: var(--color-blue);
}
.tp-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}
.tp-review-stars {
    display: inline-flex;
    gap: 3px;
    color: var(--color-yellow);
    font-size: 0.85rem;
    margin-bottom: 12px;
}
.tp-reviews-link {
    text-align: center;
    margin-top: 32px;
}
@media (max-width: 900px) {
.tp-reviews-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
.tp-reviews-grid .story-quote-side {
        text-align: center;
    }
.tp-reviews-grid .story-quote-side blockquote {
        padding-left: 0;
    }
.tp-reviews-grid .story-quote-side .story-quote-author {
        justify-content: center;
        padding-left: 0;
    }
}
.section-hero-offset-lg {
    padding-top: 170px;
}
.section-hero-offset-lg.section-no-bottom {
    padding-bottom: 0;
}
.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;
}
.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-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.feature-modal-overlay.active .feature-modal {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.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-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;
}
.js .features-toggle-wrapper {
    display: flex;
}
.features-toggle-wrapper.hidden {
    opacity: 0;
    max-height: 0;
    margin: 0;
    pointer-events: none;
}
.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); }
}
.pricing-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255,255,255,0.2);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.price-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}
.price-currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.price-value {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}
.price-period {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}
.price-setup {
    margin-top: 12px;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}
.price-setup strong {
    color: var(--color-text-primary);
}
.faq-grid {
    max-width: 800px;
    margin: 0 auto;
}
.faq-pdf-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    max-width: 1160px;
    margin: 0 auto;
}
.faq-pdf-layout .faq-grid {
    max-width: none;
    margin: 0;
}
.faq-pdf-aside {
    /* Follows the reader while they open questions on the left */
    position: sticky;
    top: 120px;
}
.faq-pdf-aside .kk-pdf-card {
    margin: 0;
    flex-direction: column;
}
@media (max-width: 900px) {
.faq-pdf-layout {
        grid-template-columns: 1fr;
        gap: 8px;
    }
.faq-pdf-aside {
        position: static;
    }
.faq-pdf-aside .kk-pdf-card {
        margin: 24px 0 0;
    }
}
.faq-item {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    overflow: hidden;
}
.faq-heading {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
    transition: background var(--transition-fast);
}
.faq-question:hover {
    background: var(--color-bg);
}
.faq-question i {
    color: var(--color-blue);
    transition: transform var(--transition-normal);
}
.faq-item.active .faq-question i {
    transform: rotate(180deg);
}
.faq-answer {
    padding: 0 24px 24px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}
.js .faq-answer {
    display: none;
}
.js .faq-item.active .faq-answer {
    display: block;
}
.cta-section {
    /* Brand-teal tint instead of neutral gray: 13 pages end with a gray
       .section-alt directly before this band, and two near-identical grays
       blended into each other. blue-light is an approved tinted section bg
       (link contrast verified, see --color-link) and separates by hue. */
    background: var(--color-blue-light);
    text-align: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.cta-pricing-combined {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.cta-bg-pattern {
    display: none;
}
.cta-pricing-left {
    min-width: 0;
    color: var(--color-text-primary);
    text-align: left;
}
.cta-eyebrow {
    display: inline-block;
    background: var(--color-green-accessible);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}
.cta-pricing-left h2 {
    font-size: 2.4rem;
    margin-bottom: 16px;
    color: var(--color-text-primary);
    line-height: 1.2;
    text-align: left;
}
.cta-description {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    margin-bottom: 32px;
    line-height: 1.7;
}
.cta-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    display: grid;
    gap: 14px;
}
.cta-features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: var(--color-text-primary);
}
.cta-features-list .feature-icon {
    width: 24px;
    height: 24px;
    background: var(--color-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0px;
}
.cta-features-list .feature-icon i {
    font-size: 0.7rem;
    color: white;
}
.cta-trust-badges {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.trust-badge i {
    color: var(--color-green);
    font-size: 0.9rem;
}
.cta-pricing-right {
    position: relative;
    min-width: 0;
}
.pricing-card {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
    border: 2px solid var(--color-blue);
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -12px rgba(0,0,0,0.5);
}
.pricing-card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 30px 30px 25px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.pricing-card-header .pricing-badge {
    background: linear-gradient(135deg, var(--color-green), var(--color-green-dark));
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pricing-card-header .price-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}
.pricing-card-header .price-currency {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text-muted);
    align-self: flex-start;
    margin-top: 8px;
}
.pricing-card-header .price-value {
    font-size: 4rem;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1;
    letter-spacing: -2px;
}
.pricing-card-header .price-period {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    font-weight: 500;
}
.pricing-card-header .price-setup {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
}
.pricing-card-body {
    padding: 30px;
}
.pricing-card-body .btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.btn-glow {
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4);
    position: relative;
    overflow: hidden;
}
.btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}
.btn-glow:hover::before {
    left: 100%;
}
.btn-glow:hover {
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
    transform: translateY(-2px);
}
.pricing-guarantees {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.pricing-guarantees span {
    display: flex;
    /* center (not flex-start): when a label wraps to two lines (the
       30-dages-garanti item) the icon centers against the whole text block
       instead of riding the first line */
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}
.pricing-guarantees i {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.pricing-guarantees span:has(> span) {
    display: block;
    text-align: center;
    text-wrap: balance;
    font-weight: 600;
}
.pricing-card-footer {
    background: #f8fafc;
    padding: 16px 30px;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.05);
}
.pricing-card-footer p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.pricing-card-footer a {
    color: var(--color-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}
.pricing-card-footer a:hover {
    color: var(--color-blue-dark);
    text-decoration: underline;
}
@media (max-width: 900px) {
.cta-pricing-combined {
        padding: 0 20px;
    }
.cta-pricing-view {
        grid-template-columns: 1fr;
        gap: 40px;
    }
.cta-pricing-left {
        text-align: left;
    }
.cta-pricing-left h2 {
        font-size: 2rem;
        text-align: left;
    }
.cta-features-list {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
.cta-features-list li {
        justify-content: flex-start;
    }
.cta-trust-badges {
        justify-content: center;
        gap: 8px;
    }
.trust-badge {
        background: rgba(255, 255, 255, 0.75);
        border: 1px solid var(--color-border-light);
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
.pricing-card-header .price-value {
        font-size: 3.5rem;
    }
}
@media (max-width: 480px) {
.cta-section {
        padding: 60px 0;
    }
.pricing-guarantees {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}
.cta-pricing-combined {
    position: relative;
    /* Allow shadows to show - no overflow: hidden */
}
.cta-view {
    opacity: 1;
    transition: opacity 0.35s ease;
    min-height: 480px; /* Consistent height for both views */
}
.cta-pricing-view {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 50px;
    align-items: center;
}
.cta-pricing-view:not(.active) {
    display: none;
}
.cta-form-view {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
}
.cta-form-view:not(.active) {
    display: none;
}
.cta-view.exiting {
    opacity: 0;
    pointer-events: none;
}
.cta-view.entering {
    opacity: 0;
}
.cta-form-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--color-text-primary);
    text-align: left;
    min-width: 0;
}
.cta-form-left .cta-eyebrow {
    display: block;
    margin-bottom: 8px;
}
.cta-form-left h2 {
    font-size: 2.4rem;
    margin-bottom: 16px;
    color: var(--color-text-primary);
    line-height: 1.2;
}
.cta-form-left .cta-description {
    margin-bottom: 28px;
}
.cta-form-left .cta-features-list {
    margin-bottom: 28px;
}
.cta-contact-alt {
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}
.cta-contact-alt p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.contact-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}
.contact-phone:hover {
    color: var(--color-blue-dark);
}
.contact-phone i {
    font-size: 0.95rem;
}
.cta-form-right {
    display: flex;
    justify-content: center;
    /* Grid items default to min-width:auto and won't shrink below their
       content, which pushed this column (and the whole card) past the
       viewport. Allow it to shrink to its track. */
    min-width: 0;
}
.contact-form-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 20px;
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 1;
}
.cta-form-right .contact-form-card {
    max-width: none;
    padding: 28px;
}
.contact-form-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 12px;
    transition: color 0.2s ease, transform 0.2s ease;
}
.contact-form-back:hover {
    color: var(--color-blue);
    transform: translateX(-4px);
}
.contact-form-back i {
    font-size: 0.85rem;
}
.contact-form-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cta-form-right .contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}
.cta-form-right .contact-form-grid .form-group-full {
    grid-column: 1 / -1;
}
.contact-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.contact-form label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.contact-form label .required {
    color: var(--color-red);
}
.contact-form .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.contact-form .input-wrapper i {
    position: absolute;
    left: 12px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
    transition: color 0.2s ease;
}
.contact-form .input-wrapper.textarea-wrapper i {
    top: 12px;
    align-self: flex-start;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 10px 10px 36px;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--color-text-primary);
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form textarea {
    resize: vertical;
    min-height: 70px;
}
.contact-form select {
    width: 100%;
    padding: 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--color-text-primary);
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(59, 180, 196, 0.1);
}
@media (hover: none) {
.contact-form input,
    .contact-form textarea,
    .contact-form select {
        font-size: 16px;
    }
.contact-form input,
    .contact-form select {
        min-height: 44px;
    }
}
.contact-form input.input-error {
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px var(--color-red-light);
}
.turnstile-fallback {
    margin: 10px 0 0;
    font-size: 0.9rem;
    color: var(--color-red-dark);
}
.turnstile-fallback i {
    margin-right: 6px;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    outline: 3px solid var(--color-blue-accessible);
    outline-offset: 2px;
}
.contact-form input:focus + i,
.contact-form textarea:focus + i,
.contact-form .input-wrapper:focus-within i {
    color: var(--color-blue);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #64748b; /* darkened from #94a3b8 for WCAG AA (~4.6:1 on white) */
}
.cf-turnstile {
    display: flex;
    justify-content: center;
    margin: 0;
}
.contact-form-footer {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.contact-form-footer .btn-full {
    width: 100%;
    padding: 12px 20px;
}
.form-privacy {
    /* Inline text (not flex): a flex row would treat the link and the trailing
       period as separate items, so the link couldn't flow inline with the
       sentence and wrapped off on its own with a stray gap. */
    text-align: center;
    line-height: 1.5;
    font-size: 0.875rem; /* keep readable small print at ≥14px */
    color: var(--color-text-muted);
    margin: 0;
}
.label-optional {
    font-weight: 400;
    color: var(--color-text-muted);
}
.form-privacy i {
    color: var(--color-green);
    font-size: 0.8rem;
    margin-right: 4px;
}
.form-privacy a {
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-link);
}
.form-optin {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    font-size: 0.875rem; /* keep readable small print at ≥14px */
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
    cursor: pointer;
}
.form-optin input[type="checkbox"] {
    flex-shrink: 0;
    /* 24px = WCAG 2.5.8 minimum tap target (axe target-size) — the checkbox
       sits inline in the form grid, so it can't lean on surrounding spacing */
    width: 24px;
    height: 24px;
    margin: 0;
    /* The accessible (darker) green like the buttons: against the bright
       brand green the browser auto-picks a BLACK checkmark; the darker
       shade gets a white one, matching the rest of the interactive UI */
    accent-color: var(--color-green-accessible);
    cursor: pointer;
}
.turnstile-row {
    margin-top: 2px;
    overflow: hidden;
    animation: turnstileSlideIn 0.4s ease 0.2s forwards;
    max-height: 0;
    opacity: 0;
}
@keyframes turnstileSlideIn {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 80px;
        opacity: 1;
    }
}
.turnstile-row #turnstileWidget {
    width: 100% !important;
}
.contact-form-message {
    margin-top: 14px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 500;
    overflow: hidden;
    animation: messageSlideIn 0.35s ease forwards;
}
@keyframes messageSlideIn {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
    }
    to {
        opacity: 1;
        max-height: 100px;
        padding-top: 16px;
        padding-bottom: 16px;
        margin-top: 14px;
    }
}
.contact-form-message.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.contact-form-message.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.contact-form-success {
    text-align: center;
    padding: 20px 10px;
    animation: fadeInUp 0.5s ease;
}
.success-next-steps {
    text-align: left;
    max-width: 420px;
    margin: 0 auto 14px;
    padding-left: 22px;
}
.success-next-steps li {
    margin-bottom: 8px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.success-next-steps li strong {
    color: var(--color-text-primary);
}
.success-story-tip {
    font-size: 0.95rem;
    margin-bottom: 4px;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.contact-form-success .success-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-green), #22c55e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    animation: scaleIn 0.5s ease 0.2s both;
}
@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
.contact-form-success .success-icon i {
    font-size: 1.8rem;
    color: white;
}
.contact-form-success p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}
@media (max-width: 900px) {
.cta-form-view {
        grid-template-columns: 1fr;
        gap: 30px;
    }
.cta-form-left {
        text-align: center;
    }
.cta-form-left h2 {
        font-size: 2rem;
    }
.cta-form-left .cta-features-list {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
.cta-contact-alt {
        text-align: center;
    }
.contact-form-card {
        max-width: 100%;
    }
}
@media (max-width: 480px) {
.contact-form-card {
        padding: 20px;
    }
}
.cta-fading {
    opacity: 0 !important;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.cta-hidden {
    display: none !important;
}
html.js .contact-inline {
    display: none;
    opacity: 0;
}
html.js .contact-inline.active {
    display: block;
}
html.js .contact-inline.visible {
    opacity: 1;
}
.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;
}
@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-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-hero-bg {
    background: url('../img/bg.webp') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}
.section-hero-bg::before {
    content: '';
    position: absolute;
    /* px anchor for the same CLS reason as .hero::before */
    top: -200px;
    right: -15%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, var(--color-blue-light) 0%, transparent 70%);
    pointer-events: none;
}
.section-hero-bg > .container {
    position: relative;
    z-index: 1;
}
.section-hero-bg .legal-highlight {
    background: linear-gradient(var(--color-blue-light), var(--color-blue-light)), var(--color-white);
}
.section-hero-bg .legal-highlight.green {
    background: linear-gradient(var(--color-green-light), var(--color-green-light)), var(--color-white);
}
.priser-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
    /* stretch so "Det står I selv for" matches the height of "Med i prisen" */
    align-items: stretch;
}
.priser-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 32px;
}
.priser-card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 1.2rem;
}
.priser-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}
.priser-card-icon.green {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
}
.priser-card-icon.blue {
    background: linear-gradient(135deg, #3bb4c4, #2f8f9d);
}
.priser-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.priser-card li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.priser-card li > i {
    color: var(--color-green);
    margin-top: 3px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.priser-card li strong {
    color: var(--color-text-primary);
}
.priser-card-self {
    background: var(--color-bg);
    box-shadow: none;
    /* column layout so the calc button can sit at the bottom of the stretched
       card (it now matches the taller "Med i prisen" card's height) */
    display: flex;
    flex-direction: column;
}
.priser-card-note {
    margin: 18px 0 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.priser-card-calc-btn {
    display: flex;
    width: 100%;
    margin-top: auto;
}
.priser-card-self .priser-card-note {
    margin-bottom: 22px;
}
.priser-founder-wide {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 40px;
}
.priser-founder-wide .founder-card {
    max-width: none;
    margin: 40px 0 0;
}
.priser-reassure {
    max-width: 1000px;
    margin: 32px auto 0;
    padding: 28px 32px;
    background: var(--color-green-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.priser-reassure h3 {
    margin: 0 0 10px;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.priser-reassure h3 i {
    color: var(--color-green-dark);
}
.priser-reassure > p {
    margin: 0 0 16px;
    color: var(--color-text-secondary);
}
.priser-reassure-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}
.priser-reassure-list li {
    display: flex;
    /* center (not flex-start): the icon centers against the whole label even
       when it wraps to several lines */
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    line-height: 1.45;
    color: var(--color-text-secondary);
}
.priser-reassure-list li span {
    /* even line lengths on the wrapped labels (the centered icon reads best
       against a balanced block) */
    text-wrap: balance;
}
.priser-reassure-list li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-green-light);
    color: var(--color-green-dark);
    font-size: 0.75rem;
    flex-shrink: 0;
}
.priser-reassure-note {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
@media (max-width: 900px) {
.priser-reassure {
        padding: 22px 20px;
    }
}
@media (max-width: 900px) {
.priser-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
.priser-reassure-list {
        grid-template-columns: 1fr;
    }
}
.skabelon-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 40px;
}
.skabelon-price-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    background: var(--color-blue-light);
    /* --color-blue-dark is only 3.49:1 on the pale blue tint */
    color: var(--color-link);
    border-radius: var(--radius-pill);
    padding: 8px 20px;
    font-weight: 700;
    font-size: 1.15rem;
    white-space: nowrap;
    margin-bottom: 20px;
}
.skabelon-price-badge span {
    font-size: 0.85rem;
    font-weight: 600;
}
.skabelon-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.skabelon-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.skabelon-list li > i {
    color: var(--color-blue);
    margin-top: 3px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.skabelon-list li strong {
    color: var(--color-text-primary);
}
.skabelon-note {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border-left: 3px solid var(--color-blue);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin: 0;
}
.skabelon-note i {
    color: var(--color-blue);
    margin-right: 6px;
}
.skabelon-stack {
    position: relative;
    aspect-ratio: 16 / 13;
}
.skabelon-stack > picture {
    position: absolute;
    display: block;
    width: 72%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.skabelon-stack > picture img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}
.skabelon-stack > picture:nth-child(1) { top: 0; left: 0; transform: rotate(-4deg); }
.skabelon-stack > picture:nth-child(2) { top: 25%; left: 14%; transform: rotate(2deg); z-index: 1; }
.skabelon-stack > picture:nth-child(3) { top: 50%; left: 28%; transform: rotate(5deg); z-index: 2; }
.skabelon-stack > picture:hover {
    transform: rotate(0) scale(1.05);
    z-index: 3;
    box-shadow: var(--shadow-xl);
}
.skabelon-caption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 16px 0 0;
}
@media (max-width: 900px) {
.skabelon-box {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 28px;
    }
}
@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) {
.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;
    }
.pricing-card {
        margin: 0 16px;
    }
}
@media (max-width: 480px) {
.btn {
        width: 100%;
    }
.price-value {
        font-size: 3rem;
    }
}
@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;
    }
}
@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;
    }
}
.pricing-cta-note {
    text-align: center;
    margin: 10px 0 14px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* Safe-area padding on all sides so the bar stays tappable on notched
       phones (incl. landscape) */
    padding: 12px calc(16px + env(safe-area-inset-right))
             calc(12px + env(safe-area-inset-bottom))
             calc(16px + env(safe-area-inset-left));
    background: var(--color-white);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(110%);
    /* visibility keeps the off-screen bar out of the tab order and the
       accessibility tree (same recipe as .mobile-menu): delay the visibility
       flip until the slide-out transition has finished. */
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.mobile-sticky-cta.visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
}
.mobile-sticky-cta-price {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    /* min-width:0 lets the price column shrink and its subtext wrap to two
       lines instead of clipping "Ekskl. moms ·" off on narrower pages */
    min-width: 0;
}
.mobile-sticky-cta-price strong {
    font-size: 1.05rem;
    color: var(--color-text-primary);
}
.mobile-sticky-cta-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;
    }
}
.cta-feature-note {
    margin: -12px 0 24px;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-muted);
}
@media (max-width: 900px) {
.cta-pricing-view,
    .cta-form-view {
        grid-template-columns: 1fr;
        gap: 36px;
    }
.cta-view {
        min-height: 0;
    }
.cta-features-list {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}
@media (max-width: 768px) {
.section {
        padding: 48px 0;
    }
.section-header,
    .problem-section .section-header {
        margin-bottom: 24px;
    }
.js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+5) {
        display: none;
    }
.pricing-card {
        margin: 0;
        max-width: none;
    }
}
@media (max-width: 480px) {
.nav-cta .btn,
    .mobile-sticky-cta .btn {
        width: auto;
    }
}
@media (max-width: 768px) {
.showcase-features,
    .cta-features-list {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
.cta-pricing-left,
    .cta-pricing-left h2,
    .cta-form-left h2 {
        text-align: center;
    }
.cta-form-left {
        align-items: center;
        text-align: center;
    }
.cta-feature-note {
        text-align: center;
    }
.cta-contact-alt {
        text-align: center;
    }
.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: 900px) {
.cta-features-list,
    .cta-form-left .cta-features-list {
        display: flex;
        /* row (base .contact-inline-list is column — stretched pills otherwise) */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: auto;
        max-width: 460px;
        margin: 0 auto 28px;
    }
.cta-features-list li {
        display: inline-flex;
        align-items: center;
        /* centered content: irrelevant for one-line chips (they hug their
           text) but keeps a chip whose label has to wrap symmetric instead
           of leaving a lopsided gap after the text (a wrapped flex item
           keeps the full line width — the box can't shrink to wrapped text) */
        justify-content: center;
        text-align: center;
        gap: 7px;
        padding: 7px 13px;
        background: rgba(76, 175, 80, 0.09);
        border: 1px solid rgba(76, 175, 80, 0.2);
        border-radius: var(--radius-pill);
        font-size: 0.85rem;
        line-height: 1.3;
        color: var(--color-text-secondary);
    }
.cta-features-list .feature-icon {
        width: auto;
        height: auto;
        background: none;
        flex-shrink: 0;
    }
.cta-features-list .feature-icon i {
        color: var(--color-green);
        font-size: 0.85rem;
    }
.cta-feature-note {
        text-align: center;
    }
}
@media (max-width: 768px) {
.pricing-card-header .price-main {
        flex-wrap: wrap;
    }
.pricing-card-header .price-currency {
        width: 100%;
        text-align: center;
        align-self: auto;
        margin: 0;
        font-size: 0.95rem;
    }
.pricing-card-header {
        padding: 24px 20px 20px;
    }
.pricing-card-body {
        padding: 24px 20px;
    }
.pricing-card-body .btn {
        white-space: nowrap;
        padding: 14px 12px;
        font-size: 1rem;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
.section {
        padding: 72px 0;
    }
.js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+9) {
        display: none;
    }
}
@media (min-width: 769px) and (max-width: 900px) {
.cta-form-left {
        align-items: center;
        text-align: center;
    }
.cta-pricing-left,
    .cta-pricing-left h2 {
        text-align: center;
    }
.pricing-card {
        max-width: none;
    }
.cta-contact-alt {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
.cta-contact-alt p {
        margin: 0;
    }
}
@media (min-width: 601px) and (max-width: 1024px) {
.footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 32px;
    }
.footer-brand {
        grid-column: 1 / -1;
        max-width: 560px;
    }
}
.priser-reassure a:not(.btn) {
    color: #25727d;
}
.kk-feedback {
    margin-top: 40px;
    padding: 24px 28px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.kk-feedback [hidden],
.missing-system [hidden],
.lead-survey [hidden] {
    display: none !important;
}
.kk-feedback-title {
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 14px;
}
.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-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.kk-feedback-input {
    flex: 1 1 200px;
    min-width: 0;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.kk-feedback-input:focus {
    outline: none;
    border-color: var(--color-blue-accessible);
    box-shadow: 0 0 0 3px var(--color-blue-light);
}
.kk-feedback-note {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 10px 0 0;
}
.kk-feedback-thanks {
    margin: 14px 0 0;
    font-weight: 600;
    color: var(--color-green-accessible);
}
.kk-feedback-error {
    margin: 10px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-red);
}
.kk-feedback-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.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;
}
.open-question {
    margin-top: 8px;
}
.faq-pdf-aside .open-question {
    margin-top: 24px;
}
.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 (max-width: 560px) {
.kk-feedback {
        padding: 20px;
    }
}
@media (min-width: 1025px) {
.js .features-catalog #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+10) {
        display: flex;
    }
}
@media (max-width: 768px) {
.section-hero-offset-lg {
        padding-top: 120px;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
.section-hero-offset-lg {
        padding-top: 150px;
    }
}
@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;
    }
}
@media (max-width: 900px) {
.trust-strip {
        justify-content: center;
    }
.priser-card h3,
    .priser-reassure h3 {
        justify-content: center;
    }
.priser-card .btn {
        width: 100%;
        justify-content: center;
    }
.skabelon-price-badge {
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
}
.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.visible {
    transform: translateY(0);
}
.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;
}
.legal-section p,
.legal-section li,
.legal-info-box p,
.legal-highlight p,
.contact-method a,
.contact-method span {
    overflow-wrap: break-word;
    word-break: break-word;
}
.legal-highlight {
    background: var(--color-blue-light);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin: 20px 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-left: 4px solid var(--color-blue);
}
.legal-highlight i {
    color: var(--color-blue);
    font-size: 1.2rem;
    margin-top: 2px;
}
.legal-highlight p {
    margin: 0;
    flex: 1;
    /* Explicit color: contexts like .section-header set muted gray on p,
       which is only 4.4:1 on the highlight tints - secondary passes on all. */
    color: var(--color-text-secondary);
}
.legal-highlight-note {
    display: block;
    margin-top: 6px;
    color: var(--color-text-muted);
}
.legal-highlight.green {
    background: var(--color-green-light);
    border-left-color: var(--color-green);
}
.legal-highlight.green i {
    color: var(--color-green);
}
@media print {
.header,
    .footer,
    .legal-breadcrumb,
    .mobile-menu-toggle,
    .nav-cta {
        display: none !important;
    }
.legal-info-box,
    .legal-highlight,
    .legal-contact-box,
    .legal-basis-item,
    .right-item,
    .security-item,
    .legal-purpose-card {
        page-break-inside: avoid;
        break-inside: avoid;
    }
a {
        text-decoration: none;
        color: inherit;
    }
body {
        font-size: 11pt;
        line-height: 1.5;
    }
}
@media (max-width: 900px) {
.section-header .legal-highlight {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
}
@media (max-width: 900px) {
.legal-breadcrumb {
        justify-content: center;
    }
}
.audience-hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
@media (max-width: 900px) {
.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;
    }
}
@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-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;
    }
}
.kk-calc {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.75rem;
    margin: 1.5rem 0;
}
.kk-calc-form {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.kk-calc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.kk-calc-row.is-hidden {
    display: none;
}
.kk-calc-label {
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1 1 55%;
    min-width: 220px;
}
.kk-calc-hint {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}
.kk-calc-control {
    flex: 0 1 auto;
}
.kk-calc-number,
.kk-calc-select {
    font: inherit;
    color: var(--color-text-primary);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.75rem;
    min-height: 44px;
}
.kk-calc-number {
    width: 5.5rem;
    text-align: center;
}
.kk-calc-select {
    min-width: 240px;
    max-width: 100%;
}
.kk-calc-number:focus,
.kk-calc-select:focus,
.kk-calc-switch input:focus-visible + .kk-calc-switch-track {
    outline: 2px solid var(--color-blue-accessible);
    outline-offset: 2px;
}
.kk-calc-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.kk-calc-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.kk-calc-switch-track {
    display: inline-block;
    width: 52px;
    height: 30px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast);
    position: relative;
    flex: none;
}
.kk-calc-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: var(--color-white);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}
.kk-calc-switch input:checked + .kk-calc-switch-track {
    background: var(--color-green-accessible);
}
.kk-calc-switch input:checked + .kk-calc-switch-track::after {
    transform: translateX(22px);
}
.kk-calc-result {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
}
.kk-calc-result h3 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}
.kk-calc-lines {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
.kk-calc-lines li {
    display: flex;
    justify-content: space-between;
    /* Baseline so a wrapped label keeps its value aligned to the first text
       line instead of floating pinned to the top of the row. */
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--color-border);
}
.kk-calc-lines li:last-child {
    border-bottom: none;
}
.kk-calc-line-label {
    color: var(--color-text-secondary);
}
.kk-calc-line-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-text-primary);
}
.kk-calc-totals {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr 1fr;
    margin-top: 0.5rem;
}
@media (max-width: 480px) {
.kk-calc-totals {
        grid-template-columns: 1fr;
    }
}
.kk-calc-total {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
}
.kk-calc-total-once {
    border-color: var(--color-blue);
    background: var(--color-blue-light);
}
.kk-calc-total-monthly {
    border-color: var(--color-green);
    background: var(--color-green-light);
}
.kk-calc-total-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}
.kk-calc-total-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.kk-calc-total-unit {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.kk-calc-note {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 1.25rem 0 0;
    line-height: 1.5;
    /* Hanging indent: the icon sits to the left, wrapped text lines align under
       the text (not under the icon). NOT flex – flex made every word a flex item
       and the gap spaced them apart. */
    padding-left: 1.5rem;
}
.kk-calc-note i {
    color: var(--color-blue-accessible);
    float: left;
    margin-left: -1.5rem;
    margin-top: 0.15rem;
    width: 1.5rem;
}
.kk-calc-cta {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.kk-calc-note a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (max-width: 600px) {
.kk-calc {
        padding: 1.25rem;
    }
.kk-calc-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
.kk-calc-label {
        flex: 1 1 auto;
        min-width: 0;
    }
.kk-calc-control {
        flex: 1 1 auto;
        width: 100%;
    }
.kk-calc-number,
    .kk-calc-select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        text-align: left;
    }
.kk-calc-row:has(.kk-calc-switch) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }
.kk-calc-row:has(.kk-calc-switch) .kk-calc-label {
        flex: 1 1 auto;
    }
.kk-calc-row:has(.kk-calc-switch) .kk-calc-control {
        flex: 0 0 auto;
        width: auto;
    }
.kk-calc-result {
        padding: 1.1rem 1.15rem;
    }
.kk-calc-lines li {
        gap: 0.5rem;
    }
.kk-calc-cta {
        flex-direction: column;
        align-items: stretch;
    }
.kk-calc-cta .btn {
        width: 100%;
    }
}
.kk-pdf-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: linear-gradient(135deg, #f8fafc 0%, #eef8fa 100%);
    border: 1px solid #d6eaee;
    border-left: 4px solid #3bb4c4;
    border-radius: 12px;
    padding: 24px;
    margin: 32px 0;
}
.kk-pdf-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3bb4c4;
    color: #fff;
    border-radius: 12px;
    font-size: 24px;
}
.kk-pdf-body {
    flex: 1 1 auto;
    min-width: 0;
}
.kk-pdf-title {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    line-height: 1.3;
    color: #1f2933;
}
.kk-pdf-desc {
    margin: 0 0 16px 0;
    color: #52606d;
    font-size: 0.95rem;
    line-height: 1.55;
}
.kk-pdf-form {
    margin-top: 2px;
    max-width: 440px;
}
.kk-pdf-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2933;
    margin-bottom: 8px;
}
.kk-pdf-label i {
    color: #3bb4c4;
}
.js .vc-dl-collapsed:not(.vc-dl-revealed) {
    display: none;
}
.js .vc-dl-revealed {
    animation: kk-dl-reveal 0.4s ease both;
}
@keyframes kk-dl-reveal {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.js .vc-dl-revealed { animation: none; }
}
html:not(.js) .vc-dl-more-wrap {
    display: none;
}
.vc-dl-card .kk-pdf-toggle:hover,
.vc-dl-card .kk-pdf-submit:hover:not(:disabled) {
    background: #b02a37;
}
.kk-pdf-alt {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #cbd7dc;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.kk-pdf-alt-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-link, #277884);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}
.kk-pdf-alt-link:hover {
    text-decoration: underline;
    color: var(--color-link, #277884);
}
.kk-pdf-free-note {
    margin: 0;
    font-size: 0.82rem;
    color: #7b8794;
}
.kk-pdf-inputrow {
    display: flex;
    gap: 8px;
}
.kk-pdf-email {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #cbd7dc;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1f2933;
    background: #fff;
}
.kk-pdf-email:focus {
    outline: none;
    border-color: #3bb4c4;
    box-shadow: 0 0 0 3px rgba(59, 180, 196, 0.18);
}
.kk-pdf-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 10px 16px;
    /* accessible variant: white on bright brand blue is only 2.46:1 */
    background: var(--color-blue-accessible, #2a818d);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.kk-pdf-submit:hover:not(:disabled) {
    background: var(--color-blue-hover, #226a74);
}
.kk-pdf-submit:disabled {
    opacity: 0.7;
    cursor: default;
}
.kk-pdf-form .form-optin {
    margin-top: 10px;
}
.kk-pdf-status {
    margin: 10px 0 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    min-height: 1px;
}
@media (max-width: 600px) {
.kk-pdf-card {
        flex-direction: column;
        gap: 14px;
        padding: 20px;
    }
.kk-pdf-form {
        max-width: none;
    }
.kk-pdf-inputrow {
        flex-direction: column;
    }
.kk-pdf-email {
        width: 100%;
        font-size: 16px;
        padding: 12px 14px;
    }
.kk-pdf-submit {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
        padding: 12px 16px;
    }
}
.story-quote-author {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 48px;
}
.story-quote-author strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 2px;
}
.story-quote-author span {
    font-size: 0.9rem;
    opacity: 0.8;
}
.story-quote-side {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 28px 32px;
    position: relative;
    color: var(--color-text-secondary);
}
.story-quote-side blockquote {
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0 0 20px 0;
}
.story-quote-side .story-quote-author {
    padding-left: 0;
    padding-top: 18px;
    border-top: 1px solid var(--color-border-light);
}
.story-quote-side .story-quote-author strong {
    font-size: 0.95rem;
    color: var(--color-text-primary);
}
.story-quote-side .story-quote-author span {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    opacity: 1;
}
.story-slide.active {
    opacity: 1;
}
.story-feature-compact.active {
    border-color: var(--color-blue);
    box-shadow: var(--shadow-md);
    background: var(--color-white);
}
@media (max-width: 600px) {
.story-feature-compact.active {
        border-left-width: 3px;
        border-left-color: var(--color-blue);
    }
}
.story-slideshow-wrapper .slideshow-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
}
.story-slideshow-wrapper .slideshow-canvas {
    border-radius: 0;
}
.story-slideshow-wrapper .slideshow-controls {
    opacity: 1;
}
@media (max-width: 768px) {
.story-quote-side {
        padding: 24px;
    }
.story-quote-side blockquote {
        font-size: 1rem;
        padding-left: 28px;
    }
.story-quote-side .story-quote-author {
        padding-left: 28px;
    }
.story-quote-author {
        padding-left: 32px;
    }
}
.info-tooltip.tooltip-visible::after,
.info-tooltip.tooltip-visible::before,
.info-tooltip:focus-visible::after,
.info-tooltip:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.info-tooltip-diagram.tooltip-visible::after,
.info-tooltip-diagram:focus-visible::after {
    transform: translateY(-50%) translateX(0);
}
.info-tooltip-diagram.tooltip-visible::before,
.info-tooltip-diagram:focus-visible::before {
    transform: translateY(-50%);
}
@media (max-width: 600px) {
.info-tooltip-diagram.tooltip-visible::after,
    .info-tooltip-diagram:focus-visible::after,
    .info-tooltip-summary.tooltip-visible::after,
    .info-tooltip-summary:focus-visible::after {
        transform: translateX(-50%) translateY(0);
    }
.info-tooltip-diagram.tooltip-visible::before,
    .info-tooltip-diagram:focus-visible::before {
        transform: translateX(-50%);
    }
}