/* =====================================================
   Klubklar Website Styles
   Based on Design Guidelines: Green, Blue, Yellow, Red
   ===================================================== */

/* CSS Variables */
: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;
}

/* Reset & Base */
*, *::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);
}

/* Links sitting inside running text must not rely on color alone to be
   distinguishable (WCAG 1.4.1 / Lighthouse link-in-text-block): teal vs. the
   gray body text is only ~1.6:1, so underline them. Component links (cards,
   buttons, nav) opt out simply by not living inside these prose containers. */
.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;
}

/* Typography */
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); }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
}

/* Utility Classes */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

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

.text-center { text-align: center; }
.text-left { text-align: left; }

/* Buttons */
.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);
}

/* deprecated: use .btn-primary (kept while markup migrates) */
.btn-green {
    background: var(--color-green-accessible);
    color: var(--color-white);
}

.btn-green: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);
}

/* Darker yellow so it matches the darkened green/blue interactive colors and
   carries white text at an accessible contrast. */
.btn-yellow {
    background: var(--color-yellow-button);
    color: #fff;
}

.btn-yellow:hover {
    background: var(--color-yellow-hover);
    color: #fff;
    transform: translateY(-2px);
    /* glow derived from the dark-olive button yellow (#877629), not the bright brand hue */
    box-shadow: 0 8px 20px rgba(135, 118, 41, 0.35);
}

.btn-red {
    background: var(--color-red);
    color: var(--color-white);
}

.btn-red:hover {
    background: var(--color-red-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(196, 59, 59, 0.3);
}

.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 Spacing */
.section {
    padding: 100px 0;
}

.section-sm {
    padding: 60px 0;
}

.section-alt {
    background: var(--color-bg);
}

.section-dark {
    background: var(--color-text-primary);
    color: var(--color-white);
}

.section-dark h2,
.section-dark h3,
.section-dark p {
    color: var(--color-white);
}

.section-dark p {
    opacity: 0.9;
}

/* Subtle divider when two consecutive sections share the same background
   (white on white / alt on alt) so they don't melt together.
   Contained width instead of full-bleed - drawn as a centered line. */
.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;
}

/* Image Placeholders */
.img-placeholder {
    background: #d0d0d0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.img-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(0,0,0,0.05) 100%);
}

.img-placeholder span {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.9);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
}

/* =====================================================
   HEADER / NAVIGATION
   ===================================================== */
.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: slim customer-login strip above the navigation */
.topbar {
    background: var(--color-text-primary);
}

.topbar-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 24px;
}

.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;
}

@media (max-width: 768px) {
    /* On mobile the login link lives in the mobile menu instead */
    .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 DROPDOWNS
   Hover/focus on desktop, click-toggle via main.js for
   touch and keyboard (adds .open on the li)
   ===================================================== */
.nav-links > li {
    position: relative;
}

.nav-link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    transition: color var(--transition-fast);
}

.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);
}

/* Invisible bridge so the panel doesn't close while the
   cursor travels from the link down to the panel */
.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;
}

/* Invisible hover bridge: fills the gap between the trigger and the panel so the
   menu doesn't close when the cursor travels diagonally toward a far column
   (e.g. from "Løsninger" across to the integrations grid). */
.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-item strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    font-weight: 600;
}

.nav-dropdown-item small {
    display: block;
    font-size: 0.875rem; /* keep readable small print at ≥14px */
    color: var(--color-text-muted);
}

.nav-dropdown-compact {
    font-size: 0.95rem;
    font-weight: 500;
    padding: 9px 12px;
    gap: 9px;
}

/* Tighter icon column inside compact grid items so the longest labels
   (e.g. "Idrætscentre & haller") fit in a grid cell without wrapping. */
.nav-dropdown-compact > i {
    width: 16px;
    font-size: 0.9em;
}

.nav-dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

/* Mega dropdown: Løsninger holds both foreningstyper and integrationer, each as
   a two-column grid of compact items, so "Integrationer" no longer needs its own
   top-level nav slot. Wide enough that two compact items (icon + longest label,
   e.g. "Idrætscentre & haller") fit per grid cell without wrapping or clipping.
   Centered under the trigger like the other dropdowns. Because Løsninger sits
   left in the nav, the panel is pulled back left of centre a touch so the wide
   panel stays balanced under the button without clipping the left viewport edge.
   viewport clamp so it can never overflow the right edge on narrow desktops. */
.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-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 */
.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. */
    padding: 80px 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;
}

/* Bounded, obviously-scrollable middle region. A bottom fade hints there's
   more below the fold; the CTA footer stays pinned outside this region. */
.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;
    /* Slightly tighter than the old 14px/1.1rem so more items fit on a phone
       screen and the drawer scales better. */
    padding: 12px 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);
}

/* Grouped links (Løsninger accordion). No fencing border/margin: the group
   sits in the same 8px rhythm as the plain links so its toggle reads as a
   peer nav row, not a section header. */
.mobile-menu-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Sub-section labels inside the expanded Løsninger group (Efter foreningstype /
   Integrationer til medlemssystem) — these ARE muted section labels */
.mobile-menu-subheading {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    padding: 14px 16px 6px;
}

/* Collapsible Løsninger group toggle: styled as a first-class nav row, EQUAL
   to the plain .mobile-menu-links rows (same size/weight/colour, no uppercase),
   with the chevron right-aligned. */
.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: 12px 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);
}

/* Only collapse when JS can expand again (html.js is set in the header) */
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);
}

/* Pinned footer (does not scroll): Kundelogin utility + primary CTA always
   visible. flex-shrink:0 keeps it out of the .mobile-menu-scroll region. */
.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;
}

/* Body scroll lock when menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

/* Native hash landings on section anchors clear the fixed header instead of
   tucking the heading under it (JS programmatic scrolls already offset). */
section[id] {
    scroll-margin-top: 80px;
}

/* =====================================================
   HERO SECTION
   ===================================================== */
.hero {
    padding: 190px 0 100px;
    background: url('../img/bg.webp') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--color-blue-light) 0%, transparent 70%);
    pointer-events: none;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 600px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--color-green-light);
    color: var(--color-green-dark);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    margin-bottom: 24px;
}

.hero-badge i {
    font-size: 0.85rem;
}

.hero h1 {
    /* Slightly below the global h1 clamp (3.5rem cap) so the long
       "foreninger og sportsklubber" title holds two lines comfortably. */
    font-size: clamp(2.2rem, 5vw, 2.8rem);
    margin-bottom: 24px;
    line-height: 1.15;
}

.hero h1 span {
    color: var(--color-blue-dark);
}

.hero-description {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    margin-bottom: 32px;
    line-height: 1.7;
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Small trust lines under the hero CTA: what the demo is + the price */
.hero-cta-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
}

/* Plain microcopy, deliberately NOT box-styled: the old tinted/bordered box
   read as a third button and competed with the real CTAs right above it. */
.hero-demo-note,
.audience-demo-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--color-text-muted); /* ≥4.5:1 on white/tinted hero bg (AA) */
    line-height: 1.5;
    margin: 0;
    padding: 0;
    /* Stay inside the hero column — as inline-flex its intrinsic width could
       otherwise exceed the viewport on narrow phones and push horizontal
       overflow (which clipped the header hamburger below ~440px). */
    max-width: 100%;
}

.hero-demo-note i,
.audience-demo-note i {
    color: var(--color-blue-accessible);
    margin-right: 6px;
    margin-top: 3px;
    flex-shrink: 0;
}

.audience-demo-note {
    /* .audience-hero-cta above carries 36px margin-bottom; pull the microcopy
       back up so it hugs the buttons it describes (~20px effective gap) */
    margin-top: -16px;
    margin-bottom: 28px; /* breathing room before the hero fact badges */
}

.hero-price-note {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* GDPR/compliance strip on conversion pages (priser, kontakt) */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
}

.trust-strip-center {
    justify-content: center;
}

.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);
}

.hero-price-note i {
    color: var(--color-green);
    margin-right: 6px;
}

.hero-price-note strong {
    color: var(--color-text-primary);
}

.hero-price-note a {
    color: var(--color-blue-dark);
    font-weight: 600;
}

/* The priser hero reuses the price note inside its centered section-header */
.section-header .hero-price-note {
    margin-top: 12px;
}

/* Inside a section-header the generic p-rule wins on size, so re-assert the
   small muted look (same as the screenshot figcaptions). */
.section-header .hero-price-vat {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-top: 6px;
}

.hero-price-vat {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 6px 0 0;
}

/* Subpage hero-offset helpers — replace per-page inline padding-top magic
   numbers (they clear the fixed header + login topbar). Centralized so the
   value stays consistent if the header height changes. */
.section-hero-offset {
    padding-top: 140px;
    padding-bottom: 0;
}

.section-hero-offset-lg {
    padding-top: 170px;
}

/* Variant that also removes the section's bottom padding (used where the next
   section carries its own top spacing). */
.section-hero-offset-lg.section-no-bottom {
    padding-bottom: 0;
}

.section-tight-top {
    padding-top: 40px;
}

.hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 38px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}

.hero-stat {
    text-align: left;
}

.hero-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-blue);
}

.hero-stat-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Stat labels that link to a guide stay muted but hint at the link */
.hero-stat-label a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(107, 114, 128, 0.4);
    text-underline-offset: 3px;
}

.hero-stat-label a:hover {
    color: var(--color-blue);
}

.hero-visual {
    position: relative;
}

.hero-image-wrapper {
    position: relative;
    margin-bottom: 24px;
}

.hero-image-main {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.hero-tv-frame {
    position: relative;
    width: 100%;
}

.tv-frame-bg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.25));
}

.hero-tv-caption {
    text-align: center;
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    display: block;
}

.hero-tv-caption i {
    color: var(--color-blue);
    margin-right: 8px;
}

.hero-tv-caption .caption-note {
    display: block;
    color: var(--color-text-light);
    font-style: italic;
    margin-top: 4px;
}

.hero-slideshow {
    position: absolute;
    top: 4%;
    left: 2.3%;
    width: 95%;
    height: 92%;
    overflow: hidden;
    background: #1a1a2e;
}

/* Live Dashboard Slideshow in Hero */
.hero-slideshow-wrapper {
    position: absolute !important;
    top: 4%;
    left: 2.3%;
    width: 95.5%!important;
    height: 92%;
    overflow: hidden;
    background: #1a1a2e;
    border-radius: 0 !important;
    z-index: 1;
    aspect-ratio: unset !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.hero-slideshow-wrapper .slideshow-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.hero-slideshow-wrapper .slideshow-canvas {
    border-radius: 0;
}

.hero-slideshow-wrapper .slideshow-controls {
    opacity: 1;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.hero-feature-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.hero-feature-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
}

.hero-feature-icon.green { background: var(--color-green); }
.hero-feature-icon.blue { background: var(--color-blue); }
.hero-feature-icon.yellow { background: var(--color-yellow); }

.hero-feature-text {
    font-size: 0.9rem;
}

.hero-feature-text strong {
    display: block;
    color: var(--color-text-primary);
}

.hero-feature-text span {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* Hero Testimonial */
.hero-testimonial {
    margin-top: 24px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--color-yellow);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.hero-testimonial-quote {
    position: relative;
    flex: 1;
}

.hero-testimonial-quote i {
    color: var(--color-yellow);
    font-size: 1rem;
    opacity: 0.5;
    margin-right: 8px;
}

.hero-testimonial-quote p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: 1.5;
    margin: 0;
    display: inline;
}

.hero-testimonial-author {
    padding-left: 20px;
    border-left: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 1rem;
    flex-shrink: 0;
    overflow: hidden;
}

.testimonial-avatar picture {
    display: block;
    width: 100%;
    height: 100%;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-author-info strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text-primary);
}

.testimonial-author-info span {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.testimonial-author-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-company-logo {
    margin-bottom: 12px;
    opacity: 0.8;
    transition: opacity var(--transition-normal);
}

.testimonial-company-logo:hover {
    opacity: 1;
}

.testimonial-company-logo img {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.hero-testimonial-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -16px;
    font-size: 0.9rem;
    font-weight: 500;
    /* Accessible olive for the text; the star icon keeps the bright brand
       yellow as a decorative accent (see i:first-child below). */
    color: var(--color-yellow-accessible);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.hero-testimonial-link:hover {
    color: var(--color-text-primary);
}

.hero-testimonial-link i:first-child {
    color: var(--color-yellow);
}

.hero-testimonial-link i:last-child {
    margin-left: auto;
    font-size: 0.8rem;
    transition: transform var(--transition-fast);
}

.hero-testimonial-link:hover i:last-child {
    transform: translateX(4px);
}

/* =====================================================
   PROBLEM / SOLUTION SECTION
   ===================================================== */
.problem-section {
    background: var(--color-text-primary);
    color: white;
    padding: 80px 0;
}

/* Inline links inside problem cards sit on the dark section background, so the
   default dark body-link colour is illegible (2.4:1). Use a light tint of the
   brand blue (5.5:1 on the dark bg) with an underline for clear affordance. */
.problem-section a:not(.btn):not(.problem-card-guide) {
    color: #5cc7d6;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.problem-section a:not(.btn):not(.problem-card-guide):hover {
    color: #fff;
}

.problem-section .section-header {
    margin-bottom: 48px;
}

.problem-section .section-label {
    background: rgba(255,255,255,0.1);
    /* Lightened from --color-yellow: on the translucent white chip over the
       dark navy section, brand yellow only hits 3.58:1 — this passes 4.5:1. */
    color: #dbc56e;
}

.problem-section .section-header h2 {
    color: white;
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.problem-card {
    text-align: center;
    padding: 32px;
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all var(--transition-normal);
    /* Column layout so the guide link pins to the bottom and all three
       cards stay visually level regardless of text length. */
    display: flex;
    flex-direction: column;
}

.problem-card:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-4px);
}

.problem-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-yellow);
}

.problem-card h3 {
    color: white;
    margin-bottom: 12px;
    font-size: 1.25rem;
}

