:root {
            --bg: #140d12;
            --panel: rgba(39, 27, 34, 0.74);
            --line: rgba(235, 221, 228, 0.13);
            --line-strong: rgba(235, 221, 228, 0.25);
            --text: #efe6ea;
            --muted: #baa4ae;
            --muted-soft: #8c7581;
            --accent: #8d6a79;
            --accent-strong: #d6bac7;
            --paper: #f1e7eb;
            --success: #91c6af;
        }

        /* ── Light Mode Variables ── */
        html[data-theme="light"] {
            --bg: #fbeaf2;
            --panel: rgba(252, 232, 242, 0.84);
            --line: rgba(90, 45, 68, 0.14);
            --line-strong: rgba(90, 45, 68, 0.26);
            --text: #1c0f17;
            --muted: #6b4456;
            --muted-soft: #9e7080;
            --accent: #8b3055;
            --accent-strong: #5c1935;
            --paper: #1c0f17;
            --success: #1a6e42;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        input { caret-color: var(--paper); }

        body.scroll-locked {
            overflow: hidden;
            position: fixed;
            width: 100%;
            overscroll-behavior: none;
        }

        html, body {
            height: 100%;
            overflow: hidden;
            overscroll-behavior: none;
            background: var(--bg);
            color-scheme: dark;
        }

        html[data-theme="light"], html[data-theme="light"] body {
            color-scheme: light;
        }
        html[data-theme="light"] body {
            background:
                radial-gradient(circle at top left, rgba(210, 110, 155, 0.18), transparent 32%),
                radial-gradient(circle at 80% 20%, rgba(220, 140, 175, 0.1), transparent 24%),
                var(--bg);
        }
        /* ── Product debut button ── */
        html[data-theme="light"] .disc-debut-btn {
            border-color: rgba(90, 45, 68, 0.24);
            background: rgba(90, 45, 68, 0.08);
            color: var(--muted);
        }
        html[data-theme="light"] .disc-debut-btn:hover,
        html[data-theme="light"] .disc-debut-btn:focus {
            background: rgba(90, 45, 68, 0.13);
            border-color: rgba(90, 45, 68, 0.38);
            color: var(--text);
        }
        /* ── Sign-in button ── */
        html[data-theme="light"] .custom-signin-btn {
            border-color: rgba(90, 45, 68, 0.22);
            background: rgba(90, 45, 68, 0.06);
        }
        html[data-theme="light"] .custom-signin-container:hover .custom-signin-btn {
            background: rgba(90, 45, 68, 0.1);
            border-color: rgba(90, 45, 68, 0.36);
        }
        /* ── Disclaimer / continue-hint text ── */
        html[data-theme="light"] .step-disclaimer { color: var(--muted); }
        html[data-theme="light"] .disc-continue-text { color: var(--muted-soft); }

        body {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            font-family: 'IBM Plex Sans', sans-serif;
            color: var(--text);
            min-height: 100%;
            background:
                radial-gradient(circle at top left, rgba(124, 93, 108, 0.18), transparent 32%),
                radial-gradient(circle at 80% 20%, rgba(209, 191, 198, 0.08), transparent 24%),
                var(--bg);
        }

        /* ── Blur backdrop ── */
        .backdrop-blur {
            position: fixed;
            inset: 0;
            background:
                radial-gradient(circle at 30% 40%, rgba(141, 106, 121, 0.12), transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(214, 186, 199, 0.08), transparent 40%);
            filter: blur(40px);
            pointer-events: none;
            z-index: 0;
            /* Isolate this layer so animated elements above don't force re-compositing it */
            isolation: isolate;
        }

        /* ── Step system ── */
        .step-screen {
            position: fixed;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-bottom: 0;
            z-index: 10;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
            overflow: hidden;
            overscroll-behavior: none;
            background: var(--bg);
        }

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

        /* ── Intro animation ── */
        #introScreen,
        #termsStep,
        #signinStep,
        #onboardingScreen {
            padding-bottom: 0;
        }
        #introScreen {
            opacity: 1;
            pointer-events: auto;
            will-change: transform;
        }

        .intro-grid {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            will-change: transform;
            z-index: 1;
        }

        .intro-text {
            position: absolute;
            font-family: 'Cormorant Garamond', serif;
            font-weight: 700;
            color: var(--paper);
            white-space: nowrap;
            letter-spacing: -0.03em;
            line-height: 1;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .intro-version {
            position: absolute;
            top: max(env(safe-area-inset-top, 0px), 16px);
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.68rem;
            color: rgba(255, 255, 255, 0.25);
            letter-spacing: 0.08em;
            z-index: 3;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.8s ease;
        }
        .intro-logo {
            width: clamp(48px, 10vw, 80px);
            height: clamp(48px, 10vw, 80px);
            border-radius: 18px;
            opacity: 0;
            transform: scale(0.3) translateY(120vh);
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: calc(clamp(48px, 10vw, 80px) / -2);
            margin-top: calc(clamp(48px, 10vw, 80px) / -2);
            will-change: transform, opacity;
            z-index: 2;
        }

        /* Phase 1: slide from left to right */
        /* Screen tint flash */
        #screenTint {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.12s ease-in;
        }
        #screenTint.flash-out {
            opacity: 0 !important;
            transition: opacity 0.45s ease-out;
        }

        /* Grid rushes upward: smooth consistent acceleration */
        @keyframes rushUp {
            0% { transform: translateY(0); }
            100% { transform: translateY(-1220vh); }
        }

        /* Screen flash */
        @keyframes introFlash {
            0% { opacity: 0; }
            30% { opacity: 1; }
            100% { opacity: 0; }
        }

        /* Gold field expanding from logo to screen edges */
        .pink-field-flash {
            position: fixed;
            inset: 0;
            z-index: 9999;
            pointer-events: none;
            background: radial-gradient(circle at var(--cx) var(--cy), rgba(228,168,83,0.4) 0%, rgba(228,168,83,0.12) 40%, rgba(200,160,80,0.05) 65%, rgba(200,160,80,0) 100%);
            will-change: transform, opacity;
            transform-origin: var(--cx) var(--cy);
            animation: pinkFieldExpand 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }
        .pink-field-flash.fading {
            animation: pinkFieldFade 1.2s ease-out forwards;
        }
        .pink-field-border {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            animation: pinkBorderReveal 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            animation-delay: 0.35s;
        }
        .pink-field-border rect {
            fill: none;
            stroke: rgba(228, 168, 83, 0.3);
            stroke-width: 0.4;
        }
        .pink-field-flash.fading .pink-field-border {
            animation: pinkBorderFade 1s ease-out forwards;
        }
        @keyframes pinkFieldExpand {
            /* Use transform: scale instead of background-size — composited, no paint */
            0% { transform: scale(0.01); opacity: 0; }
            20% { opacity: 1; }
            100% { transform: scale(3); opacity: 1; }
        }
        @keyframes pinkFieldFade {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }
        @keyframes pinkBorderReveal {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        @keyframes pinkBorderFade {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }

        /* Screen shake */
        @keyframes introShake {
            0%, 100% { transform: translate(0, 0); }
            15% { transform: translate(-4px, 2px); }
            30% { transform: translate(4px, -2px); }
            45% { transform: translate(-3px, -3px); }
            60% { transform: translate(3px, 3px); }
            75% { transform: translate(-2px, 1px); }
        }

        @keyframes logoRevealAndGrow {
            0% { opacity: 1; transform: scale(0.3) translateY(120vh); }
            100% { opacity: 1; transform: scale(3) translateY(0); }
        }

        @keyframes logoHover {
            0%, 100% { transform: scale(3) translateY(0); }
            50% { transform: scale(3) translateY(-8px); }
        }

        /* Falling gold-tinted twinkling stars */
        .logo-star {
            position: fixed;
            border-radius: 50%;
            background: rgba(228, 188, 103, 0.95);
            box-shadow: 0 0 6px rgba(228, 168, 83, 0.8), 0 0 12px rgba(200, 150, 60, 0.4), 0 0 2px rgba(255, 230, 180, 0.8);
            pointer-events: none;
            z-index: 3;
            will-change: transform, opacity;
            animation: starFall 2s ease-in forwards, starTwinkle 0.3s ease-in-out infinite;
        }
        @keyframes starFall {
            0% { transform: translate(0, 0) scale(1); }
            60% { opacity: 0.8; }
            100% { transform: translate(var(--tx), var(--ty)) scale(0.3); opacity: 0; }
        }
        @keyframes starTwinkle {
            /* Only animate opacity — box-shadow triggers paint every frame */
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        @keyframes tapPulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 0.8; }
        }

        @keyframes swipeHint {
            0%, 100% { transform: translateY(0); opacity: 0.5; }
            50% { transform: translateY(-10px); opacity: 1; }
        }

        .intro-cta-text {
            color: rgba(255,255,255,0.8);
        }
        .intro-cta-link {
            color: rgba(228,168,83,0.45);
        }
        html[data-theme="light"] .intro-cta-text {
            color: rgba(28,15,23,0.72);
        }
        html[data-theme="light"] .intro-cta-link {
            color: rgba(139,53,88,0.55);
        }

        /* Currency path floating animations */
        .currency-path {
            position: absolute;
            white-space: nowrap;
            pointer-events: none;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.05em;
            opacity: 0;
            will-change: transform, opacity;
        }
        @keyframes floatUp {
            0% { transform: translateY(0) translateX(0); opacity: 0; }
            10% { opacity: 0.35; }
            80% { opacity: 0.25; }
            100% { transform: translateY(-110vh) translateX(var(--drift)); opacity: 0; }
        }
        @keyframes floatDiag {
            0% { transform: translate(0, 0) rotate(var(--rot)); opacity: 0; }
            10% { opacity: 0.3; }
            80% { opacity: 0.2; }
            100% { transform: translate(var(--drift), -100vh) rotate(var(--rot)); opacity: 0; }
        }

        /* Reverse intro (outro): grid rains downward */
        @keyframes rushDown {
            0% { transform: translateY(-1220vh); }
            100% { transform: translateY(0); }
        }
        /* Reverse logo: rises from below */
        @keyframes logoRiseFromBelow {
            0% { opacity: 1; transform: scale(3) translateY(120vh); }
            100% { opacity: 1; transform: scale(3) translateY(0); }
        }
        /* Float-down variants for reverse */
        @keyframes floatDown {
            0% { transform: translateY(0) translateX(0); opacity: 0; }
            10% { opacity: 0.35; }
            80% { opacity: 0.25; }
            100% { transform: translateY(110vh) translateX(var(--drift)); opacity: 0; }
        }
        @keyframes floatDownDiag {
            0% { transform: translate(0, 0) rotate(var(--rot)); opacity: 0; }
            10% { opacity: 0.3; }
            80% { opacity: 0.2; }
            100% { transform: translate(var(--drift), 100vh) rotate(var(--rot)); opacity: 0; }
        }
        /* Fade + unblur dismiss overlay */
        .outro-screen {
            position: fixed;
            inset: 0;
            z-index: 9000;
            background: #000;
            overflow: hidden;
            pointer-events: auto;
        }
        .outro-screen.dismissing {
            pointer-events: none;
            transition: opacity 2s ease-out, filter 2s ease-out;
            filter: blur(12px);
            opacity: 1;
        }
        .outro-screen.dismissed {
            opacity: 0;
            filter: blur(0px);
        }
        .outro-screen .intro-grid {
            position: absolute;
            top: -1220vh;
            left: 0;
            width: 100%;
            will-change: transform;
            z-index: 1;
        }
        .outro-screen .intro-logo {
            width: clamp(48px, 10vw, 80px);
            height: clamp(48px, 10vw, 80px);
            border-radius: 18px;
            opacity: 0;
            transform: scale(3) translateY(120vh);
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: calc(clamp(48px, 10vw, 80px) / -2);
            margin-top: calc(clamp(48px, 10vw, 80px) / -2);
            will-change: transform, opacity;
            z-index: 2;
            filter: sepia(1) saturate(2.5) hue-rotate(-10deg) brightness(1.1);
        }

        /* ── Step navigator (fullscreen overlay on back button) ── */
        .step-nav {
            position: fixed;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            z-index: 25;
            background: var(--bg, #1a0e14);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
            overflow: hidden;
            overscroll-behavior: none;
            touch-action: none;
        }
        .step-nav.visible {
            opacity: 1;
            pointer-events: auto;
        }
        .step-nav-close {
            position: absolute;
            top: max(env(safe-area-inset-top, 0px), 16px);
            left: max(env(safe-area-inset-left, 0px), 16px);
            background: none;
            border: none;
            color: var(--muted-soft);
            cursor: pointer;
            padding: 8px;
            z-index: 2;
            transition: color 0.2s;
        }
        .step-nav-close:hover {
            color: var(--paper);
        }
        .step-nav-item {
            text-align: center;
            padding: 14px 24px;
            cursor: default;
            transition: opacity 0.3s ease;
        }
        .step-nav-item .nav-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.5rem, 5vw, 2.2rem);
            font-weight: 600;
            line-height: 1.2;
        }
        .step-nav-item.active .nav-title {
            color: var(--paper);
        }
        .step-nav-item.completed {
            cursor: pointer;
        }
        .step-nav-item.completed .nav-title {
            color: #e4a853;
        }
        .step-nav-item.completed:hover .nav-title {
            opacity: 0.8;
        }
        .step-nav-item.upcoming .nav-title {
            color: var(--paper);
            opacity: 0.45;
        }
        .step-nav-item.locked .nav-title {
            color: var(--muted-soft);
            opacity: 0.15;
        }
        .step-nav-item .nav-value {
            font-size: 0.75rem;
            color: var(--muted);
            margin-top: 4px;
            letter-spacing: 0.05em;
        }

        /* ── Currency background preview (floating particles) ── */
        .currency-bg-preview {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        .currency-bg-preview .bg-particle {
            position: absolute;
            bottom: -30px;
            pointer-events: none;
            opacity: 0;
            will-change: transform, opacity;
        }

        /* ── Currency input step ── */
        .step-label {
            font-size: clamp(0.9rem, 2.5vw, 1.1rem);
            color: var(--muted-soft);
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin-bottom: 24px;
        }

        /* Hide step labels on source/target/amount — replaced by hint text */
        #sourceStep .step-label,
        #targetStep .step-label {
            display: none;
        }
        #amountStep .step-label {
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        #amountStep .step-label.label-visible {
            opacity: 1;
        }

        .currency-input-wrap {
            position: relative;
            width: 90%;
            max-width: 600px;
            text-align: center;
        }

        .currency-input {
            width: 100%;
            background: transparent;
            border: none;
            outline: none;
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(3rem, 8vw, 5.5rem);
            font-weight: 600;
            color: var(--paper);
            text-align: center;
            letter-spacing: -0.02em;
            caret-color: transparent; /* hidden until typer starts */
            line-height: 1.1;
        }
        .currency-input.caret-on {
            caret-color: var(--accent-strong);
        }
        .currency-input.has-value {
            color: #e4a853;
            transition: color 0.3s ease;
        }
        .currency-input.input-glow {
            text-shadow: 0 0 12px rgba(228, 168, 83, 0.6), 0 0 24px rgba(228, 168, 83, 0.3);
            transition: text-shadow 0.3s ease;
        }

        .currency-input.has-value {
            text-align: center;
        }

        .currency-input::placeholder {
            color: var(--muted-soft);
            opacity: 0.5;
        }

        /* Hide typing placeholder while hint zoom-in animation is playing */
        .hint-animating .currency-input::placeholder {
            color: transparent;
            opacity: 0;
        }

        .currency-suggestion {
            display: none;
        }

        .currency-full-name {
            margin-top: 28px;
            font-size: clamp(1rem, 2.5vw, 1.2rem);
            color: var(--muted);
            min-height: 1.5em;
            transition: opacity 0.2s ease;
        }

        .currency-hint-wrap {
            margin-top: 12px;
            text-align: center;
            width: 90%;
            max-width: 600px;
            transition: all 0.4s ease;
        }

        /* When replacing the settled hint text, position at top */
        .currency-hint-wrap.replacing-hint {
            position: fixed;
            top: max(env(safe-area-inset-top, 0px), 16px);
            left: 0;
            right: 0;
            min-height: 40px;
            height: auto;
            margin-top: 0;
            padding-top: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            z-index: 6;
        }

        .currency-hint-wrap.replacing-hint .currency-list {
            margin-top: 8px;
        }

        .currency-hint-wrap.replacing-hint .currency-hint-btn {
            border-color: var(--accent-strong);
            color: var(--accent-strong);
        }

        .currency-hint-btn {
            background: none;
            border: 1.5px solid #e4a853;
            color: #e4a853;
            font-size: 0.85rem;
            cursor: pointer;
            padding: 8px 20px;
            border-radius: 999px;
            transition: background 0.2s, border-color 0.2s;
        }

        .currency-hint-btn:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--accent);
        }

        .currency-list {
            display: none;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-top: 14px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            max-height: 60vh;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 4px;
        }

        .currency-list.open {
            display: flex;
        }

        .currency-list-item {
            padding: 8px 16px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text);
            font-size: 0.88rem;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, transform 0.15s;
        }

        .currency-list-item:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--accent-strong);
            transform: translateY(-1px);
        }

        .step-back-btn {
            position: fixed;
            top: max(env(safe-area-inset-top, 0px), 16px);
            left: max(env(safe-area-inset-left, 0px), 16px);
            z-index: 20;
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            color: var(--muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, color 0.2s;
        }
        .step-back-btn svg {
            width: 22px;
            height: 22px;
        }
        .step-back-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text);
        }

        /* ── Animated instruction hint (currency steps) ── */
        .step-anim-hint {
            position: absolute;
            left: 0;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(2.4rem, 4vw, 4rem);
            font-weight: 600;
            color: #e4a853;
            text-align: center;
            line-height: 1.3;
            letter-spacing: -0.02em;
            padding-left: 24px;
            padding-right: 24px;
            pointer-events: none;
            z-index: 5;
            /* transition all morphable properties */
            transition:
                top 0.75s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.75s cubic-bezier(0.4, 0, 0.2, 1),
                font-size 0.75s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.5s ease,
                letter-spacing 0.5s ease,
                opacity 0.3s ease;
            will-change: top, transform, font-size;
        }
        .step-anim-hint.zoom-in {
            animation: hintZoomIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            animation-delay: 0.3s;
            opacity: 0;
        }
        @keyframes hintZoomIn {
            /* filter: blur() removed — it triggered a repaint every frame on Safari */
            0% { opacity: 0; transform: translateY(-50%) scale(0.05); }
            40% { opacity: 0.6; }
            70% { opacity: 1; transform: translateY(-50%) scale(1.05); }
            100% { opacity: 1; transform: translateY(-50%) scale(1); }
        }

        /* Disclaimer text before hint */
        .step-disclaimer {
            position: fixed;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 0;
            text-align: center;
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.4rem, 4vw, 2.4rem);
            font-weight: 600;
            color: rgba(200,190,196,0.85);
            line-height: 1.4;
            letter-spacing: -0.02em;
            padding: 0 24px;
            background: var(--bg, #140d12);
            pointer-events: none;
            z-index: 30;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        /* "Product debut video" glass button between scene and text */
        .disc-debut-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 18px;
            border-radius: 20px;
            border: 1px solid rgba(235,221,228,0.18);
            background: rgba(235,221,228,0.06);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: rgba(235,221,228,0.65);
            font-family: 'IBM Plex Sans', sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            text-decoration: none;
            letter-spacing: 0.03em;
            pointer-events: auto;
            cursor: pointer;
            margin: 0 auto 16px;
            transition: background 0.2s, border-color 0.2s, color 0.2s;
        }
        .disc-debut-btn:hover {
            background: rgba(235,221,228,0.11);
            border-color: rgba(235,221,228,0.3);
            color: rgba(235,221,228,0.9);
        }

        /* Top half: animation scene */
        .disc-scene {
            flex: 0 0 50%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Bottom half: text content wraps naturally */
        .disc-text-wrap {
            flex: 1 1 auto;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            align-content: center;
            justify-content: center;
            gap: 0 0.35em;
            padding: 0 24px;
        }
        /* Static color backdrop on disclaimer — no animation to avoid repaint every frame */
        .step-disclaimer::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background:
                radial-gradient(circle at 25% 30%, rgba(141,106,121,0.25), transparent 45%),
                radial-gradient(circle at 70% 65%, rgba(124,93,108,0.2), transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(209,191,198,0.1), transparent 50%);
            filter: blur(60px);
            /* Animating gradient positions (discMorph) forced a full repaint + 60px blur
               re-composite on every frame — static gradient is rasterized once instead */
        }
        /* Disclaimer morphing animation SVG — fills the entire top half */
        .disc-morph-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        /* "₦ → $" texts thrown toward NT logo: fade in then out along path */
        .disc-wave-text {
            opacity: 0;
        }
        .disc-wave-text1 {
            animation: discWaveTextPulse 1s ease-out 0s infinite;
        }
        .disc-wave-text2 {
            animation: discWaveTextPulse 1s ease-out 0.33s infinite;
        }
        .disc-wave-text3 {
            animation: discWaveTextPulse 1s ease-out 0.66s infinite;
        }
        @keyframes discWaveTextPulse {
            0% { opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 0.7; }
            100% { opacity: 0; }
        }
        /* Dash march on straight arrows and curved paths */
        .disc-arrow-nt-dev line,
        .disc-arrow-nt-bank line,
        .disc-arrow-dev-bank path,
        .disc-arrow-bank-dev path {
            animation: discDashPulse 1.2s linear infinite;
        }
        @keyframes discDashPulse {
            0% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: -14; }
        }
        /* Red X */
        .disc-redx {
            transform-origin: 415px 100px;
        }
        /* Disclaimer is center-aligned on all screen sizes (no keyboard during this phase) */
        .step-disclaimer.visible {
            opacity: 1;
        }
        .step-disclaimer.fading {
            opacity: 0;
            transition: opacity 0.8s ease;
        }
        .step-disclaimer .disc-word {
            opacity: 0;
            display: inline-block;
            transition: opacity 0.3s ease;
        }
        .step-disclaimer .disc-word.shown {
            opacity: 1;
        }
        .step-disclaimer .disc-break {
            width: 100%;
            height: 0;
        }
        /* "Swipe up to continue" / "Click to continue" prompt */
        .disc-continue {
            position: fixed;
            bottom: max(env(safe-area-inset-bottom, 0px), 32px);
            left: 0;
            right: 0;
            text-align: center;
            opacity: 0;
            transition: opacity 0.6s ease;
            pointer-events: none;
        }
        .disc-continue.shown {
            opacity: 1;
            pointer-events: auto;
        }
        .disc-continue-text {
            font-family: 'IBM Plex Sans', sans-serif;
            font-size: clamp(0.9rem, 3vw, 1.1rem);
            color: rgba(200,190,196,0.6);
            font-weight: 500;
            animation: swipeHint 3s ease-in-out infinite;
        }

        /* Warp-speed starfield overlay */
        .warp-overlay {
            position: absolute;
            inset: 0;
            z-index: 8;
            overflow: hidden;
            pointer-events: none;
        }
        .warp-streak {
            position: absolute;
            top: var(--warp-cy, 50%);
            left: var(--warp-cx, 50%);
            transform-origin: 0 0;
            background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(200,220,255,0));
            border-radius: 1px;
            opacity: 0;
            will-change: transform, opacity;
            animation: warpStreak var(--dur) var(--delay) cubic-bezier(0.3, 0, 1, 1) forwards;
        }
        @keyframes warpStreak {
            0% {
                opacity: var(--brightness);
                transform: rotate(var(--angle)) translateX(var(--startDist)) scaleX(0.5);
            }
            60% {
                opacity: var(--brightness);
                transform: rotate(var(--angle)) translateX(var(--dist)) scaleX(1.2);
            }
            100% {
                opacity: 0;
                transform: rotate(var(--angle)) translateX(var(--farDist)) scaleX(1.5);
            }
        }

        .step-anim-hint.settled {
            position: fixed;
            top: max(env(safe-area-inset-top, 0px), 16px);
            left: 0;
            width: 100%;
            height: 40px;
            transform: none;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--muted-soft);
            letter-spacing: 0.1em;
            line-height: 40px;
            padding-top: 0;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Logged-in users: settled hint and hint-wrap go to top-left */
        body.logged-in .step-anim-hint.settled {
            text-align: left;
            padding-left: 68px;
        }
        body.logged-in .currency-hint-wrap.replacing-hint {
            align-items: flex-start;
            padding-left: 24px;
        }

        /* Multi-arrow hint wrapper — hidden until mouse moves */
        .click-hint-arrows {
            pointer-events: none;
            z-index: 6;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .click-hint-arrows.visible {
            opacity: 0.35;
        }
        .click-hint-arrows.fading {
            opacity: 0;
            transition: opacity 1s ease;
        }
        .click-hint-arrows.leaving {
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .click-hint-arrow {
            z-index: 6;
            pointer-events: none;
        }
        .click-hint-top {
            animation: arrowBounceDown 0.8s ease-in-out infinite;
        }
        .click-hint-bottom {
            animation: arrowBounceUp 0.8s ease-in-out infinite;
        }
        .click-hint-left {
            animation: arrowBounceRight 0.8s ease-in-out infinite;
        }
        .click-hint-right {
            animation: arrowBounceLeft 0.8s ease-in-out infinite;
        }
        @keyframes arrowBounceDown {
            0%, 100% { margin-top: 0; }
            50% { margin-top: 10px; }
        }
        @keyframes arrowBounceUp {
            0%, 100% { margin-top: 0; }
            50% { margin-top: -10px; }
        }
        @keyframes arrowBounceRight {
            0%, 100% { margin-left: 0; }
            50% { margin-left: 10px; }
        }
        @keyframes arrowBounceLeft {
            0%, 100% { margin-left: 0; }
            50% { margin-left: -10px; }
        }

        /* SVG draw-around highlight for input region — positioned by JS from input rect */
        .click-hint-outline {
            z-index: 5;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }
        .click-hint-outline.leaving {
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .click-hint-outline rect {
            fill: none;
            stroke: url(#glassGrad);
            stroke-width: 3;
            stroke-dasharray: var(--perim);
            stroke-dashoffset: var(--perim);
            animation: drawOutline 10s ease-in-out infinite;
            filter: drop-shadow(0 0 6px rgba(228, 168, 83, 0.3)) drop-shadow(0 0 14px rgba(228, 168, 83, 0.12));
        }
        @keyframes drawOutline {
            0% { stroke-dashoffset: var(--perim); opacity: 0; }
            3% { opacity: 0.5; }
            20% { stroke-dashoffset: 0; opacity: 0.7; }
            25% { stroke-dashoffset: 0; opacity: 0.45; }
            30% { stroke-dashoffset: 0; opacity: 0; }
            100% { stroke-dashoffset: var(--perim); opacity: 0; }
        }

        /* Legacy .step-hint — kept for amount step kbd reference */
        .step-hint {
            position: fixed;
            bottom: max(env(safe-area-inset-bottom, 0px), 24px);
            left: 0;
            right: 0;
            text-align: center;
            padding-bottom: 16px;
        }

        .step-hint span {
            color: var(--muted-soft);
            font-size: 0.85rem;
            letter-spacing: 0.05em;
        }

        .step-hint kbd {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 6px;
            border: 1px solid var(--line-strong);
            background: rgba(255, 255, 255, 0.05);
            color: var(--muted);
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.78rem;
            margin: 0 2px;
        }

        /* ── Amount step ── */
        .amount-input {
            width: 95%;
            max-width: 90vw;
            background: transparent;
            border: none;
            outline: none;
            caret-color: transparent;
            font-family: 'IBM Plex Mono', monospace;
            font-size: clamp(3rem, 8vw, 5.5rem);
            font-weight: 500;
            color: var(--paper);
            text-align: center;
            letter-spacing: -0.02em;
            line-height: 1.1;
            transition: font-size 0.2s ease;
        }
        .amount-input.caret-on {
            caret-color: var(--accent-strong);
        }
        .amount-input.has-value {
            color: #e4a853;
            transition: color 0.3s ease;
        }

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

        .amount-input::placeholder {
            color: var(--muted-soft);
            opacity: 0.4;
        }

        .amount-currency-tag {
            margin-top: 12px;
            font-size: 1rem;
            color: var(--muted);
            letter-spacing: 0.08em;
        }

        .amount-proceed-btn {
            display: none;
            margin-top: 18px;
            padding: 12px 40px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: linear-gradient(135deg, #f3e7ec 0%, #cab0bc 52%, #b18a99 100%);
            color: #1f1319;
            cursor: pointer;
            box-shadow: 0 14px 32px rgba(177, 138, 153, 0.2);
            transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
            opacity: 0;
            pointer-events: none;
            align-items: center;
            justify-content: center;
        }
        .amount-proceed-btn .check-svg {
            display: block;
            margin: auto;
        }
        .amount-proceed-btn .check-path {
            stroke-dasharray: 30;
            stroke-dashoffset: 30;
        }
        .amount-proceed-btn.visible .check-path {
            animation: drawCheck 0.5s ease forwards 0.3s;
        }
        @keyframes drawCheck {
            to { stroke-dashoffset: 0; }
        }
        .amount-proceed-btn.visible {
            opacity: 1;
            pointer-events: auto;
        }
        .amount-proceed-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 40px rgba(177, 138, 153, 0.3);
        }

        .amount-tap-hint {
            margin-top: 24px;
            font-size: 0.82rem;
            color: var(--muted);
            letter-spacing: 0.06em;
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }
        .amount-tap-hint.visible {
            opacity: 1;
        }

        .amount-switch-btn {
            display: block;
            background: none;
            border: none;
            color: var(--muted, #baa4ae);
            font-family: 'IBM Plex Sans', sans-serif;
            font-size: 0.83rem;
            cursor: pointer;
            padding: 10px 0 0;
            letter-spacing: 0.01em;
            text-decoration: underline;
            text-decoration-color: rgba(186,164,174,0.35);
            text-underline-offset: 3px;
            transition: color 0.15s, text-decoration-color 0.15s;
            -webkit-tap-highlight-color: transparent;
        }
        .amount-switch-btn:hover {
            color: var(--paper, #f1e7eb);
            text-decoration-color: rgba(241,231,235,0.5);
        }

        /* Show proceed button on touch/mobile devices, hide "tap return" hint */
        @media (pointer: coarse) {
            .amount-proceed-btn { display: inline-block; }
            #amountStep .step-hint { display: none; }
        }
        /* Also show on narrow screens as fallback */
        @media (max-width: 768px) {
            .amount-proceed-btn { display: inline-block; }
            #amountStep .step-hint { display: none; }
        }

        /* ── Combined step (sending + receiving + amount on one page) ── */
        /* Keep disclosureStep at normal z-index so it doesn't float above everything when invisible */
        #disclosureStep {
            z-index: 10;
        }
        #combinedStep {
            justify-content: flex-start;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: max(env(safe-area-inset-top, 0px), 52px) 28px 60px;
            background: var(--bg);
        }
        .combined-inner {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 480px;
            display: flex;
            flex-direction: column;
        }
        .combined-field {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 20px 0 24px;
            border-bottom: 1px solid rgba(235, 221, 228, 0.07);
        }
        .combined-field:last-of-type { border-bottom: none; }
        .combined-field-label {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(2.2rem, 7vw, 3.6rem);
            font-weight: 600;
            letter-spacing: -0.02em;
            text-transform: none;
            color: var(--text);
            margin-bottom: 4px;
            opacity: 1;
        }
        #combinedStep .currency-input-wrap { width: 100%; max-width: 100%; text-align: left; }
        #combinedStep .currency-input { font-size: clamp(1.7rem, 5vw, 2.4rem); text-align: left; caret-color: var(--accent-strong); }
        #combinedStep .currency-full-name { margin-top: 4px; font-size: clamp(0.82rem, 2vw, 0.95rem); }
        #combinedStep .currency-hint-wrap { width: 100%; max-width: 100%; text-align: left; }
        #combinedStep .amount-input { font-size: clamp(1.7rem, 5vw, 2.4rem); text-align: left; width: 100%; caret-color: var(--accent-strong); }
        #combinedStep .amount-currency-tag { margin-top: 4px; }
        #combinedStep .amount-switch-btn { text-align: left; }
        #combinedStep .amount-proceed-btn { display: inline-block; align-self: center; margin-top: 12px; }
        #combinedStep .amount-tap-hint { display: none; }
        html[data-theme="light"] #combinedStep .combined-field { border-bottom-color: rgba(90, 45, 68, 0.08); }
        @media (hover: hover) and (pointer: fine) {
            #combinedStep { justify-content: center; padding-top: 0; padding-bottom: 0; overflow-y: visible; }
            .combined-field { align-items: center; padding: 10px 0 12px; }
            .combined-field-label { text-align: center; font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 2px; }
            #combinedStep .currency-input-wrap { text-align: center; }
            #combinedStep .currency-input { text-align: center; font-size: clamp(1.4rem, 3vw, 1.9rem); }
            #combinedStep .currency-full-name { text-align: center; }
            #combinedStep .currency-hint-wrap { text-align: center; }
            #combinedStep .amount-input { text-align: center; font-size: clamp(1.4rem, 3vw, 1.9rem); }
            #combinedStep .amount-currency-tag { text-align: center; }
            #combinedStep .amount-proceed-btn { align-self: center; margin-top: 8px; }
        }
        @media (max-width: 520px) {
            #combinedStep { padding-left: 20px; padding-right: 20px; }
        }

        /* ── Terms step ── */
        .terms-content {
            text-align: center;
            max-width: 700px;
            padding: 0 24px;
        }

        .terms-content h2 {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(2rem, 6vw, 3.5rem);
            font-weight: 600;
            color: #e4a853;
            letter-spacing: -0.02em;
            line-height: 1.1;
            margin-bottom: 20px;
        }

        .terms-content p {
            color: var(--muted);
            font-size: 1.05rem;
            line-height: 1.7;
            margin-bottom: 12px;
        }
        .terms-content .terms-links {
            margin-bottom: 32px;
            white-space: nowrap;
        }

        .terms-content a {
            color: var(--paper);
            text-decoration: none;
            border-bottom: 1px solid var(--accent-strong);
            transition: color 0.2s, border-color 0.2s;
        }

        .terms-content a:hover {
            color: var(--accent-strong);
            border-color: var(--paper);
        }

        .agree-btn {
            display: inline-block;
            padding: 18px 48px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: linear-gradient(135deg, #f3e7ec 0%, #cab0bc 52%, #b18a99 100%);
            color: #1f1319;
            font-family: 'IBM Plex Sans', sans-serif;
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
            box-shadow: 0 18px 40px rgba(177, 138, 153, 0.22);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .agree-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 22px 50px rgba(177, 138, 153, 0.3);
        }

        /* ── Sign-in step ── */
        .signin-content {
            text-align: center;
            max-width: 440px;
            padding: 0 24px;
        }

        .signin-content h2 {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(2rem, 6vw, 3.5rem);
            font-weight: 600;
            color: #e4a853;
            letter-spacing: -0.02em;
            line-height: 1.1;
            margin-bottom: 16px;
        }

        .signin-content p {
            color: var(--muted);
            font-size: 1rem;
            line-height: 1.7;
            margin-bottom: 28px;
        }

        /* Custom sign-in button */
        .custom-signin-container {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .custom-signin-btn {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 0 28px;
            height: 52px;
            border-radius: 999px;
            border: 1px solid rgba(235,221,228,0.22);
            background: rgba(255,255,255,0.07);
            color: var(--paper, #f1e7eb);
            font-family: 'IBM Plex Sans', sans-serif;
            font-size: 1rem;
            font-weight: 500;
            letter-spacing: 0.01em;
            white-space: nowrap;
            cursor: pointer;
            pointer-events: none; /* visual only — click goes to overlay */
            transition: background 0.2s, border-color 0.2s;
        }

        /* Lift visual when overlay is hovered (parent trick) */
        .custom-signin-container:hover .custom-signin-btn {
            background: rgba(255,255,255,0.11);
            border-color: rgba(235,221,228,0.38);
        }

        /* Invisible Google GIS overlay — real click target */
        .signin-gis-overlay {
            position: absolute;
            inset: 0;
            border-radius: 999px;
            opacity: 0.001;
            cursor: pointer;
            pointer-events: none;
        }
        .step-screen.active .signin-gis-overlay {
            pointer-events: auto;
        }

        #signinBtnWrap {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }


        /* ── Transitions between steps ── */
        .step-screen.exiting {
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 9;
            pointer-events: none;
        }

        /* Override step-screen bounds to allow scrolling */
        .ob-feed-scroll {
            display: block; /* remove flex from step-screen */
            padding: 0;
            overflow-y: auto;
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
        }
        
        /* Hide scrollbar for a cleaner feel but maintain feed */
        .ob-feed-scroll::-webkit-scrollbar { display: none; }
        .ob-feed-scroll { -ms-overflow-style: none; scrollbar-width: none; }

        .ob-feed-item {
            position: relative;
            height: 100%; /* Prevents iOS URL bar height bugs that happen with 100vh */
            width: 100%;
            scroll-snap-align: start;
            scroll-snap-stop: always; /* forces TikTok/Reels style strict snapping */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-bottom: env(safe-area-inset-bottom, 0px); /* account for home indicator */
        }

        .ob-svg-wrap {
            flex: 0 0 60%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5%;
            margin-top: 5vh;
            box-sizing: border-box;
        }

        .ob-svg {
            width: 100%;
            height: 100%;
            max-height: 480px; /* keep bounded on large screens */
            opacity: 0;
            transition: opacity 0.6s ease;
        }

        /* SVG activates when its parent .ob-feed-item has .active assigned by IntersectionObserver */
        .ob-feed-item.active .ob-svg {
            opacity: 1;
        }

        .ob-text-wrap {
            flex: 0 0 30%;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
            padding: 0 72px;
            display: flex;
            align-items: flex-start; /* top-aligned relative to its section */
            justify-content: center;
            padding-top: 2vh;
        }

        .ob-text {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(2rem, 5vw, 3.2rem);
            font-weight: 600;
            color: #e4a853;
            letter-spacing: -0.02em;
            line-height: 1.15;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
        }
        .ob-feed-item.active .ob-text {
            opacity: 1;
            transform: translateY(0);
        }

        .ob-scroll-prompt {
            position: absolute;
            bottom: max(env(safe-area-inset-bottom, 0px), 32px);
            left: 50%;
            transform: translateX(-50%);
            color: rgba(228, 168, 83, 0.5);
            animation: obBounce 1.5s ease-in-out infinite;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.6s ease 1.5s; /* delayed fade in */
        }
        .ob-feed-item.active .ob-scroll-prompt {
            opacity: 1;
        }
        @keyframes obBounce {
            0%, 100% { transform: translate(-50%, 0); }
            50% { transform: translate(-50%, 8px); }
        }

        /* Skip button floating top-right over everything */
        .ob-skip-btn {
            position: fixed; /* fixed relative to viewport, not scroll */
            top: max(env(safe-area-inset-top, 0px), 16px);
            right: 20px;
            background: none;
            border: none;
            color: var(--muted-soft);
            font-size: 0.95rem;
            font-weight: 500;
            font-family: 'IBM Plex Sans', sans-serif;
            cursor: pointer;
            padding: 12px 18px;
            border-radius: 99px;
            letter-spacing: 0.04em;
            transition: color 0.2s, background 0.2s;
            z-index: 500;
        }
        .ob-skip-btn:hover {
            color: var(--paper);
            background: rgba(255,255,255,0.05);
        }

        .ob-finish-btn {
            position: absolute;
            bottom: max(env(safe-area-inset-bottom, 0px), 36px);
            left: 50%;
            transform: translateX(-50%);
            padding: 18px 48px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: linear-gradient(135deg, #f3e7ec 0%, #cab0bc 52%, #b18a99 100%);
            color: #1f1319;
            font-family: 'IBM Plex Sans', sans-serif;
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            cursor: pointer;
            box-shadow: 0 18px 40px rgba(177, 138, 153, 0.22);
            transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.5s ease;
            opacity: 0;
            pointer-events: none;
        }
        .ob-feed-item.active .ob-finish-btn {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            pointer-events: auto;
            transition-delay: 1.2s; /* wait for SVGs to draw before prompting button */
        }
        .ob-feed-item.active .ob-finish-btn:hover {
            transform: translateX(-50%) translateY(-2px);
            box-shadow: 0 22px 50px rgba(177, 138, 153, 0.3);
        }

        /* Phase 1: Route path draw */
        /* ── Phase 1: Route map animations ── */
        #obRoute {
            stroke-dasharray: 600;
            stroke-dashoffset: 600;
        }
        #obDirectLine {
            stroke-dasharray: 10 6;
            stroke-dashoffset: 400;
        }
        .ob-svg.active #obDirectLine {
            animation: drawDirect 1s ease forwards 0.2s;
        }
        @keyframes drawDirect { to { stroke-dashoffset: 0; } }

        .ob-svg.active #obRoute {
            animation: drawPath 1.5s ease forwards 0.6s;
        }
        @keyframes drawPath { to { stroke-dashoffset: 0; } }

        .ob-node { opacity: 0; transform-box: fill-box; transform-origin: center; }
        .ob-svg.active .ob-node-src { animation: popIn 0.4s ease forwards 0.1s; }
        .ob-svg.active .ob-node-dst { animation: popIn 0.4s ease forwards 0.3s; }

        .ob-cross { opacity: 0; transform-box: fill-box; transform-origin: center; }
        .ob-svg.active .ob-cross { animation: popIn 0.3s ease forwards 0.9s; }

        .ob-fee-bg, .ob-fee-text { opacity: 0; }
        .ob-svg.active .ob-fee-bg { animation: fadeIn 0.4s ease forwards 1.0s; }
        .ob-svg.active .ob-fee-text { animation: fadeIn 0.4s ease forwards 1.0s; }

        .ob-dot { opacity: 0; transform-box: fill-box; transform-origin: center; }
        .ob-svg.active .ob-dot-1 { animation: popIn 0.3s ease forwards 1.2s; }
        .ob-svg.active .ob-dot-2 { animation: popIn 0.3s ease forwards 1.5s; }

        .ob-save-badge { opacity: 0; transform-box: fill-box; transform-origin: center; }
        .ob-svg.active .ob-save-badge { animation: popIn 0.5s ease forwards 1.8s; }

        .ob-hidden-label { opacity: 0; }
        .ob-svg.active .ob-hidden-label { animation: fadeIn 0.5s ease forwards 1.6s; }

        @keyframes popIn {
            0% { opacity: 0; transform: scale(0.3); }
            70% { transform: scale(1.15); }
            100% { opacity: 1; transform: scale(1); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* ── Phase 2: Radar scanner animations ── */
        .ob-sweep {
            opacity: 0;
            transform-origin: 250px 150px;
        }
        .ob-sweep-line {
            opacity: 0;
            transform-origin: 250px 150px;
        }
        .ob-svg.active .ob-sweep {
            animation: radarSweep 3s linear forwards 0.3s;
        }
        .ob-svg.active .ob-sweep-line {
            animation: radarSweep 3s linear forwards 0.3s;
        }
        @keyframes radarSweep {
            0% { opacity: 0.6; transform: rotate(0deg); }
            100% { opacity: 0.3; transform: rotate(360deg); }
        }

        .ob-orbit { opacity: 0; }
        .ob-svg.active .ob-orbit-1 { animation: fadeIn 0.6s ease forwards 0.2s; }
        .ob-svg.active .ob-orbit-2 { animation: fadeIn 0.6s ease forwards 0.4s; }

        .ob-provider { opacity: 0; transform-box: fill-box; transform-origin: center; }
        .ob-svg.active .ob-prov-1 { animation: providerPing 0.5s ease forwards 0.8s; }
        .ob-svg.active .ob-prov-2 { animation: providerPing 0.5s ease forwards 1.2s; }
        .ob-svg.active .ob-prov-3 { animation: providerPing 0.5s ease forwards 1.6s; }
        .ob-svg.active .ob-prov-4 { animation: providerPing 0.5s ease forwards 2.0s; }
        @keyframes providerPing {
            0% { opacity: 0; transform: scale(0.5); }
            50% { opacity: 1; transform: scale(1.15); }
            100% { opacity: 1; transform: scale(1); }
        }

        .ob-scan-text { opacity: 0; }
        .ob-svg.active .ob-scan-text { animation: fadeIn 0.6s ease forwards 2.2s; }

        /* ── Phase 3: Gem & sparkles ── */
        .ob-gem, .ob-gem-inner { opacity: 0; transform-box: fill-box; transform-origin: center; }
        .ob-svg.active .ob-gem { animation: gemReveal 0.8s ease forwards 0.3s; }
        .ob-svg.active .ob-gem-inner { animation: gemReveal 0.8s ease forwards 0.5s; }

        @keyframes gemReveal {
            0% { opacity: 0; transform: scale(0.5) rotate(-10deg); }
            60% { transform: scale(1.05) rotate(2deg); }
            100% { opacity: 1; transform: scale(1) rotate(0); }
        }

        .ob-sparkle { opacity: 0; transform-box: fill-box; transform-origin: center; }
        .ob-svg.active .ob-sparkle-1 { animation: sparklePop 0.5s ease forwards 0.6s; }
        .ob-svg.active .ob-sparkle-2 { animation: sparklePop 0.5s ease forwards 0.8s; }
        .ob-svg.active .ob-sparkle-3 { animation: sparklePop 0.5s ease forwards 1.0s; }
        .ob-svg.active .ob-sparkle-4 { animation: sparklePop 0.5s ease forwards 1.2s; }
        .ob-svg.active .ob-sparkle-5 { animation: sparklePop 0.5s ease forwards 1.4s; }
        .ob-svg.active .ob-sparkle-6 { animation: sparklePop 0.5s ease forwards 1.6s; }

        @keyframes sparklePop {
            0% { opacity: 0; transform: scale(0) rotate(0deg); }
            50% { opacity: 1; transform: scale(1.3) rotate(45deg); }
            100% { opacity: 0.8; transform: scale(1) rotate(90deg); }
        }

        .ob-days { opacity: 0; transform-box: fill-box; transform-origin: center; }
        .ob-svg.active .ob-days { animation: popIn 0.5s ease forwards 1.8s; }

        /* ── Mobile adjustments ── */
        @media (max-width: 520px) {
            .step-screen {
                justify-content: center;
                padding-bottom: 30%;
            }
            .step-anim-hint {
                top: 30%;
                font-size: clamp(1.7rem, 6.5vw, 3rem);
            }
            .step-anim-hint.settled {
                font-size: 0.92rem;
                line-height: 52px;
            }
            .step-label { font-size: 0.82rem; margin-bottom: 18px; }
            .step-hint { padding-bottom: 12px; }
            .ob-text { font-size: clamp(1.4rem, 4.5vw, 2rem); }
            /* Terms text wraps on mobile */
            .terms-content p {
                white-space: normal;
                font-size: 0.96rem;
            }
            .terms-content .terms-links {
                white-space: normal;
                font-size: 0.92rem;
            }
            .terms-content h2 {
                font-size: clamp(1.7rem, 5vw, 2.4rem);
            }
            /* Onboarding name row: single column */
            .onboard-name-row {
                grid-template-columns: 1fr;
            }
            /* Platform pills full-width */
            .platform-check {
                width: 100%;
                justify-content: flex-start;
            }
            .onboard-platforms {
                flex-direction: column;
            }
            /* Sign-in content: reduce padding */
            .signin-content,
            .terms-content {
                padding: 0 16px;
            }
            /* Agree button full width */
            .agree-btn {
                width: 100%;
                padding: 16px 24px;
            }
            /* Currency list pills — left-aligned on mobile */
            .currency-hint-wrap { text-align: left; }
            .currency-list {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                max-width: 100%;
                gap: 6px;
            }
            .currency-list-item {
                text-align: left;
                flex: 0 0 calc(33.33% - 6px);
                font-size: 0.82rem;
                padding: 7px 6px;
            }
            /* Disclaimer scene: give SVG more vertical space on mobile */
            .disc-scene {
                flex: 0 0 45%;
            }
            .disc-morph-svg {
                width: 100%;
                height: auto;
                max-height: 100%;
            }
            .disc-text-wrap {
                font-size: clamp(1.1rem, 3.5vw, 1.8rem);
                padding: 0 16px;
                gap: 0 0.25em;
            }
            .disc-debut-btn {
                font-size: 0.7rem;
                padding: 6px 14px;
            }
        }

        /* ── Reduced motion ── */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }