/* Reset + Basic */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html, body {
            width: 100%;
            min-height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column; /* Ensure header and container are in a column */
            align-items: stretch; /* Let children span full width (prevents centering the header) */
        }
        img, svg {
            max-width: 100%;
            height: auto;
        }

        /* Authentication button styles */
        .auth-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8rem;
        }
        .auth-btn:hover {
            background: #007bff;
        }
        .reauth-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 3000;
        }
        .reauth-modal.show {
            display: flex;
        }
        .reauth-modal-content {
            background: #ffffff;
            border-radius: 12px;
            padding: 24px;
            width: min(420px, 92vw);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
            text-align: left;
        }
        .reauth-modal-content h3 {
            margin-bottom: 8px;
            font-size: 1.2rem;
            color: #111827;
        }
        .reauth-modal-content p {
            font-size: 0.9rem;
            color: #4b5563;
            margin-bottom: 16px;
        }
        .reauth-modal-content input {
            width: 100%;
            padding: 10px 12px;
            border-radius: 6px;
            border: 1px solid #d1d5db;
            font-size: 0.9rem;
            margin-bottom: 12px;
        }
        .reauth-modal-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        .reauth-modal-actions button {
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85rem;
        }
        .reauth-submit-btn {
            background: #007bff;
            color: #fff;
        }
        .reauth-cancel-btn {
            background: #e5e7eb;
            color: #374151;
        }
        .reauth-error {
            color: #dc2626;
            font-size: 0.85rem;
            margin-bottom: 8px;
            display: none;
        }
        .locked-input {
            opacity: 0.65;
            cursor: not-allowed;
            background-color: #f3f3f3 !important;
        }
        
        /* Step 0 Authentication Styles */
        .auth-step-content {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 20px;
        }
        
        .auth-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .auth-section h3 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.6rem;
        }
        
        .auth-section p {
            color: #666;
            margin-bottom: 25px;
            line-height: 1.6;
            font-size: 1rem;
        }
        
        .auth-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }
        
        .auth-btn.primary {
            background: #007bff;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.2s;
        }
        
        .auth-btn.primary:hover {
            background: #007bff;
        }
        
        .auth-status-message {
            padding: 15px;
            border-radius: 6px;
            margin-top: 15px;
            font-weight: 500;
        }
        
        .auth-status-message.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .auth-status-message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .auth-status-message.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        .hidden {
            display: none !important;
        }
        .session-restore-banner {
            position: fixed;
            top: 70px;
            left: 50%;
            transform: translate(-50%, -8px);
            z-index: 1200;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            border-radius: 999px;
            background: #e8f7e9;
            border: 1px solid #b7e4c7;
            color: #1b5e20;
            box-shadow: var(--shadow-soft);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s ease;
            font-size: 0.95rem;
        }
        .session-restore-banner.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, 0);
        }
        .session-restore-text {
            white-space: nowrap;
        }
        .session-restore-dismiss {
            background: transparent;
            border: none;
            color: #1b5e20;
            font-weight: bold;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 999px;
        }
        .session-restore-dismiss:hover {
            background: rgba(27, 94, 32, 0.12);
        }
        @media (max-width: 768px) {
            .session-restore-banner {
                top: 64px;
                width: calc(100% - 24px);
                justify-content: space-between;
                font-size: 0.9rem;
                padding: 10px 14px;
            }
            .session-restore-text {
                white-space: normal;
                line-height: 1.3;
            }
        }

        :root {
            --page-max-width: 1400px;
            --page-gutter: clamp(16px, 3vw, 28px);
            --card-radius: 12px;
            --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.08);
            --right-panel-width: 23.33%;
            --left-panel-width: calc(100% - var(--right-panel-width));
            --right-step-font-size: clamp(0.55rem, 1.1vw, 0.6rem);
            --right-step-number-size: clamp(1.1rem, 2.2vw, 1.2rem);
            --nav-arrow-width: 30%;
            --nav-arrow-height: clamp(32px, 6vw, 50px);
            --nav-arrow-font-size: clamp(0.4rem, 1vw, 0.5rem);
            --nav-arrow-offset-up: clamp(54px, 10vw, 85px);
            --nav-arrow-offset-down: clamp(22px, 4vw, 35px);
        }

        .container {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: 100%;
            max-width: var(--page-max-width);
            margin: 0 auto;
            padding: var(--page-gutter);
            box-sizing: border-box;
            gap: clamp(12px, 2vw, 20px);
            height: calc(100vh - 64px); /* Subtract shared header height */
        }

        /* LEFT PANEL - 2/3 width, vertically centered */
        .left-panel {
            width: var(--left-panel-width);
            flex: 0 0 var(--left-panel-width);
            background: #f5f5f5;
            overflow-y: auto; /* allow full content access */
            overflow-x: hidden;
            position: relative;
            height: 100%; /* Full height of the container */
            border-radius: var(--card-radius);
            box-shadow: var(--shadow-soft);
        }
        .left-carousel-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%; /* Full width to position steps */
            height: 100%; /* Full height of the parent */
            overflow: hidden; /* Hide overflow to prevent scrolling */
        }
        .left-step {
            width: 100%;
            max-width: 100%;
            height: auto; /* Adjust height to content */
            padding: 20px;
            max-height: calc(100vh - 140px);
            overflow-y: auto;
            transition: all 0.5s ease;
            text-align: center;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%); /* Initial centering */
            opacity: 1;
            top: 50%; /* Initial centering */
            font-size: 100%; /* Default font size */
            background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
            border-radius: var(--card-radius); /* Rounded corners */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
            display: none;
        }
        .left-step.active {
            display: block;
        }
        /* All steps are positioned by JavaScript now, these initial positions
           will be overridden by our updateStepPositions function */
        .left-step[data-step="0"] {
            opacity: 1;
        }
        .left-step[data-step="1"],
        .left-step[data-step="2"],
        .left-step[data-step="3"],
        .left-step[data-step="4"] {
            opacity: 0.7; /* Start slightly transparent */
        }
        .left-step h2 {
            margin-bottom: 10px;
        }
        .output-box {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            background: #fff;
            word-wrap: break-word;
            white-space: pre-wrap;
        }
        .process-summary-panel {
            text-align: center;
            white-space: normal;
        }
        .process-summary-panel * {
            white-space: normal;
        }
        .process-summary-panel h4 {
            margin-bottom: 10px;
        }
        .process-summary-list,
        .process-summary-actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .process-summary-list {
            margin-top: 6px;
        }
        .process-summary-actions {
            margin-top: 0;
            text-align: center;
        }
        .process-summary-line {
            margin: 0;
            line-height: 1.35;
        }
        .process-summary-note {
            color: #F7931A;
        }
        .proof-packet-actions .proof-packet-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .process-summary-actions .proof-packet-meta,
        .process-summary-actions .proof-packet-note {
            width: 100%;
            text-align: center;
        }
        .proof-packet-actions .proof-packet-note {
            font-size: 0.9em;
            color: #6c757d;
        }
        .inline-container {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-top: 5px;
            justify-content: center; /* center horizontally */
        }
        input[type="text"],
        input[type="number"],
        input[type="file"],
        input[type="hidden"] {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
        }
        /* File inputs styled as blue buttons */
        .file-btn::file-selector-button {
            background-color: #007bff;
            border: 1px solid #007bff;
            color: #ffffff;
            border-radius: 6px;
            padding: 8px 12px;
            cursor: pointer;
            box-shadow: 0 8px 16px rgba(37, 99, 235, 0.15);
            transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
        }
        .file-btn::file-selector-button:hover {
            background-color: #007bff;
            border-color: #007bff;
            filter: brightness(1.05);
            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
        }
        .file-btn::file-selector-button:disabled {
            background-color: #007bff;
            border: 1px solid #007bff;
            color: #ffffff;
            opacity: 0.6;
            cursor: not-allowed;
        }
        button {
            margin-top: 5px;
            padding: 8px 16px;
            cursor: pointer;
        }
        
        /* Step 1 numbered buttons - unified blue styling */
        #create-pdf-btn,
        #generate-hash-btn,
        #download-pdf-btn,
        #proceed-step2-btn,
        #broadcast-button {
            background-color: #007bff; /* brand blue */
            border: 1px solid #007bff;
            color: #ffffff;
            border-radius: 6px;
            padding: 10px 14px;
            box-shadow: 0 8px 16px rgba(37, 99, 235, 0.15);
            transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
        }
        
        #create-pdf-btn:hover,
        #generate-hash-btn:hover,
        #download-pdf-btn:hover,
        #proceed-step2-btn:hover,
        #broadcast-button:hover {
            background-color: #007bff;
            border-color: #007bff;
            filter: brightness(1.05);
            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
        }
        
        /* Ensure disabled buttons also keep pale blue color */
        #create-pdf-btn:disabled,
        #generate-hash-btn:disabled,
        #download-pdf-btn:disabled,
        #proceed-step2-btn:disabled {
            background-color: #007bff !important; /* keep blue even when disabled */
            border: 1px solid #007bff !important;
            color: #ffffff !important;
            opacity: 0.6; /* Slight transparency to indicate disabled state */
        }

        .proof-download-btn {
            background-color: #007bff;
            border: 1px solid #007bff;
            color: #ffffff;
            border-radius: 6px;
            padding: 8px 16px;
            cursor: pointer;
            box-shadow: 0 8px 16px rgba(37, 99, 235, 0.15);
            transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
        }

        .proof-download-btn:hover {
            background-color: #007bff;
            border-color: #007bff;
            filter: brightness(1.05);
            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
        }

        .proof-packet-actions .proof-packet-create-btn,
        .proof-packet-actions .proof-packet-finish-btn {
            border-radius: 6px;
            padding: 10px 18px;
            border: 1px solid transparent;
            color: #ffffff;
            font-weight: 600;
            box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
            transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
        }

        .proof-packet-actions .proof-packet-create-btn {
            background-color: #007bff;
            border-color: #007bff;
        }

        .proof-packet-actions .proof-packet-finish-btn {
            background-color: #111827;
            border-color: #111827;
        }

        .proof-packet-actions .proof-packet-create-btn:hover,
        .proof-packet-actions .proof-packet-finish-btn:hover {
            filter: brightness(1.05);
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
        }

        .proof-packet-actions button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            box-shadow: none;
            filter: none;
        }

        .proof-download-btn.saved {
            background-color: #94d3a2;
            border-color: #94d3a2;
            color: #ffffff;
            box-shadow: none;
        }

        #broadcast-button.broadcast-disabled,
        #broadcast-button:disabled:not(.broadcasted) {
            background-color: #6c757d !important;
            border: 1px solid #6c757d !important;
            color: #ffffff !important;
            cursor: not-allowed !important;
            opacity: 0.7;
        }
        #broadcast-button.broadcasted {
            background-color: #94d3a2 !important;
            border-color: #94d3a2 !important;
            color: #ffffff !important;
            box-shadow: none;
        }
        
        /* Step completion indicator */
        .step-locked {
            opacity: 0.5;
            pointer-events: none;
            position: relative;
        }
        
        .step-locked::before {
            content: "🔒 Complete Step 1 first";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.9);
            padding: 10px;
            border-radius: 4px;
            font-weight: bold;
            color: #666;
            border: 1px solid #ccc;
            z-index: 10;
        }
        
        .two-column {
            display: flex;
            gap: 10px;
            margin-top: 5px;
            justify-content: center;
        }
        .two-column > div {
            flex: 1;
            min-width: 120px;
        }
        
        /* Styles for the payment options */
        .option-card {
            border: 1px solid #ff8c00;
            border-radius: 8px;
            padding: 18px;
            margin: 10px 0;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 90%;
            background-color: rgba(255, 140, 0, 0.05);
        }
        .option-card:hover {
            border-color: #ff8c00;
            box-shadow: 0 2px 10px rgba(255, 140, 0, 0.2);
        }
        .option-card.selected {
            border-color: #ff8c00;
            background-color: rgba(255, 140, 0, 0.15);
            box-shadow: 0 2px 10px rgba(255, 140, 0, 0.3);
        }
        .option-card.inactive {
            opacity: 0.55;
            filter: grayscale(0.35);
        }
        .option-card.locked {
            pointer-events: none;
            opacity: 0.65;
        }
        .option-details {
            display: flex;
            flex-direction: column;
        }
        .option-title {
            font-weight: bold;
            font-size: 1.4em;
        }
        .option-description {
            color: #666;
            font-size: 1.1em;
        }
        .option-price {
            font-weight: bold;
            font-size: 1.5em;
            color: #ff8c00;
        }
        
        .payment-methods {
            display: none;
            margin-top: 20px;
        }
        .payment-methods h3 {
            margin-bottom: 10px;
        }
        .payment-method {
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 12px;
            margin: 8px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
        }
        .payment-method:hover {
            border-color: #007bff;
        }
        .payment-method.selected {
            border-color: #007bff;
            background-color: rgba(0, 123, 255, 0.05);
        }
        .payment-icon {
        }
        /* Stripe Card Element styles */
        #card-element {
            margin-top: 16px;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background: #fff;
            min-height: 44px;
        }
        #card-errors {
            color: #e74c3c;
            margin-top: 8px;
        }
        #pay-button {
            margin-top: 18px;
            padding: 10px 24px;
            background: #007bff;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 1.1em;
            cursor: pointer;
            display: none;
        }
        #pay-button:disabled {
            background: #aaa;
            cursor: not-allowed;
        }
        .payment-icon {
            width: 30px;
            height: 30px;
            background-color: #f0f0f0;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .payment-name {
            font-weight: 500;
        }
        
        .proceed-button {
            display: none;
            margin-top: 15px;
        }
        .proceed-button button {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
        }
        .proceed-button button:hover {
            background-color: #007bff;
        }
        
        .payment-summary {
            margin-top: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .summary-total {
            font-weight: bold;
            border-top: 1px solid #ddd;
            padding-top: 8px;
            margin-top: 8px;
        }
        
        .payment-confirmation {
            display: none;
            margin-top: 20px;
            padding: 15px;
            background-color: #d4edda;
            border-radius: 8px;
            border: 1px solid #c3e6cb;
            color: #155724;
            white-space: pre-wrap;
        }
        
        .continue-button {
            display: none;
            margin-top: 15px;
        }
        .continue-button button {
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
        }
        .continue-button button:hover {
            background-color: #218838;
        }

        /* RIGHT PANEL - 1/3 width, user-scrolling vertical dial */
        .right-panel {
            width: var(--right-panel-width);
            flex: 0 0 var(--right-panel-width);
            background: #fff;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: var(--card-radius);
            box-shadow: var(--shadow-soft);
        }
        .right-carousel-container {
            height: 100%;
            overflow-y: auto;
            scroll-snap-type: y mandatory;
            scroll-snap-type: block mandatory;
            scrollbar-width: none;
            position: relative;
        }
        .right-carousel-container::-webkit-scrollbar {
            display: none;
        }
        .right-step {
            width: 100%;
            height: 100%;
            min-height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            scroll-snap-align: center;
            scroll-snap-stop: always;
            font-size: var(--right-step-font-size);
            text-align: center;
            opacity: 0.5;
            transition: opacity 0.3s, transform 0.3s;
            padding: 20px;
            position: relative;
        }
        .right-step.active {
            opacity: 1;
            transform: scale(1.1);
            font-weight: bold;
        }
        .right-step.locked {
            opacity: 0.3;
            color: #6c757d;
            cursor: not-allowed;
            position: relative;
        }
        .right-step.locked::before {
            content: "🔒 ";
            font-size: 0.5rem;
            margin-right: 8px;
        }
        .right-step.locked:hover {
            opacity: 0.3;
            transform: none;
        }
        .right-step > div:not(.nav-arrow) {
            font-size: var(--right-step-number-size);
            line-height: 1;
        }

        .title {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        .btc-success-box {
            background-color: #d4edda;
            color: #155724;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 5px;
            border: 1px solid #c3e6cb;
            text-align: center;
            font-size: 0.95em;
        }

        .btc-explorer-link {
            margin-top: 5px;
            margin-bottom: 5px;
            text-align: center;
            font-size: 0.9em;
        }
        .btc-explorer-link a {
            color: #007bff;
            text-decoration: none;
        }
        .btc-explorer-link a:hover {
            text-decoration: underline;
        }

        /* Step 3 success layout adjustments */
        .btc-success-box p {
            margin: 4px 0;
        }
        .btc-explorer-link a {
            display: inline-block;
            margin: 10px auto;
        }
        .assertion-details {
            margin-top: 10px;
            font-size: 0.9em;
            color: #6c757d;
            text-align: center;
        }
        .step3-proceed-container {
            margin-top: 15px;
            text-align: center;
        }
        .step3-proceed-container button {
            background-color: #6c757d;
            padding: 8px 16px;
            cursor: pointer;
        }
        .pdf-safety-note {
            text-align: center;
            font-size: 0.85rem;
            line-height: 1.4;
            margin: 0;
        }
        .pdf-download-attention {
            border-radius: 10px;
            background: rgba(247, 147, 26, 0.12);
            box-shadow: 0 0 0 2px rgba(247, 147, 26, 0.45), 0 0 0 6px rgba(247, 147, 26, 0.18);
            padding: 4px 8px;
            animation: pdfAttentionPulse 1.2s ease-in-out 0s 2;
        }
        @keyframes pdfAttentionPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(247, 147, 26, 0.3);
            }
            50% {
                box-shadow: 0 0 0 8px rgba(247, 147, 26, 0.2);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(247, 147, 26, 0.0);
            }
        }

        /* Compact Step 3 success elements */
        .left-step[data-step="3"] .btc-success-box,
        .left-step[data-step="3"] .btc-explorer-link,
        .left-step[data-step="3"] .assertion-details,
        .left-step[data-step="3"] .step3-proceed-container {
            margin: 4px 0 !important;
            padding: 0 !important;
        }

        /* Hide initial form elements for Step 3 once submitted */
        .left-step[data-step="3"].submitted .step-content > p,
        .left-step[data-step="3"].submitted .step-content > button,
        .left-step[data-step="3"].submitted #assertion-content-hash {
            display: none !important;
        }

        /* Reduce vertical size of Step 3 box */
        .left-step[data-step="3"] {
            max-height: calc(100vh - 140px) !important;
            padding: 10px 15px !important;
            overflow-y: auto !important;
            width: 100% !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
            margin-bottom: 20px !important;
        }
        .left-step[data-step="3"] .step-content {
            padding: 8px 0 !important;
        }
        .left-step[data-step="3"] .step-content p {
            margin: 4px 0 !important;
            font-size: 0.9em;
        }
        .left-step[data-step="3"] #assertion-content-hash {
            margin-bottom: 8px !important;
            max-height: 750px !important;
            overflow-y: auto !important;
        }
        .left-step[data-step="3"] .step-content > button {
            margin: 4px 0 !important;
        }

        /* Hide Step 5 initially until the process is complete */
        .left-step[data-step="5"] {
            display: none !important;
        }
        .right-step[data-step="5"] {
            display: none !important;
        }

        /* Show Step 5 when process is complete */
        .left-step[data-step="5"].process-complete {
            display: block !important;
        }
        .right-step[data-step="5"].process-complete {
            display: flex !important;
        }

        /* Navigation arrows for right carousel */
        .nav-arrow {
            position: absolute;
            width: var(--nav-arrow-width);
            height: var(--nav-arrow-height);
            background-color: rgba(255, 165, 0, 0.3); /* Pale orange, semi-transparent */
            border: 1px solid rgba(255, 165, 0, 0.5);
            display: none; /* Hide by default */
            justify-content: center;
            align-items: center;
            font-size: var(--nav-arrow-font-size);
            font-weight: bold;
            color: rgba(255, 140, 0, 0.8);
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            z-index: 10;
            clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
        }
        .nav-arrow:hover {
            background-color: rgba(255, 165, 0, 0.4);
            transform: scale(1.05);
        }
        .nav-arrow.up {
            top: calc(50% - var(--nav-arrow-offset-up));
            clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
        }
        .nav-arrow.down {
            top: calc(50% + var(--nav-arrow-offset-down));
            clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        }
        .nav-arrow.up::before {
            content: "";
        }
        .nav-arrow.down::before {
            content: "";
        }

        /* Show arrows only when step is active */
        .right-step.active .nav-arrow {
            display: flex;
        }

        /* Responsive adjustments */
        @media (max-width: 1280px) {
            .container {
                max-width: 1200px;
            }
        }

        @media (max-width: 1024px) {
            .container {
                gap: clamp(12px, 3vw, 20px);
                padding: clamp(14px, 3vw, 22px);
            }
            .left-step {
                width: 100%;
                max-height: calc(100vh - 120px);
            }
            .two-column {
                flex-direction: column;
            }
            .two-column > div {
                width: 100%;
            }
            .option-card {
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: clamp(12px, 4vw, 18px);
            }
            .left-panel {
                -webkit-overflow-scrolling: touch;
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
            }
            .left-carousel-container {
                position: relative;
                height: auto;
                overflow: visible;
            }
            .left-step,
            .right-step {
                padding: clamp(16px, 5vw, 22px);
            }
            .left-step {
                width: 100%;
                max-height: calc(100vh - 110px);
            }
            h1, h2, .title {
                font-size: clamp(1.4rem, 4vw, 1.8rem);
            }
            .option-title {
                font-size: 1.15em;
            }
            .option-description {
                font-size: 1em;
            }
            .option-price {
                font-size: 1.2em;
            }
        }