.problem-card p {
    /* 0.9 (not 0.75): these problem statements do the audience qualification,
       so they must read as primary text on the dark background */
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
}

/* Bottom-pinned guide link: every problem card gets one matching guide, so
   the deep links live in a consistent slot instead of bloating one card. */
.problem-card-guide {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Single line, always: the labels are deliberately short, nowrap forbids
       wrapping, and the font eases down a touch at the narrowest three-column
       widths so nothing overflows. Every card gets an identical one-line row. */
    white-space: nowrap;
    font-size: clamp(0.75rem, 0.35rem + 0.55vw, 0.875rem);
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    border-top: 1px solid rgba(255,255,255,0.12);
    transition: color var(--transition-fast);
}

.problem-card-guide:hover {
    color: var(--color-yellow);
}

.problem-card-guide i:first-child {
    color: var(--color-yellow);
    font-size: 0.85rem;
}

.problem-card-guide i:last-child {
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
}

.problem-card-guide:hover i:last-child {
    transform: translateX(3px);
}

/* Let the text block absorb the height difference so the pinned links and
   card bottoms stay level across all three cards. The 20px gap between the
   text and the guide link comes from the paragraph's own bottom margin. */
.problem-card p {
    flex-grow: 1;
    margin-bottom: 20px;
}

/* Full-width takeaway banner under the problem grid: same surface treatment
   as the cards, but one horizontal strip spanning all three columns. */
.problem-note {
    margin-top: 24px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    color: rgba(255,255,255,0.85);
    text-align: center;
}

.problem-note i {
    color: var(--color-yellow);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.problem-note p {
    margin: 0;
    font-size: 1rem;
    /* The global `p` colour rule beats inheritance from the container, so
       restate the light text explicitly for this dark section. */
    color: rgba(255,255,255,0.85);
}

.problem-section .section-bridge {
    color: rgba(255,255,255,0.8);
    font-size: 1.15rem;
    margin-top: 12px;
}

.problem-cta {
    text-align: center;
    margin-top: 48px;
}

/* Section CTA - reusable centered CTA */
.section-cta {
    text-align: center;
    margin-top: 48px;
}

/* =====================================================
   FEATURES SECTION
   ===================================================== */

/* Features count badge */
.features-count {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 10;
}

.features-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Accessible end-stops so the white text passes WCAG across the gradient */
    background: linear-gradient(135deg, var(--color-green-accessible), var(--color-blue-accessible));
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    cursor: help;
    position: relative;
    transition: all var(--transition-fast);
}

.features-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.features-badge .info-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 0.65rem;
    transition: all var(--transition-fast);
}

.features-badge:hover .info-hint {
    background: rgba(255, 255, 255, 0.4);
}

.features-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    width: min(280px, 90vw);
    max-width: 280px;
    padding: 12px 14px;
    background: var(--color-text-primary);
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 10;
    pointer-events: none;
    text-align: center;
}

.features-badge::before {
    content: '';
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--color-text-primary);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 11;
}

.features-badge:hover::after,
.features-badge:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* Feature Card */
.feature-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.feature-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-blue);
}

/* Feature Card Content */
.feature-card h3 {
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.feature-card > p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
    flex-grow: 1;
}

.feature-card .feature-example-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    /* 8px 14px matches the base .feature-example-btn so every example/link
       button across all cards is exactly the same size. */
    padding: 8px 14px;
    font-size: 0.8rem;
}

/* Dynamic Indicator on Card */
.feature-card-actions {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-card-actions .feature-example-btn {
    /* relative (not static): cancels the absolute positioning above while
       keeping the ::after tap-target expansion anchored to the button */
    position: relative;
    top: auto;
    right: auto;
}

/* "Se alle integrationer" exists twice in the Holdkalender card: the -below
   copy renders in normal flow at the card bottom on desktop/tablet, and the
   -inline copy renders in the actions row beside "Se eksempel" on <=768 where
   the actions row is a centered flex row. Exactly one copy is visible at any
   width (duplicate-link swap, not content hiding — same link/text always on
   the page). The mobile toggles live in the <=768 block. */
.feature-link-btn-below {
    align-self: flex-start;
}

/* double class: must outrank the generic .feature-link-btn display rule
   declared further down */
.feature-link-btn.feature-link-btn-inline {
    display: none;
}

/* In the actions row the link is a peer of "Se eksempel": same compact size,
   and no top margin (the base .feature-link-btn margin-top is for the
   bottom-of-card placement). */
.feature-card-actions .feature-link-btn {
    margin-top: 0;
    align-self: center;
    padding: 8px 14px;
    font-size: 0.8rem;
}

.dynamic-indicator {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-blue-light), rgba(59, 180, 196, 0.3));
    border: 1px solid rgba(59, 180, 196, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    position: relative;
    transition: all var(--transition-fast);
}

.dynamic-indicator i {
    font-size: 0.7rem;
    color: var(--color-blue-dark);
}

.dynamic-indicator:hover {
    background: linear-gradient(135deg, rgba(59, 180, 196, 0.3), rgba(59, 180, 196, 0.5));
    border-color: var(--color-blue);
    transform: scale(1.1);
}

.dynamic-indicator::after {
    content: 'Dynamisk slide – opdateres automatisk';
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 180px;
    padding: 8px 10px;
    background: var(--color-text-primary);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.4;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all var(--transition-fast);
    z-index: 10;
    pointer-events: none;
    text-align: center;
}

.dynamic-indicator::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    right: 8px;
    border: 6px solid transparent;
    border-bottom-color: var(--color-text-primary);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 11;
}

.dynamic-indicator:hover::after,
.dynamic-indicator:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-bottom: 14px;
}

.feature-icon.green { background: var(--color-green-light); color: var(--color-green); }
.feature-icon.blue { background: var(--color-blue-light); color: var(--color-blue); }
.feature-icon.yellow { background: var(--color-yellow-light); color: var(--color-yellow); }
.feature-icon.red { background: var(--color-red-light); color: var(--color-red); }

/* Feature Example Button */
.feature-example-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.feature-example-btn:hover {
    background: var(--color-blue-light);
    border-color: var(--color-blue);
    color: var(--color-link);
}

.feature-example-btn i {
    font-size: 0.75rem;
}

/* Expand the effective tap target to ≥44px without growing the visual pill
   (WCAG target size). The pseudo-element is part of the clickable element;
   the offsets are small enough that neighbouring buttons (8px gap) don't
   overlap. Both button types are position:relative/absolute, never static. */
.feature-example-btn,
.feature-link-btn {
    position: relative;
}

.feature-example-btn::after,
.feature-link-btn::after {
    content: '';
    position: absolute;
    top: -7px;
    bottom: -7px;
    left: -4px;
    right: -4px;
}

/* Anchor-style action button (e.g. "Se alle integrationer") — same shape as
   the example button but scrolls to a section instead of opening the modal. */
.feature-link-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-top: 16px;
    padding: 8px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.feature-link-btn:hover {
    background: var(--color-yellow-light);
    border-color: var(--color-yellow);
    color: var(--color-yellow-accessible);
}

.feature-link-btn i {
    font-size: 0.75rem;
}

/* =====================================================
   FEATURE MODAL
   ===================================================== */
.feature-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.feature-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.feature-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 90%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-modal-overlay.active .feature-modal {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Modal Top Bar */
.feature-modal-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 33px 20px;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-white);
}

.feature-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.feature-modal-close {
    /* 44×44 min tap target (WCAG 2.5.8); icon stays ~1.1rem so the visual
       weight is unchanged — only the hit area grows */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.feature-modal-close:hover {
    background: rgba(0, 0, 0, 0.08);
}

.feature-modal-close:hover i {
    color: var(--color-text-primary);
}

.feature-modal-close i {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.feature-modal-image {
    width: 100%;
    height: 288px;
    background: linear-gradient(135deg, var(--color-blue), var(--color-green));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.feature-modal-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Hide overlay when TV frame is shown */
.feature-modal-image:has(.feature-modal-tv-frame[style*="block"])::before {
    display: none;
}

/* When the TV frame is shown, let the image box size to the frame's natural
   aspect ratio instead of the fixed 288px used for the gradient/placeholder
   modes — otherwise the aspect-ratio frame gets clipped or letterboxed. */
.feature-modal-image:has(.feature-modal-tv-frame[style*="block"]) {
    margin-top: 30px;
    height: auto;
    background: transparent;
    overflow: visible;
    /* Breathing room on both sides so the TV frame isn't edge-to-edge */
    padding: 0 33px;
    box-sizing: border-box;
}

/* Small phones: shrink the fixed-height image area so the description text
   below it isn't crushed inside the max-height:90vh modal */
@media (max-width: 480px) {
    .feature-modal-image {
        height: 200px;
    }
}

.feature-modal-image-placeholder {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.95);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: #666;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Static image in modal (e.g., slide-designer) */
.feature-modal-static-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Hide overlay when static image is shown */
.feature-modal-image:has(.feature-modal-static-image[style*="block"])::before {
    display: none;
}

/* TV Frame in modal — sized by the SVG's natural aspect ratio, exactly like
   the hero frame, so the slideshow lines up with the screen cutout and scales
   fluidly at any width (the old fixed-height + object-fit:contain approach
   letterboxed the SVG and the % positioning no longer matched the screen). */
.feature-modal-tv-frame {
    position: relative;
    width: 100%;
}

.feature-modal-tv-frame .tv-frame-bg {
    position: static;
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 0 0 transparent);
}

/* Same screen-cutout percentages as .hero-slideshow-wrapper */
.feature-modal-slideshow-wrapper {
    position: absolute !important;
    top: 4%;
    left: 2.3%;
    width: 95.5% !important;
    height: 92%;
    z-index: 2;
    border-radius: 0px!important;
    overflow: hidden;
    background: #1a1a2e;
}

.feature-modal-slideshow-wrapper .slideshow-container {
    border-radius: 0;
    box-shadow: none;
}

.feature-modal-slideshow-wrapper .slideshow-canvas {
    border-radius: 0;
}

.feature-modal-slideshow-wrapper .slideshow-controls {
    display: none !important;
}

.feature-modal-slideshow-wrapper .slideshow-counter {
    display: none !important;
}

.feature-modal-slideshow-wrapper .slideshow-progress-bar {
    display: none !important;
}

.feature-modal-content {
    padding: 20px 33px 33px;
}

.feature-modal-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.feature-modal-icon.green { color: var(--color-green); }
.feature-modal-icon.blue { color: var(--color-blue); }
.feature-modal-icon.yellow { color: var(--color-yellow); }
.feature-modal-icon.red { color: var(--color-red); }

.feature-modal-title-area {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.2;
}

.feature-modal-dynamic-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: linear-gradient(135deg, var(--color-blue-light), rgba(59, 180, 196, 0.25));
    border: 1px solid rgba(59, 180, 196, 0.4);
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-blue-dark);
}

.feature-modal-dynamic-badge i {
    font-size: 0.7rem;
}

.feature-modal-description {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.feature-modal-dynamic-info {
    background: linear-gradient(135deg, var(--color-blue-light), rgba(59, 180, 196, 0.15));
    border: 1px solid rgba(59, 180, 196, 0.3);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.feature-modal-dynamic-info > i {
    color: var(--color-blue);
    font-size: 1.2rem;
    margin-top: 2px;
}

.feature-modal-dynamic-info > div {
    flex: 1;
}

.feature-modal-dynamic-info strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-blue-dark);
    margin-bottom: 4px;
}

.feature-modal-dynamic-info p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Mobile: collapsible explainer. When JS marks the box .is-collapsible the
   heading acts as a disclosure toggle and the paragraph is hidden until
   .is-open, so the note doesn't eat modal height. Caret rotates on open. */
.feature-modal-dynamic-info.is-collapsible {
    padding: 12px 14px;
    margin-bottom: 16px;
}

.feature-modal-dynamic-info.is-collapsible strong {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0;
}

.feature-modal-dynamic-info.is-collapsible strong::after {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--color-blue);
    transition: transform var(--transition-fast);
}

.feature-modal-dynamic-info.is-collapsible.is-open strong::after {
    transform: rotate(180deg);
}

.feature-modal-dynamic-info.is-collapsible p {
    display: none;
    margin-top: 8px;
}

.feature-modal-dynamic-info.is-collapsible.is-open p {
    display: block;
}

/* Features Toggle */
.features-toggle-wrapper {
    /* Only meaningful with JS — without it all cards are already shown, so the
       "Vis flere" button would do nothing. Hidden by default, shown via .js. */
    display: none;
    justify-content: center;
    margin: 40px 0;
    max-height: 100px;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease 0.3s, margin 0.3s ease 0.3s;
}

.js .features-toggle-wrapper {
    display: flex;
}

.features-toggle-wrapper.hidden {
    opacity: 0;
    max-height: 0;
    margin: 0;
    pointer-events: none;
}

.features-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 1rem;
}

/* Audience cross-links shown under the feature grid. The 14 links are styled
   as compact chips so the block reads as navigation, not a wall of prose. */
.features-audience-note {
    max-width: 760px;
    margin: 32px auto 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* All 19 cards share one grid so columns stay filled at every breakpoint.
   Until the toggle adds .features-expanded, each breakpoint hides its own
   tail — a full-row count for its column count: 9 on desktop's 3 columns
   here, 8 on tablet's 2 columns and 4 on mobile in their media blocks. */
.js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+10) {
    display: none;
}

/* =====================================================
   FEATURE SHOWCASE (Alternating)
   ===================================================== */
.showcase-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 80px 0;
}

.showcase-item:nth-child(even) {
    direction: rtl;
}

.showcase-item:nth-child(even) > * {
    direction: ltr;
}

.showcase-content {
    max-width: 520px;
}

/* Integration showcase: the hub lives INSIDE .showcase-content so that on mobile
   it sits directly under the title. Single DOM copy → the 8 integration links
   stay crawlable and un-duplicated.
   DOM order inside .showcase-content: head (label + h3) → hub → body (p, ul, ctas).
   - Mobile: natural stack = title, hub, body (hub right under the title). ✓
   - Desktop (≥1025px, matching the other showcases' collapse point so no
     section splits in the 993-1024 band while its siblings are stacked):
     .showcase-content becomes a 2-col grid; head + body occupy the left
     column (rows 1 and 2), the hub spans the right column across both. */
@media (min-width: 1025px) {
    /* The item's outer grid must collapse to one column so the inner grid on
       .showcase-content can span the full width (the hub now lives inside it,
       so .showcase-content is the item's only child). */
    .showcase-item-integration {
        grid-template-columns: 1fr;
    }

    .showcase-item-integration .showcase-content {
        display: grid;
        /* Match the alternating design: this is the 2nd (even) showcase, so the
           hub sits on the LEFT and the text on the right. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 80px;
        max-width: 100%;
        align-items: center;
        direction: ltr;
    }

    .showcase-item-integration .integration-hub {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .showcase-item-integration .showcase-copy-head {
        grid-column: 2;
        grid-row: 1;
        max-width: 520px;
        align-self: end;
    }

    .showcase-item-integration .showcase-copy-body {
        grid-column: 2;
        grid-row: 2;
        max-width: 520px;
        align-self: start;
    }
}

.showcase-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--color-blue-light);
    color: var(--color-blue-dark);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
    text-transform: uppercase;
}

.showcase-content h3 {
    font-size: 1.75rem;
    margin-bottom: 20px;
}

.showcase-content p {
    font-size: 1.05rem;
    margin-bottom: 24px;
}

.showcase-features {
    list-style: none;
}


.showcase-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    color: var(--color-text-secondary);
}

.showcase-features li i {
    color: var(--color-green);
    font-size: 1.1rem;
    margin-top: 2px;
}

.showcase-cta {
    margin-top: 24px;
}

.showcase-image {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Single image showcase */
.showcase-image-single {
    overflow: hidden;
    position: relative;
}

.showcase-image-single img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-image-single:hover img {
    transform: scale(1.03);
}

/* Showcase Slideshow */
.showcase-slideshow {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-dark, #1a1a2e);
}

.showcase-slideshow-track {
    position: relative;
    width: 100%;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    /* Autoplay already stays off (main.js); also drop the slide transition
       itself so manual navigation is motion-free */
    .showcase-slide {
        transition: none !important;
        transform: none !important;
    }
}

.showcase-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
    overflow: hidden;
}

/* Slides are wrapped in a <picture> (webp + jpg fallback); the <picture>
   must fill the absolutely-positioned .showcase-slide, and the <img> fills it. */
.showcase-slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

.showcase-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.showcase-slide.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Slideshow Navigation Buttons */
.showcase-slideshow-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.showcase-slideshow:hover .showcase-slideshow-controls {
    opacity: 1;
}

/* Touch devices (tablets) never fire hover — keep the arrows visible */
@media (hover: none) {
    .showcase-slideshow-controls {
        opacity: 1;
    }
}

.showcase-slideshow-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.showcase-slideshow-btn:hover {
    background: var(--color-white);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.showcase-slideshow-btn:active {
    transform: scale(0.95);
}

/* Slideshow Dot Navigation */
.showcase-slideshow-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.showcase-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

/* Expand the touch target to WCAG 2.5.8's 24px minimum without changing the
   10px visual dot (matters on tablets where the dots stay visible). */
.showcase-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
}

.showcase-dot:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.15);
}

.showcase-dot.active {
    background: var(--color-white);
    border-color: var(--color-white);
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Persistent Caption Bar */
.showcase-slideshow-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-green-accessible);
    color: var(--color-white);
    padding: 20px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 10;
}

.showcase-caption-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 500;
}

.showcase-caption-content i {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: rgb(255 255 255);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
    transition: transform 0.3s ease;
    color: #4caf50;
}

/* The glyph renders as a ::before pseudo. Flex-centre it inside the circle
   too so wide/narrow FA icons (fa-users vs fa-clock) all sit dead-centre. */
.showcase-caption-content i::before {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1;
}

.showcase-caption-content span {
    transition: opacity 0.3s ease;
}

/* "And more!" badge on last slide */
.showcase-slide-more {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--color-yellow-button);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
    transform: scale(0) rotate(-10deg);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.showcase-slide.active .showcase-slide-more {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    transition-delay: 0.4s;
}

.showcase-slide-more i {
    font-size: 1rem;
    color: #fff;
}

/* Mobile adjustments for slideshow */
@media (max-width: 768px) {
    /* Admin slideshow stays VISIBLE on mobile (Google indexes mobile-first —
       hiding it dropped six admin-panel screenshots from the page). The slides
       are absolutely positioned, so the container needs its own aspect ratio:
       the screenshots are 1089x1128, ~square, cropped from the top. */
    .showcase-image.showcase-slideshow {
        aspect-ratio: 1;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
    }

    .showcase-slideshow-controls {
        opacity: 1;
        padding: 0 8px;
    }
    
    .showcase-slideshow-btn {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
    
    /* Dots are redundant on mobile (arrows + swipe already navigate) and add
       height to the caption bar — drop them for a more compact caption. */
    .showcase-slideshow-dots {
        display: none;
    }

    /* Compact single-row caption: icon + text, centered, no dot row below */
    /* Symmetric compact padding: the dots this bar shares space with on
       desktop are hidden at this width, so the old 22px top pad just pushed
       the content low and made the bar tall. */
    .showcase-slideshow-caption {
        padding: 10px 14px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .showcase-caption-content {
        font-size: 0.8rem;
        gap: 9px;
    }

    .showcase-caption-content i {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.75rem;
    }
    
    .showcase-slide-more {
        top: 12px;
        right: 12px;
        padding: 6px 12px;
        font-size: 0.75rem;
        gap: 6px;
    }
}

/* Diagonal Split Image Container */
.diagonal-split-container {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-dark, #1a1a2e);
}

.diagonal-split-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.3s ease,
                z-index 0s 0.5s;
    cursor: pointer;
}

.diagonal-split-image:hover {
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.3s ease,
                z-index 0s 0s;
}

/* Split images are wrapped in a <picture> (webp + jpg fallback); the <picture>
   must fill the absolutely-positioned .diagonal-split-image, and the <img> fills it. */
.diagonal-split-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.diagonal-split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Left image - covers top-left, clips diagonally with gap */
.diagonal-split-left {
    clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%);
    z-index: 2;
}

/* Right image - covers bottom-right, clips diagonally with gap */
.diagonal-split-right {
    clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
    z-index: 2;
}

/* Diagonal divider line for visual separation */
.diagonal-split-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 46%,
        rgba(255, 255, 255, 0.15) 46%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.15) 54%,
        transparent 54%
    );
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s ease;
}

/* Labels */
.diagonal-split-label {
    position: absolute;
    padding: 10px 18px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 4;
    box-shadow: var(--shadow-md);
}

.diagonal-split-left .diagonal-split-label {
    top: 20px;
    left: 20px;
    background: var(--color-green-accessible);
}

.diagonal-split-right .diagonal-split-label {
    bottom: 20px;
    right: 20px;
    background: var(--color-blue-accessible);
}

/* Hover effects - Left image expands */
.diagonal-split-container:hover .diagonal-split-left:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    z-index: 5;
}

.diagonal-split-container:hover .diagonal-split-left:hover ~ .diagonal-split-divider {
    opacity: 0;
}

.diagonal-split-container:hover .diagonal-split-right:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    z-index: 5;
}

/* When hovering one side, fade the other side's label */
.diagonal-split-container .diagonal-split-left:hover .diagonal-split-label {
    background: var(--color-green-hover);
    transform: scale(1.05);
}

.diagonal-split-container .diagonal-split-right:hover .diagonal-split-label {
    background: var(--color-blue-hover);
    transform: scale(1.05);
}

.diagonal-split-container:hover .diagonal-split-image:not(:hover) .diagonal-split-label {
    opacity: 0.4;
}

/* Subtle zoom on the image when expanded */
.diagonal-split-image:hover img {
    transform: scale(1.02);
}

/* Hide divider when either side is hovered and expanded */
.diagonal-split-container:has(.diagonal-split-image:hover) .diagonal-split-divider {
    opacity: 0;
}

/* =====================================================
   INTEGRATION HUB - Medlemssystem Connections
   ===================================================== */
.integration-hub {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center hub */
.integration-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.integration-logo-center {
    width: 120px;
    height: 120px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(59, 180, 196, 0.3);
    position: relative;
    z-index: 10;
}

.integration-logo-center img {
    width: 80%;
    height: auto;
    object-fit: contain;
}

/* Pulsating rings */
.integration-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid var(--color-blue);
    animation: pulse-ring 6s ease-out infinite;
    opacity: 0;
}

.integration-pulse.pulse-2 {
    animation-delay: 2s;
}

.integration-pulse.pulse-3 {
    animation-delay: 4s;
}

@keyframes pulse-ring {
    0% {
        width: 120px;
        height: 120px;
        opacity: 0.5;
    }
    100% {
        width: 350px;
        height: 350px;
        opacity: 0;
    }
}

/* Connection lines */
.integration-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.integration-line {
    stroke: var(--color-blue);
    stroke-width: 2;
    stroke-dasharray: 8 4;
    stroke-linecap: round;
    opacity: 0.4;
    animation: line-flow 2s linear infinite;
}

.integration-line.line-2 { animation-delay: 0.25s; }
.integration-line.line-3 { animation-delay: 0.5s; }
.integration-line.line-4 { animation-delay: 0.75s; }
.integration-line.line-5 { animation-delay: 1s; }
.integration-line.line-6 { animation-delay: 1.25s; }
.integration-line.line-7 { animation-delay: 1.5s; }
.integration-line.line-8 { animation-delay: 1.75s; }

@keyframes line-flow {
    0% {
        stroke-dashoffset: 24;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Logo items container */
.integration-logos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

/* Individual logo items */
.integration-logo-item {
    position: absolute;
    width: 100px;
    height: 50px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: float-subtle 4s ease-in-out infinite;
}

.integration-logo-item:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
    z-index: 20;
}

.integration-logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Staggered float animation */
@keyframes float-subtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.integration-logo-item:nth-child(2) { animation-delay: 0.5s; }
.integration-logo-item:nth-child(3) { animation-delay: 1s; }
.integration-logo-item:nth-child(4) { animation-delay: 1.5s; }
.integration-logo-item:nth-child(5) { animation-delay: 2s; }
.integration-logo-item:nth-child(6) { animation-delay: 2.5s; }
.integration-logo-item:nth-child(7) { animation-delay: 3s; }
.integration-logo-item:nth-child(8) { animation-delay: 3.5s; }

/* Logo positions - arranged in a circle around center */
.logo-pos-1 {
    top: 8%;
    left: 8%;
}

.logo-pos-2 {
    top: 2%;
    left: calc(50% - 50px);
}

.logo-pos-3 {
    top: 8%;
    right: 8%;
}

.logo-pos-4 {
    top: calc(50% - 25px);
    right: 3%;
}

.logo-pos-5 {
    bottom: 8%;
    right: 8%;
}

.logo-pos-6 {
    bottom: 2%;
    left: calc(50% - 50px);
}

.logo-pos-7 {
    bottom: 8%;
    left: 8%;
}

.logo-pos-8 {
    top: calc(50% - 25px);
    left: 3%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .integration-logo-center {
        width: 80px;
        height: 80px;
    }
    
    .integration-pulse {
        width: 80px;
        height: 80px;
    }
    
    @keyframes pulse-ring {
        0% {
            width: 80px;
            height: 80px;
            opacity: 0.8;
        }
        100% {
            width: 200px;
            height: 200px;
            opacity: 0;
        }
    }
    
    .integration-logo-item {
        width: 70px;
        height: 35px;
        padding: 6px 10px;
    }
}

/* =====================================================
   COMPARISON SECTION
   ===================================================== */
.comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Scroll affordance for the comparison table on mobile. The hint line and the
   right-edge fade only appear where the table actually overflows (≤768px). */
.comparison-scroll-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.comparison-scroll-hint i {
    color: var(--color-green);
    animation: comparison-scroll-nudge 1.6s ease-in-out infinite;
}

@keyframes comparison-scroll-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .comparison-scroll-hint i { animation: none; }
}

.comparison-table {
    width: 100%;
    /* On narrow screens the wrapper scrolls horizontally rather than squishing
       the 3 columns illegibly — same pattern as the legal tables. Keeps the
       full table (and its text) in the mobile-indexed DOM for SEO. */
    min-width: 520px;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.comparison-table th,
.comparison-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}

.comparison-table thead th {
    background: var(--color-bg);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-primary);
}

.comparison-table thead th:first-child {
    width: 45%;
}

.comparison-table tbody td:first-child {
    font-weight: 500;
    color: var(--color-text-primary);
}

.comparison-table .highlight-col {
    background: var(--color-blue-light);
    text-align: center;
}

.comparison-table tbody td:not(:first-child) {
    text-align: center;
}

.comparison-table thead th:not(:first-child) {
    text-align: center;
}

.comparison-table .cell-note {
    font-size: inherit;
    /* darkened from --color-text-muted: on the pale blue .highlight-col tint
       the muted gray is only 4.44:1 */
    color: #646c79;
    margin-left: 4px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
}

/* Links inside table cells must not rely on color alone to be
   distinguishable (WCAG 1.4.1 / Lighthouse link-in-text-block). */
.comparison-table td a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.comparison-table thead .highlight-col {
    background: var(--color-blue-accessible);
    color: white;
}

.check-yes {
    color: var(--color-green);
    font-size: 1.2rem;
}

.check-no {
    color: var(--color-red);
    font-size: 1.2rem;
}

.check-partial {
    /* Conveys "partial" in the comparison table, so it must be legible, not
       the sub-3:1 bright yellow */
    color: var(--color-yellow-accessible);
    font-size: 1.2rem;
}

/* =====================================================
   PRICING SECTION
   ===================================================== */
.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);
}

/* =====================================================
   TESTIMONIAL / STORY SECTION
   ===================================================== */
.story-section {
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
    color: white;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}

.story-image-wrapper {
    text-align: left;
}

.story-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    object-fit: cover;
}

.story-image-wrapper .story-signature {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.story-signature-content {
    text-align: left;
}

.story-image-wrapper .story-cta {
    margin-top: 0;
    align-self: stretch;
    justify-content: center;
}

.story-content h2 {
    color: white;
    margin-bottom: 24px;
}

.story-content {
    position: relative;
    padding: 26px 38px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-xl);
}

.story-content p {
    color: rgba(255,255,255,0.9);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Closing "where it is today" note – a milestone-style callout with a bright
   accent bar and a small label, sitting on the blue section. Reads as a distinct
   endpoint without repeating the translucent-panel look of .story-content. */
.story-outro {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.story-outro-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
}

.story-outro-body {
    flex: 1;
}

.story-outro-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.story-outro p {
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.7;
}

.story-outro a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.story-outro a:hover {
    text-decoration-color: #fff;
}

@media (max-width: 640px) {
    .story-outro {
        gap: 18px;
        padding-top: 32px;
    }
    .story-outro-icon {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }
    .story-outro p {
        font-size: 1.05rem;
    }
}

/* Links in the story section sit on the blue gradient, so the normal blue
   link color has too little contrast — use white with a soft underline. */
.story-content a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.story-content a:hover {
    text-decoration-color: #fff;
}

.story-signature {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.signature-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.signature-title {
    font-size: 1rem;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

.signature-role {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    margin-top: 4px;
}

.signature-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.signature-linkedin:hover {
    opacity: 1;
    color: #fff;
    text-decoration: underline;
}

.signature-linkedin i {
    font-size: 1.05rem;
}

.story-author-info span {
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
}

.story-cta {
    margin-top: 32px;
}

.story-cta-wrapper {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.story-cta-wrapper .story-cta {
    margin-top: 0;
}

.btn-outline-light {
    background: transparent;
    color: white;
    border: 2px solid rgba(255,255,255,0.5);
}

.btn-outline-light:hover {
    background: rgba(255,255,255,0.1);
    border-color: white;
    color: white;
}

/* =====================================================
   FAQ SECTION
   ===================================================== */
.faq-grid {
    max-width: 800px;
    margin: 0 auto;
}

/* FAQ + PDF lead magnet side by side (audience pages + priser): the checklist
   card sits sticky beside the questions instead of as a full-width section */
.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;
}

/* Heading wrapper around each FAQ button: gives screen-reader users H-key
   navigation to the questions without changing the button's look (the button
   carries its own font-size/weight) */
.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;
}

/* Collapse only when JS can toggle it open again; without JS every answer
   stays visible so the FAQ is fully readable. */
.js .faq-answer {
    display: none;
}

.js .faq-item.active .faq-answer {
    display: block;
}

/* =====================================================
   CTA SECTION
   ===================================================== */
.cta-box {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 60px;
    box-shadow: var(--shadow-lg);
    max-width: 800px;
    margin: 0 auto;
}

/* Boxed final-CTA band: the card spans the full content width (like the
   videnscenter CTA box) instead of a narrow 800px island. The flat variant
   below keeps 800px — unboxed centered text needs the shorter measure. */
.cta-section:not(.cta-section-flat) .cta-box {
    max-width: none;
}

/* Opt-in flat variant for the final CTA band (front-page style): used on
   pages where the preceding section is already a grid of white cards (e.g.
   the step cards on funktioner), so a boxed CTA right after would be one
   card too many. Pages ending in FAQ accordions keep the boxed CTA.
   Text that loses the white card behind it steps down to secondary so it
   keeps ≥4.5:1 on the teal tint. */
.cta-section-flat .cta-box {
    background: transparent;
    box-shadow: none;
    padding: 0;
    position: relative;
    z-index: 1;
}

.cta-section-flat .cta-box p {
    color: var(--color-text-secondary);
}

.cta-section-flat .cta-contact {
    color: var(--color-text-secondary);
}

.cta-box h2 {
    margin-bottom: 16px;
}

.cta-box p {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    margin-bottom: 32px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-contact {
    margin-top: 24px;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* Last child of the cta-box: without this, the generic ".cta-box p" 32px
   bottom margin wins on specificity and the box's inner spacing goes
   asymmetric (60px above the h2, 92px below this line). */
.cta-box .cta-contact {
    margin-bottom: 0;
}

.cta-contact a {
    /* Was the bright brand blue, which fails AA as text on any light bg
       (see the accessible-variants note in :root) — use the body-link color. */
    color: var(--color-link);
    font-weight: 500;
}

/* CTA Pricing Combined - Enhanced */
.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;
}

/* Left Side - Content */
.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;
}

/* Features List */
.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;
}

/* Trust Badges */
.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;
}

/* Right Side - Pricing Card */
.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;
}

/* The long 30-dages-garanti guarantee: no icon — a bold centered text
   block whose wrapped lines balance (flex + anonymous text can't take
   text-wrap). */
.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;
}

/* Responsive */
@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;
    }
    
    /* Stacked between the checklist and the price card, the plain icon+text
       badges read as orphaned list rows — restyle as a compact centered chip
       row so they read as a distinct trust strip. */
    .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;
    }
    
    /* Chips wrap as a centered row (set at 768px) — no column stack */
    .pricing-guarantees {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}

/* =====================================================
   CTA CONTACT FORM
   ===================================================== */

/* View switching - use grid stacking for smooth transitions */
.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;
}

/* Form view uses same grid as pricing view */
.cta-form-view {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 50px;
    align-items: center;
}

.cta-form-view:not(.active) {
    display: none;
}

/* Exiting animation - fade only */
.cta-view.exiting {
    opacity: 0;
    pointer-events: none;
}

/* Entering animation - fade only */
.cta-view.entering {
    opacity: 0;
}

/* Left side - same styling as pricing left */
.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;
}

/* Contact alternative (phone) */
.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;
}

/* Right side - form card */
.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;
}

/* Back button */
.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;
}

/* Form grid - single column in card for compactness */
.contact-form-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Form groups */
.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);
}

/* Input wrapper with icon */
.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 input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(59, 180, 196, 0.1);
}

/* Any touch device (incl. landscape phones/tablets >768px, which miss the
   max-width:768px rule below) gets 16px inputs so iOS Safari never auto-zooms
   on focus. */
@media (hover: none) {
    .contact-form input,
    .contact-form textarea {
        font-size: 16px;
    }

    /* 44px comfortable tap/touch targets on mobile inputs (textarea keeps its
       taller min-height set above) */
    .contact-form input {
        min-height: 44px;
    }
}

/* Per-field validation highlight (set by main.js) */
.contact-form input.input-error {
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px var(--color-red-light);
}

/* Turnstile load-failure fallback note */
.turnstile-fallback {
    margin: 10px 0 0;
    font-size: 0.9rem;
    color: var(--color-red-dark);
}

.turnstile-fallback i {
    margin-right: 6px;
}

/* Keyboard focus keeps the full site-wide outline — the :focus rule above
   only swaps the outline for a border+shadow on mouse/touch focus */
.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) */
}

/* Turnstile widget */
.cf-turnstile {
    display: flex;
    justify-content: center;
    margin: 0;
}

/* Form footer */
.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;
}

/* "(valgfrit)" marker on optional form labels */
.label-optional {
    font-weight: 400;
    color: var(--color-text-muted);
}

.form-privacy i {
    color: var(--color-green);
    font-size: 0.8rem;
    margin-right: 4px;
}

/* Keep the "privatlivspolitik" link from breaking mid-word onto its own line */
.form-privacy a {
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-link);
}

/* Turnstile row */
.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;
    }
}

/* Force Turnstile widget to full width */
.turnstile-row #turnstileWidget {
    width: 100% !important;
}

.turnstile-row #turnstileWidget iframe {
    width: 100% !important;
    max-width: 100% !important;
}

/* Form message */
.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;
}

/* Success state */
.contact-form-success {
    text-align: center;
    padding: 20px 10px;
    animation: fadeInUp 0.5s ease;
}

@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 h3 {
    font-size: 1.4rem;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.contact-form-success p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

/* Responsive - form view */
@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;
    }
    
    .contact-form-success h3 {
        font-size: 1.3rem;
    }
}

/* Note under feature lists: all slides are optional */
.features-optional-note {
    text-align: center;
    margin: 32px auto 0;
    max-width: 720px;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.features-optional-note i {
    color: var(--color-blue);
    margin-right: 6px;
}

/* Variant used ABOVE the feature grid (funktioner page) so the
   "all slides are optional" reassurance is read before the 20+ cards */
.features-optional-note-top {
    margin: 0 auto 28px;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

/* =====================================================
   INLINE CONTACT FORM (landing pages)
   The CTA section's own content fades away and the form
   takes its place inside the same section (see main.js)
   ===================================================== */
.cta-fading {
    opacity: 0 !important;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.cta-hidden {
    display: none !important;
}

.contact-inline {
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
    transition: opacity 0.35s ease;
}

/* js-gated (site convention, see inc/site-header.php): only hide the form when
   JS can swap it in — no-JS visitors get the form instead of a dead CTA.
   The .active/.visible rules carry the html.js prefix too so they outrank
   this one (html.js .contact-inline beats bare .contact-inline.active). */
html.js .contact-inline {
    display: none;
    opacity: 0;
}

html.js .contact-inline.active {
    display: block;
}

html.js .contact-inline.visible {
    opacity: 1;
}

/* Wide two-column layout matching the CTA sections it replaces */
.contact-inline-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
}

.contact-inline-info h3 {
    font-size: 2rem;
    margin-bottom: 12px;
}

.contact-inline-info > p {
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

.contact-inline-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-inline-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--color-text-secondary);
}

.contact-inline-list li i {
    color: var(--color-green);
    margin-top: 4px;
}

.contact-inline-formcol {
    min-width: 0;
}

.contact-inline .contact-form-card {
    max-width: none;
    width: 100%;
    padding: 28px;
}

/* Two-column fields keep the card compact in the wide layout */
.contact-inline .contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

.contact-inline .contact-form-grid .form-group-full {
    grid-column: 1 / -1;
}

.contact-inline-alt {
    margin: 0;
    font-size: 0.95rem;
    /* Sits directly on the cta-section band (no card behind it): muted gray
       was only 4.4:1 on the teal tint, secondary passes comfortably. */
    color: var(--color-text-secondary);
    line-height: 1.8;
}

/* Standalone contact page (kontakt.php) */
.contact-inline-info h1 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

/* Personal note with photo on the contact page */
.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);
}

/* Zoomed in on the face: the source photo is a full upper-body shot */
.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);
}

/* Phones: photo on top of the quote instead of beside it */
@media (max-width: 600px) {
    .kontakt-person {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
}

/* Standalone founder card placed in content sections (inc/founder-card.php) */
.founder-card {
    max-width: 680px;
    margin: 48px auto 0;
}

/* Section header with the founder card beside it: header text moves left,
   the card sits on the right instead of breaking the vertical flow */
.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;
}

/* Meta row at the top of the grid section on funktioner: badge on the left, the
   "all slides are optional" note on the right, stacked and centered on
   smaller screens. */
.features-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 32px;
}

.features-meta-row .features-count {
    margin: 0;
    text-align: right;
    flex-shrink: 0;
}

.features-meta-row .features-optional-note {
    margin: 0;
    text-align: left;
    max-width: 640px;
}

@media (max-width: 900px) {
    .features-meta-row {
        flex-direction: column;
        gap: 16px;
    }

    .features-meta-row .features-count,
    .features-meta-row .features-optional-note {
        text-align: center;
    }
}

.section-header-row .founder-card {
    flex: 1;
    margin: 0;
    max-width: 460px;
}

@media (max-width: 900px) {
    .section-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }

    /* When the founder/aside column stacks below, re-center the header text to
       match every sibling section-header on the page (they're all centered);
       left-aligned here reads as an alignment glitch while scrolling. */
    .section-header-side .section-header {
        text-align: center;
    }

    /* Stacked: the founder card and the screenshot figure follow the full
       container width like the guide-list cards beside them — the desktop
       680/720px caps otherwise freeze them between ~720 and 900px */
    .section-header-row .founder-card {
        max-width: none;
        margin: 0 auto;
        width: 100%;
    }

    .section-header-aside .audience-screenshot {
        max-width: none;
        width: 100%;
    }
}

/* Right-hand column in the header row on funktioner: the founder card with
   the holdkalender screenshot stacked beneath it. */
.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) {
    /* Stacked: the aside (founder card + screenshot) follows the full
       container width like the guide-list cards beside it */
    .section-header-row .section-header-aside {
        max-width: none;
        margin: 0 auto;
        width: 100%;
    }
}

/* Guide pointers under the intro on funktioner: the three videnscenter
   cross-links as icon rows instead of a wall of prose. Reuses the feature
   cards' icon chips so the row previews the grid below. */
.section-guide-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.section-guide-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    text-align: left;
}

/* The intro block is its own gray band on funktioner; the anchor button
   below the row brings its own 48px top margin (.section-cta), so the row's
   usual bottom margin would double the gap. */
.features-intro .section-header-row {
    margin-bottom: 0;
}

.section-guide-item .feature-icon {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    margin-bottom: 0;
}

.section-guide-item p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.section-guide-item p a {
    font-weight: 600;
}

/* Trailing "vil I vide mere?" links under the kontakt FAQ – centered below
   the FAQ grid. */
.integration-cta-links {
    text-align: center;
    margin-top: 32px;
    color: var(--color-text-secondary);
}

/* Full-width contact card under the form + info grid */
.kontakt-contact-card {
    margin-top: 40px;
    padding: 28px 36px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
}

.kontakt-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.kontakt-details p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--color-text-secondary);
}

.kontakt-details i {
    color: var(--color-blue);
    width: 18px;
    text-align: center;
}

.kontakt-contact-card .trust-strip {
    margin-top: 0;
}

@media (max-width: 720px) {
    .kontakt-contact-card {
        padding: 24px;
        gap: 18px;
    }
    .kontakt-contact-card .trust-strip {
        padding-top: 18px;
        border-top: 1px solid var(--color-border-light);
        width: 100%;
    }
}

/* Pricing page: "med i prisen" + "det står I selv for" cards */
/* Reusable: give a content section the front-page hero backdrop (bg.webp + a
   soft blue glow) instead of the flat grey section-alt fill. */
.section-hero-bg {
    background: url('../img/bg.webp') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}
.section-hero-bg::before {
    content: '';
    position: absolute;
    top: -30%;
    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;
}

/* The highlight boxes use a 10%-alpha tint that looks fine on white/grey pages
   but goes see-through on the patterned hero backdrop. Inside a hero-bg section
   give them a white base under the tint so they read as solid cards. */
.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);
}
.section-hero-bg .legal-highlight.yellow {
    background: linear-gradient(var(--color-yellow-light), var(--color-yellow-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;
}

/* Colored icon tile so the heading stands apart from the check bullets */
.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);
}

/* Prisberegner button inside the "Det står I selv for" card, pinned to the
   bottom of the stretched card. Full-width so it reads as a clear next step.
   The auto top margin pushes it down; the note above keeps its own 18px gap, so
   a min 22px separation is preserved even when the card is short. */
.priser-card-calc-btn {
    display: flex;
    width: 100%;
    margin-top: auto;
}

/* Guarantee a gap above the pinned button even when the card is short and the
   auto margin collapses to zero. */
.priser-card-self .priser-card-note {
    margin-bottom: 22px;
}

/* Founder card below the grid spans the full two-column width (1000px) instead
   of its default 680px, so it lines up with the cards above. */
/* Founder card at the bottom of the hero, spanning the full width of the hero
   content row (1100px) beneath the intro + cards + screenshot. The hero has
   section-no-bottom (padding-bottom:0), so add breathing room below the card. */
.priser-founder-wide {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 40px;
}
.priser-founder-wide .founder-card {
    max-width: none;
    margin: 40px 0 0;
}

/* Pricing page: "ingen skjulte omkostninger" reassurance block */
.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;
}
/* Each guarantee reads as its own chip: white pill with a green check badge,
   so the five points don't run together as a wall of ticks. */
.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;
    }
}

/* The two priser cards stack below 900px (the narrow aside card squeezed its
   content and the calc button between 600-900); the 5 guarantee chips keep
   two columns until true phones. */
@media (max-width: 900px) {
    .priser-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .priser-reassure-list {
        grid-template-columns: 1fr;
    }
}

/* Pricing page: valgfrit tilkøb – skræddersyet slideskabelon */
.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;
}

/* Fanned stack of example template slides */
.skabelon-stack {
    position: relative;
    aspect-ratio: 16 / 13;
}

/* Each slide is wrapped in a <picture> (webp + jpg fallback), so the
   positioned element is the <picture>; the <img> just fills it. */
.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;
    }
}

/* Keep the intro/testimonial + form side by side on tablet (768px) so the
   form isn't pushed below the fold on the primary conversion page; only
   stack on phones. */
@media (max-width: 768px) {
    .contact-inline-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 600px) {
    .contact-inline .contact-form-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   FOOTER
   ===================================================== */
.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;
}

/* "Efter foreningstype" holds all 9 landers + "Alle løsninger" in two columns.
   The sub-columns each take an equal fraction of the slot (1fr) and the labels
   are left-aligned within them — so this block fills its grid slot the same way
   the single-list columns do, with matching trailing space before the next
   column. max-content packed the labels too tightly to the left, which made the
   gap to Kontakt look smaller than the gap after Navigation. */
/* "Alle løsninger" sits in the last grid cell but is styled as a distinct
   see-all action (brand teal + arrow) so it doesn't read as a 10th foreningstype.
   Overrides the muted .footer-links a colour. */
.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;
}

/* Om os + legal links tucked under the brand blurb (their own column was
   removed to free grid space). Rendered as small rounded chips that wrap
   gracefully — reads as a tidy set of tags rather than a leftover list, with no
   dangling separators when the row wraps. */
.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;
    color: rgba(255, 255, 255, 0.6);
    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-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);
}

/* pad the tap area vertically (the 12px li margins alone leave the links
   ~23px apart on touch) — but not the brand-links chips, which carry their
   own padding and would be flattened by this override */
.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;
}

/* Two-line contact detail — e.g. the support hours, split onto two lines so it
   doesn't wrap awkwardly as one long sentence. Inherits the same colour and font
   size as the other contact rows; icon sits by the top line. */
.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;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    /* Single centered hero column with an explicit narrative order. The two
       source columns are flattened (display:contents) so their children can be
       interleaved: without this, everything in .hero-content (CTA, demo-note,
       stats) renders BEFORE the TV in .hero-visual. Same order as mobile —
       every hero child MUST have an order or it defaults to 0 and jumps first. */
    .hero-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
        text-align: center;
    }

    .hero-content,
    .hero-visual {
        display: contents;
    }

    .hero-badge { order: 1; align-self: center; margin-bottom: 16px; }
    .hero-content h1 { order: 2; margin-bottom: 20px; }
    .hero-description { order: 3; max-width: 680px; margin: 0 auto 24px; }
    .hero-image-wrapper { order: 4; width: 100%; max-width: 720px; min-width: 0; margin: 0 auto 24px; }
    .hero-features-grid { order: 5; width: 100%; max-width: 720px; margin: 0 auto 28px; }
    /* CTA row mirrors the feature-card grid above it: same 720px cap and the
       same 16px gap with two equal halves, so each button lines up with the
       card above it. (Below 480px the phone rules take over: 50/50 pair, then
       stacked full-width under 430px.) */
    .hero-cta {
        order: 6;
        justify-content: center;
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
    }

    .hero-cta .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    /* keep the base 20px gap above the demo-note (margin:0 auto wiped it) */
    .hero-cta-notes { order: 7; max-width: 640px; margin: 20px auto 0; }
    .hero-stats { order: 8; justify-content: center; margin-top: 28px; }
    .hero-testimonial { order: 9; width: 100%; max-width: 720px; margin: 28px auto 0; }

    .hero-float-card {
        display: none;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .showcase-item {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .showcase-item:nth-child(even) {
        direction: ltr;
    }
    
    .showcase-content {
        max-width: 100%;
    }
    
    .story-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Stacked: center the portrait + its signature. Width caps live in the
       breakpoint-specific blocks (tablet refinements at 769-1024 use 720px,
       the mobile overhaul at <=768 uses 330px). */
    .story-image-wrapper {
        text-align: center;
    }

    .story-image-wrapper picture,
    .story-section .story-image,
    .story-image {
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    .story-image-wrapper .story-signature {
        align-items: center;
    }

    .story-signature-content {
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/* Wide laptops: six links + CTA need slightly tighter spacing than the
   32px default before the tablet compacting kicks in */
@media (min-width: 1120px) and (max-width: 1200px) {
    .nav-links {
        gap: 22px;
    }
}

/* Landscape tablets / small laptops: the six links + CTA only fit beside the
   logo with tighter gaps and type (measured: full size needs >=1120px; this
   compact set fits down to the 925px hamburger handoff) */
@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;
    }

}

/* The mega dropdown's 820px min-width beats its viewport max-width (CSS
   min>max rule) and its -42% centering pushed past the screen edges below
   ~1200px. Anchor it to the fixed header instead of the menu item and let it
   span the viewport. */
@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);
    }
}

/* Below ~925px the full link row no longer fits next to the logo even
   compacted — hand over to the hamburger menu (portrait tablets + mobile) */
@media (max-width: 925px) {
    .nav-links {
        display: none;
    }

    /* Portrait tablets (601–900px): a compact demo CTA still fits beside the
       hamburger. On small phones it's hidden below (redundant with the mobile
       menu + sticky CTA) so the row can't overflow. */
    .nav-cta .btn {
        padding: 10px 18px;
        font-size: 0.9rem;
        min-height: 44px;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .nav {
        gap: 16px;
    }

    /* No-JS fallback: the hamburger can't open the menu without JS, so keep
       the inline link row visible (wrapping) and hide the dead toggle. The
       CSS-driven :hover/:focus-within dropdowns still work. */
    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;
    }
}

/* Small phones: the inline green demo CTA + logo + hamburger no longer fit on
   one row and used to clip off-screen (pushing the hamburger out of view). Drop
   the inline CTA here — the mobile-menu overlay and the sticky bottom CTA both
   still carry "Få en gratis demo", so nothing is lost. Leaves a clean
   logo (left) + hamburger (right) row with no horizontal overflow. */
@media (max-width: 600px) {
    .nav-cta {
        display: none;
    }

    /* No-JS fallback still needs a reachable demo CTA since the hamburger is
       inert without JS; keep the inline CTA visible in that case. */
    html:not(.js) .nav-cta {
        display: flex;
    }
}

@media (max-width: 420px) {
    .header-inner {
        padding: 12px 16px;
    }
    
    .logo-img {
        height: 45px;
    }
    
    .mobile-menu-toggle {
        font-size: 1.25rem;
    }

    .nav-cta .btn {
        padding: 8px 14px;
        font-size: 0.85rem;
        /* keep the compact look but preserve the 44px min tap target
           (.btn is inline-flex with centered content) */
        min-height: 44px;
    }

    .container,
    .container-wide {
        padding: 0 14px;
    }
    
    .hero-inner {
        padding: 0 14px;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    .hero-description {
        font-size: 1rem;
        margin-bottom: 24px;
    }
    
    .btn-large {
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    .hero-stats {
        gap: 24px;
        margin-top: 32px;
        padding-top: 24px;
    }
    
    .hero-features-grid {
        gap: 12px;
        margin-top: 16px;
    }
    
    .hero-feature-card {
        padding: 14px 16px;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 120px 0 60px;
    }
    
    .section {
        padding: 60px 0;
    }
    
    .features-grid,
    .problem-grid {
        grid-template-columns: 1fr;
    }

    /* Feature Modal Responsive */
    .feature-modal {
        width: 95%;
        max-height: 85vh;
    }
    
    .feature-modal-image {
        height: 180px;
    }

    /* Less side padding on the TV frame for narrow screens */
    .feature-modal-image:has(.feature-modal-tv-frame[style*="block"]) {
        padding: 0 18px;
    }

    /* Dynamic badge: icon only on mobile (hide the "Dynamisk" label) */
    .feature-modal-dynamic-badge span {
        display: none;
    }

    .feature-modal-dynamic-badge {
        padding: 5px 7px;
        gap: 0;
    }

    .feature-modal-content {
        padding: 20px 24px 24px;
    }
    
    .feature-modal-header {
        gap: 12px;
    }
    
    .feature-modal-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
    
    .feature-modal-title {
        font-size: 1.2rem;
    }
    
    .pricing-card {
        margin: 0 16px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 14px 16px;
        font-size: 0.9rem;
    }

    .cta-box {
        padding: 40px 24px;
    }
}

@media (max-width: 480px) {
    .btn {
        width: 100%;
    }

    /* Full-width outline CTA "Se alle 8 medlemssystem-integrationer" wraps to
       two lines; drop its leading arrow so it doesn't float mis-centered beside
       the two-line label. */
    .showcase-cta .fa-arrow-right {
        display: none;
    }

    /* Hero CTAs sit side by side at 50% instead of stacking full-width */
    .hero-cta {
        flex-wrap: nowrap;
        gap: 10px;
    }

    /* Rocket icon is clutter in the tight side-by-side CTA */
    .hero-cta-icon {
        display: none;
    }

    .hero-cta .btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
        white-space: nowrap;
    }

    .cta-buttons {
        flex-direction: column;
    }
    
    .price-value {
        font-size: 3rem;
    }
    
    .hero-features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .hero-feature-card {
        padding: 12px 14px;
    }
    
    .hero-feature-icon {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        font-size: 1rem;
    }
    
    .hero-feature-text {
        font-size: 0.85rem;
    }
    
    .hero-feature-text span {
        font-size: 0.8rem;
    }
    
    .hero-testimonial {
        padding: 16px;
        gap: 16px;
    }
}

/* Small phones: the two hero CTAs side-by-side keep their text on one line
   (white-space:nowrap) and stop shrinking, which forced the hero column wider
   than the viewport — that horizontal overflow was what clipped the header
   hamburger below ~440px. Stack them full-width here so the row can wrap and
   nothing overflows. */
@media (max-width: 430px) {
    .hero-cta {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-cta .btn {
        flex: 1 1 auto;
        width: 100%;
        white-space: normal;
        min-height: 44px;
    }
}

/* Extra small screen fixes */
@media (max-width: 320px) {
    .container,
    .container-wide {
        padding: 0 10px;
    }
    
    .header-inner {
        padding: 10px 10px;
    }
    
    .hero-inner {
        padding: 0 10px;
    }
    
    .hero {
        padding: 100px 0 40px;
    }
    
    .section-inner {
        padding: 0 10px;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    .hero-description {
        font-size: 0.95rem;
    }
    
    .hero-badge {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
    
    .btn {
        padding: 10px 16px;
        font-size: 0.85rem;
        /* keep a 44px tap target even with the tighter padding */
        min-height: 44px;
    }

    .btn-large {
        padding: 12px 20px;
        font-size: 0.9rem;
        min-height: 44px;
    }
    
    .logo-img {
        height: 36px;
    }
    
    .hero-stats {
        gap: 16px;
    }
    
    .hero-stat-value {
        font-size: 1.5rem;
    }
    
    .hero-stat-label {
        font-size: 0.8rem;
    }
    
    .section {
        padding: 50px 0;
    }
    
    .slideshow-preview-wrapper {
        border-radius: 8px;
    }
    
    .hero-feature-card {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .hero-feature-icon {
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        font-size: 0.9rem;
    }
    
    .hero-feature-text {
        font-size: 0.8rem;
    }
    
    .hero-feature-text span {
        font-size: 0.75rem;
    }
    
    .hero-testimonial {
        padding: 12px;
        gap: 12px;
        flex-direction: column;
    }
    
    .hero-testimonial-author {
        padding-left: 0;
        border-left: none;
        padding-top: 12px;
        border-top: 1px solid var(--color-border-light);
    }
}

/* =====================================================
   ANIMATIONS
   ===================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease forwards;
}

/* Scroll animations - add via JS */
/* Only hide reveal-elements when JS is running (html gets .js from an inline
   script in <head>) — without JS the content stays visible */
.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   Accessibility
   ===================================================== */

/* Skip-to-content link: visually hidden until keyboard-focused */
.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;
}

/* the global a:hover color equals this button's background — the label
   vanished on hover */
.skip-link:hover,
.skip-link:focus {
    color: #fff;
}

/* The skip-link target sits between header and content; it must never
   affect layout or show a lingering outline */
#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 so this outranks the base hide rule of the same name */
    .js .reveal {
        opacity: 1;
        transform: none;
    }
}

/* =====================================================
   Comparison Section - Additional Styles
   ===================================================== */

.comparison-note {
    text-align: center;
    margin-top: 32px;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.comparison-note i {
    color: var(--color-blue);
}

.comparison-cta {
    margin-top: 40px;
}

/* =====================================================
   Mobile refinements
   ===================================================== */

/* Touch support for the features badge tooltip — tapping toggles
   .tooltip-visible (see main.js) since hover does not exist on touch */
.features-badge.tooltip-visible::after,
.features-badge.tooltip-visible::before,
.features-badge:focus-visible::after,
.features-badge:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
    /* The diagonal split relies on hover — stack the two images instead
       (phones only; tablets keep the desktop diagonal slicing).
       height:auto is essential: the base rule's height:100% would defeat
       the aspect-ratio and let the images render at different sizes */
    .showcase-image.diagonal-split-container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
        background: none;
        overflow: visible;
        box-shadow: none;
    }

    .diagonal-split-image {
        position: relative;
        width: 100%;
        height: auto;
        clip-path: none !important;
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-md);
        cursor: default;
        /* Card = caption bar on top + screenshot below. The floating pill
           labels covered the (already dense) UI screenshots when stacked;
           as attached title bars they read as intentional window chrome. */
        display: flex;
        flex-direction: column;
    }

    .diagonal-split-image picture {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .diagonal-split-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .diagonal-split-label {
        position: static;
        border-radius: 0;
        box-shadow: none;
        justify-content: center;
        padding: 10px 14px;
    }

    .diagonal-split-divider {
        display: none;
    }
}

@media (max-width: 768px) {
    /* 16px inputs prevent iOS Safari from auto-zooming on focus; 44px min
       height gives comfortable touch targets on mobile */
    .contact-form input,
    .contact-form textarea {
        font-size: 16px;
    }

    .contact-form input {
        min-height: 46px;
    }

    /* Send button is a full-width, ≥44px tap target on mobile */
    #contactSubmitBtn {
        width: 100%;
        min-height: 48px;
    }

    /* The modal can be taller than the viewport on small screens */
    .feature-modal {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================
   GETTING STARTED STEPS (Sådan kommer I i gang)
   ===================================================== */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.step-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 40px 28px 28px;
    box-shadow: var(--shadow-md);
    text-align: center;
}

.step-number {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-blue-accessible);
    color: var(--color-white);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.step-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--color-white);
}

.step-icon.green { background: linear-gradient(135deg, #4caf50, #2e7d32); }
.step-icon.blue { background: linear-gradient(135deg, #3bb4c4, #2f8f9d); }
.step-icon.yellow { background: linear-gradient(135deg, #c4ab3b, #9a8730); }

.step-card h3 {
    margin-bottom: 10px;
}

.step-card p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =====================================================
   PRICING CTA MICROCOPY
   ===================================================== */
.pricing-cta-note {
    text-align: center;
    margin: 10px 0 14px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* =====================================================
   MOBILE STICKY CTA BAR
   ===================================================== */
.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%);
    transition: transform 0.3s ease;
}

.mobile-sticky-cta.visible {
    transform: translateY(0);
}

.mobile-sticky-cta-price {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    /* min-width:0 lets the price column shrink and its subtext wrap to two
       lines instead of clipping "Ekskl. moms ·" off on narrower pages */
    min-width: 0;
}

.mobile-sticky-cta-price strong {
    font-size: 1.05rem;
    color: var(--color-text-primary);
}

.mobile-sticky-cta-price span {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    /* wrap rather than clip so the full "Ekskl. moms · ingen binding" shows */
    white-space: normal;
}

.mobile-sticky-cta .btn {
    padding: 12px 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Phones only: on 768px tablets the header keeps a persistent inline demo CTA,
   so the bottom bar would just duplicate it and eat ~66px of height. */
@media (max-width: 600px) {
    .mobile-sticky-cta {
        display: flex;
    }
}

/* Footer: single centered column only on true phones. At 601-768px the footer
   keeps the 2-column left-aligned grid (inherited from the 1024px rule) so the
   tablet doesn't waste half its width as empty navy space. */
@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Contact info outranks link lists on a phone — put Kontakt right after
       the brand blurb. (Columns by position: 2=Navigation, 3=Efter
       foreningstype, 4=Kontakt.) */
    .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 is a flex row, so text-align:center on the parent
       doesn't move the pills — center them explicitly. */
    .footer-brand-links {
        justify-content: center;
    }

    .footer-contact-item {
        justify-content: center;
    }

    /* Clear the fixed .mobile-sticky-cta bar (~66px) that shows at this width */
    .footer {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    /* Comfortable, evenly-spaced tap targets for the stacked centered links */
    .footer-links:not(.footer-brand-links) a {
        padding: 8px 0;
    }
}

/* =====================================================
   RESPONSIVE EXTRAS
   ===================================================== */
/* Muted caption under the contact CTA checklist explaining the demo bullet
   (a standalone <p> after the list — not inside the list item, so it never
   gets swallowed into the chip/card styling). Negative top margin tucks it
   under the list against the list's own bottom margin. */
.cta-feature-note {
    margin: -12px 0 24px;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* FAQ "show more" toggle — only relevant on mobile where the
   faq-mobile-hidden items are collapsed; desktop shows everything.
   The hidden items are in the server-rendered HTML (CSS display toggle only),
   so they remain crawlable/indexable — this is a UX collapse, not content
   removal. */
.faq-toggle-wrapper {
    display: none;
    justify-content: center;
    margin-top: 24px;
}

.faq-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 1rem;
}

/* =====================================================
   MOBILE OVERHAUL
   Placed last so these rules win the cascade over the
   base rules declared later in their own sections.
   ===================================================== */

@media (max-width: 900px) {
    /* Bug fix: the base .cta-pricing-view / .cta-form-view grid rules are
       declared AFTER the old 900px override, so the two-column layout never
       collapsed and the pricing card overflowed the viewport */
    .cta-pricing-view,
    .cta-form-view {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .cta-view {
        min-height: 0;
    }

    .cta-features-list {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    /* ---------- HERO: demo TV directly after the headline ---------- */
    .hero {
        padding: 104px 0 48px;
    }

    .hero-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Promote the children of both hero columns to one ordered list */
    .hero-content,
    .hero-visual {
        display: contents;
    }

    /* Every hero child MUST have an explicit order here: display:contents
       flattens both columns into this flex list, and an unordered child
       defaults to order:0 — i.e. it jumps above the badge/headline. */
    .hero-badge { order: 1; margin-bottom: 16px; align-self: center; }
    .hero-content h1 { order: 2; margin-bottom: 20px; }
    .hero-description { order: 3; margin-bottom: 20px; }
    .hero-image-wrapper { order: 4; margin: 0 0 20px; }
    /* Feature cards directly under the TV: they caption what the slideshow just
       showed (egne slides / 15+ selvopdaterende), then the CTA asks. */
    .hero-features-grid { order: 5; margin: 0 0 24px; }
    .hero-cta { order: 6; justify-content: center; }
    .hero-cta-notes { order: 7; }
    .hero-stats { order: 8; }
    .hero-testimonial { order: 9; margin-top: 28px; }

    /* Stats: 2x2 grid instead of four squeezed columns — labels like
       "Selvopdaterende slides" get room to breathe at 390px.
       auto columns (not 1fr): the label lengths differ a lot per column, and
       equal tracks leave the short-label column swimming in empty space, which
       reads as the whole block being shoved right. Content-sized columns packed
       to the center keep the outer margins optically symmetric. */
    .hero-stats {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        gap: 20px 36px;
        margin-top: 28px;
        padding-top: 24px;
    }

    /* The feature cards are icon+text rows; the hero's centered text-align
       makes the copy float oddly next to the icon — read left like a list item */
    .hero-feature-card {
        text-align: left;
    }

    .hero-stat {
        text-align: center;
    }

    .hero-stat-value {
        font-size: 1.4rem;
        line-height: 1.3;
    }

    .hero-stat-label {
        font-size: 0.85rem;
    }

    /* ---------- Tighter section rhythm ---------- */
    .section {
        padding: 48px 0;
    }

    .problem-section {
        padding: 48px 0;
    }

    .section-header,
    .problem-section .section-header {
        margin-bottom: 24px;
    }

    .problem-grid {
        gap: 14px;
    }

    .problem-card {
        padding: 24px 20px;
    }

    .problem-cta,
    .section-cta {
        margin-top: 28px;
    }

    .features-count {
        margin-bottom: 1.25rem;
    }

    /* Smaller badge so it stays on one line on narrow screens */
    .features-badge {
        font-size: 0.9rem;
        padding: 0.6rem 1.1rem;
        gap: 6px;
    }

    .features-badge .info-hint {
        width: 16px;
        height: 16px;
        font-size: 0.6rem;
    }

    .features-grid {
        gap: 16px;
    }

    .features-toggle-wrapper {
        margin: 24px 0 0;
    }

    .showcase-item {
        padding: 36px 0;
        gap: 28px;
    }

    /* Subtle hairline divider between the stacked showcase blocks
       (slides / integration / administration) on mobile only. */
    .showcase-item + .showcase-item {
        border-top: 1px solid var(--color-border-light);
    }

    /* Integration hub sits under the title on mobile; give it breathing room
       above the body copy that follows it. */
    .showcase-item-integration .integration-hub {
        margin: 8px 0 28px;
    }

    /* Equal-height showcase CTA buttons: the integration card's buttons wrap to
       two lines, which made them taller than the single-line buttons on the
       other cards. Give every showcase button the same min-height and center
       its label so they line up across cards. */
    .showcase-cta {
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Span the content column like the hero CTAs (capped to the checklist
           chips' width so the button doesn't dwarf the copy above it) */
        width: 100%;
        max-width: 420px;
    }

    .steps-grid {
        margin-top: 32px;
    }

    .comparison-cta {
        margin-top: 24px;
    }

    /* ---------- Features: show 4 cards before the toggle ---------- */
    .js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+5) {
        display: none;
    }

    /* Comparison section stays visible on mobile: the full table scrolls
       horizontally (see .comparison-table-wrapper) so all rows, the intro copy
       and its internal link remain in the mobile-indexed DOM. The old
       .comparison-mobile-card replacement was removed to avoid hiding content
       from mobile-first indexing. */

    /* Show the sideways-scroll hint, and fade the right edge so it's visually
       obvious the table continues past the viewport. */
    .comparison-scroll-hint {
        display: flex;
    }

    .comparison-table-scroll {
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
                mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }

    /* ---------- Story section: headline, photo, text, signature ---------- */
    .story-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        /* the desktop grid rule's align-items:start carries over and lets
           one-line headings shrink-wrap into a left-anchored box */
        align-items: stretch;
    }

    .story-image-wrapper,
    .story-content {
        display: contents;
    }

    .story-content h2 {
        order: 1;
        text-align: center;
        margin-bottom: 20px;
    }

    /* The <img> sits inside a <picture>; with the wrapper display:contents the
       <picture> becomes the ordered flex child, so its order + spacing must live
       on the picture (the img's own margin is inside it and creates no outer gap). */
    .story-image-wrapper picture {
        order: 2;
        max-width: 330px;
        margin: 0 auto 24px;
    }

    .story-image {
        order: 2;
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
        aspect-ratio: 16 / 9;
        object-position: 0px -30px;
    }

    .story-content p {
        order: 3;
        font-size: 1rem;
    }

    .story-image-wrapper .story-signature {
        order: 4;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        margin-top: 8px;
        padding-top: 20px;
    }

    .story-signature-content {
        text-align: center;
    }

    /* ---------- Pricing card ---------- */
    /* The base 500px cap left the card floating in dead space on large
       phones (~590–768px) — fill the stacked column instead */
    .pricing-card {
        margin: 0;
        max-width: none;
    }
}

@media (max-width: 480px) {
    /* The global .btn { width: 100% } must not hit the header CTA
       or the sticky bar button */
    .nav-cta .btn,
    .mobile-sticky-cta .btn {
        width: auto;
    }
}

/* =====================================================
   MOBILE POLISH — ROUND 2
   ===================================================== */

@media (max-width: 768px) {
    /* Full-width hero children: the base grid's align-items:center made
       flex children shrink to content width (TV demo at half width) */
    .hero-inner {
        align-items: stretch;
    }

    .hero-image-wrapper,
    .hero-tv-frame {
        width: 100%;
    }

    /* ---------- Testimonial: stacked and centered ---------- */
    .hero-testimonial {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
        padding: 20px 18px;
    }

    .hero-testimonial-author {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .testimonial-author-row {
        justify-content: center;
    }

    .hero-testimonial-link {
        justify-content: center;
    }


    /* ---------- Consistent centered alignment ---------- */
    .feature-card {
        text-align: center;
    }

    .feature-card .feature-icon {
        margin-left: auto;
        margin-right: auto;
    }

    /* Whole card is centered on mobile: icon, heading and body copy all centered
       so the card reads as one balanced block. margin-bottom guarantees a gap
       between the copy and the "Se eksempel" button below it. */
    .feature-card > p {
        text-align: center;
        margin-bottom: 16px;
    }

    .feature-card-actions {
        justify-content: center;
    }

    .showcase-content {
        text-align: center;
    }

    /* Checklists: centered block, left-aligned items for readability */
    .showcase-features,
    .cta-features-list {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .cta-pricing-left,
    .cta-pricing-left h2,
    .cta-form-left h2 {
        text-align: center;
    }

    .cta-form-left {
        align-items: center;
        text-align: center;
    }

    .cta-feature-note {
        text-align: center;
    }

    .cta-contact-alt {
        text-align: center;
    }

    .story-content p {
        text-align: center;
    }

    /* Problem-card paragraphs stay visible on mobile — they carry unique copy
       (and the guide links live in the same card), so hiding them dropped real
       content from the mobile-indexed page. */

    .problem-card {
        padding: 20px 16px;
    }

    .problem-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 12px;
        font-size: 1.25rem;
    }

    .problem-card h3 {
        /* Breathing room so the guide-link's border-top divider doesn't hug
           the heading descenders */
        margin-bottom: 16px;
        font-size: 1.1rem;
    }

    /* FAQ trimmed to the conversion-critical questions until the
       "Vis flere spørgsmål" toggle expands the rest. JS-gated: without JS the
       toggle can't run, so all questions stay visible. The hidden items are in
       the rendered HTML (display toggle only) → fully crawlable. */
    .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;
    }
}

/* =====================================================
   MOBILE POLISH — ROUND 3
   ===================================================== */

@media (max-width: 768px) {
    /* ---------- Hero testimonial redesign ---------- */
    /* The left border/padding was a separator for the desktop row layout */
    .hero-testimonial-author {
        border-left: none;
        padding-left: 0;
        gap: 8px;
    }

    /* Was margin-top: -16px — sat on top of the author block */
    .hero-testimonial-link {
        margin-top: 4px;
        padding: 9px 18px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
        font-size: 0.85rem;
        color: var(--color-text-secondary);
        width: fit-content;
    }

    .hero-testimonial-link i:last-child {
        margin-left: 4px;
    }

    /* ---------- Feature cards: example button below the text ---------- */
    /* Absolute top-right positioning collided with the centered icon on
       narrow screens — put the button in normal flow under the text. */
    .feature-card-actions {
        position: static;
        justify-content: center;
        flex-wrap: wrap;
        /* auto (matching .feature-card > .feature-example-btn) so the actions row
           bottom-aligns exactly like the single-button cards; the gap above comes
           from the paragraph's margin-bottom, so Holdkalender's two buttons sit at
           the same height as every other card's "Se eksempel". */
        margin-top: auto;
    }

    /* Dynamic-slide bolt indicator stays on mobile (icon only — its label is
       just a hover tooltip, which doesn't trigger on touch). Pull it out of
       the centered actions row and pin it to the card's top-right corner so
       "Se eksempel" / "Se alle integrationer" keep their centered spot. */
    .feature-card-actions .dynamic-indicator {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .feature-card-actions .dynamic-indicator::after,
    .feature-card-actions .dynamic-indicator::before {
        display: none;
    }

    /* Cards where the example button is a direct child (Egne slides, Slide
       designer) — the base rule positions these absolutely top-right, so we
       must reset that to drop them into flow below the text like the rest.
       relative (not static) keeps the ::after tap-target expansion working. */
    .feature-card > .feature-example-btn {
        position: relative;
        top: auto;
        right: auto;
        align-self: center;
        /* auto (not a fixed gap) so the button bottom-aligns and a taller +
           shorter card sharing a row on the 768px 2-col grid keep level buttons.
           The minimum gap above the button comes from the paragraph's
           margin-bottom below, so it never hugs the text when copy fills the card. */
        margin-top: auto;
    }

    /* Direct-child link buttons (audience routing grid) are already in flow —
       they just need centering to match the centered mobile card. */
    .feature-card > .feature-link-btn {
        align-self: center;
        margin-top: auto;
    }

    /* One height for EVERY feature-card button. The height difference between
       cards came from line-height alone: the actions-row button had 1.2 while
       direct-child buttons inherited 1.6 (padding/font were already equal), so
       Holdkalender's "Se eksempel" rendered ~5px shorter. Same line-height +
       min-height makes all variants pixel-identical; flex centering keeps the
       label vertically centered inside the taller box. */
    .feature-card .feature-example-btn,
    .feature-card .feature-link-btn {
        white-space: nowrap;
        line-height: 1.2;
        min-height: 38px;
        align-items: center;
    }

    /* Holdkalender card: "Se alle integrationer" renders as the in-row copy
       beside "Se eksempel" (both fit side by side down to 390px), so the
       block-level -below duplicate is hidden here. Same link/text stays
       visible via the in-row copy — a duplicate-link swap, not content loss. */
    .feature-card-actions .feature-link-btn-inline {
        display: inline-flex;
        align-self: center;
    }

    .feature-link-btn-below {
        display: none;
    }

    /* ---------- CTA & comparison checklists: centered chip cards ----------
       Centered text with the check inline. The item is a centered card and
       its inner content is centered as a group, so a green check sits just
       left of the (centered) text and wrapped lines stay balanced. */

    /* ---------- Showcase checklists: inline wrapping chips ----------
       Distinct from the CTA's vertical card list so the three showcase
       sections don't all read the same. Small centered pills that flow and
       wrap, each a short benefit with a compact check. */
    .showcase-features {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        max-width: 420px;
        margin: 0 auto;
    }

    .showcase-features li {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        background: rgba(76, 175, 80, 0.09);
        border: 1px solid rgba(76, 175, 80, 0.2);
        border-radius: var(--radius-pill);
        font-size: 0.85rem;
        line-height: 1.3;
        text-align: left;
        color: var(--color-text-secondary);
    }

    .showcase-features li > i {
        flex-shrink: 0;
        margin-top: 0;
        color: var(--color-green);
        font-size: 0.85rem;
    }

    /* Colour the chips per showcase section so they don't all read green:
       yellow in the medlemssystem/integration section, blue in admin. */
    #integrationer .showcase-features li {
        background: rgba(196, 171, 59, 0.1);
        border-color: rgba(196, 171, 59, 0.35);
    }

    #integrationer .showcase-features li > i {
        color: var(--color-yellow-dark);
    }

    #administration .showcase-features li {
        background: rgba(59, 180, 196, 0.1);
        border-color: rgba(59, 180, 196, 0.35);
    }

    #administration .showcase-features li > i {
        color: var(--color-blue);
    }
}

/* ---------- CTA checklist: same centered chips as the showcases ----------
   The vertical icon-row list read as a long ragged column everywhere the CTA
   section is stacked (that's the whole <=900 range, where the trust badges
   are pills too); as wrapping chips it stays compact and consistent. The
   check is a plain green glyph instead of the filled circle. */
@media (max-width: 900px) {
    /* .cta-form-left variant included: its own 320px cap outranks the plain
       selector and squeezed the chips (wide pill, early-wrapped text).
       .contact-inline-list (the inline contact form used on subpages) gets
       the same treatment so every contact section reads alike. */
    .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;
    }
}

/* Inline contact form (subpages): its two-column grid stacks at 768 (not
   900 like the front-page CTA), so the centered treatment — chips, intro,
   "Tilbage" button — only applies once actually stacked. */
@media (max-width: 768px) {
    .contact-inline-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: auto;
        max-width: 460px;
        margin: 0 auto 28px;
    }

    .contact-inline-list li {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 7px;
        padding: 7px 13px;
        background: rgba(76, 175, 80, 0.09);
        border: 1px solid rgba(76, 175, 80, 0.2);
        border-radius: var(--radius-pill);
        font-size: 0.85rem;
        line-height: 1.3;
        color: var(--color-text-secondary);
    }

    .contact-inline-list li > i {
        flex-shrink: 0;
        color: var(--color-green);
        font-size: 0.85rem;
        margin-top: 0;
    }

    .contact-inline-info {
        text-align: center;
    }

    .contact-inline .contact-form-back {
        display: flex;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Utility: adjacent same-background sections that run together on stacked
   layouts can opt into a divider (e.g. funktioner's videnscenter CTA -> pris
   section). Applies on phones AND tablets. */
@media (max-width: 1024px) {
    .mobile-divider-top {
        border-top: 1px solid var(--color-border-light);
    }
}

@media (max-width: 768px) {
    /* ---------- Showcase slideshow caption: stable height, centered ---------- */
    .showcase-slideshow-caption {
        align-items: center;
        text-align: center;
    }

    .showcase-caption-content {
        justify-content: center;
    }

    /* Reserve two lines so the bar does not change height per slide.
       Center the text within that reserved height so it lines up with the
       icon (align-items:center on the row centers the icon against the full
       2.4em box — the text must center inside it too, or the icon looks
       vertically offset). */
    .showcase-caption-content span {
        display: flex;
        align-items: center;
        min-height: 2.4em;
    }

    /* ---------- Story signature: translucent card, no stray divider ----------
       The wrapper is display:contents, so the signature is a direct flex
       child of .story-grid and stretches full width — wider than the photo
       above it, leaving it visually offset. Match the photo's width and
       centre it so the column lines up. */
    .story-image-wrapper .story-signature {
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-lg);
        border-top: none;
        padding: 20px;
        /* 16px top gap so the signature card doesn't butt against the photo above */
        margin: 16px auto 0;
        gap: 12px;
        width: 100%;
        max-width: 330px;
        box-sizing: border-box;
    }


    /* ---------- Pricing card: DKK above the price, no button wrap ---------- */
    .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;
    }

}

/* =====================================================
   LARGE PHONES (590px–768px)
   The mobile 330px caps on the story photo/signature and
   the pricing card's 500px cap read as dead space once the
   viewport clears them — let these fill the column here.
   ===================================================== */
@media (min-width: 590px) and (max-width: 768px) {
    .story-grid .story-image,
    .story-image-wrapper .story-signature {
        max-width: none;
    }
}

/* In the two-column heroes at 901-1024 the visual column is ~430-490px wide —
   the quote|author row layout of the testimonial gets cramped there; stack it
   like on phones. (Below 900 the heroes flatten and the card is 720px wide.) */
@media (min-width: 901px) and (max-width: 1024px) {
    .audience-hero-visual .hero-testimonial,
    .integration-hero-visual .hero-testimonial {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .audience-hero-visual .hero-testimonial-author,
    .integration-hero-visual .hero-testimonial-author {
        border-left: none;
        padding-left: 0;
        /* left-aligned under the left-aligned quote (the base centers the
           logo/name for the desktop side-by-side column) */
        align-items: flex-start;
    }
}

/* =====================================================
   TABLET REFINEMENTS (769px–1024px)
   The 1024px block collapses the desktop grids to a single
   column but left every stacked block at full container
   width — huge visuals and unbalanced left-aligned copy
   under centered section headers. Cap and center the
   stacked blocks so tablets get the mobile design's
   centered rhythm with desktop-sized content.
   Placed last so these rules win the cascade.
   ===================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Section rhythm between desktop (100px) and mobile (48px) */
    .section {
        padding: 72px 0;
    }

    .problem-section {
        padding: 64px 0;
    }

    /* ---------- Hero: one centered column ---------- */
    .hero {
        padding: 160px 0 72px;
    }

    /* (Width caps for the flattened hero children — description 680px,
       TV/cards/testimonial 720px — live in the 1024px block with the order
       rules; the wrappers are display:contents there so caps on them are
       no-ops.) */

    /* Four stats don't reliably fit one row near 769px */
    .hero-stats {
        flex-wrap: wrap;
        row-gap: 20px;
    }

    /* Keep the 3 step cards 3-across (the 900px block would single-file them
       between 769-900); anywhere-wrap lets the tracks shrink at the low end */
    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .step-card {
        min-width: 0;
    }

    .step-card h3,
    .step-card p {
        overflow-wrap: anywhere;
    }

    /* The hero's centered text-align leaks into the quote card — keep the
       card left-aligned like desktop */
    .hero-testimonial {
        text-align: left;
    }

    /* At the capped width the story link fits beside the author block and
       crushes the quote column — force it onto its own row like desktop */
    .hero-testimonial-link {
        flex-basis: 100%;
        margin-top: -8px;
    }

    /* The arrow otherwise flies to the card's far edge on the full row */
    .hero-testimonial-link i:last-child {
        margin-left: 4px;
    }

    /* ---------- Problem cards: three across needs tighter gutters ---------- */
    .problem-grid {
        gap: 20px;
    }

    .problem-card {
        padding: 28px 20px;
        /* let the grid tracks shrink below the guide label's nowrap width */
        min-width: 0;
    }

    /* Safety valve near 900-960px: wrap the guide label instead of forcing
       the card wider than its grid track */
    .problem-card-guide {
        white-space: normal;
    }

    .problem-card h3 {
        font-size: 1.15rem;
    }

    .problem-card p {
        font-size: 0.9rem;
    }

    /* ---------- Features: two columns need an even collapsed count ---------- */
    /* 9 visible cards leave an empty cell in the 2-column grid — show 8 */
    .js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+9) {
        display: none;
    }

    /* ---------- Showcases: centered copy above a capped visual ---------- */
    .showcase-item {
        padding: 56px 0;
        gap: 32px;
    }

    /* Same section dividers as mobile — the stacked showcases otherwise run
       together without the desktop's alternating backgrounds' rhythm */
    .showcase-item + .showcase-item {
        border-top: 1px solid var(--color-border-light);
    }

    /* CTA spans the capped content column, like the hero CTAs */
    .showcase-cta {
        width: 100%;
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .showcase-content {
        max-width: 620px;
        margin: 0 auto;
        text-align: center;
    }

    /* Checklist: two content-sized columns packed to the center — uses the
       tablet width instead of one tall left-aligned stack; item text stays
       left-aligned for scanability. */
    .showcase-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, auto));
        gap: 10px 32px;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .showcase-image,
    .integration-hub {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ---------- Story: heading first, then photo, text, signature ----------
       The two grid cells stack here, and plain DOM order puts the photo +
       signature BEFORE the heading. Flatten the wrappers and order the
       children like the mobile block does, at the tablet 720px width. */
    .story-grid {
        display: flex;
        flex-direction: column;
        /* gap 0 (not the inherited 40px): with the wrappers flattened, a flex
           gap inserts itself between every paragraph on top of their own
           margins — spacing comes from the children's margins alone */
        gap: 0;
    }

    .story-grid .story-image-wrapper,
    .story-grid .story-content {
        display: contents;
    }

    .story-content > p {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .story-content h2 {
        order: 1;
        width: 100%;
        max-width: 720px;
        margin: 0 auto 28px;
        text-align: center;
    }

    .story-image-wrapper picture {
        order: 2;
        width: 100%;
        max-width: 720px;
        margin: 0 auto 28px;
    }

    /* Wide crop instead of the desktop square so the photo doesn't tower
       over the stacked layout */
    .story-grid .story-image {
        aspect-ratio: 2;
        object-position: 0 -62px;
    }

    .story-content > *:not(h2) {
        order: 3;
        width: 100%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* Name/title + CTA share one row in the capped wrapper */
    .story-image-wrapper .story-signature {
        order: 4;
        width: 100%;
        max-width: 720px;
        margin: 24px auto 0;
        /* name/title block left, "Lad os tage en snak" CTA to its right */
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
    }

    .story-image-wrapper .story-cta {
        align-self: center;
    }
}

/* The CTA/pricing section stacks at 900px — center the copy to match the
   tablet look (the checklist keeps left-aligned items as a centered block) */
@media (min-width: 769px) and (max-width: 900px) {
    .cta-form-left {
        align-items: center;
        text-align: center;
    }

    /* Stacked pricing view reads centered like the rest of the tablet range;
       the checklist renders as the <=900 chip cloud with the pill badges
       centered under it. The h2 needs its own rule — base + <=900 set it
       text-align:left with higher effective precedence than inheritance. */
    .cta-pricing-left,
    .cta-pricing-left h2 {
        text-align: center;
    }

    /* stacked below the intro here — let the card use the full column instead
       of the desktop two-column 500px cap */
    .pricing-card {
        max-width: none;
    }

    /* One compact row instead of a floating two-line block in the whitespace */
    .cta-contact-alt {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .cta-contact-alt p {
        margin: 0;
    }
}

/* Tablet portrait (601-768px): the 768 block collapses the feature/problem
   card grids to a single column, which is right for phones but leaves tablets
   with one very tall single-file stack. Restore two columns in this range so
   the cards use the available width. Above 768 they fall back to the 3-col base. */
@media (min-width: 601px) and (max-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Room for the four stats in one row here (the 2x2 grid is for phones) */
    .hero-stats {
        grid-template-columns: repeat(4, auto);
        gap: 20px 28px;
    }
}

/* The 3 getting-started step cards go 3-across only where the cards keep a
   readable width (~220px each); below ~700px they use the single-file
   480px-capped stack from the 900px block. */
@media (min-width: 701px) and (max-width: 768px) {
    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .step-card {
        min-width: 0;
        padding: 24px 16px;
    }

    .step-card h3,
    .step-card p {
        overflow-wrap: anywhere;
    }
}

/* Problem cards between phone and desktop: three across only fits above
   ~900px (the nowrap guide labels set each card's min-content width, which
   is also why the grid stopped shrinking with the viewport below ~857px) and
   a 2+1 wrap leaves an orphan card — stack them single-file at a capped
   width across the whole in-between range. */
@media (min-width: 601px) and (max-width: 900px) {
    .problem-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .problem-card {
        width: 100%;
        max-width: 560px;
    }
}

/* Footer between phone and desktop: a 2x2 of unequal columns left a tall
   ragged gap under the short brand block. Brand blurb spans the top, the
   three link columns share one row below it. */
@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;
    }
}

/* =====================================================
   Audience switcher - "other solutions" strip on the
   audience landing pages (inc/audience-links.php)
   ===================================================== */
.audience-switcher {
    padding-top: 60px;
    padding-bottom: 60px;
}

.audience-switcher-inner {
    text-align: center;
}

.audience-switcher-inner h2 {
    margin-bottom: 8px;
}

.audience-switcher-inner p {
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

.audience-switcher-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.audience-switcher-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.audience-switcher-link:hover {
    background: var(--color-blue-light);
    border-color: var(--color-blue);
    color: var(--color-link);
}

.audience-switcher-link i {
    color: var(--color-blue);
}

.audience-switcher-all {
    border-color: var(--color-blue);
    color: var(--color-link);
}

/* =====================================================
   Løsninger hub page (loesninger.php)
   ===================================================== */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.solution-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 32px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

a.solution-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-blue);
}

.solution-card h2 {
    font-size: 1.25rem;
    margin: 0;
}

.solution-card p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0;
    flex-grow: 1;
}

.solution-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-blue-dark);
    font-weight: 600;
}

a.solution-card:hover .solution-card-link {
    text-decoration: underline;
}

/* The "anden slags forening?" card ends in a real button (a contact CTA, not a
   whole-card link like its siblings) — give it the same top spacing the
   arrow-links get so it lines up in the grid. */
.solution-card-cta {
    margin-top: 4px;
    flex-shrink: 0;
}

/* This card is the odd one out at the end of the grid, so it spans the full row
   and lays out as a horizontal band (message left, CTA right) rather than a
   lone stretched card with empty space beside it. */
.solution-card-other {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 28px;
    background: var(--color-bg);
}

.solution-card-other .feature-icon {
    flex-shrink: 0;
    margin-bottom: 0;
}

.solution-card-other h2 {
    flex-shrink: 0;
}

.solution-card-other p {
    flex: 1 1 320px;
}

@media (max-width: 1024px) {
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    /* Back to a stacked card on narrow screens where a horizontal band cramps. */
    .solution-card-other {
        flex-direction: column;
        align-items: flex-start;
    }

    /* the desktop band's flex-basis (320px) is a WIDTH there, but becomes a
       320px minimum HEIGHT in the stacked column — huge gap before the CTA */
    .solution-card-other p {
        flex: 0 1 auto;
    }
}

/* =====================================================
   404 – Not Found page
   Full-viewport flex layout so the footer sits at the
   bottom on tall screens (no whitespace gap) and the
   error content is vertically centered in between.
   ===================================================== */
.page-404 {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.page-404 .footer {
    margin-top: auto;
}

.error-404-section {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 24px 80px;
    position: relative;
    overflow: hidden;
}

/* Soft brand-coloured glow behind the content */
.error-404-section::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(760px, 90vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 35% 35%, var(--color-green-light), transparent 60%),
        radial-gradient(circle at 70% 65%, var(--color-blue-light), transparent 60%);
    filter: blur(10px);
    z-index: 0;
    pointer-events: none;
}

.error-404-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Oversized gradient 404 glyph */
.error-404-code {
    font-size: clamp(7rem, 22vw, 15rem);
    line-height: 0.9;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 0.25rem;
    background: linear-gradient(135deg, var(--color-green), var(--color-blue) 55%, var(--color-yellow));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    user-select: none;
}

.error-404-section .section-label {
    margin-bottom: 0.5rem;
}

.error-404-section h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.error-404-text {
    max-width: 30rem;
    margin: 0 auto 2.5rem;
    color: var(--color-text-secondary);
    font-size: 1.05rem;
}

.error-404-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1rem;
}

.error-404-links .btn {
    min-width: 150px;
}

@media (max-width: 560px) {
    .error-404-section {
        padding: 120px 20px 60px;
    }
    .error-404-links .btn {
        width: 100%;
        max-width: 320px;
    }
}

/* The reassure box sits on a pale green tint where even the darkened
   --color-link lands at 4.45:1 - a touch under AA. */
.priser-reassure a {
    color: #25727d;
}

/* =====================================================
   Voice-of-customer widgets (.kk-feedback family)
   - .guide-feedback: "Var denne guide nyttig?" on the 21
     videnscenter guides (inc/guide-feedback.php)
   - .open-question: anonymous question box under the price FAQ
   - .missing-system: system capture in the integrations aside
   - .lead-survey: "hvordan hørte I om os?" pills on the
     contact form's success screen
   Behaviour lives in js/main.js; beacons go to api/feedback.php
   ===================================================== */
.kk-feedback {
    margin-top: 40px;
    padding: 24px 28px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* main.js toggles the widgets' states via the hidden attribute; the
   display:flex rows below would otherwise win over the UA [hidden] rule */
.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-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.kk-feedback-vote {
    min-width: 84px;
    min-height: 44px;
    padding: 10px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.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:disabled {
    cursor: default;
    opacity: 0.55;
}

/* The chosen answer stays fully visible when its siblings fade */
.kk-feedback-vote.selected {
    opacity: 1;
    background: var(--color-green-light);
    border-color: var(--color-green-accessible);
    color: var(--color-green-accessible);
}

.kk-feedback-followup {
    margin-top: 18px;
}

.kk-feedback-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.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);
}

/* Accessible label for the open-question input (no visual label needed —
   the title line above the field carries the meaning) */
.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;
}

/* Guide feedback sits between the article/PDF block and the founder card —
   a touch more air so it reads as its own little stop on the way out */
.guide-feedback {
    margin-top: 48px;
    text-align: center;
}

.guide-feedback .kk-feedback-buttons,
.guide-feedback .kk-feedback-row {
    justify-content: center;
}

.guide-feedback .kk-feedback-row {
    max-width: 480px;
    margin: 0 auto;
}

.guide-feedback .kk-feedback-label {
    text-align: center;
}

/* Open question lives in the second grid row of .faq-pdf-layout,
   directly under the FAQ list */
.open-question {
    margin-top: 8px;
}

/* On priser it sits inside the PDF aside instead, directly under the Budgetark
   card — give it a clearer gap from that card. */
.faq-pdf-aside .open-question {
    margin-top: 24px;
}

/* Missing-system capture reuses the row/input inside the (already framed)
   integration aside card — no outer .kk-feedback box needed */
.missing-system {
    margin: 12px 0 16px;
}

.missing-system .kk-feedback-note {
    margin-top: 8px;
    font-size: 0.8rem;
}

.missing-system .kk-feedback-thanks {
    margin-top: 10px;
}

/* Lead micro-survey on the contact success screen: small centered pills,
   deliberately quiet so answering feels optional */
.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;
}

@media (max-width: 560px) {
    .kk-feedback {
        padding: 20px;
    }
}

/* The funktioner page IS the full catalogue: desktop shows all cards and no
   toggle; the collapse + "Vis flere funktioner" stays as a phone/tablet aid. */
@media (min-width: 1025px) {
    .js .features-catalog #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+10) {
        display: flex;
    }

    .features-catalog .features-toggle-wrapper {
        display: none;
    }
}

/* Between 481-600px the hero CTAs are 50/50 halves that are too narrow for
   label + rocket icon ("Fa en gratis demo" wrapped to two lines) — the icon
   already hides at <=480; hide it for the whole band. */
@media (max-width: 600px) {
    .hero-cta-icon {
        display: none;
    }
}

/* ...and tighter side padding in the same band: the bare label is ~155px,
   which just exceeds btn-large's interior at the band's narrow end */
@media (min-width: 481px) and (max-width: 600px) {
    .hero-cta .btn {
        padding-left: 14px;
        padding-right: 14px;
        white-space: nowrap;
    }
}

/* Stacked/centered hero: the demo-note icon pinned left of centered text
   reads as misalignment — drop it (desktop keeps it: the note is
   left-aligned there and the icon anchors the line) */
@media (max-width: 1024px) {
    .hero-demo-note > i {
        display: none;
    }
}

/* ---------- Hero-offset sections vs the generic section padding ----------
   The mobile/tablet .section padding rules come later in the cascade and
   flattened .section-hero-offset-lg's 170px top padding to 48/72px — putting
   the first hero element (breadcrumb/label pill) directly under the fixed
   header on loesninger/kontakt/priser. Restore a proper offset. */
@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;
    }
}

/* ---------- .section-cta-row for pages without audience.css ----------
   loesninger (and any styles.css-only page) uses the class too; without this
   the buttons are plain block anchors with no gap. Mirrors audience.css. */
.section-cta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

@media (max-width: 600px) {
    .section-cta-row .btn {
        width: 100%;
        justify-content: center;
        min-height: 56px;
        align-items: center;
    }
}

/* Centered microcopy with a leading inline icon reads as misalignment once
   the text wraps on phones — same treatment as the hero demo-notes */
@media (max-width: 768px) {
    .integration-cta-links > i {
        display: none;
    }
}

/* "En anden slags forening?" band: when the row wraps (641-1024) the CTA
   drops to its own line — center it there (on the wide single-row band the
   auto margins just keep it at the right edge as before) */
@media (min-width: 641px) and (max-width: 1024px) {
    .solution-card-other .solution-card-cta {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- loesninger: "Vis flere" collapse for the foreningstype cards ----
   Same JS-gated pattern as the front page/funktioner: all cards stay in the
   server HTML (crawlable); CSS hides the tail until the toggle expands.
   Desktop shows everything (hub page) and hides the toggle. */
@media (max-width: 1024px) {
    .js #featuresGrid.solutions-grid:not(.features-expanded) > .solution-card:nth-child(n+5) {
        display: none;
    }
}

@media (min-width: 1025px) {
    .solutions-grid + .features-toggle-wrapper {
        display: none;
    }
}

/* Audience switcher pills: consistent one-per-row on phones instead of the
   width-dependent 2/1 wrap raggedness (tablet keeps the wrapping row) */
@media (max-width: 600px) {
    .audience-switcher-link {
        width: 100%;
        justify-content: center;
    }
}

/* Standalone founder cards follow the container width on stacked layouts —
   the 680px desktop cap froze them between ~720 and 900px (the
   section-header-row variant is already released in its own rule) */
@media (max-width: 900px) {
    .founder-card {
        max-width: none;
    }
}

/* Priser page stacked treatment: centered strip/headers, full-width calc CTA */
@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;
    }
}