/**
 * Revisorkort Lead Flow - Styles
 * Mobile-first design with desktop 50/50 split layout
 */

/* ============================================
   GLOBAL RESET & BASE STYLES
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colors - Apple iOS System Color Palette */
    --color-primary: #008A6A;
    --color-primary-hover: #006F56;
    --color-secondary: #00C389;
    --color-accent: #00C389;
    --color-text: #1a1a1a;
    --color-text-light: #666666;
    --color-text-lighter: #8E8E93;
    --color-background: #f5f5f7;
    --color-background-dark: #F2F2F7;
    --color-control-track: #ECECF1;
    --color-border: #E5E5EA;
    --color-error: #FF3B30; /* Apple systemRed */
    --color-brand-blue: #007AFF;
    --color-brand-blue-hover: #0066DD;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xs: 0.25rem;
    --spacing-xs-plus: 0.625rem; /* 10px */
    --spacing-sm-minus: 0.75rem; /* 12px */
    --spacing-sm-plus: 1.25rem; /* 20px */
    --spacing-2xl: 4rem;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Component sizing */
    --control-height: 44px;
    --control-group-min-height: 48px;
    --control-radius: 44px;
    --card-min-height: 60px;
    --card-radius: 10px;
    --card-padding: 18px;
    --choice-indicator-size: 20px;
    --mobile-horizontal-gutter: var(--spacing-sm);
}

body {
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Clickable cursor model (minimal + stable) */
:is(
    [data-value],
    [data-system],
    [data-city],
    [data-cvr],
    .toggle-button:not(:disabled),
    .btn-next:not(.btn-disabled):not(:disabled),
    .btn-back,
    .progress-step-container,
    .progress-close-btn,
    .step-dropdown-item:not(.disabled),
    .search-result-item,
    .input-clear-btn,
    .search-overlay-clear,
    .search-overlay-close,
    .textarea-overlay-done,
    .requirement-card,
    a[href]
) {
    cursor: pointer;
}

:is(
    [data-value],
    [data-system],
    [data-city],
    [data-cvr],
    .step-dropdown-item:not(.disabled),
    .search-result-item,
    .requirement-card
) * {
    cursor: inherit;
}

/* ============================================
   MOBILE LAYOUT (DEFAULT)
   ============================================ */

.funnel-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: white;
    position: relative;
}

.left-column {
    display: block;
}

.left-logo-slider {
    display: none;
}

.hero-network-badge {
    display: none;
}

/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    height: auto;
    background: linear-gradient(135deg, #008A6A 0%, #006F56 100%);
    background-image: url('../images/hero-img-1.png');
    background-size: cover;
    background-position: 28% top;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px var(--mobile-horizontal-gutter) 34px var(--mobile-horizontal-gutter);
    overflow: hidden;
    transition: padding-bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 767px) {
    /* Step 1: give hero more room for logo + headline + subtitle */
    .hero-section {
        min-height: 176px;
        transition: min-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Step 2+: collapse hero to keep focus on form */
    body:not(.mobile-step1-hero-expanded) .hero-section {
        min-height: 82px;
        padding-top: 12px;
        padding-bottom: 6px;
    }

    body:not(.mobile-step1-hero-expanded) .hero-title {
        display: none !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
    }

    body:not(.mobile-step1-hero-expanded) .hero-subtitle {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin: 0;
    }

    /* Step 2+ mobile: slightly tighter top spacing for faster completion */
    body:not(.mobile-step1-hero-expanded) .question-container {
        padding-top: var(--spacing-sm);
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Mobile: header overlays hero image (white logo on dark photo) */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background: transparent;
    padding: 20px var(--mobile-horizontal-gutter);
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
}

.header-social-proof {
    display: none; /* Hidden on mobile */
}

.form-social-proof {
    display: none; /* Hidden on mobile and steps 2+ */
}

.header-topbar {
    display: none; /* Hidden on mobile */
}

.header-nav {
    display: none; /* Hidden on mobile */
}

.header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    align-items: center;
}

.header-nav li {
    margin: 0;
}

.header-nav a {
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.header-nav a:hover {
    opacity: 0.7;
}

/* Vertical separator between logo and nav */
.header-nav::before {
    content: '';
    display: block;
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.12);
    margin-right: 16px;
    margin-left: 16px;
}

.logo {
    display: flex;
    align-items: center;
    position: static;
}

.logo svg {
    height: 19px;
    width: auto;
}

.hero-title {
    color: white;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    padding-top: 36px;
    padding-bottom: 0;
    margin: 0;
    text-align: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    transition: opacity 0.3s ease, max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

@media (max-width: 767px) {
    .hero-title {
        display: block;
        text-align: left;
        padding-top: 56px;
        max-width: 320px;
        margin: 0;
    }

    /* Mobile step 1: subtitle sits below headline with tight spacing */
    body.mobile-step1-hero-expanded .hero-subtitle {
        padding-top: 8px;
        max-width: 300px;
        margin: 0;
        line-height: 1.35;
        text-align: left;
    }

    /* Step 1 only: show black top bar with nav links */
    body.mobile-step1-topbar .header-topbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 32px;
        padding: 0 var(--mobile-horizontal-gutter);
        background: #1a1a1a;
    }

    body.mobile-step1-topbar .header-topbar .header-nav {
        display: flex;
        align-items: center;
    }

    body.mobile-step1-topbar .header-topbar .header-nav ul {
        gap: 16px;
    }

    body.mobile-step1-topbar .header-topbar .header-nav a {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.75);
    }

    body.mobile-step1-topbar .header-topbar .header-nav::before {
        display: none;
    }

    body.mobile-step1-topbar .site-header {
        top: 32px;
    }
}

.hero-subtitle {
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    padding: 0;
    opacity: 0.9;
}

/* Value Proposition - Hidden on mobile, shown on desktop */
.hero-value-prop {
    display: none;
    color: white;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

.hero-usp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.hero-usp-cell {
    min-height: 82px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Only border between the two cells (vertical separator) */
.hero-usp-cell:first-child {
    border-right: 0.5px solid rgba(255, 255, 255, 0.24);
}

.hero-usp-stat {
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.3px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.97);
    margin-bottom: 5px;
}

.hero-usp-sub {
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.74);
    font-weight: 400;
}

/* Hero text wrapper - desktop only */
.hero-text-content {
    display: contents;
}

/* Form Section */
.form-section {
    flex: 1;
    width: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: calc(100dvh - 180px);
    min-height: calc(100vh - 180px);
    margin-top: -20px;
    z-index: 10;
    padding: 0 0 calc(var(--spacing-sm-plus) + env(safe-area-inset-bottom));
}

/* Progress Header */
.progress-header {
    background: #F2F2F7;
    border-bottom: 1px solid #E5E5EA;
    border-radius: 14px 14px 0 0;
    padding: 0 var(--mobile-horizontal-gutter);
    height: 48px;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 60;
}

.progress-step-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-step-container span {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-brand-blue);
    line-height: 1;
}

.progress-dropdown-icon {
    color: var(--color-brand-blue);
    opacity: 0.8;
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.progress-dropdown-icon.rotated {
    transform: rotate(180deg);
}

.progress-meta {
    font-size: 14px;
    color: #000;
    opacity: 0.85;
    white-space: nowrap;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.progress-meta-icon {
    width: 14px;
    height: 14px;
    opacity: 0.8;
    flex-shrink: 0;
    color: #000;
    display: block;
    margin-bottom: -2px;
}

.progress-close-btn {
    width: 32px;
    height: 32px;
    background: white;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin: 0;
    padding: 0;
}

.progress-close-btn:active {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
}

/* ==========================================
   STEP TRANSITIONS (iOS-style)
   ========================================== */

/* Question container slide + fade animation */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Only fade for child elements - no transform to prevent layout shift */
/* ============================================
   STEP ENTRY ANIMATIONS (Apple-smooth App-style)
   ============================================ */

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInOnly {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Question header (number + title) - First to appear - just fade */
.question-header {
    animation: fadeInOnly 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

/* Subtitle - Second - just fade */
.question-subtitle {
    animation: fadeInSubtitle 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.1s;
    opacity: 0;
}

/* Requirement helper text (Step 7) - same as subtitle */
.requirement-helper-text {
    animation: fadeInSubtitle 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.35s;
    opacity: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-top: 0;
}

/* New keyframe that fades to 0.65 instead of 1 */
@keyframes fadeInSubtitle {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.85;
    }
}

/* Toggle group - appears WITH header (at top visually) */
.toggle-group {
    animation: fadeInOnly 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0s; /* Same as header - it's at the top */
    opacity: 0;
}

/* Form elements - Third - just fade */
.form-input {
    animation: fadeInOnly 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

/* Dynamic inputs that appear on interaction - no initial animation */
.erp-other-input-container .form-input,
.erp-other-input-container .form-textarea,
.erp-other-input-container .textarea-wrapper,
.erp-preference-input-container .form-input {
    animation: none !important;
    opacity: 1 !important;
}

/* Smooth reveal for dynamic containers */
.erp-other-input-container,
.erp-help-container,
.erp-preference-container,
.erp-preference-input-container {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.erp-other-input-container.visible,
.erp-help-container.visible,
.erp-preference-container.visible,
.erp-preference-input-container.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Utility spacing classes for dynamic markup from JS */
.mt-12 { margin-top: var(--spacing-sm-minus); }
.mt-16 { margin-top: var(--spacing-sm); }
.mt-20 { margin-top: var(--spacing-sm-plus); }
.mb-12 { margin-bottom: var(--spacing-sm-minus); }
.text-center { text-align: center; }
.text-left { text-align: left; }

.overlay-toggle-label {
    color: white;
    text-align: left;
    margin-bottom: var(--spacing-sm-minus);
}

/* Helper text - Last - just fade */
.helper-text {
    animation: fadeInOnly 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.25s;
    opacity: 0;
}

/* Cards/Options/Rows - Staggered slide + fade (App-style) */
.revenue-card,
.service-card,
.erp-card,
.erp-preference-row,
.requirement-card {
    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

/* First card - slides in */
.revenue-card:nth-child(1),
.service-card:nth-child(1),
.erp-card:nth-child(1),
.erp-preference-row:nth-child(1),
.requirement-card:nth-child(1) {
    animation-delay: 0.2s;
}

/* Second card - slides in with delay */
.revenue-card:nth-child(2),
.service-card:nth-child(2),
.erp-card:nth-child(2),
.erp-preference-row:nth-child(2),
.requirement-card:nth-child(2) {
    animation-delay: 0.28s;
}

/* Third card */
.revenue-card:nth-child(3),
.service-card:nth-child(3),
.erp-card:nth-child(3),
.erp-preference-row:nth-child(3) {
    animation-delay: 0.36s;
}

/* Fourth card */
.revenue-card:nth-child(4),
.service-card:nth-child(4),
.erp-card:nth-child(4),
.erp-preference-row:nth-child(4) {
    animation-delay: 0.44s;
}

/* Fifth card */
.revenue-card:nth-child(5),
.service-card:nth-child(5),
.erp-card:nth-child(5),
.erp-preference-row:nth-child(5) {
    animation-delay: 0.52s;
}

/* Sixth+ cards */
.revenue-card:nth-child(n+6),
.service-card:nth-child(n+6),
.erp-card:nth-child(n+6),
.erp-preference-row:nth-child(n+6) {
    animation-delay: 0.6s;
}

/* Service detail sub-elements - staggered animations */
.service-detail-badge {
    animation: fadeInOnly 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.1s;
    opacity: 0;
}

.instruction-text {
    animation: fadeInSubtitle 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.15s;
    opacity: 0;
}

.toggle-label {
    animation: fadeInSubtitle 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.frequency-label {
    animation: fadeInSubtitle 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.15s;
    opacity: 0;
}

.frequency-buttons button:nth-child(1),
.toggle-group .toggle-option:nth-child(1),
.requirement-buttons .requirement-button:nth-child(1) {
    animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.25s;
    opacity: 0;
}

.frequency-buttons button:nth-child(2),
.toggle-group .toggle-option:nth-child(2),
.requirement-buttons .requirement-button:nth-child(2) {
    animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

.frequency-buttons button:nth-child(3) {
    animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.35s;
    opacity: 0;
}

.frequency-buttons button:nth-child(4) {
    animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

/* Contact fields - Staggered slide + fade */
.contact-field-group:nth-child(1) {
    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.contact-field-group:nth-child(2) {
    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.28s;
    opacity: 0;
}

.contact-field-group:nth-child(3) {
    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.36s;
    opacity: 0;
}

/* Textarea wrapper - fade in together (textarea + counter pill) */
.textarea-wrapper {
    animation: fadeInOnly 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

/* Remove individual animation when inside wrapper (wrapper handles it) */
.textarea-wrapper .form-textarea {
    animation: none;
    opacity: 1;
}

/* OLD ANIMATIONS - Replaced above */
@keyframes fadeInOnly {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Progress step number smooth transition */
.progress-step-container {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 10px 15px;
    margin: 0;
    border-radius: 10px;
    background: rgba(0, 122, 255, 0.10);
    user-select: none;
    -webkit-user-select: none;
}

.progress-step-container * {
    user-select: none;
    -webkit-user-select: none;
}

.progress-step-container:hover {
    background: rgba(0, 122, 255, 0.14);
}

.progress-step-container:hover .progress-dropdown-icon {
    opacity: 1;
}

#progress-step {
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Back button fade in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.btn-back {
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ========================================== */
.question-container {
    flex: 1;
    padding: var(--spacing-sm-plus) var(--mobile-horizontal-gutter);
    padding-bottom: calc(124px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: white;
}

/* Step 1 logo strip (mobile-only, toggled by JS) */
.logo-slider-section {
    display: none;
    margin-top: var(--spacing-xs);
    padding: 0 0 var(--spacing-sm-minus);
    background: white;
}

.logo-slider-label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-lighter);
    text-align: center;
}

.logo-slider-track-wrapper {
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(17, 24, 39, 0.06);
    border-bottom: 1px solid rgba(17, 24, 39, 0.06);
    padding: 8px 0;
    display: flex;
}

.logo-slider-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 30px;
    flex: 0 0 auto;
    min-width: max-content;
    animation: mobileLogoLoop 34s linear infinite;
}

.logo-slider-track li {
    display: flex;
    align-items: center;
    height: 24px;
}

.logo-slider-track img {
    height: 17px;
    width: auto;
    object-fit: contain;
    opacity: 0.72;
    filter: grayscale(100%);
}

@keyframes mobileLogoLoop {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - 30px));
    }
}

.question-wrapper {
    width: 100%;
}

/* Step 1 social proof slider (desktop-only) */
.rk-logo-slider-step1 {
    display: none;
}

.question-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.question-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #1a1a1a;
    color: white;
    border-radius: 50%;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

.question-title {
    font-size: 20px;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
    margin: 0;
}

.question-subtitle {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
}

.multi-select-hint {
    font-size: 12px;
    color: var(--color-text-light);
    margin: calc(var(--spacing-sm) * -0.5) 0 var(--spacing-sm-minus);
    line-height: 1.3;
}

.helper-text {
    font-size: 13px;
    font-family: var(--font-family);
    font-weight: 400;
    color: #666;
    margin-top: 12px;
    line-height: 1.5;
    text-align: center;
}

.helper-text::before {
    content: none;
}

.section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: #666;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* Form Inputs */
/* Input with clear button wrapper */
.input-clear-wrapper {
    position: relative;
    width: 100%;
}

.input-clear-wrapper .form-input {
    padding-right: 50px; /* Make room for clear button */
}

.input-clear-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 50%;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
}

.input-clear-btn:hover {
    background: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.6);
}

.form-input,
.form-textarea {
    width: 100%;
    height: 60px;
    padding: 0 var(--spacing-sm-plus);
    font-size: 16px;
    border: 2px solid #E5E5EA;
    border-radius: 10px;
    font-family: var(--font-family);
    color: #000;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    background: #fff;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 2px 5px 0 #0000000f, 0 4px 4px 0 #00000003;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #000;
    opacity: 0.5;
    font-size: 14px;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    font-size: 16px;
    opacity: 1;
    border: 2px solid var(--color-brand-blue) !important;
}

.form-input.selected {
    border-color: #00C389;
    border-width: 2px;
}

/* Blue border when focused */
.form-input:focus {
    border-color: var(--color-brand-blue) !important;
}

/* Green border when filled */
.form-input.has-value {
    border-color: #00C389 !important;
}

/* Green border stays even when focused */
.form-input.has-value:focus {
    border-color: var(--color-brand-blue) !important;
}

/* Red border when invalid (empty after blur) */
.form-input.invalid {
    border-color: #FF3B30 !important;
}

.form-input.invalid:focus {
    border-color: var(--color-brand-blue) !important;
}

/* Mobile Search Overlay (Full Screen - Løsning B) */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    overscroll-behavior: contain;
}

.search-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.search-overlay-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.search-overlay.open .search-overlay-content {
    transform: translateY(0);
}

.search-overlay-header {
    padding: var(--spacing-sm-plus);
    background: white;
    display: flex;
    gap: var(--spacing-sm-minus);
    align-items: center;
    border-bottom: 1px solid #E5E5EA;
}

.search-overlay-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-overlay-input {
    flex: 1;
    height: 60px;
    padding: 0 50px 0 var(--spacing-sm-plus);
    font-size: 16px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    font-family: var(--font-family);
    color: #000;
    background: #fff;
    caret-color: transparent; /* Hidden during slide-up animation, shown blue via JS */
}

.search-overlay-input::placeholder {
    color: #000;
    opacity: 0.5;
    font-size: 14px;
}

.search-overlay-clear {
    position: absolute;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    font-size: 16px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

.search-overlay-close {
    height: 60px;
    padding: 0 var(--spacing-sm-plus);
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--color-brand-blue);
    font-family: var(--font-family);
    font-weight: 500;
    flex-shrink: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

.search-overlay-results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
    overscroll-behavior: contain;
    -webkit-overscroll-behavior: contain;
    padding-bottom: 400px; /* Extra space for keyboard */
}

.search-results-list {
    padding: 0;
}

/* Desktop inline dropdown panels (CVR/City) */
.cvr-dropdown,
.city-dropdown {
    position: absolute;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    max-height: 280px;
    overflow-y: auto;
    z-index: 10000;
    display: none;
    width: 100%;
    margin-top: var(--spacing-xs);
}

.search-feedback {
    padding: var(--spacing-sm);
    text-align: center;
    color: var(--color-text-light);
    font-size: 13px;
}

.search-feedback.error {
    color: var(--color-error);
}

.search-result-item {
    padding: var(--spacing-sm) var(--spacing-sm-plus);
    border-bottom: 1px solid #E5E5EA;
    background: white;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
}

.search-result-item * {
    user-select: none;
    -webkit-user-select: none;
}

.search-result-item:active {
    background: #F2F2F7;
}

@media (min-width: 768px) {
    .cvr-dropdown .search-result-item:hover,
    .city-dropdown .search-result-item:hover {
        background: var(--color-background-dark);
    }
}

.search-result-name {
    font-weight: 600;
    color: #000;
    font-size: 15px;
    margin-bottom: 4px;
}

.search-result-meta {
    font-size: 12px;
    color: #000;
    opacity: 0.65;
    margin-bottom: 4px;
}

.search-result-meta strong {
    font-weight: 600;
    opacity: 0.9;
}

.search-result-address {
    font-size: 12px;
    color: #000;
    opacity: 0.5;
}

/* Slightly crisper CVR readability on desktop dropdown */
.cvr-dropdown .search-result-meta {
    opacity: 0.72;
}

.cvr-dropdown .search-result-address {
    opacity: 0.62;
}

.city-dropdown .search-result-name {
    margin-bottom: 0;
}

/* Step Dropdown Overlay */
.step-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 50;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease, background 0.3s ease;
    pointer-events: none;
}

.step-dropdown-overlay.open {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 1;
    pointer-events: auto;
}

.step-dropdown-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-sm-plus);
    padding-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.step-dropdown-overlay.open .step-dropdown-content {
    transform: translateY(0);
    opacity: 1;
}

.step-dropdown-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    -webkit-overscroll-behavior: contain;
}

.step-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm-plus) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
}

