:root {
            --transition-duration: 0.4s;
            --easing: cubic-bezier(0.4, 0, 0.2, 1);
            --line-position: 17px;
            /* Distance from right edge to center of checkmarks/line */
        }

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

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1920&q=80') center/cover no-repeat fixed;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Modal Overlay */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            z-index: 1000;
            padding: 2rem;
        }

        /* Custom scrollbar track - outside modal */
        .custom-scrollbar {
            position: absolute;
            right: 0.5rem;
            top: 2rem;
            bottom: 2rem;
            width: 8px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
        }

        .custom-scrollbar-thumb {
            position: absolute;
            width: 100%;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.15s;
        }

        .custom-scrollbar-thumb:hover,
        .custom-scrollbar-thumb.dragging {
            background: rgba(255, 255, 255, 0.9);
        }

        /* Modal Container */
        .modal {
            background: #fff;
            max-width: 150rem;
            max-height: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        /* Scrollable area - contains everything */
        .modal-scroll {
            flex: 0 1 auto;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            min-height: 0;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE/Edge */
        }

        .modal-scroll::-webkit-scrollbar {
            display: none;
            /* Chrome/Safari */
        }

        /* Modal Header - sticky at top */
        .modal-header {
            position: sticky;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 32px 48px;
            background: #fff;
            flex-shrink: 0;
            z-index: 105;
            overflow: visible;
            will-change: transform;
        }

        /* Gradient fade below header - inside header */
        .header-gradient {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            height: 0;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
            pointer-events: none;
        }

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

        .logo-svg {
            height: 36px;
            width: auto;
        }

        /* Logo visibility - Desktop: show full, hide icon */
        .logo-desktop {
            display: block;
        }

        .logo-mobile {
            display: none;
        }

        .book-demo-btn {
            display: flex;
            align-items: center;
            gap: 0;
            background: #9E8D7F;
            color: #fff;
            border: none;
            border-radius: 50px;
            padding: 0;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
            overflow: hidden;
            box-shadow: inset 0 0 0 0.2rem #9E8D7F;
        }

        .book-demo-btn:hover {
            background: #fff;
            color: #9E8D7F;
            box-shadow: inset 0 0 0 0.2rem #9E8D7F;
        }

        .book-demo-btn svg {
            width: 20px;
            height: 20px;
        }

        .book-demo-btn .btn-icon-left {
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 1);
            border: none;
            box-shadow: inset 0 0 0 0.2rem #9E8D7F;
            padding: 16px;
            border-radius: 50px 0 0 50px;
            color: #9E8D7F;
            transition: background 0.2s ease, color 0.2s ease;
        }

        .book-demo-btn:hover .btn-icon-left {
            background: #9E8D7F;
            color: #fff;
        }

        .book-demo-btn .btn-text {
            padding: 16px 16px 16px 12px;
        }

        .book-demo-btn .btn-icon-right {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px 20px 16px 0;
        }

        .close-btn {
            width: 48px;
            height: 48px;
            border: none;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.2s ease;
        }

        .close-btn:hover {
            background: #f5f5f5;
        }

        .close-btn svg {
            width: 24px;
            height: 24px;
            color: #1a1a1a;
        }

        /* Modal Content */
        .modal-content {
            flex: 0 0 auto;
            position: relative;
            z-index: 1;
        }

        /* Sticky Summary Bar - hidden by default */
        .sticky-summary {
            background: #4CAF50;
            color: #fff;
            padding: 0 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 110;
            flex-shrink: 0;
            margin-left: -48px;
            margin-right: -48px;
            width: calc(100% + 96px);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.25s ease-out, padding 0.25s ease-out;
        }

        /* Show when checkout is active */
        .sticky-summary.visible {
            max-height: 80px;
            padding: 16px 48px;
        }

        /* When fixed at top of modal */
        .sticky-summary.fixed {
            position: fixed;
            margin: 0;
        }

        .sticky-summary-text {
            font-size: 15px;
            font-weight: 400;
        }

        .summary-link {
            cursor: pointer;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-underline-offset: 3px;
        }

        .summary-link:hover {
            text-decoration-style: solid;
        }

        .sticky-summary-price {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .sticky-summary-price-label {
            font-size: 11px;
            text-align: right;
            line-height: 1.3;
            opacity: 0.9;
        }

        .sticky-summary-price-value {
            font-size: 28px;
            font-weight: 700;
        }

        .sticky-summary-check {
            width: 32px;
            height: 32px;
            border: 2px solid #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Steps Container */
        .steps-container {
            position: relative;
            padding: 2rem 48px 0;
            overflow: visible;
        }

        /* Fixed progress line in container - grey dashed base */
        .progress-line {
            display: none;
        }

        /* Dotted line segments - added to each step except last */
        .dotted-line-down {
            position: absolute;
            right: var(--line-position);
            top: 50%;
            bottom: 0;
            width: 2px;
            background: repeating-linear-gradient(to bottom,
                    #ccc 0px,
                    #ccc 6px,
                    transparent 6px,
                    transparent 12px);
            z-index: 99;
            pointer-events: none;
        }

        .dotted-line-up {
            position: absolute;
            right: var(--line-position);
            top: 0;
            bottom: 50%;
            width: 2px;
            background: repeating-linear-gradient(to bottom,
                    #ccc 0px,
                    #ccc 6px,
                    transparent 6px,
                    transparent 12px);
            z-index: 99;
            pointer-events: none;
        }

        /* No dotted line above first step */
        .step:first-child .dotted-line-up {
            display: none;
        }

        /* No dotted line below last step */
        .step:last-of-type .dotted-line-down,
        #step5 .dotted-line-down {
            display: none;
        }

        /* Hide dotted-line-up on step 5 only when active/completed (green line takes over) */
        #step5.active .dotted-line-up,
        #step5.completed .dotted-line-up {
            display: none;
        }

        /* No dotted line going down from step 4 when step 5 is active/completed */
        #step4.completed .dotted-line-down {
            display: none;
        }

        /* Green overlay segments for completed steps */
        .step.completed::after {
            content: '';
            position: absolute;
            right: var(--line-position);
            top: 50%;
            bottom: -1px;
            width: 2px;
            background: #4CAF50;
            z-index: 101;
            animation: growDown var(--transition-duration) var(--easing) forwards;
            transform-origin: top;
        }

        /* Visited but not completed steps are clickable */
        .step.visited:not(.active),
        .step.completed:not(.active) {
            cursor: pointer;
        }

        .step.visited:not(.active):hover .step-bg,
        .step.completed:not(.active):hover .step-bg {
            background: rgba(158, 141, 127, 0.03);
        }

        .step.completed+.step::before {
            content: '';
            position: absolute;
            right: var(--line-position);
            top: 0;
            bottom: 50%;
            width: 2px;
            background: #4CAF50;
            z-index: 101;
            animation: growDown var(--transition-duration) var(--easing) forwards;
            animation-delay: var(--transition-duration);
            transform-origin: top;
            transform: scaleY(0);
        }

        /* Override for last step - fixed height instead of 50% */
        .step.completed+.step:last-of-type::before,
        .step.completed+#step5::before,
        #step4.completed+#step5::before,
        #step4.completed+#step5.active::before,
        #step4.completed+#step5.pending::before {
            bottom: auto !important;
            height: 47px !important;
            animation: none !important;
            transform: scaleY(1) !important;
        }

        @keyframes growDown {
            from {
                transform: scaleY(0);
            }

            to {
                transform: scaleY(1);
            }
        }

        /* First step has no line above */
        .step:first-child::before {
            display: none;
        }

        /* Last step has no line below */
        .step:last-of-type::after,
        #step5::after {
            display: none;
        }

        /* Step before checkout (step 4) - limit green line to not extend past step */
        .step:nth-last-of-type(2).completed::after,
        #step4.completed::after {
            bottom: 0 !important;
        }

        /* ========================================
           STEP - UNIFIED STRUCTURE
           ======================================== */
        .step {
            position: relative;
            display: flex;
            align-items: flex-start;
            padding: 24px 0;
            padding-right: 100px;
            /* Fixed space for progress indicator */
            gap: 24px;
            cursor: pointer;
            transition: padding var(--transition-duration) var(--easing);
        }

        /* Bottom border element - controllable width */
        .step-border {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 70px;
            /* Stop before progress indicator area */
            height: 1px;
            background: #e8e8e8;
            pointer-events: none;
        }

        /* Golden bar element */
        .step-bar {
            position: absolute;
            left: -48px;
            /* Extend to container edge */
            top: 0;
            bottom: 0;
            width: 6px;
            background: #9E8D7F;
            opacity: 0;
            z-index: 102;
            transition: opacity var(--transition-duration) var(--easing);
        }

        .step.active .step-bar {
            opacity: 1;
        }

        .step:last-of-type .step-border,
        #step5 .step-border {
            display: none;
        }

        /* Cover dotted line in checkout step - disabled, using JS */
        .step-line-cover {
            display: none;
        }

        /* Active step styling */
        .step.active {
            cursor: default;
            padding-top: 32px;
            padding-bottom: 32px;
        }

        /* Extended background element */
        .step-bg {
            position: absolute;
            left: -48px;
            right: -48px;
            top: 0;
            bottom: 0;
            background: #EEEEEE;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--transition-duration) var(--easing);
        }

        .step.active .step-bg {
            opacity: 1;
        }

        /* Pending step styling */
        .step.pending .step-title,
        .step.pending .step-question-text {
            color: #aaa;
        }

        /* Hide values on pending steps */
        .step.pending .counter-value,
        .step.pending .step-value {
            opacity: 0;
        }

        /* ========================================
           MEDIA (Thumbnail/Video)
           ======================================== */
        .step-media {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
            z-index: 102;
            transition:
                width var(--transition-duration) var(--easing),
                height var(--transition-duration) var(--easing),
                border-radius var(--transition-duration) var(--easing);
        }

        .step.active .step-media {
            width: 195px;
            height: 130px;
            border-radius: 12px;
        }

        .step-media img,
        .step-media video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity var(--transition-duration) var(--easing);
        }

        /* Unvisited steps have 50% opacity on media */
        .step:not(.visited) .step-media video,
        .step:not(.visited) .step-media img {
            opacity: 0.5;
        }

        .step-media-icon {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
        }

        .step-media-icon svg {
            width: 32px;
            height: 32px;
            color: #999;
            transition: transform var(--transition-duration) var(--easing);
        }

        .step.active .step-media-icon svg {
            transform: scale(1.25);
        }

        .play-btn-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: opacity var(--transition-duration) var(--easing);
        }

        .step.active .play-btn-overlay {
            opacity: 1;
        }

        .play-btn {
            width: 48px;
            height: 48px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
            transition: background 0.2s ease, transform 0.2s ease;
        }

        .play-btn:hover {
            background: rgba(0, 0, 0, 0.7);
            transform: scale(1.1);
        }

        .play-btn svg {
            width: 20px;
            height: 20px;
            color: #fff;
            margin-left: 3px;
        }

        /* Video Overlay */
        .video-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0s 0.3s;
        }

        .video-overlay.active {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.3s ease, visibility 0s;
        }

        .video-overlay video {
            max-width: 90vw;
            max-height: 80vh;
            border-radius: 8px;
        }

        .video-overlay-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 48px;
            height: 48px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }

        .video-overlay-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .video-overlay-close svg {
            width: 24px;
            height: 24px;
            color: #fff;
        }

        .step-media {
            position: relative;
        }

        /* ========================================
           CONTENT AREA
           ======================================== */
        .step-content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 60px;
            margin-right: 0;
            position: relative;
            z-index: 102;
            transition:
                min-height var(--transition-duration) var(--easing),
                margin-right var(--transition-duration) var(--easing),
                padding var(--transition-duration) var(--easing);
        }

        /* When tag is open, elevate entire content area */
        .step-content:has(.step-tags.has-open-tag) {
            z-index: 10000;
        }

        .step.active .step-content {
            min-height: 130px;
            /* Match the expanded media height */
            margin-right: 180px;
            /* Space for controls + OK button */
            padding-top: 0;
            justify-content: center;
            overflow: visible;
        }

        /* Checkout step needs top alignment due to long content */
        #step5.active .step-content {
            justify-content: flex-start;
        }

        /* Title */
        .step-title {
            font-size: 16px;
            font-weight: 400;
            color: #1a1a1a;
            transition: font-size var(--transition-duration) var(--easing), margin var(--transition-duration) var(--easing);
            line-height: 1.3;
            margin-bottom: 0;
        }

        .step.active .step-title {
            font-size: 24px;
            margin-bottom: 8px;
        }

        .step-title strong {
            font-weight: 600;
        }

        /* Description */
        .step-description {
            font-size: 14px;
            color: #888;
            line-height: 1.5;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition:
                max-height var(--transition-duration) var(--easing),
                opacity var(--transition-duration) var(--easing),
                margin var(--transition-duration) var(--easing);
        }

        .step.active .step-description {
            max-height: 50px;
            opacity: 1;
            margin-bottom: 16px;
        }

        /* Tags */
        .step-tags {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            flex-wrap: wrap;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition:
                max-height var(--transition-duration) var(--easing),
                opacity var(--transition-duration) var(--easing);
        }

        .step.active .step-tags {
            max-height: 200px;
            opacity: 1;
            overflow: visible;
        }

        /* When a tag is open, increase parent z-index to escape stacking context */
        .step-tags.has-open-tag {
            position: relative;
            z-index: 9999;
        }

        .step-tag {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 8px 11px;
            border: 1px dashed #9E8D7F;
            border-radius: 20px;
            font-size: 13px;
            color: #9E8D7F;
            background: transparent;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border 0.2s ease, border-radius 0.2s ease, z-index 0s;
            position: relative;
            z-index: 1;
        }

        .step-tag:hover,
        .step-tag.tag-open {
            z-index: 9999;
            border-radius: 20px 20px 0 0;
        }

        .step-tag-header {
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }

        .step-tag:hover,
        .step-tag.highlight,
        .step-tag.tag-open {
            background: #9E8D7F;
            border: 1px solid #9E8D7F;
            color: #fff;
        }

        .step-tag-detail {
            position: absolute;
            top: 100%;
            left: -1px;
            right: -1px;
            font-size: 11px;
            line-height: 1.4;
            white-space: normal;
            background: #9E8D7F;
            color: #fff;
            padding: 0 11px;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            border-radius: 0 0 20px 20px;
            border: 1px solid #9E8D7F;
            border-top: none;
            transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
        }

        .step-tag:hover .step-tag-detail,
        .step-tag.tag-open .step-tag-detail {
            max-height: 100px;
            opacity: 1;
            padding: 8px 11px 10px 11px;
        }

        .step-tag-info {
            width: 16px;
            height: 16px;
            border: 1px solid #9E8D7F;
            background: #9E8D7F;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 600;
            transition: background 0.2s ease, color 0.2s ease, border 0.2s ease;
        }

        .step-tag:hover .step-tag-info,
        .step-tag.tag-open .step-tag-info {
            background: #fff;
            color: #9E8D7F;
            border: none;
        }

        /* ========================================
           CONTROLS AREA
           ======================================== */
        .step-controls {
            position: absolute;
            right: 95px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-shrink: 0;
            gap: 12px;
            z-index: 102;
            transition: opacity var(--transition-duration) var(--easing);
        }

        /* Counter value - always visible, buttons appear around it */
        .counter-value {
            font-size: 24px;
            font-weight: 500;
            color: #1a1a1a;
            width: 48px;
            min-width: 48px;
            text-align: center;
            z-index: 1;
            transition: opacity var(--transition-duration) var(--easing);
            border: none;
            outline: none;
            background: transparent;
            padding: 0;
            font-family: inherit;
            -webkit-appearance: none;
            -moz-appearance: textfield;
        }

        .counter-value::-webkit-outer-spin-button,
        .counter-value::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Counter buttons - fade in when active */
        .counter-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: none;
            background: #1a1a1a;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease, opacity var(--transition-duration) var(--easing);
            flex-shrink: 0;
            opacity: 0;
            pointer-events: none;
        }

        .step.active .counter-btn {
            opacity: 1;
            pointer-events: auto;
        }

        .counter-btn:hover {
            background: #333;
        }

        /* Step counter container */
        .step-counter {
            display: flex;
            align-items: center;
            background: transparent;
            border-radius: 50px;
            padding: 0;
            transition: background var(--transition-duration) var(--easing), padding var(--transition-duration) var(--easing);
        }

        .step.active .step-counter {
            background: #fff;
            padding: 4px;
        }

        /* Step value for toggle steps - shows text when collapsed, hides when active */
        .step-value {
            font-size: 24px;
            font-weight: 500;
            color: #1a1a1a;
            width: 144px;
            /* Match counter width: btn(48) + value(48) + btn(48) */
            text-align: center;
            opacity: 1;
            position: relative;
            z-index: 0;
            transition: opacity var(--transition-duration) var(--easing);
        }

        .step.active .step-value {
            opacity: 0;
            position: absolute;
            pointer-events: none;
            z-index: -1;
        }

        /* Toggle Group */
        .step-toggle {
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            transition:
                max-width var(--transition-duration) var(--easing),
                opacity var(--transition-duration) var(--easing);
        }

        .step.active .step-toggle {
            max-width: 250px;
            opacity: 1;
        }

        .toggle-group {
            display: flex;
            border-radius: 50px;
            overflow: hidden;
            border: 2px solid #1a1a1a;
        }

        .toggle-btn {
            padding: 14px 24px;
            border: none;
            background: #fff;
            color: #1a1a1a;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .toggle-btn.active {
            background: #1a1a1a;
            color: #fff;
        }

        /* OK Button - in flow, but extends so checkmark aligns with progress line */
        .ok-btn-wrapper {
            position: absolute;
            right: -9px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            pointer-events: none;
            z-index: 102;
            transition: opacity var(--transition-duration) var(--easing);
        }

        .step.active .ok-btn-wrapper {
            opacity: 1;
            pointer-events: auto;
        }

        .ok-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 50px;
            padding: 12px 12px 12px 24px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s ease;
            white-space: nowrap;
        }

        .ok-btn:hover {
            background: #43a047;
        }

        .ok-btn-check {
            width: 30px;
            height: 30px;
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ok-btn-check svg {
            width: 14px;
            height: 14px;
            color: #fff;
        }

        /* ========================================
           PROGRESS INDICATOR
           ======================================== */
        .progress-indicator {
            position: absolute;
            right: calc(var(--line-position) - 15px);
            /* Center aligns with line */
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            z-index: 102;
            background: #fff;
            transition:
                border-color var(--transition-duration) var(--easing),
                opacity var(--transition-duration) var(--easing);
        }

        /* Hide progress indicator when step is active - OK button takes its place */
        .step.active .progress-indicator {
            opacity: 0;
            pointer-events: none;
        }

        .progress-indicator.completed {
            border: 2px solid #4CAF50;
        }

        .progress-indicator.completed svg {
            color: #4CAF50;
            width: 16px;
            height: 16px;
        }

        .progress-indicator.pending {
            border: 2px solid #ccc;
            color: #ccc;
            font-size: 14px;
            font-weight: 500;
        }

        /* ========================================
           CHECKOUT SECTION (Step 5)
           ======================================== */
        .checkout-content {
            width: calc(100% + 180px);
            /* Extend into the right margin area */
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition:
                max-height var(--transition-duration) var(--easing),
                opacity var(--transition-duration) var(--easing);
        }

        .step.active .checkout-content {
            max-height: 3000px;
            opacity: 1;
        }

        .checkout-header {
            display: flex;
            align-items: flex-start;
            gap: 24px;
            margin-bottom: 24px;
            margin-right: 180px;
            /* Keep header constrained for price badge */
        }

        .checkout-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .checkout-icon svg {
            width: 40px;
            height: 40px;
            color: #1a1a1a;
        }

        .checkout-title-block {
            flex: 1;
        }

        .checkout-title {
            font-size: 24px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 4px;
        }

        .checkout-subtitle {
            font-size: 14px;
            color: #666;
        }

        .checkout-subtitle .required {
            color: #e53935;
        }

        /* Form Styles */
        .form-row {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
        }

        .form-group {
            flex: 1;
            position: relative;
        }

        .form-group.small {
            flex: 0 0 auto;
        }

        .form-input {
            width: 100%;
            padding: 20px 16px 8px;
            border: 2px solid #e0e0e0;
            border-radius: 28px;
            font-size: 15px;
            font-family: inherit;
            background: #fff;
            transition: border-color 0.2s ease;
        }

        .form-input:focus {
            outline: none;
            border-color: #1a1a1a;
        }

        .form-input.valid {
            border-color: #4CAF50;
        }

        /* Floating label - default state (inside input) */
        .form-label {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 15px;
            color: #999;
            pointer-events: none;
            transition: all 0.2s ease;
        }

        /* Floating label - active state (above input) */
        .form-input:focus+.form-label,
        .form-input:not(:placeholder-shown)+.form-label,
        .form-input.has-value+.form-label,
        .form-input.invalid+.form-label {
            top: 8px;
            transform: translateY(0);
            font-size: 11px;
        }

        /* Select always shows label at top */
        select.form-input+.form-label {
            top: 8px;
            transform: translateY(0);
            font-size: 11px;
        }

        /* Custom select dropdown arrow - black circle with white chevron */
        select.form-input {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding-right: 52px;
            cursor: pointer;
        }

        .form-group:has(select.form-input) {
            position: relative;
        }

        .form-group:has(select.form-input)::after {
            content: '';
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            background: #1a1a1a url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center center no-repeat;
            border-radius: 50%;
            pointer-events: none;
        }

        .form-check {
            position: absolute;
            right: 12px;
            top: -8px;
            width: 20px;
            height: 20px;
            background: #4CAF50;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s ease, background 0.2s ease;
            z-index: 1;
        }

        .form-check svg {
            width: 12px;
            height: 12px;
            color: #fff;
        }

        .form-check .check-icon {
            display: block;
        }

        .form-check .cross-icon {
            display: none;
        }

        .form-input.valid~.form-check {
            opacity: 1;
        }

        /* Invalid state */
        .form-input.invalid {
            border-color: #e53935;
        }

        .form-input.invalid~.form-check {
            opacity: 1;
            background: #e53935;
        }

        .form-input.invalid~.form-check .check-icon {
            display: none;
        }

        .form-input.invalid~.form-check .cross-icon {
            display: block;
        }

        .form-input.invalid+.form-label {
            color: #e53935;
        }

        select.form-input.valid~.form-check {
            opacity: 1;
        }

        /* Phone Group Check - single check for entire field */
        .phone-group {
            display: flex;
            position: relative;
        }

        .phone-group.valid .phone-input {
            border-color: #4CAF50;
        }

        .phone-group.invalid .phone-input {
            border-color: #e53935;
        }

        .phone-group.invalid .phone-label {
            color: #e53935;
        }

        .phone-group-check {
            position: absolute;
            right: 12px;
            top: -8px;
            width: 20px;
            height: 20px;
            background: #4CAF50;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s ease, background 0.2s ease;
            z-index: 1;
        }

        .phone-group-check svg {
            width: 12px;
            height: 12px;
            color: #fff;
        }

        .phone-group-check .check-icon {
            display: block;
        }

        .phone-group-check .cross-icon {
            display: none;
        }

        .phone-group.valid .phone-group-check {
            opacity: 1;
        }

        .phone-group.invalid .phone-group-check {
            opacity: 1;
            background: #e53935;
        }

        .phone-group.invalid .phone-group-check .check-icon {
            display: none;
        }

        .phone-group.invalid .phone-group-check .cross-icon {
            display: block;
        }

        /* Phone Input */

        .country-select {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            border: 2px solid #1a1a1a;
            border-right: none;
            border-radius: 28px 0 0 28px;
            background: #1a1a1a;
            cursor: pointer;
            flex-shrink: 0;
            position: relative;
        }

        .country-arrow {
            color: #fff;
        }

        .country-flag {
            width: 28px;
            height: 20px;
            border-radius: 2px;
            overflow: hidden;
        }

        .country-flag img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .phone-input-wrapper {
            flex: 1;
            position: relative;
        }

        .phone-input {
            width: 100%;
            padding: 20px 16px 8px;
            border: 2px solid #e0e0e0;
            border-left: none;
            border-radius: 0 28px 28px 0;
            font-size: 15px;
            font-family: inherit;
        }

        .phone-input:focus {
            outline: none;
        }

        /* Phone label - floating behavior */
        .phone-label {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 15px;
            color: #999;
            pointer-events: none;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .phone-input:focus+.phone-label,
        .phone-input:not(:placeholder-shown)+.phone-label,
        .phone-input.invalid+.phone-label {
            top: 8px;
            transform: translateY(0);
            font-size: 11px;
        }

        /* Country Dropdown */
        .country-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background: #fff;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            z-index: 100;
            display: none;
            max-height: 200px;
            overflow-y: auto;
            min-width: 200px;
            margin-top: 4px;
        }

        .country-dropdown.open {
            display: block;
        }

        .country-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            cursor: pointer;
        }

        .country-option:hover {
            background: #f5f5f5;
        }

        /* Benefits Box */
        .benefits-box {
            background: #fafafa;
            border: 1px dashed #ddd;
            border-radius: 24px;
            padding: 20px 24px;
            margin: 24px 0;
            overflow: hidden;
            transition: padding 0.3s ease;
        }

        .benefits-box.collapsible {
            cursor: pointer;
        }

        .benefits-box.collapsible:hover {
            background: #f5f5f5;
        }

        /* Benefits Title - initially hidden */
        .benefits-title {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 15px;
            font-weight: 600;
            color: #4CAF50;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            margin-bottom: 0;
            transition: max-height 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease;
        }

        .benefits-title.visible {
            max-height: 30px;
            opacity: 1;
            margin-bottom: 12px;
        }

        .benefits-title.visible:has(+ .benefits-items.collapsed) {
            margin-bottom: 0;
        }

        .benefits-title .expand-icon {
            flex-shrink: 0;
        }

        /* Benefits Items Container */
        .benefits-items {
            max-height: 500px;
            opacity: 1;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease;
        }

        .benefits-items.collapsed {
            max-height: 0;
            opacity: 0;
        }

        .benefit-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
            font-size: 14px;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
            margin-bottom: 0;
        }

        .benefit-item.visible {
            max-height: 30px;
            opacity: 1;
            margin-top: 3px;
            margin-bottom: 3px;
        }

        .benefit-label {
            font-weight: 600;
            color: #1a1a1a;
        }

        .benefit-value {
            color: #4CAF50;
        }

        .benefit-check {
            color: #4CAF50;
        }

        /* Discount Button Container */
        .discount-button-container {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 24px 0;
        }

        /* Submit Button */
        .submit-btn {
            background: #e0e0e0;
            color: #888;
            border: none;
            border-radius: 50px;
            padding: 16px 32px;
            font-size: 14px;
            font-weight: 600;
            cursor: not-allowed;
            transition: all 0.2s ease;
        }

        .submit-btn.active {
            background: #9E8D7F;
            color: #fff;
            cursor: pointer;
            box-shadow: inset 0 0 0 0.2rem #9E8D7F;
        }

        .submit-btn.active:hover {
            background: #fff;
            color: #9E8D7F;
            box-shadow: inset 0 0 0 0.2rem #9E8D7F;
        }

        .submit-btn.requested {
            background: #fafafa;
            color: #9E8D7F;
            border: 1px dashed #ddd;
            border-radius: 24px;
            padding: 0 20px;
            height: 48px;
            cursor: default;
        }

        /* Refresh Button */
        .refresh-btn {
            height: 48px;
            background: #9E8D7F;
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.5px;
            box-shadow: inset 0 0 0 0.2rem #9E8D7F;
            transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        }

        .refresh-btn:hover {
            background: #fff;
            color: #9E8D7F;
            box-shadow: inset 0 0 0 0.2rem #9E8D7F;
        }

        /* Discount Code Display */
        .discount-code-display {
            background: #fafafa;
            border: 1px dashed #ddd;
            border-radius: 24px;
            padding: 0 20px;
            height: 48px;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 600;
            color: #4CAF50;
        }

        .privacy-note {
            font-size: 13px;
            color: #999;
        }

        .privacy-link {
            color: #9E8D7F;
            text-decoration: underline;
        }

        /* Checkout Expanded */
        .checkout-expanded {
            margin-top: 32px;
            padding-top: 32px;
            border-top: 1px solid #e8e8e8;
            transition: opacity 0.3s ease;
        }

        .checkout-expanded.locked {
            opacity: 0.3;
            pointer-events: none;
            user-select: none;
        }

        /* When locked AND active, clip vertically but allow horizontal overflow for step-bg */
        #step5.active:has(.checkout-expanded.locked) {
            max-height: calc(100vh - 120px);
            overflow-y: clip;
            overflow-x: visible;
        }

        /* Radio Options */
        .radio-option {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
            cursor: pointer;
        }

        .radio-circle {
            width: 24px;
            height: 24px;
            border: 2px solid #ccc;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .radio-option.active .radio-circle {
            border-color: #1a1a1a;
        }

        .radio-circle::after {
            content: '';
            width: 12px;
            height: 12px;
            background: #1a1a1a;
            border-radius: 50%;
            opacity: 0;
        }

        .radio-option.active .radio-circle::after {
            opacity: 1;
        }

        /* Delivery Address Fields - collapsed by default */
        .delivery-address-fields {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, opacity 0.25s ease-out, margin 0.3s ease-out, padding 0.3s ease-out;
            margin: 0;
            padding: 0;
        }

        .delivery-address-fields.visible {
            max-height: 200px;
            opacity: 1;
            margin: 16px 0;
            padding-top: 8px;
        }

        /* Payment method fields - collapsed by default */
        .payment-fields {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, opacity 0.25s ease-out, margin 0.3s ease-out, padding 0.3s ease-out;
            margin: 0;
            padding-top: 0;
        }

        .payment-fields.visible {
            max-height: 150px;
            opacity: 1;
            margin: 12px 0 8px 0;
            padding-top: 12px;
            overflow: visible;
        }

        /* Payment Method Box */
        .payment-method-box {
            background: rgba(0, 0, 0, 0.03);
            border-radius: 16px;
            padding: 20px 24px;
            margin: 24px 0;
        }

        .payment-method-box .radio-option:last-of-type {
            margin-bottom: 0;
        }

        .payment-method-title {
            font-weight: 600;
            margin: 0 0 16px 0;
        }

        .radio-label {
            font-size: 15px;
            color: #1a1a1a;
        }

        /* Stripe Elements */
        .stripe-element-container {
            margin-top: 16px;
        }

        .stripe-element-container.hidden {
            display: none;
        }

        .stripe-element-label {
            font-size: 13px;
            font-weight: 600;
            color: #444;
            margin-bottom: 8px;
        }

        .stripe-element {
            background: #fff;
            border: 1.5px solid #ddd;
            border-radius: 10px;
            padding: 14px 16px;
            font-size: 16px;
            transition: border-color 0.2s;
        }

        .stripe-element:focus-within,
        .stripe-element.StripeElement--focus {
            border-color: #1a1a1a;
            box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.08);
        }

        .stripe-element.StripeElement--invalid {
            border-color: #e53935;
        }

        .stripe-error {
            color: #e53935;
            font-size: 13px;
            margin-top: 6px;
            min-height: 18px;
        }

        /* Payment Error Banner */
        .payment-error {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #fff5f5;
            border: 1px solid #fecaca;
            border-radius: 10px;
            padding: 12px 16px;
            margin-bottom: 16px;
            color: #e53935;
            font-size: 14px;
        }

        /* Submitting state */
        .order-btn.submitting {
            opacity: 0.7;
            pointer-events: none;
        }

        .spinner {
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

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

        /* Success / Error page */
        .success-page-bg {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1920&q=80') center/cover no-repeat fixed;
            padding: 40px 16px;
            position: relative;
        }
        .success-page-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .success-container {
            position: relative;
            z-index: 1;
            max-width: 540px;
            width: 100%;
            text-align: center;
            padding: 48px 32px;
            background: #fff;
            border-radius: 24px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .success-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: #4CAF50;
            color: #fff;
            font-size: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
        }

        .error-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: #e53935;
            color: #fff;
            font-size: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
        }

        .order-summary {
            background: rgba(0, 0, 0, 0.03);
            border-radius: 16px;
            padding: 24px;
            margin-top: 24px;
            text-align: left;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }

        .detail-row:last-of-type {
            border-bottom: none;
        }

        .status-badge {
            background: #e8f5e9;
            color: #2e7d32;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 600;
        }

        .retry-link {
            display: inline-block;
            margin-top: 24px;
            padding: 12px 32px;
            background: #1a1a1a;
            color: #fff;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
        }

        .retry-link:hover {
            background: #333;
        }

        /* Add Note Section */
        .add-note-section {
            margin: 16px 0;
        }

        .add-note-toggle {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            font-size: 15px;
            color: #1a1a1a;
        }

        .add-note-circle {
            width: 24px;
            height: 24px;
            background: #1a1a1a;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .add-note-circle svg {
            width: 14px;
            height: 14px;
            stroke: #fff;
        }

        .note-input-container {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
            margin-top: 0;
        }

        .note-input-container.visible {
            max-height: 200px;
            opacity: 1;
            margin-top: 12px;
        }

        .note-textarea {
            width: 100%;
            min-height: 80px;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 16px;
            font-size: 14px;
            font-family: inherit;
            resize: vertical;
            box-sizing: border-box;
            transition: border-color 0.2s ease;
        }

        .note-textarea:focus {
            outline: none;
            border-color: #1a1a1a;
        }

        .note-textarea::placeholder {
            color: #999;
        }

        /* Special Conditions */
        .special-conditions {
            margin-top: 32px;
            margin-bottom: 24px;
            font-size: 13px;
            color: #666;
            line-height: 1.6;
        }

        .special-conditions h4 {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
            margin: 20px 0 0px;
        }

        .special-conditions p:last-child {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #e8e8e8;
        }

        /* Price Summary */
        .price-summary {
            margin-top: 0;
            border-radius: 28px;
        }

        .price-rows-frame {
            border: 2px solid #9E8D7F;
            border-radius: 28px 28px 0 0;
            border-bottom: none;
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
            background: #f5f5f5;
            border-bottom: 1px solid #e8e8e8;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .price-row:hover {
            background: #eeeeee;
        }

        #oneTimeSection .price-row {
            background: #e3f2fd;
            border-radius: 28px;
            margin-bottom: 0.1rem;
        }

        #oneTimeSection .price-row:hover {
            background: #d1e7f8;
        }

        .price-row.monthly {
            background: #e8f5e9;
            border-radius: 28px;
            margin-bottom: 0.1rem;
        }

        .price-row.monthly:hover {
            background: #d8ead9;
        }

        .price-row.total {
            background: #9E8D7F;
            color: #fff;
            border-radius: 0 0 28px 28px;
            cursor: default;
        }

        .price-row.total:hover {
            background: #9E8D7F;
        }

        .price-row.total .price-row-value {
            color: #fff;
        }

        .price-row-expandable {
            overflow: hidden;
        }

        .price-row-expandable:first-child {
            border-radius: 28px 28px 0 0;
        }

        .price-row-label {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
        }

        .price-row-label span:first-child {
            font-weight: 700;
        }

        .price-row-value {
            font-size: 18px;
            font-weight: 600;
        }

        .expand-icon {
            width: 24px;
            height: 24px;
            background: #1a1a1a;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .expand-icon svg {
            color: #fff;
            transform: rotate(-90deg);
            transition: transform 0.15s ease;
        }

        .expand-icon.rotated svg {
            transform: rotate(0deg);
        }

        /* Investment Details (expandable) */
        .investment-details {
            max-height: 0;
            overflow: hidden;
            background: #fff;
            transition: max-height 1s ease-out;
        }

        .investment-details.expanded {
            max-height: 2000px;
        }

        .investment-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .investment-table thead {
            border-bottom: 1px solid #e0e0e0;
        }

        .investment-table th {
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            font-size: 11px;
            color: #888;
            text-transform: uppercase;
        }

        .investment-table th.col-amount {
            width: 60px;
        }

        .investment-table th.col-unit,
        .investment-table th.col-total {
            text-align: right;
            width: 100px;
        }

        .investment-table td {
            padding: 10px 16px;
            border-bottom: 1px solid #f0f0f0;
            color: #555;
        }

        .investment-table td:first-child {
            color: #999;
            width: 60px;
        }

        .investment-table td:nth-child(3),
        .investment-table td:nth-child(4) {
            text-align: right;
        }

        .investment-table s {
            color: #bbb;
            margin-right: 4px;
        }

        .investment-table .category-row {
            background: #f8f8f8;
            border-left: 3px solid #9E8D7F;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .investment-table .category-row:hover {
            background: #f0f0f0;
        }

        .investment-table .category-row td {
            color: #333;
        }

        .investment-table .category-chevron {
            transform: rotate(-90deg);
            transition: transform 0.15s ease;
            margin-left: 4px;
        }

        .investment-table .category-row.expanded .category-chevron {
            transform: rotate(0deg);
        }

        .investment-table .sub-row td {
            padding-left: 32px;
            color: #888;
        }

        .investment-table .sub-row.collapsed {
            display: none;
        }

        .investment-summary {
            padding: 16px;
            border-top: 1px solid #e0e0e0;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            font-size: 13px;
            color: #666;
        }

        .summary-row.discount {
            background: #fff8e1;
            margin: 8px -16px;
            padding: 8px 16px;
            border-left: 3px solid #ffc107;
        }

        /* CTA */
        .cta-section {
            text-align: center;
            margin-top: 32px;
            padding-bottom: 32px;
        }

        .cta-text {
            font-size: 14px;
            color: #666;
            margin-bottom: 16px;
        }

        .cta-text strong {
            color: #4CAF50;
        }

        .order-btn {
            width: 100%;
            background: #9E8D7F;
            color: #fff;
            border: none;
            border-radius: 50px;
            padding: 20px 32px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            box-shadow: inset 0 0 0 0.2rem #9E8D7F;
            transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
        }

        .order-btn:hover {
            background: #fff;
            color: #9E8D7F;
            box-shadow: inset 0 0 0 0.2rem #9E8D7F;
        }

        .order-btn.sticky {
            position: fixed;
            bottom: 4rem;
            z-index: 1000;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15), inset 0 0 0 0.2rem #9E8D7F;
            transition: top 0.4s ease, bottom 0.4s ease, opacity 0.4s ease;
        }

        .order-btn.sticky.merging {
            position: fixed;
            transition: top 0.4s ease, opacity 0.4s ease;
        }

        .order-btn.sticky.fade-in {
            animation: fadeInButton 0.3s ease forwards;
        }

        .order-btn.sticky.fade-out {
            animation: fadeOutButton 0.3s ease forwards;
        }

        @keyframes fadeInButton {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeOutButton {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(10px);
            }
        }

        /* ========================================
           MOBILE STYLES
           ======================================== */
        @media (max-width: 768px) {

            /* Modal full screen with margins */
            .modal-overlay {
                padding: 0.375rem 0.375rem 0;
                align-items: flex-start;
            }

            .modal {
                max-width: 100%;
                width: 100%;
                height: calc(100vh - 0.375rem);
                max-height: calc(100vh - 0.375rem);
            }

            .modal-scroll {
                -webkit-overflow-scrolling: touch;
                overflow-y: auto;
                max-height: calc(100vh - 0.375rem);
            }

            /* Remove excess bottom padding causing over-scroll */
            .modal-content {
                padding-bottom: 0;
            }

            .cta-section {
                padding-bottom: 16px;
                margin-top: 16px;
            }

            /* Header - constrain to max 20vh */
            .modal-header {
                padding: 0.75rem 1.3rem 1rem 1.15rem;
                max-height: 20vh;
                min-height: auto;
            }

            .logo-svg {
                height: 32px;
            }

            /* Logo visibility - Mobile: hide full, show icon only */
            .logo-desktop {
                display: none !important;
            }

            .logo-mobile {
                display: block !important;
            }

            .book-demo-btn .btn-icon-left {
                box-shadow: inset 0 0 0 0.15rem #9E8D7F;
                padding: 10px;
            }

            .book-demo-btn .btn-icon-right {
                padding: 10px 15px 10px 10px;
            }

            .book-demo-btn .btn-text {
                padding: 0 0px 0 10px;
                font-size: 11px;
            }

            /* Steps container - remove top padding on mobile */
            .steps-container {
                padding-top: 0;
            }

            /* Step - closed state: allow media to stretch */
            .step {
                align-items: stretch;
                min-height: auto;
                padding: 15px 100px 15px 0px;
                transition: min-height var(--transition-duration) var(--easing);
            }

            /* Counter and value - position close to check icon when closed */
            .step-counter {
                position: absolute;
            }

            .step-value {
                position: absolute;
                right: 35px;
                width: auto;
            }

            /* Step media - closed element */
            .step-media {
                width: 20vw;
                height: auto;
                min-height: 100%;
            }

            /* Hide media only on checkout step */
            #step5 .step-media {
                display: none;
            }

            /* Opened step - establish min-height for content */
            .step.active {
                min-height: 25vh;
                align-items: stretch;
                flex-wrap: wrap;
                padding-right: 0;
                padding-top: 15px;
                padding-bottom: 15px;
            }

            .step-content {
                margin-right: 0rem;
                margin-bottom: 0rem;
                transition: margin-right var(--transition-duration) var(--easing),
                    margin-bottom var(--transition-duration) var(--easing);
            }

            .step.active .step-content {
                min-height: auto;
                margin-right: 3rem;
                margin-bottom: 5rem;
            }

            .step-title {
                font-size: 15px;
                margin: 0;
                transition: margin var(--transition-duration) var(--easing);
            }

            .step.active .step-title {
                font-size: 15px;
                margin: 8px 0px;
            }

            .step-description {
                font-size: 12px;
                margin-bottom: 0;
                transition: max-height var(--transition-duration) var(--easing),
                    opacity var(--transition-duration) var(--easing),
                    margin-bottom var(--transition-duration) var(--easing);
            }

            .step.active .step-description {
                max-height: 50px;
                opacity: 1;
                margin-bottom: 8px;
            }

            /* Show only the shortest-title info pill on mobile */
            .step-tag:not(.shortest-title) {
                display: none;
            }

            /* Disable hover on mobile - only use .tag-open class */
            .step-tag:hover:not(.tag-open) {
                z-index: 1;
                border-radius: 20px;
                background: transparent;
                border: 1px dashed #9E8D7F;
                color: #9E8D7F;
            }

            .step-tag:hover:not(.tag-open) .step-tag-detail {
                max-height: 0;
                opacity: 0;
                padding: 0 11px;
            }

            .step-tag:hover:not(.tag-open) .step-tag-info {
                background: #9E8D7F;
                color: #fff;
                border: 1px solid #9E8D7F;
            }

            /* Change "i" to "×" on mobile when tag is open */
            .step-tag.tag-open .step-tag-info {
                font-size: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .step-tag.tag-open .step-tag-info::before {
                content: '×';
                font-size: 16px;
                font-weight: 400;
                line-height: 1;
                position: relative;
                top: -1px;
            }

            .step-controls {
                top: 50%;
                right: -10px;
                transition: top var(--transition-duration) var(--easing),
                    right var(--transition-duration) var(--easing);
            }

            .step.active .step-controls {
                top: 78%;
                right: 95px;
            }

            /* Step 2 specific - shorter right position when closed */
            #step2:not(.active) .step-controls {
                right: 9px;
            }

            .ok-btn-wrapper {
                top: 78%;
                right: -6px;
            }

            .ok-btn {
                padding: 8px 8px 8px 18px;
            }

            .counter-btn {
                width: 38px;
                height: 38px;
                touch-action: manipulation;
                user-select: none;
                -webkit-user-select: none;
                -webkit-tap-highlight-color: transparent;
            }

            .toggle-btn {
                padding: 11px 15px;
            }

            /* Shorten "Refurbished" to "Refurb" on mobile */
            .toggle-btn[data-value="refurbished"] {
                font-size: 0;
            }

            .toggle-btn[data-value="refurbished"]::before {
                content: "Refurb";
                font-size: 14px;
            }

            /* Dotted line positioning for step 1 */
            #step1 .dotted-line-up {
                top: 72%;
            }

            #step1 .dotted-line-down {
                top: 72%;
            }

            /* Green line for completed steps - going down */
            .step.completed::after {
                top: 63%;
                transition: top var(--transition-duration) var(--easing);
            }

            .step.active.completed::after {
                top: 71%;
            }

            /* Green line coming from previous completed step - going into next step */
            .step.completed+.step::before {
                bottom: 63%;
                transition: bottom var(--transition-duration) var(--easing);
            }

            .step.completed+.step.active::before {
                bottom: 22%;
            }

            /* Step media - opened element: same calculation */
            .step.active .step-media {
                width: 20vw;
                height: auto;
                min-height: 100%;
            }

            /* Reset counter positioning when step is active */
            .step.active .step-counter {
                position: static;
            }

            .step.active .step-value {
                position: static;
            }

            .close-btn {
                width: 32px;
                height: 32px;
            }

            .close-btn svg {
                width: 24px;
                height: 24px;
            }

            /* Content padding adjustments */
            .modal-content {
                padding: 24px 0px;
            }

            .steps-container {
                padding-left: 16px;
                padding-right: 16px;
            }

            .step-content {
                padding: 0;
            }

            /* Form fields with intelligent sizing */
            .form-row {
                flex-wrap: wrap;
            }

            .form-group {
                min-width: 200px;
                flex: 1 1 auto;
            }

            /* Smaller fields */
            .form-group:has([name="postal-code"]),
            .form-group:has([name="shipping-postal-code"]) {
                min-width: 120px;
                flex: 0 1 auto;
            }

            .form-group:has([name="cc-exp"]) {
                min-width: 100px;
            }

            .form-group:has([name="cc-csc"]) {
                min-width: 80px;
            }

            /* Salutation toggles */
            .form-group.small {
                min-width: auto;
            }

            .form-group.small .toggle-btn {
                padding: 14px 16px;
                font-size: 15px;
            }

            /* Checkout section */
            #step5 {
                padding-right: 0;
                margin-bottom: -2rem;
            }

            #step5.active .step-content {
                margin-right: 0;
            }

            /* Adjust checkout locked height for mobile margins */
            #step5.active:has(.checkout-expanded.locked) {
                max-height: calc(100vh - 40px);
            }

            /* Adjust step background for mobile container padding */
            .step-bg {
                left: -16px;
                right: -16px;
            }

            .checkout-expanded,
            .form-row {
                max-width: calc(100vw - 48px);
                flex-wrap: wrap;
            }

            .form-input,
            select.form-input {
                box-sizing: border-box;
                font-size: 16px;
            }

            .phone-input {
                font-size: 16px;
            }

            .note-textarea {
                font-size: 16px;
            }

            .counter-value,
            .step-value {
                font-size: 16px;
            }

            /* Fix payment fields height for mobile wrapping */
            .payment-fields.visible {
                max-height: 300px;
            }

            /* Payment method selectors side by side on mobile */
            .payment-method-box {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
            }

            .payment-method-title {
                flex-basis: 100%;
                order: 1;
            }

            .radio-option[data-payment="card"] {
                order: 2;
                flex: 0 0 auto;
                margin-bottom: 0;
            }

            .radio-option[data-payment="sepa"] {
                order: 3;
                flex: 0 0 auto;
                margin-bottom: 0;
            }

            .payment-fields {
                order: 4;
                flex-basis: 100%;
            }

            /* Order button - reduce bottom margin */
            .order-btn.sticky {
                bottom: 2rem;
            }

            /* Step tags */
            .step-tags {
                gap: 8px;
            }

            .step-tag {
                font-size: 12px;
                padding: 8px 12px;
            }

            /* Price summary */
            .price-row {
                padding: 12px 16px;
            }

            .price-row-value {
                font-size: min(2.5vw, 14px);
            }

            .price-row-label {
                font-size: min(2.5vw, 14px);
            }

            .investment-table td {
                padding: 10px 8px;
            }

            .investment-table th {
                padding: 3px 9px;
                font-size: 8px;
            }

            /* Benefits box */
            .benefits-box {
                padding: 16px;
                max-width: calc(100vw - 48px);
                box-sizing: border-box;
            }

            .benefit-item {
                font-size: min(2.8vw, 14px);
            }

            .discount-button-container {
                max-width: calc(100vw - 48px);
                box-sizing: border-box;
            }

            .privacy-note {
                max-width: calc(100vw - 48px);
                box-sizing: border-box;
                word-wrap: break-word;
                overflow-wrap: break-word;
                display: block;
                padding: 0rem 1rem;
            }

            .submit-btn {
                font-size: min(2.9vw, 14px);
            }

            .add-note-section {
                max-width: calc(100vw - 48px);
            }

            .add-note-label {
                font-size: 15px;
            }

            /* Sticky summary bar adjustments */
            .sticky-summary {
                padding: 0;
                margin-left: -17px;
                margin-right: 0px;
                width: 110%;
            }

            .sticky-summary.visible {
                padding: 12px 16px;
            }

            .sticky-summary.fixed {
                width: calc(100% - 12px);
                left: 6px;
                margin: 0;
            }

            .sticky-summary-text {
                flex: 3;
                font-size: 12px;
                line-height: 1.3;
            }

            /* Split text into 3 lines on mobile */
            .sticky-summary-text {
                font-size: 0;
            }

            .sticky-summary-text::before {
                content: 'Ordercube System License\A for ';
                font-size: 12px;
                white-space: pre;
            }

            .sticky-summary-text strong {
                font-size: 12px;
            }

            .sticky-summary-text strong:nth-of-type(1)::after,
            .sticky-summary-text strong:nth-of-type(2)::after {
                content: ' · ';
                font-size: 12px;
            }

            .sticky-summary-text strong:nth-of-type(3)::before {
                content: '\A';
                white-space: pre;
            }

            .sticky-summary-text strong:nth-of-type(3)::after {
                content: ' · ';
                font-size: 12px;
            }

            .sticky-summary-price {
                flex: 1;
                flex-direction: column-reverse;
                align-items: flex-end;
                gap: 4px;
            }

            .sticky-summary-check {
                display: none;
            }

            .sticky-summary-price-value {
                font-size: min(5vw, 3vh);
            }

            .sticky-summary-price-label {
                text-align: left;
                font-size: max(min(2vw, 1.5vh), 8px);
            }

            .summary-item {
                font-size: 13px;
            }

            /* Modal bottom margin when scrolled */
            .modal-scroll {
                padding-bottom: 0.375rem;
            }
        }

        /* ── Language-specific overrides ────────────────────────────────── */

        /* English: slightly smaller mobile fonts where German text is shorter */
        @media (max-width: 768px) {
            .lang-en .sticky-summary-text {
                font-size: max(min(1.8vw, 1.3vh), 7px);
            }
        }

        /* CSS variable for summary prefix on mobile (used by sticky bar) */
        :root {
            --summary-mobile-prefix: "Ordercube Systemlizenz für";
        }

        .lang-en {
            --summary-mobile-prefix: "Ordercube System License for";
        }

        /* ========================================
           BOOK-A-CALL MODAL
           ======================================== */

        .book-call-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .book-call-modal {
            background: #fff;
            border-radius: 28px;
            width: 100%;
            max-width: 480px;
            max-height: 90vh;
            overflow-y: auto;
            padding: 32px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
            animation: bookCallSlideUp 0.3s ease;
        }

        @keyframes bookCallSlideUp {
            from {
                opacity: 0;
                transform: translateY(24px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .book-call-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
        }

        .book-call-header h2 {
            font-size: 22px;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0;
        }

        .book-call-close-x {
            width: 36px;
            height: 36px;
            border: none;
            background: #f5f5f5;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
            flex-shrink: 0;
        }

        .book-call-close-x:hover {
            background: #e0e0e0;
        }

        .book-call-close-x svg {
            width: 18px;
            height: 18px;
            color: #666;
        }

        .book-call-subtitle {
            font-size: 14px;
            color: #666;
            margin: 0 0 24px;
            line-height: 1.5;
        }

        /* Salutation row inside book-call */
        .book-call-modal .salutation-row {
            display: flex;
            gap: 0;
            margin-bottom: 16px;
            border: 2px solid #e0e0e0;
            border-radius: 28px;
            overflow: hidden;
        }

        .book-call-modal .salutation-row .toggle-btn {
            flex: 1;
            border-radius: 0;
            padding: 12px 16px;
        }

        /* Form groups inside book-call */
        .book-call-modal .form-group {
            margin-bottom: 16px;
        }

        .book-call-modal .form-input.invalid {
            border-color: #e53935;
        }

        /* Phone group inside book-call — reuses the existing .phone-group,
           .country-select, .phone-input-wrapper, .phone-input, .phone-label,
           and .country-dropdown styles from checkout.  Only spacing override. */
        .book-call-modal .phone-group {
            margin-bottom: 16px;
        }

        /* Show the conditionally-rendered dropdown (Dioxus mounts/unmounts it) */
        .book-call-modal .country-dropdown {
            display: block;
        }

        /* Error message */
        .book-call-error {
            color: #e53935;
            font-size: 13px;
            margin: 8px 0 16px;
        }

        /* Submit button */
        .book-call-submit {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: 28px;
            font-size: 16px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.2s ease, opacity 0.2s ease;
            background: #ccc;
            color: #fff;
            margin-top: 8px;
        }

        .book-call-submit.active {
            background: #1a1a1a;
            color: #fff;
        }

        .book-call-submit.active:hover {
            background: #333;
        }

        .book-call-submit:disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }

        /* Success state */
        .book-call-success {
            text-align: center;
            padding: 24px 0;
        }

        .book-call-success-icon {
            margin-bottom: 16px;
        }

        .book-call-success-icon svg {
            width: 56px;
            height: 56px;
        }

        .book-call-success h3 {
            font-size: 20px;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0 0 8px;
        }

        .book-call-success p {
            font-size: 14px;
            color: #666;
            margin: 0 0 24px;
            line-height: 1.5;
        }

        .book-call-close-btn {
            display: inline-block;
            padding: 14px 32px;
            border: none;
            border-radius: 28px;
            background: #1a1a1a;
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .book-call-close-btn:hover {
            background: #333;
        }

        /* ── Booking scheduler (Calendly / OnceHub iframe) ──────────────── */
        .book-call-modal--scheduler {
            max-width: 760px;
            padding: 0;
            overflow: hidden;
        }

        .book-call-modal--scheduler .book-call-header {
            padding: 24px 28px 16px;
            margin-bottom: 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .booking-iframe {
            display: block;
            width: 100%;
            height: 640px;
            border: none;
        }

        @media (max-width: 600px) {
            .booking-iframe {
                height: 520px;
            }
        }

        /* ── Book-call responsive ────────────────────────────────────── */
        @media (max-width: 480px) {
            .book-call-modal {
                padding: 24px 20px;
                border-radius: 20px;
            }

            .book-call-header h2 {
                font-size: 18px;
            }
        }