.step-dropdown-item * {
    user-select: none;
    -webkit-user-select: none;
}

.step-dropdown-item:last-child {
    border-bottom: none;
}

.step-dropdown-item.sub-step {
    padding-left: 24px; /* Indent sub-steps */
    /* No opacity reduction - same visibility as master steps */
}

.step-dropdown-item.sub-step .step-dropdown-item-title {
    font-size: 14px; /* Same as regular steps */
}

.step-dropdown-item:active:not(.disabled) {
    background: rgba(255, 255, 255, 0.1);
}

.step-dropdown-item.disabled {
    opacity: 0.6; /* Increased from 0.4 - more visible, consistent with other states */
}

.step-dropdown-item.completed .step-dropdown-item-title {
    opacity: 1; /* Full visibility for completed - checkmark shows status */
}

.step-dropdown-item-left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm-minus);
}

.step-dropdown-item-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs-plus);
    max-width: 50%;
}

/* Status indicators */
.step-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.step-status-dot.current {
    background: var(--color-brand-blue);
    box-shadow: 0 0 8px rgba(0, 122, 255, 0.5);
}

.step-status-dot.available {
    background: rgba(255, 255, 255, 0.4); /* Semi-transparent white for visited */
}

.step-status-dot.locked {
    background: rgba(255, 255, 255, 0.15); /* Very subtle for locked */
}

.step-status-dot.invalid {
    background: #FF3B30; /* Red for invalid/incomplete */
}

.step-status-checkmark {
    width: 12px; /* Smaller and more subtle */
    height: 12px;
    border-radius: 50%;
    background: #00C389; /* Green background */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px; /* Smaller checkmark */
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
    padding-bottom: 0.5px; /* Fine-tune vertical centering */
}

.step-status-emoji {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}

/* Remove old indicator */
.step-dropdown-indicator {
    display: none;
}

.step-dropdown-item.current .step-dropdown-indicator {
    display: none;
}

.step-dropdown-item.completed .step-dropdown-indicator {
    display: none;
}


.step-dropdown-item.completed .step-dropdown-indicator::after {
    content: '✓';
    color: #000;
}

.step-dropdown-item-title {
    font-size: 14px;
    font-weight: 500;
    color: white;
    line-height: 1.4;
}

.step-dropdown-item.current .step-dropdown-item-title {
    font-weight: 600; /* Bold for current step */
}

.step-dropdown-item-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile Input Overlay - Remove old approach */
/* CVR dropdown visibility is now controlled by JavaScript based on touch capability */

.form-input.error,
.form-textarea.error {
    border-color: var(--color-error);
}

.error-message {
    color: var(--color-error);
    font-size: 12px;
    margin-top: 6px;
}

/* Toggle / Segmented Control (iOS-style) */
.toggle-group-wrapper {
    text-align: center;
}

.toggle-group {
    display: inline-flex;
    background: var(--color-control-track);
    border-radius: var(--control-group-min-height);
    padding: 4px;
    margin: 0 auto var(--spacing-md) auto;
    min-height: var(--control-group-min-height);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.toggle-button {
    padding: 0 28px;
    height: var(--control-height);
    min-width: 80px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-lighter); /* Apple systemGray */
    background: transparent;
    border: none;
    border-radius: var(--control-radius);
    transition: color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.toggle-button:hover:not(.active):not(:disabled) {
    color: var(--color-text);
}

.toggle-button.active {
    background: #fff;
    color: var(--color-text);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.toggle-button:disabled {
    opacity: 0.5;
}

/* Service Selection (Multi-select with checkmarks) */
/* Services Grid (Step 3) */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs-plus);
    margin-top: var(--spacing-sm-plus);
}

.service-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--card-padding);
    background: var(--color-background-dark);
    border: 2px solid transparent;
    border-radius: var(--card-radius);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    min-height: var(--card-min-height);
}

.service-card .service-label,
.service-card .service-checkbox,
.service-card .service-checkbox-inner {
    user-select: none;
    -webkit-user-select: none;
}

.service-card .service-label {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-light);
    line-height: 1.3;
    transition: color 0.2s ease;
}

.service-card.selected {
    background: white;
    border-color: var(--color-secondary);
}

.service-card.selected .service-label {
    color: var(--color-text);
}

.service-checkbox {
    width: var(--choice-indicator-size);
    height: var(--choice-indicator-size);
    border: 2px solid var(--color-border);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}

.service-card.selected .service-checkbox {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.service-checkbox-inner {
    color: white;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    display: none;
    padding-bottom: 0.5px; /* Fine-tune vertical centering */
}

.service-card.selected .service-checkbox-inner {
    display: block;
}

.service-checkbox-inner::before {
    content: '✓';
}

/* Service sub-step context (Step 3.x) */
.service-substep-header {
    align-items: center;
    gap: var(--spacing-xs-plus);
    margin-bottom: var(--spacing-sm);
}

.service-substep-title-row {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.service-substep-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #666;
    margin: 0;
}

.service-substep-title {
    margin: 0;
    flex-shrink: 0;
}

.service-overview-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs-plus);
    margin: 0 0 var(--spacing-md) 0;
    padding: 0;
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.service-overview-list::-webkit-scrollbar {
    display: none;
}

.service-overview-scroll {
    width: 100%;
}

@media (max-width: 767px) {
    .service-overview-scroll {
        width: auto;
        margin: 0 calc(-1 * var(--mobile-horizontal-gutter)) var(--spacing-sm) calc(-1 * var(--mobile-horizontal-gutter));
        padding: 0 0 0 var(--mobile-horizontal-gutter);
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .service-overview-scroll::-webkit-scrollbar {
        display: none;
    }

    .service-overview-list {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--spacing-xs);
        overflow: visible;
        margin: 0;
        width: max-content;
        min-width: 100%;
        padding: 0 var(--mobile-horizontal-gutter) 0 0;
    }

    .service-overview-item {
        min-height: 34px;
        padding: 6px var(--spacing-sm-minus);
    }

    .service-overview-label {
        font-size: 12px;
    }
}

.service-overview-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px var(--spacing-sm-minus);
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: transparent;
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.service-overview-indicator {
    display: inline-flex;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(26, 26, 26, 0.16);
    background: transparent;
}

.service-overview-label {
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: var(--color-text-light);
    white-space: nowrap;
}

.service-overview-item.current {
    background: rgba(0, 122, 255, 0.04);
    border-color: rgba(0, 122, 255, 0.30);
    box-shadow: none;
}

.service-overview-item.current .service-overview-label {
    color: var(--color-brand-blue);
    font-weight: 600;
}

.service-overview-item.current .service-overview-indicator {
    border-color: rgba(0, 122, 255, 0.34);
    background: rgba(0, 122, 255, 0.14);
}

.service-overview-item.current .service-overview-indicator::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-brand-blue);
}

.service-overview-item.completed {
    background: rgba(0, 195, 137, 0.03);
    border-color: rgba(0, 195, 137, 0.22);
}

.service-overview-item.completed .service-overview-label {
    color: var(--color-primary);
    font-weight: 600;
    opacity: 0.78;
}

.service-overview-item.completed .service-overview-indicator {
    border-color: rgba(0, 195, 137, 0.68);
    background: rgba(0, 195, 137, 0.12);
}

.service-overview-item.completed .service-overview-indicator::before {
    content: '✓';
    color: var(--color-secondary);
    font-size: 8px;
    line-height: 1;
    font-weight: 600;
    transform: translateY(-0.25px);
}

.service-overview-item.upcoming .service-overview-label {
    color: var(--color-text-lighter);
}

.service-overview-item.upcoming {
    background: transparent;
    border-color: rgba(26, 26, 26, 0.10);
    opacity: 1;
}

.service-overview-item.upcoming .service-overview-indicator {
    border-color: rgba(26, 26, 26, 0.14);
}

/* Instruction text (Step 4) */
.instruction-text {
    font-size: 13px;
    color: #000;
    /* opacity: 0.65; -- Removed, handled by fadeInSubtitle animation */
    margin-bottom: var(--spacing-sm-minus);
    line-height: 1.5;
}

/* Toggle label (Step 4) */
.toggle-label {
    font-size: 13px;
    color: #000;
    /* opacity: 0.65; -- Removed, handled by fadeInSubtitle animation */
    margin-top: var(--spacing-sm-plus);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
    text-align: center;
}

/* Reusable section break before first toggle blocks */
.question-section-divider {
    height: 1px;
    background: rgba(17, 24, 39, 0.08);
    margin: var(--spacing-sm-plus) 0 var(--spacing-sm);
}

/* Unified toggle-block rhythm for service detail sub-steps */
.service-detail-step .question-toggle-block .toggle-label {
    margin-top: 0;
    margin-bottom: var(--spacing-xs-plus);
}

.service-detail-step .question-toggle-block .toggle-group {
    margin-bottom: 0;
}

.service-detail-step .question-toggle-block {
    padding-bottom: 1.5rem;
}

.service-detail-step .question-toggle-block + .question-toggle-block {
    border-top: 1px solid rgba(17, 24, 39, 0.06);
    padding-top: 1.5rem;
}

/* Textarea Overlay (Mobile) */
.textarea-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.textarea-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.textarea-overlay-content {
    position: relative;
    width: 100%;
    height: 100vh;
    background: white;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}

.textarea-overlay.open .textarea-overlay-content {
    transform: translate3d(0, 0, 0);
}

.textarea-overlay-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-sm-plus);
    background: #F2F2F7;
    border-bottom: 1px solid #E5E5EA;
    height: 56px;
    z-index: 2;
}

.textarea-overlay-label {
    font-size: 11px;
    font-weight: 600;
    color: #000;
    letter-spacing: 0.5px;
}

/* Counter pill in overlay header - matches frontend pill exactly */
.textarea-overlay-counter {
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-family);
    color: #8E8E93;
    background: #F2F2F7;
    padding: var(--spacing-2xs) var(--spacing-xs-plus);
    border-radius: 20px;
    transition: border-color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    border: 1px solid #E5E5EA;
}

.textarea-overlay-counter .counter-current {
    font-weight: 600;
    color: #8E8E93;
    transition: color 0.2s ease;
}

.textarea-overlay-counter.met {
    background: #D9FFF2;
    border-color: #00C389;
    color: #00C389;
}

.textarea-overlay-counter.met .counter-current {
    color: #00C389;
}

.textarea-overlay-counter .counter-label {
    opacity: 0.6;
    margin-left: 4px;
}

.textarea-overlay-counter.met .counter-label {
    opacity: 0.8;
    color: #00C389;
}

.textarea-overlay-label-prefix {
    opacity: 0.5;
}

.textarea-overlay-label-service {
    opacity: 1;
    font-weight: 700;
}

.textarea-overlay-done {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-brand-blue);
    background: transparent;
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm-minus);
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

/* Textarea wrapper in overlay - absolute positioned */
.textarea-overlay .textarea-wrapper {
    position: absolute;
    top: 56px; /* Below header */
    left: 0;
    right: 0;
    bottom: 0; /* To bottom of content */
}

.textarea-overlay-input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: var(--spacing-sm-plus);
    padding-bottom: 60px;
    font-size: 16px;
    border: none;
    font-family: var(--font-family);
    color: #000;
    background: #fff;
    resize: none;
    outline: none;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    caret-color: transparent;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.textarea-overlay-input::placeholder {
    color: #000;
    opacity: 0.5;
    font-size: 14px;
}

/* Counter pill in overlay - fixed position, direct child of overlay-content */
.textarea-overlay-content > .textarea-counter-pill {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 10;
    pointer-events: none;
    opacity: 1 !important;
}

.textarea-character-count {
    padding: var(--spacing-sm-minus) var(--spacing-sm-plus);
    font-size: 13px;
    color: #666;
    text-align: center;
    background: #F2F2F7;
    border-bottom: 1px solid #E5E5EA;
}

.textarea-character-count .char-count {
    font-weight: 600;
    color: #FF3B30;
    transition: color 0.2s ease;
}

.textarea-character-count .char-count.valid {
    color: #00C389;
}

/* Textarea wrapper with counter */
.textarea-wrapper {
    position: relative;
    width: 100%;
}

.textarea-counter-pill {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-family);
    color: #8E8E93;
    background: #F2F2F7;
    padding: var(--spacing-2xs) var(--spacing-xs-plus);
    border-radius: 20px;
    pointer-events: none;
    transition: border-color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 0;
    z-index: 2;
}

.textarea-wrapper:focus-within .textarea-counter-pill,
.textarea-counter-pill.visible {
    opacity: 1;
}

.textarea-counter-pill.met {
    color: #00C389;
    background: #D9FFF2;
}

.counter-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.6px;
    opacity: 0.6;
    margin-left: 4px;
}

.textarea-counter-pill.met .counter-label {
    opacity: 0.8;
}

.textarea-examples {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.textarea-examples-title {
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.48);
}

.textarea-examples-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.textarea-example {
    font-size: 12px;
    line-height: 1.35;
    color: rgba(0, 0, 0, 0.6);
}

/* Form Textarea (base styling) */
.form-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--spacing-sm) var(--spacing-sm-plus);
    padding-bottom: 40px; /* 20px base + 20px extra space for counter pill */
    font-size: 16px;
    border: 1px solid #E5E5EA;
    border-radius: 10px;
    font-family: var(--font-family);
    color: #000;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    background: #fff;
    resize: vertical;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 2px 5px 0 #0000000f, 0 4px 4px 0 #00000003;
    line-height: 1.6;
}

.form-textarea::placeholder {
    color: #000;
    opacity: 0.5;
    font-size: 14px;
}

.form-textarea:focus {
    outline: none;
    opacity: 1;
}

.form-textarea.has-value {
    border-color: #00C389 !important;
    border-width: 2px !important;
}

.form-textarea.has-value:focus {
    border-color: #00C389 !important;
    border-width: 2px !important;
}

.form-textarea.invalid {
    border-color: #FF3B30 !important;
    border-width: 2px !important;
}

.form-textarea.invalid:focus {
    border-color: #FF3B30 !important;
    border-width: 2px !important;
}

/* Service Detail Sub-Step (OLD - keeping for compatibility) */
.service-detail-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm-minus);
    padding: 12px 16px;
}

/* Service Progress Dots in Bottom Bar */
.bottom-progress-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* Push to the right */
    margin-right: 16px; /* Space before next button - optimal for balance */
}

.bottom-progress-dots .progress-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D1D1D6; /* Light grey for inactive */
    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-progress-dots .progress-dot.active {
    background: #000; /* Black for active - bold and clear */
    width: 9px;
    height: 9px;
}

.bottom-progress-dots .progress-dot.completed {
    background: #8E8E93; /* Medium grey for completed */
}

/* Service Progress Dots (iOS-style) */
.service-progress-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px; /* Increased from 20px */
    margin-top: 8px; /* Changed from -8px to positive for proper spacing */
}

.progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D1D1D6; /* iOS gray for inactive */
    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-dot.active {
    background: var(--color-brand-blue);
    width: 10px;
    height: 10px;
}

.progress-dot.completed {
    background: #00C389; /* Green for completed */
}

/* Service Detail Sub-Step (continued) */
.service-detail-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm-minus);
    padding: 12px 16px;
    background: #1a1a1a;
    color: white;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

.service-detail-icon {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.frequency-toggle {
    margin-top: 16px;
    margin-bottom: 16px;
}

.frequency-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

.frequency-buttons {
    display: flex;
    gap: var(--spacing-xs-plus);
}

.frequency-button {
    flex: 1;
    padding: var(--spacing-sm-minus) var(--spacing-sm-plus);
    font-size: 15px;
    font-weight: 500;
    color: #666;
    background: #F2F2F7;
    border: 1px solid #E5E5EA;
    border-radius: 10px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.frequency-button:hover {
    background: white;
    border-color: #00C389;
}

.frequency-button.active {
    background: #1a1a1a;
    color: white;
    border-color: #1a1a1a;
}

/* Revenue Selection (Radio buttons grid) */
/* Revenue Selection (Step 4) - Consistent with Step 3 services */
.revenue-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs-plus);
    margin-top: var(--spacing-sm-plus);
}

.revenue-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--card-padding);
    background: var(--color-background-dark);
    border: 2px solid transparent;
    border-radius: var(--card-radius);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    min-height: var(--card-min-height); /* Same as service-card */
}

.revenue-card .revenue-card-content,
.revenue-card .revenue-value,
.revenue-card .revenue-sublabel,
.revenue-card .revenue-radio,
.revenue-card .revenue-radio-inner {
    user-select: none;
    -webkit-user-select: none;
}

.revenue-card.selected {
    background: white; /* Same as service-card.selected */
    border-color: var(--color-secondary); /* Same as service-card.selected */
}

.revenue-card-content {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
}

.revenue-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-light);
    transition: color 0.2s ease;
    min-width: 50px;
    text-align: left;
}

.revenue-card.selected .revenue-value {
    color: var(--color-text); /* Full black when selected */
}

.revenue-sublabel {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-light); /* Low opacity until selected */
    transition: color 0.2s ease;
}

.revenue-card.selected .revenue-sublabel {
    color: var(--color-text-light); /* Slightly darker when selected for hierarchy */
}

.revenue-radio {
    width: var(--choice-indicator-size); /* Same as service-checkbox */
    height: var(--choice-indicator-size);
    border: 2px solid var(--color-border); /* Same as service-checkbox */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; /* Same as service-card transition */
}

.revenue-card.selected .revenue-radio {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.revenue-radio-inner {
    color: white;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    display: none;
    padding-bottom: 0.5px; /* Fine-tune vertical centering */
}

.revenue-card.selected .revenue-radio-inner {
    display: block;
}

.revenue-radio-inner::before {
    content: '✓';
}

.revenue-option:hover {
    border-color: var(--color-secondary);
    background: white;
}

.revenue-option.selected {
    background: rgba(0, 195, 137, 0.08);
    border-color: var(--color-secondary);
}

/* Old revenue styles removed - using new revenue-card system above */

/* ERP Logo Selection (Step 5) - Consistent with Steps 3 & 4 */
.erp-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs-plus);
    margin-top: var(--spacing-sm-plus);
}

.erp-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 18px 5px 5px;
    background: var(--color-background-dark);
    border: 2px solid transparent;
    border-radius: var(--card-radius);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    min-height: var(--card-min-height); /* Same as other cards */
}

.erp-card .erp-card-left,
.erp-card .erp-logo-img,
.erp-card .erp-label,
.erp-card .erp-radio,
.erp-card .erp-radio-inner {
    user-select: none;
    -webkit-user-select: none;
}

.erp-card.selected {
    background: white;
    border-color: var(--color-secondary);
}

.erp-card-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs-plus);
    flex: 1;
}

.erp-logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 8px; /* Nested radius */
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 4px;
    box-sizing: border-box;
    opacity: 0.82;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.erp-card.selected .erp-logo-img,
.erp-preference-row.selected .erp-logo-img {
    opacity: 1;
    transform: scale(1.01);
}

/* Total: 5px top padding + 50px logo + 5px bottom padding = 60px card height */

.erp-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-light); /* Low opacity until selected */
    transition: color 0.2s ease;
    line-height: 1.3;
}

.erp-card.selected .erp-label {
    color: var(--color-text);
}

.erp-radio {
    width: var(--choice-indicator-size);
    height: var(--choice-indicator-size);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    margin-left: var(--spacing-sm); /* Spacing from label - replaces card horizontal padding on right */
}

.erp-card.selected .erp-radio {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.erp-radio-inner {
    color: white;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    display: none;
    padding-bottom: 0.5px; /* Fine-tune vertical centering */
}

.erp-card.selected .erp-radio-inner {
    display: block;
}

.erp-radio-inner::before {
    content: '✓';
}

/* "eller" divider */
.erp-divider {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-light);
    margin: var(--spacing-sm-plus) 0;
    text-transform: lowercase;
}

/* "None" option card */
.erp-none-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--card-padding);
    background: var(--color-background-dark);
    border: 2px solid transparent;
    border-radius: var(--card-radius);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    min-height: var(--card-min-height);
    margin-top: 2px;
}

.erp-none-card .erp-none-label,
.erp-none-card .erp-radio,
.erp-none-card .erp-radio-inner {
    user-select: none;
    -webkit-user-select: none;
}

.erp-none-card.selected {
    background: white;
    border-color: var(--color-secondary);
}

.erp-none-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-light);
    transition: color 0.2s ease;
    flex: 1;
    line-height: 1.3;
}

.erp-none-card.selected .erp-none-label {
    color: var(--color-text);
}

.erp-none-card .erp-radio {
    width: var(--choice-indicator-size);
    height: var(--choice-indicator-size);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    margin-left: var(--spacing-sm);
}

.erp-none-card.selected .erp-radio {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.erp-none-card .erp-radio-inner {
    color: white;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    display: none;
    padding-bottom: 0.5px; /* Fine-tune vertical centering */
}

.erp-none-card.selected .erp-radio-inner {
    display: block;
}

.erp-none-card .erp-radio-inner::before {
    content: '✓';
}

/* Help with implementation question */
.erp-help-label {
    font-size: 13px;
    color: var(--color-text);
    opacity: 0.65;
    margin-bottom: 16px;
    line-height: 1.5;
    text-align: center;
}

/* Preference system list (simple rows without logos) */
.erp-preference-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs-plus);
}

.erp-preference-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px var(--card-padding) 5px 5px;
    background: var(--color-background-dark);
    border: 2px solid transparent;
    border-radius: var(--card-radius);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    min-height: var(--card-min-height);
}

/* Text-only variant (e.g. "Ca. antal ansatte") keeps card rhythm */
.erp-preference-row-text {
    padding: var(--card-padding);
}

.erp-preference-row .erp-card-left,
.erp-preference-row .erp-logo-img,
.erp-preference-row .erp-preference-label,
.erp-preference-row .erp-radio,
.erp-preference-row .erp-radio-inner {
    user-select: none;
    -webkit-user-select: none;
}

.erp-preference-row.selected {
    background: white;
    border-color: var(--color-secondary);
}

.erp-preference-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-light);
    transition: color 0.2s ease;
    flex: 1;
    line-height: 1.3;
}

.erp-preference-row.selected .erp-preference-label {
    color: var(--color-text);
}

.erp-preference-row .erp-radio {
    width: var(--choice-indicator-size);
    height: var(--choice-indicator-size);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    margin-left: var(--spacing-sm);
}

.erp-preference-row.selected .erp-radio {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.erp-preference-row .erp-radio-inner {
    color: white;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    display: none;
    padding-bottom: 0.5px; /* Fine-tune vertical centering */
}

.erp-preference-row.selected .erp-radio-inner {
    display: block;
}

.erp-preference-row .erp-radio-inner::before {
    content: '✓';
}

/* Desktop hover affordance for selectable cards (non-selected only) */
@media (hover: hover) and (pointer: fine) {
    .service-card:not(.selected):hover,
    .revenue-card:not(.selected):hover,
    .erp-card:not(.selected):hover,
    .erp-none-card:not(.selected):hover,
    .erp-preference-row:not(.selected):hover {
        background: rgba(255, 255, 255, 0.90);
        border-color: rgba(26, 26, 26, 0.10);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }

    .service-card:not(.selected):hover .service-checkbox,
    .revenue-card:not(.selected):hover .revenue-radio,
    .erp-card:not(.selected):hover .erp-radio,
    .erp-none-card:not(.selected):hover .erp-radio,
    .erp-preference-row:not(.selected):hover .erp-radio {
        border-color: rgba(26, 26, 26, 0.20);
    }

    .service-card:not(.selected):hover .service-label,
    .revenue-card:not(.selected):hover .revenue-value,
    .revenue-card:not(.selected):hover .revenue-sublabel,
    .erp-card:not(.selected):hover .erp-label,
    .erp-none-card:not(.selected):hover .erp-none-label,
    .erp-preference-row:not(.selected):hover .erp-preference-label {
        color: var(--color-text);
    }

    .erp-card:not(.selected):hover .erp-logo-img,
    .erp-preference-row:not(.selected):hover .erp-logo-img {
        opacity: 0.94;
    }
}

/* Helper text for preference input */
.erp-preference-helper-text {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    line-height: 1.4;
    text-align: center;
}

.erp-logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xs);
}

/* Two-Question Requirements */
.requirements-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.requirement-item {
    border-bottom: 1px solid #E5E5EA;
    padding-bottom: 20px;
}

.requirement-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.requirement-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
}

.requirement-helper {
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
    line-height: 1.5;
}

.requirement-buttons {
    display: flex;
    gap: var(--spacing-sm-minus);
    margin-top: 8px;
}

.requirement-button {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-sm-plus);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-family);
    color: #666;
    background: #F2F2F7;
    border: 1.5px solid #E5E5EA;
    border-radius: 10px;
    transition: border-color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.requirement-button:hover {
    background: white;
    border-color: #00C389;
    color: #333;
}

.requirement-button.active {
    background: #1a1a1a;
    color: white;
    border-color: #1a1a1a;
    font-weight: 600;
}

/* Contact Fields */
.contact-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: #666;
    text-transform: uppercase;
}

/* Bottom Navigation Bar */
.bottom-nav-bar {
    position: fixed;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    height: 60px;
    background: rgba(249, 249, 249, 0.72); /* More transparent iOS glass */
    backdrop-filter: blur(40px) saturate(180%); /* Stronger blur */
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 0.5px solid rgba(0, 0, 0, 0.04); /* Subtle iOS-style border */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 
                0 2px 8px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.7); /* Brighter top highlight */
    border-radius: 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px 0 5px;
    z-index: 120;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.mobile-step1-stats {
    display: none;
}

/* Subtle next step hint below nav bar (step 1 only) */
/* Validation pulse animation (smooth iOS-style) */
@keyframes validation-pulse {
    0% {
        background-color: rgba(255, 59, 48, 0.1);
        border-color: #FF3B30;
    }
    50% {
        background-color: rgba(255, 59, 48, 0.2);
        border-color: #FF3B30;
    }
    100% {
        background-color: rgba(255, 59, 48, 0.1);
        border-color: #FF3B30;
    }
}

.validation-error {
    animation: validation-pulse 0.6s ease-in-out 3 !important;
    border-color: #FF3B30 !important;
    transition: none !important; /* Disable ALL transitions during validation pulse */
}

.btn-back {
    height: 48px;
    min-width: 100px;
    padding: 0 var(--spacing-sm-plus);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #000;
    background: #F2F2F7;
    border: 0.5px solid rgba(0, 0, 0, 0.09);
    border-radius: 100px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

.btn-back:active {
    background: #E5E5EA;
    border-color: rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
}

@media (max-width: 767px) {
    .btn-back svg {
        display: none;
    }
}

.time-estimate-text {
    font-size: 13px;
    color: #000;
    opacity: 0.7;
    text-align: left;
    white-space: nowrap;
    flex: 1;
    padding: 0 var(--spacing-xs-plus) 0 var(--spacing-sm-plus);
    display: flex;
    align-items: center;
    gap: 6px;
}

.time-estimate-text svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.time-estimate-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.btn-next {
    height: 48px;
    min-width: 120px;
    padding: 0 var(--spacing-md);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
    background: var(--color-brand-blue);
    border: none;
    border-radius: 180px;
    box-shadow: 0 7px 18px rgba(0, 122, 255, 0), 0 2px 5px rgba(0, 122, 255, 0);
    transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), font-size 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    /* Removes iOS's 300ms double-tap-zoom delay so the first tap registers
       cleanly even when the keyboard is dismissing. */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.btn-next.btn-disabled {
    background: #dce8f6;
    opacity: 1;
    color: rgba(26, 95, 61, 0.55);
}

.btn-next:not(.btn-disabled):active {
    transform: scale(0.98);
}

@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
    }

    :root {
        --mobile-step1-logo-strip-height: 74px;
        --mobile-step1-nav-height: 60px;
        --mobile-step1-text-gap: 19px;
    }

    body.mobile-step1-logos {
        --mobile-step1-nav-bottom: calc(var(--mobile-step1-logo-strip-height) + 15px + env(safe-area-inset-bottom));
    }

    /* Step 1 mobile: pin logo strip at screen bottom */
    body.mobile-step1-logos .logo-slider-section {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
        height: calc(var(--mobile-step1-logo-strip-height) + env(safe-area-inset-bottom));
        z-index: 110;
        background: #fff;
    }

    body.mobile-step1-logos .logo-slider-section::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 11px;
        height: 1px;
        background: rgba(17, 24, 39, 0.06);
        pointer-events: none;
    }

    body.mobile-step1-logos .logo-slider-label {
        display: block;
        position: relative;
        z-index: 1;
        width: fit-content;
        margin: 4px auto 6px;
        padding: 0 10px;
        background: #fff;
        font-size: 11px;
        font-weight: 500;
        color: var(--color-text-light);
        text-align: center;
        line-height: 1.2;
    }

    body.mobile-step1-logos .logo-slider-track-wrapper {
        border-top: none;
        border-bottom: none;
        padding: 0 0 calc(8px + env(safe-area-inset-bottom));
        padding-top: 10px;
    }

    /* Lift bottom nav above logos by (logo strip + 30px) */
    body.mobile-step1-logos .bottom-nav-bar {
        bottom: var(--mobile-step1-nav-bottom);
    }

    body.mobile-step1-logos .bottom-nav-bar.mobile-step1-cro .time-estimate-text {
        display: inline-flex;
        opacity: 1;
        font-size: 11px;
        font-weight: 500;
        color: var(--color-text-light);
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-xs);
        gap: 5px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        line-height: 1.1;
        white-space: normal;
        min-width: 0;
        max-width: 140px;
    }

    body.mobile-step1-logos .bottom-nav-bar.mobile-step1-cro .time-estimate-text .mobile-step1-stars {
        color: var(--color-secondary);
        font-size: 10px;
        letter-spacing: 0.5px;
        line-height: 1;
        flex-shrink: 0;
    }

    body.mobile-step1-logos .bottom-nav-bar.mobile-step1-cro .time-estimate-text .mobile-step1-proof-text {
        color: var(--color-text-light);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        min-width: 0;
    }

    body.mobile-step1-logos .mobile-step1-stats {
        position: fixed;
        left: 24px;
        right: 24px;
        bottom: calc(var(--mobile-step1-nav-bottom) + var(--mobile-step1-nav-height) + var(--mobile-step1-text-gap));
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        z-index: 118;
        color: var(--color-text-light);
        pointer-events: none;
    }

    body.mobile-step1-logos .mobile-step1-stat {
        white-space: nowrap;
    }

    body.mobile-step1-logos .mobile-step1-stat-divider {
        width: 1px;
        height: 10px;
        background: rgba(17, 24, 39, 0.16);
        flex-shrink: 0;
    }

    /* Unified trust-text styling for mobile step 1 */
    body.mobile-step1-logos .mobile-step1-proof-text,
    body.mobile-step1-logos .mobile-step1-stat,
    body.mobile-step1-logos .logo-slider-label {
        font-size: 11px;
        font-weight: 500;
        color: var(--color-text-light);
        line-height: 1.2;
        letter-spacing: 0;
        opacity: 1;
    }

    /* Hide sticky nav while keyboard is open AND the form is invalid (user
       is still mid-typing — no actionable button to show, so don't compete
       with the keyboard's predictive bar). The moment the step becomes
       valid (`body.form-step-valid` set by updateButtons), the nav slides
       back in even with the keyboard still up — so the user can tap Videre
       directly without first dismissing the keyboard. */
    body.mobile-keyboard-open:not(.form-step-valid) .bottom-nav-bar {
        transform: translateY(calc(100% + 24px));
        opacity: 0;
        pointer-events: none;
    }

    body.mobile-keyboard-open .mobile-step1-stats {
        opacity: 0;
    }
}

@media (hover: hover) and (pointer: fine) {
    .btn-next:not(.btn-disabled):not(:disabled):hover {
        font-size: 1.06em;
        box-shadow: 0 7px 18px rgba(0, 122, 255, 0.2), 0 2px 5px rgba(0, 122, 255, 0.12);
    }

    .btn-next:not(.btn-disabled):not(:disabled):active {
        transform: scale(0.98);
    }
}

/* Old disabled styles (deprecated) */
.btn-next:disabled {
    opacity: 0.5;
}


/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Success Page */
.success-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: var(--color-background-dark);
}

.success-content {
    max-width: 500px;
    width: 100%;
    text-align: center;
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.success-icon {
    margin-bottom: var(--spacing-lg);
}

.success-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.success-message {
    font-size: 16px;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
}

.btn-home {
    display: inline-block;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    color: white;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

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

.btn-status {
    display: inline-block;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    margin-bottom: 16px;
}

.btn-status:hover {
    background: rgba(0, 122, 255, 0.05);
}

/* ============================================
   DESKTOP LAYOUT (40/60 SPLIT - OPTIMIZED)
   ============================================ */

@media (min-width: 768px) {
    body {
        overflow: hidden;
    }

    /* Desktop header: static block above two columns */
    /* Slim top bar above the main header */
    .header-topbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 32px;
        padding: 0 var(--spacing-sm-plus);
        background: #1a1a1a;
        flex-shrink: 0;
    }

    .header-topbar .header-nav {
        display: flex;
        align-items: center;
        margin-left: 0;
    }

    .header-topbar .header-nav ul {
        gap: 20px;
    }

    .header-topbar .header-nav a {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.65);
    }

    .header-topbar .header-nav a:hover {
        color: rgba(255, 255, 255, 0.9);
        opacity: 1;
    }

    .site-header {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        height: 56px;
        padding: 0 var(--spacing-sm-plus);
        background: white;
        flex-shrink: 0;
    }
    
    .header-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .header-divider {
        width: 1px;
        height: 16px;
        background: rgba(0, 0, 0, 0.15);
        flex-shrink: 0;
    }
    
    .header-nav::before {
        background: rgba(0, 0, 0, 0.12);
    }
    
    .header-nav a {
        color: #1a1a1a;
    }
    
    .header-nav a:hover {
        opacity: 0.6;
    }
    
    .header-social-proof {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--color-text-light);
        opacity: 1;
    }
    
    .header-stars {
        display: flex;
        align-items: center;
        gap: 0;
        color: var(--color-secondary);
    }

    .form-social-proof {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding-bottom: 16px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .form-social-proof.visible {
        opacity: 1;
    }

    .form-social-proof-stars {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .form-social-proof-stars svg {
        width: 13px;
        height: 13px;
    }

    .form-social-proof-text {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
        font-weight: 400;
    }
    
    .header-stars svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }
    
    .header-social-proof-text {
        color: var(--color-text-light);
        font-size: 13px;
        font-weight: 400;
    }

    /* Logo: black on white desktop header */
    .logo svg {
        height: 15px;
        width: auto;
        filter: brightness(0);
    }

    /* Two-column layout below header */
    .funnel-container {
        display: flex;
        flex-direction: row;
        height: calc(100dvh - 88px);
        height: calc(100vh - 88px);
        background: white;
        padding: 0 0 5px 5px;
        gap: 0;
        box-sizing: border-box;
        min-height: 0;
    }

    .left-column {
        width: 50%;
        flex-shrink: 0;
        /* full viewport minus header; padding-bottom is carved out by box-sizing: border-box */
        height: calc(100dvh - 88px);
        height: calc(100vh - 88px);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs-plus);
        padding-bottom: 5px;
        box-sizing: border-box;
        overflow: hidden;
        min-height: 0;
    }

    .hero-section {
        width: 100%;
        flex: 1;
        min-height: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        background-image: url('../images/hero-img-1.png');
        background-size: cover;
        background-position: 20% top;
        padding: 20px;
        border-radius: 10px;
        overflow: hidden;
    }

    /* Overlay full coverage */
    .hero-overlay {
        background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%);
        top: 0;
        border-radius: 0;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex: 1; /* fills available space, leaving room for the badge below */
        min-height: 0;
    }

    .hero-text-content {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-bottom: 40px;
    }
    
    .hero-title {
        font-size: 52px;
        line-height: 1.1;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .hero-subtitle {
        font-size: 20px;
        line-height: 1.4;
    }
    
    /* Show value prop on desktop */
    .hero-value-prop {
        display: block;
        max-width: 560px;
        opacity: 0.98;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.04) 100%);
        border: 0.5px solid rgba(255, 255, 255, 0.28);
        border-radius: 10px;
        overflow: hidden;
        backdrop-filter: blur(10px) saturate(145%);
        -webkit-backdrop-filter: blur(10px) saturate(145%);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 400px;
    }
    
    .form-section {
        flex: 1;
        height: 100%;
        overflow-y: auto;
        padding: 0 var(--spacing-sm-plus) calc(var(--spacing-xl) + var(--spacing-xs));
        margin-top: 0;
        position: relative;
        background: white;
        box-sizing: border-box;
        max-width: 500px;
        margin-right: auto;
        min-height: 0;
    }

    .rk-logo-slider-step1 {
        display: block;
        margin-top: 24px;
    }

    /* Badge at the bottom of the hero — tab shape connecting hero to logo slider */
    .hero-network-badge {
        display: block;
        position: absolute;
        bottom: 0;
        align-self: center;
        background: #fff;
        border-radius: 10px 10px 0 0;
        padding: 5px 14px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.72);
        white-space: nowrap;
        z-index: 2;
    }

    .left-logo-slider {
        display: block;
        flex: 0 0 auto; /* sizes from track content only — no label anymore */
        overflow: hidden;
    }

    .left-logo-slider .rk-logo-slider-track {
        padding: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .left-logo-slider .rk-logo-slider-list li {
        height: 28px;
    }

    .left-logo-slider .rk-logo-slider-list img {
        height: 20px;
        opacity: 0.84;
        filter: grayscale(100%) contrast(1.08);
    }

    .rk-logo-slider-label {
        margin: 0 0 16px 0;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
        color: #000;
        opacity: 0.65;
        text-align: center;
    }

    .rk-stepline {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin: 4px 0 24px 0;
    }

    .rk-stepline-item {
        position: relative;
        text-align: center;
        padding: 0 8px;
    }

    .rk-stepline-item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 10px;
        right: -10px;
        width: 20px;
        height: 0.5px;
        background: rgba(0, 0, 0, 0.16);
    }

    .rk-stepline-num {
        width: 20px;
        height: 20px;
        margin: 0 auto 6px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        color: rgba(0, 0, 0, 0.72);
        border: 0.5px solid rgba(0, 0, 0, 0.18);
        background: rgba(255, 255, 255, 0.75);
    }

    .rk-stepline-title {
        display: block;
        font-size: 12px;
        line-height: 1.25;
        color: rgba(0, 0, 0, 0.72);
        font-weight: 500;
        margin-bottom: 2px;
    }

    .rk-stepline-sub {
        display: block;
        font-size: 11px;
        line-height: 1.25;
        color: rgba(0, 0, 0, 0.5);
        font-weight: 400;
    }

    .rk-logo-slider-track {
        position: relative;
        overflow: hidden;
        width: 100%;
        min-height: 30px;
        padding: 2px 0;
    }

    .rk-logo-slider-inner {
        display: flex;
        align-items: center;
        width: max-content;
        will-change: transform;
        animation: rkLogoLoop 42s linear infinite;
    }

    .rk-logo-slider-track::before,
    .rk-logo-slider-track::after {
        content: '';
        position: absolute;
        top: 0;
        width: 48px;
        height: 100%;
        z-index: 1;
        pointer-events: none;
    }

    .rk-logo-slider-track::before {
        left: 0;
        background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
    }

    .rk-logo-slider-track::after {
        right: 0;
        background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);
    }

    .rk-logo-slider-list {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 30px;
        margin: 0;
        padding: 0;
        flex-shrink: 0;
    }

    .rk-logo-slider-list + .rk-logo-slider-list {
        margin-left: 26px;
    }

    .rk-logo-slider-list li {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        flex-shrink: 0;
    }

    .rk-logo-slider-list img {
        height: 18px;
        width: auto;
        max-width: 120px;
        object-fit: contain;
        opacity: 0.62;
        filter: grayscale(100%);
    }

    .left-logo-slider .rk-logo-slider-list img {
        height: 20px;
        opacity: 0.84;
        filter: grayscale(100%) contrast(1.08);
    }
    
    /* Desktop: transparent wrapper, keep inner step-pill button feel */
    .progress-header {
        border-radius: 0;
        border-bottom: none;
        background: transparent;
        margin: 0;
        padding: 0;
        height: 40px;
        min-height: 40px;
    }
    
    .question-container {
        max-width: none;
        margin: 0;
        overflow-y: visible; /* form-section handles scrolling on desktop */
        flex: 0 0 auto; /* don't stretch — button follows directly below content */
        padding: var(--spacing-md) 0 0;
    }

    .bottom-nav-bar {
        /* Take out of fixed positioning — sits naturally in flow below content */
        position: static;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        height: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        padding: var(--spacing-md) 0 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--spacing-sm);
    }

    /* Icon area is empty on desktop now — hide it */
    .time-estimate-text {
        display: none;
    }

    /* Videre: auto width on desktop, not full-width like mobile */
    .bottom-nav-bar .btn-next {
        flex: 0 0 auto;
        margin-left: auto;
        min-width: 200px;
        padding: 0 40px;
        height: 52px;
        font-size: 15px;
    }


    /* Tilbage: absolute circle on the left, Videre stays centred */
    .bottom-nav-bar {
        position: relative; /* anchor for the absolute back button */
    }

    .bottom-nav-bar .btn-back {
        position: absolute;
        left: 0px;
        width: 44px;
        height: 44px;
        min-width: unset;
        padding: 0;
        border-radius: 50%;
        background: white;
        border: 0.5px solid rgba(0, 0, 0, 0.12);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(0, 0, 0, 0.72);
    }

    .bottom-nav-bar .btn-back svg {
        transition: transform 0.18s ease, color 0.18s ease;
        transform-origin: center;
    }

    .bottom-nav-bar .btn-back:hover {
        color: var(--color-text);
    }

    .bottom-nav-bar .btn-back:hover svg {
        transform: scale(1.15);
    }

    .bottom-nav-bar .btn-back .btn-back-label {
        display: none; /* icon only on desktop */
    }

    .bottom-nav-bar .btn-back:active {
        background: rgba(0, 0, 0, 0.04);
        border-color: rgba(0, 0, 0, 0.18);
    }
    
    /* Step dropdown on desktop: no blur, just positioned dropdown panel */
    .step-dropdown-overlay {
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: visible;
    }
    
    .step-dropdown-overlay.open {
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Desktop close-cursor outside dropdown while open */
    body.dropdown-open {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%231f1f1f' fill-opacity='0.9'/%3E%3Cpath d='M6.5 6.5l7 7m0-7l-7 7' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 10 10, auto;
    }

    /* Keep normal/pointer cursors on actual dropdown interactions */
    body.dropdown-open .progress-header,
    body.dropdown-open .step-dropdown-overlay .step-dropdown-content {
        cursor: default;
    }
    
    .step-dropdown-overlay .step-dropdown-content {
        background: rgba(30, 30, 30, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
        padding: 8px 20px 8px 20px;
        max-height: calc(100vh - 40px - 60px - 16px); /* bottom offset + nav height + breathing room */
        overflow-y: auto;
        flex: none;
        transform: translateY(14px);
    }

    .step-dropdown-overlay.open .step-dropdown-content {
        transform: translateY(0);
    }
    
    /* Multi-column grids for desktop */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .revenue-list,
    .erp-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm-minus);
    }
    
    /* Consistent toggle sizing on desktop */
    .toggle-button {
        height: var(--control-height);
        font-size: 15px;
    }
    
    .toggle-group {
        min-height: var(--control-group-min-height);
    }

}

@keyframes rkLogoLoop {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 13px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .rk-logo-slider-inner {
        animation: none;
    }
}

/* ============================================
   TABLET ADJUSTMENTS
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
    .form-section {
        padding: 0 var(--spacing-lg) calc(var(--spacing-xl) - var(--spacing-xs));
    }
}

/* ============================================
   WIDE DESKTOP FRAMING
   ============================================ */
@keyframes rkAmbientPulseA {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.48;
    }
    50% {
        transform: translate3d(3.4vw, -2.4vh, 0) scale(1.12);
        opacity: 0.66;
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.48;
    }
}

@keyframes rkAmbientPulseB {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.42;
    }
    50% {
        transform: translate3d(-3vw, 2.4vh, 0) scale(1.14);
        opacity: 0.62;
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.42;
    }
}

@media (min-width: 1280px) {
    :root {
        --rk-wide-gutter: clamp(28px, calc((100vw - 1560px) / 2), 999px);
    }

    body {
        position: relative;
        overflow-x: hidden;
        background: #f7f8fb;
    }

    body::before,
    body::after {
        content: none;
    }

    .header-topbar,
    .site-header {
        width: min(calc(100% - 56px), 1560px);
        margin-left: auto;
        margin-right: auto;
    }

    .site-header {
        background: #fff;
        border-left: 1px dashed rgba(17, 24, 39, 0.08);
        border-right: 1px dashed rgba(17, 24, 39, 0.08);
        border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    }

    .header-divider {
        align-self: stretch;
        height: auto;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: var(--spacing-sm-plus);
        margin-right: var(--spacing-sm-plus);
        background: rgba(17, 24, 39, 0.08);
    }

    .header-left {
        height: 100%;
        gap: 0;
    }

    .site-header::after {
        content: '';
        position: absolute;
        left: calc(-1 * var(--rk-wide-gutter));
        bottom: -1px;
        width: calc(100% + (2 * var(--rk-wide-gutter)));
        height: 1px;
        background-image:
            repeating-linear-gradient(
                to right,
                rgba(17, 24, 39, 0.08) 0 5px,
                transparent 5px 9px
            ),
            repeating-linear-gradient(
                to right,
                rgba(17, 24, 39, 0.08) 0 5px,
                transparent 5px 9px
            );
        background-size: var(--rk-wide-gutter) 1px, var(--rk-wide-gutter) 1px;
        background-position: left center, right center;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    /* Full-bleed color extension while keeping centered content width */
    .header-topbar {
        box-shadow: 0 0 0 100vmax #1a1a1a;
        clip-path: inset(0 -100vmax);
        position: relative;
        z-index: 1;
    }

    .site-header {
        box-shadow: 0 0 0 100vmax #fff;
        clip-path: inset(0 -100vmax);
        position: relative;
        z-index: 1;
    }

    .funnel-container {
        width: min(calc(100% - 56px), 1560px);
        margin: 0 auto;
        padding: 0;
        background: transparent;
        border-left: 1px dashed rgba(17, 24, 39, 0.08);
        border-right: 1px dashed rgba(17, 24, 39, 0.08);
        border-bottom: 1px solid rgba(17, 24, 39, 0.08);
        border-radius: 0;
        box-shadow: none;
    }

    .funnel-container::after {
        content: '';
        position: absolute;
        left: calc(-1 * var(--rk-wide-gutter));
        bottom: -1px;
        width: calc(100% + (2 * var(--rk-wide-gutter)));
        height: 1px;
        background-image:
            repeating-linear-gradient(
                to right,
                rgba(17, 24, 39, 0.08) 0 5px,
                transparent 5px 9px
            ),
            repeating-linear-gradient(
                to right,
                rgba(17, 24, 39, 0.08) 0 5px,
                transparent 5px 9px
            );
        background-size: var(--rk-wide-gutter) 1px, var(--rk-wide-gutter) 1px;
        background-position: left center, right center;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .funnel-container {
        box-shadow: 0 0 0 100vmax #fff;
        clip-path: inset(0 -100vmax);
        position: relative;
        z-index: 1;
    }

    .left-column {
        width: 48%;
        background: #fff;
        border-right: 1px solid rgba(17, 24, 39, 0.08);
    }

    .hero-section {
        border-radius: 0;
    }

    .form-section {
        width: min(100%, 620px);
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
        border-left: 1px solid rgba(17, 24, 39, 0.08);
        border-right: 1px solid rgba(17, 24, 39, 0.08);
        background: #fff;
        padding-top: var(--spacing-sm);
        overflow-x: hidden;
    }

    .form-section .service-card,
    .form-section .revenue-card,
    .form-section .erp-card,
    .form-section .erp-none-card,
    .form-section .erp-preference-row,
    .form-section .requirement-card {
        background: #eef2f7;
    }

    .form-section .service-card.selected,
    .form-section .revenue-card.selected,
    .form-section .erp-card.selected,
    .form-section .erp-none-card.selected,
    .form-section .erp-preference-row.selected,
    .form-section .requirement-card.selected {
        background: #fff;
    }

    .form-section .toggle-group {
        background: #e9edf3;
        border-color: rgba(17, 24, 39, 0.06);
    }

}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none !important;
    }

    .logo-slider-track {
        animation: none !important;
    }
}

/* ============================================
   SEARCH LOADING ANIMATION (AI Shimmer Effect)
   ============================================ */

@keyframes shimmer {
    0% {
        background-position: 200% center;
    }
    100% {
        background-position: -200% center;
    }
}

.search-loading {
    background: linear-gradient(
        90deg,
        rgba(102, 102, 102, 0.95) 0%,
        rgba(102, 102, 102, 0.95) 20%,
        rgba(102, 102, 102, 0.3) 50%,
        rgba(102, 102, 102, 0.95) 80%,
        rgba(102, 102, 102, 0.95) 100%
    );
    background-size: 200% 100%;
    background-position: 160% center;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 1.15s linear infinite;
    animation-delay: -0.2s;
    font-weight: 500;
}

/* ============================================
   AUDITOR NOTICE ANIMATION
   ============================================ */

.textarea-with-buttons-below {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    touch-action: manipulation;
}

.auditor-notice {
    display: none;
    margin-top: 1.5rem;
    padding: var(--spacing-sm) var(--spacing-sm-plus);
    background: rgba(0, 122, 255, 0.08);
    border: 1px solid rgba(0, 122, 255, 0.32);
    border-radius: var(--radius-lg);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auditor-notice.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.auditor-notice-overlay {
    display: none;
    margin-top: var(--spacing-sm);
    padding: 14px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auditor-notice-overlay.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.auditor-notice-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-brand-blue);
    margin-bottom: 6px;
}

.auditor-notice-text {
    font-size: 12px;
    color: var(--color-text-light);
    line-height: 1.6;
}

.auditor-notice-overlay .auditor-notice-title {
    color: white;
}

.auditor-notice-overlay .auditor-notice-text {
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .navigation-buttons,
    .progress-header {
        display: none;
    }
}

/* ==========================================
   CHECKBOX LIST (for Bogholderi service)
   ========================================== */

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs-plus);
    margin-top: var(--spacing-sm-plus);
}

/* Reusing existing .service-card and .erp-other-input-container styling - no custom CSS needed! */

/* Counter pill for input fields (like Step 6 textarea) */
.input-counter-pill {
    position: absolute;
    bottom: 15px; /* Adjusted for input height (60px vs 120px textarea) */
    left: 12px;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-family);
    color: #8E8E93;
    background: #F2F2F7;
    padding: var(--spacing-2xs) var(--spacing-xs-plus);
    border-radius: 20px;
    pointer-events: none;
    transition: border-color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 0;
    z-index: 2;
}

.input-wrapper:focus-within .input-counter-pill,
.input-counter-pill.visible {
    opacity: 1;
}

.input-counter-pill.met {
    color: #00C389;
    background: rgba(0, 195, 137, 0.10);
}



/* === PARTNER BANNER ADD-ON === */
/* Top-of-page strip shown when ?partner=<known> is set. Injected via JS in
   funnel-core.js renderPartnerBanner(). Add a new .partner-banner-<name> rule
   to extend; remove the rule + the entry in renderPartnerBanner() to retire. */
.partner-banner {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: #ffffff;
    background: #1a1a1a;
    letter-spacing: 0.2px;
    z-index: 5;
}

.partner-banner-lunar {
    background: linear-gradient(90deg, #1a1a1a 0%, #2b2b3a 100%);
}

@media (min-width: 768px) {
    .partner-banner {
        padding: 12px 24px;
        font-size: 14px;
    }
}
/* === /PARTNER BANNER ADD-ON === */

/* === ADD-ON INTERSTITIAL === */
/* Full-viewport overlay rendered after lead save (Variant B today: Lunar opt-in).
   Lead is already persisted before this appears, so a render failure here can never
   block conversion. Removing this surface = delete this section + unset the
   post_submit_interstitial placement in configs/addons-v1.js. */
.addon-interstitial {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 30, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.22s ease-out;
    overflow-y: auto;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom)) 16px;
    box-sizing: border-box;
}

.addon-interstitial.open {
    opacity: 1;
}

body.addon-interstitial-open {
    overflow: hidden;
}

.addon-interstitial-scroll {
    width: 100%;
    max-width: 480px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.addon-interstitial-card {
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 24px 24px 24px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
    box-sizing: border-box;
    transform: translateY(8px);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s,
                opacity 0.28s ease-out 0.05s;
}

.addon-interstitial.open .addon-interstitial-card {
    transform: translateY(0);
    opacity: 1;
}

.addon-interstitial-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #6b6b78;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.addon-interstitial-close:hover,
.addon-interstitial-close:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: #1a1a1a;
    outline: none;
}

.addon-interstitial-eyebrow {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #6b6b78;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.addon-interstitial-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 12px 0;
    line-height: 1.25;
}

.addon-interstitial-body {
    font-size: 14px;
    font-weight: 400;
    color: #4a4a55;
    margin: 0 0 16px 0;
    line-height: 1.55;
}

.addon-interstitial-fineprint {
    font-size: 11px;
    font-weight: 400;
    color: #6b6b78;
    margin: 0 0 20px 0;
    line-height: 1.55;
    padding: 12px;
    background: #f7f7fb;
    border-radius: 10px;
}

.addon-interstitial-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.addon-interstitial-accept,
.addon-interstitial-skip {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

.addon-interstitial-accept {
    background: #1a5f3d;
    color: #ffffff;
}

.addon-interstitial-accept:hover,
.addon-interstitial-accept:focus-visible {
    background: #15522f;
    outline: none;
    transform: translateY(-1px);
}

.addon-interstitial-skip {
    background: transparent;
    color: #1a1a1a;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 10px 18px;
    font-weight: 500;
}

.addon-interstitial-skip:hover,
.addon-interstitial-skip:focus-visible {
    color: #1a5f3d;
    outline: none;
}

@media (min-width: 600px) {
    .addon-interstitial-title { font-size: 24px; }
    .addon-interstitial-body  { font-size: 15px; }
    .addon-interstitial-card  { padding: 32px 32px 28px 32px; }
}
/* === /ADD-ON INTERSTITIAL === */

/* === ADD-ON PRE-COMPLETION (inline_pre_completion placement) === */
/* Native-feeling pre-completion screen for Variant C (Lunar offer).
   Rendered into #question-container after the lead is saved but before the
   completion screen. Visual goal: read as a clearly distinct partner offer
   (Lunar logo, framed card, Lunar-black CTA) without breaking the funnel's
   chrome — so the user understands this is an add-on, not a step.
   Copy lives in configs/addons-v1.js → lunarOptIn.copy.preCompletion. */
.addon-pre-completion {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding-top: 0;
}

/* The card visually frames the offer so it reads as an enclosed partner pitch
   rather than a continuation of the step flow. 1px subtle border + soft shadow,
   plus a black accent bar at the top to signal Lunar territory. */
.addon-pc-card {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e6e6ee;
    /* Use the funnel-wide --card-radius token (10px) so the right card
       matches the left hero's rounding and every other card in the
       funnel (service-card, revenue-card, erp-card, etc.). Earlier
       18px was an unintended outlier — pulled the card into "premium
       modal" register while the hero stayed at 10px, breaking column
       symmetry. 2026-05-23 evening polish. */
    border-radius: var(--card-radius);
    /* Top padding zeroed because the banner sits flush with the top edge.
       Body padding restored on first real child via the banner's own bottom
       margin below. */
    padding: 0 22px 22px 22px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* === CARD BANNER (post-2026-05-23 restructure) === */
/* Edge-to-edge black header band at the top of the card. Carries the Lunar
   mark (white) on the left + the offer label on the right. Replaces both
   the legacy 3px ::before accent line AND the in-body logo+eyebrow row —
   one visual anchor for "this is the Lunar offer", echoes the left hero's
   black treatment. Negative margin bleeds the banner to card edges past
   the card's horizontal padding. */
.addon-pc-card-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px;
    /* Lunar's digital "pure black" (#131414) per the B2B guide palette. */
    background: #131414;
    color: #FDFDFD;
    /* Bleed past the card's horizontal padding to touch the rounded edges. */
    margin: 0 -22px 20px -22px;
    /* No top margin because card has padding-top: 0 now — the banner sits flush. */
}

.addon-pc-card-banner-logo {
    /* Stacked B2B lockup — 36px tall ≈ 62px wide is the smallest size that
       keeps the LUNAR wordmark at the guide's 60px digital minimum. */
    height: 36px;
    width: auto;
    max-height: 36px;
    max-width: 70px;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

/* All-caps eyebrow treatment — matches the eyebrow style used elsewhere in
   the funnel (left hero "ERHVERVSBANK", former "VALGFRIT TILBUD" eyebrow
   on the card). Joachim's call (2026-05-23) — natural-case felt too soft
   on the dark banner. */
.addon-pc-card-banner-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    flex-shrink: 0;
    text-align: right;
    line-height: 1.3;
}
/* === /CARD BANNER === */

.addon-pc-context {
    font-size: 13px;
    font-weight: 500;
    color: #6b6b78;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.addon-pc-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    /* Owns its bottom gap only — every sibling below has mt: 0. Vertical
       rhythm pass 2026-05-23 evening: normalized to 16px (small gaps)
       and 20px (section breaks). See block-comments on .addon-pc-next
       and .addon-pc-fork-reassurance for the section-break rationale. */
    margin: 0 0 16px 0;
    line-height: 1.25;
    letter-spacing: -0.2px;
    /* Rebalance wrap so multi-line headlines settle into even line lengths
       instead of "long-long-short" or trailing dangling-comma shapes.
       Standard CSS Text Module Level 4 — widely supported by 2026.
       Browsers without support fall back to default greedy wrap (current
       behavior), so this is a pure progressive enhancement. */
    text-wrap: balance;
}

.addon-pc-body {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-light);
    margin: 0 0 20px 0;
    line-height: 1.55;
}

.addon-pc-section-label {
    font-size: 10px;
    font-weight: 600;
    color: #6b6b78;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.addon-pc-section-label--spaced {
    margin-top: 20px;
}

/* Benefits — checkmark bullets. Specifics build trust faster than adjectives. */
.addon-pc-benefits {
    list-style: none;
    margin: 0 0 18px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.addon-pc-benefit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
}

.addon-pc-benefit-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e8f5ee;
    color: #1a5f3d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.addon-pc-benefit-text {
    flex: 1;
}

/* Single-line trust strip — factual, no fluff. */
/* Trust line — Lunar's mandated identity sentence per
   LUNAR-LEGAL-GUIDANCE-2026-05-23.md Section A.3. Must carry: Lunar Bank
   A/S, CVR 39697696, dansk erhvervsbank, Finanstilsynet, erhvervskonto-
   løsninger, integration with bookkeeping systems.
   Restored as a discrete card chip (post-2026-05-23 scanability pass) —
   light grey background + rounded corners give the eye a defined "trust
   block" to land on, more scannable than the italic prose that briefly
   replaced it. Bank emoji returns as a quiet leading icon. */
.addon-pc-trust {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* Owns its bottom gap only (vertical rhythm pass 2026-05-23 evening). */
    margin: 0 0 16px 0;
    padding: 12px 14px;
    background: #f7f7fb;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 400;
    color: #4a4a55;
    line-height: 1.5;
}

.addon-pc-trust-icon {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    flex-shrink: 0;
}

/* "What happens next" — numbered steps. Reuses the visual language of the
   completion-screen step list so it reads as familiar, but with black numbers
   so the user clocks it as part of this Lunar offer card. */
.addon-pc-next {
    list-style: none;
    /* Owns its bottom gap (20px — the bigger value marks the section break
       between "context" (title + trust + preview) and "decision moment"
       (reassurance + fork). Vertical rhythm pass 2026-05-23 evening. */
    margin: 0 0 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.addon-pc-next-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    /* Medium weight (500) — preview bullets are scan-bait at decision
       time. Establishes a clean three-tier hierarchy with title (700)
       above and trust chip / fineprint (400) below. Polished
       2026-05-23 evening. */
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.5;
}

/* Green Lunar checkmark — semantic "guarantee / what's true", not "step N".
   currentColor lets a future variant retint without touching the SVG. */
.addon-pc-next-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #00CB39;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.addon-pc-next-text {
    flex: 1;
}

.addon-pc-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

/* Primary CTA — Lunar black so it visually signals "this is Lunar's button",
   not a Revisorkort-green continuation. */
.addon-pc-accept {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    text-align: center;
    background: #0a0a0a;
    color: #ffffff;
    transition: background 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

.addon-pc-accept:hover,
.addon-pc-accept:focus-visible {
    background: #1f1f1f;
    transform: translateY(-1px);
    outline: none;
}

.addon-pc-accept-microcopy {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #6b6b78;
    margin: 4px 0 6px 0;
}

/* Skip — text link in brand blue so the user reads two clearly distinct choices
   (Lunar-black "Ja tak" vs blue "Nej tak"). Blue also ties the card visually
   to Revisorkort's existing blue accents — subtle signal that the user is
   still in their RK flow, with Lunar as an optional add-on. */
.addon-pc-skip {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 100px;
    border: none;
    background: transparent;
    color: var(--color-brand-blue, #007AFF);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    text-align: center;
    transition: color 0.15s ease;
}

.addon-pc-skip:hover,
.addon-pc-skip:focus-visible {
    color: var(--color-brand-blue-hover, #0066DD);
    outline: none;
}

.addon-pc-fineprint {
    font-size: 11px;
    font-weight: 400;
    color: #6b6b78;
    line-height: 1.5;
    /* Last element in the card — bottom gap handled by card padding-bottom
       (22px mobile, 24px desktop). Vertical rhythm pass 2026-05-23 evening. */
    margin: 0;
    text-align: left;
}

/* === FORK CTA PATTERN (Variant C, 2026-05-23) === */
/* Two side-by-side equal-weight CTAs with their outcomes listed directly
   below each. Replaces the legacy "primary CTA + skip link" stacked layout
   when acceptOutcomes/skipOutcomes are defined in the addon config.
   Equal sizing + same border-radius on both squares = no dark-pattern nudge
   toward Yes; the consequences under each button do the persuasion. */
.addon-pc-fork {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    /* Owns its bottom gap (18px — body→legal coda). Top is 0 because the
       reassurance above owns its own 16px bottom. Vertical rhythm pass
       2026-05-23 evening. */
    margin: 0 0 18px 0;
}

.addon-pc-fork-choice {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Override the legacy .addon-pc-accept / .addon-pc-skip pill styles when
   they appear inside the fork — they become squares, not full-width pills.
   Equal heights via min-height so the two cards align even when their
   labels differ in length. */
.addon-pc-fork .addon-pc-fork-btn {
    width: 100%;
    min-height: 72px;
    box-sizing: border-box;
    padding: 18px 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

.addon-pc-fork .addon-pc-accept {
    background: #0a0a0a;
    color: #ffffff;
}
.addon-pc-fork .addon-pc-accept:hover,
.addon-pc-fork .addon-pc-accept:focus-visible {
    background: #1f1f1f;
    transform: translateY(-1px);
    outline: none;
}

.addon-pc-fork .addon-pc-skip {
    background: #ffffff;
    color: #1a1a1a;
    border: 1.5px solid #e6e6ee;
}
.addon-pc-fork .addon-pc-skip:hover,
.addon-pc-fork .addon-pc-skip:focus-visible {
    border-color: #0a0a0a;
    background: #fafafa;
    transform: translateY(-1px);
    outline: none;
}

/* Outcome list under each CTA — what literally happens if the user clicks
   that button. Lunar's mandated meanings (data sharing + contact channels)
   live under the Yes button; the No button shows the symmetric inverse.
   Green checkmarks (Lunar accent #00CB39) rather than dot bullets — borrowed
   from the earlier visual pass for better scanability. Reads "concrete fact
   you can rely on" rather than "another bullet to parse". */
.addon-pc-fork-outcomes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.addon-pc-fork-outcomes li {
    position: relative;
    padding-left: 20px;
    font-size: 12.5px;
    font-weight: 400;
    color: #4a4a55;
    line-height: 1.5;
}

.addon-pc-fork-outcomes li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #00CB39;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
}

/* "Safe either way" reassurance — shown above the fork CTAs (post-2026-05-23
   evening pass — moved up from below so the message lands at the moment of
   hesitation, not after the click). Carries Lunar's mandated meaning 3
   (Revisorkort search unchanged regardless of choice).

   Visual register: premium editorial pull-quote, not notification-toast.
   Off-white substrate gently elevates from the card's white surface.
   Sharp 4px Lunar-green accent rule on the left edge (via inset shadow,
   no extra DOM) carries the "safety / Lunar" signal without needing a
   filled circle + checkmark stack. Hairline outer shadow defines the
   block without the loud-border feel.

   Earlier pass used pale mint bg + green border + filled green circle —
   three signals all saying the same thing, ending up in Bootstrap-toast
   register. Stripped to type-led with one accent rule. */
.addon-pc-fork-reassurance {
    /* Tighter bottom (16px) — reassurance + fork form the "decision unit"
       so they should feel paired rather than separated. Vertical rhythm
       pass 2026-05-23 evening. */
    margin: 0 0 16px 0;
    padding: 14px 18px 14px 20px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: #1f1f24;
    line-height: 1.55;
    background: #fafbfc;
    border-radius: 12px;
    /* Inset shadows: 4px Lunar green left accent rule + hairline outer
       definition. No 1px border — borders read heavier than a soft
       shadow at the same visual weight. */
    box-shadow: inset 4px 0 0 #00CB39,
                inset 0 0 0 1px rgba(15, 20, 30, 0.04);
    /* Balance the 2-line wrap so neither line ends up significantly
       shorter than the other. */
    text-wrap: balance;
}

/* Mobile: stack the two CTAs vertically below ~560px. Below that width,
   side-by-side squares with multi-line outcome lists get too cramped to
   read comfortably. */
@media (max-width: 560px) {
    .addon-pc-fork {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .addon-pc-fork .addon-pc-fork-btn {
        min-height: 60px;
    }
}
/* === /FORK CTA PATTERN === */

@media (min-width: 600px) {
    /* Wider card padding on desktop. Top padding stays 0 — banner sits flush. */
    .addon-pc-card           { padding: 0 26px 24px 26px; }
    /* padding-top bumped to 20px (was 16px) so the card-banner logo aligns
       horizontally with the left hero logo — see .addon-pc-hero-top comment.
       2026-05-23 evening polish. */
    .addon-pc-card-banner    { padding: 20px 26px; margin: 0 -26px 22px -26px; }
    .addon-pc-card-banner-logo { height: 36px; max-height: 36px; max-width: 70px; }
    .addon-pc-title          { font-size: 24px; }
    .addon-pc-body           { font-size: 15px; }
    .addon-pc-benefit        { font-size: 14.5px; }
}

/* When Variant C is active, hide the progress header above the card so the
   card top-aligns with the left column's hero. The .progress-bar / .progress-
   header carried "TRIN 1/9 VALGFRIT" + step-dropdown which now duplicates
   what the card's own banner says. One Lunar offer signal, not three. */
body.addon-pre-completion-active .progress-header,
body.addon-pre-completion-active .progress-bar {
    display: none !important;
}

/* Zero the desktop .question-container top padding when Variant C is active
   so the card top-edge sits flush with the left column's hero top-edge.
   Scoped to desktop only — on mobile the hero and card stack vertically and
   the card needs its default top padding for breathing room against the
   bottom of the hero video. Without this scope, mobile gets a too-tight
   black-banner-against-black-video seam that looks accidental. */
@media (min-width: 768px) {
    body.addon-pre-completion-active .question-container {
        padding-top: 0 !important;
    }
}

/* Trim the .question-container bottom padding when Variant C is active.
   The base rule reserves ~124px of bottom padding to clear the fixed
   bottom-nav-bar (back/next buttons), but Variant C hides that nav via
   JS — so all 124px would otherwise sit as empty space below the card.
   Bring it down to a comfortable 24px + iOS safe-area inset so the card
   sits close to the screen edge without crowding it. Applies on both
   mobile (visible win — the dead space was obvious) and desktop (small
   internal win — right column has less idle scroll past the card). */
body.addon-pre-completion-active .question-container {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* Body class is set while Variant C is rendered. Reserved for any future
   global tinting (background, brand-color overrides). Today the styling is
   scoped to .addon-pc-* selectors above so cleanup risk is zero. */
body.addon-pre-completion-active {
    /* placeholder — intentionally empty */
}
/* === /ADD-ON PRE-COMPLETION === */

/* === ADD-ON SCROLL INDICATOR === */
/* Floating chip with a down-arrow, ChatGPT-pattern. Appears when the primary CTA
   is below the fold; hides when the user scrolls it into view. Click jumps the
   user directly to the CTA. Scoped to Variant C — appended/removed by funnel-core.js.
   Horizontal `left` is set by JS on init + window resize so the chip follows the
   form column's actual center across breakpoints (form column has max-width 500px
   so its visual center isn't fixed at 50% / 75% / etc. of viewport). The CSS
   `left: 50%` here is just a pre-paint fallback before JS runs. */
.addon-pc-scroll-indicator {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e6e6ee;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, background 0.15s ease;
    z-index: 50;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

.addon-pc-scroll-indicator.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.addon-pc-scroll-indicator:hover,
.addon-pc-scroll-indicator:focus-visible {
    background: #f7f7fb;
    outline: none;
}
/* === /ADD-ON SCROLL INDICATOR === */

/* === ADD-ON HERO OVERRIDE (Lunar takeover, Variant C only) === */
/* When enabled, the existing .hero-section's contents are swapped for a Lunar-
   branded block (black bg, white type, green accent, brand video). The .hero-
   section element itself is preserved — keeps its border-radius, overflow:hidden,
   flex sizing, and the rounded scaffold the rest of the funnel uses. DOM is
   restored on Yes/Skip resolution by the renderer's cleanup. Hero overlay (the
   gradient that originally darkened the background image) is also nuked since
   we have our own black background now. */
/* Sharp Grotesk 19 — Lunar's brand face, supplied by Lunar 2026-06-11 in their
   Business toolkit for this co-branded promo. Licensed via Lunar: serve it only
   on these co-branded surfaces; do NOT reference it elsewhere on the site.
   Weight mapping per Lunar's spec: Book 400 / Medium 500 / Semibold 600 /
   Bold 700. Archivo (Google Fonts link in index.html) stays in the stacks —
   it is Lunar's own documented fallback face in the B2B brand guide. */
@font-face {
    font-family: 'Sharp Grotesk 19';
    src: url('../fonts/SharpGroteskBook19.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sharp Grotesk 19';
    src: url('../fonts/SharpGroteskMedium19.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sharp Grotesk 19';
    src: url('../fonts/SharpGroteskSmBold19.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sharp Grotesk 19';
    src: url('../fonts/SharpGroteskBold19.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.hero-section.addon-pc-hero-active {
    /* DELIBERATE palette deviation (Joachim 2026-06-12): the hero stays TRUE
       #000000 — the brand video's baked-in background is pure black, and on
       the guide's digital black (#131414) the clip renders as a visible
       rectangle. Black-on-black keeps it seamless. Text white stays #FDFDFD
       per the guide. If Lunar re-exports the clip on #131414, flip the four
       hero/video backgrounds back (this rule, .addon-pc-hero, the video wrap
       + video element, and the configs' heroOverride.backgroundColor). The
       card banner is video-free and keeps the brand #131414. */
    background: #000000 !important;
    background-image: none !important;
    color: #FDFDFD;
    /* Force scaffolded shape on mobile too — original mobile styling can collapse
       the hero to ~82px tall on step 2+, which doesn't fit the Lunar treatment. */
}

.hero-section.addon-pc-hero-active .hero-overlay {
    display: none;
}

/* The Lunar wrapper fills the entire .hero-section. */
.addon-pc-hero {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #000000;
    color: #FDFDFD;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: inherit; /* match the parent's border-radius (10px on desktop) */
}

.addon-pc-hero-top {
    /* Top padding aligned to the card banner's top padding (20px desktop) so
       the left hero logo and the right card-banner logo sit on the same
       horizontal line. Two-logo placement is intentional (takeover identity
       + offer-card identity) — visual alignment is what keeps it from
       reading as accidental repetition.
       2026-05-23 evening polish. */
    padding: 20px 28px 14px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

/* Tight logo constraints — beats any inherited img sizing rules and uses
   max-* as belt+suspenders so the PNG can never expand to fill the column.
   `align-self: flex-start` pins the image to the left edge — without it the
   flex column's default `align-items: stretch` + `object-fit: contain`
   combo lets the IMG render centered when it's narrower than the column. */
.hero-section.addon-pc-hero-active .addon-pc-hero-logo {
    display: block;
    /* Lunar's B2B master file (2026-06-11) is a STACKED lockup — italic LUNAR
       over a "Business" label, aspect ≈ 1.71:1. Brand-guide minimum: the
       LUNAR wordmark must never render below 60px wide → lockup height must
       stay ≥ 36px. 48px ≈ 82px wide ≈ 15–20% of the hero column width, the
       guide's reference scale. Clear space ≥ the "Business" label height
       (≈ 9px at this size) — the 10px margin + the column gap provide it. */
    height: 48px;
    width: auto;
    max-height: 48px;
    max-width: 88px;
    margin: 0 0 10px 0;
    object-fit: contain;
    align-self: flex-start;
}

/* Hero typography — real Sharp Grotesk 19 (Lunar's toolkit, 2026-06-11),
   weights per their brand-guide Usage Map: PRIMARY HEADLINES are SEMIBOLD,
   sentence case, left-aligned ("Bold" is reserved for ≤8-character uppercase
   hero hooks like "0 KR" — our multi-word headline is a primary headline,
   not a hook). Medium = UI/body (the USP rows), Book = longer text.
   Guide hard rules honored here: no letterspacing on headlines ("the
   typeface is designed for tight, confident setting"), headline line-height
   within 94–107% of size, green emphasis = one phrase, inherits weight. */
.addon-pc-hero-eyebrow {
    font-family: 'Sharp Grotesk 19', 'Archivo', var(--font-family);
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.addon-pc-hero-headline {
    font-family: 'Sharp Grotesk 19', 'Archivo', var(--font-family);
    font-size: 40px;
    font-weight: 600;
    color: #FDFDFD;
    margin: 0;
    line-height: 1.05;
    letter-spacing: normal;
}

.addon-pc-hero-accent {
    font-weight: inherit;
    /* color set inline by the renderer so the registry's accentColor is the
       single source of truth for the brand green */
}

.addon-pc-hero-subtitle {
    font-family: 'Sharp Grotesk 19', 'Archivo', var(--font-family);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.78);
    margin: 6px 0 0 0;
    line-height: 1.5;
    max-width: 380px;
}

/* USP rows — small icon + Lunar's verbatim taglines. Matches the visual
   pattern from lunar.app/dk/erhverv (logo → headline → 3 icon-prefixed USPs).
   Icons are sourced as black-on-transparent SVGs and CSS-tinted to white via
   `filter` so they match the dark hero. Tweak max-width / font-size if Lunar
   later supplies their own copy with longer phrasing. */
.addon-pc-hero-usps {
    list-style: none;
    margin: 18px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
}

.addon-pc-hero-usp {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Sharp Grotesk Medium (500) — Lunar's "Medium = UI og brødtekst" weight. */
    font-family: 'Sharp Grotesk 19', 'Archivo', var(--font-family);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
}

.addon-pc-hero-usp-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
    /* Source SVGs are black-on-transparent (Lunar's own assets). The two-step
       filter inverts them to clean white — same trick used elsewhere when
       brand assets need to flip for a dark background. */
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.addon-pc-hero-usp-text {
    flex: 1;
}

.addon-pc-hero-video-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: #000000;
    width: 100%;
    /* Lunar feedback 2026-06-10: animation a bit smaller with wider spacing.
       Flex-center the reduced-width video in the leftover hero space; the
       vertical padding guarantees the animation never touches the hero's
       top/bottom edge (they flagged bottom cut-off on mobile specifically). */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0 18px 0;
    box-sizing: border-box;
}

.addon-pc-hero-video {
    /* 75% width (was 100% full-bleed) + object-fit: contain (was cover), per
       Lunar's "smaller animation, more wide spacing" note. contain also ends
       the mobile bottom-crop: cover scaled the 960×540 clip to fill and cut
       its lower part off. Letterboxing is invisible — black clip, black hero. */
    width: 75%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000000;
}

/* Mobile: original hero compresses to ~82px on step 2+ via
   `body:not(.mobile-step1-hero-expanded) .hero-section { min-height: 82px }`.
   Force enough height for Lunar logo + headline + subtitle + a video glimpse. */
@media (max-width: 767px) {
    .hero-section.addon-pc-hero-active,
    body:not(.mobile-step1-hero-expanded) .hero-section.addon-pc-hero-active {
        min-height: 360px !important;
        padding: 0 !important;
    }
    .addon-pc-hero-top {
        /* Top padding clears the absolutely-positioned .site-header
           (~56px tall on mobile: 20px + 16px logo + 20px) plus breathing room. */
        padding: 72px 22px 12px 22px;
        gap: 10px;
    }
    .hero-section.addon-pc-hero-active .addon-pc-hero-logo {
        /* Stacked B2B lockup: 40px tall ≈ 68px wide — keeps the LUNAR
           wordmark above the guide's 60px digital minimum on mobile. */
        height: 40px;
        max-height: 40px;
        max-width: 74px;
    }
    /* line-height 1.05 stays inside the guide's 94–107% headline window
       (1.1 was just outside); no letterspacing per the guide. */
    .addon-pc-hero-headline { font-size: 30px; line-height: 1.05; letter-spacing: normal; }
    .addon-pc-hero-subtitle { font-size: 13px; }
    /* Guarantee the animation real visible room on mobile — flex:1 +
       min-height:0 otherwise lets the text block squeeze it to a sliver.
       The hero uses min-height (not a fixed height), so this stretches the
       hero instead of cropping the video.

       Spacing symmetry (Joachim 2026-06-11, for Lunar's pixel-perfect eye):
       visible gap ABOVE the clip = hero-top padding-bottom (12px) + wrap
       padding-top (8px) = 20px — no letterbox bars in between on mobile,
       because at 320–430px viewports the 16:9 clip in a 75%-wide box is
       always height-limited and fills the wrap's content height exactly.

       BELOW the clip the reference edge is NOT the hero's own bottom:
       on mobile `.form-section` overlaps the hero by 20px (base rule
       `margin-top: -20px; z-index: 10` — the sheet-over-hero design;
       desktop resets it to 0). Padding-bottom inside the wrap disappeared
       under that overlap. So the clearance lives here as MARGIN (flex-item
       margins can't collapse) sized 40px = 20px eaten by the overlap
       + 20px visible gap matching the top. min-height 134 = 8px top pad
       + 126px content keeps the clip's rendered size unchanged. If
       hero-top's mobile padding, the wrap's top padding, or .form-section's
       mobile margin-top change, re-balance all of these together. */
    .addon-pc-hero-video-wrap {
        min-height: 134px;
        padding: 8px 0 0 0;
        margin-bottom: 40px;
    }
}

/* Tablet/desktop fine-tune. */
@media (min-width: 1024px) {
    .addon-pc-hero-headline { font-size: 48px; }
}
/* === /ADD-ON HERO OVERRIDE === */

/* === ADD-ON MOBILE TWEAKS (Variant C) === */
/* On mobile, hide the small Lunar logo image inside the takeover hero so it
   doesn't overlap the absolutely-positioned site-header (which has
   `background: transparent` on mobile and visually overlays the hero). The
   Revisorkort header stays visible so the user always knows they're still
   in the RK flow; the eyebrow + bold headline + green accent + brand video
   carry the Lunar identity at small sizes.
   Specificity matches the logo-show rule above (3 classes) so source order
   wins and source order is in our favor. */
@media (max-width: 767px) {
    .hero-section.addon-pc-hero-active .addon-pc-hero-logo {
        display: none;
    }
}
/* === /ADD-ON MOBILE TWEAKS === */

/* === ADD-ON ENTRY ANIMATIONS (Variant C) === */
/* Match the funnel's existing step-entry feel — same fadeInUp / fadeInOnly
   keyframes, same easing, staggered delays. Keeps Variant C feeling like a
   continuation of the funnel UX rather than a separate landing page.
   Two cascades run in parallel:
     - LEFT hero takeover (logo → eyebrow → headline → subtitle → video)
     - RIGHT pre-completion card (header → context → title → body → trust
       → next-steps → CTAs → fineprint)
   Both use the existing easing curve so they read as native to the funnel. */

/* --- LEFT hero takeover cascade --- */
.hero-section.addon-pc-hero-active .addon-pc-hero-logo {
    opacity: 0;
    animation: fadeInOnly 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.05s;
}
.hero-section.addon-pc-hero-active .addon-pc-hero-eyebrow {
    opacity: 0;
    animation: fadeInOnly 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.1s;
}
.hero-section.addon-pc-hero-active .addon-pc-hero-headline {
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.15s;
}
.hero-section.addon-pc-hero-active .addon-pc-hero-subtitle {
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.25s;
}
.hero-section.addon-pc-hero-active .addon-pc-hero-video-wrap {
    opacity: 0;
    animation: fadeInOnly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.35s;
}

/* --- RIGHT pre-completion card cascade --- */
.addon-pre-completion .addon-pc-card {
    opacity: 0;
    animation: fadeInUp 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0s;
}
/* Card banner (post-2026-05-23 restructure) — fades in just after the card
   itself so the black header bar lands first, then the body content cascades. */
.addon-pre-completion .addon-pc-card-banner {
    opacity: 0;
    animation: fadeInOnly 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.1s;
}
/* Legacy .addon-pc-header selector kept for backwards compatibility (e.g.
   a future variant config that re-enables an in-body header row). It's
   a no-op for the current renderer which uses .addon-pc-card-banner. */
.addon-pre-completion .addon-pc-header {
    opacity: 0;
    animation: fadeInOnly 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.1s;
}
.addon-pre-completion .addon-pc-context {
    opacity: 0;
    animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.15s;
}
.addon-pre-completion .addon-pc-title {
    opacity: 0;
    animation: fadeInUp 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.2s;
}
.addon-pre-completion .addon-pc-body {
    opacity: 0;
    animation: fadeInUp 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.3s;
}
.addon-pre-completion .addon-pc-trust {
    opacity: 0;
    animation: fadeInOnly 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.4s;
}
.addon-pre-completion .addon-pc-section-label--spaced {
    opacity: 0;
    animation: fadeInOnly 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.45s;
}
.addon-pre-completion .addon-pc-next-item {
    opacity: 0;
    animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.addon-pre-completion .addon-pc-next-item:nth-child(1) { animation-delay: 0.5s; }
.addon-pre-completion .addon-pc-next-item:nth-child(2) { animation-delay: 0.58s; }
.addon-pre-completion .addon-pc-next-item:nth-child(3) { animation-delay: 0.66s; }
.addon-pre-completion .addon-pc-next-item:nth-child(4) { animation-delay: 0.74s; }
.addon-pre-completion .addon-pc-actions {
    opacity: 0;
    animation: fadeInUp 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.78s;
}
/* Reassurance lands between the preview bullets and the fork — gives
   the user a moment to absorb "you're safe either way" before the
   CTAs appear. fadeInOnly (no upward translate) so it reads as a
   premium static panel rather than a sliding component. */
.addon-pre-completion .addon-pc-fork-reassurance {
    opacity: 0;
    animation: fadeInOnly 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.65s;
}
/* Fork CTAs land last — both columns fade in together as one unit so
   the decision matrix appears as a coherent choice block. Delay bumped
   to 0.75s so the reassurance lands first. */
.addon-pre-completion .addon-pc-fork {
    opacity: 0;
    animation: fadeInUp 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.75s;
}
.addon-pre-completion .addon-pc-fineprint {
    opacity: 0;
    animation: fadeInOnly 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.9s;
}

/* Respect users who have requested reduced motion — disable transforms and
   skip the cascade. Content still appears, just instantly. */
@media (prefers-reduced-motion: reduce) {
    .hero-section.addon-pc-hero-active .addon-pc-hero-logo,
    .hero-section.addon-pc-hero-active .addon-pc-hero-eyebrow,
    .hero-section.addon-pc-hero-active .addon-pc-hero-headline,
    .hero-section.addon-pc-hero-active .addon-pc-hero-subtitle,
    .hero-section.addon-pc-hero-active .addon-pc-hero-video-wrap,
    .addon-pre-completion .addon-pc-card,
    .addon-pre-completion .addon-pc-card-banner,
    .addon-pre-completion .addon-pc-header,
    .addon-pre-completion .addon-pc-context,
    .addon-pre-completion .addon-pc-title,
    .addon-pre-completion .addon-pc-body,
    .addon-pre-completion .addon-pc-trust,
    .addon-pre-completion .addon-pc-section-label--spaced,
    .addon-pre-completion .addon-pc-next-item,
    .addon-pre-completion .addon-pc-actions,
    .addon-pre-completion .addon-pc-fork,
    .addon-pre-completion .addon-pc-fork-reassurance,
    .addon-pre-completion .addon-pc-fineprint {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
/* === /ADD-ON ENTRY ANIMATIONS === */

/* === POST-ACCEPT BRIDGE === */
/* Transparency/confirmation screen shown only when the user clicked Ja tak
   on an add-on consent surface. Lives between the accept event and the
   completion screen. Revisorkort-themed (white, calm, on-brand with the
   rest of the funnel) — the Lunar moment ended at the click, this is RK
   confirming what we did on the user's behalf. Three info rows show the
   exact contact data shared (name + email + phone) so the consent text
   becomes visible-proof rather than legalese-they-skim.
   2026-05-23 evening. */
.addon-pc-bridge-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 8px 0;
}

.addon-pc-bridge {
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e6e6ee;
    border-radius: var(--card-radius);
    padding: 28px 24px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    text-align: center;
    /* Soft entry — single fade-in, no theatrical cascade. The user just
       made a decision; this should feel like a calm follow-through, not
       a celebration. */
    opacity: 0;
    animation: fadeInUp 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Green ✓ circle — Lunar accent (#00CB39) for visual continuity with the
   Variant C card's accent rule. Lightweight success affordance, not a
   theatrical celebration. */
.addon-pc-bridge-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00CB39;
    color: #ffffff;
    border-radius: 50%;
}

.addon-pc-bridge-headline {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    letter-spacing: -0.2px;
    text-wrap: balance;
}

.addon-pc-bridge-sub {
    margin: 0 0 20px 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-light);
    line-height: 1.5;
    text-wrap: balance;
}

/* Info rows — three labeled fields (Navn / E-mail / Telefon) inside a
   subtle grey panel that visually echoes the trust chip on Variant C.
   Left-aligned so the values read naturally; the surrounding card
   centers the block. */
.addon-pc-bridge-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 24px 0;
    padding: 16px 18px;
    background: #f7f7fb;
    border-radius: 10px;
    text-align: left;
}

.addon-pc-bridge-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.addon-pc-bridge-row-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #6b6b78;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.addon-pc-bridge-row-value {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
    word-break: break-word;
}

/* Primary CTA — Revisorkort-green pill matching the funnel's tone.
   Different shape than the Variant C fork CTAs (which were squares
   with sharp legal-feeling rounding) on purpose — this is a single
   continuation action, the fork is a binary decision. */
.addon-pc-bridge-continue {
    width: 100%;
    min-height: 52px;
    padding: 14px 24px;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.addon-pc-bridge-continue:hover,
.addon-pc-bridge-continue:focus-visible {
    background: #006B52;
    outline: none;
}

.addon-pc-bridge-continue:active {
    transform: scale(0.99);
}

/* Reduced-motion: still fade in (just less movement). */
@media (prefers-reduced-motion: reduce) {
    .addon-pc-bridge {
        animation: none;
        opacity: 1;
    }
}

/* Mobile tweaks — the bridge card already adapts via max-width + 100%
   inside .question-container, but tighten paddings at small widths. */
@media (max-width: 480px) {
    .addon-pc-bridge {
        padding: 24px 18px;
    }
    .addon-pc-bridge-rows {
        padding: 14px 14px;
    }
}
/* === /POST-ACCEPT BRIDGE === */

/* === LEGACY VARIANT C (C-1) — namespaced reference styles === */
/* Reproduces the pre-2026-05-23-polish Variant C card, recovered verbatim from
   start-CHECKPOINT-20260510-152954/css/funnel.css. Every selector is scoped
   under .addon-pc-c1 (added to the legacy render wrapper by funnel-core.js's
   buildLegacyPreCompletionHtml) so these rules win over today's repurposed,
   single-class .addon-pc-* polished rules via specificity (2 classes > 1) and
   never affect the current Variant C. The shared .addon-pre-completion entry
   animations (opacity/fadeIn only — no layout) still layer on top for a clean
   reveal. NOT duplicated here because they're unchanged since the checkpoint
   and apply to both C and C-1: .addon-pc-scroll-indicator and
   .hero-section.addon-pc-hero-active. Reached only via ?variant=C-1 — Lunar
   reference only, not part of the live A/B set. */

.addon-pc-c1 .addon-pc-card {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e6e6ee;
    border-radius: 18px;
    padding: 24px 22px 22px 22px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.addon-pc-c1 .addon-pc-card::before {
    content: '';
    display: block;
    height: 3px;
    margin: -24px -22px 18px -22px;
    background: #0a0a0a;
}

.addon-pc-c1 .addon-pc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.addon-pc-c1 .addon-pc-logo {
    /* Stacked B2B lockup (2026-06-11): 36px keeps the LUNAR wordmark at the
       brand guide's 60px digital minimum width. */
    height: 36px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.addon-pc-c1 .addon-pc-eyebrow {
    font-size: 10px;
    font-weight: 600;
    color: #6b6b78;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.addon-pc-c1 .addon-pc-context {
    font-size: 13px;
    font-weight: 500;
    color: #6b6b78;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.addon-pc-c1 .addon-pc-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 12px 0;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.addon-pc-c1 .addon-pc-body {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-light);
    margin: 0 0 20px 0;
    line-height: 1.55;
}

.addon-pc-c1 .addon-pc-section-label {
    font-size: 10px;
    font-weight: 600;
    color: #6b6b78;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.addon-pc-c1 .addon-pc-section-label--spaced {
    margin-top: 20px;
}

.addon-pc-c1 .addon-pc-benefits {
    list-style: none;
    margin: 0 0 18px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.addon-pc-c1 .addon-pc-benefit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
}

.addon-pc-c1 .addon-pc-benefit-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e8f5ee;
    color: #1a5f3d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.addon-pc-c1 .addon-pc-benefit-text {
    flex: 1;
}

.addon-pc-c1 .addon-pc-trust {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f7f7fb;
    border-radius: 10px;
    margin: 0 0 6px 0;
    font-size: 12px;
    font-weight: 500;
    color: #4a4a55;
    line-height: 1.45;
}

.addon-pc-c1 .addon-pc-trust-icon {
    font-size: 14px;
    line-height: 1;
}

.addon-pc-c1 .addon-pc-next {
    list-style: none;
    margin: 0 0 22px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.addon-pc-c1 .addon-pc-next-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
}

.addon-pc-c1 .addon-pc-next-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0a0a0a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.addon-pc-c1 .addon-pc-next-text {
    flex: 1;
}

.addon-pc-c1 .addon-pc-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.addon-pc-c1 .addon-pc-accept {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    text-align: center;
    background: #0a0a0a;
    color: #ffffff;
    transition: background 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

.addon-pc-c1 .addon-pc-accept:hover,
.addon-pc-c1 .addon-pc-accept:focus-visible {
    background: #1f1f1f;
    transform: translateY(-1px);
    outline: none;
}

.addon-pc-c1 .addon-pc-accept-microcopy {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #6b6b78;
    margin: 4px 0 6px 0;
}

.addon-pc-c1 .addon-pc-skip {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 100px;
    border: none;
    background: transparent;
    color: var(--color-brand-blue, #007AFF);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    text-align: center;
    transition: color 0.15s ease;
}

.addon-pc-c1 .addon-pc-skip:hover,
.addon-pc-c1 .addon-pc-skip:focus-visible {
    color: var(--color-brand-blue-hover, #0066DD);
    outline: none;
}

.addon-pc-c1 .addon-pc-fineprint {
    font-size: 11px;
    font-weight: 400;
    color: #6b6b78;
    line-height: 1.5;
    margin: 8px 0 0 0;
    text-align: left;
}

@media (min-width: 600px) {
    .addon-pc-c1 .addon-pc-card    { padding: 28px 26px 24px 26px; }
    .addon-pc-c1 .addon-pc-card::before { margin: -28px -26px 22px -26px; }
    .addon-pc-c1 .addon-pc-title   { font-size: 24px; }
    .addon-pc-c1 .addon-pc-body    { font-size: 15px; }
    .addon-pc-c1 .addon-pc-benefit { font-size: 14.5px; }
    .addon-pc-c1 .addon-pc-logo    { height: 24px; }
}
/* === /LEGACY VARIANT C (C-1) === */