* { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { height: 100%; }
        body {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(180deg, #FAF8F5 0%, #F0EAE1 100%);
            background-attachment: fixed;
            min-height: 100vh;
            min-height: 100dvh;
            color: #4A4340;
            -webkit-font-smoothing: antialiased;
        }

        /* Header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 16px 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 100;
            background: rgba(250, 248, 245, 0.94);
        }
        .header-logo {
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: 3px;
            color: #8B7355;
        }
        .login-btn {
            position: absolute;
            right: 24px;
            background: none;
            border: none;
            padding: 8px 0;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            color: #5C534A;
            transition: opacity 0.2s;
            letter-spacing: 0.3px;
        }
        .login-btn:hover { color: #8B7355; }

        .landing {
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0;
            transition: opacity 0.15s ease;
            position: relative;
            overflow-x: hidden;
        }
        .landing.hidden { display: none; }

        /* Hero section */
        .landing-hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 84px 24px 40px;
            padding-top: calc(env(safe-area-inset-top, 0px) + 84px);
            position: relative;
        }
        .landing-hero > * { position: relative; z-index: 1; }

        .hero {
            max-width: 540px;
        }

        .hero h1 {
            font-family: 'Lora', Georgia, serif;
            font-size: 2.8rem;
            font-weight: 600;
            margin-bottom: 20px;
            line-height: 1.15;
            color: #3D3630;
            letter-spacing: -1px;
        }

        .hero .subtitle {
            font-size: 1.05rem;
            color: rgba(107, 101, 96, 0.8);
            margin-bottom: 36px;
            line-height: 1.6;
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
        }

        .start-btn {
            background: #3D3630;
            color: #FAF8F5;
            border: none;
            padding: 18px 48px;
            font-size: 1.05rem;
            font-weight: 600;
            border-radius: 14px;
            cursor: pointer;
            font-family: inherit;
            transition: transform 0.2s, box-shadow 0.2s;
            width: 100%;
            max-width: 320px;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        .start-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(45, 42, 38, 0.2);
        }

        .landing-scroll-hint {
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            opacity: 0.2;
            animation: scrollHintPulse 2.5s ease-in-out infinite;
        }
        /* Hide scroll hint on short viewports so it never collides with CTA */
        @media (max-height: 680px) {
            .landing-scroll-hint { display: none; }
        }
        .landing-scroll-hint span {
            font-size: 0.65rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #8B7355;
            font-weight: 500;
        }
        .landing-scroll-hint svg {
            width: 14px; height: 14px; stroke: #8B7355; fill: none;
        }
        @keyframes scrollHintPulse {
            0%, 100% { opacity: 0.15; transform: translateX(-50%) translateY(0); }
            50% { opacity: 0.35; transform: translateX(-50%) translateY(4px); }
        }

        /* How it works */
        .landing-steps {
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            padding: 80px 28px;
            text-align: center;
            position: relative;
        }
        .landing-steps::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 1px;
            background: rgba(201, 166, 107, 0.3);
        }
        .landing-steps-title {
            font-family: 'Lora', Georgia, serif;
            font-size: 1.6rem;
            font-weight: 600;
            color: #3D3630;
            margin-bottom: 48px;
        }
        .landing-steps-grid {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .landing-step {
            max-width: 400px;
            margin: 0 auto 48px;
            text-align: center;
        }
        .landing-step:last-child { margin-bottom: 0; }
        .landing-step-num {
            font-family: 'Lora', Georgia, serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: rgba(201, 166, 107, 0.3);
            margin-bottom: 12px;
            line-height: 1;
            letter-spacing: -1px;
        }
        .landing-step h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: #3D3630;
            margin-bottom: 8px;
        }
        .landing-step p {
            font-size: 0.92rem;
            color: rgba(107, 101, 96, 0.7);
            line-height: 1.55;
        }

        /* Feature cards */
        .landing-features {
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            padding: 20px 28px 80px;
            position: relative;
        }
        .landing-features::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 1px;
            background: rgba(201, 166, 107, 0.3);
        }
        .landing-features-title {
            font-family: 'Lora', Georgia, serif;
            font-size: 1.6rem;
            font-weight: 600;
            color: #3D3630;
            text-align: center;
            margin-bottom: 36px;
        }
        .landing-features-grid {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .landing-feature-card {
            border: 1px solid rgba(139, 115, 85, 0.1);
            border-left: 3px solid rgba(201, 166, 107, 0.4);
            border-radius: 12px;
            padding: 24px 24px;
            margin-bottom: 14px;
            width: 100%;
            background: rgba(255, 255, 255, 0.4);
            text-align: left;
            transition: border-left-color 0.2s, box-shadow 0.2s;
        }
        .landing-feature-card:hover {
            border-left-color: #C9A66B;
            box-shadow: 0 4px 16px rgba(139, 115, 85, 0.08);
        }
        .landing-feature-card h4 {
            font-size: 1rem;
            font-weight: 600;
            color: #4A4340;
            margin-bottom: 6px;
        }
        .landing-feature-card p {
            font-size: 0.88rem;
            color: rgba(107, 101, 96, 0.65);
            line-height: 1.5;
        }

        /* FAQ */
        .landing-faq {
            width: 100%;
            max-width: 700px;
            margin: 0 auto;
            padding: 40px 28px 60px;
            position: relative;
        }
        .landing-faq::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 1px;
            background: rgba(201, 166, 107, 0.3);
        }
        .landing-faq-title {
            font-family: 'Lora', Georgia, serif;
            font-size: 1.6rem;
            font-weight: 600;
            color: #3D3630;
            text-align: center;
            margin-bottom: 32px;
        }
        .faq-item {
            border-bottom: 1px solid rgba(139, 115, 85, 0.12);
        }
        .faq-question {
            width: 100%;
            background: none;
            border: none;
            padding: 20px 0;
            font-size: 1rem;
            font-weight: 600;
            color: #4A4340;
            font-family: inherit;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: left;
        }
        .faq-question:hover { color: #8B7355; }
        .faq-question svg {
            width: 18px;
            height: 18px;
            stroke: #8B7355;
            fill: none;
            flex-shrink: 0;
            margin-left: 16px;
            transition: transform 0.2s;
        }
        .faq-item.open .faq-question svg {
            transform: rotate(180deg);
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }
        .faq-item.open .faq-answer {
            max-height: 200px;
        }
        .faq-answer p {
            font-size: 0.92rem;
            color: rgba(107, 101, 96, 0.7);
            line-height: 1.6;
            padding-bottom: 20px;
        }

        /* Bottom CTA */
        .landing-bottom-cta {
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            padding: 80px 28px;
            text-align: center;
            position: relative;
        }
        .landing-bottom-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 1px;
            background: rgba(201, 166, 107, 0.3);
        }
        .landing-bottom-cta-title {
            font-family: 'Lora', Georgia, serif;
            font-size: 1.6rem;
            font-weight: 600;
            color: #3D3630;
            margin-bottom: 12px;
        }
        .landing-bottom-cta-subtitle {
            font-size: 0.95rem;
            color: rgba(107, 101, 96, 0.6);
            margin-bottom: 32px;
            line-height: 1.5;
        }
        .landing-bottom-cta .start-btn {
            margin: 0 auto;
            display: block;
            max-width: 320px;
        }

        /* Footer */
        .landing-footer {
            width: 100%;
            padding: 32px 28px 48px;
            text-align: center;
            border-top: 1px solid rgba(139, 115, 85, 0.08);
        }
        .landing-footer-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 12px;
        }
        .landing-footer-links a {
            font-size: 0.78rem;
            color: rgba(139, 115, 85, 0.4);
            text-decoration: none;
        }
        .landing-footer-links a:hover { color: #8B7355; }
        .landing-footer-support {
            font-size: 0.75rem;
            color: rgba(139, 115, 85, 0.3);
        }
        .landing-footer-support a {
            color: rgba(139, 115, 85, 0.4);
            text-decoration: none;
        }

        /* ===== Desktop responsive ===== */
        @media (min-width: 768px) {
            .landing-hero { padding: 140px 48px 60px; }
            .hero { max-width: 1100px; }
            .hero h1 { font-size: 3.8rem; letter-spacing: -1.5px; margin-bottom: 24px; white-space: nowrap; }
            .hero .subtitle { font-size: 1.15rem; max-width: 520px; }
            .start-btn { width: auto; min-width: 280px; max-width: 360px; }
            .landing-steps { padding: 60px 48px; max-width: 900px; }
            .landing-steps-title { font-size: 2rem; margin-bottom: 60px; }
            .landing-steps-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 40px;
                align-items: start;
            }
            .landing-step {
                max-width: none;
                margin: 0;
                position: relative;
            }
            .landing-step:not(:last-child)::after {
                content: '';
                position: absolute;
                top: 28px;
                right: -20px;
                width: 1px;
                height: 40px;
                background: rgba(201, 166, 107, 0.25);
            }
            .landing-step-num { font-size: 3.5rem; }
            .landing-features { padding: 20px 48px 60px; }
            .landing-features-title { font-size: 2rem; margin-bottom: 48px; }
            .landing-features-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }
            .landing-feature-card {
                margin-bottom: 0;
            }
            .landing-bottom-cta { padding: 60px 48px; }
            .landing-bottom-cta-title { font-size: 2rem; }
        }

        @media (min-width: 1200px) {
            .landing-hero { padding: 140px 64px 60px; }
            .hero { max-width: 1200px; }
            .hero h1 { font-size: 4.2rem; letter-spacing: -2px; }
            .landing-steps { padding: 100px 64px; max-width: 1000px; }
            .landing-steps-grid { gap: 64px; }
            .landing-step:not(:last-child)::after {
                right: -32px;
            }
            .landing-features { padding: 40px 64px 100px; }
            .landing-features-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .landing-feature-card {
                padding: 28px;
            }
            .landing-bottom-cta { padding: 100px 64px; }
        }

        /* Try It Preview */
        .try-it-section {
            margin-top: 48px;
            padding: 32px;
            background: #fff;
            border-radius: 16px;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04);
            text-align: center;
        }
        .try-it-section h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: #2D2A26;
            margin-bottom: 16px;
        }
        .try-it-input {
            width: 100%;
            padding: 14px 18px;
            border: 2px solid rgba(0,0,0,0.1);
            border-radius: 12px;
            font-size: 1rem;
            font-family: inherit;
            outline: none;
            transition: border-color 0.2s;
        }
        .try-it-input:focus { border-color: #4A6FA5; }
        .try-it-input::placeholder { color: #A09A94; }
        .try-it-response {
            margin-top: 20px;
            text-align: left;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .try-it-response.visible { opacity: 1; }
        .try-it-response p {
            font-size: 1.05rem;
            color: #2D2A26;
            line-height: 1.6;
            font-style: italic;
        }
        .try-it-typing {
            display: flex;
            gap: 4px;
            padding: 8px 0;
        }
        .try-it-typing span {
            width: 8px;
            height: 8px;
            background: #4A6FA5;
            border-radius: 50%;
            animation: try-it-bounce 1.2s infinite;
        }
        .try-it-typing span:nth-child(2) { animation-delay: 0.2s; }
        .try-it-typing span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes try-it-bounce {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-6px); opacity: 1; }
        }
        .try-it-cta {
            display: inline-block;
            margin-top: 20px;
            padding: 14px 32px;
            background: #4A6FA5;
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.4s ease, transform 0.2s;
        }
        .try-it-cta.visible { opacity: 1; }
        .try-it-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(74,111,165,0.3); }

        /* Auth Modal */
        .auth-modal {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 1000;
        }
        .auth-modal.active { display: flex; }
        .auth-box {
            background: #fff;
            border-radius: 16px;
            padding: 40px;
            max-width: 400px;
            width: 100%;
        }
        .auth-box h2 {
            font-size: 1.5rem;
            margin-bottom: 8px;
            color: #2D2A26;
        }
        .auth-box .auth-subtitle {
            color: #6B6560;
            margin-bottom: 32px;
            font-size: 0.95rem;
        }
        .auth-input {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid rgba(0,0,0,0.12);
            border-radius: 10px;
            font-size: 1rem;
            font-family: inherit;
            margin-bottom: 16px;
            outline: none;
        }
        .auth-input:focus { border-color: #8B7355; }
        .auth-submit {
            width: 100%;
            background: #2D2A26;
            color: #fff;
            border: none;
            padding: 16px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 10px;
            cursor: pointer;
            font-family: inherit;
            margin-top: 8px;
        }
        .auth-submit:hover { background: #1a1815; }
        .auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }
        .auth-google-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 16px;
            border: 1px solid rgba(0,0,0,0.12);
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 500;
            color: #2D2A26;
            transition: background 0.15s;
        }
        .auth-google-btn:hover { background: #f5f5f5; }
        .auth-google-btn svg { flex-shrink: 0; }
        .auth-divider {
            display: flex;
            align-items: center;
            margin: 20px 0;
            gap: 12px;
            color: #9E9A95;
            font-size: 0.82rem;
        }
        .auth-divider::before, .auth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(0,0,0,0.1);
        }
        .auth-switch {
            margin-top: 24px;
            text-align: center;
            font-size: 0.9rem;
            color: #6B6560;
        }
        .auth-switch a {
            color: #8B7355;
            cursor: pointer;
            font-weight: 500;
        }
        .auth-switch a:hover { text-decoration: underline; }
        .auth-error {
            background: #FEE2E2;
            color: #DC2626;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 16px;
            font-size: 0.9rem;
            display: none;
        }
        .auth-error.show { display: block; }
        .auth-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #999;
        }

        /* Chat view */
        .chat-container {
            display: none;
            flex-direction: column;
            max-width: 700px;
            margin: 0 auto;
            background: linear-gradient(180deg, #FAF8F5 0%, #F5F0E8 50%, #F0EAE1 100%);
        }
        /* When active: pin to the visual viewport so the keyboard never moves layout around. */
        .chat-container.active {
            display: flex;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            /* Height is driven by visualViewport so the input docks above the keyboard. */
            height: var(--chat-h, 100dvh);
            z-index: 50;
            overflow: hidden;
        }
        /* Lock page scroll while chat is active so iOS can't shift the document up when the input focuses. */
        body.in-chat {
            height: 100%;
            overflow: hidden;
            position: fixed;
            inset: 0;
            width: 100%;
        }

        /* Past-due payment banner */
        .past-due-banner {
            display: none;
            padding: 12px 20px;
            padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
            background: linear-gradient(90deg, #B44545 0%, #C85555 100%);
            color: #fff;
            font-size: 0.92rem;
            line-height: 1.4;
            cursor: pointer;
            border-bottom: 1px solid rgba(0,0,0,0.08);
            transition: background 0.15s ease;
        }
        .past-due-banner.active { display: flex; align-items: center; gap: 12px; }
        .past-due-banner:hover { background: linear-gradient(90deg, #A03F3F 0%, #B84F4F 100%); }
        .past-due-banner-icon {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .past-due-banner-text {
            flex: 1;
            min-width: 0;
        }
        .past-due-banner-text strong {
            font-weight: 600;
            display: block;
            margin-bottom: 2px;
        }
        .past-due-banner-text span {
            opacity: 0.92;
            font-size: 0.85rem;
        }
        .past-due-banner-arrow {
            flex-shrink: 0;
            opacity: 0.85;
        }

        .chat-header {
            padding: 20px 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(250, 248, 245, 0.95);
            box-shadow: 0 1px 8px rgba(139, 115, 85, 0.06);
            z-index: 10;
        }
        .chat-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, #8B7355 0%, #A89078 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: #fff;
            cursor: pointer;
            font-weight: 600;
            box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.12), 0 2px 8px rgba(139, 115, 85, 0.15);
        }
        .chat-header-text h2 {
            font-size: 1rem;
            font-weight: 600;
            color: #2D2A26;
            margin: 0;
        }
        .chat-header-text p {
            font-size: 0.8rem;
            color: #9C8468;
        }
        .chat-online-status {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 2px;
        }
        .chat-online-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #5a9e6a;
            flex-shrink: 0;
        }
        .chat-online-label {
            font-size: 0.68rem;
            color: rgba(90,158,106,0.8);
            font-weight: 500;
            letter-spacing: 0.2px;
        }

        .goal-banner {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: #f9f6f1;
            border-bottom: 1px solid #e8e0d4;
            font-size: 12px;
            color: #6b5c4c;
        }
        .goal-icon { font-size: 14px; }
        .goal-text { font-weight: 500; }
        .goal-days { margin-left: auto; opacity: 0.7; white-space: nowrap; }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            scrollbar-width: thin;
            scrollbar-color: rgba(139, 115, 85, 0.2) transparent;
        }
        .chat-messages::-webkit-scrollbar { width: 5px; }
        .chat-messages::-webkit-scrollbar-track { background: transparent; }
        .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(139, 115, 85, 0.2);
            border-radius: 10px;
        }
        .chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(139, 115, 85, 0.35); }

        .message {
            max-width: 80%;
            padding: 16px 20px;
            border-radius: 22px;
            font-size: 0.95rem;
            line-height: 1.55;
            animation: msgIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        /* No entry animation when restoring history — otherwise 30 bubbles pop at once */
        .chat-messages.restoring .message,
        .chat-messages.restoring .message-options,
        .chat-messages.restoring .date-divider { animation: none; }
        @keyframes msgIn {
            from { opacity: 0; transform: translateY(8px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .message.user {
            align-self: flex-end;
            background: linear-gradient(135deg, #2D2A26 0%, #3D3630 100%);
            color: #fff;
            border-bottom-right-radius: 6px;
            box-shadow: 0 2px 8px rgba(45, 42, 38, 0.12);
        }
        .message.assistant {
            align-self: flex-start;
            background: #FFFDF9;
            color: #2D2A26;
            border: none;
            border-bottom-left-radius: 6px;
            box-shadow: 0 1px 6px rgba(139, 115, 85, 0.08), 0 1px 2px rgba(139, 115, 85, 0.06);
        }
        .nerf-hint {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 0 2px;
            margin-top: -2px;
            margin-bottom: 6px;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.2s;
        }
        /* Message action menu (long-press / hover) */
        .msg-actions {
            position: absolute;
            display: flex;
            gap: 4px;
            background: rgba(28, 24, 20, 0.96);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 6px;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06);
            z-index: 9999;
            opacity: 0;
            transform: translateY(4px) scale(0.96);
            transition: opacity 0.14s ease, transform 0.14s ease;
            pointer-events: none;
            font-family: 'DM Sans', sans-serif;
        }
        .msg-actions.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        .msg-actions button {
            background: transparent;
            border: none;
            color: #FAF8F5;
            font-size: 0.82rem;
            font-weight: 500;
            padding: 7px 12px;
            border-radius: 8px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: inherit;
            transition: background 0.12s;
        }
        .msg-actions button:hover { background: rgba(255,255,255,0.08); }
        .msg-actions button:active { background: rgba(255,255,255,0.14); }
        .msg-actions svg { width: 14px; height: 14px; opacity: 0.85; }
        /* Toast for save confirm */
        .msg-toast {
            position: fixed;
            bottom: 110px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: rgba(28, 24, 20, 0.96);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: #FAF8F5;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.85rem;
            font-weight: 500;
            padding: 10px 16px;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
            z-index: 10000;
            max-width: 80%;
            text-align: center;
            line-height: 1.35;
        }
        .msg-toast.visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        .msg-toast .msg-toast-sub {
            display: block;
            font-size: 0.72rem;
            opacity: 0.65;
            margin-top: 2px;
            font-weight: 400;
        }
        /* Subtle highlight on the message that was just saved */
        .message.just-saved {
            box-shadow: 0 0 0 2px #C9A66B, 0 1px 6px rgba(139, 115, 85, 0.18);
            transition: box-shadow 0.4s ease;
        }
        .nerf-hint:hover { opacity: 0.9; }
        .nerf-text {
            font-size: 11px;
            color: #C9A66B;
        }
        .message.system {
            align-self: center;
            max-width: 90%;
            background: transparent;
            color: #A89880;
            font-size: 0.82rem;
            font-style: italic;
            padding: 10px 16px;
            text-align: center;
            box-shadow: none;
        }
        .exit-chat-btn {
            background: rgba(139,115,85,0.08);
            color: #8B7355;
            border: 1px solid rgba(139,115,85,0.15);
            padding: 5px 12px;
            border-radius: 8px;
            font-size: 0.78rem;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.2s;
            white-space: nowrap;
        }
        .exit-chat-btn:hover {
            background: rgba(139,115,85,0.15);
        }
        .exit-menu {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            justify-content: center;
            align-items: center;
        }
        .exit-menu.active { display: flex; }
        .exit-menu-card {
            background: #FAF8F5;
            border-radius: 16px;
            padding: 28px 24px;
            max-width: 320px;
            width: 90%;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0,0,0,0.12);
        }
        .exit-menu-card h3 {
            margin: 0 0 8px;
            color: #3B2F20;
            font-size: 1.1rem;
            font-weight: 600;
        }
        .exit-menu-card p {
            margin: 0 0 20px;
            color: #8B7355;
            font-size: 0.85rem;
            line-height: 1.5;
        }
        .exit-option {
            display: block;
            width: 100%;
            padding: 12px 16px;
            margin-bottom: 10px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.9rem;
            transition: background 0.2s;
        }
        .exit-option.save {
            background: #3B2F20;
            color: #FAF8F5;
        }
        .exit-option.save:hover { background: #4A3C2E; }
        .exit-option.leave {
            background: transparent;
            color: #8B7355;
            border: 1px solid rgba(139,115,85,0.2);
        }
        .exit-option.leave:hover { background: rgba(139,115,85,0.08); }
        .date-divider {
            text-align: center;
            color: #A89880;
            font-size: 0.75rem;
            margin: 16px 0;
            position: relative;
            display: flex;
            align-items: center;
            align-self: stretch;
        }
        .date-divider::before,
        .date-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(139, 115, 85, 0.12);
        }
        .date-divider span {
            padding: 0 12px;
        }
        .load-more-btn {
            text-align: center;
            color: #8B7355;
            font-size: 0.8rem;
            padding: 10px;
            cursor: pointer;
            opacity: 0.7;
        }
        .load-more-btn:hover { opacity: 1; }
        .message.typing { color: #8B7355; }
        .message-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 8px 0;
            max-width: 80%;
        }
        .options-label {
            font-size: 0.75rem;
            color: rgba(139, 115, 85, 0.5);
            letter-spacing: 0.03em;
            margin-bottom: 2px;
        }
        .option-btn {
            background: rgba(139, 115, 85, 0.04);
            border: 1.5px solid rgba(139, 115, 85, 0.25);
            color: #7A6548;
            padding: 12px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-family: inherit;
            cursor: pointer;
            text-align: left;
            transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
        }
        .option-btn:hover {
            background: rgba(139, 115, 85, 0.08);
            border-color: rgba(139, 115, 85, 0.45);
            color: #6B5740;
            box-shadow: 0 2px 10px rgba(139, 115, 85, 0.1);
            transform: translateY(-1px);
        }
        .option-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: #f0ebe4;
            border-color: rgba(139, 115, 85, 0.12);
            color: #A89880;
            box-shadow: none;
            transform: none;
        }
        .typing-dots::after {
            content: '';
            animation: dots 1.5s infinite;
            color: #9C8468;
        }
        @keyframes dots {
            0%, 20% { content: '.'; }
            40% { content: '..'; }
            60%, 100% { content: '...'; }
        }

        .chat-input-container {
            padding: 10px 20px calc(env(safe-area-inset-bottom, 12px) + 12px);
            background: transparent;
        }
        .chat-input-wrapper {
            display: flex;
            gap: 10px;
            align-items: flex-end;
        }
        .chat-input {
            flex: 1;
            background: #FFFDF9;
            border: 1px solid rgba(139, 115, 85, 0.12);
            border-radius: 24px;
            padding: 14px 20px;
            color: #2D2A26;
            font-size: 1rem;
            font-family: inherit;
            outline: none;
            resize: none;
            max-height: 120px;
            line-height: 1.4;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .chat-input::placeholder { color: rgba(139, 115, 85, 0.4); }
        .chat-input:focus {
            border-color: rgba(139, 115, 85, 0.35);
            box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.08);
        }

        .send-btn {
            background: linear-gradient(135deg, #8B7355 0%, #A08060 100%);
            border: none;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
            flex-shrink: 0;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        .send-btn:hover { transform: scale(1.05); box-shadow: 0 3px 12px rgba(139, 115, 85, 0.25); }
        .send-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
        .send-btn svg { width: 20px; height: 20px; fill: #fff; }

        /* Image upload button */
        .img-upload-btn {
            background: none;
            border: none;
            width: 44px;
            height: 44px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border-radius: 50%;
            transition: background 0.2s ease, transform 0.15s ease;
            margin-bottom: 4px;
        }
        .img-upload-btn:hover { background: rgba(139, 115, 85, 0.08); }
        .img-upload-btn:active { transform: scale(0.92); }
        .img-upload-btn svg { width: 24px; height: 24px; stroke: #8B7355; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; transition: opacity 0.2s; }
        .img-upload-btn:hover svg { opacity: 1; }

        /* Image preview in input area */
        .img-preview-bar {
            display: none;
            padding: 8px 20px 4px;
        }
        .img-preview-bar.active { display: flex; align-items: center; gap: 10px; }
        .img-preview-thumb {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            object-fit: cover;
            border: 1px solid rgba(139, 115, 85, 0.15);
            box-shadow: 0 2px 8px rgba(45, 42, 38, 0.08);
        }
        .img-preview-label {
            font-size: 0.8rem;
            color: rgba(139, 115, 85, 0.7);
            flex: 1;
        }
        .img-preview-remove {
            background: none;
            border: none;
            cursor: pointer;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(139, 115, 85, 0.5);
            font-size: 1.1rem;
            transition: background 0.15s, color 0.15s;
        }
        .img-preview-remove:hover { background: rgba(139, 115, 85, 0.1); color: #8B7355; }

        /* Image upload bottom sheet */
        .img-sheet-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(45, 42, 38, 0.4);
            z-index: 500;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        .img-sheet-overlay.open { display: flex; align-items: flex-end; }
        .img-sheet-overlay.visible { opacity: 1; }
        .img-sheet {
            width: 100%;
            background: #FFFDF9;
            border-radius: 20px 20px 0 0;
            padding: 20px 24px calc(env(safe-area-inset-bottom, 16px) + 24px);
            transform: translateY(100%);
            transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        }
        .img-sheet-overlay.visible .img-sheet { transform: translateY(0); }
        .img-sheet-handle {
            width: 36px;
            height: 4px;
            background: rgba(139, 115, 85, 0.2);
            border-radius: 2px;
            margin: 0 auto 20px;
        }
        .img-sheet h3 {
            font-family: 'Instrument Serif', serif;
            font-size: 1.4rem;
            font-weight: 400;
            color: #2D2A26;
            margin-bottom: 4px;
        }
        .img-sheet p {
            font-size: 0.9rem;
            color: rgba(139, 115, 85, 0.7);
            margin-bottom: 20px;
            line-height: 1.4;
        }
        .img-sheet-dropzone {
            border: 1.5px dashed rgba(139, 115, 85, 0.25);
            border-radius: 16px;
            padding: 32px 20px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            background: rgba(139, 115, 85, 0.02);
        }
        .img-sheet-dropzone:hover, .img-sheet-dropzone:active {
            border-color: rgba(139, 115, 85, 0.45);
            background: rgba(139, 115, 85, 0.05);
        }
        .img-sheet-dropzone svg {
            width: 32px;
            height: 32px;
            stroke: #8B7355;
            fill: none;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            opacity: 0.5;
            margin-bottom: 10px;
        }
        .img-sheet-dropzone span {
            display: block;
            font-size: 0.95rem;
            color: #8B7355;
            font-weight: 500;
        }
        .img-sheet-dropzone small {
            display: block;
            font-size: 0.78rem;
            color: rgba(139, 115, 85, 0.45);
            margin-top: 6px;
        }

        /* User message with image */
        .message.user .msg-image {
            max-width: 200px;
            max-height: 260px;
            border-radius: 14px;
            margin-bottom: 6px;
            object-fit: contain;
            border: 1px solid rgba(139, 115, 85, 0.1);
        }

        /* Staggered load animations */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .landing .hero h1 {
            animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
            animation-delay: 0.1s;
        }
        .landing .hero .subtitle {
            animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
            animation-delay: 0.25s;
        }
        .landing .start-btn {
            animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
            animation-delay: 0.4s;
        }
        .landing-steps, .landing-features, .landing-faq, .landing-bottom-cta {
            animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
            animation-delay: 0.6s;
        }
        @media (prefers-reduced-motion: reduce) {
            .landing .hero h1, .landing .hero .subtitle, .landing .start-btn,
            .landing-steps, .landing-features, .landing-faq, .landing-bottom-cta {
                animation: none;
                opacity: 1;
            }
        }

        /* Scroll-to-bottom FAB — shows when user scrolls up in chat */
        .scroll-bottom-fab {
            position: absolute;
            right: 16px;
            bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 253, 249, 0.95);
            border: 1px solid rgba(139, 115, 85, 0.15);
            box-shadow: 0 4px 16px rgba(45, 42, 38, 0.12), 0 1px 3px rgba(45, 42, 38, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 20;
            opacity: 0;
            transform: translateY(6px) scale(0.9);
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        .scroll-bottom-fab.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        .scroll-bottom-fab:active { transform: scale(0.92); }
        .scroll-bottom-fab svg { width: 20px; height: 20px; fill: none; stroke: #8B7355; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

        @media (max-width: 767px) {
            .message { max-width: 88%; }
            .auth-box { padding: 32px 24px; }
            .chat-messages { padding: 16px 16px; }
            .chat-header { padding: 14px 16px; padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
            .chat-input-container { padding: 8px 16px calc(env(safe-area-inset-bottom, 8px) + 8px); }
        }

        /* Upgrade Banner */
        .upgrade-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: #8B7355;
            color: #fff;
            padding: 12px 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            z-index: 200;
            font-size: 0.95rem;
        }
        .upgrade-banner p { margin: 0; }
        .upgrade-banner button {
            background: none;
            border: none;
            color: #fff;
            font-size: 1.2rem;
            cursor: pointer;
            padding: 0 8px;
        }
        .upgrade-banner + .landing { padding-top: 140px; }

        /* Memory Modal */
        .memory-modal {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 1000;
        }
        .memory-modal.active { display: flex; }
        .memory-box {
            background: #FAF8F5;
            border-radius: 20px;
            padding: 32px;
            max-width: 440px;
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
        }
        .memory-box h2 {
            font-size: 1.3rem;
            margin-bottom: 8px;
            color: #2D2A26;
        }
        .memory-box .memory-subtitle {
            color: #6B6560;
            margin-bottom: 24px;
            font-size: 0.9rem;
        }
        .memory-section {
            margin-bottom: 20px;
        }
        .memory-section h3 {
            font-size: 0.85rem;
            color: #8B7355;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }
        .memory-section p {
            color: #2D2A26;
            font-size: 0.95rem;
            line-height: 1.5;
        }
        .memory-person {
            background: #fff;
            border-radius: 12px;
            padding: 12px 16px;
            margin-bottom: 8px;
        }
        .memory-person .name {
            font-weight: 600;
            color: #2D2A26;
        }
        .memory-person .relationship {
            color: #8B7355;
            font-size: 0.85rem;
        }
        .memory-person .dynamic {
            color: #6B6560;
            font-size: 0.9rem;
            margin-top: 4px;
        }
        .memory-pattern {
            background: #fff;
            border-radius: 12px;
            padding: 12px 16px;
            margin-bottom: 8px;
            color: #2D2A26;
            font-size: 0.9rem;
            line-height: 1.4;
        }
        .memory-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #999;
            line-height: 1;
        }
        .memory-close:hover { color: #666; }
        .memory-empty {
            text-align: center;
            color: #6B6560;
            padding: 24px;
        }
        .memory-stats {
            display: flex;
            gap: 16px;
            margin-bottom: 24px;
        }
        .memory-stat {
            flex: 1;
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            text-align: center;
        }
        .memory-stat .number {
            font-size: 1.5rem;
            font-weight: 700;
            color: #8B7355;
        }
        .memory-stat .label {
            font-size: 0.75rem;
            color: #6B6560;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .memory-btn {
            background: none;
            border: none;
            color: #8B7355;
            font-size: 0.8rem;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            font-family: inherit;
            transition: background 0.2s;
        }
        .memory-btn:hover { background: rgba(139, 115, 85, 0.1); }

        /* Profile avatar + dropdown */
        .profile-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #8B7355;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            border: none;
            transition: background 0.2s;
        }
        .profile-avatar:hover { background: #7A6548; }
        .profile-avatar.is-plus {
            background: linear-gradient(135deg, #D4A574 0%, #C4956A 100%);
        }
        .profile-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 6px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.12);
            min-width: 200px;
            z-index: 100;
            overflow: hidden;
        }
        .profile-dropdown.open { display: block; }
        .profile-dropdown-header {
            padding: 14px 16px;
            border-bottom: 1px solid #f0ebe6;
        }
        .profile-dropdown-name {
            font-weight: 600;
            color: #333;
            font-size: 0.9rem;
        }
        .profile-dropdown-email {
            font-size: 0.75rem;
            color: #999;
            margin-top: 2px;
            word-break: break-all;
        }
        .profile-dropdown-badge { margin-top:6px; font-size:0.7rem; font-weight:600; display:inline-block; padding:3px 10px; border-radius:100px; }
        .profile-dropdown-badge.plus { background:linear-gradient(135deg,rgba(139,115,85,0.12),rgba(201,166,107,0.15)); color:#8B7355; }
        .profile-dropdown-badge.free { background:rgba(0,0,0,0.04); color:#8A7F74; }
        .profile-dropdown-item {
            padding: 11px 16px;
            cursor: pointer;
            font-size: 0.85rem;
            color: #555;
            transition: background 0.15s;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            font-family: inherit;
        }
        .profile-dropdown-item:hover { background: #f8f5f2; }
        .profile-dropdown-item.logout { color: #c0392b; }

        /* Support modal */
        .support-modal-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:100000; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
        .support-modal-backdrop.active { display:flex; align-items:center; justify-content:center; }
        .support-modal { display:none; background:white; border-radius:20px; z-index:100001; padding:24px 20px 20px; width:90%; max-width:360px; max-height:80vh; overflow-y:auto; box-shadow:0 12px 40px rgba(0,0,0,0.15); }
        .support-modal.active { display:block; animation:support-pop-in 0.25s ease; }
        @keyframes support-pop-in { from { transform:scale(0.92); opacity:0; } to { transform:scale(1); opacity:1; } }
        .support-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
        .support-modal-title { font-family:'Lora',serif; font-size:1.1rem; font-weight:600; color:#2D2A26; }
        .support-modal-close { background:none; border:none; font-size:1.2rem; color:#8A7F74; cursor:pointer; padding:4px 8px; }
        .support-modal-sub { font-size:0.78rem; color:#8A7F74; margin-bottom:16px; }
        .support-category { display:flex; align-items:center; gap:10px; width:100%; padding:13px 14px; margin-bottom:8px; background:#FAF8F5; border:1px solid rgba(139,115,85,0.1); border-radius:12px; font-family:'DM Sans',sans-serif; font-size:0.88rem; font-weight:500; color:#2D2A26; cursor:pointer; text-align:left; transition:background 0.15s; }
        .support-category:hover { background:#F3EDE6; }
        .support-category-icon { font-size:1.1rem; width:28px; text-align:center; flex-shrink:0; }
        .support-textarea { width:100%; border:1px solid rgba(139,115,85,0.15); border-radius:12px; padding:12px 14px; font-family:'DM Sans',sans-serif; font-size:0.88rem; resize:none; outline:none; background:#FAF8F5; color:#2D2A26; box-sizing:border-box; }
        .support-textarea:focus { border-color:#8B7355; }
        .support-form-hint { font-size:0.72rem; color:#8A7F74; margin-top:8px; }
        .support-form-error { font-size:0.8rem; color:#c0392b; margin-top:6px; }
        .support-submit { display:block; width:100%; padding:13px; margin-top:12px; background:#8B7355; color:white; border:none; border-radius:12px; font-family:'DM Sans',sans-serif; font-size:0.88rem; font-weight:600; cursor:pointer; }
        .support-submit:active { transform:scale(0.98); }
        .support-submit:disabled { opacity:0.5; }
        .support-back { display:inline-flex; align-items:center; gap:4px; background:none; border:none; font-family:'DM Sans',sans-serif; font-size:0.82rem; color:#8A7F74; cursor:pointer; padding:0; margin-bottom:12px; }
        .support-back:hover { color:#8B7355; }
        .support-success { text-align:center; padding:24px 0; }
        .support-success.hidden { display:none; }
        .support-success-icon { width:48px; height:48px; border-radius:50%; background:rgba(139,115,85,0.1); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:1.4rem; color:#8B7355; font-weight:700; }
        .support-success-text { font-size:0.9rem; color:#3D3630; }

        /* Under-18 hard block — no exit, no dismiss */
        .u18-block-overlay { display:none; position:fixed; inset:0; background:rgba(20,15,10,0.88); z-index:2147483647; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); align-items:center; justify-content:center; padding:20px; }
        .u18-block-overlay.active { display:flex; }
        .u18-block-card { background:#FAF8F5; border-radius:20px; padding:28px 24px 22px; max-width:380px; width:100%; box-shadow:0 24px 70px rgba(0,0,0,0.5); animation:u18-pop 0.32s ease; }
        @keyframes u18-pop { from { transform:scale(0.94); opacity:0; } to { transform:scale(1); opacity:1; } }
        .u18-block-icon { width:56px; height:56px; border-radius:50%; background:rgba(139,115,85,0.12); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:1.5rem; }
        .u18-block-title { font-family:'Lora',serif; font-size:1.32rem; font-weight:600; color:#2D2A26; text-align:center; margin:0 0 10px; }
        .u18-block-body { font-family:'DM Sans',sans-serif; font-size:0.92rem; line-height:1.55; color:#3D3630; text-align:center; margin:0 0 18px; }
        .u18-block-resources { background:white; border:1px solid rgba(139,115,85,0.15); border-radius:14px; padding:6px 16px; margin-bottom:14px; }
        .u18-block-resource { display:block; padding:12px 0; border-bottom:1px solid rgba(139,115,85,0.08); font-family:'DM Sans',sans-serif; font-size:0.86rem; color:#2D2A26; text-decoration:none; }
        .u18-block-resource:last-child { border-bottom:none; }
        .u18-block-resource strong { display:block; color:#8B7355; font-weight:600; margin-bottom:2px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; }
        .u18-block-foot { font-family:'DM Sans',sans-serif; font-size:0.78rem; color:#8A7F74; text-align:center; margin:0; line-height:1.5; }

        /* Account settings modal */
        .account-modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 200;
            align-items: center;
            justify-content: center;
        }
        .account-modal-overlay.open { display: flex; }
        .account-modal {
            background: #fff;
            border-radius: 16px;
            padding: 28px;
            width: 90%;
            max-width: 380px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
        }
        .account-modal h3 {
            margin: 0 0 20px;
            font-size: 1.1rem;
            color: #333;
        }
        .account-modal label {
            font-size: 0.8rem;
            color: #888;
            display: block;
            margin-bottom: 6px;
        }
        .account-modal input {
            width: 100%;
            padding: 10px 12px;
            border: 1.5px solid #e0dbd5;
            border-radius: 8px;
            font-size: 0.95rem;
            font-family: inherit;
            outline: none;
            box-sizing: border-box;
            transition: border-color 0.2s;
        }
        .account-modal input:focus { border-color: #8B7355; }
        .account-modal-section {
            border-top: 1px solid #f0ebe6;
            margin-top: 20px;
            padding-top: 18px;
        }
        .account-modal-section h4 {
            margin: 0 0 12px;
            font-size: 0.9rem;
            color: #333;
            font-weight: 600;
        }
        .subscription-card {
            background: #faf8f5;
            border-radius: 10px;
            padding: 14px 16px;
        }
        .subscription-card-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .subscription-plan {
            font-size: 0.9rem;
            font-weight: 600;
            color: #333;
        }
        .subscription-plan .plan-badge {
            display: inline-block;
            background: linear-gradient(135deg, #D4A574 0%, #C4956A 100%);
            color: #fff;
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 6px;
            font-weight: 600;
            vertical-align: middle;
        }
        .subscription-price {
            font-size: 0.85rem;
            color: #888;
        }
        .subscription-status {
            font-size: 0.78rem;
            color: #888;
            margin-top: 8px;
        }
        .subscription-status .status-dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #4CAF50;
            margin-right: 5px;
            vertical-align: middle;
        }
        .subscription-status .status-dot.canceling {
            background: #f0ad4e;
        }
        .subscription-manage-btn {
            margin-top: 12px;
            width: 100%;
            padding: 9px;
            border-radius: 8px;
            font-size: 0.82rem;
            font-family: inherit;
            cursor: pointer;
            border: 1.5px solid #e0dbd5;
            background: #fff;
            color: #666;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
        }
        .subscription-manage-btn:hover {
            border-color: #ccc;
            color: #444;
        }
        .account-modal-btns {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        .account-modal-btns button {
            flex: 1;
            padding: 10px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-family: inherit;
            cursor: pointer;
            border: none;
        }
        .account-modal-cancel {
            background: #f0ebe6;
            color: #666;
        }
        .account-modal-save {
            background: #8B7355;
            color: #fff;
            font-weight: 600;
        }
        /* Preference saved indicator */
        .preference-saved {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.72rem;
            color: #8B7355;
            opacity: 0;
            animation: prefFadeIn 0.4s ease 0.3s forwards;
            margin-top: 4px;
            margin-right: 8px;
            justify-content: flex-end;
        }
        .preference-saved-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #8B7355;
        }
        @keyframes prefFadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 0.7; transform: translateY(0); }
        }

        /* ===== Per-message feedback (thumbs + tell us more) ===== */
        .msg-feedback {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: -10px 0 6px 4px;
            opacity: 0;
            animation: fbFadeIn 0.3s ease 0.15s forwards;
        }
        @keyframes fbFadeIn {
            from { opacity: 0; transform: translateY(-2px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .msg-fb-btn {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: none;
            background: transparent;
            color: #8B7355;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: background 0.15s, color 0.15s, transform 0.1s;
        }
        .msg-fb-btn svg {
            width: 13px;
            height: 13px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .msg-fb-btn:hover {
            background: rgba(139,115,85,0.1);
            color: #5A4938;
        }
        .msg-fb-btn:active { transform: scale(0.92); }
        .msg-fb-btn.active {
            background: rgba(139,115,85,0.15);
            color: #3D3630;
        }
        .msg-fb-btn.active svg { fill: currentColor; stroke: currentColor; }
        .msg-fb-more {
            font-size: 0.7rem;
            color: #8B7355;
            background: transparent;
            border: 1px solid rgba(139,115,85,0.3);
            padding: 2px 9px;
            border-radius: 999px;
            cursor: pointer;
            font-family: inherit;
            margin-left: 4px;
            display: none;
            line-height: 1.3;
        }
        .msg-fb-more:hover {
            background: rgba(139,115,85,0.08);
            border-color: rgba(139,115,85,0.55);
        }
        .msg-feedback.has-rating .msg-fb-more { display: inline-block; }
        .msg-fb-thanks {
            font-size: 0.7rem;
            color: #5A8F4E;
            margin-left: 4px;
            display: none;
        }
        .msg-feedback.has-tags .msg-fb-thanks { display: inline; }

        /* Feedback modal */
        .fb-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(30,25,20,0.55);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .fb-modal-overlay.active { display: flex; }
        .fb-modal {
            background: #fff;
            border-radius: 16px;
            padding: 22px 22px 18px;
            max-width: 420px;
            width: 100%;
            box-shadow: 0 12px 40px rgba(0,0,0,0.18);
            max-height: 90vh;
            overflow-y: auto;
        }
        .fb-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }
        .fb-modal-title {
            font-size: 1.05rem;
            font-weight: 600;
            color: #2c2520;
        }
        .fb-modal-close {
            background: transparent;
            border: none;
            font-size: 1.3rem;
            color: #999;
            cursor: pointer;
            padding: 0 4px;
            line-height: 1;
        }
        .fb-tag-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 14px;
        }
        .fb-tag {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 10px;
            border-radius: 10px;
            border: 1.5px solid #eee4dc;
            background: #fff;
            cursor: pointer;
            font-size: 0.85rem;
            color: #3d342c;
            transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
            font-family: inherit;
            text-align: left;
        }
        .fb-tag:hover { border-color: #c4956a; background: #fdf8f2; }
        .fb-tag.selected {
            background: rgba(196,149,106,0.12);
            border-color: #c4956a;
            color: #5A4938;
        }
        .fb-tag-check {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            border: 1.5px solid #cbbeb1;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .fb-tag.selected .fb-tag-check {
            background: #8B7355;
            border-color: #8B7355;
        }
        .fb-tag.selected .fb-tag-check::after {
            content: '';
            width: 4px;
            height: 8px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg) translate(-1px, -1px);
            display: block;
        }
        .fb-details-label {
            font-size: 0.75rem;
            color: #8B7355;
            margin-bottom: 5px;
        }
        .fb-details {
            width: 100%;
            min-height: 68px;
            border: 1.5px solid #eee4dc;
            border-radius: 10px;
            padding: 9px 11px;
            font-family: inherit;
            font-size: 0.88rem;
            color: #3d342c;
            resize: vertical;
            background: #fdfbf8;
        }
        .fb-details:focus { outline: none; border-color: #c4956a; }
        .fb-modal-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 14px;
        }
        .fb-btn {
            padding: 9px 18px;
            border-radius: 999px;
            border: none;
            font-family: inherit;
            font-size: 0.88rem;
            cursor: pointer;
            font-weight: 500;
        }
        .fb-btn-cancel {
            background: transparent;
            color: #8B7355;
        }
        .fb-btn-submit {
            background: #8B7355;
            color: #fff;
        }
        .fb-btn-submit:hover { background: #6d5a43; }
        .fb-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

        .account-delete-section {
            border-top: 1px solid #f0ebe6;
            margin-top: 20px;
            padding-top: 18px;
        }
        .account-delete-btn {
            width: 100%;
            padding: 10px;
            border-radius: 8px;
            font-size: 0.82rem;
            font-family: inherit;
            cursor: pointer;
            border: 1.5px solid #e8d5d5;
            background: #fff;
            color: #c0392b;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
        }
        .account-delete-btn:hover {
            background: #fdf2f2;
            border-color: #c0392b;
        }
        .account-delete-confirm {
            display: none;
            margin-top: 12px;
        }
        .account-delete-confirm p {
            font-size: 0.82rem;
            color: #888;
            margin-bottom: 10px;
            line-height: 1.4;
        }
        .account-delete-confirm input {
            width: 100%;
            padding: 10px 12px;
            border: 1.5px solid #e8d5d5;
            border-radius: 8px;
            font-size: 0.9rem;
            font-family: inherit;
            outline: none;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        .account-delete-confirm input:focus { border-color: #c0392b; }
        .account-delete-confirm-btn {
            width: 100%;
            padding: 10px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-family: inherit;
            cursor: pointer;
            border: none;
            background: #c0392b;
            color: #fff;
            font-weight: 600;
            opacity: 0.5;
            pointer-events: none;
            transition: opacity 0.2s;
        }
        .account-delete-confirm-btn.enabled {
            opacity: 1;
            pointer-events: auto;
        }

        /* Quest Plus header badge */
        .plus-badge {
            color: #D4A574;
            font-weight: 700;
        }

        /* Quest Plus button */
        .chat-action-btn {
            background: rgba(139, 115, 85, 0.08);
            color: #2D2A26;
            border: 1px solid rgba(139, 115, 85, 0.12);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
            white-space: nowrap;
            letter-spacing: 0.2px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .chat-action-btn:hover {
            background: rgba(139, 115, 85, 0.15);
            border-color: rgba(139, 115, 85, 0.25);
            transform: translateY(-1px);
        }
        .chat-action-btn .btn-emoji {
            font-size: 0.9rem;
            line-height: 1;
        }

        /* Header progress bar */
        .header-progress {
            flex: 1;
            min-width: 0;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            padding: 0 8px;
        }
        .header-level-label {
            font-size: 0.68rem;
            font-weight: 600;
            color: #9C8468;
            letter-spacing: 0.5px;
        }
        .header-bar-track {
            width: 100%;
            height: 3px;
            background: rgba(139, 115, 85, 0.1);
            border-radius: 2px;
            overflow: hidden;
        }
        .header-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #D4A574, #8B7355);
            border-radius: 2px;
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            width: 0%;
        }

        /* Progress detail panel */
        .progress-panel {
            position: fixed;
            inset: 0;
            background: #FAF8F5;
            z-index: 1050;
            display: flex;
            flex-direction: column;
            transform: translateY(100%);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .progress-panel.active { transform: translateY(0); }
        .pp-header {
            position: sticky; top: 0; z-index: 10;
            background: rgba(250,248,245,0.95); backdrop-filter: blur(12px);
            padding: 16px 20px;
            display: flex; align-items: center; justify-content: space-between;
            border-bottom: 1px solid rgba(139,115,85,0.08);
        }
        .pp-back {
            background: none; border: none; cursor: pointer; padding: 4px;
            color: #8B7355; display: flex; align-items: center; gap: 6px;
            font-family: inherit; font-size: 0.88rem; font-weight: 500;
        }
        .pp-title {
            font-size: 0.78rem; font-weight: 600; letter-spacing: 1.2px;
            text-transform: uppercase; color: #8B7355;
        }
        .pp-content { flex: 1; overflow-y: auto; padding: 0 0 40px; }
        /* Constellation */
        .pp-constellation { position: relative; width: 100%; height: 240px; overflow: hidden; }
        .pp-constellation-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        .pp-constellation-svg line { stroke: rgba(201,166,107,0.2); stroke-width: 1; }
        .pp-constellation-svg line.strong { stroke: rgba(201,166,107,0.35); stroke-width: 1.5; }
        .pp-constellation::after { content:''; position:absolute; bottom:0; left:0; right:0; height:40px; background:linear-gradient(transparent,#FAF8F5); pointer-events:none; }
        .pp-c-node { position:absolute; display:flex; flex-direction:column; align-items:center; gap:4px; transform:translate(-50%,-50%); }
        .pp-c-dot { width:10px; height:10px; border-radius:50%; background:#C9A66B; box-shadow:0 0 12px rgba(201,166,107,0.3); animation:ppNodePulse 4s ease-in-out infinite; }
        .pp-c-dot.lg { width:14px; height:14px; box-shadow:0 0 18px rgba(201,166,107,0.4); }
        .pp-c-name { font-size:0.72rem; font-weight:600; color:#2D2A26; white-space:nowrap; }
        @keyframes ppNodePulse { 0%,100%{opacity:0.8;transform:scale(1);} 50%{opacity:1;transform:scale(1.15);} }
        .pp-c-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px; }
        .pp-c-center-circle { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#C9A66B,#8B7355); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:white; font-weight:700; font-family:'Instrument Serif',serif; box-shadow:0 4px 20px rgba(139,115,85,0.25); }
        .pp-c-center-label { font-size:0.68rem; color:rgba(139,115,85,0.5); font-weight:500; }

        /* Sections */
        .pp-section { padding: 0 22px; }
        .pp-section-label { font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.8px; color:rgba(139,115,85,0.4); margin-bottom:10px; margin-top:8px; }

        /* Knows cards */
        .pp-knows-card { background:white; border-radius:14px; border:1px solid rgba(139,115,85,0.06); padding:14px 16px; margin:0 22px 8px; }
        .pp-knows-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
        .pp-knows-icon { font-size:0.85rem; }
        .pp-knows-title { font-size:0.82rem; font-weight:600; color:#2D2A26; }
        .pp-knows-text { font-size:0.78rem; color:rgba(139,115,85,0.55); line-height:1.5; }
        .pp-story-snippet { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid rgba(139,115,85,0.06); }
        .pp-story-snippet:last-child { border-bottom:none; }
        .pp-story-dot { width:6px; height:6px; border-radius:50%; background:rgba(201,166,107,0.4); margin-top:6px; flex-shrink:0; }
        .pp-story-text { font-size:0.78rem; color:rgba(139,115,85,0.55); line-height:1.45; }

        /* Pattern cards */
        .pp-pattern-card { background:white; border-radius:14px; border:1px solid rgba(139,115,85,0.06); padding:14px 16px; margin:0 22px 8px; }
        .pp-pattern-header { display:flex; align-items:center; justify-content:space-between; }
        .pp-pattern-name { font-size:0.82rem; font-weight:600; color:#2D2A26; display:flex; align-items:center; gap:8px; }
        .pp-pattern-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
        .pp-pattern-dot.active { background:#C9A66B; }
        .pp-pattern-dot.shifting { background:#7BAF6E; }
        .pp-pattern-tag { font-size:0.65rem; padding:2px 7px; border-radius:5px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
        .pp-pattern-tag.active { background:rgba(201,166,107,0.1); color:#C9A66B; }
        .pp-pattern-tag.shifting { background:rgba(123,175,110,0.1); color:#7BAF6E; }
        .pp-pattern-desc { font-size:0.78rem; color:rgba(139,115,85,0.55); margin-top:6px; line-height:1.45; }

        /* Then vs Now */
        .pp-shift-card { background:white; border-radius:14px; border:1px solid rgba(139,115,85,0.06); padding:14px 16px; margin:0 22px 8px; }
        .pp-shift-topic { font-size:0.78rem; font-weight:600; color:#2D2A26; margin-bottom:10px; }
        .pp-shift-row { display:flex; gap:12px; }
        .pp-shift-col { flex:1; }
        .pp-shift-label { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin-bottom:4px; }
        .pp-shift-label.then { color:rgba(139,115,85,0.35); }
        .pp-shift-label.now { color:#C9A66B; }
        .pp-shift-text { font-size:0.76rem; color:rgba(139,115,85,0.55); line-height:1.4; font-style:italic; }

        /* Locked blur for free users */
        .pp-locked-section { position:relative; }
        .pp-locked-blur { filter:blur(6px); opacity:0.5; pointer-events:none; user-select:none; }
        .pp-locked-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; z-index:2; width:80%; }
        .pp-locked-overlay-text { font-family:'Instrument Serif',serif; font-size:1.05rem; color:#2D2A26; margin-bottom:12px; line-height:1.4; }
        .pp-locked-btn { background:#8B7355; color:white; border:none; border-radius:12px; padding:13px 28px; font-size:0.88rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s; width:100%; }
        .pp-locked-btn:hover { background:#7A6448; transform:translateY(-1px); }

        /* Footer */
        .pp-footer { text-align:center; padding:12px 22px 22px; font-size:0.72rem; color:rgba(139,115,85,0.35); font-style:italic; }

        .plus-btn {
            background: linear-gradient(135deg, #D4A574 0%, #C4956A 100%);
            color: #fff;
            border: none;
            padding: 5px 12px;
            border-radius: 8px;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
            white-space: nowrap;
            letter-spacing: 0.3px;
        }
        .plus-btn:hover {
            background: linear-gradient(135deg, #C4956A 0%, #B4855A 100%);
            transform: translateY(-1px);
        }
        .plus-btn.is-plus {
            background: linear-gradient(135deg, #8B7355 0%, #7A6345 100%);
            cursor: default;
        }
        .plus-btn.is-plus:hover {
            transform: none;
        }

        /* Inline pattern teaser cards (upsell for free users) */
        .pattern-teaser-card {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 8px 12px 4px 44px;
            padding: 10px 14px;
            background: linear-gradient(135deg, #FFFDF7 0%, #FFF8EE 100%);
            border: 1px solid rgba(212, 165, 116, 0.35);
            border-radius: 12px;
            cursor: pointer;
            opacity: 0;
            transform: translateY(6px);
            animation: patternTeaserIn 0.4s ease forwards;
            animation-delay: 0.3s;
        }
        @keyframes patternTeaserIn {
            to { opacity: 1; transform: translateY(0); }
        }
        .pattern-teaser-icon {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: linear-gradient(135deg, #D4A574 0%, #C4956A 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
        }
        .pattern-teaser-text {
            flex: 1;
            min-width: 0;
        }
        .pattern-teaser-title {
            font-size: 0.82rem;
            font-weight: 600;
            color: #8B7355;
            line-height: 1.3;
        }
        .pattern-teaser-sub {
            font-size: 0.72rem;
            color: #B8A99A;
            margin-top: 1px;
        }
        .pattern-teaser-arrow {
            flex-shrink: 0;
            color: #C4956A;
            font-size: 0.85rem;
        }

        /* Blind spot reveal popup */
        .bs-reveal-backdrop { position:fixed; inset:0; z-index:11000; background:rgba(0,0,0,0); pointer-events:none; transition:background 0.35s; }
        .bs-reveal-backdrop.active { background:rgba(0,0,0,0.55); pointer-events:auto; }
        .bs-reveal-popup { position:fixed; left:50%; top:50%; z-index:11001; width:88%; max-width:340px; background:#FAF8F5; border-radius:24px; transform:translate(-50%,-50%) scale(0.88); opacity:0; pointer-events:none; transition:transform 0.4s cubic-bezier(0.32,0.72,0,1), opacity 0.3s ease; box-shadow:0 30px 80px rgba(0,0,0,0.25); overflow:hidden; }
        .bs-reveal-popup.active { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
        .bs-reveal-glow { position:absolute; top:-60px; left:50%; width:200px; height:200px; transform:translateX(-50%); background:radial-gradient(circle, rgba(196,149,106,0.12) 0%, transparent 70%); pointer-events:none; }
        .bs-reveal-content { position:relative; padding:36px 28px 28px; text-align:center; }
        .bs-reveal-diamond { width:52px; height:52px; margin:0 auto 20px; border-radius:14px; background:linear-gradient(135deg, rgba(196,149,106,0.12), rgba(139,115,85,0.06)); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#C4956A; }
        .bs-reveal-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.8px; color:rgba(139,115,85,0.45); font-weight:600; margin-bottom:14px; }
        .bs-reveal-text { font-family:'Lora',serif; font-size:1rem; color:#2D2A26; line-height:1.6; margin-bottom:24px; }
        .bs-reveal-check { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 0; border-top:1px solid rgba(139,115,85,0.08); }
        .bs-reveal-checkmark { width:20px; height:20px; border-radius:50%; background:rgba(106,168,121,0.12); display:flex; align-items:center; justify-content:center; font-size:0.7rem; color:#5a9e6a; }
        .bs-reveal-added { font-size:0.78rem; color:rgba(139,115,85,0.5); font-weight:500; }
        .bs-reveal-close { position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; background:rgba(139,115,85,0.06); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#8B7355; font-size:0.9rem; }
        .bs-reveal-close:active { background:rgba(139,115,85,0.14); }

        /* Locked blind spot popup */
        .bs-locked-popup { position:fixed; left:50%; top:50%; z-index:11001; width:88%; max-width:340px; background:#FAF8F5; border-radius:24px; transform:translate(-50%,-50%) scale(0.88); opacity:0; pointer-events:none; transition:transform 0.4s cubic-bezier(0.32,0.72,0,1), opacity 0.3s ease; box-shadow:0 30px 80px rgba(0,0,0,0.25); overflow:hidden; }
        .bs-locked-popup.active { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
        .bs-locked-content { position:relative; padding:36px 28px 28px; text-align:center; }
        .bs-locked-icon { width:56px; height:56px; margin:0 auto 18px; border-radius:16px; background:linear-gradient(135deg, rgba(196,149,106,0.1), rgba(139,115,85,0.06)); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
        .bs-locked-title { font-family:'Lora',serif; font-size:1.15rem; font-weight:700; color:#2D2A26; margin-bottom:10px; }
        .bs-locked-desc { font-size:0.82rem; color:rgba(139,115,85,0.6); line-height:1.55; margin-bottom:24px; max-width:280px; margin-left:auto; margin-right:auto; }
        .bs-locked-features { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; text-align:left; }
        .bs-locked-feature { display:flex; align-items:center; gap:10px; font-size:0.8rem; color:#3D3630; }
        .bs-locked-feature-icon { width:28px; height:28px; border-radius:8px; background:rgba(196,149,106,0.08); display:flex; align-items:center; justify-content:center; font-size:0.85rem; flex-shrink:0; }
        .bs-locked-cta { width:100%; padding:14px 0; border:none; border-radius:14px; background:linear-gradient(135deg, #2D2A26, #3D3630); color:#FAF8F5; font-family:'Lora',serif; font-size:0.95rem; font-weight:600; cursor:pointer; transition:opacity 0.2s; }
        .bs-locked-cta:active { opacity:0.85; }
        .bs-locked-dismiss { margin-top:12px; padding:8px 0; cursor:pointer; font-size:0.78rem; color:rgba(139,115,85,0.4); text-align:center; }

        /* Roadmap inline card */
        .roadmap-teaser-card {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 8px 12px 4px 44px;
            padding: 10px 14px;
            background: linear-gradient(135deg, #F5F0FF 0%, #EDE6FF 100%);
            border: 1px solid rgba(130, 100, 200, 0.25);
            border-radius: 12px;
            cursor: pointer;
            opacity: 0;
            transform: translateY(6px);
            animation: patternTeaserIn 0.4s ease forwards;
            animation-delay: 0.3s;
        }
        .roadmap-teaser-icon {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(130,100,200,0.15), rgba(100,80,170,0.1));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
        }

        /* Roadmap popup */
        .roadmap-popup { position:fixed; left:50%; top:50%; z-index:11001; width:88%; max-width:360px; background:#FAF8F5; border-radius:24px; transform:translate(-50%,-50%) scale(0.88); opacity:0; pointer-events:none; transition:transform 0.4s cubic-bezier(0.32,0.72,0,1), opacity 0.3s ease; box-shadow:0 30px 80px rgba(0,0,0,0.25); overflow:hidden; }
        .roadmap-popup.active { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
        .roadmap-content { position:relative; padding:32px 24px 24px; }
        .roadmap-header { text-align:center; margin-bottom:24px; }
        .roadmap-header-icon { width:48px; height:48px; margin:0 auto 16px; border-radius:14px; background:linear-gradient(135deg, rgba(130,100,200,0.1), rgba(100,80,170,0.06)); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
        .roadmap-header-title { font-family:'Lora',serif; font-size:1.1rem; font-weight:700; color:#2D2A26; margin-bottom:4px; }
        .roadmap-header-sub { font-size:0.75rem; color:rgba(139,115,85,0.5); }
        .roadmap-chapters { display:flex; flex-direction:column; gap:0; margin:0 0 20px; position:relative; }
        .roadmap-chapter { display:flex; align-items:flex-start; gap:14px; padding:12px 0; position:relative; }
        .roadmap-chapter-line { position:absolute; left:15px; top:32px; bottom:-12px; width:2px; background:linear-gradient(180deg, rgba(130,100,200,0.2), rgba(130,100,200,0.05)); }
        .roadmap-chapter:last-child .roadmap-chapter-line { display:none; }
        .roadmap-chapter-dot { flex-shrink:0; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, rgba(130,100,200,0.12), rgba(100,80,170,0.06)); border:2px solid rgba(130,100,200,0.2); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; color:rgba(130,100,200,0.6); position:relative; z-index:1; }
        .roadmap-chapter-text { font-family:'Lora',serif; font-size:0.92rem; color:#2D2A26; line-height:1.5; padding-top:4px; }
        .roadmap-chapter-number { font-size:0.65rem; color:rgba(139,115,85,0.35); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; }
        .roadmap-dismiss { text-align:center; padding:8px 0; cursor:pointer; font-size:0.82rem; color:rgba(139,115,85,0.5); font-weight:500; }

        /* Roadmap in journey panel */
        .j-roadmap-section { margin-top:20px; padding-top:18px; border-top:1px solid rgba(139,115,85,0.08); }
        .j-roadmap-title { font-family:'Lora',serif; font-size:0.88rem; font-weight:700; color:#2D2A26; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
        .j-roadmap-title-icon { font-size:0.85rem; }
        .j-roadmap-chapter { display:flex; align-items:flex-start; gap:10px; padding:8px 0; position:relative; }
        .j-roadmap-dot { flex-shrink:0; width:24px; height:24px; border-radius:50%; background:rgba(130,100,200,0.08); border:1.5px solid rgba(130,100,200,0.2); display:flex; align-items:center; justify-content:center; font-size:0.6rem; font-weight:700; color:rgba(130,100,200,0.5); }
        .j-roadmap-text { font-size:0.82rem; color:#3D3630; line-height:1.4; padding-top:2px; }
        .j-roadmap-line { position:absolute; left:11px; top:32px; bottom:-8px; width:1.5px; background:rgba(130,100,200,0.1); }
        .j-roadmap-chapter:last-child .j-roadmap-line { display:none; }

        /* Pattern paywall bottom sheet */
        .pattern-paywall-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(30, 25, 20, 0.55);
            z-index: 100000;
            opacity: 0;
            transition: opacity 0.3s ease;
            align-items: center;
            justify-content: center;
        }
        .pattern-paywall-backdrop.active {
            display: flex;
            opacity: 1;
        }
        .pattern-paywall-sheet {
            position: relative;
            background: #FFFDF9;
            border-radius: 20px;
            padding: 36px 28px 28px;
            z-index: 100001;
            max-width: 340px;
            width: 90%;
            transform: scale(0.9);
            opacity: 0;
            transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.25s ease;
            text-align: center;
        }
        .pattern-paywall-backdrop.active .pattern-paywall-sheet {
            transform: scale(1);
            opacity: 1;
        }
        .pattern-paywall-close {
            position: absolute;
            top: 12px;
            right: 14px;
            background: none;
            border: none;
            font-size: 1.3rem;
            color: #B8A99A;
            cursor: pointer;
            padding: 4px 8px;
            line-height: 1;
        }
        .pattern-paywall-handle { display: none; }
        .pattern-paywall-headline {
            font-family: 'Lora', serif;
            font-size: 1.2rem;
            font-weight: 600;
            color: #2D2A26;
            margin-bottom: 8px;
        }
        .pattern-paywall-sub {
            font-size: 0.82rem;
            color: #8A7F74;
            margin-bottom: 22px;
            line-height: 1.45;
        }
        .pattern-paywall-cta {
            display: block;
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #B8956A 0%, #A07D55 100%);
            color: #fff;
            border: none;
            border-radius: 14px;
            font-size: 0.92rem;
            font-weight: 600;
            font-family: 'DM Sans', sans-serif;
            cursor: pointer;
            letter-spacing: 0.2px;
            margin-bottom: 8px;
        }
        .pattern-paywall-dismiss {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 0.8rem;
            color: #B8A99A;
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px;
            font-family: 'DM Sans', sans-serif;
        }
        .trust-badges {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 10px;
            opacity: 0.5;
        }
        .trust-badges svg { flex-shrink: 0; }
        .trust-badges span {
            font-size: 0.65rem;
            color: #8A7F74;
            letter-spacing: 0.02em;
        }


        /* Plus modal */
        .plus-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1100;
            background: #FAF8F5;
            justify-content: center;
            align-items: center;
            animation: plusFadeIn 0.3s ease;
        }
        @keyframes plusFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes plusSlideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .plus-modal.active { display: flex; }
        .plus-box {
            background: transparent;
            padding: 32px 24px;
            max-width: 420px;
            width: calc(100% - 32px);
            position: relative;
            max-height: 92vh;
            overflow-y: auto;
            text-align: center;
            animation: plusSlideUp 0.4s ease 0.1s both;
        }
        .plus-brand {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, rgba(196,149,106,0.15), rgba(196,149,106,0.05));
            border: 1px solid rgba(196,149,106,0.2);
            color: #D4A574;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 6px 14px;
            border-radius: 100px;
            margin-bottom: 28px;
        }
        .plus-logo-mark { display: none; }
        .plus-logo-text {
            font-size: inherit;
            font-weight: inherit;
            color: inherit;
            letter-spacing: inherit;
        }
        .plus-headline {
            font-family: 'DM Sans', sans-serif;
            font-size: 2rem;
            color: #2D2A26;
            margin: 0 0 12px;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.5px;
        }
        .plus-subhead {
            font-size: 0.95rem !important;
            color: rgba(139,115,85,0.7) !important;
            line-height: 1.5;
            margin: 0 0 36px !important;
            text-align: center !important;
        }
        .plus-outcomes {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-bottom: 36px;
            text-align: left;
        }
        .plus-outcome {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 0;
            border-bottom: 1px solid rgba(139,115,85,0.12);
        }
        .plus-outcome:last-of-type { border-bottom: none; }
        .plus-outcome-icon {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(196,149,106,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #D4A574;
        }
        .plus-outcome p {
            margin: 0;
            font-size: 0.8rem;
            color: rgba(139,115,85,0.7);
            line-height: 1.4;
            padding-top: 0;
            flex: 1;
        }
        .plus-outcome p strong {
            display: block;
            font-size: 0.92rem;
            font-weight: 600;
            color: #2D2A26;
            margin-bottom: 2px;
        }
        .plus-how { display: none; }
        .plus-price-block, .plus-price-compare, .plus-price-amount, .plus-price-period { display: none; }
        .plus-subscribe-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #D4A574 0%, #C4956A 50%, #B4855A 100%);
            color: #1A1714;
            border: none;
            border-radius: 14px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
            letter-spacing: 0.3px;
            box-shadow: 0 4px 24px rgba(196,149,106,0.3);
        }
        .plus-subscribe-btn:hover {
            box-shadow: 0 6px 32px rgba(196,149,106,0.45);
            transform: translateY(-1px);
        }
        .plus-subscribe-btn:active { transform: scale(0.98); }
        .plus-subscribe-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .plus-cta-main {
            display: block;
            font-size: 1.05rem;
            font-weight: 700;
            line-height: 1.2;
        }
        .plus-cta-sub {
            display: block;
            font-size: 0.78rem;
            font-weight: 500;
            opacity: 0.7;
            margin-top: 3px;
            letter-spacing: 0.2px;
        }
        .plus-close {
            position: absolute;
            top: 14px;
            right: 14px;
            background: rgba(139,115,85,0.08);
            border: none;
            color: rgba(61,52,42,0.5);
            cursor: pointer;
            padding: 6px;
            line-height: 1;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s;
        }
        .plus-close:hover { background: rgba(139,115,85,0.16); color: #2D2A26; }
        .plus-note {
            font-size: 0.82rem;
            color: rgba(139,115,85,0.6);
            margin-top: 16px;
            text-align: center;
        }
        .plus-note:empty { display: none; }
        .trust-badges { display: none; }
        .plus-manage-link {
            display: block;
            margin-top: 16px;
            font-size: 0.85rem;
            color: #D4A574;
            cursor: pointer;
            text-decoration: underline;
            text-align: center;
        }

        /* Knowledge Graph Paywall — personalized, undismissable */
        /* Onboarding Paywall */
        .ob-paywall {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1200;
            background: #FAF8F5;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px;
            overflow-y: auto;
        }
        .ob-paywall.active { display: flex; }
        .ob-paywall-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: rgba(139,115,85,0.08);
            border: none;
            color: rgba(61,52,42,0.5);
            cursor: pointer;
            padding: 8px;
            line-height: 1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
            z-index: 10;
        }
        .ob-paywall-close:hover { background: rgba(139,115,85,0.16); color: #2D2A26; }
        .ob-paywall-card {
            max-width: 420px;
            width: 100%;
            text-align: center;
            animation: plusSlideUp 0.5s ease both;
        }
        .ob-paywall-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, rgba(196,149,106,0.15), rgba(196,149,106,0.05));
            border: 1px solid rgba(196,149,106,0.2);
            color: #D4A574;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 6px 14px;
            border-radius: 100px;
            margin-bottom: 28px;
        }
        .ob-paywall-title {
            font-family: 'DM Sans', sans-serif;
            font-size: 2rem;
            font-weight: 700;
            color: #2D2A26;
            line-height: 1.2;
            letter-spacing: -0.5px;
            margin-bottom: 12px;
        }
        .ob-paywall-subtitle {
            font-size: 0.95rem;
            color: rgba(139,115,85,0.7);
            line-height: 1.5;
            margin-bottom: 36px;
        }
        .ob-paywall-features {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-bottom: 36px;
            text-align: left;
        }
        .ob-paywall-feature {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 0;
            border-bottom: 1px solid rgba(139,115,85,0.12);
        }
        .ob-paywall-feature:last-child { border-bottom: none; }
        .ob-paywall-feature-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(196,149,106,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }
        .ob-paywall-feature-text {
            flex: 1;
        }
        .ob-paywall-feature-text h4 {
            font-size: 0.92rem;
            font-weight: 600;
            color: #2D2A26;
            margin: 0 0 2px;
        }
        .ob-paywall-feature-text p {
            font-size: 0.8rem;
            color: rgba(139,115,85,0.7);
            margin: 0;
            line-height: 1.4;
        }
        .ob-paywall-pricing {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 24px;
        }
        .ob-paywall-plan {
            background: rgba(139,115,85,0.04);
            border: 1.5px solid rgba(139,115,85,0.12);
            border-radius: 14px;
            padding: 16px 10px;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
            position: relative;
        }
        .ob-paywall-plan:hover { border-color: rgba(196,149,106,0.3); }
        .ob-paywall-plan.selected {
            border-color: #D4A574;
            background: rgba(196,149,106,0.08);
        }
        .ob-paywall-plan-badge {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #D4A574, #C4956A);
            color: #1A1714;
            font-size: 0.6rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            padding: 3px 10px;
            border-radius: 100px;
            white-space: nowrap;
        }
        .ob-paywall-plan-duration {
            font-size: 0.78rem;
            color: rgba(139,115,85,0.7);
            font-weight: 500;
            margin-bottom: 6px;
        }
        .ob-paywall-plan-price {
            font-size: 1.3rem;
            font-weight: 800;
            color: #2D2A26;
            letter-spacing: -0.5px;
        }
        .ob-paywall-plan-price span {
            font-size: 0.75rem;
            font-weight: 500;
            color: rgba(139,115,85,0.6);
        }
        .ob-paywall-plan-total {
            font-size: 0.68rem;
            color: rgba(139,115,85,0.5);
            margin-top: 4px;
        }
        @keyframes ob-paywall-cta-pulse {
            0%, 100% {
                box-shadow: 0 4px 24px rgba(196,149,106,0.30),
                            0 0 0 0 rgba(212,165,116,0.55);
            }
            70% {
                box-shadow: 0 4px 24px rgba(196,149,106,0.30),
                            0 0 0 18px rgba(212,165,116,0);
            }
        }
        .ob-paywall-cta {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #D4A574 0%, #C4956A 50%, #B4855A 100%);
            color: #1A1714;
            border: none;
            border-radius: 14px;
            font-size: 1.05rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: transform 0.2s ease;
            letter-spacing: 0.3px;
            box-shadow: 0 4px 24px rgba(196,149,106,0.3);
            animation: ob-paywall-cta-pulse 2s ease-out infinite;
        }
        .ob-paywall-cta:hover { transform: translateY(-1px); }
        .ob-paywall-cta:active { transform: scale(0.98); }
        @media (prefers-reduced-motion: reduce) {
            .ob-paywall-cta { animation: none; }
        }
        .ob-paywall-cta-main {
            display: block;
            font-size: 1.05rem;
            font-weight: 700;
            line-height: 1.2;
        }
        .ob-paywall-cta-sub {
            display: block;
            font-size: 0.78rem;
            font-weight: 500;
            opacity: 0.7;
            margin-top: 3px;
            letter-spacing: 0.2px;
        }
        .ob-paywall-skip {
            margin-top: 16px;
            font-size: 0.82rem;
            color: rgba(139,115,85,0.5);
            cursor: pointer;
            border: none;
            background: none;
            font-family: inherit;
            transition: color 0.2s;
        }
        .ob-paywall-skip:hover { color: rgba(139,115,85,0.8); }
        .ob-paywall-note {
            font-size: 0.72rem;
            color: rgba(139,115,85,0.45);
            margin-top: 12px;
        }
        @media (max-width: 480px) {
            .ob-paywall-title { font-size: 1.6rem; }
            .ob-paywall-pricing { gap: 8px; }
            .ob-paywall-plan { padding: 14px 8px; }
            .ob-paywall-plan-price { font-size: 1.1rem; }
        }

        /* In-chat upsell: blurred peek (locked preview of what Plus unlocks) */
        .inchat-peek {
            position: relative;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(196,149,106,0.08), rgba(139,115,85,0.04));
            border: 1px solid rgba(139,115,85,0.12);
            padding: 22px 20px;
            margin: 4px 0 24px;
            overflow: hidden;
            text-align: left;
        }
        .inchat-peek-blur {
            filter: blur(5px);
            -webkit-filter: blur(5px);
            user-select: none;
            pointer-events: none;
            opacity: 0.7;
        }
        .inchat-peek-label {
            font-size: 0.66rem;
            text-transform: uppercase;
            letter-spacing: 0.9px;
            color: rgba(139,115,85,0.6);
            font-weight: 700;
            margin-bottom: 10px;
        }
        .inchat-peek-text {
            font-family: 'Lora', serif;
            font-size: 1rem;
            color: #2D2A26;
            line-height: 1.55;
        }
        .inchat-peek-plan-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 9px 0;
            border-bottom: 1px solid rgba(139,115,85,0.08);
            font-family: 'Lora', serif;
            font-size: 0.95rem;
            color: #2D2A26;
        }
        .inchat-peek-plan-item:last-child { border-bottom: none; }
        .inchat-peek-plan-check {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1.6px solid rgba(139,115,85,0.3);
            flex-shrink: 0;
        }
        .inchat-peek-lock {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.3rem;
            background: rgba(250, 248, 245, 0.92);
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 16px rgba(0,0,0,0.08);
            z-index: 2;
        }

        /* Pattern Report Paywall */
        .pattern-report-overlay {
            position: fixed; inset: 0;
            background: rgba(45, 42, 38, 0.4);
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            z-index: 1100;
            display: none;
            align-items: center; justify-content: center;
            padding: 20px;
        }
        .pattern-report-overlay.active { display: flex; }
        .pattern-report-container {
            width: 100%; max-width: 440px; max-height: 90vh;
            overflow-y: auto; background: #FAF8F5;
            border-radius: 24px; position: relative;
            box-shadow: 0 25px 80px rgba(45,42,38,0.25), 0 0 0 1px rgba(139,115,85,0.08);
        }
        .pattern-report-container::-webkit-scrollbar { width: 0; }

        /* Loading */
        .pr-loading {
            padding: 48px 32px 40px; text-align: center;
            min-height: 380px; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
        }
        .pr-loading.hidden { display: none; }
        .pr-loading-icon {
            width: 56px; height: 56px; border-radius: 50%;
            background: rgba(139,115,85,0.12);
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 28px;
            animation: prBreathe 2s ease-in-out infinite;
        }
        @keyframes prBreathe {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.08); opacity: 1; }
        }
        .pr-loading-icon svg { width: 26px; height: 26px; color: #8B7355; }
        .pr-loading-title {
            font-family: 'Instrument Serif', serif; font-size: 1.55rem;
            color: #2D2A26; margin-bottom: 32px; line-height: 1.3;
        }
        .pr-loading-steps {
            width: 100%; max-width: 280px;
            display: flex; flex-direction: column; gap: 16px;
        }
        .pr-step {
            display: flex; align-items: center; gap: 12px;
            opacity: 0.25; transition: opacity 0.6s ease;
        }
        .pr-step.active { opacity: 1; }
        .pr-step.done { opacity: 0.45; }
        .pr-step span { font-size: 0.88rem; color: rgba(139,115,85,0.55); font-weight: 500; }
        .pr-step.active span { color: #2D2A26; }
        .pr-step-dot {
            width: 28px; height: 28px; border-radius: 50%;
            border: 1.5px solid rgba(139,115,85,0.2);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
        }
        .pr-step.active .pr-step-dot { border-color: #8B7355; background: rgba(139,115,85,0.12); }
        .pr-step.done .pr-step-dot { border-color: #8B7355; background: #8B7355; }
        .pr-spinner {
            width: 12px; height: 12px;
            border: 1.5px solid rgba(139,115,85,0.2);
            border-top-color: #8B7355; border-radius: 50%;
            display: none; animation: prSpin 0.8s linear infinite;
        }
        .pr-step.active .pr-spinner { display: block; }
        .pr-check { display: none; color: white; font-size: 12px; }
        .pr-step.done .pr-check { display: block; }
        .pr-step.done .pr-spinner { display: none; }
        @keyframes prSpin { to { transform: rotate(360deg); } }

        /* Report */
        .pr-report { display: none; opacity: 0; transition: opacity 0.8s ease; }
        .pr-report.visible { display: block; opacity: 1; }
        .pr-report-header {
            padding: 36px 28px 20px; text-align: center;
            border-bottom: 1px solid rgba(139,115,85,0.08);
        }
        .pr-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(139,115,85,0.12); padding: 5px 14px;
            border-radius: 20px; font-size: 0.72rem; font-weight: 600;
            letter-spacing: 1.5px; text-transform: uppercase; color: #8B7355;
            margin-bottom: 16px;
        }
        .pr-headline {
            font-family: 'Instrument Serif', serif; font-size: 1.55rem;
            line-height: 1.25; color: #2D2A26; margin-bottom: 6px;
        }
        .pr-subtitle { font-size: 0.85rem; color: rgba(139,115,85,0.55); }
        .pr-patterns { padding: 24px 28px 0; }
        .pr-section-label {
            font-size: 0.7rem; font-weight: 700; letter-spacing: 1.8px;
            text-transform: uppercase; color: rgba(139,115,85,0.55); margin-bottom: 16px;
        }
        .pr-pattern-card {
            background: white; border-radius: 14px; padding: 18px 20px;
            margin-bottom: 12px; border: 1px solid rgba(139,115,85,0.07);
            animation: prCardIn 0.5s ease both;
        }
        .pr-pattern-card:nth-child(2) { animation-delay: 0.15s; }
        .pr-pattern-card:nth-child(3) { animation-delay: 0.3s; }
        @keyframes prCardIn {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .pr-pattern-name {
            font-weight: 600; font-size: 0.95rem; color: #2D2A26;
            margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
        }
        .pr-pattern-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: #C4A265; flex-shrink: 0;
        }
        .pr-pattern-desc {
            font-size: 0.84rem; color: rgba(139,115,85,0.55);
            line-height: 1.55; padding-left: 15px;
        }

        /* Plan */
        .pr-plan-section { padding: 24px 28px 0; }
        .pr-plan-gate { position: relative; }
        .pr-plan-gate::after {
            content: ''; position: absolute; bottom: 0; left: -28px; right: -28px;
            height: 180px;
            background: linear-gradient(to bottom, rgba(250,248,245,0) 0%, rgba(250,248,245,0.85) 40%, rgba(250,248,245,1) 100%);
            pointer-events: none;
        }
        .pr-plan-steps { display: flex; flex-direction: column; gap: 14px; }
        .pr-plan-step { display: flex; gap: 14px; align-items: flex-start; }
        .pr-plan-step-num {
            width: 26px; height: 26px; border-radius: 50%;
            background: rgba(139,115,85,0.12); color: #8B7355;
            font-size: 0.75rem; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; margin-top: 1px;
        }
        .pr-plan-step-content h4 { font-size: 0.9rem; font-weight: 600; color: #2D2A26; margin-bottom: 3px; }
        .pr-plan-step-content p { font-size: 0.82rem; color: rgba(139,115,85,0.55); line-height: 1.5; }
        .pr-blurred { filter: blur(4px); opacity: 0.5; user-select: none; pointer-events: none; }

        /* Scroll hint */
        .pr-scroll-hint {
            position: sticky; bottom: 0; left: 0; right: 0; height: 64px;
            background: linear-gradient(to bottom, rgba(250,248,245,0) 0%, rgba(250,248,245,0.95) 60%, rgba(250,248,245,1) 100%);
            display: flex; align-items: flex-end; justify-content: center;
            padding-bottom: 12px; pointer-events: none; z-index: 5;
            transition: opacity 0.4s ease;
        }
        .pr-scroll-hint.hidden { opacity: 0; }
        .pr-scroll-arrow {
            width: 28px; height: 28px; border-radius: 50%;
            background: rgba(139,115,85,0.1);
            display: flex; align-items: center; justify-content: center;
            animation: prBounce 1.5s ease-in-out infinite;
        }
        .pr-scroll-arrow svg { width: 14px; height: 14px; color: #8B7355; }
        @keyframes prBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(4px); }
        }

        /* CTA */
        .pr-cta {
            padding: 8px 28px 36px; text-align: center;
            position: relative; z-index: 2;
        }
        .pr-cta-promise {
            font-family: 'Instrument Serif', serif; font-size: 1.25rem;
            color: #2D2A26; line-height: 1.35; margin-bottom: 6px;
        }
        .pr-cta-sub {
            font-size: 0.82rem; color: rgba(139,115,85,0.55);
            margin-bottom: 20px; line-height: 1.5;
        }
        .pr-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; text-align: left; }
        .pr-feature { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; color: #2D2A26; }
        .pr-feature-check {
            width: 18px; height: 18px; border-radius: 50%;
            background: rgba(139,115,85,0.08);
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .pr-feature-check svg { width: 10px; height: 10px; color: #8B7355; }
        .pr-cta-btn {
            width: 100%; padding: 16px 24px; background: #8B7355; color: white;
            border: none; border-radius: 14px; font-family: 'DM Sans', sans-serif;
            font-size: 1rem; font-weight: 600; cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; letter-spacing: 0.3px; position: relative; overflow: hidden;
        }
        .pr-cta-btn::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
            pointer-events: none;
        }
        .pr-cta-btn:hover { background: #7A6548; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(139,115,85,0.3); }
        .pr-cta-btn:active { transform: translateY(0); }
        .pr-cta-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
        .pr-price { margin-top: 12px; font-size: 0.82rem; color: rgba(139,115,85,0.55); }
        .pr-price strong { color: #2D2A26; font-weight: 600; }
        .pr-note { margin-top: 6px; font-size: 0.75rem; color: rgba(139,115,85,0.35); }

        @media (max-width: 480px) {
            .pattern-report-overlay { padding: 12px; }
            .pattern-report-container { border-radius: 20px; }
            .pr-loading { padding: 40px 24px 32px; }
            .pr-report-header { padding: 28px 22px 16px; }
            .pr-patterns { padding: 20px 22px 0; }
            .pr-plan-section { padding: 20px 22px 0; }
            .pr-cta { padding: 8px 22px 32px; }
        }

        /* OLD Journey Panel (deprecated — replaced by calendar journey) */
        .j-header {
            position: sticky; top: 0; z-index: 10;
            background: rgba(250,248,245,0.92); backdrop-filter: blur(12px);
            padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
            border-bottom: 1px solid rgba(139,115,85,0.08);
        }
        .j-back {
            background: none; border: none; cursor: pointer; padding: 4px;
            color: #8B7355; display: flex; align-items: center; gap: 6px;
            font-family: inherit; font-size: 0.88rem; font-weight: 500;
        }
        .j-header-title {
            font-size: 0.82rem; font-weight: 600; letter-spacing: 1.5px;
            text-transform: uppercase; color: #8B7355;
        }
        .j-content { flex: 1; overflow-y: auto; padding: 0 0 40px; }
        .j-loading { padding: 40px 24px; text-align: center; }
        .j-hero { padding: 32px 24px 24px; text-align: center; }
        .j-hero-label {
            font-size: 0.7rem; font-weight: 700; letter-spacing: 1.8px;
            text-transform: uppercase; color: rgba(139,115,85,0.55); margin-bottom: 10px;
        }
        .j-hero-headline {
            font-family: 'Instrument Serif', serif; font-size: 1.5rem;
            line-height: 1.3; color: #2D2A26; margin-bottom: 8px;
        }
        .j-hero-sub { font-size: 0.84rem; color: rgba(139,115,85,0.55); line-height: 1.5; }
        .j-stats {
            display: flex; justify-content: center; gap: 32px; margin-top: 20px; padding: 16px 0;
            border-top: 1px solid rgba(139,115,85,0.08); border-bottom: 1px solid rgba(139,115,85,0.08);
        }
        .j-stat { text-align: center; }
        .j-stat-num { font-family: 'Instrument Serif', serif; font-size: 1.5rem; color: #2D2A26; }
        .j-stat-label { font-size: 0.72rem; color: rgba(139,115,85,0.55); font-weight: 500; margin-top: 2px; }
        .j-section { padding: 28px 24px 0; }
        .j-section-label {
            font-size: 0.7rem; font-weight: 700; letter-spacing: 1.8px;
            text-transform: uppercase; color: rgba(139,115,85,0.55); margin-bottom: 16px;
        }
        .j-pattern {
            background: white; border-radius: 14px; padding: 18px 20px;
            margin-bottom: 12px; border: 1px solid rgba(139,115,85,0.07);
        }
        .j-pattern-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
        .j-pattern-name {
            font-weight: 600; font-size: 0.95rem; color: #2D2A26;
            display: flex; align-items: center; gap: 8px;
        }
        .j-pattern-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .j-pattern-dot.active { background: #C4A265; }
        .j-pattern-dot.shifting { background: #7BAF6E; }
        .j-pattern-tag {
            font-size: 0.68rem; font-weight: 600; padding: 3px 8px;
            border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px;
        }
        .j-pattern-tag.active { background: rgba(196,162,101,0.12); color: #C4A265; }
        .j-pattern-tag.shifting { background: rgba(123,175,110,0.12); color: #5A8F4E; }
        .j-pattern-desc { font-size: 0.84rem; color: rgba(139,115,85,0.55); line-height: 1.55; }
        .j-shift {
            background: white; border-radius: 14px; margin-bottom: 12px;
            border: 1px solid rgba(139,115,85,0.07); overflow: hidden;
        }
        .j-shift-topic { padding: 14px 20px 0; font-weight: 600; font-size: 0.88rem; color: #2D2A26; }
        .j-shift-quote { padding: 12px 20px 14px; }
        .j-shift-quote:first-child { border-bottom: 1px solid rgba(139,115,85,0.06); }
        .j-shift-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
        .j-shift-label.then { color: rgba(139,115,85,0.35); }
        .j-shift-label.now { color: #7BAF6E; }
        .j-shift-text { font-size: 0.84rem; color: #2D2A26; line-height: 1.5; font-style: italic; }
        .j-shift-date { font-size: 0.7rem; color: rgba(139,115,85,0.55); margin-top: 4px; }
        .j-plan-step { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
        .j-plan-num {
            width: 26px; height: 26px; border-radius: 50%; font-size: 0.75rem; font-weight: 700;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
        }
        .j-plan-num.current { background: #8B7355; color: white; }
        .j-plan-num.upcoming { background: rgba(139,115,85,0.12); color: #8B7355; }
        .j-plan-num.done { background: rgba(123,175,110,0.15); color: #5A8F4E; }
        .j-plan-content h4 { font-size: 0.9rem; font-weight: 600; color: #2D2A26; margin-bottom: 3px; }
        .j-plan-content p { font-size: 0.82rem; color: rgba(139,115,85,0.55); line-height: 1.5; }
        .j-plan-status { font-size: 0.68rem; font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
        .j-plan-status.current { color: #8B7355; }
        .j-plan-status.done { color: #5A8F4E; }
        .j-updated { text-align: center; padding: 24px 20px; font-size: 0.75rem; color: rgba(139,115,85,0.35); }

        /* Journey Teaser (free users) */
        .j-teaser-wrap { position: relative; overflow: hidden; }
        .j-teaser-clear { pointer-events: none; user-select: none; }
        .j-teaser-blur { filter: blur(5px); pointer-events: none; user-select: none; opacity: 0.5; }
        .j-teaser-fade {
            position: relative; pointer-events: none; user-select: none;
        }
        .j-teaser-fade::after {
            content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
            background: linear-gradient(to bottom, rgba(250,248,245,0), rgba(250,248,245,1));
        }
        .j-teaser-gate {
            position: relative; z-index: 20; background: #FAF8F5;
            display: flex; flex-direction: column; align-items: center;
            padding: 32px 24px 48px; text-align: center;
        }
        .j-teaser-lock {
            width: 56px; height: 56px; border-radius: 50%;
            background: linear-gradient(135deg, rgba(196,162,101,0.12), rgba(139,115,85,0.08));
            display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
        }
        .j-teaser-lock svg { width: 26px; height: 26px; stroke: #8B7355; fill: none; }
        .j-teaser-title {
            font-family: 'Instrument Serif', serif; font-size: 1.5rem;
            color: #2D2A26; margin-bottom: 10px; line-height: 1.3;
        }
        .j-teaser-desc { font-size: 0.88rem; color: rgba(139,115,85,0.55); line-height: 1.6; margin-bottom: 28px; max-width: 300px; }
        .j-teaser-features {
            display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px;
            text-align: left; width: 100%; max-width: 280px;
        }
        .j-teaser-feat {
            display: flex; align-items: center; gap: 10px;
            font-size: 0.88rem; color: #2D2A26;
        }
        .j-teaser-feat-icon {
            width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
            background: rgba(139,115,85,0.06); display: flex; align-items: center; justify-content: center;
            font-size: 14px;
        }
        .j-teaser-cta {
            background: #8B7355; color: white; border: none; border-radius: 14px;
            padding: 16px 40px; font-size: 1rem; font-weight: 600; cursor: pointer;
            font-family: inherit; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s; width: 100%; max-width: 300px;
        }
        .j-teaser-cta:hover { background: #7A6448; transform: translateY(-1px); }
        .j-teaser-price { font-size: 0.8rem; color: rgba(139,115,85,0.4); margin-top: 10px; }

        /* Onboarding */
        /* === NEW ONBOARDING (March 24 2026) === */
        .onboarding { display:none; position:fixed; inset:0; background:#FAF8F5; z-index:1001; flex-direction:column; align-items:center; justify-content:center; padding:24px; padding-top:calc(env(safe-area-inset-top,0px) + 24px); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px); height:var(--vv-h, 100dvh); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
        .onboarding.active { display:flex; }
        .ob-progress { position:absolute; top:calc(env(safe-area-inset-top,0px) + 24px); display:flex; gap:6px; z-index:10; transition:opacity 0.4s; }
        .ob-dot { width:5px; height:5px; border-radius:50%; background:rgba(139,115,85,0.12); transition: background-color 0.5s cubic-bezier(0.4,0,0.2,1), border-color 0.5s cubic-bezier(0.4,0,0.2,1), color 0.5s cubic-bezier(0.4,0,0.2,1), box-shadow 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.5s cubic-bezier(0.4,0,0.2,1); flex-shrink:0; }
        .ob-dot.active { background:#8B7355; width:20px; border-radius:3px; }
        .ob-dot.done { background:rgba(139,115,85,0.5); }
        .ob-step { position:absolute; width:100%; max-width:400px; padding:0 24px; display:flex; flex-direction:column; align-items:center; text-align:center; opacity:0; transform:translateY(20px); pointer-events:none; visibility:hidden; transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1); z-index:1; }
        .ob-step:not(.active) * { pointer-events:none !important; }
        .ob-step.active { opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible; z-index:3; }
        .ob-step.exit-up { opacity:0; transform:translateY(-30px); pointer-events:none; visibility:hidden; transition:none; z-index:1; }
        .ob-question { font-size:1.5rem; font-weight:600; line-height:1.3; color:#2D2A26; margin-bottom:32px; letter-spacing:-0.01em; }
        .ob-hint { font-size:0.84rem; color:rgba(139,115,85,0.5); margin-bottom:28px; line-height:1.5; }
        .ob-text-input { width:100%; max-width:300px; border:none; border-bottom:2px solid rgba(139,115,85,0.2); background:transparent; padding:12px 0; font-family:inherit; font-size:1.1rem; font-weight:500; color:#2D2A26; text-align:center; outline:none; transition:border-color 0.3s; }
        .ob-text-input:focus { border-color:#8B7355; }
        .ob-text-input::placeholder { color:rgba(139,115,85,0.3); font-weight:400; }
        .ob-textarea { width:100%; max-width:340px; border:1.5px solid rgba(139,115,85,0.15); border-radius:14px; background:white; padding:16px 18px; font-family:inherit; font-size:0.95rem; color:#2D2A26; outline:none; resize:none; min-height:80px; line-height:1.55; transition:border-color 0.3s, box-shadow 0.3s; }
        .ob-textarea:focus { border-color:rgba(139,115,85,0.35); box-shadow:0 0 0 3px rgba(139,115,85,0.06); }
        .ob-textarea::placeholder { color:rgba(139,115,85,0.3); }
        .ob-options { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:380px; }
        .ob-pill { padding:11px 22px; border:1.5px solid rgba(139,115,85,0.15); border-radius:100px; background:white; font-family:inherit; font-size:0.9rem; font-weight:500; color:#2D2A26; cursor:pointer; transition: background-color 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s cubic-bezier(0.4,0,0.2,1), color 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.25s cubic-bezier(0.4,0,0.2,1); user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; min-height:40px; }
        /* Only apply :hover on devices with a real pointer — otherwise mobile taps leave sticky hover state that LOOKS like pre-selection on the next step */
        @media (hover: hover) {
            .ob-pill:hover { border-color:rgba(139,115,85,0.35); background:rgba(139,115,85,0.04); }
        }
        .ob-pill:active { transform:scale(0.97); }
        .ob-pill.selected { border-color:#8B7355; background:#8B7355; color:white; }
        .ob-emoji-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:340px; width:100%; }
        .ob-emoji { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; border:1.5px solid rgba(139,115,85,0.1); border-radius:14px; background:white; cursor:pointer; transition: background-color 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s cubic-bezier(0.4,0,0.2,1), color 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.25s cubic-bezier(0.4,0,0.2,1); user-select:none; -webkit-tap-highlight-color:transparent; }
        @media (hover: hover) { .ob-emoji:hover { border-color:rgba(139,115,85,0.3); transform:translateY(-2px); box-shadow:0 4px 12px rgba(139,115,85,0.08); } }
        .ob-emoji:active { transform:scale(0.95); }
        .ob-emoji.selected { border-color:#8B7355; background:rgba(139,115,85,0.06); box-shadow:0 2px 8px rgba(139,115,85,0.1); }
        .ob-emoji-icon { font-size:1.5rem; line-height:1; transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); }
        .ob-emoji.selected .ob-emoji-icon { transform:scale(1.15); }
        .ob-emoji-label { font-size:0.68rem; font-weight:600; color:rgba(139,115,85,0.5); text-transform:uppercase; letter-spacing:0.3px; }
        .ob-emoji.selected .ob-emoji-label { color:#8B7355; }
        .ob-continue { margin-top:32px; padding:14px 48px; border:none; border-radius:100px; background:#8B7355; color:white; font-family:inherit; font-size:0.92rem; font-weight:600; cursor:pointer; transition: background-color 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s cubic-bezier(0.4,0,0.2,1), color 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s cubic-bezier(0.4,0,0.2,1); opacity:0; transform:translateY(8px); pointer-events:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; min-height:48px; }
        .ob-continue.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
        @media (hover: hover) { .ob-continue:hover { background:#6B5A45; transform:translateY(-1px); box-shadow:0 4px 16px rgba(139,115,85,0.25); } }
        .ob-skip { margin-top:16px; font-size:0.8rem; color:rgba(139,115,85,0.5); cursor:pointer; border:none; background:none; font-family:inherit; opacity:0; transform:translateY(8px); transition: background-color 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s cubic-bezier(0.4,0,0.2,1), color 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s cubic-bezier(0.4,0,0.2,1); }
        .ob-skip.visible { opacity:1; transform:translateY(0); }
        .ob-skip:hover { color:#8B7355; }
        .ob-back { position:absolute; top:calc(env(safe-area-inset-top,0px) + 22px); left:16px; background:none; border:none; cursor:pointer; padding:12px; color:rgba(139,115,85,0.4); transition:color 0.2s, transform 0.2s; z-index:10; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
        @media (hover: hover) { .ob-back:hover { color:#8B7355; transform:translateX(-2px); } }
        .ob-back svg { width:22px; height:22px; stroke:currentColor; fill:none; }
        .ob-enter-hint { position:absolute; bottom:-50px; font-size:0.75rem; color:rgba(139,115,85,0.25); letter-spacing:0.3px; opacity:0; transition:opacity 0.3s; }
        .ob-enter-hint.visible { opacity:1; }
        .ob-enter-hint kbd { display:inline-block; padding:2px 7px; border:1px solid rgba(139,115,85,0.15); border-radius:4px; font-family:inherit; font-size:0.72rem; margin-right:4px; background:white; }
        /* Loading */
        .ob-loading-icon { width:48px; height:48px; margin-bottom:28px; position:relative; }
        .ob-loading-icon::before { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(139,115,85,0.15); }
        .ob-loading-icon::after { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid transparent; border-top-color:#8B7355; animation:ob-spin 1.2s cubic-bezier(0.5,0,0.5,1) infinite; }
        @keyframes ob-spin { to { transform:rotate(360deg); } }
        .ob-loading-items { display:flex; flex-direction:column; align-items:flex-start; gap:16px; min-width:260px; }
        .ob-load-item { display:flex; align-items:center; gap:12px; font-size:0.9rem; color:rgba(139,115,85,0.3); transition:color 0.5s; }
        .ob-load-item.active { color:#2D2A26; }
        .ob-load-item.done { color:rgba(139,115,85,0.5); }
        .ob-load-check { width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(139,115,85,0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: background-color 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s cubic-bezier(0.4,0,0.2,1), color 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.4s cubic-bezier(0.4,0,0.2,1); }
        .ob-load-item.active .ob-load-check { border-color:#8B7355; }
        .ob-load-item.done .ob-load-check { border-color:#7BAF6E; background:#7BAF6E; }
        .ob-load-check svg { width:11px; height:11px; opacity:0; transform:scale(0.5); transition: background-color 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s cubic-bezier(0.34,1.56,0.64,1), color 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s cubic-bezier(0.34,1.56,0.64,1), transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s cubic-bezier(0.34,1.56,0.64,1); }
        .ob-load-item.done .ob-load-check svg { opacity:1; transform:scale(1); }
        @media (max-width:480px) { .ob-question { font-size:1.35rem; } .ob-emoji-grid { gap:8px; } .ob-emoji { padding:12px 6px; } .ob-emoji-icon { font-size:1.35rem; } .ob-progress { top:calc(env(safe-area-inset-top,0px) + 20px); } }
        @media (max-width:360px) { .ob-emoji-grid { grid-template-columns:repeat(3,1fr); } }

        /* ── Extended onboarding (Apr 8 2026) ── */
        .ob-info { max-width:340px; margin:14px auto 0; padding:12px 16px; background:rgba(139,115,85,0.05); border-left:2px solid rgba(139,115,85,0.3); border-radius:8px; font-size:0.78rem; line-height:1.55; color:rgba(74,67,64,0.75); text-align:left; }
        .ob-info-label { display:block; font-size:0.65rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:rgba(139,115,85,0.7); margin-bottom:4px; }
        .ob-reassure { max-width:340px; margin:18px auto 0; padding:14px 18px; background:rgba(143,166,140,0.08); border-radius:12px; font-size:0.82rem; line-height:1.55; color:#4A4340; text-align:center; font-style:italic; }
        .ob-reassure span { display:block; font-size:0.65rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:rgba(143,166,140,0.85); margin-bottom:6px; font-style:normal; }

        /* Slider step */
        .ob-slider-wrap { width:100%; max-width:340px; margin-top:8px; }
        .ob-slider-labels { display:flex; justify-content:space-between; font-size:0.72rem; font-weight:600; color:rgba(139,115,85,0.7); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:14px; }
        .ob-slider { -webkit-appearance:none; appearance:none; width:100%; height:4px; background:rgba(139,115,85,0.18); border-radius:2px; outline:none; margin:0; touch-action:manipulation; }
        .ob-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:44px; height:44px; border-radius:50%; background:#8B7355; cursor:pointer; border:4px solid #FAF8F5; box-shadow:0 2px 10px rgba(139,115,85,0.35); transition:transform 0.2s; }
        .ob-slider::-webkit-slider-thumb:hover { transform:scale(1.06); }
        .ob-slider::-webkit-slider-thumb:active { transform:scale(1.12); }
        .ob-slider::-moz-range-thumb { width:44px; height:44px; border-radius:50%; background:#8B7355; cursor:pointer; border:4px solid #FAF8F5; box-shadow:0 2px 10px rgba(139,115,85,0.35); }
        .ob-slider-ticks { display:flex; justify-content:space-between; margin-top:10px; padding:0 12px; }
        .ob-slider-ticks span { width:1px; height:6px; background:rgba(139,115,85,0.25); }
        .ob-slider-value { margin-top:18px; text-align:center; font-size:0.92rem; font-weight:600; color:#8B7355; min-height:1.4em; transition:opacity 0.3s; }

        /* 2-week mini check-in */
        .ob-mini-grid { display:flex; flex-direction:column; gap:18px; width:100%; max-width:380px; margin-top:4px; }
        .ob-mini-q { background:white; border:1.5px solid rgba(139,115,85,0.12); border-radius:14px; padding:14px 16px; }
        .ob-mini-q-label { font-size:0.86rem; font-weight:600; color:#2D2A26; margin-bottom:10px; text-align:left; line-height:1.35; }
        .ob-mini-pills { display:flex; flex-wrap:wrap; gap:6px; }
        .ob-mini-pill { flex:1; min-width:0; padding:8px 6px; border:1.5px solid rgba(139,115,85,0.15); border-radius:100px; background:#FAF8F5; font-family:inherit; font-size:0.72rem; font-weight:500; color:rgba(74,67,64,0.8); cursor:pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s; user-select:none; -webkit-tap-highlight-color:transparent; text-align:center; white-space:nowrap; }
        @media (hover: hover) { .ob-mini-pill:hover { border-color:rgba(139,115,85,0.35); } }
        .ob-mini-pill.selected { border-color:#8B7355; background:#8B7355; color:white; }
        @media (max-width:420px) { .ob-mini-pill { font-size:0.66rem; padding:7px 4px; } }

        /* === THERAPIST PICKER (onboarding step) === */
        .therapist-tabs { display:flex; justify-content:center; gap:0; margin-bottom:24px; }
        .therapist-tab { padding:10px 32px; font-family:'DM Sans',sans-serif; font-size:0.9rem; font-weight:600; border:2px solid #8B7355; cursor:pointer; background:transparent; color:#8B7355; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s; }
        .therapist-tab:first-child { border-radius:24px 0 0 24px; }
        .therapist-tab:last-child { border-radius:0 24px 24px 0; }
        .therapist-tab.active { background:#8B7355; color:#FAF8F5; }
        .therapist-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; max-width:420px; width:100%; }
        .therapist-card { text-align:center; cursor:pointer; transition:transform 0.2s; }
        .therapist-card:hover { transform:translateY(-3px); }
        .therapist-card img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; border:3px solid transparent; transition:border-color 0.2s, box-shadow 0.2s; }
        .therapist-card.selected img { border-color:#8B7355; box-shadow:0 0 0 4px rgba(139,115,85,0.2); }
        .therapist-card .therapist-name { font-family:'Lora',serif; font-size:0.85rem; margin-top:8px; color:#3D3630; }
        .therapist-grid-wrap { display:none; }
        .therapist-grid-wrap.active { display:block; }
        @media (max-width:480px) { .therapist-grid { grid-template-columns:repeat(3,1fr); gap:14px; max-width:340px; } .therapist-card .therapist-name { font-size:0.9rem; margin-top:6px; font-weight:500; } .therapist-tab { padding:8px 24px; font-size:0.85rem; } }

        /* === THERAPIST BUILDER (character customization) === */
        .ob-builder-section { width:100%; max-width:380px; margin-bottom:8px; }
        .ob-builder-label { font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:600; color:rgba(139,115,85,0.5); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; text-align:left; }
        .ob-builder-options { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
        .ob-slider-wrap { width:100%; max-width:300px; margin:0 auto; }
        .ob-slider-label { display:flex; justify-content:space-between; font-size:0.85rem; color:#3D3630; margin-bottom:8px; font-weight:500; }
        .ob-builder-slider { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; background:rgba(139,115,85,0.15); outline:none; margin:8px 0 16px; touch-action:manipulation; }
        .ob-builder-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:44px; height:44px; border-radius:50%; background:#8B7355; cursor:pointer; box-shadow:0 2px 10px rgba(139,115,85,0.35); transition:transform 0.2s; }
        .ob-builder-slider::-webkit-slider-thumb:hover { transform:scale(1.08); }
        .ob-builder-slider::-moz-range-thumb { width:44px; height:44px; border-radius:50%; background:#8B7355; cursor:pointer; border:none; box-shadow:0 2px 10px rgba(139,115,85,0.35); }
        .ob-avatar-reveal { display:flex; flex-direction:column; align-items:center; gap:20px; }
        .ob-avatar-img { width:180px; height:180px; border-radius:50%; object-fit:cover; box-shadow:0 8px 32px rgba(139,115,85,0.2), 0 0 0 4px rgba(139,115,85,0.1); animation:ob-avatar-pop 0.6s cubic-bezier(0.34,1.56,0.64,1); }
        @keyframes ob-avatar-pop { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
        .ob-avatar-actions { display:flex; gap:12px; margin-top:4px; }
        .ob-avatar-action-btn { padding:8px 20px; border:1.5px solid rgba(139,115,85,0.2); border-radius:100px; background:white; font-family:inherit; font-size:0.82rem; font-weight:500; color:#8B7355; cursor:pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s; }
        .ob-avatar-action-btn:hover { border-color:#8B7355; background:rgba(139,115,85,0.04); }
        .ob-avatar-action-btn.disabled { opacity:0.4; pointer-events:none; }
        .ob-generating-spinner { display:flex; flex-direction:column; align-items:center; gap:24px; }
        .ob-gen-pulse { width:80px; height:80px; border-radius:50%; background:rgba(139,115,85,0.08); position:relative; }
        .ob-gen-pulse::after { content:''; position:absolute; inset:8px; border-radius:50%; border:2.5px solid transparent; border-top-color:#8B7355; animation:ob-spin 1s linear infinite; }
        .ob-gen-pulse::before { content:''; position:absolute; inset:0; border-radius:50%; background:rgba(139,115,85,0.06); animation:ob-pulse-ring 2s ease-in-out infinite; }
        @keyframes ob-pulse-ring { 0%,100% { transform:scale(1); opacity:0.6; } 50% { transform:scale(1.15); opacity:0.2; } }
        .ob-gen-text { font-family:'Lora',serif; font-size:1.1rem; color:#3D3630; }
        .ob-gen-remaining { font-size:0.78rem; color:rgba(139,115,85,0.4); margin-top:4px; }
        .ob-avatar-placeholder { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:8px; }
        .ob-gen-status { font-size:0.82rem; color:rgba(139,115,85,0.5); font-style:italic; }
        .ob-gen-status.done { color:#8B7355; font-style:normal; font-weight:500; }
        /* ===== JOURNEY PANEL ===== */
        .journey-btn { display:flex; align-items:center; gap:5px; padding:5px 12px; background:rgba(139,115,85,0.06); border:1.5px solid rgba(139,115,85,0.1); border-radius:100px; cursor:pointer; transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s, opacity 0.25s; -webkit-user-select:none; user-select:none; }
        .journey-btn:active { transform:scale(0.95); background:rgba(139,115,85,0.12); }
        .journey-btn-emoji { font-size:0.9rem; line-height:1; }
        .journey-btn-label { font-size:0.72rem; font-weight:600; color:#8B7355; letter-spacing:0.3px; }
        @media (max-width: 480px) {
            .journey-btn { padding:5px 8px; gap:0; }
            .journey-btn-label { display:none; }
            .journey-btn-emoji { font-size:1rem; }
        }
        .journey-backdrop { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0); pointer-events:none; transition:background 0.35s; }
        .journey-backdrop.active { background:rgba(0,0,0,0.5); pointer-events:auto; }
        .journey-panel { position:fixed; left:50%; top:50%; z-index:10000; background:#FAF8F5; border-radius:24px; width:92%; max-width:380px; max-height:82vh; max-height:82dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; transform:translate(-50%,-50%) scale(0.92); opacity:0; pointer-events:none; transition:transform 0.35s cubic-bezier(0.32,0.72,0,1), opacity 0.3s ease; box-shadow:0 25px 80px rgba(0,0,0,0.2), 0 0 0 1px rgba(139,115,85,0.05); }
        .journey-panel.active { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
        .journey-handle { display:none; }
        .journey-header { padding:24px 24px 0; display:flex; align-items:flex-start; justify-content:space-between; }
        .journey-header-left { display:flex; flex-direction:column; gap:2px; }
        .journey-title { font-family:'Lora',serif; font-size:1.3rem; font-weight:700; color:#2D2A26; letter-spacing:-0.01em; }
        .journey-subtitle { font-size:0.72rem; color:rgba(139,115,85,0.5); letter-spacing:0.3px; text-transform:uppercase; font-weight:500; }
        .journey-close { width:36px; height:36px; border-radius:50%; background:rgba(139,115,85,0.06); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#8B7355; font-size:1.05rem; margin-top:-4px; margin-right:-4px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
        .journey-close:active { background:rgba(139,115,85,0.14); }
        .journey-divider { height:1px; background:linear-gradient(90deg, transparent, rgba(139,115,85,0.12), transparent); margin:16px 24px 0; }
        .journey-spots { padding:16px 24px 24px; }

        /* Revealed blind spot card */
        .j-spot-card { position:relative; padding:16px 18px; margin-bottom:12px; background:rgba(139,115,85,0.03); border-radius:16px; border:1px solid rgba(139,115,85,0.07); transition:background 0.2s; }
        .j-spot-card:last-child { margin-bottom:0; }
        .j-spot-meta { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
        .j-spot-diamond { width:18px; height:18px; display:flex; align-items:center; justify-content:center; color:#C4956A; font-size:0.8rem; }
        .j-spot-number { font-size:0.65rem; color:rgba(139,115,85,0.4); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
        .j-spot-date { font-size:0.65rem; color:rgba(139,115,85,0.35); margin-left:auto; }
        .j-spot-text { font-family:'Lora',serif; font-size:0.88rem; color:#2D2A26; line-height:1.55; padding-left:26px; }

        /* Brewing / next spot teaser */
        .j-spot-brewing { position:relative; padding:18px; margin-bottom:12px; background:linear-gradient(135deg, rgba(139,115,85,0.03), rgba(196,149,106,0.04)); border-radius:16px; border:1px dashed rgba(139,115,85,0.12); overflow:hidden; }
        .j-spot-brewing-inner { display:flex; align-items:center; gap:10px; }
        .j-spot-brewing-dot { width:8px; height:8px; border-radius:50%; background:#C4956A; animation:j-pulse 2.5s ease-in-out infinite; flex-shrink:0; }
        .j-spot-brewing-text { font-size:0.82rem; color:rgba(139,115,85,0.6); font-style:italic; }
        @keyframes j-pulse { 0%,100% { opacity:0.3; transform:scale(0.85); } 50% { opacity:1; transform:scale(1.1); } }

        /* Locked spot card */
        .j-spot-locked { position:relative; padding:16px 18px; margin-bottom:12px; background:rgba(139,115,85,0.02); border-radius:16px; border:1px solid rgba(139,115,85,0.06); cursor:pointer; overflow:hidden; }
        .j-spot-locked-blur { font-family:'Lora',serif; font-size:0.88rem; color:rgba(45,42,38,0.08); line-height:1.55; padding-left:26px; filter:blur(5px); user-select:none; pointer-events:none; }
        .j-spot-locked-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(250,248,245,0.7); }
        .j-spot-locked-icon { font-size:1.1rem; margin-bottom:4px; }
        .j-spot-locked-label { font-size:0.78rem; font-weight:600; color:#2D2A26; }
        .j-spot-locked-sub { font-size:0.68rem; color:rgba(139,115,85,0.5); margin-top:2px; }
        .j-spot-locked:active { background:rgba(139,115,85,0.05); }

        /* Empty state */
        .j-empty { text-align:center; padding:44px 20px; }
        .j-empty-icon { width:48px; height:48px; margin:0 auto 16px; border-radius:50%; background:linear-gradient(135deg, rgba(196,149,106,0.1), rgba(139,115,85,0.06)); display:flex; align-items:center; justify-content:center; animation:j-pulse 3s ease-in-out infinite; }
        .j-empty-icon span { font-size:1rem; color:#C4956A; }
        .j-empty-title { font-family:'Lora',serif; font-size:0.95rem; font-weight:600; color:#2D2A26; margin-bottom:6px; }
        .j-empty-sub { font-size:0.78rem; color:rgba(139,115,85,0.5); line-height:1.5; max-width:240px; margin:0 auto; }

        /* Spot card entrance animation */
        .j-spot-enter { opacity:0; transform:translateY(8px); animation:j-spot-in 0.4s ease forwards; }
        @keyframes j-spot-in { to { opacity:1; transform:translateY(0); } }
        .streak-bar { margin:16px 20px 0; padding:12px 14px; background:linear-gradient(135deg,rgba(139,115,85,0.06),rgba(139,115,85,0.02)); border:1px solid rgba(139,115,85,0.08); border-radius:14px; display:flex; align-items:center; gap:10px; }
        .streak-flame { font-size:1.3rem; }
        .streak-count { font-family:'Lora',serif; font-size:0.88rem; font-weight:600; color:#2D2A26; }
        .streak-sub { font-size:0.7rem; color:#8A7F74; margin-top:1px; }
        .cal-section { padding:16px 20px 0; }
        .cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
        .cal-month { font-family:'Lora',serif; font-size:1.1rem; font-weight:600; color:#2D2A26; }
        .cal-arrows { display:flex; gap:4px; }
        .cal-arrow { width:32px; height:32px; border-radius:50%; background:rgba(139,115,85,0.06); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.85rem; color:#8B7355; }
        .cal-arrow:active { background:rgba(139,115,85,0.14); }
        .cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:8px; }
        .cal-weekday { font-size:0.68rem; font-weight:600; color:rgba(139,115,85,0.4); text-transform:uppercase; letter-spacing:0.5px; padding:4px 0; }
        .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
        .cal-day { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px; cursor:pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s; gap:1px; }
        .cal-day:active { transform:scale(0.92); }
        .cal-day.empty { pointer-events:none; }
        .cal-day-num { font-size:0.78rem; font-weight:500; color:#3D3630; line-height:1; }
        .cal-day.dimmed .cal-day-num { color:rgba(139,115,85,0.25); }
        .cal-day.today { background:rgba(139,115,85,0.08); }
        .cal-day.today .cal-day-num { color:#8B7355; font-weight:700; }
        .cal-day.selected { background:#8B7355; }
        .cal-day.selected .cal-day-num { color:white; }
        .cal-day-mood { font-size:0.7rem; line-height:1; margin-top:-1px; }
        .cal-day.future { opacity:0.3; pointer-events:none; }
        .j-summary-card { margin:16px 20px 0; background:white; border-radius:16px; padding:16px; box-shadow:0 2px 8px rgba(139,115,85,0.08); border:1px solid rgba(139,115,85,0.06); animation:j-summary-in 0.35s cubic-bezier(0.34,1.56,0.64,1); }
        @keyframes j-summary-in { from { opacity:0; transform:translateY(8px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } }
        .j-summary-card.hidden { display:none; }
        .j-summary-mood-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
        .j-summary-emoji { font-size:1.8rem; line-height:1; }
        .j-summary-mood-label { font-family:'Lora',serif; font-size:1rem; font-weight:600; color:#2D2A26; }
        .j-summary-date { font-size:0.75rem; color:#8A7F74; margin-top:2px; }
        .j-summary-text { font-size:0.88rem; line-height:1.6; color:#3D3630; }
        .j-summary-empty { text-align:center; padding:16px 0; color:#8A7F74; font-size:0.85rem; }
        /* Memory meter */
        .j-memory-meter { margin:20px 20px 0; }
        .j-memory-label { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
        .j-memory-title { font-family:'Lora',serif; font-size:0.92rem; font-weight:600; color:#2D2A26; }
        .j-memory-count { font-size:0.75rem; color:#8A7F74; }
        .j-memory-track { height:8px; background:rgba(139,115,85,0.08); border-radius:100px; overflow:hidden; }
        .j-memory-fill { height:100%; border-radius:100px; background:#8B7355; transition:width 0.8s cubic-bezier(0.4,0,0.2,1); min-width:0; }
        .j-memory-fill.warning { background:linear-gradient(90deg,#8B7355,#C4873B); }
        .j-memory-fill.full { background:linear-gradient(90deg,#C4873B,#B85C3A); }
        .j-memory-hint { font-size:0.75rem; color:#8A7F74; margin-top:8px; line-height:1.4; }
        .j-memory-warning { margin-top:10px; background:rgba(184,92,58,0.06); border:1px solid rgba(184,92,58,0.12); border-radius:12px; padding:12px 14px; }
        .j-memory-warning-text { font-size:0.8rem; color:#B85C3A; line-height:1.5; font-weight:500; }
        .j-memory-warning-cta { display:inline-block; margin-top:8px; padding:8px 20px; background:#8B7355; color:white; border:none; border-radius:100px; font-size:0.82rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; }
        .j-memory-warning-cta:active { transform:scale(0.96); }
        /* Summary lock for free users */
        .j-summary-locked { position:relative; }
        .j-summary-locked .j-summary-text { filter:blur(6px); -webkit-filter:blur(6px); user-select:none; }
        .j-summary-lock-overlay { position:absolute; bottom:12px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:4px; }
        .j-summary-lock-nudge { font-size:0.78rem; color:#8B7355; font-weight:500; cursor:pointer; }
        /* "How well they know you" meter */
        .j-know-meter { margin:0 20px; padding:18px 0 14px; border-bottom:1px solid rgba(139,115,85,0.06); }
        .j-know-label { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
        .j-know-title { font-size:0.82rem; font-weight:600; color:#2D2A26; letter-spacing:-0.01em; }
        .j-know-pct { font-size:0.75rem; color:#8A7F74; font-weight:500; }
        .j-know-track { height:6px; background:rgba(139,115,85,0.08); border-radius:100px; overflow:hidden; }
        .j-know-fill { height:100%; border-radius:100px; background:linear-gradient(90deg, rgba(139,115,85,0.3), #8B7355); transition:width 1s cubic-bezier(0.4,0,0.2,1); min-width:0; }
        .j-know-fill.deep { background:linear-gradient(90deg, #8B7355, #6B5A42); }
        .j-know-hint { font-size:0.73rem; color:#8A7F74; margin-top:8px; line-height:1.45; font-style:italic; }
        /* Journey tabs */
        .j-tabs { display:flex; gap:0; padding:0 20px; margin-top:12px; border-bottom:1px solid rgba(139,115,85,0.1); }
        .j-tab { flex:1; padding:10px 0; font-size:0.8rem; font-weight:600; color:#8A7F74; text-align:center; cursor:pointer; border-bottom:2px solid transparent; transition:color 0.2s, border-color 0.2s; font-family:'DM Sans',sans-serif; letter-spacing:0.01em; }
        .j-tab:active { opacity:0.7; }
        .j-tab.active { color:#2D2A26; border-bottom-color:#8B7355; }
        .j-tab-content { display:none; }
        .j-tab-content.active { display:block; }
        /* Journal tab stats */
        .j-journal-stats { display:flex; gap:12px; padding:16px 20px 0; }
        .j-stat-card { flex:1; background:white; border-radius:14px; padding:16px 14px; border:1px solid rgba(139,115,85,0.06); box-shadow:0 1px 4px rgba(139,115,85,0.04); text-align:center; }
        .j-stat-value { font-family:'Lora',serif; font-size:1.4rem; font-weight:700; color:#2D2A26; line-height:1; }
        .j-stat-label { font-size:0.68rem; color:#8A7F74; margin-top:6px; font-weight:500; letter-spacing:0.02em; }
        /* Memory tab */
        .j-memory-add { padding:16px 20px 0; }
        .j-memory-input { width:100%; padding:12px 14px; border:1px solid rgba(139,115,85,0.15); border-radius:12px; font-size:0.85rem; font-family:'DM Sans',sans-serif; color:#2D2A26; background:white; resize:none; outline:none; transition:border-color 0.2s; box-sizing:border-box; }
        .j-memory-input:focus { border-color:#8B7355; }
        .j-memory-input::placeholder { color:rgba(139,115,85,0.4); }
        .j-memory-add-btn { width:100%; padding:12px; background:rgba(139,115,85,0.08); color:#8B7355; border:1px dashed rgba(139,115,85,0.25); border-radius:12px; font-size:0.85rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s; }
        .j-memory-add-btn:hover { background:rgba(139,115,85,0.12); }
        .j-memory-form { animation:fadeUp 0.25s ease; }
        .j-memory-btn { width:100%; padding:10px; background:#8B7355; color:white; border:none; border-radius:10px; font-size:0.82rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition:opacity 0.2s; }
        .j-memory-btn:hover { opacity:0.9; }
        .j-memory-btn:disabled { opacity:0.5; cursor:not-allowed; }
        .j-memory-people { padding:16px 20px 20px; }
        .j-memory-person { background:white; border-radius:14px; padding:14px 16px; margin-bottom:10px; border:1px solid rgba(139,115,85,0.06); box-shadow:0 1px 4px rgba(139,115,85,0.04); }
        .j-memory-person-name { font-family:'Lora',serif; font-size:0.95rem; font-weight:700; color:#2D2A26; }
        .j-memory-person-relation { font-size:0.72rem; color:#8B7355; font-weight:500; margin-top:2px; }
        .j-memory-person-summary { font-size:0.8rem; color:#8A7F74; margin-top:6px; line-height:1.5; }
        .j-memory-person-meta { font-size:0.68rem; color:rgba(139,115,85,0.4); margin-top:6px; }
        /* Patterns/Plan empty states */
        .j-tab-empty { text-align:center; padding:48px 24px; }
        .j-tab-empty-icon { font-size:1.6rem; margin-bottom:12px; opacity:0.4; }
        .j-tab-empty-title { font-family:'Lora',serif; font-size:0.92rem; font-weight:600; color:#2D2A26; margin-bottom:6px; }
        .j-tab-empty-sub { font-size:0.78rem; color:#8A7F74; line-height:1.5; max-width:220px; margin:0 auto; }
        /* "Your story together" section */
        .j-story-section { padding:18px 20px 28px; }
        .j-story-header { font-family:'Lora',serif; font-size:0.95rem; font-weight:600; color:#2D2A26; margin-bottom:14px; letter-spacing:-0.01em; }
        .j-story-cards { display:flex; flex-direction:column; gap:10px; }
        .j-story-empty { text-align:center; padding:20px 16px; color:#8A7F74; font-size:0.82rem; line-height:1.55; font-style:italic; }

        /* Live-swap animation for chat header avatar */
        .chat-avatar-img.avatar-swap { animation:avatar-swap-in 0.6s cubic-bezier(0.34,1.56,0.64,1); }
        @keyframes avatar-swap-in { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
        /* Portrait overlay */
        .age-block-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:99999; align-items:center; justify-content:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
        .age-block-overlay.active { display:flex; }
        .age-block-card { background:#FAF8F5; border-radius:20px; padding:32px 28px; max-width:340px; width:88%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
        .portrait-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:10001; align-items:center; justify-content:center; flex-direction:column; gap:16px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
        .portrait-overlay.active { display:flex; animation:portrait-fade-in 0.3s ease; }
        @keyframes portrait-fade-in { from { opacity:0; } to { opacity:1; } }
        .portrait-overlay img { width:280px; height:280px; border-radius:50%; object-fit:cover; box-shadow:0 12px 48px rgba(0,0,0,0.4); animation:portrait-pop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
        @keyframes portrait-pop { from { opacity:0; transform:scale(0.6); } to { opacity:1; transform:scale(1); } }
        .portrait-overlay .portrait-name { font-family:'Lora',serif; font-size:1.4rem; color:white; font-weight:600; }
        .portrait-overlay .portrait-status { font-size:0.85rem; color:rgba(255,255,255,0.6); }
        .portrait-generating { display:flex; flex-direction:column; align-items:center; gap:16px; animation:portrait-pop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
        .portrait-generating .portrait-gen-circle { width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; font-size:5rem; color:rgba(255,255,255,0.15); border:2px solid rgba(255,255,255,0.1); }
        .portrait-generating .portrait-gen-text { font-family:'Lora',serif; font-size:1rem; color:rgba(255,255,255,0.5); }

        /* Chat header therapist avatar */
        .chat-avatar-img { width:44px; height:44px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px rgba(139,115,85,0.12), 0 2px 8px rgba(139,115,85,0.15); }

        /* Companion portrait still generating — initial inside a spinning ring */
        .chat-avatar-loading { position:relative; }
        .chat-avatar-loading::after {
            content:''; position:absolute; inset:-3px; border-radius:50%;
            border:2px solid transparent; border-top-color:#8B7355; border-right-color:rgba(139,115,85,0.35);
            animation:chat-avatar-spin 0.9s linear infinite;
        }
        @keyframes chat-avatar-spin { to { transform:rotate(360deg); } }

        /* Change therapist modal */
        /* Customize therapist banner */
        .customize-banner { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:linear-gradient(135deg,rgba(139,115,85,0.08),rgba(139,115,85,0.03)); border-bottom:1px solid rgba(139,115,85,0.1); gap:8px; animation:banner-in 0.4s ease; }
        @keyframes banner-in { from { opacity:0; transform:translateY(-100%); } to { opacity:1; transform:translateY(0); } }
        .customize-banner-text { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:#3D3630; font-weight:500; }
        .customize-banner-emoji { font-size:1rem; }
        .customize-banner-actions { display:flex; align-items:center; gap:6px; }
        .customize-banner-btn { background:#8B7355; color:white; border:none; padding:6px 14px; border-radius:20px; font-size:0.78rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; }
        .customize-banner-btn:active { transform:scale(0.95); }
        .customize-banner-dismiss { background:none; border:none; color:#8A7F74; font-size:1rem; cursor:pointer; padding:4px; line-height:1; }

        /* Customize builder modal */
        .customize-builder-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:10001; align-items:center; justify-content:center; }
        .customize-builder-modal.active { display:flex; }
        .customize-builder-box { background:#FAF8F5; border-radius:20px; padding:28px 20px; max-width:380px; width:92%; max-height:85vh; overflow-y:auto; text-align:center; position:relative; }
        .customize-builder-box .cb-step { display:none; }
        .customize-builder-box .cb-step.active { display:block; }
        .customize-builder-box .cb-title { font-family:'Lora',serif; font-size:1.15rem; font-weight:600; color:#2D2A26; margin-bottom:16px; }
        .customize-builder-box .cb-pills { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:16px; }
        .customize-builder-box .cb-pill { padding:10px 18px; border-radius:24px; border:1.5px solid rgba(139,115,85,0.15); background:white; font-size:0.88rem; color:#3D3630; cursor:pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s; font-family:'DM Sans',sans-serif; }
        .customize-builder-box .cb-pill.selected { background:#8B7355; color:white; border-color:#8B7355; }
        .customize-builder-box .cb-pill:active { transform:scale(0.95); }
        .customize-builder-box .cb-continue { display:none; margin:12px auto 0; background:#8B7355; color:white; border:none; padding:12px 32px; border-radius:28px; font-size:0.95rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; }
        .customize-builder-box .cb-continue.visible { display:block; }
        .customize-builder-box .cb-slider-row { margin:12px 0; }
        .customize-builder-box .cb-slider-label { font-size:0.85rem; color:#8A7F74; margin-bottom:4px; }
        .customize-builder-box .cb-slider-value { font-family:'Lora',serif; font-size:1.1rem; font-weight:600; color:#3D3630; margin-bottom:8px; }

        .change-therapist-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:10000; align-items:center; justify-content:center; }
        .change-therapist-modal.active { display:flex; }
        .change-therapist-box { background:#FAF8F5; border-radius:20px; padding:32px 24px; max-width:380px; width:90%; max-height:80vh; overflow-y:auto; text-align:center; position:relative; }
        .change-therapist-box h2 { font-family:'Lora',serif; font-size:1.4rem; color:#3D3630; margin-bottom:4px; }
        .change-therapist-box .subtitle { color:#8A7F74; font-size:0.9rem; margin-bottom:20px; }
        .change-therapist-box .therapist-grid { max-width:360px; margin:0 auto; }
        .change-therapist-done { margin-top:20px; background:#8B7355; color:#FAF8F5; border:none; padding:12px 36px; border-radius:28px; font-size:1rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; }

        /* === SESSION TIMER BAR === */
        .session-timer-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 20px 6px;
            background: #faf8f5;
            border-bottom: 1px solid #eee;
        }
        .timer-label {
            font-family: 'DM Sans', sans-serif;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #8B7355;
            white-space: nowrap;
        }
        .timer-time {
            font-family: 'DM Sans', sans-serif;
            font-size: 11px;
            font-weight: 600;
            color: #8B7355;
            white-space: nowrap;
            min-width: 36px;
            text-align: right;
        }
        .timer-track {
            flex: 1;
            height: 3px;
            background: #e8e0d6;
            border-radius: 2px;
            overflow: hidden;
        }
        .timer-fill {
            height: 100%;
            background: #8B7355;
            border-radius: 2px;
            transition: width 1s linear, background-color 2s ease;
        }
        .timer-fill.amber { background: #C4923A; }
        .timer-fill.red { background: #B85C4A; }

        /* === SESSION END MODAL === */
        .session-end-modal {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1100;
            backdrop-filter: blur(4px);
        }
        .session-end-modal.active { display: flex; }
        .session-end-box {
            background: #fff;
            border-radius: 20px;
            padding: 40px 32px;
            max-width: 380px;
            width: 90%;
            text-align: center;
        }
        .session-end-box h2 {
            font-family: 'Instrument Serif', serif;
            font-size: 24px;
            color: #2d2a26;
            margin: 16px 0 8px;
        }
        .session-end-box p {
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            color: #6b6560;
            margin: 0 0 20px;
            line-height: 1.5;
        }
        .analyzing-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid #e8e0d6;
            border-top-color: #8B7355;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 12px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .takeaway-card {
            background: #faf8f5;
            border-left: 3px solid #8B7355;
            padding: 16px 20px;
            margin: 16px 0 20px;
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            font-style: italic;
            color: #4a4540;
            line-height: 1.6;
            text-align: left;
            border-radius: 0 12px 12px 0;
        }

        /* === SESSION COMPLETE: PROGRESS === */
        .session-complete-check {
            width: 60px; height: 60px; border-radius: 50%;
            background: linear-gradient(135deg, #34a853 0%, #2d9248 100%);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 20px;
            opacity: 0; transform: scale(0);
            box-shadow: 0 0 0 0 rgba(52, 168, 83, 0.4);
        }
        .session-complete-check.animate {
            animation: checkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                       checkGlow 1.8s ease-out 0.5s forwards;
        }
        .session-complete-check svg { width: 30px; height: 30px; }
        @keyframes checkPop {
            0% { opacity: 0; transform: scale(0); }
            60% { opacity: 1; transform: scale(1.18); }
            100% { opacity: 1; transform: scale(1); }
        }
        @keyframes checkGlow {
            0% { box-shadow: 0 0 0 0 rgba(52, 168, 83, 0.4); }
            50% { box-shadow: 0 0 20px 8px rgba(52, 168, 83, 0.15); }
            100% { box-shadow: 0 0 12px 4px rgba(52, 168, 83, 0.08); }
        }

        .session-progress-wrap {
            display: flex; align-items: center; gap: 12px;
            margin: 20px 0 24px; opacity: 0; transform: translateY(8px);
        }
        .session-progress-wrap.reveal {
            animation: fadeUp 0.4s ease forwards;
        }
        .session-progress-track {
            flex: 1; height: 10px; background: #ece7e0; border-radius: 5px; overflow: hidden;
        }
        .session-progress-fill {
            height: 100%; width: 0; border-radius: 5px;
            background: linear-gradient(90deg, #34a853, #8B7355);
            transition: width 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .session-progress-pct {
            font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
            color: #34a853; min-width: 36px; text-align: right;
        }

        .session-complete-msg {
            opacity: 0; transform: translateY(8px);
        }
        .session-complete-msg.reveal { animation: fadeUp 0.4s ease forwards; }
        .session-complete-msg p {
            font-family: 'DM Sans', sans-serif; font-size: 14px;
            color: #6b6560; margin: 0 0 6px; line-height: 1.5;
        }
        .session-complete-msg .hook {
            color: #8B7355; font-weight: 600; font-size: 13px;
            margin-top: 2px;
        }

        .session-next-btn {
            opacity: 0; transform: translateY(8px);
            margin-top: 24px;
            background: linear-gradient(135deg, #8B7355 0%, #A89078 100%);
            color: #fff;
            border: none;
            padding: 14px 48px;
            border-radius: 12px;
            font-family: 'DM Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            letter-spacing: 0.3px;
        }
        .session-next-btn.reveal { animation: fadeUp 0.4s ease forwards; }

        .session-signup-reveal { opacity: 0; transform: translateY(8px); }
        .session-signup-reveal.reveal { animation: fadeUp 0.4s ease forwards; }

        @keyframes fadeUp {
            to { opacity: 1; transform: translateY(0); }
        }
        #session-signup-form input {
            width: 100%;
            padding: 12px 16px;
            border: 1.5px solid #ddd;
            border-radius: 12px;
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            margin-bottom: 10px;
            box-sizing: border-box;
            outline: none;
            transition: border-color 0.2s;
        }
        #session-signup-form input:focus {
            border-color: #8B7355;
        }
        #session-signup-form button {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #8B7355 0%, #A89078 100%);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 4px;
        }
        #session-signup-form button:hover { opacity: 0.9; }
        .session-signup-error {
            color: #B85C4A;
            font-size: 13px;
            margin-top: 8px;
        }

        /* === SESSION SCHEDULING === */
        .schedule-section { text-align: center; }
        .schedule-section h3 {
            font-family: 'Instrument Serif', serif;
            font-size: 20px;
            color: #2d2a26;
            margin: 0 0 16px;
        }
        .schedule-slot-btn {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 18px;
            background: #fff;
            border: 1.5px solid #e8e0d6;
            border-radius: 12px;
            cursor: pointer;
            margin-bottom: 10px;
            transition: border-color 0.2s, background 0.2s;
            box-sizing: border-box;
        }
        .schedule-slot-btn:hover { border-color: #8B7355; background: #faf8f5; }
        .schedule-slot-label {
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            font-weight: 600;
            color: #2d2a26;
        }
        .schedule-slot-time {
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            color: #8B7355;
        }
        .schedule-custom-link {
            display: inline-block;
            margin-top: 6px;
            font-family: 'DM Sans', sans-serif;
            font-size: 13px;
            color: #8B7355;
            text-decoration: underline;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
        }
        .schedule-custom-picker {
            display: none;
            margin-top: 14px;
            text-align: center;
        }
        .schedule-custom-picker input[type="datetime-local"] {
            width: 100%;
            padding: 12px 16px;
            border: 1.5px solid #ddd;
            border-radius: 12px;
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            margin-bottom: 10px;
            box-sizing: border-box;
            outline: none;
        }
        .schedule-custom-picker input:focus { border-color: #8B7355; }
        .schedule-custom-picker button {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #8B7355 0%, #A89078 100%);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
        }
        .schedule-error {
            color: #B85C4A;
            font-family: 'DM Sans', sans-serif;
            font-size: 13px;
            margin-top: 8px;
        }

        /* === SCHEDULE CONFIRMATION === */
        .schedule-confirmed { text-align: center; }
        .schedule-confirmed-check {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #8B7355 0%, #A89078 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }
        .schedule-confirmed-check svg { width: 28px; height: 28px; }
        .schedule-confirmed h2 {
            font-family: 'Instrument Serif', serif;
            font-size: 22px;
            color: #2d2a26;
            margin: 0 0 12px;
        }
        .schedule-confirmed-time {
            font-family: 'DM Sans', sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #8B7355;
            margin: 0 0 8px;
        }
        .schedule-confirmed-hint {
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            color: #6b6560;
            margin: 0 0 24px;
        }
        #schedule-done-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #8B7355 0%, #A89078 100%);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
        }

        /* === LOCK SCREEN SCHEDULED TIME === */
        .lock-scheduled-time {
            font-family: 'Instrument Serif', serif;
            font-size: 32px;
            color: #8B7355;
            margin: 0 0 4px;
        }
        .lock-scheduled-day {
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            color: #a09890;
            margin: 0 0 20px;
        }

        /* === LOCK SCREEN === */
        .lock-screen {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #faf8f5;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1200;
            padding: 32px;
            text-align: center;
        }
        .lock-screen.active { display: flex; }
        .lock-screen .chat-avatar {
            width: 56px;
            height: 56px;
            font-size: 1.4rem;
            margin-bottom: 20px;
        }
        .lock-screen h2 {
            font-family: 'Instrument Serif', serif;
            font-size: 26px;
            color: #2d2a26;
            margin: 0 0 8px;
        }
        .lock-subtitle {
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            color: #8B7355;
            margin: 0 0 24px;
        }
        .lock-countdown {
            font-family: 'Instrument Serif', serif;
            font-size: 48px;
            color: #2d2a26;
            margin: 24px 0 12px;
            letter-spacing: 1px;
        }
        .lock-unlock-note {
            font-family: 'DM Sans', sans-serif;
            font-size: 13px;
            color: #a09890;
        }

        /* ╔═══════════════════════════════════════════════════════════════╗
           ║  QUEST LANDING — light & airy therapy-futuristic redesign     ║
           ║  Scoped under .q-l-* — overrides legacy .header/.landing/.hero ║
           ╚═══════════════════════════════════════════════════════════════╝ */

        :root {
            --q-canvas: #FAFAF7;
            --q-canvas-warm: #F5F2EC;
            --q-surface: #FFFFFF;
            --q-ink: #1C1B19;
            --q-ink-soft: #4A4843;
            --q-ink-mute: #807C73;
            --q-hairline: rgba(28, 27, 25, 0.08);
            --q-hairline-strong: rgba(28, 27, 25, 0.14);
            --q-sage: #B89274;
            --q-sage-deep: #8B5E3C;
            --q-sage-bloom: #F0E4D4;
            --q-clay: #C4795A;
            --q-clay-bloom: #EFD8C8;
            --q-sky-bloom: #C8DCE4;
            --q-lavender-bloom: #D8CDE0;
            --q-shadow-soft: 0 1px 2px rgba(28,27,25,0.04), 0 8px 24px rgba(28,27,25,0.06);
            --q-shadow-lift: 0 2px 4px rgba(28,27,25,0.05), 0 24px 48px rgba(28,27,25,0.10);
            --q-radius-sm: 12px;
            --q-radius: 20px;
            --q-radius-lg: 28px;
            --q-ease: cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* Override legacy body bg with the new canvas + atmosphere */
        body.q-l-body {
            background: var(--q-canvas);
            color: var(--q-ink);
            font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
            font-feature-settings: 'ss01', 'cv11';
        }

        /* Brand wordmark — monotone, no decorative `e`. Landing-only. */
        body.q-l-body .q-l-brand em {
            font-style: normal;
            font-weight: inherit;
            color: inherit;
        }
        /* When chat is active, restore the original chat body styling exactly */
        body.q-l-body.in-chat {
            background: linear-gradient(180deg, #FAF8F5 0%, #F0EAE1 100%);
            background-attachment: fixed;
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            color: #4A4340;
        }
        body.in-chat .q-l-atmosphere { display: none !important; }

        /* Atmospheric blooms — fixed, behind everything, very soft */
        .q-l-atmosphere {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        .q-l-atmosphere::before,
        .q-l-atmosphere::after,
        .q-l-atmosphere span {
            content: '';
            position: absolute;
            border-radius: 50%;
            filter: blur(120px);
            opacity: 0.55;
        }
        .q-l-atmosphere::before {
            top: -10%;
            left: -10%;
            width: 55vw;
            height: 55vw;
            background: radial-gradient(circle, var(--q-sage-bloom) 0%, transparent 65%);
        }
        .q-l-atmosphere::after {
            top: 30%;
            right: -15%;
            width: 50vw;
            height: 50vw;
            background: radial-gradient(circle, var(--q-clay-bloom) 0%, transparent 65%);
            opacity: 0.45;
        }
        .q-l-atmosphere span {
            display: block;
            top: 65%;
            left: 30%;
            width: 45vw;
            height: 45vw;
            background: radial-gradient(circle, var(--q-lavender-bloom) 0%, transparent 65%);
            opacity: 0.35;
        }

        /* ── Nav (inset pill, scrolls away) ─────────────────────────── */
        .header.q-l-nav {
            position: absolute;
            top: calc(env(safe-area-inset-top, 0px) + 12px);
            left: 12px;
            right: 12px;
            max-width: 1180px;
            margin: 0 auto;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 22px;
            background: #FFFFFF;
            border-radius: 999px;
        }
        .q-l-brand {
            font-family: 'Newsreader', Georgia, serif;
            font-optical-sizing: auto;
            font-size: 1.4rem;
            font-weight: 400;
            font-variation-settings: 'opsz' 144, 'SOFT' 30;
            letter-spacing: -0.01em;
            color: var(--q-ink);
            text-decoration: none;
            line-height: 1;
        }
        .q-l-brand em {
            font-style: italic;
            font-weight: 300;
            color: var(--q-sage-deep);
        }
        .q-l-nav-right {
            display: flex;
            align-items: center;
            gap: 22px;
        }
        .q-l-nav-links {
            display: flex;
            align-items: center;
            gap: 22px;
        }
        .q-l-nav-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .q-l-nav-item {
            font-family: 'Onest', sans-serif;
            font-size: 0.92rem;
            font-weight: 500;
            color: var(--q-ink-soft);
            text-decoration: none;
            letter-spacing: -0.005em;
            padding: 8px 4px;
            transition: color 0.2s var(--q-ease);
            position: relative;
        }
        .q-l-nav-item::after {
            content: '';
            position: absolute;
            left: 4px;
            right: 4px;
            bottom: 4px;
            height: 1px;
            background: var(--q-ink);
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.25s var(--q-ease);
        }
        .q-l-nav-item:hover { color: var(--q-ink); }
        .q-l-nav-item:hover::after { transform: scaleX(1); }

        .q-l-nav-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: transparent;
            border: 1px solid var(--q-hairline);
            border-radius: 999px;
            cursor: pointer;
            padding: 0;
            transition: background 0.2s var(--q-ease), border-color 0.2s var(--q-ease);
        }
        .q-l-nav-toggle:hover { background: rgba(28,27,25,0.04); border-color: rgba(28,27,25,0.18); }
        .q-l-nav-toggle span {
            display: block;
            width: 14px;
            height: 1.5px;
            background: var(--q-ink);
            position: relative;
        }
        .q-l-nav-toggle span::before,
        .q-l-nav-toggle span::after {
            content: '';
            position: absolute;
            left: 0;
            width: 14px;
            height: 1.5px;
            background: var(--q-ink);
            transition: transform 0.25s var(--q-ease), top 0.25s var(--q-ease);
        }
        .q-l-nav-toggle span::before { top: -5px; }
        .q-l-nav-toggle span::after  { top:  5px; }
        .q-l-nav-toggle[aria-expanded="true"] span { background: transparent; }
        .q-l-nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
        .q-l-nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

        .q-l-nav-drawer {
            position: absolute;
            top: calc(100% + 6px);
            right: 18px;
            min-width: 220px;
            background: var(--q-surface, #FFFFFF);
            border: 1px solid var(--q-hairline);
            border-radius: 16px;
            box-shadow: 0 16px 40px rgba(28,27,25,0.12);
            padding: 10px;
            display: none;
            flex-direction: column;
            gap: 2px;
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity 0.2s var(--q-ease), transform 0.2s var(--q-ease);
        }
        .q-l-nav-drawer.is-open {
            display: flex;
            opacity: 1;
            transform: translateY(0);
        }
        .q-l-nav-drawer a {
            font-family: 'Onest', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--q-ink-soft);
            text-decoration: none;
            padding: 10px 14px;
            border-radius: 8px;
            transition: background 0.18s var(--q-ease), color 0.18s var(--q-ease);
        }
        .q-l-nav-drawer a:hover { background: rgba(28,27,25,0.04); color: var(--q-ink); }
        .q-l-drawer-divider {
            height: 1px;
            background: rgba(28,27,25,0.08);
            margin: 8px 6px;
        }
        .q-l-drawer-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 4px 6px 6px;
        }
        .q-l-drawer-actions .q-l-drawer-signin {
            display: inline-flex; align-items: center; justify-content: center;
            background: transparent;
            color: var(--q-ink);
            border: 1px solid rgba(28,27,25,0.18);
            padding: 11px 16px;
            border-radius: 999px;
            font-family: 'Onest', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            letter-spacing: -0.005em;
            transition: background 0.18s var(--q-ease), border-color 0.18s var(--q-ease);
        }
        .q-l-drawer-actions .q-l-drawer-signin:hover { background: rgba(28,27,25,0.04); border-color: rgba(28,27,25,0.30); }
        .q-l-drawer-actions .q-l-drawer-cta {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            background: var(--q-ink);
            color: var(--q-canvas);
            border: 1px solid var(--q-ink);
            padding: 12px 18px;
            border-radius: 999px;
            font-family: 'Onest', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            letter-spacing: -0.005em;
            box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 16px rgba(28,27,25,0.18);
        }
        .q-l-drawer-actions .q-l-drawer-cta svg { width: 13px; height: 13px; }

        @media (max-width: 820px) {
            .q-l-nav-links { display: none; }
            .q-l-nav-toggle { display: inline-flex; }
            .q-l-nav-actions { display: none; }
            .q-l-nav-right { gap: 10px; }
        }

        .login-btn.q-l-nav-link {
            position: static;
            background: transparent;
            border: 1px solid var(--q-hairline);
            color: var(--q-ink);
            font-family: 'Onest', sans-serif;
            font-size: 0.92rem;
            font-weight: 500;
            padding: 9px 18px;
            border-radius: 999px;
            cursor: pointer;
            transition: color 0.2s var(--q-ease), background 0.2s var(--q-ease), border-color 0.2s var(--q-ease);
            letter-spacing: -0.005em;
        }
        .login-btn.q-l-nav-link:hover {
            color: var(--q-ink);
            background: rgba(28,27,25,0.04);
            border-color: rgba(28,27,25,0.20);
        }
        .q-l-nav-cta {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--q-ink);
            color: var(--q-canvas);
            border: 1px solid var(--q-ink);
            padding: 9px 18px;
            border-radius: 999px;
            font-family: 'Onest', sans-serif;
            font-size: 0.92rem;
            font-weight: 500;
            cursor: pointer;
            letter-spacing: -0.005em;
            transition: transform 0.25s var(--q-ease), box-shadow 0.25s var(--q-ease), background 0.25s var(--q-ease);
            box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 16px rgba(28,27,25,0.18);
        }
        .q-l-nav-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 24px rgba(28,27,25,0.22);
        }
        .q-l-nav-cta svg { width: 13px; height: 13px; }

        @media (max-width: 640px) {
            .header.q-l-nav { padding: 14px 18px; }
            .login-btn.q-l-nav-link { padding: 7px 14px; font-size: 0.86rem; }
            .q-l-nav-cta { padding: 7px 14px; font-size: 0.86rem; }
            .q-l-nav-drawer { right: 14px; }
        }

        /* ── Landing wrapper override ─────────────────────────────── */
        .landing.q-l-root {
            position: relative;
            z-index: 1;
            display: block;
            padding: 0;
        }
        .landing.q-l-root.hidden { display: none !important; }

        /* ── Hero (photo-collage, cream-to-warm gradient) ─────────── */
        .q-l-hero {
            position: relative;
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: linear-gradient(180deg,
                var(--q-canvas) 0%,
                var(--q-canvas) 38%,
                #EEE3D2 100%);
            isolation: isolate;
        }
        .q-l-hero::before {
            content: '';
            position: absolute;
            top: -8%;
            left: 50%;
            transform: translateX(-50%);
            width: 86vw;
            max-width: 980px;
            aspect-ratio: 1;
            background: radial-gradient(circle, var(--q-sage-bloom) 0%, transparent 62%);
            opacity: 0.55;
            z-index: 0;
            pointer-events: none;
        }
        .q-l-hero-inner {
            position: relative;
            z-index: 1;
            max-width: 780px;
            margin: 0 auto;
            padding: 116px 24px 92px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            color: var(--q-ink);
        }

        /* Photo collage */
        .q-l-hero-collage {
            position: relative;
            width: 500px;
            max-width: 100%;
            height: 380px;
            margin: 0 auto 48px;
        }
        .q-l-hero-tile {
            position: absolute;
            border-radius: 24px;
            overflow: hidden;
            background: var(--q-canvas-warm);
            box-shadow: 0 4px 10px rgba(28,27,25,0.06), 0 18px 36px rgba(28,27,25,0.10);
            transition: transform 0.6s var(--q-ease);
        }
        .q-l-hero-tile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .q-l-hero-tile-center {
            width: 218px;
            height: 262px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 5;
            border-radius: 28px;
            box-shadow: 0 6px 14px rgba(28,27,25,0.10), 0 30px 60px rgba(28,27,25,0.18);
        }
        .q-l-hero-tile-tl { width: 138px; height: 152px; left: 4%;  top: 4%;  transform: rotate(-6deg); z-index: 2; }
        .q-l-hero-tile-tr { width: 144px; height: 148px; right: 2%; top: 2%;  transform: rotate(5deg);  z-index: 2; }
        .q-l-hero-tile-bl { width: 146px; height: 144px; left: 1%;  bottom: 4%; transform: rotate(4deg);  z-index: 3; }
        .q-l-hero-tile-br { width: 138px; height: 152px; right: 4%; bottom: 2%; transform: rotate(-5deg); z-index: 3; }

        /* Eyebrow pill */
        .q-l-hero-eyebrow-pill {
            display: inline-block;
            font-family: 'Onest', sans-serif;
            font-size: 0.86rem;
            font-weight: 600;
            color: var(--q-sage-deep);
            background: var(--q-sage-bloom);
            border: 1px solid rgba(139, 94, 60, 0.14);
            padding: 10px 20px;
            border-radius: 999px;
            letter-spacing: -0.005em;
            margin-bottom: 24px;
        }

        /* Big bold black sans headline */
        .q-l-hero h1 {
            font-family: 'Onest', sans-serif;
            font-weight: 800;
            font-size: clamp(2.1rem, 5.0vw, 3.5rem);
            line-height: 1.04;
            letter-spacing: -0.035em;
            color: var(--q-ink);
            max-width: 14ch;
            margin: 0 auto 32px;
        }
        .q-l-hero h1 em {
            font-style: italic;
            font-weight: 700;
            color: var(--q-sage-deep);
        }

        .q-l-hero .q-l-subtitle {
            font-family: 'Onest', sans-serif;
            font-size: clamp(1.0rem, 1.5vw, 1.15rem);
            line-height: 1.5;
            color: var(--q-ink-soft);
            max-width: 480px;
            margin: -12px auto 28px;
        }
        .q-l-hero .q-l-subtitle:empty { display: none; }

        .q-l-hero-cta-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            margin-bottom: 40px;
        }

        /* Inline social-proof row beneath CTA */
        .q-l-hero-proof {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 32px;
        }
        .q-l-hero-proof-cell {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .q-l-hero-proof-stars {
            color: #C9A66B;
            font-size: 0.9rem;
            letter-spacing: 0.14em;
            line-height: 1;
            margin-bottom: 5px;
        }
        .q-l-hero-proof-num {
            font-family: 'Onest', sans-serif;
            font-weight: 700;
            font-size: 1.18rem;
            color: var(--q-ink);
            line-height: 1;
            letter-spacing: -0.01em;
        }
        .q-l-hero-proof-label {
            font-size: 0.66rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--q-ink-mute);
            margin-top: 6px;
        }
        .q-l-hero-proof-divider {
            width: 1px;
            height: 36px;
            background: var(--q-hairline-strong);
            flex-shrink: 0;
        }
        .q-l-hero-proof-avatars {
            display: flex;
            justify-content: center;
            margin-bottom: 5px;
        }
        .q-l-hero-proof-avatars img {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--q-canvas);
            box-shadow: 0 1px 3px rgba(28,27,25,0.10);
            margin-left: -8px;
            background: var(--q-canvas-warm);
        }
        .q-l-hero-proof-avatars img:first-child { margin-left: 0; }

        @media (max-width: 900px) {
            .q-l-hero-inner { padding: 96px 22px 76px; }
            .q-l-hero-collage { width: 400px; height: 310px; margin-bottom: 40px; }
            .q-l-hero-tile-center { width: 178px; height: 212px; }
            .q-l-hero-tile-tl, .q-l-hero-tile-tr,
            .q-l-hero-tile-bl, .q-l-hero-tile-br { width: 116px; height: 124px; }
        }

        /* Desktop: 2-column split — text on the left, photo cluster on the right */
        @media (min-width: 901px) {
            .q-l-hero-inner {
                max-width: 1240px;
                padding: 128px 56px 108px;
                flex-direction: row-reverse;
                align-items: center;
                justify-content: space-between;
                text-align: left;
                gap: 56px;
            }
            .q-l-hero-text {
                flex: 1 1 0;
                min-width: 0;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
            .q-l-hero-collage {
                flex: 0 0 auto;
                width: 460px;
                height: 460px;
                margin: 0;
            }
            .q-l-hero-eyebrow-pill { margin-bottom: 28px; }
            .q-l-hero h1 { margin: 0 0 32px; max-width: 14ch; }
            .q-l-hero .q-l-subtitle { margin: 0 0 28px; max-width: 480px; text-align: left; }
            .q-l-hero-cta-row { align-items: flex-start; margin-bottom: 40px; }
            .start-btn.q-l-cta-primary { margin: 0; }
            .q-l-hero-proof { justify-content: flex-start; }
        }
        @media (min-width: 1200px) {
            .q-l-hero-collage { width: 500px; height: 500px; }
        }
        @media (max-width: 480px) {
            .q-l-hero-inner { padding: 86px 18px 64px; }
            .q-l-hero-collage { width: 330px; height: 270px; margin-bottom: 32px; }
            .q-l-hero-tile-center { width: 154px; height: 184px; border-radius: 22px; }
            .q-l-hero-tile-tl, .q-l-hero-tile-tr,
            .q-l-hero-tile-bl, .q-l-hero-tile-br { width: 100px; height: 108px; border-radius: 18px; }
            .q-l-hero-eyebrow-pill { font-size: 0.8rem; padding: 8px 16px; margin-bottom: 20px; }
            .q-l-hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); max-width: 16ch; }
            .q-l-hero-proof { gap: 22px; }
            .q-l-hero-proof-divider { height: 30px; }
            .q-l-hero-proof-num { font-size: 1.04rem; }
            .q-l-hero-proof-stars { font-size: 0.82rem; letter-spacing: 0.10em; }
            .q-l-hero-proof-avatars img { width: 22px; height: 22px; margin-left: -7px; }
        }
        @keyframes q-l-cta-primary-pulse {
            0%, 100% {
                box-shadow: 0 2px 0 rgba(255,255,255,0.06) inset,
                            0 12px 30px rgba(28,27,25,0.18),
                            0 0 0 0 rgba(28,27,25,0.40);
            }
            70% {
                box-shadow: 0 2px 0 rgba(255,255,255,0.06) inset,
                            0 12px 30px rgba(28,27,25,0.18),
                            0 0 0 20px rgba(28,27,25,0);
            }
        }
        .start-btn.q-l-cta-primary {
            background: var(--q-ink);
            color: var(--q-canvas);
            border: none;
            padding: 18px 38px;
            font-family: 'Onest', sans-serif;
            font-size: 1.02rem;
            font-weight: 500;
            border-radius: 999px;
            cursor: pointer;
            letter-spacing: -0.005em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: transform 0.3s var(--q-ease);
            box-shadow: 0 2px 0 rgba(255,255,255,0.06) inset, 0 12px 30px rgba(28,27,25,0.18);
            max-width: none;
            width: auto;
            min-width: 0;
            margin: 0 auto;
            animation: q-l-cta-primary-pulse 2s ease-out infinite;
        }
        .start-btn.q-l-cta-primary:hover {
            transform: translateY(-2px);
        }
        @media (prefers-reduced-motion: reduce) {
            .start-btn.q-l-cta-primary { animation: none; }
        }
        .start-btn.q-l-cta-primary svg { width: 16px; height: 16px; }
        .start-btn.q-l-cta-primary.q-l-cta-big {
            padding: 26px 56px;
            font-size: 1.18rem;
            gap: 14px;
        }
        .start-btn.q-l-cta-primary.q-l-cta-big svg { width: 18px; height: 18px; }
        @media (max-width: 640px) {
            .start-btn.q-l-cta-primary.q-l-cta-big { padding: 22px 44px; font-size: 1.05rem; }
        }
        .q-l-cta-note {
            font-size: 0.82rem;
            color: var(--q-ink-mute);
            font-weight: 400;
            letter-spacing: -0.005em;
        }
        .q-l-cta-note .dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--q-ink-mute); margin: 0 8px; vertical-align: middle; }

        /* ── Social proof band ────────────────────────────────────── */
        .q-l-social {
            position: relative;
            padding: 96px 24px 104px;
            background: var(--q-canvas-warm);
        }
        .q-l-social-inner {
            max-width: 1180px;
            margin: 0 auto;
        }
        .q-l-social-head {
            text-align: center;
            margin: 0 auto 48px;
            max-width: 720px;
        }
        .q-l-social-trust {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 22px;
            padding: 16px 28px;
            background: var(--q-surface);
            border: 1px solid var(--q-hairline);
            border-radius: 999px;
            box-shadow: 0 1px 2px rgba(28,27,25,0.04), 0 10px 28px rgba(28,27,25,0.06);
        }
        .q-l-trust-cell { text-align: center; min-width: 0; }
        .q-l-trust-stars {
            color: #C9A66B;
            font-size: 0.92rem;
            letter-spacing: 0.14em;
            line-height: 1;
            margin-bottom: 6px;
        }
        .q-l-trust-num {
            font-family: 'Newsreader', Georgia, serif;
            font-variation-settings: 'opsz' 60;
            font-size: 1.18rem;
            font-weight: 500;
            color: var(--q-ink);
            line-height: 1;
            letter-spacing: -0.01em;
        }
        .q-l-trust-label {
            display: block;
            font-size: 0.66rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--q-ink-mute);
            margin-top: 6px;
        }
        .q-l-trust-avatars {
            display: flex;
            justify-content: center;
            margin-bottom: 6px;
        }
        .q-l-trust-avatars img {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--q-surface);
            box-shadow: 0 1px 3px rgba(28,27,25,0.10);
            margin-left: -8px;
            background: var(--q-canvas-warm);
        }
        .q-l-trust-avatars img:first-child { margin-left: 0; }
        .q-l-trust-divider {
            width: 1px;
            height: 38px;
            background: var(--q-hairline-strong);
            flex-shrink: 0;
        }
        .q-l-reviews {
            display: grid;
            grid-template-columns: 1fr;
            gap: 22px;
            max-width: 1240px;
            margin: 0 auto;
        }
        @media (min-width: 820px) {
            .q-l-reviews {
                grid-template-columns: repeat(3, 1fr);
                gap: 28px;
                align-items: start;
            }
            .q-l-reviews .q-l-review:nth-child(1) { transform: translateY(0); }
            .q-l-reviews .q-l-review:nth-child(2) { transform: translateY(28px); }
            .q-l-reviews .q-l-review:nth-child(3) { transform: translateY(8px); }
        }
        .q-l-review {
            position: relative;
            background: var(--q-surface);
            border: 1px solid var(--q-hairline);
            border-radius: 22px;
            padding: 28px 26px 24px;
            box-shadow: var(--q-shadow-soft);
            transition: transform 0.4s var(--q-ease), box-shadow 0.4s var(--q-ease);
        }
        @media (min-width: 820px) {
            .q-l-review:hover { box-shadow: 0 2px 4px rgba(28,27,25,0.05), 0 18px 36px rgba(28,27,25,0.10); }
        }
        .q-l-review-quote-mark {
            position: absolute;
            top: 14px;
            right: 22px;
            font-family: 'Newsreader', Georgia, serif;
            font-style: italic;
            font-size: 3.2rem;
            line-height: 1;
            color: var(--q-sage-deep);
            opacity: 0.18;
            user-select: none;
            pointer-events: none;
        }
        .q-l-review-stars {
            color: #C9A66B;
            font-size: 0.78rem;
            letter-spacing: 0.14em;
            line-height: 1;
            margin-bottom: 14px;
        }
        .q-l-review-text {
            font-family: 'Newsreader', Georgia, serif;
            font-optical-sizing: auto;
            font-variation-settings: 'opsz' 16;
            font-style: italic;
            font-size: 1.02rem;
            line-height: 1.5;
            color: var(--q-ink);
            margin-bottom: 22px;
            letter-spacing: -0.005em;
        }
        .q-l-review-foot {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-top: 16px;
            border-top: 1px solid var(--q-hairline);
        }
        .q-l-review-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            background: var(--q-canvas-warm);
            box-shadow: 0 0 0 3px var(--q-canvas);
            flex-shrink: 0;
        }
        .q-l-review-name {
            font-family: 'Onest', sans-serif;
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--q-ink);
            letter-spacing: -0.005em;
            line-height: 1.2;
        }
        .q-l-review-meta {
            font-size: 0.74rem;
            font-weight: 500;
            color: var(--q-ink-mute);
            letter-spacing: 0.02em;
            margin-top: 2px;
        }

        @media (max-width: 640px) {
            .q-l-social { padding: 44px 18px 56px; }
            .q-l-social-trust { gap: 22px; padding: 18px 22px; margin-bottom: 36px; }
            .q-l-trust-divider { height: 32px; }
            .q-l-trust-num { font-size: 1.05rem; }
            .q-l-trust-stars { font-size: 0.82rem; letter-spacing: 0.10em; }
            .q-l-trust-avatars img { width: 22px; height: 22px; margin-left: -6px; }
            .q-l-review { padding: 24px 22px 22px; }
            .q-l-review-text { font-size: 0.98rem; }
        }

        /* ── How it works ─────────────────────────────────────────── */
        .q-l-how {
            position: relative;
            padding: 110px 24px 110px;
            background: var(--q-canvas);
            overflow: hidden;
        }
        .q-l-how::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 60% 40% at 12% 18%, rgba(139,94,60,0.08) 0%, transparent 60%),
                radial-gradient(ellipse 55% 45% at 88% 82%, rgba(196,121,90,0.07) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
        }
        .q-l-how-head {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 720px;
            margin: 0 auto 76px;
        }
        .q-l-how-eyebrow {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            color: var(--q-sage-deep);
            margin-bottom: 16px;
        }
        .q-l-how-kicker {
            font-family: 'Onest', sans-serif;
            font-size: 0.92rem;
            font-weight: 500;
            color: var(--q-ink-mute);
            letter-spacing: 0.005em;
            margin: 0 0 14px;
        }
        .q-l-how-title {
            font-family: 'Newsreader', Georgia, serif;
            font-optical-sizing: auto;
            font-variation-settings: 'opsz' 100, 'SOFT' 40;
            font-size: clamp(2rem, 4vw, 2.9rem);
            font-weight: 400;
            line-height: 1.1;
            letter-spacing: -0.025em;
            color: var(--q-ink);
            margin: 0;
        }
        .q-l-how-title em {
            font-style: italic;
            font-weight: 350;
            color: var(--q-sage-deep);
        }
        .q-l-how-steps {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 96px;
            max-width: 1240px;
            margin: 0 auto;
        }
        .q-l-how-step {
            display: grid;
            grid-template-columns: 1fr;
            gap: 32px;
            align-items: center;
            position: relative;
        }
        @media (min-width: 820px) {
            .q-l-how-step {
                grid-template-columns: 1fr 1fr;
                gap: 80px;
            }
            .q-l-how-step.is-flipped .q-l-how-frame { order: 1; }
            .q-l-how-step.is-flipped .q-l-how-copy { order: 2; }
        }
        .q-l-how-copy {
            position: relative;
            padding-left: 0;
        }
        .q-l-how-num {
            display: block;
            font-family: 'Newsreader', Georgia, serif;
            font-optical-sizing: auto;
            font-variation-settings: 'opsz' 144, 'SOFT' 30;
            font-style: italic;
            font-weight: 300;
            font-size: clamp(3.5rem, 7vw, 5.5rem);
            line-height: 0.9;
            color: var(--q-sage-deep);
            opacity: 0.85;
            margin-bottom: 18px;
            letter-spacing: -0.04em;
        }
        .q-l-how-eye {
            display: block;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            color: var(--q-ink-mute);
            margin-bottom: 14px;
        }
        .q-l-how-h {
            font-family: 'Newsreader', Georgia, serif;
            font-optical-sizing: auto;
            font-variation-settings: 'opsz' 100, 'SOFT' 40;
            font-size: clamp(1.75rem, 3.2vw, 2.4rem);
            font-weight: 400;
            line-height: 1.12;
            letter-spacing: -0.022em;
            color: var(--q-ink);
            margin-bottom: 16px;
        }
        .q-l-how-h em {
            font-style: italic;
            font-weight: 350;
            color: var(--q-sage-deep);
        }
        .q-l-how-p {
            font-size: 1.04rem;
            line-height: 1.6;
            color: var(--q-ink-soft);
            max-width: 460px;
            margin: 0;
            letter-spacing: -0.005em;
        }
        .q-l-how-frame {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .q-l-how-frame::before {
            content: '';
            position: absolute;
            inset: 12% -8% 12% 8%;
            background: radial-gradient(ellipse at center, rgba(139,94,60,0.18) 0%, transparent 65%);
            filter: blur(40px);
            z-index: 0;
            opacity: 0.85;
        }
        .q-l-how-step:nth-child(even) .q-l-how-frame::before {
            inset: 12% 8% 12% -8%;
            background: radial-gradient(ellipse at center, rgba(196,121,90,0.18) 0%, transparent 65%);
        }
        .q-l-how-device {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 360px;
            transition: transform 0.6s var(--q-ease);
        }
        .q-l-how-step:hover .q-l-how-device {
            transform: translateY(-6px);
        }
        .q-l-how-device img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 28px;
            filter: drop-shadow(0 24px 48px rgba(28,27,25,0.16)) drop-shadow(0 8px 16px rgba(28,27,25,0.08));
        }
        .q-l-how-thread {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: -64px;
            bottom: -64px;
            width: 1px;
            background: linear-gradient(to bottom, transparent 0%, var(--q-hairline-strong) 50%, transparent 100%);
            opacity: 0;
        }
        @media (min-width: 820px) {
            .q-l-how-thread { display: none; }
        }
        .q-l-how-help {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 32px;
            max-width: 880px;
            margin: 96px auto 0;
            padding: 36px 40px;
            border-radius: 28px;
            text-decoration: none;
            background:
                radial-gradient(ellipse 90% 140% at 0% 0%, rgba(196,121,90,0.18) 0%, transparent 55%),
                radial-gradient(ellipse 90% 140% at 100% 100%, rgba(139,94,60,0.16) 0%, transparent 55%),
                linear-gradient(135deg, var(--q-sage-bloom) 0%, #EFE5D6 50%, #E8DCC8 100%);
            border: 1px solid var(--q-hairline);
            box-shadow: 0 1px 2px rgba(28,27,25,0.04), 0 18px 48px -16px rgba(28,27,25,0.18);
            overflow: hidden;
            transition: transform 0.5s var(--q-ease), box-shadow 0.5s var(--q-ease);
        }
        .q-l-how-help:hover {
            transform: translateY(-3px);
            box-shadow: 0 1px 2px rgba(28,27,25,0.05), 0 26px 60px -16px rgba(28,27,25,0.22);
        }
        .q-l-how-help-copy { flex: 1; min-width: 0; }
        .q-l-how-help-h {
            font-family: 'Newsreader', Georgia, serif;
            font-optical-sizing: auto;
            font-variation-settings: 'opsz' 80, 'SOFT' 40;
            font-size: clamp(1.4rem, 2.4vw, 1.85rem);
            font-weight: 400;
            line-height: 1.15;
            letter-spacing: -0.018em;
            color: var(--q-ink);
            margin: 0 0 6px;
        }
        .q-l-how-help-h em {
            font-style: italic;
            font-weight: 350;
            color: var(--q-sage-deep);
        }
        .q-l-how-help-p {
            font-size: 0.98rem;
            line-height: 1.5;
            color: var(--q-ink-soft);
            margin: 0;
            max-width: 460px;
            letter-spacing: -0.003em;
        }
        .q-l-how-help-cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 24px;
            background: var(--q-ink);
            color: var(--q-canvas);
            border-radius: 999px;
            font-family: 'Onest', sans-serif;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: -0.005em;
            white-space: nowrap;
            transition: background 0.3s var(--q-ease), transform 0.3s var(--q-ease);
        }
        .q-l-how-help:hover .q-l-how-help-cta { background: #000; }
        .q-l-how-help-arrow {
            display: inline-block;
            transition: transform 0.3s var(--q-ease);
        }
        .q-l-how-help:hover .q-l-how-help-arrow { transform: translateX(4px); }

        @media (max-width: 819px) {
            .q-l-how-step { justify-items: center; text-align: center; }
            .q-l-how-copy { text-align: center; margin: 0 auto; }
            .q-l-how-p { margin: 0 auto; }
            .q-l-how-frame { width: 100%; justify-content: center; }
            .q-l-how-help {
                flex-direction: column;
                text-align: center;
                gap: 22px;
                padding: 32px 26px;
                margin-top: 80px;
            }
            .q-l-how-help-p { margin: 0 auto; }
        }
        @media (max-width: 640px) {
            .q-l-how { padding: 76px 18px 80px; }
            .q-l-how-head { margin-bottom: 56px; }
            .q-l-how-steps { gap: 72px; }
            .q-l-how-step { gap: 24px; }
            .q-l-how-device { max-width: 280px; }
        }

        /* ── Therapist cast ───────────────────────────────────────── */
        .q-l-cast {
            padding: 60px 24px 100px;
            max-width: 1180px;
            margin: 0 auto;
        }
        .q-l-section-eyebrow {
            display: block;
            text-align: center;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--q-sage-deep);
            margin-bottom: 16px;
        }
        .q-l-section-title {
            font-family: 'Newsreader', Georgia, serif;
            font-optical-sizing: auto;
            font-variation-settings: 'opsz' 100, 'SOFT' 40;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 400;
            line-height: 1.1;
            letter-spacing: -0.025em;
            text-align: center;
            color: var(--q-ink);
            margin-bottom: 18px;
            max-width: 720px;
            margin-left: auto;
            margin-right: auto;
        }
        .q-l-section-title em {
            font-style: italic;
            font-weight: 350;
            color: var(--q-sage-deep);
        }
        .q-l-section-sub {
            text-align: center;
            font-size: 1.05rem;
            line-height: 1.55;
            color: var(--q-ink-soft);
            max-width: 580px;
            margin: 0 auto 56px;
        }
        .q-l-cast-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 28px;
            max-width: 940px;
            margin: 0 auto;
        }
        @media (min-width: 720px) {
            .q-l-cast-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
        }
        .q-l-card-therapist {
            position: relative;
            background: var(--q-surface);
            border-radius: var(--q-radius-lg);
            padding: 28px 24px 26px;
            border: 1px solid var(--q-hairline);
            box-shadow: var(--q-shadow-soft);
            transition: transform 0.4s var(--q-ease), box-shadow 0.4s var(--q-ease);
            text-align: center;
        }
        .q-l-card-therapist:hover {
            transform: translateY(-6px);
            box-shadow: var(--q-shadow-lift);
        }
        .q-l-portrait {
            width: 168px;
            height: 168px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 22px;
            display: block;
            box-shadow: 0 8px 24px rgba(28,27,25,0.12), 0 0 0 6px var(--q-canvas), 0 0 0 7px var(--q-hairline);
        }
        .q-l-therapist-name {
            font-family: 'Newsreader', Georgia, serif;
            font-variation-settings: 'opsz' 100;
            font-size: 1.5rem;
            font-weight: 400;
            color: var(--q-ink);
            letter-spacing: -0.015em;
            margin-bottom: 8px;
        }
        .q-l-therapist-vibe {
            font-size: 0.95rem;
            line-height: 1.5;
            color: var(--q-ink-soft);
            font-weight: 400;
        }
        .q-l-therapist-tags {
            display: flex;
            justify-content: center;
            gap: 6px;
            margin-top: 16px;
            flex-wrap: wrap;
        }
        .q-l-therapist-tags span {
            font-size: 0.72rem;
            padding: 5px 11px;
            border-radius: 999px;
            background: rgba(143, 166, 140, 0.14);
            color: var(--q-sage-deep);
            font-weight: 500;
            letter-spacing: 0.01em;
        }
        .q-l-cast-foot {
            text-align: center;
            margin-top: 44px;
            font-size: 0.95rem;
            color: var(--q-ink-mute);
        }
        .q-l-cast-foot strong {
            color: var(--q-ink);
            font-weight: 500;
        }

        /* ── Feature blocks (Liven-style) ─────────────────────────── */
        .q-l-features {
            max-width: 1240px;
            margin: 0 auto;
            padding: 96px 24px 64px;
            display: flex;
            flex-direction: column;
            gap: 96px;
        }
        .q-l-feature {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .q-l-feature-eyebrow {
            display: inline-block;
            font-family: 'Onest', sans-serif;
            font-size: 0.84rem;
            font-weight: 600;
            color: var(--q-sage-deep);
            background: var(--q-sage-bloom);
            border: 1px solid rgba(139, 94, 60, 0.14);
            padding: 8px 18px;
            border-radius: 999px;
            letter-spacing: -0.005em;
            margin-bottom: 20px;
        }
        .q-l-feature-title {
            font-family: 'Onest', sans-serif;
            font-weight: 800;
            font-size: clamp(1.75rem, 4.0vw, 2.6rem);
            line-height: 1.08;
            letter-spacing: -0.028em;
            color: var(--q-ink);
            max-width: 18ch;
            margin: 0 0 36px;
        }
        .q-l-feature-title em {
            font-style: italic;
            font-weight: 700;
            color: var(--q-sage-deep);
        }
        .q-l-feature-image-wrap {
            width: 100%;
            max-width: 460px;
            border-radius: 32px;
            overflow: hidden;
            box-shadow: 0 6px 14px rgba(28,27,25,0.08), 0 28px 60px rgba(28,27,25,0.16);
        }
        .q-l-feature-image {
            display: block;
            width: 100%;
            height: auto;
        }
        @media (min-width: 901px) {
            .q-l-features { padding: 128px 56px 96px; gap: 144px; }
            .q-l-feature {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                text-align: left;
                gap: 80px;
            }
            .q-l-feature:nth-child(even) { flex-direction: row-reverse; }
            .q-l-feature-text {
                flex: 1 1 0;
                min-width: 0;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
            .q-l-feature-title { max-width: 16ch; margin: 0; }
            .q-l-feature-image-wrap { flex: 0 0 auto; max-width: 480px; width: 100%; border-radius: 36px; }
        }
        @media (min-width: 1200px) {
            .q-l-feature-image-wrap { max-width: 520px; }
        }
        @media (max-width: 480px) {
            .q-l-features { padding: 64px 20px 40px; gap: 72px; }
            .q-l-feature-eyebrow { font-size: 0.78rem; padding: 7px 14px; margin-bottom: 16px; }
            .q-l-feature-title { font-size: clamp(1.6rem, 7vw, 2rem); margin-bottom: 28px; }
            .q-l-feature-image-wrap { border-radius: 26px; }
        }

        /* ── Why Quest (3 columns) ────────────────────────────────── */
        .q-l-why {
            padding: 96px 24px 100px;
            max-width: 1240px;
            margin: 0 auto;
            position: relative;
        }
        .q-l-why .q-l-section-title { margin-bottom: 56px; }
        .q-l-why-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
            max-width: 1240px;
            margin: 0 auto;
        }
        @media (min-width: 640px) {
            .q-l-why-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
        }
        @media (min-width: 980px) {
            .q-l-why-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
        }
        .q-l-why-card {
            background: var(--q-surface);
            border: 1px solid var(--q-hairline);
            border-radius: 20px;
            padding: 28px 24px 26px;
            box-shadow: var(--q-shadow-soft);
            transition: transform 0.4s var(--q-ease), box-shadow 0.4s var(--q-ease), border-color 0.4s var(--q-ease);
        }
        .q-l-why-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--q-shadow-lift);
            border-color: var(--q-hairline-strong);
        }
        .q-l-why-icon {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
            background: rgba(139, 94, 60, 0.08);
            border: 1px solid rgba(139, 94, 60, 0.15);
        }
        .q-l-why-icon svg {
            width: 22px;
            height: 22px;
            stroke: var(--q-sage-deep);
        }
        .q-l-why-card:nth-child(2) .q-l-why-icon {
            background: rgba(196, 121, 90, 0.08);
            border-color: rgba(196, 121, 90, 0.18);
        }
        .q-l-why-card:nth-child(2) .q-l-why-icon svg { stroke: var(--q-clay); }
        .q-l-why-card:nth-child(3) .q-l-why-icon {
            background: rgba(160, 140, 180, 0.10);
            border-color: rgba(160, 140, 180, 0.22);
        }
        .q-l-why-card:nth-child(3) .q-l-why-icon svg { stroke: #7B6B8C; }
        .q-l-why-card:nth-child(4) .q-l-why-icon {
            background: rgba(184, 93, 93, 0.08);
            border-color: rgba(184, 93, 93, 0.18);
        }
        .q-l-why-card:nth-child(4) .q-l-why-icon svg { stroke: #B85D5D; }
        .q-l-why-title {
            font-family: 'Newsreader', Georgia, serif;
            font-variation-settings: 'opsz' 60;
            font-size: 1.3rem;
            font-weight: 500;
            line-height: 1.18;
            letter-spacing: -0.012em;
            margin-bottom: 8px;
            color: var(--q-ink);
        }
        .q-l-why-body {
            font-size: 0.96rem;
            line-height: 1.5;
            color: var(--q-ink-soft);
            margin: 0;
        }

        /* ── Comparison ───────────────────────────────────────────── */
        .q-l-compare {
            position: relative;
            padding: 100px 24px;
            background: var(--q-canvas-warm);
            border-top: 1px solid var(--q-hairline);
            border-bottom: 1px solid var(--q-hairline);
            overflow: hidden;
        }
        .q-l-compare::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 55% 40% at 88% 18%, rgba(139,94,60,0.07) 0%, transparent 60%),
                radial-gradient(ellipse 50% 45% at 12% 82%, rgba(196,121,90,0.06) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
        }
        .q-l-compare > * {
            position: relative;
            z-index: 1;
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
        }
        .q-l-check-table {
            width: 100%;
            max-width: 880px;
            margin: 0 auto;
            background: #FFFFFF;
            border-radius: 12px;
            padding: 14px 24px 10px;
            border: 1px solid rgba(139,115,85,0.1);
            box-shadow: 0 2px 12px rgba(139,115,85,0.04);
        }
        .q-l-check-header {
            display: flex;
            justify-content: flex-end;
            padding: 0 0 10px;
            font-size: 0.7rem;
            font-weight: 600;
            color: rgba(107,101,96,0.7);
            text-transform: uppercase;
            letter-spacing: 0.09em;
            border-bottom: 1px solid rgba(139,115,85,0.1);
        }
        .q-l-check-header span { flex: 0 0 110px; text-align: center; }
        .q-l-check-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid rgba(139,115,85,0.08);
            font-size: 0.93rem;
            text-align: left;
        }
        .q-l-check-row:last-child { border-bottom: none; }
        .q-l-check-label {
            flex: 1;
            color: #3D3630;
            padding-right: 14px;
            line-height: 1.35;
        }
        .q-l-check-cell {
            flex: 0 0 175px;
            text-align: center;
            font-weight: 600;
            font-size: 0.95rem;
        }
        .q-l-check-cell.y { color: #C9A66B; background: rgba(201,166,107,0.07); border-radius: 6px; }
        .q-l-check-cell.n { color: rgba(107,101,96,0.3); }
        .q-l-check-row .q-l-check-cell { padding: 6px 0; }
        .q-l-check-header span:first-child { color: #C9A66B; background: rgba(201,166,107,0.1); border-radius: 6px; padding: 4px 0; }
        .q-l-check-cell.text {
            font-size: 0.82rem;
            color: #3D3630;
            font-weight: 500;
            flex: 0 0 175px;
            line-height: 1.35;
            padding: 4px 6px;
        }
        .q-l-check-cell.text.muted { color: rgba(107,101,96,0.55); }
        .q-l-check-header span.col-text { flex: 0 0 175px; }
        @media (max-width: 720px) {
            .q-l-check-table { padding: 12px 14px 8px; }
            .q-l-check-row { padding: 13px 0; font-size: 0.88rem; }
            .q-l-check-label { padding-right: 8px; font-size: 0.84rem; }
            .q-l-check-cell { flex: 0 0 108px; font-size: 0.9rem; }
            .q-l-check-cell.text { font-size: 0.72rem; line-height: 1.3; flex: 0 0 108px; padding: 3px 4px; }
            .q-l-check-header { font-size: 0.66rem; padding: 0 0 8px; }
            .q-l-check-header span { flex: 0 0 80px; }
            .q-l-check-header span.col-text { flex: 0 0 108px; }
        }

        /* ── Blog / journal ───────────────────────────────────────── */
        .q-l-blog {
            position: relative;
            padding: 100px 24px;
            background: var(--q-canvas);
            border-top: 1px solid var(--q-hairline);
            overflow: hidden;
        }
        .q-l-blog::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 50% 40% at 84% 18%, rgba(139,94,60,0.06) 0%, transparent 60%),
                radial-gradient(ellipse 50% 40% at 12% 82%, rgba(196,121,90,0.05) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
        }
        .q-l-blog > * {
            position: relative;
            z-index: 1;
        }
        .q-l-blog-inner {
            max-width: 1180px;
            margin: 0 auto;
            text-align: center;
        }
        .q-l-blog-grid { text-align: left; }
        .q-l-blog-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
            max-width: 1080px;
            margin: 0 auto 40px;
        }
        @media (min-width: 720px) {
            .q-l-blog-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
        }
        .q-l-blog-card {
            display: flex;
            flex-direction: column;
            background: var(--q-surface);
            border: 1px solid var(--q-hairline);
            border-radius: var(--q-radius-lg);
            overflow: hidden;
            text-decoration: none;
            color: inherit;
            box-shadow: 0 2px 14px rgba(28,27,25,0.05);
            transition: transform 0.25s var(--q-ease), box-shadow 0.25s var(--q-ease), border-color 0.25s var(--q-ease);
        }
        .q-l-blog-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 32px rgba(28,27,25,0.10);
            border-color: var(--q-hairline-strong);
        }
        .q-l-blog-img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            display: block;
            background: var(--q-sage-bloom);
        }
        .q-l-blog-body {
            padding: 22px 22px 24px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;
        }
        .q-l-blog-meta {
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: var(--q-sage-deep);
        }
        .q-l-blog-title {
            font-family: 'Newsreader', Georgia, serif;
            font-optical-sizing: auto;
            font-variation-settings: 'opsz' 100;
            font-size: 1.32rem;
            font-weight: 400;
            line-height: 1.25;
            letter-spacing: -0.014em;
            color: var(--q-ink);
            margin: 0;
        }
        .q-l-blog-title em {
            font-style: italic;
            color: var(--q-sage-deep);
            font-weight: 350;
        }
        .q-l-blog-excerpt {
            font-size: 0.94rem;
            line-height: 1.55;
            color: var(--q-ink-soft);
            margin: 0;
        }
        .q-l-blog-more {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.92rem;
            font-weight: 500;
            color: var(--q-sage-deep);
            text-decoration: none;
            justify-self: center;
            margin: 0 auto;
            padding: 12px 4px;
            border-bottom: 1px solid transparent;
            transition: border-color 0.2s var(--q-ease);
        }
        .q-l-blog-more-row {
            display: flex;
            justify-content: center;
        }
        .q-l-blog-more:hover { border-bottom-color: var(--q-sage-deep); }
        .q-l-blog-more svg { width: 14px; height: 14px; }

        /* ── FAQ ──────────────────────────────────────────────────── */
        .q-l-faq {
            position: relative;
            padding: 100px 24px;
            background: var(--q-canvas);
            border-top: 1px solid var(--q-hairline);
            overflow: hidden;
        }
        .q-l-faq::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 50% 40% at 14% 22%, rgba(139,94,60,0.06) 0%, transparent 60%),
                radial-gradient(ellipse 50% 40% at 86% 78%, rgba(196,121,90,0.05) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
        }
        .q-l-faq > * {
            position: relative;
            z-index: 1;
            max-width: 880px;
            margin-left: auto;
            margin-right: auto;
        }
        .q-l-faq-list {
            margin-top: 40px;
        }
        .q-l-faq-item {
            border-bottom: 1px solid var(--q-hairline);
            padding: 4px 0;
        }
        .q-l-faq-item summary {
            list-style: none;
            cursor: pointer;
            padding: 22px 8px 22px 0;
            font-family: 'Newsreader', Georgia, serif;
            font-variation-settings: 'opsz' 100;
            font-size: 1.18rem;
            font-weight: 400;
            color: var(--q-ink);
            letter-spacing: -0.012em;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            transition: color 0.2s var(--q-ease);
        }
        .q-l-faq-item summary::-webkit-details-marker { display: none; }
        .q-l-faq-item summary:hover { color: var(--q-sage-deep); }
        .q-l-faq-icon {
            flex-shrink: 0;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid var(--q-hairline-strong);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s var(--q-ease), background 0.3s var(--q-ease);
            color: var(--q-ink-soft);
        }
        .q-l-faq-item[open] .q-l-faq-icon {
            transform: rotate(45deg);
            background: var(--q-ink);
            color: var(--q-canvas);
            border-color: var(--q-ink);
        }
        .q-l-faq-icon svg { width: 11px; height: 11px; }
        .q-l-faq-item p {
            padding: 0 8px 24px 0;
            font-size: 0.98rem;
            line-height: 1.65;
            color: var(--q-ink-soft);
            max-width: 640px;
        }

        /* ── Final CTA band ───────────────────────────────────────── */
        .q-l-final {
            padding: 56px 24px 80px;
            text-align: center;
            position: relative;
        }
        @media (max-width: 640px) {
            .q-l-final { padding: 40px 22px 56px; }
        }
        .q-l-final h2 {
            font-family: 'Newsreader', Georgia, serif;
            font-variation-settings: 'opsz' 144, 'SOFT' 60;
            font-size: clamp(2.4rem, 5.5vw, 4rem);
            font-weight: 350;
            line-height: 1.05;
            letter-spacing: -0.035em;
            color: var(--q-ink);
            margin-bottom: 22px;
            max-width: 720px;
            margin-left: auto;
            margin-right: auto;
        }
        .q-l-final h2 em {
            font-style: italic;
            font-weight: 300;
            color: var(--q-sage-deep);
        }
        .q-l-final p {
            font-size: 1.1rem;
            color: var(--q-ink-soft);
            margin-bottom: 36px;
            max-width: 520px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.55;
        }

        /* ── Footer ───────────────────────────────────────────────── */
        .q-l-foot {
            padding: 56px 24px 60px;
            border-top: 1px solid var(--q-hairline);
            text-align: center;
        }
        .q-l-foot-brand {
            font-family: 'Newsreader', Georgia, serif;
            font-variation-settings: 'opsz' 144, 'SOFT' 30;
            font-size: 1.15rem;
            color: var(--q-ink);
            margin-bottom: 14px;
        }
        .q-l-foot-links {
            display: flex;
            justify-content: center;
            gap: 24px;
            font-size: 0.85rem;
            color: var(--q-ink-mute);
            margin-bottom: 12px;
        }
        .q-l-foot-links a {
            color: var(--q-ink-mute);
            text-decoration: none;
            transition: color 0.2s var(--q-ease);
        }
        .q-l-foot-links a:hover { color: var(--q-ink); }
        .q-l-foot-social {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 18px;
        }
        .q-l-foot-social a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--q-sage-deep);
            color: var(--q-canvas);
            transition: transform 0.2s var(--q-ease), background 0.2s var(--q-ease);
        }
        .q-l-foot-social a:hover {
            transform: translateY(-2px);
            background: var(--q-ink);
        }
        .q-l-foot-social svg { width: 16px; height: 16px; fill: currentColor; }
        .q-l-foot-copy {
            font-size: 0.78rem;
            color: var(--q-ink-mute);
            opacity: 0.7;
        }
        .q-l-foot-disclosure {
            margin: 18px auto 0;
            max-width: 640px;
            font-size: 0.72rem;
            line-height: 1.6;
            color: var(--q-ink-mute);
            opacity: 0.6;
            font-style: italic;
        }

        /* ── Section reveal animations ─────────────────────────────── */
        @keyframes qlFadeUp {
            from { opacity: 0; transform: translateY(28px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .q-l-root .q-l-eyebrow,
        .q-l-root .q-l-hero h1,
        .q-l-root .q-l-hero .q-l-subtitle,
        .q-l-root .q-l-hero-cta-row {
            animation: qlFadeUp 1s var(--q-ease) both;
        }
        .q-l-root .q-l-eyebrow { animation-delay: 0.05s; }
        .q-l-root .q-l-hero h1 { animation-delay: 0.18s; }
        .q-l-root .q-l-hero .q-l-subtitle { animation-delay: 0.32s; }
        .q-l-root .q-l-hero-cta-row { animation-delay: 0.46s; }

        @media (prefers-reduced-motion: reduce) {
            .q-l-root .q-l-eyebrow,
            .q-l-root .q-l-hero h1,
            .q-l-root .q-l-hero .q-l-subtitle,
            .q-l-root .q-l-hero-cta-row { animation: none; opacity: 1; }
        }

    /* ===== Sticky mobile CTA (only on landing, only on mobile, only after hero CTA scrolls out) ===== */
    .q-l-sticky-cta {
        display: none;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 950;
        padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px));
        background: transparent;
        pointer-events: none;
        transform: translateY(110%);
        opacity: 0;
        transition: transform 0.32s var(--q-ease), opacity 0.32s var(--q-ease);
    }
    .q-l-sticky-cta.is-visible {
        transform: translateY(0);
        opacity: 1;
    }
    .q-l-sticky-cta button {
        pointer-events: auto;
        width: 100%;
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        background: var(--q-ink);
        color: var(--q-canvas);
        border: none;
        padding: 18px 26px;
        border-radius: 999px;
        font-family: 'Onest', sans-serif;
        font-size: 1.02rem;
        font-weight: 500;
        letter-spacing: -0.005em;
        cursor: pointer;
        box-shadow: 0 14px 36px rgba(28,27,25,0.28);
        transition: transform 0.2s var(--q-ease), box-shadow 0.2s var(--q-ease);
        -webkit-tap-highlight-color: transparent;
    }
    .q-l-sticky-cta button:active { transform: scale(0.985); }
    .q-l-sticky-cta button svg { width: 16px; height: 16px; }
    @media (max-width: 820px) {
        .q-l-sticky-cta { display: block; }
        .q-l-root .q-l-footer { padding-bottom: 110px; }
    }
    @media (max-width: 820px) and (max-height: 480px) {
        .q-l-sticky-cta { display: none; }
    }

    /* ===== Inline quiz intro (3 Qs + 3 warmup slides). Shown before onboarding. ===== */
    #quiz-intro { display:none; position:fixed; inset:0; z-index:9999; background:#FAF8F5; overflow-y:auto; }
    #quiz-intro.is-active { display:block; }
    #quiz-intro .qs-nav { position:fixed; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; justify-content:center; padding:18px 28px; background:rgba(250,250,247,0.96); }
    #quiz-intro .qs-brand { font-family:'Newsreader',Georgia,serif; font-optical-sizing:auto; font-size:1.4rem; font-weight:400; font-variation-settings:'opsz' 144,'SOFT' 30; letter-spacing:-0.01em; color:#1C1B19; text-decoration:none; line-height:1; }
    #quiz-intro .qs-brand em { font-style:normal; font-weight:inherit; color:inherit; }
    #quiz-intro .qs-shell { position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:flex-start; justify-content:center; padding:calc(env(safe-area-inset-top,0px) + 110px) 20px 48px; }
    #quiz-intro .qs-step { width:100%; max-width:440px; display:none; flex-direction:column; align-items:center; text-align:center; animation:qsFade .45s cubic-bezier(0.22,0.61,0.36,1); }
    #quiz-intro .qs-step.is-active { display:flex; }
    @keyframes qsFade { from { opacity:0; } to { opacity:1; } }
    #quiz-intro .qs-question { font-family:'Lora',Georgia,serif; font-size:1.2rem; font-weight:500; line-height:1.3; color:#3D3630; margin:0 0 22px; letter-spacing:-0.005em; }
    #quiz-intro .qs-pills { display:flex; flex-direction:column; gap:10px; width:100%; max-width:420px; }
    #quiz-intro .qs-pill { padding:18px 22px; border:1.5px solid rgba(139,115,85,0.18); border-radius:14px; background:white; font-family:inherit; font-size:1rem; font-weight:500; color:#2D2A26; cursor:pointer; transition: background-color 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.2s cubic-bezier(0.4,0,0.2,1), color 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1), transform 0.2s cubic-bezier(0.4,0,0.2,1), opacity 0.2s cubic-bezier(0.4,0,0.2,1); text-align:center; user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; letter-spacing:-0.005em; opacity:0; animation:qsPillIn .4s cubic-bezier(0.22,0.61,0.36,1) forwards; }
    #quiz-intro .qs-pill:nth-child(1) { animation-delay:80ms; }
    #quiz-intro .qs-pill:nth-child(2) { animation-delay:140ms; }
    #quiz-intro .qs-pill:nth-child(3) { animation-delay:200ms; }
    #quiz-intro .qs-pill:nth-child(4) { animation-delay:260ms; }
    #quiz-intro .qs-pill:nth-child(5) { animation-delay:320ms; }
    @keyframes qsPillIn { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:translateY(0);} }
    @media (hover:hover) and (pointer:fine) { #quiz-intro .qs-pill:hover { border-color:rgba(139,115,85,0.4); background:rgba(139,115,85,0.04);} }
    #quiz-intro .qs-pill:active { transform:scale(0.985); }
    #quiz-intro .qs-pill.is-selected { border-color:#3D3630; background:#3D3630; color:#FAF8F5; font-weight:600; }
    #quiz-intro .qs-pill.is-loading { opacity:0.55; pointer-events:none; }
    #quiz-intro .qs-continue { margin-top:18px; padding:16px 36px; border:none; border-radius:100px; background:#3D3630; color:#FAF8F5; font-family:inherit; font-size:1rem; font-weight:600; letter-spacing:0.01em; cursor:pointer; transition:opacity 0.2s ease, transform 0.15s ease; min-width:200px; -webkit-tap-highlight-color:transparent; }
    #quiz-intro .qs-continue:disabled { background:rgba(139,115,85,0.10); color:rgba(60,54,48,0.32); cursor:not-allowed; }
    #quiz-intro .qs-continue:not(:disabled):active { transform:scale(0.98); }
    #quiz-intro .qs-progress { display:none !important; }
    #quiz-intro .qs-progress-line { position:fixed; top:calc(env(safe-area-inset-top,0px) + 60px); left:50%; transform:translateX(-50%); width:min(200px,38vw); height:2px; background:rgba(139,115,85,0.14); border-radius:1px; overflow:hidden; z-index:301; opacity:0; transition:opacity .25s ease; }
    #quiz-intro.show-progress .qs-progress-line { opacity:1; }
    #quiz-intro .qs-progress-line-fill { height:100%; background:#C9A66B; width:0%; transition:width .45s cubic-bezier(0.22,0.61,0.36,1); border-radius:1px; }
    @media (max-width:600px) { #quiz-intro .qs-progress-line { top:calc(env(safe-area-inset-top,0px) + 52px); width:44vw; } }
    #quiz-intro .qs-back { position:fixed; top:calc(env(safe-area-inset-top,0px) + 20px); left:20px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.7); border:1px solid rgba(139,115,85,0.14); cursor:pointer; display:flex; align-items:center; justify-content:center; color:#3D3630; z-index:301; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s, opacity .2s; }
    #quiz-intro .qs-back:hover { background:white; border-color:rgba(201,166,107,0.4); }
    #quiz-intro .qs-back svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    @media (max-width:600px) { #quiz-intro .qs-back { top:calc(env(safe-area-inset-top,0px) + 14px); left:14px; width:36px; height:36px; } }
    #quiz-intro .qs-menu { position:fixed; top:calc(env(safe-area-inset-top,0px) + 20px); right:20px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.7); border:1px solid rgba(139,115,85,0.14); cursor:pointer; display:flex; align-items:center; justify-content:center; color:#3D3630; z-index:301; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s, opacity .2s; padding:0; }
    #quiz-intro .qs-menu:hover { background:white; border-color:rgba(201,166,107,0.4); }
    #quiz-intro .qs-menu svg { width:17px; height:17px; }
    @media (max-width:600px) { #quiz-intro .qs-menu { top:calc(env(safe-area-inset-top,0px) + 14px); right:14px; width:36px; height:36px; } #quiz-intro .qs-menu svg { width:16px; height:16px; } }
    @media (max-width:400px) {
        #quiz-intro .qs-shell { padding:calc(env(safe-area-inset-top,0px) + 92px) 16px 36px; }
        #quiz-intro .qs-nav { padding:14px 18px; }
        #quiz-intro .qs-brand { font-size:1.25rem; }
        #quiz-intro .qs-question { font-size:1.08rem; margin:0 0 18px; }
        #quiz-intro .qs-pill { padding:14px 16px 14px 18px; font-size:0.95rem; min-height:54px; }
    }
    /* Age-bucket intro (step 0) — "Are you in the midlife dip?", Liven-style */
    #quiz-intro:has(.qs-age-step.is-active) .qs-shell { padding-top:calc(env(safe-area-inset-top,0px) + 72px); }
    @media (max-width:600px) {
        #quiz-intro:has(.qs-age-step.is-active) .qs-shell { padding-top:calc(env(safe-area-inset-top,0px) + 64px); }
    }
    @media (max-width:400px) {
        #quiz-intro:has(.qs-age-step.is-active) .qs-shell { padding-top:calc(env(safe-area-inset-top,0px) + 60px); }
    }
    #quiz-intro .qs-age-step { max-width:440px; }
    #quiz-intro .qs-age-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 10px; border-radius:100px; background:rgba(139,94,60,0.10); font-family:'DM Sans',sans-serif; font-size:0.72rem; font-weight:500; color:#8B5E3C; letter-spacing:0.01em; margin:0 auto 14px; }
    #quiz-intro .qs-age-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:#8B5E3C; }
    #quiz-intro .qs-age-head { font-family:'Lora',Georgia,serif; font-style:normal; font-weight:500; font-size:1.45rem; line-height:1.25; color:#1C1B19; letter-spacing:-0.012em; margin:0 0 8px; text-align:center; }
    #quiz-intro .qs-age-head em { color:#8B5E3C; font-style:italic; font-weight:500; }
    #quiz-intro .qs-age-sub { font-family:'DM Sans',sans-serif; font-size:0.88rem; font-weight:400; line-height:1.4; color:rgba(60,54,48,0.62); margin:0 0 22px; text-align:center; max-width:360px; letter-spacing:-0.003em; }
    #quiz-intro .qs-age-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; width:100%; max-width:380px; }
    #quiz-intro .qs-age-card { position:relative; padding:0; border:none; border-radius:14px; background:#F0E9DE; cursor:pointer; overflow:hidden; aspect-ratio:1/1.18; transition:transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s ease; -webkit-tap-highlight-color:transparent; touch-action:manipulation; opacity:0; animation:qsPillIn .45s cubic-bezier(0.22,0.61,0.36,1) forwards; }
    #quiz-intro .qs-age-card:nth-child(1) { animation-delay:80ms; }
    #quiz-intro .qs-age-card:nth-child(2) { animation-delay:140ms; }
    #quiz-intro .qs-age-card:nth-child(3) { animation-delay:200ms; }
    #quiz-intro .qs-age-card:nth-child(4) { animation-delay:260ms; }
    @media (hover:hover) and (pointer:fine) { #quiz-intro .qs-age-card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(28,27,25,0.10); } #quiz-intro .qs-age-card:hover .qs-age-label { background:#3D3630; color:#FAF8F5; } }
    #quiz-intro .qs-age-card:active { transform:scale(0.985); }
    #quiz-intro .qs-age-card.is-selected { box-shadow:0 0 0 2.5px #3D3630; }
    #quiz-intro .qs-age-card.is-selected .qs-age-label { background:#3D3630; color:#FAF8F5; }
    #quiz-intro .qs-age-card.is-loading { opacity:0.55; pointer-events:none; }
    #quiz-intro .qs-age-img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    #quiz-intro .qs-age-label { position:absolute; left:10px; right:10px; bottom:10px; display:flex; align-items:center; justify-content:space-between; padding:9px 14px; border-radius:100px; background:rgba(255,255,255,0.96); backdrop-filter:saturate(140%) blur(8px); -webkit-backdrop-filter:saturate(140%) blur(8px); font-family:'DM Sans',sans-serif; font-size:0.95rem; font-weight:600; color:#2D2A26; letter-spacing:-0.005em; transition:background 0.2s ease, color 0.2s ease; }
    #quiz-intro .qs-age-label::after { content:""; width:14px; height:14px; flex-shrink:0; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h10M8 3l5 5-5 5' stroke='%232D2A26' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-size:contain; background-repeat:no-repeat; background-position:center; }
    #quiz-intro .qs-age-card:hover .qs-age-label::after,
    #quiz-intro .qs-age-card.is-selected .qs-age-label::after { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h10M8 3l5 5-5 5' stroke='%23FAF8F5' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
    #quiz-intro .qs-age-terms { margin:20px auto 0; max-width:380px; font-family:'DM Sans',sans-serif; font-size:0.7rem; line-height:1.5; color:rgba(60,54,48,0.5); text-align:center; letter-spacing:0.005em; }
    #quiz-intro .qs-age-terms a { color:rgba(60,54,48,0.7); text-decoration:underline; text-underline-offset:2px; }
    #quiz-intro .qs-age-step .qs-progress { display:none; }
    @media (max-width:600px) {
        #quiz-intro .qs-age-step { max-width:380px; }
        #quiz-intro .qs-age-head { font-size:1.32rem; margin:0 0 7px; }
        #quiz-intro .qs-age-sub { font-size:0.84rem; margin:0 0 18px; }
        #quiz-intro .qs-age-grid { gap:8px; max-width:340px; }
        #quiz-intro .qs-age-label { left:8px; right:8px; bottom:8px; padding:7px 12px; font-size:0.9rem; }
        #quiz-intro .qs-age-terms { font-size:0.68rem; margin-top:16px; }
    }
    @media (max-width:400px) {
        #quiz-intro .qs-age-head { font-size:1.22rem; }
        #quiz-intro .qs-age-sub { font-size:0.8rem; margin:0 0 14px; }
    }
    /* Welcome / intro step — Evernow-style hero, fluid sizing + staggered entrance */
    #quiz-intro:has(.qs-welcome-step.is-active) { background:#A05B58; }
    #quiz-intro:has(.qs-welcome-step.is-active) .qs-nav,
    #quiz-intro:has(.qs-welcome-step.is-active) ~ .qs-menu,
    body:has(#quiz-intro .qs-welcome-step.is-active) .qs-menu,
    #quiz-intro:has(.qs-welcome-step.is-active) .qs-back { display:none !important; }
    #quiz-intro:has(.qs-welcome-step.is-active) .qs-shell {
        padding: 0;
        height: 100svh;
        min-height: 100svh;
        max-height: 100svh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #quiz-intro .qs-welcome-step { padding: 0; max-width: none; width: 100%; }
    /* Sized to the SMALL viewport height (chrome visible) so the CTA never
       falls behind the iOS toolbar. All items in one flex column, centered. */
    #quiz-intro .qs-welcome-step.is-active {
        flex: 1 1 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(8px, 2vh, 18px);
        height: 100svh;
        min-height: 0;
        padding: calc(env(safe-area-inset-top,0px) + 12px) clamp(16px, 5vw, 28px) calc(env(safe-area-inset-bottom,0px) + 18px);
        box-sizing: border-box;
        overflow: hidden;
    }
    #quiz-intro .qs-welcome-step .qs-progress { display:none; }
    #quiz-intro .qs-welcome-mark {
        font-family:'Newsreader',Georgia,serif;
        font-optical-sizing:auto;
        font-size: clamp(1.15rem, 4.4vw, 1.6rem);
        font-weight:400;
        font-variation-settings:'opsz' 144,'SOFT' 30;
        letter-spacing:0.005em;
        color:#FFFFFF;
        line-height:1;
        text-align:center;
        margin: 0;
    }
    #quiz-intro .qs-welcome-mark em { font-style:normal; font-weight:inherit; color:inherit; }
    #quiz-intro .qs-welcome-card {
        height: clamp(140px, 28vh, 260px);
        aspect-ratio: 4/5;
        max-width: 90vw;
        border-radius: clamp(16px, 4.5vw, 24px);
        overflow:hidden;
        background:#3D2F26;
        box-shadow: 0 8px 32px rgba(0,0,0,0.22);
        margin: 0;
        flex-shrink: 0;
    }
    #quiz-intro .qs-welcome-card img { display:block; width:100%; height:100%; object-fit:cover; }
    #quiz-intro .qs-welcome-head {
        font-family:'DM Sans',sans-serif;
        font-weight:500;
        font-size: clamp(0.95rem, 3.8vw, 1.15rem);
        line-height:1.3;
        color: rgba(255,255,255,0.92);
        letter-spacing:0;
        margin: 0;
        text-align:center;
    }
    #quiz-intro .qs-welcome-body {
        font-family:'DM Sans',sans-serif;
        font-size: clamp(1.32rem, 5.4vw, 1.85rem);
        font-weight:700;
        line-height:1.16;
        color:#FAF8F5;
        margin: 0;
        text-align:center;
        letter-spacing:-0.018em;
        padding: 0 1%;
    }
    #quiz-intro .qs-welcome-body strong { color:#F4D29A; font-weight:700; background:none; padding:0; border-radius:0; }
    #quiz-intro .qs-welcome-testimonial {
        background:#FFFFFF;
        border-radius: clamp(18px, 4.5vw, 24px);
        padding: clamp(14px, 3.8vw, 22px) clamp(14px, 3.8vw, 22px);
        margin: 0;
        width: 100%;
        max-width: 540px;
        box-shadow: 0 6px 32px rgba(0,0,0,0.14);
        border:none;
        text-align:center;
    }
    #quiz-intro .qs-welcome-stars {
        display:flex;
        gap: clamp(4px, 1.2vw, 8px);
        margin: 0 auto clamp(10px, 2vw, 14px);
        justify-content:center;
    }
    #quiz-intro .qs-welcome-stars svg {
        width: clamp(22px, 5.6vw, 28px);
        height: clamp(22px, 5.6vw, 28px);
        color:#8B7355;
    }
    #quiz-intro .qs-welcome-tname {
        font-family:'DM Sans',sans-serif;
        font-size: clamp(0.98rem, 4vw, 1.18rem);
        font-weight:700;
        color:#1C1B19;
        margin: 0 0 clamp(6px, 1.4vw, 10px);
        letter-spacing:-0.005em;
        text-align:center;
    }
    #quiz-intro .qs-welcome-tquote {
        font-family:'DM Sans',sans-serif;
        font-size: clamp(0.84rem, 3.2vw, 0.95rem);
        line-height:1.45;
        color: rgba(60,54,48,0.82);
        margin: 0 0 clamp(10px, 2vw, 14px);
        letter-spacing:-0.003em;
        text-align:center;
    }
    #quiz-intro .qs-welcome-verified {
        display:inline-flex;
        align-items:center;
        gap: clamp(8px, 1.8vw, 10px);
        font-family:'DM Sans',sans-serif;
        font-style:italic;
        font-size: clamp(0.82rem, 3.2vw, 0.92rem);
        font-weight:500;
        color: rgba(60,54,48,0.7);
    }
    #quiz-intro .qs-welcome-verified svg {
        width: clamp(20px, 4.8vw, 24px);
        height: clamp(20px, 4.8vw, 24px);
        padding:4px;
        border-radius:50%;
        background:#1C1B19;
        color:#FFFFFF;
        flex-shrink:0;
        box-sizing:border-box;
    }
    #quiz-intro .qs-welcome-cta {
        width:100%;
        max-width: 540px;
        align-self:center;
        margin: 0;
        padding: clamp(14px, 3.8vw, 18px) 28px;
        border:none;
        border-radius:100px;
        background:#FFFFFF;
        color:#1C1B19;
        font-family:'DM Sans',sans-serif;
        font-size: clamp(1rem, 4vw, 1.12rem);
        font-weight:700;
        letter-spacing:0.005em;
        cursor:pointer;
        transition: transform 0.15s ease, background 0.2s ease;
        -webkit-tap-highlight-color:transparent;
        touch-action:manipulation;
    }
    #quiz-intro .qs-welcome-cta:hover { background:#F5F0E8; }
    #quiz-intro .qs-welcome-cta:active { transform:scale(0.985); }
    #quiz-intro .qs-welcome-cta:disabled { opacity:0.55; pointer-events:none; }

    /* Staggered slide-up entrance — each element rises into place */
    @keyframes qsWelcomeRise {
        from { opacity: 0; transform: translateY(28px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    #quiz-intro .qs-welcome-step.is-active .qs-welcome-mark        { animation: qsWelcomeRise 0.6s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
    #quiz-intro .qs-welcome-step.is-active .qs-welcome-card        { animation: qsWelcomeRise 0.65s cubic-bezier(0.22,1,0.36,1) 0.17s both; }
    #quiz-intro .qs-welcome-step.is-active .qs-welcome-head        { animation: qsWelcomeRise 0.6s cubic-bezier(0.22,1,0.36,1) 0.30s both; }
    #quiz-intro .qs-welcome-step.is-active .qs-welcome-body        { animation: qsWelcomeRise 0.6s cubic-bezier(0.22,1,0.36,1) 0.42s both; }
    #quiz-intro .qs-welcome-step.is-active .qs-welcome-testimonial { animation: qsWelcomeRise 0.65s cubic-bezier(0.22,1,0.36,1) 0.56s both; }
    #quiz-intro .qs-welcome-step.is-active .qs-welcome-cta         { animation: qsWelcomeRise 0.6s cubic-bezier(0.22,1,0.36,1) 0.72s both; }
    @media (prefers-reduced-motion: reduce) {
        #quiz-intro .qs-welcome-step.is-active .qs-welcome-mark,
        #quiz-intro .qs-welcome-step.is-active .qs-welcome-card,
        #quiz-intro .qs-welcome-step.is-active .qs-welcome-head,
        #quiz-intro .qs-welcome-step.is-active .qs-welcome-body,
        #quiz-intro .qs-welcome-step.is-active .qs-welcome-testimonial,
        #quiz-intro .qs-welcome-step.is-active .qs-welcome-cta { animation: none !important; }
    }

    /* Very short screens: shrink portrait + truncate quote so CTA never falls off */
    @media (max-height: 640px) {
        #quiz-intro .qs-welcome-step.is-active { gap: clamp(8px, 1.6vh, 14px); }
        #quiz-intro .qs-welcome-card { height: clamp(130px, 26vh, 200px); }
        #quiz-intro .qs-welcome-tquote {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }
    /* Desktop: cap content width, keep things centered */
    @media (min-width:700px) {
        #quiz-intro .qs-welcome-card { height: clamp(240px, 38vh, 380px); }
        #quiz-intro .qs-welcome-testimonial { max-width: 480px; }
        #quiz-intro .qs-welcome-cta { max-width: 480px; }
    }
    /* Diagnosis questions — bipolar forced-choice slider (drag toward what is most true) */
    #quiz-intro .qs-diag-step { max-width:480px; padding-top:0; }
    #quiz-intro .qs-diag-step .qs-progress { margin:0 auto 38px; max-width:440px; }
    #quiz-intro .qs-diag-stem { font-family:'Lora',Georgia,serif; font-weight:500; font-size:1.5rem; line-height:1.32; color:#1C1B19; letter-spacing:-0.015em; margin:0 0 30px; text-align:center; max-width:430px; }
    #quiz-intro .qs-bipolar { width:100%; max-width:440px; margin:0 auto; display:flex; flex-direction:column; gap:22px; -webkit-tap-highlight-color:transparent; }
    #quiz-intro .qs-bp-cards { display:flex; align-items:stretch; gap:0; }
    #quiz-intro .qs-bp-card { flex:1 1 0; min-height:120px; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px 14px; border-radius:20px; background:transparent; border:1.5px solid transparent; cursor:pointer; transition:background .2s ease, transform .14s ease, box-shadow .2s ease; }
    #quiz-intro .qs-bp-card span { font-family:'DM Sans',sans-serif; font-weight:600; font-size:1.08rem; line-height:1.28; color:#3C3630; letter-spacing:-0.01em; transition:color .2s ease; }
    #quiz-intro .qs-bp-card:active { transform:scale(0.985); }
    #quiz-intro .qs-bp-or { flex:0 0 auto; align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:0 10px; }
    #quiz-intro .qs-bp-or-line { flex:1 1 0; width:1.5px; min-height:18px; background:rgba(28,27,25,0.13); border-radius:2px; }
    #quiz-intro .qs-bp-or-word { font-family:'Lora',Georgia,serif; font-style:italic; font-weight:600; font-size:1.05rem; color:rgba(60,54,48,0.5); }
    #quiz-intro .qs-bp-card.qs-bp-reg.is-lean { background:#7A9A5E; box-shadow:0 6px 18px rgba(94,128,73,0.22); }
    #quiz-intro .qs-bp-card.qs-bp-reg.is-strong { background:#5E8049; box-shadow:0 8px 22px rgba(94,128,73,0.28); }
    #quiz-intro .qs-bp-card.qs-bp-dys.is-lean { background:#B5933F; box-shadow:0 6px 18px rgba(151,119,44,0.22); }
    #quiz-intro .qs-bp-card.qs-bp-dys.is-strong { background:#97772C; box-shadow:0 8px 22px rgba(151,119,44,0.30); }
    #quiz-intro .qs-bp-card.is-lean span, #quiz-intro .qs-bp-card.is-strong span { color:#FFFFFF; }
    #quiz-intro .qs-bp-track { position:relative; height:48px; margin:0 18px; touch-action:none; cursor:grab; outline:none; }
    #quiz-intro .qs-bp-track:active { cursor:grabbing; }
    #quiz-intro .qs-bp-track:focus-visible .qs-bp-thumb { box-shadow:0 0 0 4px rgba(160,91,88,0.25), 0 3px 10px rgba(28,27,25,0.18); }
    #quiz-intro .qs-bp-rail { position:absolute; top:50%; left:0; right:0; height:6px; transform:translateY(-50%); background:rgba(28,27,25,0.09); border-radius:999px; }
    #quiz-intro .qs-bp-fill { position:absolute; top:50%; left:50%; width:0; height:6px; transform:translateY(-50%); border-radius:999px; background:#9CB084; transition:left .18s ease, width .18s ease, background .18s ease; }
    #quiz-intro .qs-bp-stops { position:absolute; inset:0; pointer-events:none; }
    #quiz-intro .qs-bp-stop { position:absolute; top:50%; width:36px; height:36px; transform:translate(-50%,-50%); border:none; background:transparent; padding:0; margin:0; cursor:pointer; pointer-events:auto; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
    #quiz-intro .qs-bp-stop::after { content:''; width:11px; height:11px; border-radius:50%; background:#FFFFFF; border:2px solid rgba(28,27,25,0.20); transition:transform .15s ease, border-color .15s ease; }
    #quiz-intro .qs-bp-thumb { position:absolute; top:50%; left:50%; width:38px; height:38px; transform:translate(-50%,-50%); border-radius:50%; background:#FFFFFF; color:#A05B58; border:2.5px solid currentColor; box-shadow:0 3px 12px rgba(28,27,25,0.20); transition:left .2s cubic-bezier(.34,1.32,.5,1), color .18s ease, border-color .18s ease, transform .15s ease; pointer-events:none; z-index:2; display:flex; align-items:center; justify-content:center; }
    #quiz-intro .qs-bp-thumb::after { content:''; width:13px; height:15px; background:repeating-linear-gradient(to right, currentColor 0 2px, transparent 2px 5.5px); }
    #quiz-intro .qs-bp-thumb.is-reg { color:#5E8049; }
    #quiz-intro .qs-bp-thumb.is-dys { color:#97772C; }
    #quiz-intro .qs-bipolar.is-dragging .qs-bp-thumb { transition:color .12s ease, border-color .12s ease, transform .12s ease; transform:translate(-50%,-50%) scale(1.12); }
    #quiz-intro .qs-bipolar.is-dragging .qs-bp-fill { transition:background .12s ease; }
    #quiz-intro .qs-bipolar.is-dragging .qs-bp-card { transition:background .1s ease, box-shadow .1s ease, transform .14s ease; }
    #quiz-intro .qs-bipolar.is-dragging .qs-bp-card span { transition:color .1s ease; }
    #quiz-intro .qs-bp-scale { position:relative; margin:4px 18px 0; min-height:34px; }
    #quiz-intro .qs-bp-scale span { position:absolute; top:0; width:80px; font-family:'DM Sans',sans-serif; font-size:0.72rem; font-weight:500; line-height:1.16; color:rgba(60,54,48,0.48); transition:color .18s ease, font-weight .18s ease; }
    #quiz-intro .qs-bp-scale span[data-i="0"] { left:8%; transform:translateX(-50%); text-align:center; }
    #quiz-intro .qs-bp-scale span[data-i="1"] { left:30%; transform:translateX(-50%); text-align:center; }
    #quiz-intro .qs-bp-scale span[data-i="2"] { left:70%; transform:translateX(-50%); text-align:center; }
    #quiz-intro .qs-bp-scale span[data-i="3"] { left:92%; transform:translateX(-50%); text-align:center; }
    #quiz-intro .qs-bp-scale span.is-reg-active { color:#5E8049; font-weight:700; }
    #quiz-intro .qs-bp-scale span.is-dys-active { color:#8A6B22; font-weight:700; }
    #quiz-intro .qs-bp-helper { margin-top:6px; padding:13px 16px; border-radius:14px; background:rgba(28,27,25,0.05); font-family:'DM Sans',sans-serif; font-size:0.85rem; line-height:1.4; color:rgba(60,54,48,0.72); text-align:center; }
    #quiz-intro .qs-bp-helper p { margin:0; }
    #quiz-intro .qs-bp-helper p + p { margin-top:9px; }
    #quiz-intro .qs-bp-helper strong { font-weight:700; color:rgba(60,54,48,0.92); }
    /* Always interactive + in final position; the JS `answered` guard gates the
       advance. Only opacity fades in, so a fast tap right after answering lands
       on the button instead of being swallowed by a moving/inert entrance. */
    #quiz-intro .qs-bp-next { width:100%; margin-top:18px; padding:16px 28px; border:none; border-radius:100px; background:#1C1B19; color:#FFFFFF; font-family:'DM Sans',sans-serif; font-size:1.08rem; font-weight:700; letter-spacing:0.005em; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; opacity:0; pointer-events:auto; transition:opacity .16s ease, background .15s ease; }
    #quiz-intro .qs-bp-next:active { background:#3D3630; }
    #quiz-intro .qs-bipolar.is-answered .qs-bp-next { opacity:1; }
    /* iOS-native diag layout: one non-scrolling viewport with the Next button pinned in a safe
       footer. #quiz-intro is position:fixed/inset:0, so on iOS it sizes to the large (toolbar-
       collapsed) viewport; a Next button at the bottom of a scrolling flow then lands behind
       Safari's toolbar / in its tap-interception strip, and the first tap gets swallowed.
       Use 100svh (the small/toolbar-visible viewport), NOT 100dvh: dvh recomputes continuously
       as Safari's toolbar animates in/out on touch, and a CTA pinned to the bottom via
       margin-top:auto then bounces frame-by-frame with it (looks like the button vibrating).
       svh is static and equals the toolbar-visible height, so the CTA stays above the toolbar
       (taps register) and never jitters. */
    #quiz-intro:has(.qs-diag-step.is-active) { overflow:hidden; }
    #quiz-intro:has(.qs-diag-step.is-active) .qs-shell {
        height:100vh; height:100svh; min-height:0; overflow:hidden; align-items:stretch;
        padding-top:calc(env(safe-area-inset-top,0px) + 92px);
        padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px);
    }
    #quiz-intro .qs-diag-step.is-active { min-height:0; justify-content:flex-start; }
    #quiz-intro .qs-diag-step .qs-bipolar { flex:1 1 auto; min-height:0; }
    #quiz-intro .qs-diag-step .qs-bp-next { margin-top:auto; }
    @media (max-width:600px) {
        #quiz-intro .qs-diag-step { max-width:440px; }
        #quiz-intro .qs-diag-step .qs-progress { margin:0 auto 30px; }
        #quiz-intro .qs-diag-stem { font-size:1.34rem; margin:0 0 24px; }
        #quiz-intro .qs-bipolar { gap:20px; }
        #quiz-intro .qs-bp-card { min-height:108px; padding:14px 12px; }
        #quiz-intro .qs-bp-card span { font-size:1rem; }
        #quiz-intro .qs-bp-helper { font-size:0.82rem; padding:12px 14px; }
    }
    @media (max-width:380px) {
        #quiz-intro .qs-diag-stem { font-size:1.2rem; }
        #quiz-intro .qs-bp-card span { font-size:0.94rem; }
        #quiz-intro .qs-bp-or { padding:0 6px; }
        #quiz-intro .qs-bp-scale span { width:72px; font-size:0.68rem; }
    }
    @media (max-height:680px) {
        #quiz-intro .qs-diag-step .qs-progress { margin:0 auto 22px; }
        #quiz-intro .qs-diag-stem { font-size:1.24rem; margin:0 0 18px; }
        #quiz-intro .qs-bipolar { gap:16px; }
        #quiz-intro .qs-bp-card { min-height:98px; }
    }
    /* ─── Risk-free popup (timed / scroll-triggered) ───────────── */
    .q-popup-overlay {
        position: fixed; inset: 0; z-index: 9999;
        background: rgba(28,27,25,0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        display: flex; align-items: center; justify-content: center;
        padding: 20px;
        opacity: 0; visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .q-popup-overlay.is-open { opacity: 1; visibility: visible; }
    .q-popup {
        position: relative;
        background: var(--q-surface);
        border-radius: var(--q-radius-lg);
        box-shadow: 0 25px 70px rgba(28,27,25,0.28);
        overflow: hidden;
        width: 100%;
        max-width: 880px;
        max-height: calc(100vh - 40px);
        display: grid;
        grid-template-columns: 1fr;
        transform: translateY(20px) scale(0.96);
        transition: transform 0.35s var(--q-ease);
    }
    .q-popup-overlay.is-open .q-popup { transform: translateY(0) scale(1); }
    @media (min-width: 720px) {
        .q-popup { grid-template-columns: 1.15fr 1fr; }
    }
    .q-popup-close {
        position: absolute; top: 14px; right: 14px; z-index: 3;
        width: 36px; height: 36px; border-radius: 50%;
        background: rgba(255,255,255,0.94);
        border: 1px solid var(--q-hairline);
        color: var(--q-ink);
        font-size: 1.15rem; line-height: 1; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        transition: background 0.2s ease, transform 0.2s ease;
    }
    .q-popup-close:hover { background: #fff; transform: scale(1.05); }
    .q-popup-image-wrap {
        position: relative; overflow: hidden;
        background: var(--q-canvas-warm);
        order: 1;
    }
    .q-popup-image-wrap img {
        width: 100%; height: 100%; object-fit: cover; display: block;
    }
    @media (max-width: 719px) {
        .q-popup-image-wrap { aspect-ratio: 5 / 3; }
    }
    @media (min-width: 720px) {
        .q-popup-image-wrap { order: 2; }
    }
    .q-popup-body {
        padding: 40px 36px 36px;
        display: flex; flex-direction: column; gap: 16px;
        order: 2;
    }
    @media (max-width: 719px) {
        .q-popup-body { padding: 28px 24px 28px; gap: 14px; }
    }
    @media (min-width: 720px) {
        .q-popup-body { order: 1; padding: 44px 40px 40px; }
    }
    .q-popup-badge {
        display: inline-flex; align-items: center; gap: 8px;
        align-self: flex-start;
        background: var(--q-canvas-warm);
        border: 1px solid var(--q-hairline);
        border-radius: 999px;
        padding: 8px 14px 8px 8px;
        font-size: 0.84rem; font-weight: 600;
        color: var(--q-ink);
    }
    .q-popup-badge-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 22px; height: 22px; border-radius: 50%;
        background: var(--q-sage-deep); color: #fff;
        font-size: 0.7rem; font-weight: 800;
    }
    .q-popup h2 {
        font-family: 'Newsreader', Georgia, serif;
        font-size: clamp(1.5rem, 3vw, 1.95rem);
        font-weight: 400; line-height: 1.15;
        letter-spacing: -0.01em;
        color: var(--q-ink);
        margin: 0;
    }
    .q-popup h2 em { color: var(--q-sage-deep); font-style: italic; }
    .q-popup-text {
        font-size: 0.98rem;
        color: var(--q-ink-soft);
        line-height: 1.55; margin: 0;
        max-width: 42ch;
    }
    .q-popup-cta {
        background: var(--q-ink); color: var(--q-canvas);
        border: none;
        padding: 16px 28px;
        border-radius: 999px;
        font-family: 'Onest', sans-serif;
        font-size: 1rem; font-weight: 500;
        cursor: pointer;
        margin-top: 4px;
        transition: transform 0.25s var(--q-ease);
        box-shadow: 0 2px 0 rgba(255,255,255,0.06) inset, 0 10px 24px rgba(28,27,25,0.18);
    }
    .q-popup-cta:hover { transform: translateY(-1px); }
    .q-popup-proof {
        display: flex; align-items: center; gap: 12px;
        margin-top: 2px;
        font-size: 0.86rem; color: var(--q-ink-soft);
    }
    .q-popup-avatars { display: inline-flex; align-items: center; }
    .q-popup-avatars img {
        width: 30px; height: 30px; border-radius: 50%;
        border: 2px solid var(--q-surface);
        margin-left: -8px;
        object-fit: cover;
    }
    .q-popup-avatars img:first-child { margin-left: 0; }
    @media (prefers-reduced-motion: reduce) {
        .q-popup-overlay, .q-popup { transition: none; }
        .q-popup { transform: none; }
    }
    

        /* ==================== ONBOARDING V2 — unified with Quest landing brand ==================== */
        /* Palette: #FAF8F5 cream · #3D3630 deep-brown · #C9A66B gold · #8B7355 caramel · rgba(107,101,96,*) muted-warm */
        #onboarding-v2 { position:fixed; inset:0; background:#FAF8F5; z-index:300; display:none; align-items:flex-start; justify-content:center; padding:calc(env(safe-area-inset-top,0px) + 92px) 20px 48px; overflow-y:auto; overflow-x:hidden; }
        /* Dashboard step 26 is tall — pin to top always so hero is visible, rest scrolls below. */
        #onboarding-v2.dash-mode { align-items:flex-start; }
        #onboarding-v2 .obv2-dash-scrollhint { display:flex; flex-direction:column; align-items:center; gap:6px; margin:10px 0 -8px; font-family:'IBM Plex Mono','SF Mono','Menlo',monospace; font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:rgba(139,115,85,0.5); animation:obv2HintPulse 2.2s ease-in-out infinite; }
        #onboarding-v2 .obv2-dash-scrollhint svg { width:14px; height:14px; stroke:rgba(139,115,85,0.5); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
        @keyframes obv2HintPulse { 0%,100% { opacity:0.45; transform:translateY(0); } 50% { opacity:0.9; transform:translateY(3px); } }

        /* ---------- Mobile polish (<=400px phones) ---------- */
        @media (max-width: 400px) {
            #onboarding-v2 { padding:calc(env(safe-area-inset-top,0px) + 88px) 16px 36px; }
            #onboarding-v2 .obv2-title { font-size:1.42rem; line-height:1.22; margin:0 0 14px; letter-spacing:-0.01em; }
            #onboarding-v2 .obv2-sub { font-size:0.9rem; margin:0 0 26px; }
            #onboarding-v2 .obv2-pill { padding:12px 15px; font-size:0.95rem; min-height:62px; gap:12px; }
            #onboarding-v2 .obv2-pills.inline .obv2-pill { padding:18px 14px; font-size:0.96rem; min-height:58px; }
            #onboarding-v2 .obv2-cta { margin-top:26px; padding:16px 32px; font-size:0.98rem; min-width:0; max-width:320px; }
            #onboarding-v2 .obv2-back { top:calc(env(safe-area-inset-top,0px) + 14px); left:14px; width:36px; height:36px; }
            #onboarding-v2 .obv2-brand { top:calc(env(safe-area-inset-top,0px) + 18px); font-size:1.25rem; }
            #onboarding-v2 .obv2-progress { top:calc(env(safe-area-inset-top,0px) + 52px); width:44vw; }

            /* DOB — 3 selects tight on 320px */
            #onboarding-v2 .obv2-dob-wheel { height:200px; max-width:320px; gap:6px; }
            #onboarding-v2 .obv2-wheel-track { padding-top:78px; padding-bottom:78px; }
            #onboarding-v2 .obv2-wheel-item { font-size:1rem; }

            /* Check table — shrink check cells so long labels don't wrap to 3 lines */
            #onboarding-v2 .obv2-check-table { padding:12px 16px 8px; }
            #onboarding-v2 .obv2-check-row { padding:13px 0; font-size:0.88rem; }
            #onboarding-v2 .obv2-check-row .obv2-check-label { padding-right:10px; }
            #onboarding-v2 .obv2-check-row .obv2-check-cell { flex:0 0 48px; font-size:0.9rem; }
            #onboarding-v2 .obv2-check-header { font-size:0.66rem; padding:0 0 8px; }
            #onboarding-v2 .obv2-check-header span { flex:0 0 48px; }

            /* Sliders — smaller number on short screens */
            #onboarding-v2 .obv2-slider-val { font-size:2.1rem; margin:4px 0 14px; }

            /* Intensity box */
            #onboarding-v2 .obv2-intensity-box { padding:14px 16px; font-size:0.9rem; min-height:52px; }

            /* Graph */
            #onboarding-v2 .obv2-graph { height:200px; padding:14px; }

            /* Reveal hero — slightly smaller portrait */
            #onboarding-v2 .obv2-hero { padding:24px 18px 20px; }
            #onboarding-v2 .obv2-hero img { width:132px; height:166px; margin-bottom:14px; }
            #onboarding-v2 .obv2-hero-name { font-size:1.4rem; }
            #onboarding-v2 .obv2-block { padding:16px 18px; }
            #onboarding-v2 .obv2-profile-grid { gap:10px; }
            #onboarding-v2 .obv2-profile-cell { padding:10px 12px; }

            /* Price cards */
            #onboarding-v2 .obv2-price-cards { gap:10px; }
            #onboarding-v2 .obv2-price-card { padding:16px 10px; }
            #onboarding-v2 .obv2-price-card .obv2-price-amt { font-size:1.2rem; }

            /* Timeline + bell */
            #onboarding-v2 .obv2-bell { width:72px; height:72px; margin:6px 0 18px; }
            #onboarding-v2 .obv2-bell svg { width:30px; height:30px; }
            #onboarding-v2 .obv2-timeline-content h4 { font-size:0.92rem; }
            #onboarding-v2 .obv2-timeline-content p { font-size:0.82rem; }

            /* Phone mockup */
            #onboarding-v2 .obv2-mockup { width:200px; min-height:290px; padding:14px; }

            /* Reviews */
            #onboarding-v2 .obv2-review-card { padding:16px 18px; }
            #onboarding-v2 .obv2-review-text { font-size:0.9rem; }
        }

        /* Short phones (SE, iPhone mini) — reclaim vertical space */
        @media (max-height: 680px) {
            #onboarding-v2 { padding-top:calc(env(safe-area-inset-top,0px) + 88px); padding-bottom:28px; }
            #onboarding-v2 .obv2-title { margin:0 0 12px; }
            #onboarding-v2 .obv2-sub { margin:0 0 22px; }
            #onboarding-v2 .obv2-cta { margin-top:22px; }
            #onboarding-v2 .obv2-slider-val { font-size:2rem; margin:2px 0 12px; }
        }
        #onboarding-v2.active { display:flex; }
        #onboarding-v2 .obv2-step { width:100%; max-width:440px; display:none; flex-direction:column; align-items:center; text-align:center; animation:obv2fade .45s cubic-bezier(0.22,0.61,0.36,1); }
        #onboarding-v2 .obv2-step[data-step="14"] { max-width:880px; }
        #onboarding-v2 .obv2-step.active { display:flex; }
        @keyframes obv2fade { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
        /* "Here's how your companion works" bridge screens */
        #onboarding-v2 .obv2-bridge { justify-content:center; }
        #onboarding-v2 .obv2-bridge-inner { display:flex; flex-direction:column; align-items:center; width:100%; }
        #onboarding-v2 .obv2-bridge-media { width:100%; max-width:340px; aspect-ratio:1/1; border-radius:24px; overflow:hidden; box-shadow:0 8px 28px rgba(28,27,25,0.14); line-height:0; background:#ECE5DA; }
        #onboarding-v2 .obv2-bridge-media img { width:100%; height:100%; object-fit:cover; display:block; animation:obv2imgfade .35s ease both; }
        #onboarding-v2 .obv2-bridge-media.is-portrait { width:300px; max-width:300px; aspect-ratio:1/1; border-radius:0; box-shadow:none; background:none; }
        #onboarding-v2 .obv2-bridge-media.is-portrait img { object-fit:contain; }
        @keyframes obv2imgfade { from { opacity:0; } to { opacity:1; } }
        #onboarding-v2 .obv2-bridge-headline { font-family:'Lora', Georgia, serif; font-weight:600; font-size:1.62rem; line-height:1.26; letter-spacing:-0.01em; color:#2A2723; margin:26px 6px 0; max-width:360px; }
        #onboarding-v2 .obv2-bridge-cta { margin-top:30px; }

        /* Editorial chapter rule above every titled step */
        #onboarding-v2 .obv2-title { font-family:'Lora', Georgia, serif; font-size:1.7rem; font-weight:600; line-height:1.22; color:#3D3630; margin:0 0 16px; letter-spacing:-0.015em; }
        #onboarding-v2 .obv2-sub { font-size:0.95rem; color:rgba(107,101,96,0.8); margin:0 0 36px; line-height:1.55; font-weight:400; max-width:380px; }

        /* Pills — warm editorial cards, not filled-inversion */
        #onboarding-v2 .obv2-pills { display:flex; flex-direction:column; gap:10px; width:100%; margin-bottom:6px; }
        #onboarding-v2 .obv2-pill { padding:13px 16px; border:1.5px solid rgba(139,115,85,0.12); border-radius:15px; background:#FFFFFF; box-shadow:0 2px 8px rgba(60,54,48,0.05), 0 1px 2px rgba(60,54,48,0.045); font-family:inherit; font-size:0.98rem; font-weight:500; color:#3D3630; cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .14s ease; text-align:left; display:flex; align-items:center; gap:13px; min-height:64px; letter-spacing:-0.005em; opacity:0; animation:obv2pillIn .4s cubic-bezier(0.22,0.61,0.36,1) forwards; }
        #onboarding-v2 .obv2-step.active .obv2-pill:nth-child(1) { animation-delay:120ms; }
        #onboarding-v2 .obv2-step.active .obv2-pill:nth-child(2) { animation-delay:200ms; }
        #onboarding-v2 .obv2-step.active .obv2-pill:nth-child(3) { animation-delay:280ms; }
        #onboarding-v2 .obv2-step.active .obv2-pill:nth-child(4) { animation-delay:360ms; }
        #onboarding-v2 .obv2-step.active .obv2-pill:nth-child(5) { animation-delay:440ms; }
        #onboarding-v2 .obv2-step.active .obv2-pill:nth-child(6) { animation-delay:520ms; }
        #onboarding-v2 .obv2-step.active .obv2-pill:nth-child(7) { animation-delay:600ms; }
        #onboarding-v2 .obv2-step.active .obv2-pill:nth-child(8) { animation-delay:680ms; }
        #onboarding-v2 .obv2-step.active .obv2-pill:nth-child(9) { animation-delay:760ms; }
        #onboarding-v2 .obv2-pill-icon { width:22px; height:22px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
        #onboarding-v2 .obv2-pill-icon svg { width:100%; height:100%; }
        @keyframes obv2pillIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
        @media (hover: hover) and (pointer: fine) {
            #onboarding-v2 .obv2-pill:hover { border-color:rgba(201,166,107,0.42); transform:translateY(-1px); box-shadow:0 6px 18px rgba(60,54,48,0.08); }
        }
        #onboarding-v2 .obv2-pill.selected { border-color:#C9A66B; background:rgba(201,166,107,0.10); color:#3D3630; box-shadow:0 4px 16px rgba(201,166,107,0.20); font-weight:600; }
        /* Trailing radio/checkbox indicator on every pill (Liven-style); fills gold w/ check when selected */
        #onboarding-v2 .obv2-pill::after { content:''; margin-left:auto; flex-shrink:0; width:22px; height:22px; border-radius:50%; border:2px solid rgba(139,115,85,0.26); background-color:transparent; background-position:center; background-repeat:no-repeat; background-size:13px 13px; transition:border-color .18s ease, background-color .18s ease; }
        #onboarding-v2 .obv2-pills[data-multi="1"] .obv2-pill::after { border-radius:7px; }
        #onboarding-v2 .obv2-pill.selected::after { border-color:#C9A66B; background-color:#C9A66B; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
        #onboarding-v2 .obv2-pills.inline .obv2-pill::after,
        #onboarding-v2 .obv2-pills.image-grid .obv2-pill::after { display:none; }
        /* Mutex deselect: visible un-check when "None of the above" sweeps the others. */
        #onboarding-v2 .obv2-pill.obv2-pill-deselect { animation:obv2pillDeselect .26s cubic-bezier(0.22,0.61,0.36,1) both; }
        @keyframes obv2pillDeselect { 0% { transform:scale(1); opacity:1; } 35% { transform:scale(0.985); opacity:0.85; } 100% { transform:scale(1); opacity:1; } }
        #onboarding-v2 .obv2-pill-emoji { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; background:rgba(201,166,107,0.13); font-size:1.15rem; line-height:1; flex-shrink:0; transition:background .2s ease; }
        #onboarding-v2 .obv2-pill-emoji svg { width:22px; height:22px; stroke:#B68D4C; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
        #onboarding-v2 .obv2-pill.selected .obv2-pill-emoji { background:rgba(201,166,107,0.22); }
        #onboarding-v2 .obv2-pill.selected .obv2-pill-emoji svg { stroke:#9C7634; }

        /* Inline "Something else" text input — appears under the pill when selected */
        #onboarding-v2 .obv2-other-input { display:block; width:100%; box-sizing:border-box; padding:14px 18px 14px 22px; border:1px solid rgba(201,166,107,0.32); border-left:3px solid #C9A66B; border-radius:12px; background:linear-gradient(to right, rgba(201,166,107,0.10), rgba(255,255,255,0.85)); box-shadow:0 3px 14px rgba(201,166,107,0.12); font-family:inherit; font-size:0.98rem; font-weight:500; color:#3D3630; letter-spacing:-0.005em; outline:0; -webkit-appearance:none; appearance:none; margin-top:-2px; animation:obv2OtherIn .38s cubic-bezier(0.22,0.61,0.36,1) both; transition:border-color .2s ease, box-shadow .2s ease; }
        #onboarding-v2 .obv2-other-input[hidden] { display:none; }
        #onboarding-v2 .obv2-other-input::placeholder { color:rgba(60,54,48,0.36); font-weight:400; font-style:italic; }
        #onboarding-v2 .obv2-other-input:focus { border-color:#C9A66B; box-shadow:0 4px 18px rgba(201,166,107,0.22); }
        @keyframes obv2OtherIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

        /* Relate cards — Noom-style "do you relate to this?" yes/no beat */
        #onboarding-v2 .obv2-step-relate { justify-content:flex-start; }
        #onboarding-v2 .obv2-relate-prompt { font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(201,166,107,0.95); margin:0 0 16px; }
        #onboarding-v2 .obv2-relate-card { width:100%; background:rgba(255,255,255,0.72); border:1px solid rgba(139,115,85,0.14); border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(139,115,85,0.10); margin-bottom:24px; opacity:0; animation:obv2fadein .5s cubic-bezier(0.22,0.61,0.36,1) forwards; animation-delay:70ms; }
        #onboarding-v2 .obv2-relate-img { width:100%; aspect-ratio:3 / 2; object-fit:cover; display:block; background:rgba(201,166,107,0.06); }
        #onboarding-v2 .obv2-relate-statement { font-family:'Lora', Georgia, serif; font-size:1.42rem; line-height:1.32; font-weight:500; color:#3D3630; margin:0; padding:22px 22px 24px; letter-spacing:-0.01em; }
        #onboarding-v2 .obv2-relate-actions { display:flex; gap:12px; width:100%; opacity:0; animation:obv2fadein .5s ease forwards; animation-delay:180ms; }
        #onboarding-v2 .obv2-relate-btn { flex:1; padding:17px 0; border:1px solid rgba(139,115,85,0.2); border-radius:14px; background:rgba(255,255,255,0.82); font-family:inherit; font-size:1.02rem; font-weight:600; color:#3D3630; cursor:pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; min-height:56px; letter-spacing:-0.005em; }
        @media (hover: hover) and (pointer: fine) {
            #onboarding-v2 .obv2-relate-btn:hover { border-color:rgba(201,166,107,0.5); transform:translateY(-1px); box-shadow:0 4px 14px rgba(139,115,85,0.10); background:white; }
        }
        #onboarding-v2 .obv2-relate-btn.selected { border-color:rgba(201,166,107,0.6); border-width:1.5px; background:linear-gradient(to bottom, rgba(201,166,107,0.2), rgba(201,166,107,0.07)); box-shadow:0 4px 18px rgba(201,166,107,0.22); font-weight:700; }

        /* Relate-intro "Saved" separator — quick reassurance beat before the relate block */
        #onboarding-v2 .obv2-step-saved { justify-content:center; align-items:center; text-align:center; gap:0; min-height:70vh; }
        #onboarding-v2 .obv2-saved-orb { position:relative; width:78px; height:78px; margin-bottom:24px; }
        #onboarding-v2 .obv2-saved-orb svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
        #onboarding-v2 .obv2-saved-spin { opacity:1; transition:opacity .28s ease; }
        #onboarding-v2 .obv2-saved-track { fill:none; stroke:rgba(201,166,107,0.16); stroke-width:5; }
        #onboarding-v2 .obv2-saved-arc { fill:none; stroke:#C9A66B; stroke-width:5; stroke-linecap:round; stroke-dasharray:50 158; transform-origin:50% 50%; animation:qthSpin 1.05s linear infinite; }
        #onboarding-v2 .obv2-saved-checkmark { opacity:0; transform:scale(0.35); transform-origin:50% 50%; transition:opacity .25s ease, transform .5s cubic-bezier(.3,1.5,.5,1); }
        #onboarding-v2 .obv2-saved-checkmark-bg { fill:#5C9A6F; }
        #onboarding-v2 .obv2-saved-checkmark-tick { fill:none; stroke:#FFFFFF; stroke-width:5.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:42; stroke-dashoffset:42; }
        #onboarding-v2 .obv2-saved-title { font-family:'Lora', Georgia, serif; font-size:1.7rem; font-weight:600; color:#3D3630; margin:0; letter-spacing:-0.015em; opacity:0; }
        #onboarding-v2 .obv2-step-saved.obv2-saved-done .obv2-saved-spin { opacity:0; }
        #onboarding-v2 .obv2-step-saved.obv2-saved-done .obv2-saved-checkmark { opacity:1; transform:scale(1); }
        #onboarding-v2 .obv2-step-saved.obv2-saved-done .obv2-saved-checkmark-tick { animation:nsmlDraw .42s cubic-bezier(.4,0,.2,1) .14s forwards; }
        #onboarding-v2 .obv2-step-saved.obv2-saved-done .obv2-saved-title { animation:obv2fadein .5s ease forwards .1s; }

        /* Step 10b loading */
        #onboarding-v2 .obv2-loading-wrap { display:flex; flex-direction:column; align-items:center; gap:28px; margin:30px 0 10px; width:100%; }
        #onboarding-v2 .obv2-loading-circle svg { display:block; }
        #onboarding-v2 .obv2-loading-arc { transform-origin:40px 40px; animation:obv2arc 1.4s linear infinite; }
        @keyframes obv2arc { 0% { transform:rotate(-90deg); } 100% { transform:rotate(270deg); } }
        #onboarding-v2 .obv2-loading-circle.done .obv2-loading-arc { animation:none; stroke-dashoffset:0; transform:rotate(-90deg); transform-origin:40px 40px; transition:stroke-dashoffset .6s ease; }
        #onboarding-v2 .obv2-loading-rows { display:flex; flex-direction:column; gap:14px; width:100%; max-width:340px; }
        #onboarding-v2 .obv2-loading-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid rgba(139,115,85,0.12); border-radius:12px; background:rgba(255,255,255,0.6); font-size:0.95rem; color:rgba(60,54,48,0.55); transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease, opacity .35s ease; opacity:0.7; }
        #onboarding-v2 .obv2-loading-row.active { background:white; color:#3D3630; opacity:1; border-color:rgba(201,166,107,0.4); box-shadow:0 4px 14px rgba(201,166,107,0.12); }
        #onboarding-v2 .obv2-loading-row.done { background:linear-gradient(to right, rgba(201,166,107,0.14), rgba(201,166,107,0.04)); color:#3D3630; opacity:1; border-color:rgba(201,166,107,0.4); }
        #onboarding-v2 .obv2-loading-bullet { width:18px; height:18px; border-radius:50%; border:2px solid rgba(139,115,85,0.3); flex-shrink:0; position:relative; transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .25s ease; }
        #onboarding-v2 .obv2-loading-row.active .obv2-loading-bullet { border-color:#C9A66B; border-top-color:transparent; animation:obv2bullspin .9s linear infinite; }
        #onboarding-v2 .obv2-loading-row.done .obv2-loading-bullet { border-color:#C9A66B; background:#C9A66B; animation:none; }
        #onboarding-v2 .obv2-loading-row.done .obv2-loading-bullet::after { content:'✓'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:white; font-size:11px; font-weight:700; line-height:1; }
        @keyframes obv2bullspin { to { transform:rotate(360deg); } }
        #onboarding-v2 .obv2-loading-ready { font-family:'Lora',serif; font-size:1.4rem; font-weight:500; color:#3D3630; margin-top:4px; animation:obv2fadein .5s ease; }
        @keyframes obv2fadein { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

        /* Step 10c profile reveal */
        #onboarding-v2 .obv2-profile-wrap { display:flex; flex-direction:column; align-items:center; gap:18px; width:100%; margin:8px 0 4px; animation:obv2fadein .5s ease; }
        #onboarding-v2 .obv2-profile-avatar { width:120px; height:120px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg, rgba(201,166,107,0.18), rgba(201,166,107,0.06)); border:2px solid rgba(201,166,107,0.4); box-shadow:0 8px 28px rgba(201,166,107,0.22); display:flex; align-items:center; justify-content:center; position:relative; }
        #onboarding-v2 .obv2-profile-avatar img { width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .6s ease; }
        #onboarding-v2 .obv2-profile-avatar.loaded img { opacity:1; }
        #onboarding-v2 .obv2-profile-avatar.loading { animation:obv2avatarpulse 1.6s ease-in-out infinite; }
        #onboarding-v2 .obv2-profile-avatar .obv2-profile-avatar-spinner { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:36px; height:36px; border:3px solid rgba(201,166,107,0.25); border-top-color:#C9A66B; border-radius:50%; animation:obv2avatarspin .9s linear infinite; }
        #onboarding-v2 .obv2-profile-avatar.loaded .obv2-profile-avatar-spinner { display:none; }
        #onboarding-v2 .obv2-profile-avatar.fallback { animation:none; background:rgba(139,115,85,0.12); }
        #onboarding-v2 .obv2-profile-avatar.fallback .obv2-profile-avatar-spinner,
        #onboarding-v2 .obv2-profile-avatar.fallback img { display:none; }
        #onboarding-v2 .obv2-profile-avatar-initial { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:'Lora',Georgia,serif; font-size:3.4rem; color:#8B7355; font-weight:500; }
        @keyframes obv2avatarspin { to { transform:translate(-50%,-50%) rotate(360deg); } }
        @keyframes obv2avatarpulse { 0%,100% { box-shadow:0 8px 28px rgba(201,166,107,0.22); } 50% { box-shadow:0 8px 28px rgba(201,166,107,0.42); } }
        #onboarding-v2 .obv2-profile-name { font-family:'Lora',serif; font-weight:500; font-size:1.5rem; color:#3D3630; margin:0; text-align:center; letter-spacing:-0.01em; }
        #onboarding-v2 .obv2-profile-card { width:100%; max-width:360px; background:white; border:1px solid rgba(139,115,85,0.16); border-radius:18px; padding:8px 0; box-shadow:0 6px 26px rgba(139,115,85,0.10); overflow:hidden; }
        #onboarding-v2 .obv2-profile-header { font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#C9A66B; padding:14px 18px 10px; border-bottom:1px solid rgba(139,115,85,0.10); }
        #onboarding-v2 .obv2-profile-row { display:grid; grid-template-columns:24px 76px 1fr; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid rgba(139,115,85,0.08); }
        #onboarding-v2 .obv2-profile-row.is-empty { display:none; }
        #onboarding-v2 .obv2-profile-row:last-child { border-bottom:none; }
        #onboarding-v2 .obv2-profile-row-emoji { font-size:1.05rem; line-height:1; text-align:center; }
        #onboarding-v2 .obv2-profile-row-label { font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(60,54,48,0.55); }
        #onboarding-v2 .obv2-profile-row-value { font-size:0.92rem; font-weight:500; color:#3D3630; line-height:1.35; text-align:right; word-break:break-word; }
        #onboarding-v2 .obv2-profile-tagline { font-family:'Lora',serif; font-size:1rem; color:rgba(60,54,48,0.75); text-align:center; margin:6px 12px 0; line-height:1.4; }
        @media (max-width:380px) {
            #onboarding-v2 .obv2-profile-row { grid-template-columns:22px 66px 1fr; gap:8px; padding:12px 14px; }
            #onboarding-v2 .obv2-profile-row-value { font-size:0.88rem; }
            #onboarding-v2 .obv2-profile-row-label { font-size:0.68rem; }
        }
        #onboarding-v2 .obv2-pills.inline { flex-direction:row; gap:12px; width:100%; }
        #onboarding-v2 .obv2-pills.inline .obv2-pill { flex:1 1 0; padding:20px 16px; border-left-width:3px; border-radius:12px; justify-content:center; text-align:center; font-size:1rem; min-height:62px; }

        /* Dysregulation Summary step — nervous-system assessment result */
        #onboarding-v2 .obv2-step-diag { align-items:center; padding-top:0; gap:9px; max-width:440px; }
        #onboarding-v2 .obv2-dsum-eyebrow { font-size:0.62rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:rgba(60,54,48,0.48); text-align:center; margin:0; }

        /* hero gauge */
        #onboarding-v2 .obv2-dsum-hero { width:100%; display:flex; flex-direction:column; align-items:center; opacity:0; transform:translateY(18px); animation:obv2DsumRise .8s cubic-bezier(0.22,1,0.36,1) .05s forwards; }
        #onboarding-v2 .obv2-dsum-gaugewrap { position:relative; width:200px; max-width:72%; margin:0 auto; }
        #onboarding-v2 .obv2-dsum-gauge { width:100%; height:auto; display:block; overflow:visible; }
        #onboarding-v2 .obv2-dsum-track { fill:none; stroke:#ECE3D3; stroke-width:15; stroke-linecap:round; }
        #onboarding-v2 .obv2-dsum-arc { fill:none; stroke:url(#obv2DsumGrad); stroke-width:15; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.5s cubic-bezier(0.22,1,0.36,1); }
        #onboarding-v2 .obv2-dsum-gaugecenter { position:absolute; left:0; right:0; bottom:10px; text-align:center; }
        #onboarding-v2 .obv2-dsum-score { font-family:'Lora','Newsreader',Georgia,serif; font-weight:600; color:#A8432F; line-height:1; letter-spacing:-0.02em; }
        #onboarding-v2 .obv2-dsum-score #obv2-dsum-num { font-size:3.5rem; }
        #onboarding-v2 .obv2-dsum-score-out { font-size:1.1rem; color:rgba(168,67,47,0.5); font-weight:500; }
        #onboarding-v2 .obv2-dsum-score-label { font-size:0.6rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:rgba(60,54,48,0.5); margin-top:3px; }
        #onboarding-v2 .obv2-dsum-ends { width:248px; max-width:80%; display:flex; justify-content:space-between; font-size:0.56rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(60,54,48,0.38); margin-top:-2px; }
        #onboarding-v2 .obv2-dsum-chip { display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:7px 15px; border-radius:100px; background:#A8432F; color:#FCF8F0; box-shadow:0 5px 14px rgba(168,67,47,0.22); }
        #onboarding-v2 .obv2-dsum-chip.sev-elevated { background:#C77B5A; box-shadow:0 5px 14px rgba(199,123,90,0.24); }
        #onboarding-v2 .obv2-dsum-chip-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

        /* pattern card */
        #onboarding-v2 .obv2-dsum-card { width:100%; background:#FCF8F0; border:1px solid rgba(139,115,85,0.16); border-radius:18px; padding:13px 16px 13px; box-shadow:0 6px 22px rgba(80,60,40,0.05); opacity:0; transform:translateY(18px); animation:obv2DsumRise .8s cubic-bezier(0.22,1,0.36,1) .22s forwards; }
        #onboarding-v2 .obv2-dsum-card-eyebrow { font-size:0.58rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#B08A5A; margin:0; }
        #onboarding-v2 .obv2-dsum-pattern-name { font-family:'Lora','Newsreader',Georgia,serif; font-weight:600; font-size:1.35rem; line-height:1.15; color:#2A2620; letter-spacing:-0.015em; margin:3px 0 6px; }
        #onboarding-v2 .obv2-dsum-pattern-body { font-size:0.86rem; line-height:1.46; color:#4A3F38; margin:0; }
        #onboarding-v2 .obv2-dsum-survival { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:13px; border-top:1px solid rgba(139,115,85,0.14); }
        #onboarding-v2 .obv2-dsum-survival-label { font-size:0.58rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(60,54,48,0.5); }
        #onboarding-v2 .obv2-dsum-survival-value { font-family:'Lora','Newsreader',Georgia,serif; font-weight:600; font-size:0.96rem; color:#8C475A; letter-spacing:-0.01em; text-align:right; }

        /* "how you're wired" type card */
        #onboarding-v2 .obv2-dsum-traits { width:100%; background:#FCF8F0; border:1px solid rgba(139,115,85,0.16); border-radius:18px; padding:11px 16px 12px; box-shadow:0 6px 22px rgba(80,60,40,0.05); opacity:0; transform:translateY(18px); animation:obv2DsumRise .8s cubic-bezier(0.22,1,0.36,1) .34s forwards; }
        #onboarding-v2 .obv2-dsum-traits-eyebrow { font-size:0.58rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#B08A5A; margin:0 0 6px; }
        #onboarding-v2 .obv2-dsum-trait { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 0; border-top:1px solid rgba(139,115,85,0.14); }
        #onboarding-v2 .obv2-dsum-trait:last-child { padding-bottom:1px; }
        #onboarding-v2 .obv2-dsum-trait-label { font-size:0.58rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(60,54,48,0.5); }
        #onboarding-v2 .obv2-dsum-trait-value { font-family:'Lora','Newsreader',Georgia,serif; font-weight:600; font-size:0.96rem; color:#8C475A; letter-spacing:-0.01em; text-align:right; white-space:nowrap; }

        /* dimension bars */
        #onboarding-v2 .obv2-dsum-bars { width:100%; background:#FCF8F0; border:1px solid rgba(139,115,85,0.16); border-radius:18px; padding:13px 16px 14px; box-shadow:0 6px 22px rgba(80,60,40,0.05); display:flex; flex-direction:column; gap:10px; opacity:0; transform:translateY(18px); animation:obv2DsumRise .8s cubic-bezier(0.22,1,0.36,1) .46s forwards; }
        #onboarding-v2 .obv2-dsum-bar-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:5px; }
        #onboarding-v2 .obv2-dsum-bar-label { font-size:0.82rem; font-weight:600; color:#3D3630; }
        #onboarding-v2 .obv2-dsum-bar-tag { font-size:0.64rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#A8432F; white-space:nowrap; }
        #onboarding-v2 .obv2-dsum-bar-tag.lvl-elevated { color:#C77B5A; }
        #onboarding-v2 .obv2-dsum-bar-track { height:8px; border-radius:100px; background:#EFE7D8; overflow:hidden; }
        #onboarding-v2 .obv2-dsum-bar-fill { height:100%; width:0; border-radius:100px; background:linear-gradient(90deg, #C9A66B 0%, #C77B5A 58%, #A8432F 100%); transition:width 1.2s cubic-bezier(0.22,1,0.36,1); }

        /* reframe note */
        #onboarding-v2 .obv2-dsum-note { width:100%; font-size:0.68rem; line-height:1.45; color:#9A9182; text-align:center; margin:0; padding:0 8px; opacity:0; transform:translateY(18px); animation:obv2DsumRise .8s cubic-bezier(0.22,1,0.36,1) .6s forwards; }
        #onboarding-v2 .obv2-dsum-note b { color:#3D3630; font-weight:600; }
        #onboarding-v2 .obv2-dsum-note-star { color:#C77B5A; font-weight:700; margin-right:1px; }

        #onboarding-v2 .obv2-step-diag .obv2-cta { margin-top:4px; max-width:440px; width:100%; opacity:0; transform:translateY(18px); animation:obv2DsumRise .8s cubic-bezier(0.22,1,0.36,1) .72s forwards; }

        @keyframes obv2DsumRise { to { opacity:1; transform:none; } }
        @media (prefers-reduced-motion: reduce) {
            #onboarding-v2 .obv2-dsum-hero, #onboarding-v2 .obv2-dsum-card, #onboarding-v2 .obv2-dsum-traits, #onboarding-v2 .obv2-dsum-bars, #onboarding-v2 .obv2-dsum-note, #onboarding-v2 .obv2-step-diag .obv2-cta, #onboarding-v2 .obv2-credw-tile { animation:none; opacity:1; transform:none; }
            #onboarding-v2 .obv2-dsum-arc { transition:none; }
        }

        /* Plan graph step — Liven-style "your dip drops by [date]" forecast */
        #onboarding-v2 .obv2-step-plan { align-items:center; padding-top:0; gap:14px; max-width:460px; }
        #onboarding-v2 .obv2-plan-chart { width:100%; max-width:460px; height:200px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:24px 12px 0; margin:0 auto; position:relative; }
        #onboarding-v2 .obv2-plan-col { position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
        #onboarding-v2 .obv2-plan-bar { width:100%; max-width:48px; border-radius:10px 10px 4px 4px; height:4%; transform-origin:bottom; transition:height 1.2s cubic-bezier(0.22,1,0.36,1); }
        #onboarding-v2 .obv2-step-plan.active .obv2-plan-col:nth-child(1) .obv2-plan-bar { height:95%; }
        #onboarding-v2 .obv2-step-plan.active .obv2-plan-col:nth-child(2) .obv2-plan-bar { height:74%; }
        #onboarding-v2 .obv2-step-plan.active .obv2-plan-col:nth-child(3) .obv2-plan-bar { height:82%; }
        #onboarding-v2 .obv2-step-plan.active .obv2-plan-col:nth-child(4) .obv2-plan-bar { height:42%; }
        #onboarding-v2 .obv2-step-plan.active .obv2-plan-col:nth-child(5) .obv2-plan-bar { height:14%; }
        #onboarding-v2 .obv2-plan-col:nth-child(1) .obv2-plan-bar { background:#B8503A; }
        #onboarding-v2 .obv2-plan-col:nth-child(2) .obv2-plan-bar { background:#D77B5A; }
        #onboarding-v2 .obv2-plan-col:nth-child(3) .obv2-plan-bar { background:#E2A669; }
        #onboarding-v2 .obv2-plan-col:nth-child(4) .obv2-plan-bar { background:#C9B978; }
        #onboarding-v2 .obv2-plan-col:nth-child(5) .obv2-plan-bar { background:#7BA561; }
        #onboarding-v2 .obv2-step-plan.active .obv2-plan-col:nth-child(2) .obv2-plan-bar { transition-delay:0.08s; }
        #onboarding-v2 .obv2-step-plan.active .obv2-plan-col:nth-child(3) .obv2-plan-bar { transition-delay:0.16s; }
        #onboarding-v2 .obv2-step-plan.active .obv2-plan-col:nth-child(4) .obv2-plan-bar { transition-delay:0.24s; }
        #onboarding-v2 .obv2-step-plan.active .obv2-plan-col:nth-child(5) .obv2-plan-bar { transition-delay:0.32s; }
        #onboarding-v2 .obv2-plan-goal-pill { position:absolute; bottom:calc(14% + 8px); left:50%; transform:translateX(-50%); background:#3D3630; color:#fff; font-size:0.66rem; font-weight:700; letter-spacing:0.08em; padding:4px 11px; border-radius:100px; text-transform:uppercase; box-shadow:0 4px 12px rgba(28,27,25,0.22); white-space:nowrap; display:flex; align-items:center; gap:5px; opacity:0; transition:opacity 0.5s ease 0.9s; }
        #onboarding-v2 .obv2-step-plan.active .obv2-plan-goal-pill { opacity:1; }
        #onboarding-v2 .obv2-plan-goal-pill::before { content:"✦"; font-size:0.72rem; color:#C9A66B; letter-spacing:0; }
        #onboarding-v2 .obv2-plan-xlabels { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:8px 12px 0; width:100%; max-width:460px; margin:0 auto; }
        #onboarding-v2 .obv2-plan-xlabels span { font-size:0.66rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(60,54,48,0.55); text-align:center; }
        #onboarding-v2 .obv2-plan-title { font-family:'Lora','Newsreader',Georgia,serif; font-weight:500; font-size:1.4rem; line-height:1.22; color:#3D3630; text-align:center; max-width:420px; margin:8px auto 0; letter-spacing:-0.01em; }
        #onboarding-v2 .obv2-plan-sub { font-size:0.95rem; line-height:1.5; color:rgba(60,54,48,0.78); text-align:center; max-width:400px; margin:6px auto 0; }
        #onboarding-v2 .obv2-plan-fine { font-size:0.68rem; line-height:1.45; color:rgba(107,101,96,0.65); text-align:center; max-width:380px; margin:8px auto 4px; font-style:italic; }
        #onboarding-v2 .obv2-step-plan .obv2-cta { margin-top:8px; max-width:460px; width:100%; }

        /* Creating-your-plan step — 3 progress bars, popup gates, slide-in reviews */
        #onboarding-v2 .obv2-step-creating { align-items:center; padding-top:0; gap:13px; max-width:460px; }
        #onboarding-v2 .obv2-creating-title { font-family:'Lora','Newsreader',Georgia,serif; font-weight:500; font-size:1.5rem; line-height:1.2; color:#3D3630; text-align:center; margin:0 0 2px; letter-spacing:-0.01em; }
        #onboarding-v2 .obv2-creating-sub { font-size:0.9rem; line-height:1.45; color:rgba(60,54,48,0.7); text-align:center; max-width:330px; margin:0 auto 2px; }
        #onboarding-v2 .obv2-creating-bars { width:100%; max-width:460px; display:flex; flex-direction:column; gap:10px; }
        #onboarding-v2 .obv2-creating-bar-row { display:flex; flex-direction:column; gap:6px; }
        #onboarding-v2 .obv2-creating-bar-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
        #onboarding-v2 .obv2-creating-bar-label { flex:1; min-width:0; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.9rem; font-weight:500; color:#3D3630; letter-spacing:-0.005em; }
        #onboarding-v2 .obv2-creating-bar-pct { font-size:0.78rem; font-weight:700; color:rgba(60,54,48,0.55); letter-spacing:0.02em; font-variant-numeric:tabular-nums; }
        #onboarding-v2 .obv2-creating-bar-track { height:8px; border-radius:100px; background:rgba(139,115,85,0.14); overflow:hidden; position:relative; }
        #onboarding-v2 .obv2-creating-bar-fill { height:100%; width:0%; background:linear-gradient(90deg, #C9A66B 0%, #D77B5A 100%); border-radius:100px; transition:width 0.6s ease-out; }
        #onboarding-v2 .obv2-creating-bar-row.done .obv2-creating-bar-fill { background:linear-gradient(90deg, #C9A66B 0%, #7BA561 100%); }
        /* Pre-paywall "Analyzing your responses" loader: waveform graphic + single bar */
        #onboarding-v2 .obv2-step-analyzing { justify-content:center; }
        #onboarding-v2 .obv2-analyzing-wave { display:flex; align-items:flex-end; justify-content:center; gap:5px; height:60px; margin:4px auto 8px; }
        #onboarding-v2 .obv2-analyzing-wave i { width:6px; height:14px; border-radius:3px; background:linear-gradient(180deg, #C9A66B 0%, #D77B5A 100%); animation:obv2Wave 1.1s ease-in-out infinite; }
        #onboarding-v2 .obv2-analyzing-wave i:nth-child(1){animation-delay:0s}
        #onboarding-v2 .obv2-analyzing-wave i:nth-child(2){animation-delay:.12s}
        #onboarding-v2 .obv2-analyzing-wave i:nth-child(3){animation-delay:.24s}
        #onboarding-v2 .obv2-analyzing-wave i:nth-child(4){animation-delay:.36s}
        #onboarding-v2 .obv2-analyzing-wave i:nth-child(5){animation-delay:.48s}
        #onboarding-v2 .obv2-analyzing-wave i:nth-child(6){animation-delay:.36s}
        #onboarding-v2 .obv2-analyzing-wave i:nth-child(7){animation-delay:.24s}
        #onboarding-v2 .obv2-analyzing-wave i:nth-child(8){animation-delay:.12s}
        #onboarding-v2 .obv2-analyzing-wave i:nth-child(9){animation-delay:0s}
        @keyframes obv2Wave { 0%,100%{height:14px;opacity:.45} 50%{height:52px;opacity:1} }
        #onboarding-v2 .obv2-analyzing-bar { width:100%; max-width:460px; margin:6px auto 0; }
        #onboarding-v2 .obv2-analyzing-meta { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px; }
        #onboarding-v2 .obv2-analyzing-status { font-size:0.9rem; font-weight:500; color:#3D3630; letter-spacing:-0.005em; transition:opacity .25s ease; }
        @media (prefers-reduced-motion: reduce) { #onboarding-v2 .obv2-analyzing-wave i { animation:none; height:32px; } }
        #onboarding-v2 .obv2-creating-reviews { width:100%; max-width:460px; display:grid; }
        #onboarding-v2 .obv2-creating-review { grid-area:1 / 1; background:#fff; border:1px solid rgba(139,115,85,0.14); border-radius:14px; padding:12px 14px; box-shadow:0 2px 8px rgba(28,27,25,0.06); opacity:0; transform:translateY(8px); transition:opacity 0.5s ease, transform 0.5s ease; text-align:left; pointer-events:none; }
        #onboarding-v2 .obv2-creating-review.is-shown { opacity:1; transform:translateY(0); pointer-events:auto; }
        #onboarding-v2 .obv2-creating-review-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
        #onboarding-v2 .obv2-creating-review-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; background:rgba(139,115,85,0.1); }
        #onboarding-v2 .obv2-creating-review-name { font-size:0.86rem; font-weight:600; color:#3D3630; flex:1; }
        #onboarding-v2 .obv2-creating-review-stars { color:#C9A66B; font-size:0.78rem; letter-spacing:0.05em; }
        #onboarding-v2 .obv2-creating-review-text { font-size:0.82rem; line-height:1.45; color:rgba(60,54,48,0.78); }

        /* Combined loader + social proof (ns_creating) — loader is the hero up top,
           social proof is calm support beneath it. */
        #onboarding-v2 .obv2-step-creating-social { justify-content:center; gap:12px; padding-top:0; min-height:calc(100dvh - env(safe-area-inset-top,0px) - 150px); }
        #onboarding-v2 .obv2-creating-social-block { width:100%; max-width:460px; margin:0 auto; }
        /* only one progress indicator on this screen: hide the top step-nav bar */
        #onboarding-v2:has(.obv2-step-creating-social.active) .obv2-progress { display:none !important; }
        /* loader hero: serif title + status + thick bar with moving sheen */
        #onboarding-v2 .obv2-creating-hero { width:100%; margin:0 0 clamp(22px, 3.6vh, 32px); }
        #onboarding-v2 .obv2-creating-hero-title { font-family:'Lora','Newsreader',Georgia,serif; font-weight:500; font-size:clamp(1.4rem, 5.6vw, 1.7rem); line-height:1.22; color:#3D3630; letter-spacing:-0.01em; text-align:center; margin:0 0 clamp(16px, 2.6vh, 22px); }
        #onboarding-v2 .obv2-creating-hero .obv2-analyzing-meta { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; }
        #onboarding-v2 .obv2-creating-hero .obv2-analyzing-status { font-size:0.92rem; font-weight:600; color:#3D3630; letter-spacing:-0.005em; transition:opacity .25s ease; }
        #onboarding-v2 .obv2-creating-hero .obv2-creating-bar-pct { font-size:0.85rem; font-weight:700; color:#B07A3F; letter-spacing:0.02em; font-variant-numeric:tabular-nums; }
        #onboarding-v2 .obv2-creating-hero .obv2-creating-bar-track { height:12px; border-radius:100px; background:rgba(139,115,85,0.16); overflow:hidden; position:relative; box-shadow:inset 0 1px 2px rgba(28,27,25,0.07); }
        #onboarding-v2 .obv2-creating-hero .obv2-creating-bar-fill { height:100%; width:0%; background:linear-gradient(90deg, #C9A66B 0%, #D77B5A 100%); border-radius:100px; transition:width 0.6s ease-out; position:relative; overflow:hidden; }
        #onboarding-v2 .obv2-creating-hero .obv2-creating-bar-fill::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); transform:translateX(-100%); animation:obv2BarSheen 1.9s ease-in-out infinite; }
        /* reviews drop in one at a time, synced to the progress bar */
        #onboarding-v2 .obv2-creating-social-block .obv2-review-card { margin-bottom:12px; opacity:0; transform:translateY(16px); transition:opacity 0.55s cubic-bezier(0.22,0.61,0.36,1), transform 0.55s cubic-bezier(0.22,0.61,0.36,1); }
        #onboarding-v2 .obv2-creating-social-block .obv2-review-card.is-in { opacity:1; transform:translateY(0); }
        #onboarding-v2 .obv2-creating-social-block .obv2-review-card:last-child { margin-bottom:0; }
        @keyframes obv2BarSheen { 0% { transform:translateX(-100%); } 55%,100% { transform:translateX(100%); } }
        @media (prefers-reduced-motion: reduce) {
            #onboarding-v2 .obv2-creating-hero .obv2-creating-bar-fill::after { animation:none; }
            #onboarding-v2 .obv2-creating-social-block .obv2-review-card { opacity:1; transform:none; transition:none; }
        }
        /* When the bar lands at 100% it flips to the calm green resolve. */
        #onboarding-v2 .obv2-creating-hero.is-done .obv2-creating-bar-fill { background:linear-gradient(90deg, #C9A66B 0%, #7BA561 100%); }
        #onboarding-v2 .obv2-creating-hero.is-done .obv2-creating-bar-fill::after { animation:none; opacity:0; }
        #onboarding-v2 .obv2-creating-hero.is-done .obv2-analyzing-status { color:#5E8049; }
        #onboarding-v2 .obv2-creating-hero.is-done .obv2-creating-bar-pct { color:#5E8049; }

        /* ---- recs_loading: cinematic "tailoring your plan" beat before the two add-ons ---- */
        /* recs_loading hides the topbar, so drop the dead top padding and let the
           content center in the true available height. */
        #onboarding-v2:has(.obv2-step-recsload.active) { padding-top:calc(env(safe-area-inset-top,0px) + 16px); padding-bottom:24px; }
        #onboarding-v2 .obv2-step-recsload { position:relative; align-items:center; justify-content:center; padding-top:0; gap:0; max-width:480px; min-height:calc(100dvh - env(safe-area-inset-top,0px) - 56px); text-align:center; }
        #onboarding-v2 .obv2-recsload-block { width:100%; max-width:420px; }
        #onboarding-v2 .obv2-recsload-title { font-family:'Lora','Newsreader',Georgia,serif; font-weight:500; font-size:1.62rem; line-height:1.24; color:#3D3630; letter-spacing:-0.014em; margin:0 0 8px; }
        #onboarding-v2 .obv2-recsload-sub { font-size:0.96rem; line-height:1.5; color:rgba(60,54,48,0.7); margin:0 auto 28px; max-width:30ch; }
        #onboarding-v2 .obv2-step-recsload .obv2-creating-hero { margin:0; }
        #onboarding-v2 .obv2-step-recsload .obv2-analyzing-meta { justify-content:flex-end; }
        /* Scan checklist — each line checks off as the bar fills, reusing the green check from the add-on cards. */
        /* width:max-content keeps the group centered under the title while the
           rows stay left-aligned with each other (no full-bleed left hug). */
        #onboarding-v2 .obv2-recsload-checks { list-style:none; margin:0 auto 26px; padding:0; width:max-content; max-width:100%; display:flex; flex-direction:column; gap:14px; text-align:left; }
        #onboarding-v2 .obv2-recsload-check { display:flex; align-items:flex-start; gap:12px; opacity:0.42; transition:opacity .35s ease; }
        #onboarding-v2 .obv2-recsload-check.is-active { opacity:0.85; }
        #onboarding-v2 .obv2-recsload-check.is-done { opacity:1; }
        #onboarding-v2 .obv2-recsload-check-ic { flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1.5px solid rgba(139,115,85,0.3); display:flex; align-items:center; justify-content:center; background:transparent; transition:background .3s ease, border-color .3s ease; }
        #onboarding-v2 .obv2-recsload-check-ic svg { width:14px; height:14px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(0.5); transition:opacity .25s ease, transform .25s cubic-bezier(0.22,1,0.36,1); }
        #onboarding-v2 .obv2-recsload-check.is-active .obv2-recsload-check-ic { border-color:#C9A66B; animation:obv2RecsPulse 1.1s ease-in-out infinite; }
        #onboarding-v2 .obv2-recsload-check.is-done .obv2-recsload-check-ic { background:#7BA561; border-color:#7BA561; animation:none; }
        #onboarding-v2 .obv2-recsload-check.is-done .obv2-recsload-check-ic svg { opacity:1; transform:scale(1); }
        #onboarding-v2 .obv2-recsload-check-label { font-size:0.96rem; font-weight:500; color:#3D3630; letter-spacing:-0.005em; line-height:24px; }
        /* Bar matches the checklist column width so the whole beat reads as one centered block. */
        #onboarding-v2 .obv2-step-recsload .obv2-creating-hero { max-width:320px; margin-left:auto; margin-right:auto; }
        @keyframes obv2RecsPulse { 0%,100% { box-shadow:0 0 0 0 rgba(201,166,107,0); } 50% { box-shadow:0 0 0 4px rgba(201,166,107,0.16); } }
        @media (prefers-reduced-motion: reduce) {
            #onboarding-v2 .obv2-recsload-check.is-active .obv2-recsload-check-ic { animation:none; }
        }

        /* Popup modal — locks user until they answer */
        #onboarding-v2 .obv2-creating-popup-overlay { position:fixed; inset:0; background:rgba(28,22,20,0.55); display:none; align-items:center; justify-content:center; z-index:1000; padding:24px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:obv2PopupFade 0.25s ease; }
        #onboarding-v2 .obv2-creating-popup-overlay.is-open { display:flex; }
        @keyframes obv2PopupFade { from { opacity:0; } to { opacity:1; } }
        #onboarding-v2 .obv2-creating-popup-card { background:#fff; border-radius:18px; padding:22px 22px 18px; max-width:340px; width:100%; box-shadow:0 18px 50px rgba(28,22,20,0.32); animation:obv2PopupPop 0.32s cubic-bezier(0.22,1,0.36,1); }
        @keyframes obv2PopupPop { from { transform:translateY(12px) scale(0.96); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
        #onboarding-v2 .obv2-creating-popup-eyebrow { font-size:0.68rem; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color:#C9A66B; text-align:center; margin:0 0 10px; }
        #onboarding-v2 .obv2-creating-popup-question { font-family:'Lora','Newsreader',Georgia,serif; font-weight:500; font-size:1.18rem; line-height:1.28; color:#3D3630; text-align:center; margin:0 0 18px; letter-spacing:-0.01em; }
        #onboarding-v2 .obv2-creating-popup-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
        #onboarding-v2 .obv2-creating-popup-btn { padding:14px 12px; border-radius:12px; border:1px solid rgba(139,115,85,0.22); background:#fff; font-size:0.98rem; font-weight:600; color:#3D3630; cursor:pointer; transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; }
        #onboarding-v2 .obv2-creating-popup-btn:active { transform:scale(0.97); }
        #onboarding-v2 .obv2-creating-popup-btn.yes { background:#3D3630; color:#fff; border-color:#3D3630; }
        #onboarding-v2 .obv2-creating-popup-btn.yes:hover { background:#1C1B19; }

        #onboarding-v2 .obv2-step-creating .obv2-cta { margin-top:6px; max-width:460px; width:100%; }
        #onboarding-v2 .obv2-step-creating .obv2-cta:disabled { opacity:0.5; cursor:not-allowed; }

        /* ---- Dramatic reveal beats: full-screen cinematic text moments before the plan graph ---- */
        #onboarding-v2:has(.obv2-step-beat.active) .obv2-topbar-bg,
        #onboarding-v2:has(.obv2-step-beat.active) .obv2-back,
        #onboarding-v2:has(.obv2-step-beat.active) .obv2-brand,
        #onboarding-v2:has(.obv2-step-beat.active) .obv2-progress { display:none !important; }
        #onboarding-v2:has(.obv2-step-beat.active) {
            background-color:#FBF6EE;
            background-image:
                radial-gradient(120% 75% at 50% 12%, rgba(201,166,107,0.14) 0%, rgba(201,166,107,0) 55%),
                linear-gradient(168deg, #FDFAF4 0%, #F6EFE3 100%);
            padding:0;
        }
        #onboarding-v2 .obv2-step.obv2-step-beat { padding:0; margin:0; width:100%; max-width:none; min-height:100svh; align-items:stretch; }
        #onboarding-v2 .obv2-beat-inner {
            flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
            min-height:100svh; box-sizing:border-box; text-align:center;
            padding:calc(env(safe-area-inset-top,0px) + 28px) clamp(26px,8vw,40px) calc(env(safe-area-inset-bottom,0px) + 28px);
        }
        #onboarding-v2 .obv2-beat-rule {
            width:34px; height:2px; border-radius:2px; background:linear-gradient(90deg,#C9A66B,#C77B5A);
            margin:0 auto 26px; opacity:0; transform:scaleX(0.3);
            transition:opacity .9s ease, transform 1s cubic-bezier(0.22,0.61,0.36,1);
        }
        #onboarding-v2 .obv2-beat-line {
            font-family:'Lora','Newsreader',Georgia,serif; font-weight:500;
            font-size:clamp(2rem, 8.5vw, 2.7rem); line-height:1.22; letter-spacing:-0.02em;
            color:#3A2A2E; margin:0; max-width:15ch;
            opacity:0; transform:translateY(18px);
            transition:opacity 1s cubic-bezier(0.22,0.61,0.36,1), transform 1.05s cubic-bezier(0.22,0.61,0.36,1);
        }
        #onboarding-v2 .obv2-beat-accent { color:#B07A3F; font-weight:600; }
        #onboarding-v2 .obv2-step-beat.beat-in .obv2-beat-rule { opacity:0.9; transform:scaleX(1); }
        #onboarding-v2 .obv2-step-beat.beat-in .obv2-beat-line { opacity:1; transform:translateY(0); }
        @media (prefers-reduced-motion: reduce) {
            #onboarding-v2 .obv2-beat-rule, #onboarding-v2 .obv2-beat-line { transition:none; opacity:1; transform:none; }
        }

        /* ---- Step 10bb: personalized line-chart reveal ---- */
        #onboarding-v2 .obv2-step-levelchart { position:relative; align-items:center; justify-content:flex-start; padding-top:0; gap:0; max-width:480px; text-align:center; }

        /* Phase 1: the opening line, absolutely centered so it owns the frame alone */
        #onboarding-v2 .obv2-levelchart-intro { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 26px; opacity:0; pointer-events:none; transition:opacity 0.7s cubic-bezier(0.22,0.61,0.36,1); }
        #onboarding-v2 .obv2-step-levelchart.intro-in .obv2-levelchart-intro { opacity:1; }
        #onboarding-v2 .obv2-step-levelchart.is-revealed .obv2-levelchart-intro { opacity:0; }
        #onboarding-v2 .obv2-levelchart-intro-line { font-family:'Lora','Newsreader',Georgia,serif; font-weight:500; font-size:1.78rem; line-height:1.32; letter-spacing:-0.015em; color:#3D3630; margin:0; max-width:17ch; transform:translateY(12px); transition:transform 0.8s cubic-bezier(0.22,0.61,0.36,1); will-change:opacity,transform; }
        #onboarding-v2 .obv2-step-levelchart.intro-in .obv2-levelchart-intro-line { transform:translateY(0); }

        /* Phase 2: the chart block, hidden until the line has had its moment */
        #onboarding-v2 .obv2-levelchart-reveal { width:100%; display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,0.61,0.36,1); }
        #onboarding-v2 .obv2-step-levelchart.is-revealed .obv2-levelchart-reveal { opacity:1; transform:translateY(0); pointer-events:auto; }

        #onboarding-v2 .obv2-levelchart-cap { font-size:0.74rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:rgba(60,54,48,0.55); margin:0 0 2px; }
        #onboarding-v2 .obv2-levelchart-wrap { position:relative; width:100%; max-width:440px; margin:6px auto 4px; padding:0 4px; }
        #onboarding-v2 .obv2-levelchart-svg { width:100%; height:auto; display:block; overflow:visible; }
        #onboarding-v2 #obv2-levelchart-line { stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 1.6s cubic-bezier(0.22,0.61,0.36,1); }
        #onboarding-v2 .obv2-step-levelchart.is-revealed #obv2-levelchart-line { stroke-dashoffset:0; }
        #onboarding-v2 #obv2-levelchart-fill { transition:opacity 1.2s ease 0.6s; }
        #onboarding-v2 .obv2-step-levelchart.is-revealed #obv2-levelchart-fill { opacity:1; }
        #onboarding-v2 #obv2-levelchart-dot-end { transition:opacity 0.4s ease 1.6s; }
        #onboarding-v2 .obv2-step-levelchart.is-revealed #obv2-levelchart-dot-end { opacity:1; }
        #onboarding-v2 .obv2-levelchart-tip { position:absolute; padding:6px 12px; border-radius:10px; font-size:0.78rem; font-weight:600; letter-spacing:0.01em; white-space:nowrap; box-shadow:0 4px 14px rgba(28,27,25,0.10); opacity:0; transform:translateY(-4px); transition:opacity 0.4s ease, transform 0.4s ease; }
        #onboarding-v2 .obv2-step-levelchart.is-revealed .obv2-levelchart-tip { opacity:1; transform:translateY(0); }
        #onboarding-v2 .obv2-levelchart-tip-today { left:4%; bottom:28%; background:#D66349; color:#fff; transition-delay:0.2s; }
        #onboarding-v2 .obv2-levelchart-tip-today::after { content:""; position:absolute; left:14px; bottom:-5px; width:10px; height:10px; background:#D66349; transform:rotate(45deg); }
        #onboarding-v2 .obv2-levelchart-tip-after { right:2%; top:0; background:#6E8F5C; color:#fff; transition-delay:1.7s; }
        #onboarding-v2 .obv2-levelchart-tip-after::after { content:""; position:absolute; right:14px; bottom:-5px; width:10px; height:10px; background:#6E8F5C; transform:rotate(45deg); }
        #onboarding-v2 .obv2-levelchart-xlabels { display:flex; justify-content:space-between; padding:8px 28px 0; font-size:0.72rem; color:rgba(60,54,48,0.55); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; width:100%; max-width:440px; margin:0 auto; box-sizing:border-box; }
        #onboarding-v2 .obv2-levelchart-headline { font-family:'Lora','Newsreader',Georgia,serif; font-weight:500; font-size:1.5rem; line-height:1.26; color:#1C1B19; letter-spacing:-0.014em; margin:16px auto 4px; text-align:center; max-width:380px; }
        #onboarding-v2 .obv2-levelchart-headline .obv2-levelchart-accent { color:#5E8049; font-weight:600; }
        #onboarding-v2 .obv2-levelchart-fine { font-size:0.78rem; color:rgba(107,101,96,0.68); margin:0 auto 6px; max-width:380px; line-height:1.5; }
        #onboarding-v2 .obv2-step-levelchart .obv2-cta { margin-top:6px; max-width:460px; width:100%; }
        @media (max-width:420px) {
            #onboarding-v2 .obv2-levelchart-intro-line { font-size:1.52rem; max-width:16ch; }
            #onboarding-v2 .obv2-levelchart-headline { font-size:1.3rem; max-width:320px; }
            #onboarding-v2 .obv2-levelchart-tip { font-size:0.72rem; padding:5px 10px; }
        }

        /* ---- Step 10bc: Scratch-to-reveal discount ---- */
        #onboarding-v2 .obv2-step-scratch { align-items:center; padding-top:0; gap:8px; max-width:460px; text-align:center; }
        #onboarding-v2 .obv2-scratch-pill { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; background:#FFFFFF; box-shadow:0 2px 10px rgba(28,27,25,0.06); border:1px solid rgba(28,27,25,0.04); color:#3D3630; font-size:0.92rem; font-weight:600; letter-spacing:-0.005em; margin:0 auto 4px; }
        #onboarding-v2 .obv2-scratch-pill-star { color:#5E8049; font-size:1rem; }
        #onboarding-v2 .obv2-scratch-title { font-family:'Lora','Newsreader',Georgia,serif; font-weight:500; font-size:1.6rem; line-height:1.22; color:#1C1B19; letter-spacing:-0.012em; margin:6px auto 4px; max-width:380px; }
        #onboarding-v2 .obv2-scratch-accent { color:#5E8049; font-weight:600; }
        #onboarding-v2 .obv2-scratch-sub { font-size:0.95rem; color:rgba(60,54,48,0.7); line-height:1.45; margin:0 auto 18px; max-width:340px; }
        #onboarding-v2 .obv2-scratch-card { position:relative; width:100%; max-width:300px; aspect-ratio:1/1; margin:0 auto 22px; border-radius:24px; overflow:hidden; box-shadow:0 8px 28px rgba(232,144,112,0.22); background:linear-gradient(160deg,#FFE2C7 0%,#F5B57B 100%); user-select:none; -webkit-user-select:none; touch-action:none; }
        #onboarding-v2 .obv2-scratch-prize { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#7A4318; text-align:center; padding:18px; }
        #onboarding-v2 .obv2-scratch-prize-eyebrow { font-size:0.72rem; font-weight:700; letter-spacing:0.18em; color:rgba(122,67,24,0.7); }
        #onboarding-v2 .obv2-scratch-prize-amount { font-family:'Lora',Georgia,serif; font-weight:700; font-size:3rem; line-height:1; margin:6px 0 14px; color:#7A4318; letter-spacing:-0.02em; }
        #onboarding-v2 .obv2-scratch-prize-code-label { font-size:0.7rem; font-weight:700; letter-spacing:0.18em; color:rgba(122,67,24,0.65); margin-bottom:4px; }
        #onboarding-v2 .obv2-scratch-prize-code { font-family:'Courier New',ui-monospace,monospace; font-weight:800; font-size:1.45rem; letter-spacing:0.16em; padding:10px 22px; border-radius:10px; border:1.5px dashed #7A4318; background:#FFFFFF; color:#3A1E08; min-width:140px; text-align:center; }
        #onboarding-v2 .obv2-scratch-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; transition:opacity 0.4s ease; }
        #onboarding-v2 .obv2-scratch-canvas.is-revealed { opacity:0; pointer-events:none; }
        #onboarding-v2 .obv2-scratch-canvas:active { cursor:grabbing; }
        #onboarding-v2 .obv2-scratch-hint { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#FFFFFF; font-weight:700; font-size:1.05rem; letter-spacing:-0.005em; pointer-events:none; text-shadow:0 1px 2px rgba(122,67,24,0.25); transition:opacity 0.3s ease; }
        #onboarding-v2 .obv2-scratch-hint.is-hidden { opacity:0; }
        #onboarding-v2 .obv2-step-scratch .obv2-cta { margin-top:6px; max-width:460px; width:100%; }
        @media (max-width:420px) {
            #onboarding-v2 .obv2-scratch-title { font-size:1.4rem; }
            #onboarding-v2 .obv2-scratch-card { max-width:260px; }
            #onboarding-v2 .obv2-scratch-prize-amount { font-size:2.6rem; }
        }

        /* ---- Step 10bd: Reminder-set page (restored 2026-05-19 from pre-obv2-redesign) ---- */
        #onboarding-v2 .obv2-step-reminder { align-items:center; padding-top:24px; gap:14px; max-width:460px; text-align:center; }
        #onboarding-v2 .obv2-bell { color:#C9A66B; position:relative; margin:10px auto 22px; display:inline-flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:50%; background:rgba(201,166,107,0.08); border:1px solid rgba(201,166,107,0.25); }
        #onboarding-v2 .obv2-bell svg { width:36px; height:36px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
        #onboarding-v2 .obv2-bell .badge { position:absolute; top:6px; right:4px; background:#3D3630; color:#FAF8F5; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; }
        #onboarding-v2 .obv2-step-reminder .obv2-title { max-width:380px; }
        #onboarding-v2 .obv2-step-reminder .obv2-trust { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; background:rgba(94,128,73,0.1); color:#5E8049; font-size:0.82rem; font-weight:600; letter-spacing:-0.005em; margin:4px 0 4px; }
        #onboarding-v2 .obv2-step-reminder .obv2-cta { margin-top:8px; max-width:460px; width:100%; }
        #onboarding-v2 .obv2-step-reminder .obv2-fine-print { font-size:0.84rem; color:rgba(60,54,48,0.65); line-height:1.5; margin:8px auto 0; max-width:360px; }
        #onboarding-v2 .obv2-step-discount { padding-top:36px; }
        #onboarding-v2 .obv2-discount-eyebrow { font-size:1rem; color:#3D3630; font-weight:500; margin:0 0 12px; }
        #onboarding-v2 .obv2-discount-gift { font-size:96px; line-height:1; margin:8px auto 28px; filter:drop-shadow(0 6px 18px rgba(201,166,107,0.35)); }
        #onboarding-v2 .obv2-discount-lead { font-size:1rem; color:#3D3630; font-weight:500; margin:0 0 6px; }
        #onboarding-v2 .obv2-discount-amount { font-family:'Newsreader', Georgia, serif; font-size:2.4rem; font-weight:600; color:#1C1B19; letter-spacing:-0.02em; margin:0 0 28px; }
        @media (max-width:420px) {
            #onboarding-v2 .obv2-bell { width:72px; height:72px; margin:6px auto 18px; }
            #onboarding-v2 .obv2-bell svg { width:30px; height:30px; }
        }

        /* ---- Stripe Elements checkout — full-page step style (not a modal popup) ---- */
        #onboarding-v2 .obv2-checkout-modal { position:fixed; inset:0; z-index:100020; display:none; }
        #onboarding-v2 .obv2-checkout-modal.is-open { display:block; }
        #onboarding-v2 .obv2-checkout-modal-backdrop { display:none; }
        #onboarding-v2 .obv2-checkout-modal-sheet {
            position:absolute; inset:0; width:100%; height:100%; overflow-y:auto;
            background:#FAF8F5; padding:0 0 calc(env(safe-area-inset-bottom,0px) + 36px);
            font-family:'DM Sans','Inter',system-ui,-apple-system,sans-serif;
            color:#1C1B19; opacity:0; transition:opacity 0.22s ease;
        }
        #onboarding-v2 .obv2-checkout-modal.is-open .obv2-checkout-modal-sheet { opacity:1; }
        @media (min-width:720px) {
            #onboarding-v2 .obv2-checkout-modal-sheet { padding-bottom:48px; }
        }

        #onboarding-v2 .obv2-checkout-modal-inner {
            max-width:480px; margin:0 auto; padding:18px 22px 0;
        }

        #onboarding-v2 .obv2-checkout-close {
            position:absolute; top:50%; left:14px; transform:translateY(-50%); z-index:4;
            width:36px; height:36px; border-radius:50%;
            background:rgba(122,62,44,0.10); border:none; cursor:pointer; padding:0;
            display:inline-flex; align-items:center; justify-content:center; color:#7A3E2C;
            -webkit-tap-highlight-color:transparent; transition:background-color 0.18s ease;
        }
        #onboarding-v2 .obv2-checkout-close:hover { background:rgba(122,62,44,0.16); }
        #onboarding-v2 .obv2-checkout-close svg { width:18px; height:18px; }

        #onboarding-v2 .obv2-checkout-social { display:flex; align-items:center; justify-content:center; gap:12px; margin:18px 28px 18px; text-align:left; }
        #onboarding-v2 .obv2-checkout-social-avatars { display:inline-flex; }
        #onboarding-v2 .obv2-checkout-social-avatars img { width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid #FAF8F5; margin-left:-8px; box-shadow:0 1px 4px rgba(28,27,25,0.1); }
        #onboarding-v2 .obv2-checkout-social-avatars img:first-child { margin-left:0; }
        #onboarding-v2 .obv2-checkout-social-text { line-height:1.25; }
        #onboarding-v2 .obv2-checkout-social-num { font-size:0.96rem; font-weight:700; color:#1C1B19; }
        #onboarding-v2 .obv2-checkout-social-sub { font-size:0.82rem; color:rgba(60,54,48,0.7); }

        /* Urgency / discount-reserved bar — sits sticky at the top of the modal sheet */
        #onboarding-v2 .obv2-checkout-urgency {
            position:sticky; top:0; z-index:3;
            padding:calc(env(safe-area-inset-top,0px) + 14px) 22px 14px;
            background:linear-gradient(180deg,#FCE7E0 0%,#F8D8CE 100%);
            border-bottom:1px solid rgba(184,80,58,0.18);
            display:flex; align-items:center; justify-content:center; gap:10px;
            font-family:'DM Sans','Inter',system-ui,sans-serif;
            color:#7A3E2C;
            box-shadow:0 2px 12px rgba(184,80,58,0.10);
            min-height:64px; box-sizing:border-box;
        }
        #onboarding-v2 .obv2-checkout-urgency-content {
            display:inline-flex; align-items:center; gap:10px;
        }
        #onboarding-v2 .obv2-checkout-urgency-icon { font-size:1.05rem; }
        #onboarding-v2 .obv2-checkout-urgency-label { font-size:0.82rem; font-weight:700; letter-spacing:0.02em; }
        #onboarding-v2 .obv2-checkout-urgency-timer {
            display:inline-flex; align-items:baseline; gap:2px;
            font-family:'Lora','Newsreader',Georgia,serif;
            font-size:1.05rem; font-weight:700; color:#B8503A;
            font-variant-numeric:tabular-nums;
        }
        #onboarding-v2 .obv2-checkout-urgency-colon { padding:0 1px; }
        #onboarding-v2 .obv2-checkout-urgency-unit { font-family:'DM Sans',sans-serif; font-size:0.72rem; font-weight:600; color:rgba(184,80,58,0.75); margin-left:4px; letter-spacing:0.04em; }

        #onboarding-v2 .obv2-checkout-plan {
            background:#FFFFFF; border:1px solid rgba(28,27,25,0.08); border-radius:12px;
            padding:12px 14px; margin-bottom:14px;
        }
        #onboarding-v2 .obv2-checkout-plan-headline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
        #onboarding-v2 .obv2-checkout-plan-name { font-family:'Lora','Newsreader',Georgia,serif; font-size:0.98rem; font-weight:600; color:#1C1B19; letter-spacing:-0.008em; }
        #onboarding-v2 .obv2-checkout-plan-anchor { font-family:'DM Sans',sans-serif; font-size:0.88rem; font-weight:500; color:rgba(60,54,48,0.65); font-variant-numeric:tabular-nums; text-decoration:line-through; text-decoration-thickness:1.2px; }
        #onboarding-v2 .obv2-checkout-plan-discount-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; }
        #onboarding-v2 .obv2-checkout-plan-discount-label { font-size:0.82rem; font-weight:500; color:#B8503A; }
        #onboarding-v2 .obv2-checkout-plan-discount-amt { font-family:'DM Sans',sans-serif; font-size:0.88rem; font-weight:600; color:#B8503A; font-variant-numeric:tabular-nums; }
        #onboarding-v2 .obv2-checkout-plan-promo { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding:6px 10px; background:#F6F2EC; border-radius:8px; }
        #onboarding-v2 .obv2-checkout-plan-promo-label { font-size:0.78rem; color:rgba(60,54,48,0.7); }
        #onboarding-v2 .obv2-checkout-plan-promo-chip { display:inline-flex; align-items:center; gap:6px; background:#FFFFFF; padding:3px 9px 3px 5px; border-radius:999px; box-shadow:0 1px 4px rgba(28,27,25,0.05); }
        #onboarding-v2 .obv2-checkout-plan-promo-dot { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:#5E8049; color:#fff; font-size:0.65rem; font-weight:800; }
        #onboarding-v2 .obv2-checkout-plan-promo-text { font-family:'DM Sans',sans-serif; font-size:0.8rem; font-weight:700; color:#3D3630; letter-spacing:0.04em; }
        #onboarding-v2 .obv2-checkout-plan-divider { height:1px; background:rgba(28,27,25,0.08); margin:10px 0 8px; }
        #onboarding-v2 .obv2-checkout-plan-total-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
        #onboarding-v2 .obv2-checkout-plan-total-label { font-family:'Lora','Newsreader',Georgia,serif; font-size:1.05rem; font-weight:600; color:#1C1B19; }
        #onboarding-v2 .obv2-checkout-plan-total { font-family:'Lora','Newsreader',Georgia,serif; font-size:1.18rem; font-weight:700; color:#1C1B19; font-variant-numeric:tabular-nums; }
        #onboarding-v2 .obv2-checkout-plan-savings { text-align:right; margin-top:2px; font-size:0.76rem; font-weight:600; color:#B8503A; }
        #onboarding-v2 .obv2-checkout-trial-badge {
            margin-top:10px; padding:0;
            background:transparent; color:rgba(28,27,25,0.55);
            font-size:0.82rem; line-height:1.4; font-weight:500;
            display:block; text-align:left;
        }
        #onboarding-v2 .obv2-checkout-trial-badge.is-hidden { display:none; }
        #onboarding-v2 .obv2-checkout-trial-dot { display:none; }

        /* Express checkout (Apple Pay / Google Pay / Link) */
        #onboarding-v2 .obv2-checkout-express { min-height:0; margin:4px 0 0; }
        #onboarding-v2 .obv2-checkout-express:empty { display:none; }
        #onboarding-v2 .obv2-checkout-express-divider {
            display:flex; align-items:center; gap:12px;
            color:rgba(60,54,48,0.5); font-size:0.78rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
            margin:14px 0 10px;
        }
        #onboarding-v2 .obv2-checkout-express-divider::before,
        #onboarding-v2 .obv2-checkout-express-divider::after { content:""; flex:1; height:1px; background:rgba(28,27,25,0.10); }

        #onboarding-v2 .obv2-checkout-mount { min-height:200px; margin:4px 0 8px; }
        #onboarding-v2 .obv2-checkout-error { color:#B22222; font-size:0.86rem; min-height:18px; margin:6px 0 4px; text-align:left; }

        #onboarding-v2 .obv2-checkout-cta {
            width:100%; padding:16px 18px; border-radius:14px; border:none;
            background:#5E8049; color:#FFFFFF;
            font-family:'DM Sans','Inter',system-ui,sans-serif;
            font-size:1rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
            cursor:pointer; -webkit-tap-highlight-color:transparent;
            transition:transform 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
            margin-top:6px;
            display:inline-flex; align-items:center; justify-content:center; gap:10px;
        }
        #onboarding-v2 .obv2-checkout-cta:hover:not(:disabled) { background:#52723F; }
        #onboarding-v2 .obv2-checkout-cta:active:not(:disabled) { transform:translateY(1px); }
        #onboarding-v2 .obv2-checkout-cta:disabled { opacity:0.55; cursor:not-allowed; }
        #onboarding-v2 .obv2-checkout-cta-lock { width:18px; height:18px; flex-shrink:0; }

        #onboarding-v2 .obv2-checkout-paysafe-wrap {
            display:flex; justify-content:center; margin-top:14px;
        }
        #onboarding-v2 .obv2-checkout-paysafe {
            display:inline-flex; align-items:center; gap:8px;
            padding:8px 16px;
            background:#FFFFFF; border-radius:999px;
            box-shadow:0 1px 4px rgba(28,27,25,0.06);
        }
        #onboarding-v2 .obv2-checkout-paysafe-shield { display:inline-flex; width:18px; height:18px; color:#5E8049; }
        #onboarding-v2 .obv2-checkout-paysafe-shield svg { width:100%; height:100%; }
        #onboarding-v2 .obv2-checkout-paysafe-label { font-size:0.86rem; font-weight:700; color:#3F5C32; letter-spacing:0.01em; }

        #onboarding-v2 .obv2-checkout-stripe-cite {
            margin-top:6px; text-align:center;
            font-size:0.76rem; color:rgba(60,54,48,0.55); letter-spacing:0.01em;
        }
        #onboarding-v2 .obv2-checkout-stripe-cite strong { color:#635BFF; font-weight:700; letter-spacing:-0.01em; }

        /* ---- Scratch reveal celebration bottom-sheet ---- */
        #onboarding-v2 .obv2-scratch-celeb { position:fixed; inset:0; z-index:1200; pointer-events:none; display:flex; flex-direction:column; justify-content:flex-end; opacity:0; transition:opacity 0.28s ease; }
        #onboarding-v2 .obv2-scratch-celeb.is-open { opacity:1; pointer-events:auto; }
        #onboarding-v2 .obv2-scratch-celeb-backdrop { position:absolute; inset:0; background:rgba(28,27,25,0.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
        #onboarding-v2 .obv2-scratch-celeb-sheet { position:relative; background:#FAF8F5; border-radius:28px 28px 0 0; padding:48px 22px 26px; box-shadow:0 -10px 40px rgba(28,27,25,0.18); transform:translateY(100%); transition:transform 0.36s cubic-bezier(0.22,0.61,0.36,1); display:flex; flex-direction:column; align-items:center; gap:0; }
        #onboarding-v2 .obv2-scratch-celeb.is-open .obv2-scratch-celeb-sheet { transform:translateY(0); }
        #onboarding-v2 .obv2-scratch-celeb-tag { position:absolute; top:-22px; left:50%; transform:translateX(-50%); background:#FFFFFF; color:#1C1B19; font-weight:600; font-size:0.95rem; padding:10px 22px; border-radius:16px; box-shadow:0 4px 14px rgba(28,27,25,0.10); }
        #onboarding-v2 .obv2-scratch-celeb-tag::after { content:""; position:absolute; left:50%; bottom:-6px; width:12px; height:12px; background:#FFFFFF; transform:translateX(-50%) rotate(45deg); box-shadow:2px 2px 4px rgba(28,27,25,0.05); }
        #onboarding-v2 .obv2-scratch-celeb-burst { position:relative; width:200px; height:200px; display:flex; align-items:center; justify-content:center; margin:8px 0 4px; }
        #onboarding-v2 .obv2-scratch-celeb-rays { position:absolute; inset:0; background:
            conic-gradient(from 0deg,
                rgba(232,144,112,0.0)  0deg,  rgba(232,144,112,0.22) 6deg,  rgba(232,144,112,0.0)  12deg,
                rgba(232,144,112,0.0)  24deg, rgba(232,144,112,0.22) 30deg, rgba(232,144,112,0.0)  36deg,
                rgba(232,144,112,0.0)  48deg, rgba(232,144,112,0.22) 54deg, rgba(232,144,112,0.0)  60deg,
                rgba(232,144,112,0.0)  72deg, rgba(232,144,112,0.22) 78deg, rgba(232,144,112,0.0)  84deg,
                rgba(232,144,112,0.0)  96deg, rgba(232,144,112,0.22) 102deg, rgba(232,144,112,0.0) 108deg,
                rgba(232,144,112,0.0) 120deg, rgba(232,144,112,0.22) 126deg, rgba(232,144,112,0.0) 132deg,
                rgba(232,144,112,0.0) 144deg, rgba(232,144,112,0.22) 150deg, rgba(232,144,112,0.0) 156deg,
                rgba(232,144,112,0.0) 168deg, rgba(232,144,112,0.22) 174deg, rgba(232,144,112,0.0) 180deg,
                rgba(232,144,112,0.0) 192deg, rgba(232,144,112,0.22) 198deg, rgba(232,144,112,0.0) 204deg,
                rgba(232,144,112,0.0) 216deg, rgba(232,144,112,0.22) 222deg, rgba(232,144,112,0.0) 228deg,
                rgba(232,144,112,0.0) 240deg, rgba(232,144,112,0.22) 246deg, rgba(232,144,112,0.0) 252deg,
                rgba(232,144,112,0.0) 264deg, rgba(232,144,112,0.22) 270deg, rgba(232,144,112,0.0) 276deg,
                rgba(232,144,112,0.0) 288deg, rgba(232,144,112,0.22) 294deg, rgba(232,144,112,0.0) 300deg,
                rgba(232,144,112,0.0) 312deg, rgba(232,144,112,0.22) 318deg, rgba(232,144,112,0.0) 324deg,
                rgba(232,144,112,0.0) 336deg, rgba(232,144,112,0.22) 342deg, rgba(232,144,112,0.0) 348deg,
                rgba(232,144,112,0.0) 360deg);
            mask:radial-gradient(circle, transparent 36px, #000 38px, #000 100%);
            -webkit-mask:radial-gradient(circle, transparent 36px, #000 38px, #000 100%);
            opacity:0; transform:scale(0.6) rotate(-12deg); transition:transform 0.7s cubic-bezier(0.22,0.61,0.36,1) 0.12s, opacity 0.5s ease 0.12s; }
        #onboarding-v2 .obv2-scratch-celeb.is-open .obv2-scratch-celeb-rays { opacity:1; transform:scale(1) rotate(0deg); animation:obv2RaysSpin 22s linear infinite 0.8s; }
        @keyframes obv2RaysSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
        #onboarding-v2 .obv2-scratch-celeb-gift { position:relative; font-size:5rem; line-height:1; opacity:0; transform:scale(0.4); transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.18s, opacity 0.3s ease 0.18s; filter:drop-shadow(0 6px 16px rgba(232,144,112,0.4)); }
        #onboarding-v2 .obv2-scratch-celeb.is-open .obv2-scratch-celeb-gift { opacity:1; transform:scale(1); }
        #onboarding-v2 .obv2-scratch-celeb-eyebrow { font-size:1rem; color:rgba(60,54,48,0.65); letter-spacing:-0.005em; margin:6px 0 2px; }
        #onboarding-v2 .obv2-scratch-celeb-amount { font-family:'Lora','Newsreader',Georgia,serif; font-weight:600; font-size:2.6rem; color:#1C1B19; letter-spacing:-0.02em; margin:0 0 22px; }
        #onboarding-v2 .obv2-scratch-celeb-cta { width:100%; max-width:420px; padding:18px 36px; border:none; border-radius:14px; background:#3D3630; color:#FAF8F5; font-family:inherit; font-size:1rem; font-weight:600; cursor:pointer; letter-spacing:0.005em; transition:transform 0.22s ease, box-shadow 0.22s ease; -webkit-tap-highlight-color:transparent; }
        #onboarding-v2 .obv2-scratch-celeb-cta:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(61,54,48,0.22); }
        #onboarding-v2 .obv2-scratch-celeb-fine { font-size:0.84rem; color:rgba(60,54,48,0.55); line-height:1.45; margin:14px 8px 0; text-align:center; padding-top:14px; border-top:1px solid rgba(28,27,25,0.06); width:100%; max-width:420px; }
        @media (max-width:420px) {
            #onboarding-v2 .obv2-scratch-celeb-amount { font-size:2.2rem; }
            #onboarding-v2 .obv2-scratch-celeb-burst { width:170px; height:170px; }
            #onboarding-v2 .obv2-scratch-celeb-gift { font-size:4.4rem; }
        }
        @media (max-width:380px) {
            #onboarding-v2 .obv2-creating-title { font-size:1.32rem; }
            #onboarding-v2 .obv2-creating-popup-question { font-size:1.05rem; }
        }

        /* ============ Step pw: Liven-style long-scroll paywall ============ */
        #onboarding-v2 .obv2-step-pw { padding:0; max-width:none; width:100%; align-items:stretch; }
        #onboarding-v2 .obv2-step-pw.active { display:flex; flex-direction:column; gap:0; }
        #onboarding-v2 .obv2-pw-stickybar { position:sticky; top:0; z-index:50; background:linear-gradient(180deg, #FFF5E5 0%, #FCEBD0 100%); border-bottom:1px solid rgba(184,80,58,0.18); padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 12px; display:flex; align-items:center; gap:10px; box-shadow:0 2px 12px rgba(184,80,58,0.10); }
        #onboarding-v2 .obv2-pw-stickybar-brand { font-family:'Newsreader',Georgia,serif; font-optical-sizing:auto; font-size:1.05rem; font-weight:400; font-variation-settings:'opsz' 144,'SOFT' 30; letter-spacing:-0.01em; color:#1C1B19; line-height:1; padding-right:2px; }
        #onboarding-v2 .obv2-pw-stickybar-brand em { font-style:italic; font-weight:300; color:#8B5E3C; }
        #onboarding-v2 .obv2-pw-stickybar-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; }
        #onboarding-v2 .obv2-pw-stickybar-label { font-size:0.66rem; color:#7A3E2C; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; line-height:1.1; text-align:center; white-space:nowrap; }
        #onboarding-v2 .obv2-pw-stickybar-timer { font-family:'Lora','Newsreader',Georgia,serif; font-size:1.55rem; font-weight:700; color:#B8503A; font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-0.01em; animation:obv2timerPulse 1.6s ease-in-out infinite; text-align:center; }
        @keyframes obv2timerPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.85; transform:scale(1.02); } }
        #onboarding-v2 .obv2-pw-stickybar-cta { background:#3D3630; color:#FAF8F5; border:none; border-radius:100px; padding:10px 16px; font-family:inherit; font-size:0.82rem; font-weight:700; letter-spacing:0.02em; cursor:pointer; transition:transform 0.12s ease; -webkit-tap-highlight-color:transparent; white-space:nowrap; box-shadow:0 4px 12px rgba(28,27,25,0.18); }
        @media (max-width:380px) {
            #onboarding-v2 .obv2-pw-stickybar-label { font-size:0.6rem; letter-spacing:0.04em; }
            #onboarding-v2 .obv2-pw-stickybar-timer { font-size:1.35rem; }
            #onboarding-v2 .obv2-pw-stickybar-cta { padding:9px 12px; font-size:0.76rem; }
        }
        #onboarding-v2 .obv2-pw-stickybar-cta:active { transform:scale(0.96); }
        #onboarding-v2 .obv2-pw-body { background:#FAF8F5; padding:22px 18px 38px; display:flex; flex-direction:column; gap:28px; max-width:520px; margin:0 auto; width:100%; box-sizing:border-box; }
        #onboarding-v2 .obv2-pw-section { display:flex; flex-direction:column; gap:14px; align-items:center; }

        /* Profile recap section (Mookie card) */
        #onboarding-v2 .obv2-pw-profile-section { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:8px; }

        /* Before/After transformation card */
        #onboarding-v2 .obv2-pw-transform { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:460px; align-self:center; margin-top:6px; }
        #onboarding-v2 .obv2-pw-transform-tile { background:#fff; border:1px solid rgba(28,27,25,0.08); border-radius:18px; padding:10px 10px 14px; display:flex; flex-direction:column; gap:10px; box-shadow:0 2px 10px rgba(28,27,25,0.04); }
        #onboarding-v2 .obv2-pw-transform-photo { position:relative; width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:#EFEAE2; }
        #onboarding-v2 .obv2-pw-transform-photo img { width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity 0.4s ease; }
        #onboarding-v2 .obv2-pw-transform-photo img.loaded { opacity:1; }
        #onboarding-v2 .obv2-pw-transform-photo-spinner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
        #onboarding-v2 .obv2-pw-transform-photo-spinner::after { content:""; width:24px; height:24px; border:2.5px solid rgba(28,27,25,0.18); border-top-color:#5E8049; border-radius:50%; animation:obv2-spin 0.9s linear infinite; }
        #onboarding-v2 .obv2-pw-transform-photo img.loaded ~ .obv2-pw-transform-photo-spinner { display:none; }
        #onboarding-v2 .obv2-pw-transform-label { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); background:rgba(28,27,25,0.66); color:#fff; font-size:0.78rem; font-weight:600; padding:4px 12px; border-radius:999px; letter-spacing:0.01em; }
        #onboarding-v2 .obv2-pw-transform-label.goal { background:rgba(94,128,73,0.85); }
        #onboarding-v2 .obv2-pw-transform-metrics { display:flex; flex-direction:column; gap:8px; padding:0 2px; }
        #onboarding-v2 .obv2-pw-transform-metric-label { font-size:0.78rem; font-weight:500; color:#1C1B19; letter-spacing:-0.005em; }
        #onboarding-v2 .obv2-pw-transform-metric-state { font-size:0.74rem; font-weight:500; margin-top:1px; }
        #onboarding-v2 .obv2-pw-transform-metric-state.state-low { color:#B8503A; }
        #onboarding-v2 .obv2-pw-transform-metric-state.state-high { color:#5E8049; }
        #onboarding-v2 .obv2-pw-transform-bar { width:100%; height:5px; background:rgba(28,27,25,0.08); border-radius:999px; margin-top:5px; overflow:hidden; }
        #onboarding-v2 .obv2-pw-transform-bar-fill { height:100%; border-radius:999px; transition:width 0.8s cubic-bezier(0.22,0.61,0.36,1); }
        #onboarding-v2 .obv2-pw-transform-bar-fill.low { background:linear-gradient(90deg,#D66349,#E89070); }
        #onboarding-v2 .obv2-pw-transform-bar-fill.high { background:linear-gradient(90deg,#8FAA73,#5E8049); }
        #onboarding-v2 .obv2-pw-transform-goalchip { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:5px; min-height:30px; padding:6px 10px; border-radius:10px; font-size:0.74rem; font-weight:600; letter-spacing:-0.005em; line-height:1.2; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        #onboarding-v2 .obv2-pw-transform-goalchip.now { background:rgba(184,80,58,0.08); color:#B8503A; }
        #onboarding-v2 .obv2-pw-transform-goalchip.goal { background:rgba(94,128,73,0.12); color:#4F6E3C; }
        @keyframes obv2-spin { to { transform:rotate(360deg); } }

        /* Mini diagnostic cards (Liven-style two-up) */
        #onboarding-v2 .obv2-pw-minicards { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; max-width:440px; align-self:center; }
        #onboarding-v2 .obv2-pw-minicard { background:#fff; border:1px solid rgba(28,27,25,0.08); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:10px; box-shadow:0 1px 4px rgba(28,27,25,0.03); min-height:60px; min-width:0; }
        #onboarding-v2 .obv2-pw-minicard-icon { width:36px; height:36px; min-width:36px; border-radius:10px; background:#F6F2EC; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
        #onboarding-v2 .obv2-pw-minicard-icon img { width:100%; height:100%; object-fit:cover; display:block; }
        #onboarding-v2 .obv2-pw-minicard-icon.emoji { font-size:1.2rem; }
        #onboarding-v2 .obv2-pw-minicard-body { display:flex; flex-direction:column; justify-content:center; min-width:0; flex:1; }
        #onboarding-v2 .obv2-pw-minicard-label { font-size:0.7rem; font-weight:500; color:rgba(28,27,25,0.6); letter-spacing:0.01em; line-height:1.25; }
        #onboarding-v2 .obv2-pw-minicard-value { font-size:0.86rem; font-weight:600; color:#1C1B19; letter-spacing:-0.005em; line-height:1.25; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        /* Plan-ready headline */
        #onboarding-v2 .obv2-pw-plan-ready { font-family:'Lora','Newsreader',Georgia,serif; font-weight:500; font-size:1.45rem; line-height:1.25; color:#1C1B19; letter-spacing:-0.012em; text-align:center; margin:6px 0 0; max-width:420px; align-self:center; }
        #onboarding-v2 .obv2-pw-plan-ready .obv2-pw-accent { color:#5E8049; font-weight:600; }

        /* Promo banner */
        #onboarding-v2 .obv2-pw-promo { width:100%; max-width:440px; align-self:center; display:flex; flex-direction:column; gap:8px; }
        #onboarding-v2 .obv2-pw-promo-success { background:#EAF3DA; color:#3F5C32; border:1px solid rgba(94,128,73,0.18); border-radius:12px; padding:11px 14px; font-size:0.92rem; font-weight:600; display:flex; align-items:center; gap:8px; justify-content:center; }
        #onboarding-v2 .obv2-pw-promo-check { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#5E8049; color:#fff; font-size:0.7rem; font-weight:800; }
        #onboarding-v2 .obv2-pw-promo-row { display:flex; align-items:stretch; gap:8px; background:#fff; border:1px solid rgba(28,27,25,0.08); border-radius:14px; padding:6px; box-shadow:0 2px 10px rgba(28,27,25,0.05); }
        #onboarding-v2 .obv2-pw-promo-code { flex:1; display:flex; align-items:center; gap:8px; padding:10px 14px; background:#F6F2EC; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:0.96rem; font-weight:700; color:#3D3630; letter-spacing:0.04em; }
        #onboarding-v2 .obv2-pw-promo-codedot { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#5E8049; color:#fff; font-size:0.7rem; font-weight:800; }
        #onboarding-v2 .obv2-pw-promo-clock { position:relative; display:flex; align-items:center; gap:4px; padding:6px 12px 18px; background:#FBEDE6; border-radius:10px; min-width:96px; justify-content:center; }
        #onboarding-v2 .obv2-pw-promo-mins, #onboarding-v2 .obv2-pw-promo-secs { font-family:'Lora','Newsreader',Georgia,serif; font-size:1.18rem; font-weight:600; color:#B8503A; font-variant-numeric:tabular-nums; min-width:24px; text-align:center; }
        #onboarding-v2 .obv2-pw-promo-colon { font-size:1.1rem; font-weight:600; color:#B8503A; padding:0 1px; }
        #onboarding-v2 .obv2-pw-promo-clock-units { position:absolute; bottom:4px; left:8px; right:8px; display:flex; justify-content:space-between; font-size:0.54rem; letter-spacing:0.04em; color:rgba(184,80,58,0.7); font-weight:600; text-transform:uppercase; }

        /* Plan tier cards */
        #onboarding-v2 .obv2-pw-tiers { display:flex; flex-direction:column; gap:10px; width:100%; max-width:440px; align-self:center; }
        #onboarding-v2 .obv2-pw-tier { position:relative; background:#fff; border:2px solid rgba(28,27,25,0.08); border-radius:14px; padding:18px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease; -webkit-tap-highlight-color:transparent; }
        #onboarding-v2 .obv2-pw-tier:hover { border-color:rgba(94,128,73,0.3); }
        #onboarding-v2 .obv2-pw-tier:active { transform:scale(0.995); }
        #onboarding-v2 .obv2-pw-tier.selected { background:#5E8049; color:#fff; border-color:#5E8049; box-shadow:0 8px 26px rgba(94,128,73,0.28); }
        #onboarding-v2 .obv2-pw-tier.selected .obv2-pw-tier-name,
        #onboarding-v2 .obv2-pw-tier.selected .obv2-pw-tier-int,
        #onboarding-v2 .obv2-pw-tier.selected .obv2-pw-tier-cents,
        #onboarding-v2 .obv2-pw-tier.selected .obv2-pw-tier-dollar { color:#fff; }
        #onboarding-v2 .obv2-pw-tier.selected .obv2-pw-tier-old { color:#fff; }
        #onboarding-v2 .obv2-pw-tier.selected .obv2-pw-tier-old .strike { color:rgba(255,255,255,0.6); }
        #onboarding-v2 .obv2-pw-tier.selected .obv2-pw-tier-price-old { color:rgba(255,255,255,0.6); }
        #onboarding-v2 .obv2-pw-tier.selected .obv2-pw-tier-per { color:rgba(255,255,255,0.78); }
        #onboarding-v2 .obv2-pw-tier-radio { width:20px; height:20px; border-radius:50%; border:2px solid rgba(28,27,25,0.18); flex-shrink:0; position:relative; }
        #onboarding-v2 .obv2-pw-tier.selected .obv2-pw-tier-radio { background:#fff; border-color:#fff; }
        #onboarding-v2 .obv2-pw-tier.selected .obv2-pw-tier-radio::after { content:""; position:absolute; left:5px; top:5px; width:6px; height:6px; background:#5E8049; border-radius:50%; }
        #onboarding-v2 .obv2-pw-tier-info { flex:1; display:flex; flex-direction:column; gap:3px; text-align:left; }
        #onboarding-v2 .obv2-pw-tier-name { font-size:1rem; font-weight:700; color:#1C1B19; letter-spacing:0.01em; }
        #onboarding-v2 .obv2-pw-tier-old { font-size:0.86rem; color:#3D3630; font-weight:500; display:flex; gap:6px; align-items:center; }
        #onboarding-v2 .obv2-pw-tier-old .strike { text-decoration:line-through; color:rgba(60,54,48,0.5); font-weight:500; }
        #onboarding-v2 .obv2-pw-tier-price { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
        #onboarding-v2 .obv2-pw-tier-price-old { font-size:0.78rem; color:rgba(60,54,48,0.55); text-decoration:line-through; font-weight:500; line-height:1; }
        #onboarding-v2 .obv2-pw-tier-price-now { display:flex; align-items:flex-start; }
        #onboarding-v2 .obv2-pw-tier-dollar { font-size:1rem; color:#1C1B19; font-weight:600; margin-top:6px; }
        #onboarding-v2 .obv2-pw-tier-int { font-family:'Lora','Newsreader',Georgia,serif; font-size:2.4rem; font-weight:600; color:#1C1B19; line-height:1; letter-spacing:-0.02em; }
        #onboarding-v2 .obv2-pw-tier-frac { display:flex; flex-direction:column; align-items:flex-start; margin-left:2px; }
        #onboarding-v2 .obv2-pw-tier-cents { font-family:'Lora','Newsreader',Georgia,serif; font-size:1rem; font-weight:600; color:#1C1B19; line-height:1; margin-top:6px; }
        #onboarding-v2 .obv2-pw-tier-per { font-size:0.66rem; color:rgba(60,54,48,0.6); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; margin-top:2px; }
        /* Most-popular: only the badge + extra top padding. Green tile styling now follows .selected. */
        #onboarding-v2 .obv2-pw-tier.most-popular { padding-top:30px; }
        #onboarding-v2 .obv2-pw-tier-pop-badge { position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:#1C1B19; color:#FFE5A8; font-size:0.66rem; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; padding:5px 14px 4px; border-radius:0 0 10px 10px; display:flex; align-items:center; gap:5px; }
        #onboarding-v2 .obv2-pw-tier-pop-badge::before { content:"★"; color:#FFD56B; font-size:0.72rem; letter-spacing:0; }
        #onboarding-v2 .obv2-pw-tier-free-badge { position:absolute; top:-8px; right:14px; background:#D77B5A; color:#fff; font-size:0.62rem; font-weight:700; letter-spacing:0.08em; padding:4px 9px; border-radius:100px; text-transform:uppercase; box-shadow:0 2px 8px rgba(184,80,58,0.28); }
        #onboarding-v2 .obv2-pw-tier-trial-pill { display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin-top:4px; padding:4px 10px 4px 8px; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.32); border-radius:100px; font-size:0.74rem; font-weight:600; color:#fff; letter-spacing:0.005em; }
        #onboarding-v2 .obv2-pw-tier-trial-dot { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; color:#FFD56B; font-size:0.78rem; line-height:1; }
        #onboarding-v2 .obv2-pw-tier:not(.most-popular) .obv2-pw-tier-trial-pill { background:rgba(216,200,170,0.22); border-color:rgba(184,80,58,0.20); color:#7A3E2C; }
        #onboarding-v2 .obv2-pw-tier:not(.most-popular) .obv2-pw-tier-trial-dot { color:#B8503A; }

        /* Legal text + CTA + paysafe */
        #onboarding-v2 .obv2-pw-legal { font-size:0.74rem; color:rgba(60,54,48,0.6); line-height:1.5; text-align:left; max-width:440px; align-self:center; margin:0; }
        #onboarding-v2 .obv2-pw-legal a { color:#3D3630; text-decoration:underline; }
        @keyframes obv2-pw-cta-pulse {
            0%   { transform: scale(1, 1); opacity: 0.5; }
            70%  { opacity: 0; }
            100% { transform: scale(1.06, 1.5); opacity: 0; }
        }
        #onboarding-v2 .obv2-pw-cta { position:relative; isolation:isolate; width:100%; max-width:440px; align-self:center; background:#5E8049; color:#fff; border:none; border-radius:100px; padding:18px 28px; font-family:inherit; font-size:1.02rem; font-weight:700; letter-spacing:0.04em; cursor:pointer; transition:transform 0.12s ease; -webkit-tap-highlight-color:transparent; box-shadow:0 6px 18px rgba(94,128,73,0.22); }
        #onboarding-v2 .obv2-pw-cta::after { content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:#5E8049; opacity:0; will-change:transform, opacity; pointer-events:none; animation: obv2-pw-cta-pulse 2s ease-out infinite; }
        #onboarding-v2 .obv2-pw-cta:hover { transform:translateY(-1px); }
        #onboarding-v2 .obv2-pw-cta:active { transform:scale(0.985); }
        #onboarding-v2 .obv2-pw-cta:active::after, #onboarding-v2 .obv2-pw-cta:disabled::after { animation:none; opacity:0; }
        #onboarding-v2 .obv2-pw-cta:disabled { opacity:0.6; cursor:default; }
        @media (prefers-reduced-motion: reduce) {
            #onboarding-v2 .obv2-pw-cta::after { animation: none; opacity:0; }
        }
        #onboarding-v2 .obv2-pw-paysafe { display:flex; align-items:center; gap:6px; justify-content:center; font-size:0.86rem; color:#3D3630; font-weight:500; align-self:center; }
        #onboarding-v2 .obv2-pw-paysafe-check { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:#5E8049; color:#fff; font-size:0.6rem; font-weight:800; }
        #onboarding-v2 .obv2-pw-pay-icons { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; align-self:center; max-width:340px; margin-top:10px; }
        #onboarding-v2 .obv2-pw-pay-icon { background:#fff; border:1px solid rgba(28,27,25,0.08); border-radius:6px; padding:5px 9px; font-family:'DM Sans',sans-serif; font-size:0.66rem; font-weight:700; color:#3D3630; letter-spacing:0.02em; min-width:40px; text-align:center; }
        #onboarding-v2 .obv2-pw-pay-logo { width:44px; height:28px; flex-shrink:0; display:block; object-fit:contain; background:#fff; border:1px solid rgba(28,27,25,0.08); border-radius:6px; padding:3px 6px; box-sizing:border-box; }

        /* Section headings */
        #onboarding-v2 .obv2-pw-h3 { font-family:'Lora','Newsreader',Georgia,serif; font-weight:500; font-size:1.28rem; color:#1C1B19; text-align:center; margin:14px 0 0; letter-spacing:-0.012em; align-self:center; }
        #onboarding-v2 .obv2-pw-faq { display:flex; flex-direction:column; gap:10px; width:100%; max-width:480px; align-self:center; margin-top:4px; }
        #onboarding-v2 .obv2-pw-faq-item { background:#fff; border:1px solid rgba(139,115,85,0.14); border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(28,27,25,0.04); transition:box-shadow 0.2s ease; }
        #onboarding-v2 .obv2-pw-faq-item[open] { box-shadow:0 4px 16px rgba(28,27,25,0.08); }
        #onboarding-v2 .obv2-pw-faq-q { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; font-size:0.98rem; font-weight:600; color:#1C1B19; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; text-align:left; line-height:1.35; }
        #onboarding-v2 .obv2-pw-faq-q::-webkit-details-marker { display:none; }
        #onboarding-v2 .obv2-pw-faq-chevron { width:18px; height:18px; color:rgba(60,54,48,0.55); transition:transform 0.2s ease; flex-shrink:0; }
        #onboarding-v2 .obv2-pw-faq-item[open] .obv2-pw-faq-chevron { transform:rotate(180deg); color:#3D3630; }
        #onboarding-v2 .obv2-pw-faq-a { padding:0 18px 16px; font-size:0.9rem; line-height:1.55; color:rgba(60,54,48,0.82); }
        #onboarding-v2 .obv2-pw-testi-header { display:flex; flex-direction:column; align-items:center; gap:8px; margin:14px 0 0; text-align:center; }
        #onboarding-v2 .obv2-pw-testi-heart { width:40px; height:40px; border-radius:50%; background:rgba(184,80,58,0.10); display:flex; align-items:center; justify-content:center; }
        #onboarding-v2 .obv2-pw-testi-heart svg { width:22px; height:22px; }
        #onboarding-v2 .obv2-pw-testi-title { font-family:'Lora','Newsreader',Georgia,serif; font-weight:500; font-size:1.4rem; color:#1C1B19; letter-spacing:-0.014em; margin:0; }
        #onboarding-v2 .obv2-pw-testi-sub { font-size:0.92rem; color:rgba(107,101,96,0.85); margin:0; letter-spacing:-0.005em; }
        #onboarding-v2 .obv2-pw-sub { font-size:0.92rem; color:rgba(60,54,48,0.68); text-align:center; margin:-12px 0 0; max-width:380px; align-self:center; line-height:1.45; }

        /* Our goals */
        #onboarding-v2 .obv2-pw-goals { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; width:100%; max-width:440px; align-self:center; }
        #onboarding-v2 .obv2-pw-goals li { display:flex; align-items:flex-start; gap:11px; font-size:0.96rem; color:#3D3630; line-height:1.45; text-align:left; }
        #onboarding-v2 .obv2-pw-goals li::before { content:""; flex-shrink:0; width:20px; height:20px; border-radius:50%; background:#5E8049 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center/12px no-repeat; margin-top:1px; }

        /* Featured / research */
        #onboarding-v2 .obv2-pw-featured-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:100px; background:rgba(94,128,73,0.12); color:#3F5C32; font-size:0.78rem; font-weight:600; align-self:center; margin-top:-8px; }
        #onboarding-v2 .obv2-pw-featured-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:100%; max-width:440px; align-self:center; }
        #onboarding-v2 .obv2-pw-featured-cell { background:#fff; border:1px solid rgba(28,27,25,0.06); border-radius:12px; padding:18px 12px; text-align:center; font-family:'Lora','Newsreader',Georgia,serif; font-weight:600; font-size:0.94rem; color:#1C1B19; letter-spacing:0.06em; }
        #onboarding-v2 .obv2-pw-featured-cell.italic { font-style:italic; font-weight:500; letter-spacing:0; }
        #onboarding-v2 .obv2-pw-research-card { background:#fff; border:1px solid rgba(94,128,73,0.18); border-radius:14px; padding:16px 18px; width:100%; max-width:440px; align-self:center; box-shadow:0 2px 12px rgba(28,27,25,0.05); }
        #onboarding-v2 .obv2-pw-research-badge { display:inline-block; font-size:0.66rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#3F5C32; background:#EAF3DA; padding:4px 10px; border-radius:100px; margin-bottom:10px; }
        #onboarding-v2 .obv2-pw-research-quote { font-size:0.96rem; line-height:1.5; color:#3D3630; margin:0 0 8px; font-family:'Lora','Newsreader',Georgia,serif; font-style:italic; }
        #onboarding-v2 .obv2-pw-research-quote strong { font-style:normal; font-weight:700; color:#1C1B19; }
        #onboarding-v2 .obv2-pw-research-cite { font-size:0.74rem; color:rgba(60,54,48,0.6); margin:0; }

        /* Without/With Quest comparison */
        #onboarding-v2 .obv2-pw-compare { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:440px; align-self:center; }
        #onboarding-v2 .obv2-pw-compare-col { background:#fff; border:1px solid rgba(28,27,25,0.08); border-radius:14px; padding:14px 14px 14px; display:flex; flex-direction:column; gap:10px; box-shadow:0 2px 10px rgba(28,27,25,0.04); }
        #onboarding-v2 .obv2-pw-compare-col.without { background:#FBF3EF; border-color:rgba(184,80,58,0.18); }
        #onboarding-v2 .obv2-pw-compare-col.with { background:#F1F6E9; border-color:rgba(94,128,73,0.22); }
        #onboarding-v2 .obv2-pw-compare-head { font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#3D3630; padding-bottom:8px; border-bottom:1px solid rgba(28,27,25,0.08); }
        #onboarding-v2 .obv2-pw-compare-col.without .obv2-pw-compare-head { color:#B8503A; }
        #onboarding-v2 .obv2-pw-compare-col.with .obv2-pw-compare-head { color:#3F5C32; }
        #onboarding-v2 .obv2-pw-compare-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
        #onboarding-v2 .obv2-pw-compare-col li { font-size:0.84rem; line-height:1.4; color:#3D3630; padding-left:20px; position:relative; }
        #onboarding-v2 .obv2-pw-compare-col.without li::before { content:"✕"; position:absolute; left:0; top:0; color:#B8503A; font-weight:700; font-size:0.82rem; }
        #onboarding-v2 .obv2-pw-compare-col.with li::before { content:"✓"; position:absolute; left:0; top:0; color:#5E8049; font-weight:700; font-size:0.92rem; line-height:1.2; }

        /* Testimonials */
        #onboarding-v2 .obv2-pw-testimonials { display:flex; flex-direction:column; gap:12px; width:100%; max-width:440px; align-self:center; }
        #onboarding-v2 .obv2-pw-testi { display:flex; align-items:flex-start; gap:14px; background:#fff; border:1px solid rgba(28,27,25,0.06); border-radius:14px; padding:16px; box-shadow:0 2px 10px rgba(28,27,25,0.04); text-align:left; }
        #onboarding-v2 .obv2-pw-testi-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; background:rgba(139,115,85,0.1); margin-top:2px; }
        #onboarding-v2 .obv2-pw-testi-body { flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
        #onboarding-v2 .obv2-pw-testi-text { font-size:0.9rem; line-height:1.5; color:#3D3630; margin:0; text-align:left; }
        #onboarding-v2 .obv2-pw-testi-meta { display:flex; align-items:center; gap:10px; font-size:0.82rem; }
        #onboarding-v2 .obv2-pw-testi-stars { color:#E2A669; letter-spacing:0.04em; }
        #onboarding-v2 .obv2-pw-testi-name { color:#1C1B19; font-weight:600; }
        #onboarding-v2 .obv2-pw-testi-note { font-size:0.74rem; color:rgba(60,54,48,0.5); text-align:center; max-width:380px; align-self:center; margin:-12px 0 0; font-style:italic; line-height:1.45; }

        /* Guarantee */
        #onboarding-v2 .obv2-pw-guarantee { display:flex; gap:14px; background:#fff; border:1px solid rgba(94,128,73,0.2); border-radius:14px; padding:16px 18px; width:100%; max-width:440px; align-self:center; box-shadow:0 2px 12px rgba(28,27,25,0.05); }
        #onboarding-v2 .obv2-pw-guarantee-check { flex-shrink:0; width:30px; height:30px; border-radius:50%; background:#5E8049; color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.92rem; font-weight:800; }
        #onboarding-v2 .obv2-pw-guarantee-body { flex:1; text-align:left; }
        #onboarding-v2 .obv2-pw-guarantee-body h4 { font-family:'Lora','Newsreader',Georgia,serif; font-weight:500; font-size:1.04rem; color:#1C1B19; margin:0 0 4px; letter-spacing:-0.008em; }
        #onboarding-v2 .obv2-pw-guarantee-body p { font-size:0.86rem; line-height:1.5; color:rgba(60,54,48,0.78); margin:0 0 6px; }
        #onboarding-v2 .obv2-pw-guarantee-body a { font-size:0.84rem; color:#3F5C32; text-decoration:none; font-weight:500; }
        #onboarding-v2 .obv2-pw-guarantee-link { display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:0.86rem; font-weight:700; color:#1C1B19; text-decoration:none; }
        #onboarding-v2 .obv2-pw-guarantee-link span { font-size:1.05rem; line-height:1; font-weight:600; transform:translateY(-1px); }

        /* Footer */
        #onboarding-v2 .obv2-pw-footer { font-size:0.74rem; color:rgba(107,101,96,0.6); line-height:1.5; text-align:center; max-width:380px; align-self:center; margin-top:16px; }
        #onboarding-v2 .obv2-pw-footer p { margin:0 0 4px; }

        @media (max-width:420px) {
            #onboarding-v2 .obv2-pw-body { padding:18px 14px 28px; gap:22px; }
            #onboarding-v2 .obv2-pw-plan-ready { font-size:1.28rem; }
            #onboarding-v2 .obv2-pw-tier-int { font-size:2.05rem; }
            #onboarding-v2 .obv2-pw-h3 { font-size:1.18rem; }
        }
        /* ============ /Step pw ============ */
        @media (max-width:380px) {
            #onboarding-v2 .obv2-plan-chart { height:170px; gap:10px; padding:24px 6px 0; }
            #onboarding-v2 .obv2-plan-xlabels { gap:10px; padding:8px 6px 0; }
            #onboarding-v2 .obv2-plan-bar { max-width:42px; }
            #onboarding-v2 .obv2-plan-title { font-size:1.2rem; }
            #onboarding-v2 .obv2-plan-sub { font-size:0.88rem; }
        }
        @media (max-width:380px) {
            #onboarding-v2 .obv2-dsum-score #obv2-dsum-num { font-size:3.1rem; }
            #onboarding-v2 .obv2-dsum-pattern-name { font-size:1.38rem; }
            #onboarding-v2 .obv2-dsum-pattern-body { font-size:0.84rem; }
        }

        /* Image-card pills — character-creator grid */
        #onboarding-v2 .obv2-pills.image-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; width:100%; margin-bottom:6px; }
        #onboarding-v2 .obv2-pills.image-grid .obv2-pill { flex-direction:column; padding:0; gap:0; border-left:1px solid rgba(139,115,85,0.14); border-radius:14px; overflow:hidden; min-height:0; text-align:center; justify-content:flex-start; }
        #onboarding-v2 .obv2-pills.image-grid .obv2-pill[hidden] { display:none; }
        /* Gender-flagged pills are hidden until the grid's active gender is set. Prevents wrong-gender flash on enter. */
        #onboarding-v2 .obv2-pills .obv2-pill[data-gender] { display:none; }
        #onboarding-v2 .obv2-pills[data-active-gender="female"] .obv2-pill[data-gender="female"],
        #onboarding-v2 .obv2-pills[data-active-gender="male"] .obv2-pill[data-gender="male"] { display:flex; }
        #onboarding-v2 .obv2-pill-img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:rgba(139,115,85,0.06); }
        #onboarding-v2 .obv2-pill-label { padding:10px 8px 12px; font-size:0.88rem; font-weight:600; color:#3D3630; letter-spacing:-0.005em; }
        #onboarding-v2 .obv2-pills.image-grid .obv2-pill.selected { border:2px solid #C9A66B; box-shadow:0 6px 22px rgba(201,166,107,0.22); }
        @media (max-width:380px) {
            #onboarding-v2 .obv2-pills.image-grid { gap:10px; }
            #onboarding-v2 .obv2-pill-label { font-size:0.82rem; padding:8px 6px 10px; }
        }

        /* Gender pick (9f) — two large portrait cards, taller than the 3-col character grid */
        #onboarding-v2 .obv2-pills.obv2-gender-grid { grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:10px; }
        #onboarding-v2 .obv2-pills.obv2-gender-grid .obv2-pill-img { aspect-ratio:4/5; }
        #onboarding-v2 .obv2-pills.obv2-gender-grid .obv2-pill-label { font-size:1.04rem; padding:14px 8px 16px; }
        @media (max-width:380px) {
            #onboarding-v2 .obv2-pills.obv2-gender-grid { gap:12px; }
            #onboarding-v2 .obv2-pills.obv2-gender-grid .obv2-pill-label { font-size:0.95rem; padding:12px 6px 14px; }
        }

        /* Info / bridge slides (slideA, slideB, slideC) — centered editorial card */
        #onboarding-v2 .obv2-step-info { text-align:center; align-items:center; padding-top:6px; }
        #onboarding-v2 .obv2-step-info .obv2-title { text-align:center; max-width:440px; margin:0 auto 12px; }
        #onboarding-v2 .obv2-step-info .obv2-sub { text-align:center; margin:0 auto 30px; max-width:380px; color:rgba(60,54,48,0.78); font-size:1rem; line-height:1.55; }
        /* Citation row — institutional credibility badge (shield + serif label) */
        #onboarding-v2 .obv2-cite-row { display:inline-flex; align-items:center; gap:12px; margin:0 auto 28px; padding:10px 16px 10px 12px; background:rgba(255,255,255,0.6); border:1px solid rgba(165,28,48,0.18); border-radius:14px; box-shadow:0 1px 0 rgba(60,54,48,0.04); }
        #onboarding-v2 .obv2-cite-logo { width:34px; height:40px; object-fit:contain; flex-shrink:0; display:block; }
        #onboarding-v2 .obv2-cite-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; text-align:left; }
        #onboarding-v2 .obv2-cite-inst { font-family:'Lora',serif; font-weight:600; font-size:0.92rem; color:#2D2A26; letter-spacing:-0.005em; }
        #onboarding-v2 .obv2-cite-meta { font-size:0.7rem; font-weight:500; color:rgba(139,115,85,0.85); letter-spacing:0.02em; margin-top:2px; }
        @media (max-width:380px) {
            #onboarding-v2 .obv2-cite-row { padding:8px 14px 8px 10px; gap:10px; }
            #onboarding-v2 .obv2-cite-logo { width:28px; height:33px; }
            #onboarding-v2 .obv2-cite-inst { font-size:0.86rem; }
            #onboarding-v2 .obv2-cite-meta { font-size:0.66rem; }
        }

        /* slideB — companion-builder transition, mirrors the "You've come to the right
           place" welcome page: full-bleed dusty-rose frame that owns the whole viewport,
           Quest top nav hidden, everything centered in one flex column, a WHITE card for
           the "Here's what to expect" list and a WHITE pill CTA sitting below it.
           Darker pink #8C475A per design. clamp() sizing so nothing overflows on phones. */
        #onboarding-v2:has(.obv2-step.obv2-ci-slide.active) .obv2-topbar-bg,
        #onboarding-v2:has(.obv2-step.obv2-ci-slide.active) .obv2-back,
        #onboarding-v2:has(.obv2-step.obv2-ci-slide.active) .obv2-brand,
        #onboarding-v2:has(.obv2-step.obv2-ci-slide.active) .obv2-progress { display:none !important; }
        /* Paint the whole onboarding container pink and kill its top nav padding so the
           pink reaches y=0 (no empty nav strip). Same technique as the welcome page. */
        #onboarding-v2:has(.obv2-step.obv2-ci-slide.active) {
            background-color:#8C475A;
            padding:0;
        }
        #onboarding-v2 .obv2-step.obv2-ci-slide { padding:0; margin:0; width:100%; max-width:none; min-height:100svh; align-items:stretch; }
        #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-ci-frame {
            width:100%; min-height:100svh; flex:1 0 auto;
            background-color:#8C475A;
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E"),
                radial-gradient(140% 120% at 15% 6%, #A85C70 0%, #8C475A 45%, #6E3645 100%);
            background-blend-mode: soft-light, normal;
            background-repeat: repeat, no-repeat;
            background-size: 200px 200px, cover;
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            gap:clamp(18px, 3.5vh, 30px);
            padding:calc(env(safe-area-inset-top,0px) + 24px) clamp(16px, 5vw, 28px) calc(env(safe-area-inset-bottom,0px) + 24px);
            box-sizing:border-box;
        }
        #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-ci-headline {
            font-family:'Lora',Georgia,serif; font-weight:500;
            font-size:clamp(1.5rem, 6vw, 2.1rem); line-height:1.18; letter-spacing:-0.018em;
            color:#FAF8F5; text-align:center; max-width:520px; margin:0; flex-shrink:0;
        }
        #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-ci-body {
            font-family:'DM Sans',sans-serif; font-weight:500;
            font-size:clamp(1rem, 4.4vw, 1.18rem); line-height:1.5; letter-spacing:-0.002em;
            color:rgba(250,248,245,0.85); text-align:center; max-width:440px; margin:0; flex-shrink:0;
        }
        #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-ci-card {
            width:100%; max-width:540px; background:#FFFFFF;
            border-radius:clamp(18px, 4.5vw, 24px);
            padding:clamp(20px, 5vw, 30px) clamp(18px, 4.5vw, 26px);
            box-shadow:0 6px 32px rgba(0,0,0,0.14); border:none;
            display:flex; flex-direction:column; align-items:stretch; text-align:left;
            gap:clamp(16px, 3vw, 20px); flex-shrink:0;
        }
        #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-ci-card-heading {
            font-family:'Lora',Georgia,serif; font-weight:500;
            font-size:clamp(1.02rem, 4vw, 1.16rem); color:#1C1B19;
            text-align:left; margin:0; letter-spacing:-0.005em;
        }
        #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-ci-list { display:flex; flex-direction:column; align-items:stretch; gap:clamp(14px, 3vw, 17px); width:100%; margin:0; padding:0; list-style:none; }
        #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-ci-list li { display:flex; align-items:flex-start; justify-content:flex-start; width:100%; gap:clamp(12px, 3vw, 14px); text-align:left; }
        #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-ci-num {
            flex-shrink:0; width:clamp(30px, 8vw, 36px); height:clamp(30px, 8vw, 36px);
            border-radius:50%; background:#8C475A; color:#FFFFFF;
            font-family:'Lora',Georgia,serif; font-weight:600; font-size:clamp(0.9rem, 3.6vw, 1.02rem);
            display:flex; align-items:center; justify-content:center; line-height:1;
            box-shadow:0 2px 6px rgba(140,71,90,0.3);
        }
        #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-ci-text {
            font-family:'DM Sans',sans-serif; font-size:clamp(0.92rem, 3.8vw, 1rem); font-weight:500;
            line-height:1.42; color:#3D3630; padding-top:clamp(5px, 1.5vw, 7px); letter-spacing:-0.003em;
            text-align:left; flex:1;
        }
        #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-cta {
            position:relative; width:100%; max-width:540px; align-self:center; margin:0; min-width:0;
            padding:clamp(14px, 3.8vw, 18px) 28px; border:none; border-radius:100px;
            background:#FFFFFF; color:#1C1B19;
            font-family:'DM Sans',sans-serif; font-size:clamp(1rem, 4vw, 1.12rem); font-weight:700;
            letter-spacing:0.005em; cursor:pointer; flex-shrink:0;
            transition:transform 0.15s ease, background 0.2s ease; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
        }
        #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-cta:not(:disabled):hover { transform:none; background:#F5F0E8; box-shadow:none; }
        #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-cta:active { transform:scale(0.985); }
        @media (min-width:700px) {
            #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-ci-card { max-width:480px; }
            #onboarding-v2 .obv2-step.obv2-ci-slide .obv2-cta { max-width:480px; }
        }

        /* slideB staggered rise-in — mirrors the qs-welcome screen. Content is held
           hidden ("armed") while the analysis overlay is up, then rises in ("play")
           the moment the overlay starts fading out, so the animation is actually seen. */
        @keyframes obv2CiRise {
            from { opacity:0; transform:translateY(28px); }
            to   { opacity:1; transform:translateY(0); }
        }
        #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-armed .obv2-ci-headline,
        #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-armed .obv2-ci-body,
        #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-armed .obv2-ci-card,
        #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-armed .obv2-cta { opacity:0; }
        #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-play .obv2-ci-headline { animation:obv2CiRise 0.6s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
        #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-play .obv2-ci-body     { animation:obv2CiRise 0.65s cubic-bezier(0.22,1,0.36,1) 0.20s both; }
        #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-play .obv2-ci-card     { animation:obv2CiRise 0.65s cubic-bezier(0.22,1,0.36,1) 0.20s both; }
        #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-play .obv2-cta         { animation:obv2CiRise 0.6s cubic-bezier(0.22,1,0.36,1) 0.38s both; }
        @media (prefers-reduced-motion: reduce) {
            #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-armed .obv2-ci-headline,
            #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-armed .obv2-ci-body,
            #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-armed .obv2-ci-card,
            #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-armed .obv2-cta { opacity:1; }
            #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-play .obv2-ci-headline,
            #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-play .obv2-ci-body,
            #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-play .obv2-ci-card,
            #onboarding-v2 .obv2-step.obv2-ci-slide.obv2-ci-play .obv2-cta { animation:none !important; }
        }

        /* slideB2 — companion social-proof testimonial. Keeps the Quest nav bar.
           Left-aligned Lora headline, a white card with the member photo flush to
           the card's left edge (rounded right corners only, Noom-style) and the
           quote to the right, then the standard Quest dark pill CTA. */
        /* slideB2 — companion testimonial, rebuilt in the soft review-card vocabulary
           (cream surface, soft shadow, circular avatar, gold stars, verified tag, pull-quote)
           so it reads as one polished unit consistent with the score-screen reviews. */
        #onboarding-v2 .obv2-step[data-step="slideB2"] { max-width:460px; align-items:stretch; text-align:left; min-height:calc(100svh - 150px); justify-content:center; }
        #onboarding-v2 .obv2-ctr2-headline {
            font-family:'Lora',Georgia,serif; font-weight:600;
            font-size:clamp(1.35rem, 5.4vw, 1.65rem); line-height:1.26; letter-spacing:-0.015em;
            color:#3D3630; text-align:left; margin:0 0 clamp(18px, 4vw, 24px);
        }
        #onboarding-v2 .obv2-ctr2-card {
            width:100%; background:#FCF8F0; border:1px solid rgba(139,115,85,0.14);
            border-radius:clamp(18px, 5vw, 22px); padding:clamp(20px, 5.4vw, 26px);
            box-shadow:0 10px 30px rgba(80,60,40,0.07); text-align:left;
            opacity:0; transform:translateY(16px);
            animation:obv2DsumRise .7s cubic-bezier(0.22,1,0.36,1) .05s forwards;
        }
        #onboarding-v2 .obv2-ctr2-head { display:flex; align-items:center; gap:13px; margin-bottom:clamp(15px, 3.6vw, 18px); }
        #onboarding-v2 .obv2-ctr2-avatar { width:54px; height:54px; border-radius:50%; object-fit:cover; object-position:center 26%; flex-shrink:0; background:rgba(139,115,85,0.08); }
        #onboarding-v2 .obv2-ctr2-id { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
        #onboarding-v2 .obv2-ctr2-name { font-family:'DM Sans',sans-serif; font-size:1.02rem; font-weight:700; color:#2D2A26; letter-spacing:-0.005em; }
        #onboarding-v2 .obv2-ctr2-verified { display:inline-flex; align-items:center; gap:4px; font-family:'DM Sans',sans-serif; font-size:0.72rem; font-weight:600; color:#5E8049; letter-spacing:0.01em; }
        #onboarding-v2 .obv2-ctr2-verified svg { width:13px; height:13px; display:block; flex-shrink:0; }
        #onboarding-v2 .obv2-ctr2-stars { display:inline-flex; gap:2px; color:#C9A66B; flex-shrink:0; }
        #onboarding-v2 .obv2-ctr2-stars svg { width:15px; height:15px; display:block; }
        #onboarding-v2 .obv2-ctr2-quote {
            font-family:'DM Sans',sans-serif; font-weight:500;
            font-size:clamp(1rem, 4.2vw, 1.12rem); line-height:1.5; color:#3D3630;
            letter-spacing:-0.005em; margin:0;
        }
        #onboarding-v2 .obv2-ctr2-fine {
            font-family:'DM Sans',sans-serif; font-size:clamp(0.72rem,2.8vw,0.78rem); line-height:1.5;
            color:rgba(107,101,96,0.72); margin:clamp(13px,3.2vw,17px) 6px clamp(20px,5vw,26px); text-align:center;
        }
        #onboarding-v2 .obv2-step[data-step="slideB2"] .obv2-cta { align-self:center; width:100%; max-width:460px; }
        @media (prefers-reduced-motion: reduce) {
            #onboarding-v2 .obv2-ctr2-card { animation:none; opacity:1; transform:none; }
        }

        /* slideBG — regulation-level comparison graph, unified with the 10bb plan-graph:
           borderless on the cream surface, dashed gridlines, pill labels, ring endpoints. */
        #onboarding-v2 .obv2-step[data-step="slideBG"] { max-width:460px; align-items:stretch; text-align:left; min-height:calc(100svh - 150px); justify-content:center; }
        #onboarding-v2 .obv2-qg-headline {
            font-family:'Lora',Georgia,serif; font-weight:600;
            font-size:clamp(1.22rem, 4.9vw, 1.48rem); line-height:1.3; letter-spacing:-0.012em;
            color:#3D3630; text-align:left; margin:0 0 clamp(18px, 4.5vw, 26px);
        }
        #onboarding-v2 .obv2-qg-headline .qg-em { color:#A8623F; }
        #onboarding-v2 .obv2-qg-cap { font-family:'DM Sans',sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(110,98,83,0.7); margin:0 0 10px; }
        #onboarding-v2 .obv2-qg-wrap { position:relative; width:100%; }
        #onboarding-v2 .obv2-qg-wrap .obv2-qg-svg { width:100%; height:auto; display:block; overflow:visible; }
        #onboarding-v2 .obv2-qg-xlabels { display:flex; justify-content:space-between; padding:10px 2px 0; font-family:'DM Sans',sans-serif; font-size:0.72rem; color:rgba(60,54,48,0.5); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
        #onboarding-v2 .obv2-qg-foot {
            font-family:'DM Sans',sans-serif; font-size:clamp(0.7rem,2.6vw,0.76rem); line-height:1.5;
            color:rgba(107,101,96,0.7); margin:clamp(16px,4vw,20px) 2px 0; text-align:left;
        }
        #onboarding-v2 .obv2-step[data-step="slideBG"] .obv2-cta { align-self:center; margin-top:clamp(18px,4.5vw,24px); width:100%; max-width:460px; }

        /* dashed gridlines */
        #onboarding-v2 .obv2-qg-wrap .qg-grid line { stroke:rgba(28,27,25,0.07); stroke-width:1; stroke-dasharray:3 6; }

        /* pill labels — mirror the plan-graph tooltips */
        #onboarding-v2 .obv2-qg-tip { position:absolute; padding:6px 12px; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:0.01em; white-space:nowrap; box-shadow:0 4px 14px rgba(28,27,25,0.10); opacity:0; transform:translateY(-4px); animation:qgFade .5s ease forwards; }
        #onboarding-v2 .obv2-qg-tip-quest { right:3%; top:6%; background:#BE7B5A; color:#fff; animation-delay:1.55s; }
        #onboarding-v2 .obv2-qg-tip-quest::after { content:""; position:absolute; right:16px; bottom:-5px; width:10px; height:10px; background:#BE7B5A; transform:rotate(45deg); }
        #onboarding-v2 .obv2-qg-tip-villain { left:31%; bottom:24%; background:#ECE6DB; color:#7A6E5C; box-shadow:0 3px 10px rgba(28,27,25,0.07); animation-delay:1.7s; }
        #onboarding-v2 .obv2-qg-tip-villain::after { content:""; position:absolute; left:18px; bottom:-5px; width:10px; height:10px; background:#ECE6DB; transform:rotate(45deg); }

        /* chart animations (fire on step entry via display:none -> flex) */
        #onboarding-v2 .obv2-qg-wrap .qg-area { clip-path:inset(0 100% 0 0); animation:qgSweep 1.4s cubic-bezier(.4,0,.2,1) .35s forwards; }
        #onboarding-v2 .obv2-qg-wrap .qg-line { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
        #onboarding-v2 .obv2-qg-wrap .qg-line.qg-quest { animation:qgDraw 1.4s cubic-bezier(.4,0,.2,1) .35s forwards; }
        #onboarding-v2 .obv2-qg-wrap .qg-line.qg-villain,
        #onboarding-v2 .obv2-qg-wrap .qg-line.qg-villain-halo { animation:qgDraw 1.3s cubic-bezier(.4,0,.2,1) .5s forwards; }
        #onboarding-v2 .obv2-qg-wrap .qg-dot { opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(0); animation:qgPop .5s cubic-bezier(.3,1.4,.5,1) forwards; }
        #onboarding-v2 .obv2-qg-wrap .qg-dot.qg-start { animation-delay:.35s; }
        #onboarding-v2 .obv2-qg-wrap .qg-dot.qg-quest-end { animation-delay:1.5s; }
        #onboarding-v2 .obv2-qg-wrap .qg-dot.qg-villain-end { animation-delay:1.6s; }
        @keyframes qgFade { to { opacity:1; transform:translateY(0); } }
        @keyframes qgDraw { to { stroke-dashoffset:0; } }
        @keyframes qgPop { to { opacity:1; transform:scale(1); } }
        @keyframes qgSweep { to { clip-path:inset(0 0 0 0); } }

        /* Experts credibility page (moved from the opening quiz welcome) — full-bleed
           mauve hero, founder portrait, testimonial. Shown right after the score reveal. */
        #onboarding-v2:has(.obv2-step.obv2-experts.active) .obv2-topbar-bg,
        #onboarding-v2:has(.obv2-step.obv2-experts.active) .obv2-back,
        #onboarding-v2:has(.obv2-step.obv2-experts.active) .obv2-brand,
        #onboarding-v2:has(.obv2-step.obv2-experts.active) .obv2-progress { display:none !important; }
        #onboarding-v2:has(.obv2-step.obv2-experts.active) {
            background-color:#A05B58;
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='ne'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ne)' opacity='0.85'/%3E%3C/svg%3E"),
                radial-gradient(140% 120% at 15% 6%, #B86E69 0%, #A05B58 45%, #7E423F 100%);
            background-blend-mode: soft-light, normal;
            background-repeat: repeat, no-repeat;
            background-size: 200px 200px, cover;
            padding:0;
        }
        #onboarding-v2 .obv2-step.obv2-experts { padding:0; margin:0; width:100%; max-width:none; min-height:100svh; align-items:stretch; }
        #onboarding-v2 .obv2-experts-inner {
            flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
            gap:clamp(8px, 2vh, 18px); min-height:100svh; box-sizing:border-box; text-align:center;
            padding:calc(env(safe-area-inset-top,0px) + 18px) clamp(16px, 5vw, 28px) calc(env(safe-area-inset-bottom,0px) + 22px);
        }
        #onboarding-v2 .obv2-experts-mark {
            font-family:'Newsreader',Georgia,serif; font-optical-sizing:auto;
            font-size:clamp(1.15rem, 4.4vw, 1.6rem); font-weight:400;
            font-variation-settings:'opsz' 144,'SOFT' 30; letter-spacing:0.005em; color:#FFFFFF; line-height:1; margin:0;
        }
        #onboarding-v2 .obv2-experts-mark em { font-style:normal; font-weight:inherit; color:inherit; }
        #onboarding-v2 .obv2-experts-card {
            height:clamp(140px, 28vh, 260px); aspect-ratio:4/5; max-width:90vw;
            border-radius:clamp(16px, 4.5vw, 24px); overflow:hidden; background:#3D2F26;
            box-shadow:0 8px 32px rgba(0,0,0,0.22); margin:0; flex-shrink:0;
        }
        #onboarding-v2 .obv2-experts-card img { display:block; width:100%; height:100%; object-fit:cover; }
        #onboarding-v2 .obv2-experts-head {
            font-family:'DM Sans',sans-serif; font-weight:500; font-size:clamp(0.95rem, 3.8vw, 1.15rem);
            line-height:1.3; color:rgba(255,255,255,0.92); margin:0;
        }
        #onboarding-v2 .obv2-experts-body {
            font-family:'DM Sans',sans-serif; font-size:clamp(1.32rem, 5.4vw, 1.85rem); font-weight:700;
            line-height:1.16; color:#FAF8F5; margin:0; letter-spacing:-0.018em; padding:0 1%;
        }
        #onboarding-v2 .obv2-experts-body strong { color:#F4D29A; font-weight:700; }
        #onboarding-v2 .obv2-experts-testimonial {
            background:#FBF7F1; border-radius:clamp(18px, 4.5vw, 24px); padding:clamp(14px, 3.8vw, 22px);
            margin:0; width:100%; max-width:540px; box-shadow:0 6px 32px rgba(0,0,0,0.14);
        }
        #onboarding-v2 .obv2-experts-stars { display:flex; gap:clamp(4px, 1.2vw, 8px); margin:0 auto clamp(10px, 2vw, 14px); justify-content:center; }
        #onboarding-v2 .obv2-experts-stars svg { width:clamp(22px, 5.6vw, 28px); height:clamp(22px, 5.6vw, 28px); color:#8B7355; }
        #onboarding-v2 .obv2-experts-tname {
            font-family:'DM Sans',sans-serif; font-size:clamp(0.98rem, 4vw, 1.18rem); font-weight:700;
            color:#1C1B19; margin:0 0 clamp(6px, 1.4vw, 10px);
        }
        #onboarding-v2 .obv2-experts-tquote {
            font-family:'DM Sans',sans-serif; font-size:clamp(0.84rem, 3.2vw, 0.95rem); line-height:1.45;
            color:rgba(60,54,48,0.82); margin:0 0 clamp(10px, 2vw, 14px);
        }
        #onboarding-v2 .obv2-experts-verified {
            display:inline-flex; align-items:center; gap:clamp(8px, 1.8vw, 10px);
            font-family:'DM Sans',sans-serif; font-style:italic; font-size:clamp(0.82rem, 3.2vw, 0.92rem);
            font-weight:500; color:rgba(60,54,48,0.7);
        }
        #onboarding-v2 .obv2-experts-verified svg {
            width:clamp(20px, 4.8vw, 24px); height:clamp(20px, 4.8vw, 24px); padding:4px; border-radius:50%;
            background:#1C1B19; color:#FFFFFF; flex-shrink:0; box-sizing:border-box;
        }
        #onboarding-v2 .obv2-step.obv2-experts .obv2-cta {
            width:100%; max-width:540px; margin:0; padding:clamp(14px, 3.8vw, 18px) 28px; border:none;
            border-radius:100px; background:#FFFFFF; color:#1C1B19; font-family:'DM Sans',sans-serif;
            font-size:clamp(1rem, 4vw, 1.12rem); font-weight:700;
        }
        #onboarding-v2 .obv2-step.obv2-experts .obv2-cta:not(:disabled):hover { background:#F5F0E8; transform:none; box-shadow:none; }
        #onboarding-v2 .obv2-step.obv2-experts .obv2-cta:active { transform:scale(0.985); }
        @media (min-width:700px) {
            #onboarding-v2 .obv2-experts-card { height:clamp(240px, 38vh, 380px); }
            #onboarding-v2 .obv2-experts-testimonial { max-width:480px; }
            #onboarding-v2 .obv2-step.obv2-experts .obv2-cta { max-width:480px; }
        }
        @media (max-height:640px) {
            #onboarding-v2 .obv2-experts-inner { gap:clamp(8px, 1.6vh, 14px); }
            #onboarding-v2 .obv2-experts-card { height:clamp(130px, 26vh, 200px); }
            #onboarding-v2 .obv2-experts-tquote { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        }
        /* experts staggered rise-in — restores the flow-in this screen had as the old
           quiz-intro welcome step. Plays each time the step gains .active (reuses the
           obv2CiRise keyframe). */
        #onboarding-v2 .obv2-step.obv2-experts.active .obv2-experts-mark        { animation:obv2CiRise 0.6s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
        #onboarding-v2 .obv2-step.obv2-experts.active .obv2-experts-card        { animation:obv2CiRise 0.65s cubic-bezier(0.22,1,0.36,1) 0.17s both; }
        #onboarding-v2 .obv2-step.obv2-experts.active .obv2-experts-head        { animation:obv2CiRise 0.6s cubic-bezier(0.22,1,0.36,1) 0.30s both; }
        #onboarding-v2 .obv2-step.obv2-experts.active .obv2-experts-body        { animation:obv2CiRise 0.6s cubic-bezier(0.22,1,0.36,1) 0.42s both; }
        #onboarding-v2 .obv2-step.obv2-experts.active .obv2-experts-testimonial { animation:obv2CiRise 0.65s cubic-bezier(0.22,1,0.36,1) 0.56s both; }
        #onboarding-v2 .obv2-step.obv2-experts.active .obv2-cta                 { animation:obv2CiRise 0.6s cubic-bezier(0.22,1,0.36,1) 0.72s both; }
        @media (prefers-reduced-motion: reduce) {
            #onboarding-v2 .obv2-step.obv2-experts.active .obv2-experts-mark,
            #onboarding-v2 .obv2-step.obv2-experts.active .obv2-experts-card,
            #onboarding-v2 .obv2-step.obv2-experts.active .obv2-experts-head,
            #onboarding-v2 .obv2-step.obv2-experts.active .obv2-experts-body,
            #onboarding-v2 .obv2-step.obv2-experts.active .obv2-experts-testimonial,
            #onboarding-v2 .obv2-step.obv2-experts.active .obv2-cta { animation:none !important; }
        }

        /* ===== Nervous-system education beats (post-score, pre-experts) =====
           Two screens between the diag score and the mauve experts hero:
           ns_symptoms (cream, what a stuck nervous system does to women now) and
           ns_untreated (deep rose, the cost of leaving it). The deep rose is darker
           than the experts mauve (#A05B58) so the experts screen lightens into it. */
        #onboarding-v2 .obv2-edu-inner {
            display:flex; flex-direction:column; align-items:stretch;
            gap:clamp(8px, 1.4vh, 13px); width:100%; max-width:540px; margin:0 auto; text-align:left;
        }
        #onboarding-v2 .obv2-edu-eyebrow {
            font-family:'DM Sans',sans-serif; font-size:clamp(0.7rem, 2.9vw, 0.8rem);
            font-weight:700; letter-spacing:0.15em; text-transform:uppercase; margin:0;
        }
        #onboarding-v2 .obv2-edu-figure {
            position:relative; width:100%; height:clamp(190px, 54vw, 240px);
            border-radius:clamp(16px, 4.5vw, 22px); overflow:hidden; margin:0;
        }
        #onboarding-v2 .obv2-edu-figure img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 25%; }
        /* "What a dysregulated nervous system can feel like" photo: face sits low in frame,
           so the short mobile band must crop lower or it shows only the wall above her head. */
        #onboarding-v2 .obv2-edu-light .obv2-edu-figure img { object-position:center 58%; }
        #onboarding-v2 .obv2-edu-head {
            font-family:'Lora',Georgia,serif; font-weight:600;
            font-size:clamp(1.46rem, 6.2vw, 2rem); line-height:1.16; letter-spacing:-0.01em; margin:0;
        }
        #onboarding-v2 .obv2-edu-list { display:flex; flex-direction:column; margin:2px 0 0; padding:4px clamp(15px, 4vw, 18px); list-style:none; border-radius:18px; }
        #onboarding-v2 .obv2-edu-li { display:flex; align-items:center; gap:clamp(13px, 3.4vw, 16px); padding:clamp(7px, 1.2vh, 11px) 0; }
        #onboarding-v2 .obv2-edu-li + .obv2-edu-li { border-top:1px solid transparent; }
        #onboarding-v2 .obv2-edu-li-icon { flex-shrink:0; width:clamp(40px, 10vw, 44px); height:clamp(40px, 10vw, 44px); border-radius:12px; display:inline-flex; align-items:center; justify-content:center; }
        #onboarding-v2 .obv2-edu-li-icon svg { width:52%; height:52%; display:block; }
        #onboarding-v2 .obv2-edu-li-text { display:flex; flex-direction:column; gap:2px; margin:0; min-width:0; }
        #onboarding-v2 .obv2-edu-li-label { font-family:'DM Sans',sans-serif; font-weight:700; font-size:clamp(0.99rem, 4vw, 1.1rem); line-height:1.18; letter-spacing:-0.005em; }
        #onboarding-v2 .obv2-edu-li-desc { font-family:'DM Sans',sans-serif; font-weight:400; font-size:clamp(0.82rem, 3.3vw, 0.92rem); line-height:1.3; }
        #onboarding-v2 .obv2-edu-notes { display:flex; flex-direction:column; gap:5px; margin:2px 0 0; }
        #onboarding-v2 .obv2-edu-note {
            font-family:'DM Sans',sans-serif; font-size:clamp(0.68rem, 2.8vw, 0.76rem);
            line-height:1.4; margin:0; display:flex; gap:6px;
        }
        #onboarding-v2 .obv2-edu-note-star { font-weight:700; flex-shrink:0; }

        /* light theme (ns_symptoms) — rides the default cream background */
        #onboarding-v2 .obv2-edu-light .obv2-edu-eyebrow { color:#A8432F; }
        #onboarding-v2 .obv2-edu-light .obv2-edu-head { color:#2A2620; }
        #onboarding-v2 .obv2-edu-light .obv2-edu-figure { box-shadow:0 10px 32px rgba(40,28,24,0.16); }
        #onboarding-v2 .obv2-edu-light .obv2-edu-list { background:#FCF8F0; border:1px solid rgba(139,115,85,0.16); box-shadow:0 6px 22px rgba(80,60,40,0.05); }
        #onboarding-v2 .obv2-edu-light .obv2-edu-li + .obv2-edu-li { border-top-color:rgba(139,115,85,0.13); }
        #onboarding-v2 .obv2-edu-light .obv2-edu-li-icon { color:#C77B5A; background:rgba(199,123,90,0.12); }
        #onboarding-v2 .obv2-edu-light .obv2-edu-li-label { color:#2A2620; }
        #onboarding-v2 .obv2-edu-light .obv2-edu-li-desc { color:rgba(60,54,48,0.64); }
        #onboarding-v2 .obv2-edu-light .obv2-edu-note { color:rgba(60,54,48,0.6); }
        #onboarding-v2 .obv2-edu-light .obv2-edu-note-star { color:#C77B5A; }

        /* both edu beats hide the top chrome (back/brand/progress/bar) like the experts hero */
        #onboarding-v2:has(.obv2-step.obv2-edu.active) .obv2-topbar-bg,
        #onboarding-v2:has(.obv2-step.obv2-edu.active) .obv2-back,
        #onboarding-v2:has(.obv2-step.obv2-edu.active) .obv2-brand,
        #onboarding-v2:has(.obv2-step.obv2-edu.active) .obv2-progress { display:none !important; }

        /* light theme (ns_symptoms) — keep cream bg, but go full-bleed/centered like the dark beat */
        #onboarding-v2:has(.obv2-step.obv2-edu-light.active) { padding:0; }
        /* dark theme (ns_untreated) — full-bleed deep rose + grain */
        #onboarding-v2:has(.obv2-step.obv2-edu-dark.active) {
            background-color:#5A3233;
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='nd'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nd)' opacity='0.8'/%3E%3C/svg%3E"),
                linear-gradient(176deg, #3B2122 0%, #5A3233 58%, #6B3A3B 100%);
            background-blend-mode: soft-light, normal;
            background-repeat: repeat, no-repeat;
            background-size: 200px 200px, cover;
            padding:0;
        }
        #onboarding-v2 .obv2-step.obv2-edu { padding:0; margin:0; width:100%; max-width:none; min-height:100svh; align-items:stretch; }
        #onboarding-v2 .obv2-edu .obv2-edu-inner {
            flex:1 1 auto; justify-content:center; min-height:100svh; box-sizing:border-box;
            padding:calc(env(safe-area-inset-top,0px) + 20px) clamp(18px, 5.5vw, 30px) calc(env(safe-area-inset-bottom,0px) + 20px);
        }
        #onboarding-v2 .obv2-edu-dark .obv2-edu-eyebrow { color:#F4D29A; }
        #onboarding-v2 .obv2-edu-dark .obv2-edu-head { color:#FAF8F5; }
        #onboarding-v2 .obv2-edu-dark .obv2-edu-figure { box-shadow:0 14px 44px rgba(0,0,0,0.4); }
        #onboarding-v2 .obv2-edu-dark .obv2-edu-list { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); box-shadow:0 8px 30px rgba(0,0,0,0.18); }
        #onboarding-v2 .obv2-edu-dark .obv2-edu-li + .obv2-edu-li { border-top-color:rgba(255,255,255,0.10); }
        #onboarding-v2 .obv2-edu-dark .obv2-edu-li-icon { color:#E8B583; background:rgba(232,181,131,0.14); }
        #onboarding-v2 .obv2-edu-dark .obv2-edu-li-label { color:#FAF8F5; }
        #onboarding-v2 .obv2-edu-dark .obv2-edu-li-desc { color:rgba(250,248,245,0.72); }
        #onboarding-v2 .obv2-edu-dark .obv2-edu-note { color:rgba(250,248,245,0.62); }
        #onboarding-v2 .obv2-edu-dark .obv2-edu-note-star { color:#E8B583; }
        #onboarding-v2 .obv2-step.obv2-edu .obv2-cta {
            width:100%; max-width:540px; min-width:0; margin:clamp(8px,1.6vh,14px) auto 0;
            padding:clamp(15px, 4vw, 18px) 28px; border:none; border-radius:100px;
            font-family:'DM Sans',sans-serif; font-size:clamp(1rem, 4vw, 1.12rem); font-weight:700;
            box-shadow:none;
        }
        #onboarding-v2 .obv2-step.obv2-edu .obv2-cta:active { transform:scale(0.985); }
        #onboarding-v2 .obv2-step.obv2-edu-light .obv2-cta { background:#2A2620; color:#FAF8F5; }
        #onboarding-v2 .obv2-step.obv2-edu-light .obv2-cta:not(:disabled):hover { background:#3D3630; transform:none; box-shadow:none; }
        #onboarding-v2 .obv2-step.obv2-edu-dark .obv2-cta { background:#FFFFFF; color:#1C1B19; }
        #onboarding-v2 .obv2-step.obv2-edu-dark .obv2-cta:not(:disabled):hover { background:#F5F0E8; transform:none; box-shadow:none; }

        @media (min-width:700px) {
            #onboarding-v2 .obv2-edu-figure { height:clamp(200px, 30vh, 300px); }
        }
        @media (max-height:740px) {
            /* keep the photo a consistent size on short screens; let the page scroll instead of shrinking it */
            #onboarding-v2 .obv2-edu-li { padding:clamp(7px, 1.1vh, 10px) 0; }
            #onboarding-v2 .obv2-edu-li-icon { width:clamp(36px, 9vw, 40px); height:clamp(36px, 9vw, 40px); }
            #onboarding-v2 .obv2-edu-inner { gap:clamp(8px, 1.3vh, 12px); }
        }

        /* staggered rise-in on entry (reuses obv2CiRise; applies to both edu themes) */
        #onboarding-v2 .obv2-step.obv2-edu.active .obv2-edu-head    { animation:obv2CiRise 0.6s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
        #onboarding-v2 .obv2-step.obv2-edu.active .obv2-edu-figure  { animation:obv2CiRise 0.6s cubic-bezier(0.22,1,0.36,1) 0.18s both; }
        #onboarding-v2 .obv2-step.obv2-edu.active .obv2-edu-li:nth-child(1) { animation:obv2CiRise 0.55s cubic-bezier(0.22,1,0.36,1) 0.32s both; }
        #onboarding-v2 .obv2-step.obv2-edu.active .obv2-edu-li:nth-child(2) { animation:obv2CiRise 0.55s cubic-bezier(0.22,1,0.36,1) 0.40s both; }
        #onboarding-v2 .obv2-step.obv2-edu.active .obv2-edu-li:nth-child(3) { animation:obv2CiRise 0.55s cubic-bezier(0.22,1,0.36,1) 0.48s both; }
        #onboarding-v2 .obv2-step.obv2-edu.active .obv2-edu-li:nth-child(4) { animation:obv2CiRise 0.55s cubic-bezier(0.22,1,0.36,1) 0.56s both; }
        #onboarding-v2 .obv2-step.obv2-edu.active .obv2-edu-notes   { animation:obv2CiRise 0.5s cubic-bezier(0.22,1,0.36,1) 0.72s both; }
        #onboarding-v2 .obv2-step.obv2-edu.active .obv2-cta         { animation:obv2CiRise 0.5s cubic-bezier(0.22,1,0.36,1) 0.8s both; }
        @media (prefers-reduced-motion: reduce) {
            #onboarding-v2 .obv2-step.obv2-edu.active .obv2-edu-eyebrow,
            #onboarding-v2 .obv2-step.obv2-edu.active .obv2-edu-figure,
            #onboarding-v2 .obv2-step.obv2-edu.active .obv2-edu-head,
            #onboarding-v2 .obv2-step.obv2-edu.active .obv2-edu-li,
            #onboarding-v2 .obv2-step.obv2-edu.active .obv2-edu-notes,
            #onboarding-v2 .obv2-step.obv2-edu.active .obv2-cta { animation:none !important; }
        }

        /* ===== Theatre "analyzing" screen (quiz -> obv2 handoff) ===== */
        #quest-theatre {
            position:fixed; inset:0; z-index:100000;
            background:#FAF8F5;
            display:none; align-items:center; justify-content:center;
            opacity:0; transition:opacity .42s ease;
            font-family:'DM Sans',sans-serif;
            -webkit-tap-highlight-color:transparent;
        }
        #quest-theatre.is-shown { display:flex; }
        #quest-theatre.is-on { opacity:1; }
        .qth-inner { width:100%; max-width:330px; padding:0 30px; display:flex; flex-direction:column; align-items:center; text-align:center; }
        .qth-ring { width:60px; height:60px; margin-bottom:28px; }
        .qth-ring svg { width:100%; height:100%; display:block; }
        .qth-ring-track { fill:none; stroke:rgba(201,166,107,0.16); stroke-width:5; }
        .qth-ring-arc { fill:none; stroke:#C9A66B; stroke-width:5; stroke-linecap:round; stroke-dasharray:50 158; transform-origin:50% 50%; animation:qthSpin 1.05s linear infinite; }
        @keyframes qthSpin { to { transform:rotate(360deg); } }
        .qth-title { font-family:'Lora',serif; font-weight:600; font-size:1.34rem; line-height:1.32; color:#2A2620; letter-spacing:.004em; margin:0 0 24px; }
        .qth-list { list-style:none; margin:0; padding:0; width:100%; }
        .qth-item { display:flex; align-items:center; gap:13px; padding:9px 2px; opacity:.38; transition:opacity .4s ease; }
        .qth-item.is-active { opacity:1; }
        .qth-item.is-done { opacity:.78; }
        .qth-mark { flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:1.8px solid rgba(140,71,90,0.32); position:relative; transition:border-color .35s ease, background .35s ease; }
        .qth-item.is-active .qth-mark { border-color:#8C475A; }
        .qth-item.is-done .qth-mark { background:#8C475A; border-color:#8C475A; }
        .qth-mark::after { content:''; position:absolute; left:6.5px; top:3px; width:4.5px; height:9px; border:solid #FAF8F5; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform .3s cubic-bezier(.3,1.5,.5,1); }
        .qth-item.is-done .qth-mark::after { transform:rotate(45deg) scale(1); }
        .qth-label { font-size:.97rem; font-weight:500; color:#3D3630; text-align:left; }

        /* ===== "Answers saved" beat (quiz -> obv2 handoff): spinner resolves to a green check ===== */
        #quest-saved {
            position:fixed; inset:0; z-index:100000;
            background:#FAF8F5;
            display:none; align-items:center; justify-content:center;
            opacity:0; transition:opacity .42s ease;
            font-family:'DM Sans',sans-serif; -webkit-tap-highlight-color:transparent;
        }
        #quest-saved.is-shown { display:flex; }
        #quest-saved.is-on { opacity:1; }
        .qsv-inner { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 30px; }
        .qsv-orb { position:relative; width:78px; height:78px; margin-bottom:24px; }
        .qsv-orb svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
        .qsv-spin { opacity:1; transition:opacity .28s ease; }
        #quest-saved.is-done .qsv-spin { opacity:0; }
        .qsv-track { fill:none; stroke:rgba(201,166,107,0.16); stroke-width:5; }
        .qsv-arc { fill:none; stroke:#C9A66B; stroke-width:5; stroke-linecap:round; stroke-dasharray:50 158; transform-origin:50% 50%; animation:qthSpin 1.05s linear infinite; }
        .qsv-check { opacity:0; transform:scale(0.35); transform-origin:50% 50%; transition:opacity .25s ease, transform .5s cubic-bezier(.3,1.5,.5,1); }
        #quest-saved.is-done .qsv-check { opacity:1; transform:scale(1); }
        .qsv-check-bg { fill:#5C9A6F; }
        .qsv-check-mark { fill:none; stroke:#FFFFFF; stroke-width:5.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:42; stroke-dashoffset:42; }
        #quest-saved.is-done .qsv-check-mark { animation:nsmlDraw .42s cubic-bezier(.4,0,.2,1) .14s forwards; }
        .qsv-title { font-family:'Lora',serif; font-weight:600; font-size:1.7rem; color:#2A2620; margin:0; letter-spacing:-0.015em; opacity:0; transition:opacity .5s ease .1s; }
        #quest-saved.is-done .qsv-title { opacity:1; }

        /* ===== Mini loader (ns5 -> Dysregulation Summary): spinner resolves to a green check ===== */
        #ns-mini-loader {
            position:fixed; inset:0; z-index:100000;
            background:#FAF8F5;
            display:none; align-items:center; justify-content:center;
            opacity:0; transition:opacity .42s ease;
            font-family:'DM Sans',sans-serif; -webkit-tap-highlight-color:transparent;
        }
        #ns-mini-loader.is-shown { display:flex; }
        #ns-mini-loader.is-on { opacity:1; }
        .nsml-inner { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 30px; }
        .nsml-orb { position:relative; width:76px; height:76px; margin-bottom:22px; }
        .nsml-orb svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
        .nsml-spin { opacity:1; transition:opacity .28s ease; }
        #ns-mini-loader.is-done .nsml-spin { opacity:0; }
        .nsml-track { fill:none; stroke:rgba(201,166,107,0.16); stroke-width:5; }
        .nsml-arc { fill:none; stroke:#C9A66B; stroke-width:5; stroke-linecap:round; stroke-dasharray:50 158; transform-origin:50% 50%; animation:qthSpin 1.05s linear infinite; }
        .nsml-check { opacity:0; transform:scale(0.35); transform-origin:50% 50%; transition:opacity .25s ease, transform .5s cubic-bezier(.3,1.5,.5,1); }
        #ns-mini-loader.is-done .nsml-check { opacity:1; transform:scale(1); }
        .nsml-check-bg { fill:#5C9A6F; }
        .nsml-check-mark { fill:none; stroke:#FFFFFF; stroke-width:5.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:42; stroke-dashoffset:42; }
        #ns-mini-loader.is-done .nsml-check-mark { animation:nsmlDraw .42s cubic-bezier(.4,0,.2,1) .14s forwards; }
        @keyframes nsmlDraw { to { stroke-dashoffset:0; } }
        .nsml-label { font-family:'Lora',serif; font-weight:500; font-size:1.08rem; color:#2A2620; letter-spacing:.004em; margin:0; transition:opacity .25s ease; }

        /* Press-strip credibility row — real institution logos */
        #onboarding-v2 .obv2-logo-strip-label { font-size:0.66rem; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:rgba(139,115,85,0.7); text-align:center; margin:0 0 18px; }
        #onboarding-v2 .obv2-logo-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px 14px; width:100%; max-width:440px; margin:0 auto 22px; padding:22px 8px; border-top:1px solid rgba(139,115,85,0.18); border-bottom:1px solid rgba(139,115,85,0.18); align-items:center; justify-items:center; }
        #onboarding-v2 .obv2-logo-cell { display:flex; align-items:center; justify-content:center; width:100%; height:52px; }
        #onboarding-v2 .obv2-logo-cell img { max-height:52px; max-width:100%; height:auto; width:auto; object-fit:contain; display:block; filter:opacity(0.95); }
        #onboarding-v2 .obv2-logo-row-sm { padding:20px 8px; }
        #onboarding-v2 .obv2-logo-row-sm .obv2-logo-cell { height:54px; }
        #onboarding-v2 .obv2-logo-row-sm .obv2-logo-cell img { max-height:50px; }
        @media (max-width:380px) {
            #onboarding-v2 .obv2-logo-row { gap:12px 8px; padding:18px 4px; }
            #onboarding-v2 .obv2-logo-cell { height:48px; }
            #onboarding-v2 .obv2-logo-cell img { max-height:48px; }
            #onboarding-v2 .obv2-logo-row-sm .obv2-logo-cell { height:48px; }
            #onboarding-v2 .obv2-logo-row-sm .obv2-logo-cell img { max-height:44px; }
        }
        #onboarding-v2 .obv2-fine { font-size:0.78rem; color:rgba(107,101,96,0.68); margin:0 auto 8px; max-width:380px; line-height:1.5; text-align:center; }
        #onboarding-v2 .obv2-title-cred { font-size:1.55rem; line-height:1.3; max-width:470px; }
        #onboarding-v2 .obv2-cred-block { width:100%; max-width:460px; margin:0 auto 22px; padding:18px 10px; border-top:1px solid rgba(139,115,85,0.18); border-bottom:1px solid rgba(139,115,85,0.18); }
        #onboarding-v2 .obv2-cred-block .obv2-logo-strip-label { margin:0 0 12px; }
        #onboarding-v2 .obv2-cred-block .obv2-cred-row2 { margin-top:22px; }
        #onboarding-v2 .obv2-cred-names { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:7px 16px; width:100%; }
        #onboarding-v2 .obv2-cred-name { font-family:'Lora', Georgia, serif; font-size:0.95rem; font-weight:600; color:#5A5248; letter-spacing:0.005em; white-space:nowrap; }
        @media (max-width: 400px) {
            #onboarding-v2 .obv2-title-cred { font-size:1.32rem; }
            #onboarding-v2 .obv2-cred-name { font-size:0.85rem; }
            #onboarding-v2 .obv2-cred-names { gap:6px 12px; }
            #onboarding-v2 .obv2-cred-block { padding:15px 6px; }
        }
        /* Research-backed credential wall — real institution logos, greyscale tiles */
        #onboarding-v2 .obv2-credw-label { font-size:0.62rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:rgba(139,115,85,0.72); text-align:center; margin:2px auto 10px; }
        #onboarding-v2 .obv2-credw-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; max-width:362px; margin:0 auto 14px; }
        #onboarding-v2 .obv2-credw-tile { display:flex; align-items:center; justify-content:center; min-height:58px; padding:9px 14px; background:#FCF8F0; border:1px solid rgba(139,115,85,0.14); border-radius:14px; box-shadow:0 4px 16px rgba(80,60,40,0.05); opacity:0; transform:translateY(14px); animation:obv2DsumRise .7s cubic-bezier(0.22,1,0.36,1) forwards; }
        /* Logos render in their native brand colors */
        #onboarding-v2 .obv2-credw-tile img { max-height:28px; max-width:88%; height:auto; width:auto; object-fit:contain; display:block; }
        #onboarding-v2 .obv2-credw-tile--crest img { max-height:42px; max-width:72%; }
        #onboarding-v2 .obv2-credw-tile--mid img { max-height:34px; max-width:84%; }
        /* Text wordmarks (Harvard/Oxford/Yale) in their brand colors */
        #onboarding-v2 .obv2-credw-word { font-family:'Lora','Newsreader',Georgia,serif; font-weight:600; font-size:1.72rem; line-height:1; letter-spacing:-0.015em; text-align:center; max-width:92%; color:#574E44; }
        #onboarding-v2 .obv2-credw-word--harvard { color:#A51C30; }
        #onboarding-v2 .obv2-credw-word--yale { color:#00356B; }
        #onboarding-v2 .obv2-credw-word--oxford { color:#002147; }
        #onboarding-v2 .obv2-credw-tile:nth-child(1){animation-delay:.10s}
        #onboarding-v2 .obv2-credw-tile:nth-child(2){animation-delay:.18s}
        #onboarding-v2 .obv2-credw-tile:nth-child(3){animation-delay:.26s}
        #onboarding-v2 .obv2-credw-tile:nth-child(4){animation-delay:.34s}
        #onboarding-v2 .obv2-credw-tile:nth-child(5){animation-delay:.42s}
        #onboarding-v2 .obv2-credw-tile:nth-child(6){animation-delay:.50s}
        #onboarding-v2 .obv2-credw-tile:nth-child(7){animation-delay:.58s}
        #onboarding-v2 .obv2-credw-tile:nth-child(8){animation-delay:.66s}
        @media (max-width:380px) {
            #onboarding-v2 .obv2-credw-grid { gap:8px; max-width:340px; }
            #onboarding-v2 .obv2-credw-tile { min-height:60px; padding:10px 12px; }
            #onboarding-v2 .obv2-credw-tile img { max-height:28px; }
            #onboarding-v2 .obv2-credw-tile--crest img { max-height:46px; }
        }
        #onboarding-v2 .obv2-tech-list { list-style:none; padding:0; margin:0 auto 22px; display:flex; flex-direction:column; gap:12px; width:100%; max-width:400px; text-align:left; }
        #onboarding-v2 .obv2-tech-list li { display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border:1px solid rgba(139,115,85,0.14); border-radius:14px; background:rgba(255,255,255,0.75); box-shadow:0 1px 2px rgba(28,27,25,0.04); }
        #onboarding-v2 .obv2-tech-emoji { font-size:1.4rem; line-height:1; flex-shrink:0; margin-top:1px; }
        #onboarding-v2 .obv2-tech-body { display:flex; flex-direction:column; gap:2px; }
        #onboarding-v2 .obv2-tech-title { font-family:'Lora', Georgia, serif; font-size:1rem; font-weight:600; color:#3D3630; letter-spacing:-0.01em; }
        #onboarding-v2 .obv2-tech-sub { font-size:0.85rem; color:rgba(107,101,96,0.85); line-height:1.4; }
        @media (max-width:380px) {
            #onboarding-v2 .obv2-logo-cell { font-size:0.78rem; padding:7px 10px; min-width:68px; }
            #onboarding-v2 .obv2-tech-title { font-size:0.95rem; }
            #onboarding-v2 .obv2-tech-sub { font-size:0.82rem; }
        }

        /* CTA — matches landing .start-btn. Always anchored to the end of step
           content; long steps just scroll naturally to find it. */
        #onboarding-v2 .obv2-cta { position:relative; margin-top:36px; padding:17px 44px; border:none; border-radius:14px; background:#3D3630; color:#FAF8F5; font-family:inherit; font-size:1rem; font-weight:600; cursor:pointer; min-width:240px; max-width:340px; width:100%; transition:transform .22s ease, box-shadow .22s ease, opacity .2s; letter-spacing:0.005em; -webkit-tap-highlight-color:transparent; }
        #onboarding-v2 .obv2-cta:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(61,54,48,0.22); }
        #onboarding-v2 .obv2-cta:disabled { background:#ECE4D4; color:rgba(60,54,48,0.32); opacity:1; box-shadow:none; cursor:not-allowed; }

        /* ---- Step 23b: Therapist picker ---- */
        #onboarding-v2 .obv2-tt-toggle { display:inline-flex; gap:4px; margin:4px auto 20px; padding:4px; background:rgba(139,115,85,0.08); border-radius:999px; align-self:center; }
        #onboarding-v2 .obv2-tt-toggle-btn { padding:8px 26px; border:none; background:transparent; font-family:inherit; font-size:0.92rem; font-weight:600; color:#8B7355; letter-spacing:0.02em; border-radius:999px; cursor:pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; -webkit-tap-highlight-color:transparent; }
        #onboarding-v2 .obv2-tt-toggle-btn.active { background:#FAF8F5; color:#3D3630; box-shadow:0 2px 8px rgba(61,54,48,0.08); }
        #onboarding-v2 .obv2-tt-list { display:flex; flex-direction:column; gap:10px; width:100%; margin-bottom:6px; }
        #onboarding-v2 .obv2-tt-card { display:flex; align-items:center; gap:14px; padding:12px 16px; border:1px solid rgba(139,115,85,0.14); border-left:3px solid transparent; border-radius:14px; background:rgba(255,255,255,0.75); cursor:pointer; transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color:transparent; opacity:0; animation:obv2pillIn .4s cubic-bezier(0.22,0.61,0.36,1) forwards; }
        #onboarding-v2 .obv2-tt-card:nth-child(1) { animation-delay:80ms; }
        #onboarding-v2 .obv2-tt-card:nth-child(2) { animation-delay:140ms; }
        #onboarding-v2 .obv2-tt-card:nth-child(3) { animation-delay:200ms; }
        #onboarding-v2 .obv2-tt-card:nth-child(4) { animation-delay:260ms; }
        #onboarding-v2 .obv2-tt-card:nth-child(5) { animation-delay:320ms; }
        @media (hover:hover) {
            #onboarding-v2 .obv2-tt-card:hover { border-color:rgba(139,115,85,0.3); border-left-color:rgba(201,166,107,0.5); transform:translateY(-1px); box-shadow:0 4px 14px rgba(139,115,85,0.08); background:white; }
        }
        #onboarding-v2 .obv2-tt-card.selected { border-color:rgba(139,115,85,0.25); border-left:3px solid #C9A66B; background:white; box-shadow:0 4px 18px rgba(201,166,107,0.15); }
        #onboarding-v2 .obv2-tt-card img { width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 2px 8px rgba(61,54,48,0.10); }
        #onboarding-v2 .obv2-tt-meta { display:flex; flex-direction:column; gap:3px; align-items:flex-start; min-width:0; }
        #onboarding-v2 .obv2-tt-name { font-family:'Lora', Georgia, serif; font-size:1.12rem; font-weight:500; font-style:italic; color:#3D3630; letter-spacing:-0.01em; line-height:1.2; }
        #onboarding-v2 .obv2-tt-vibe { font-family:inherit; font-size:0.82rem; color:#8B7355; letter-spacing:-0.005em; line-height:1.35; text-align:left; }
        @media (max-width: 400px) {
            #onboarding-v2 .obv2-tt-toggle-btn { padding:8px 22px; font-size:0.88rem; }
            #onboarding-v2 .obv2-tt-card { padding:11px 14px; gap:12px; }
            #onboarding-v2 .obv2-tt-card img { width:58px; height:58px; }
            #onboarding-v2 .obv2-tt-name { font-size:1.05rem; }
            #onboarding-v2 .obv2-tt-vibe { font-size:0.78rem; }
        }
        #onboarding-v2 .obv2-cta.secondary { background:transparent; color:rgba(107,101,96,0.65); margin-top:10px; padding:10px 20px; min-width:0; font-weight:500; box-shadow:none; }
        #onboarding-v2 .obv2-cta.secondary:hover { transform:none; box-shadow:none; color:#3D3630; }
        #onboarding-v2 .obv2-cta.dark { background:#3D3630; }
        #onboarding-v2 .obv2-cta.full { width:100%; max-width:380px; }

        /* Step 0b — Quest greeting (chat-style typing) */
        #onboarding-v2 .obv2-step-greeting { max-width:480px; }
        #onboarding-v2 .obv2-greeting-row { display:flex; align-items:flex-end; gap:12px; width:100%; margin:0 0 8px; text-align:left; }
        #onboarding-v2 .obv2-greeting-avatar { flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#FAF8F5 0%,#F0EAE1 100%); border:1px solid rgba(139,115,85,0.22); box-shadow:0 6px 18px rgba(61,54,48,0.10), inset 0 0 0 1px rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:center; position:relative; animation:obv2GreetGlow 2.6s ease-in-out infinite; }
        #onboarding-v2 .obv2-greeting-avatar span { font-family:'Newsreader',Georgia,serif; font-optical-sizing:auto; font-variation-settings:'opsz' 144,'SOFT' 30; font-size:0.95rem; font-weight:400; color:#1C1B19; letter-spacing:-0.01em; line-height:1; }
        #onboarding-v2 .obv2-greeting-avatar span em { font-style:italic; font-weight:300; color:#8B5E3C; }
        @keyframes obv2GreetGlow { 0%,100% { box-shadow:0 6px 18px rgba(61,54,48,0.10), inset 0 0 0 1px rgba(255,255,255,0.5), 0 0 0 0 rgba(201,166,107,0.0); } 50% { box-shadow:0 6px 18px rgba(61,54,48,0.10), inset 0 0 0 1px rgba(255,255,255,0.5), 0 0 0 8px rgba(201,166,107,0.12); } }
        #onboarding-v2 .obv2-greeting-bubble { flex:1 1 auto; background:#F5F0E8; border:1px solid rgba(139,115,85,0.14); border-radius:18px 18px 18px 4px; padding:14px 16px; min-height:48px; color:#3D3630; font-family:inherit; font-size:1.02rem; line-height:1.5; letter-spacing:0.005em; box-shadow:0 4px 14px rgba(61,54,48,0.06); position:relative; }
        #onboarding-v2 .obv2-greeting-stack { flex:1 1 auto; display:flex; flex-direction:column; gap:8px; min-width:0; }
        #onboarding-v2 .obv2-greeting-stack .obv2-greeting-bubble { animation:obv2BubbleIn .35s cubic-bezier(0.22,0.61,0.36,1); }
        @keyframes obv2BubbleIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
        #onboarding-v2 .obv2-greeting-source { font-size:11px; color:rgba(107,101,96,0.75); letter-spacing:0.02em; padding:0 4px; margin-top:-2px; opacity:0; transition:opacity .45s ease; font-style:italic; }
        #onboarding-v2 .obv2-greeting-source.is-ready { opacity:1; }
        #onboarding-v2 .obv2-typing-dots { display:flex; gap:5px; padding:6px 2px; align-items:center; height:18px; }
        #onboarding-v2 .obv2-typing-dots span { width:7px; height:7px; border-radius:50%; background:rgba(61,54,48,0.42); animation:obv2Typing 1.1s ease-in-out infinite; }
        #onboarding-v2 .obv2-typing-dots span:nth-child(2) { animation-delay:0.15s; }
        #onboarding-v2 .obv2-typing-dots span:nth-child(3) { animation-delay:0.3s; }
        @keyframes obv2Typing { 0%,60%,100% { transform:translateY(0); opacity:0.38; } 30% { transform:translateY(-5px); opacity:0.95; } }
        #onboarding-v2 .obv2-greeting-text { white-space:pre-wrap; }
        #onboarding-v2 .obv2-greeting-text::after { content:'▍'; display:inline-block; margin-left:1px; color:rgba(61,54,48,0.55); animation:obv2Caret 0.9s steps(2) infinite; }
        #onboarding-v2 .obv2-greeting-text.done::after { display:none; }
        @keyframes obv2Caret { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
        #onboarding-v2 .obv2-greeting-cta { opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .45s ease, transform .45s ease; }
        #onboarding-v2 .obv2-greeting-cta.is-ready { opacity:1; pointer-events:auto; transform:translateY(0); }

        /* Top bar — full-width sticky strip so scrolled content can't bleed through the header */
        #onboarding-v2 .obv2-topbar-bg { position:fixed; top:0; left:0; right:0; height:calc(env(safe-area-inset-top,0px) + 72px); background:#FAF8F5; border-bottom:1px solid rgba(28,27,25,0.06); z-index:300; pointer-events:none; }
        /* Paywall step ships its own sticky bar — hide the global topbar there */
        #onboarding-v2:has(.obv2-step-pw.active) .obv2-topbar-bg,
        #onboarding-v2:has(.obv2-step-pw.active) .obv2-brand,
        #onboarding-v2:has(.obv2-step-pw.active) .obv2-progress,
        #onboarding-v2:has(.obv2-step-pw.active) .obv2-back { display:none !important; }
        /* Strip container padding on the paywall step so its sticky bar sits flush against the viewport top */
        #onboarding-v2:has(.obv2-step-pw.active) { padding:0 !important; align-items:stretch !important; justify-content:flex-start !important; }
        /* 10bb plan reveal is a cinematic full-bleed moment — hide all chrome so the line/chart owns the frame */
        #onboarding-v2:has(.obv2-step-levelchart.active) .obv2-topbar-bg,
        #onboarding-v2:has(.obv2-step-levelchart.active) .obv2-brand,
        #onboarding-v2:has(.obv2-step-levelchart.active) .obv2-progress,
        #onboarding-v2:has(.obv2-step-levelchart.active) .obv2-back { display:none !important; }
        /* recs_loading is a brief auto-advancing theatre beat — hide all chrome for the same cinematic feel */
        #onboarding-v2:has(.obv2-step-recsload.active) .obv2-topbar-bg,
        #onboarding-v2:has(.obv2-step-recsload.active) .obv2-brand,
        #onboarding-v2:has(.obv2-step-recsload.active) .obv2-progress,
        #onboarding-v2:has(.obv2-step-recsload.active) .obv2-back { display:none !important; }
        /* diag score reveal is a result moment — drop the fixed topbar so nothing can overlap the eyebrow on notch devices */
        #onboarding-v2:has(.obv2-step-diag.active) .obv2-topbar-bg,
        #onboarding-v2:has(.obv2-step-diag.active) .obv2-brand,
        #onboarding-v2:has(.obv2-step-diag.active) .obv2-progress { display:none !important; }
        /* Back + progress */
        #onboarding-v2 .obv2-back { position:fixed; top:calc(env(safe-area-inset-top,0px) + 16px); left:16px; width:40px; height:40px; border-radius:50%; background:transparent; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#3D3630; z-index:301; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s, opacity .2s; }
        #onboarding-v2 .obv2-back:hover { background:rgba(28,27,25,0.05); }
        #onboarding-v2 .obv2-back svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
        #onboarding-v2 .obv2-brand { position:fixed; top:calc(env(safe-area-inset-top,0px) + 20px); left:50%; transform:translateX(-50%); font-family:'Newsreader',Georgia,serif; font-optical-sizing:auto; font-size:1.2rem; font-weight:400; font-variation-settings:'opsz' 144,'SOFT' 30; letter-spacing:-0.01em; color:#1C1B19; text-decoration:none; line-height:1; z-index:301; }
        #onboarding-v2 .obv2-brand em { font-style:normal; font-weight:inherit; color:inherit; }
        #onboarding-v2 .obv2-progress { position:fixed; top:calc(env(safe-area-inset-top,0px) + 60px); left:50%; transform:translateX(-50%); width:min(200px,38vw); height:2px; background:rgba(139,115,85,0.14); border-radius:1px; overflow:hidden; z-index:301; }
        #onboarding-v2 .obv2-progress-bar { height:100%; background:#C9A66B; width:0%; transition:width .45s cubic-bezier(0.22,0.61,0.36,1); border-radius:1px; }

        /* Menu drawer (used by quiz-intro hamburger only) */
        .obv2-drawer { position:fixed; inset:0; z-index:10500; pointer-events:none; }
        .obv2-drawer.active { pointer-events:auto; }
        .obv2-drawer-backdrop { position:absolute; inset:0; background:rgba(20,15,10,0.32); opacity:0; transition:opacity .3s ease; }
        .obv2-drawer.active .obv2-drawer-backdrop { opacity:1; }
        .obv2-drawer-panel { position:absolute; top:0; right:0; width:min(440px,92vw); height:100vh; height:100dvh; background:var(--q-canvas,#FAFAF7); transform:translateX(100%); transition:transform .38s cubic-bezier(0.22,0.61,0.36,1); display:flex; flex-direction:column; }
        .obv2-drawer.active .obv2-drawer-panel { transform:translateX(0); box-shadow:-18px 0 48px rgba(20,15,10,0.14); }
        /* PERF (iOS): these chat/dashboard overlays are never opened during onboarding,
           but stay rendered (opacity:0) while closed — each holds its own fixed GPU layer
           and inflates iOS scroll/tap cost (sync-scroll path, layout, transition tracking).
           While onboarding is active, fully unmount the CLOSED ones. The :not(.active) guard
           means an open overlay is never hidden, so no feature can break. On old iOS without
           :has() the rule is simply ignored (current behavior, no regression). */
        body:has(#onboarding-v2.active) #journey-panel:not(.active),
        body:has(#onboarding-v2.active) #journey-backdrop:not(.active),
        body:has(#onboarding-v2.active) #journal-panel:not(.active),
        body:has(#onboarding-v2.active) #journal-backdrop:not(.active),
        body:has(#onboarding-v2.active) #progress-panel:not(.active),
        body:has(#onboarding-v2.active) #bs-reveal-popup:not(.active),
        body:has(#onboarding-v2.active) #bs-reveal-backdrop:not(.active),
        body:has(#onboarding-v2.active) .q-l-atmosphere { display: none !important; }
        .obv2-drawer-head { display:flex; align-items:center; justify-content:flex-end; padding:calc(env(safe-area-inset-top,0px) + 18px) 22px 14px; }
        .obv2-drawer-close { width:38px; height:38px; border-radius:50%; background:transparent; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--q-ink,#1C1B19); padding:0; transition:opacity .2s; opacity:0.7; }
        .obv2-drawer-close:hover { opacity:1; }
        .obv2-drawer-close svg { width:18px; height:18px; }
        .obv2-drawer-nav { flex:1; overflow-y:auto; display:flex; flex-direction:column; padding:8px 30px calc(env(safe-area-inset-bottom,0px) + 36px); -webkit-overflow-scrolling:touch; gap:2px; }
        .obv2-drawer-nav a { font-family:'Newsreader',Georgia,serif; font-variation-settings:'opsz' 100; font-size:1.45rem; font-weight:400; color:var(--q-ink,#1C1B19); letter-spacing:-0.01em; padding:18px 4px; text-decoration:none; line-height:1.25; transition:color .15s; }
        .obv2-drawer-nav a:hover { color:var(--q-sage-deep,#8B5E3C); }
        @media (max-width:600px) { .obv2-drawer-nav a { font-size:1.3rem; padding:16px 4px; } }

        /* DOB + Phone inputs */
        /* iOS-style scroll wheel date picker */
        #onboarding-v2 .obv2-dob-wheel { position:relative; width:100%; max-width:360px; height:220px; display:flex; gap:8px; margin:8px auto 22px; padding:0 4px; user-select:none; -webkit-user-select:none; touch-action:pan-y; }
        #onboarding-v2 .obv2-wheel-highlight { position:absolute; left:0; right:0; top:calc(50% - 22px); height:44px; pointer-events:none; border-top:1px solid rgba(139,115,85,0.22); border-bottom:1px solid rgba(139,115,85,0.22); background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.75)); border-radius:4px; z-index:0; }
        #onboarding-v2 .obv2-wheel-col { position:relative; z-index:1; flex:1; height:100%; overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 18%, #000 42%, #000 58%, rgba(0,0,0,0.35) 82%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 18%, #000 42%, #000 58%, rgba(0,0,0,0.35) 82%, transparent 100%); }
        #onboarding-v2 .obv2-wheel-col::-webkit-scrollbar { display:none; }
        #onboarding-v2 .obv2-wheel-col-narrow { flex:0.65; }
        #onboarding-v2 .obv2-wheel-track { padding-top:88px; padding-bottom:88px; }
        #onboarding-v2 .obv2-wheel-item { height:44px; line-height:44px; text-align:center; scroll-snap-align:center; font-family:'Lora',serif; font-size:1.05rem; font-weight:500; color:rgba(60,54,48,0.55); cursor:pointer; transition:color 0.15s ease; -webkit-tap-highlight-color:transparent; }
        #onboarding-v2 .obv2-wheel-item.is-selected { color:#2D2A26; }
        /* Single-column variant — companion age */
        #onboarding-v2 .obv2-age-wheel { max-width:220px; }
        #onboarding-v2 .obv2-wheel-col-age .obv2-wheel-item { font-size:1.55rem; letter-spacing:0.01em; }
        #onboarding-v2 .obv2-wheel-col-age .obv2-wheel-item.is-selected { font-weight:600; }
        /* Single-column variant — bedtime / wake time */
        #onboarding-v2 .obv2-time-wheel { max-width:200px; }
        #onboarding-v2 .obv2-wheel-col-time .obv2-wheel-item { font-size:1.4rem; letter-spacing:0.01em; }
        #onboarding-v2 .obv2-wheel-col-time .obv2-wheel-item.is-selected { font-weight:600; }
        #onboarding-v2 .obv2-phone { width:100%; padding:16px; border:1px solid rgba(139,115,85,0.16); border-radius:12px; font-family:inherit; font-size:1rem; text-align:center; margin-bottom:10px; background:white; color:#3D3630; }
        #onboarding-v2 .obv2-text-input { width:100%; padding:16px; border:1px solid rgba(139,115,85,0.16); border-radius:12px; font-family:'Lora',serif; font-size:1.15rem; text-align:center; margin:8px 0 14px; background:white; color:#3D3630; letter-spacing:0.01em; }
        #onboarding-v2 .obv2-text-input:focus { outline:none; border-color:#C9A66B; box-shadow:0 0 0 3px rgba(201,166,107,0.15); }
        #onboarding-v2 .obv2-phone:focus { outline:none; border-color:#C9A66B; box-shadow:0 0 0 3px rgba(201,166,107,0.15); }

        /* Graphs */
        #onboarding-v2 .obv2-graph { width:100%; height:220px; background:white; border-radius:14px; border:1px solid rgba(139,115,85,0.1); padding:18px; margin-bottom:22px; position:relative; box-shadow:0 2px 12px rgba(139,115,85,0.04); }
        #onboarding-v2 .obv2-graph svg { width:100%; height:100%; }

        /* Sliders */
        #onboarding-v2 .obv2-slider-block { width:100%; margin:10px 0 20px; }
        #onboarding-v2 .obv2-slider-anchors { display:flex; justify-content:space-between; font-size:0.78rem; color:rgba(107,101,96,0.7); margin-top:18px; margin-bottom:10px; letter-spacing:0.01em; }
        #onboarding-v2 .obv2-slider-val { font-size:2.6rem; font-weight:600; color:#3D3630; text-align:center; margin:6px 0 18px; font-family:'Lora',serif; letter-spacing:-0.02em; }
        #onboarding-v2 .obv2-slider-wrap { position:relative; }
        #onboarding-v2 .obv2-slider { -webkit-appearance:none; appearance:none; width:100%; height:4px; background:rgba(139,115,85,0.18); border-radius:2px; outline:none; }
        #onboarding-v2 .obv2-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:28px; height:28px; border-radius:50%; background:#3D3630; cursor:pointer; border:3px solid #FAF8F5; box-shadow:0 2px 10px rgba(61,54,48,0.25); transition:transform .15s; }
        #onboarding-v2 .obv2-slider::-webkit-slider-thumb:hover { transform:scale(1.08); }
        #onboarding-v2 .obv2-slider::-moz-range-thumb { width:28px; height:28px; border-radius:50%; background:#3D3630; cursor:pointer; border:3px solid #FAF8F5; }

        /* Intensity descriptor box */
        #onboarding-v2 .obv2-intensity-box { width:100%; padding:18px 20px; background:rgba(201,166,107,0.08); border-left:3px solid #C9A66B; border-radius:10px; font-size:0.95rem; color:#3D3630; margin-top:18px; text-align:left; min-height:60px; font-family:'Lora',serif; font-style:italic; }

        /* Mechanism check table */
        #onboarding-v2 .obv2-check-table { width:100%; background:white; border-radius:12px; padding:14px 20px 10px; border:1px solid rgba(139,115,85,0.1); margin-bottom:20px; box-shadow:0 2px 12px rgba(139,115,85,0.04); }
        #onboarding-v2 .obv2-check-row { display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid rgba(139,115,85,0.08); font-size:0.93rem; text-align:left; }
        #onboarding-v2 .obv2-check-row:last-child { border-bottom:none; }
        #onboarding-v2 .obv2-check-row .obv2-check-label { flex:1; color:#3D3630; padding-right:14px; line-height:1.35; }
        #onboarding-v2 .obv2-check-row .obv2-check-cell { flex:0 0 62px; text-align:center; font-weight:600; font-size:0.95rem; }
        #onboarding-v2 .obv2-check-cell.y { color:#C9A66B; }
        #onboarding-v2 .obv2-check-cell.n { color:rgba(107,101,96,0.3); }
        #onboarding-v2 .obv2-check-header { display:flex; justify-content:flex-end; padding:0 0 10px; font-size:0.7rem; font-weight:600; color:rgba(107,101,96,0.7); text-transform:uppercase; letter-spacing:0.09em; border-bottom:1px solid rgba(139,115,85,0.1); }
        #onboarding-v2 .obv2-check-header span { flex:0 0 62px; text-align:center; }

        /* Reviews */
        #onboarding-v2 .obv2-review-card { width:100%; background:#FCF8F0; border-radius:14px; border:1px solid rgba(139,115,85,0.14); padding:14px 16px; margin-bottom:12px; text-align:left; box-shadow:0 4px 16px rgba(80,60,40,0.05); }
        #onboarding-v2 .obv2-review-head { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
        #onboarding-v2 .obv2-review-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; background:rgba(139,115,85,0.08); }
        #onboarding-v2 .obv2-review-name { font-family:'DM Sans',sans-serif; font-size:0.86rem; font-weight:700; color:#2D2A26; flex:1; min-width:0; }
        #onboarding-v2 .obv2-review-stars { display:inline-flex; gap:2px; color:#C9A66B; flex-shrink:0; }
        #onboarding-v2 .obv2-review-stars svg { width:14px; height:14px; display:block; }
        #onboarding-v2 .obv2-review-text { font-family:'DM Sans',sans-serif; font-size:0.875rem; line-height:1.5; color:rgba(60,54,48,0.82); }
        /* Step 22 — tighter title so all 3 reviews fit on screen */
        #onboarding-v2 .obv2-title-tight { font-size:1.35rem; line-height:1.25; margin-bottom:6px; }
        #onboarding-v2 .obv2-step-social .obv2-sub { margin-bottom:12px; font-size:0.85rem; }
        /* Step 22 — trust strip (CalAI-style: rating + avatar cluster) */
        #onboarding-v2 .obv2-trust-strip { display:flex; align-items:center; justify-content:center; gap:22px; margin:0 0 16px; }
        #onboarding-v2 .obv2-trust-block { text-align:center; }
        #onboarding-v2 .obv2-trust-stars { display:inline-flex; gap:1.5px; color:#C9A66B; margin-bottom:3px; }
        #onboarding-v2 .obv2-trust-stars svg { width:12px; height:12px; display:block; }
        #onboarding-v2 .obv2-trust-num { font-family:'Lora',serif; font-weight:700; font-size:0.95rem; color:#2D2A26; line-height:1; }
        #onboarding-v2 .obv2-trust-label { font-size:0.66rem; color:#8A7F74; margin-top:3px; letter-spacing:0.02em; }
        #onboarding-v2 .obv2-trust-avatars { display:flex; justify-content:center; margin-bottom:4px; }
        #onboarding-v2 .obv2-trust-avatars img { width:28px; height:28px; border-radius:50%; object-fit:cover; border:2px solid white; box-shadow:0 1px 3px rgba(0,0,0,0.1); margin-left:-8px; background:rgba(139,115,85,0.08); }
        #onboarding-v2 .obv2-trust-avatars img:first-child { margin-left:0; }
        #onboarding-v2 .obv2-trust-divider { width:1px; height:36px; background:rgba(139,115,85,0.15); }
        /* Social-proof header on the score-calculating theatre — headline anchors the proof block */
        #onboarding-v2 .obv2-cs-proof { display:flex; flex-direction:column; align-items:center; gap:9px; margin:2px 0 18px; }
        #onboarding-v2 .obv2-cs-proof .obv2-trust-avatars { margin:0; }
        #onboarding-v2 .obv2-cs-proof .obv2-trust-avatars img { width:30px; height:30px; }
        #onboarding-v2 .obv2-cs-proof-headline { font-family:'Lora','Newsreader',Georgia,serif; font-weight:600; font-size:1.2rem; line-height:1.25; color:#3D3630; letter-spacing:-0.01em; text-align:center; margin:0; }
        #onboarding-v2 .obv2-cs-proof-rating { display:inline-flex; align-items:center; gap:7px; }
        #onboarding-v2 .obv2-cs-proof-rating .obv2-trust-stars { margin:0; }
        #onboarding-v2 .obv2-cs-proof-rating-text { font-size:0.74rem; color:#8A7F74; letter-spacing:0.01em; }

        /* ── Personalized feature add-on screens (Story Mode, Adaptive Mood & Memory) ──
           Premium card-led layout, intentionally distinct from the question screens. */
        #onboarding-v2 .obv2-step-feat { justify-content:flex-start; padding-top:clamp(6px,1.8vh,16px); }
        #onboarding-v2 .obv2-feat-card { position:relative; width:100%; max-width:430px; margin:0 auto; border-radius:24px; overflow:hidden; background:#FFFFFF; border:1px solid rgba(139,115,85,0.16); box-shadow:0 16px 44px rgba(80,60,40,0.12); }

        #onboarding-v2 .obv2-feat-media { position:relative; width:100%; aspect-ratio:20/9; overflow:hidden; background:rgba(139,115,85,0.06); }
        #onboarding-v2 .obv2-feat-photo { width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
        #onboarding-v2 .obv2-feat-media::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:34px; background:linear-gradient(to bottom, rgba(255,255,255,0), #FFFFFF); pointer-events:none; }

        #onboarding-v2 .obv2-feat-badge { position:absolute; top:14px; left:14px; z-index:2; font-family:'DM Sans',sans-serif; font-size:0.62rem; font-weight:700; letter-spacing:0.13em; text-transform:uppercase; color:#A4682F; background:rgba(255,255,255,0.94); border:1px solid rgba(255,255,255,0.65); padding:6px 12px; border-radius:100px; box-shadow:0 3px 12px rgba(40,28,16,0.20); }
        #onboarding-v2 .obv2-feat-badge.beta { color:#8A5070; }

        #onboarding-v2 .obv2-feat-body { padding:clamp(18px,2.8vh,24px) clamp(20px,5.4vw,26px) clamp(16px,2.6vh,22px); text-align:center; }
        #onboarding-v2 .obv2-feat-title { font-family:'Lora','Newsreader',Georgia,serif; font-weight:600; font-size:clamp(1.5rem,6.2vw,1.82rem); line-height:1.18; color:#2D2A26; margin:0 0 5px; letter-spacing:-0.01em; }
        #onboarding-v2 .obv2-feat-tagline { font-family:'Lora',serif; font-style:italic; font-size:1rem; color:#B07A3F; margin:0 0 18px; }
        #onboarding-v2 .obv2-feat-points { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px; text-align:left; }
        #onboarding-v2 .obv2-feat-point { display:flex; align-items:flex-start; gap:11px; font-family:'DM Sans',sans-serif; font-size:0.88rem; line-height:1.4; color:#3D3630; }
        #onboarding-v2 .obv2-feat-point-ic { flex-shrink:0; width:22px; height:22px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; background:rgba(201,166,107,0.16); margin-top:1px; }
        #onboarding-v2 .obv2-feat-point-ic svg { width:13px; height:13px; stroke:#B07A3F; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

        #onboarding-v2 .obv2-feat-add { display:block; width:100%; max-width:none; margin:clamp(18px,3vh,24px) 0 0; }
        #onboarding-v2 .obv2-feat-skip { width:100%; background:none; border:none; font-family:'DM Sans',sans-serif; font-size:0.92rem; font-weight:600; color:#8A7F74; padding:13px 13px 2px; cursor:pointer; transition:color .2s; }
        #onboarding-v2 .obv2-feat-skip:hover { color:#3D3630; }
        #onboarding-v2 .obv2-feat-note { max-width:430px; margin:9px auto 0; text-align:center; font-family:'DM Sans',sans-serif; font-size:0.74rem; line-height:1.45; color:#9A8F84; }

        /* Adaptive Mood & Memory — cooler dusty-rose/mauve accent so the two add-ons read distinct */
        #onboarding-v2 .obv2-feat-adaptive .obv2-feat-badge.beta { color:#8A5070; }
        #onboarding-v2 .obv2-feat-adaptive .obv2-feat-tagline { color:#9C6080; }
        #onboarding-v2 .obv2-feat-adaptive .obv2-feat-point-ic { background:rgba(156,96,128,0.15); }
        #onboarding-v2 .obv2-feat-adaptive .obv2-feat-point-ic svg { stroke:#9C6080; }

        /* Fine print */
        #onboarding-v2 .obv2-fine-print { font-size:0.75rem; color:rgba(107,101,96,0.6); margin:10px 0; line-height:1.5; }

        /* Loading (step 25) — slow gold rule drawing across */
        #onboarding-v2 .obv2-loading-wrap { width:100%; padding:22px 0; }
        #onboarding-v2 .obv2-loading-meta { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; font-family:'IBM Plex Mono','SF Mono','Menlo',monospace; }
        #onboarding-v2 .obv2-loading-pct { font-size:1.45rem; font-weight:500; color:#3D3630; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
        #onboarding-v2 .obv2-loading-status { font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:rgba(139,115,85,0.7); transition:color .3s; }
        #onboarding-v2 .obv2-loading-status.ready { color:#C9A66B; }
        #onboarding-v2 .obv2-loading-status .obv2-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#C9A66B; margin-right:7px; vertical-align:middle; animation:obv2LoadDot 1.3s ease-in-out infinite; }
        #onboarding-v2 .obv2-loading-status.ready .obv2-dot { animation:none; background:#C9A66B; }
        @keyframes obv2LoadDot { 0%,100% { opacity:0.25; transform:scale(0.85); } 50% { opacity:1; transform:scale(1.15); } }
        #onboarding-v2 .obv2-loading-bar { width:100%; height:3px; background:rgba(139,115,85,0.14); border-radius:2px; overflow:hidden; margin-bottom:28px; position:relative; }
        #onboarding-v2 .obv2-loading-fill { height:100%; background:linear-gradient(90deg, #C9A66B 0%, #D9B680 100%); width:0%; border-radius:2px; }
        #onboarding-v2 .obv2-loading-item { display:flex; align-items:center; gap:14px; padding:11px 0; font-size:0.95rem; color:rgba(107,101,96,0.4); opacity:0.55; transition: background-color .35s, border-color .35s, color .35s, box-shadow .35s, transform .35s, opacity .35s; text-align:left; font-family:'Lora',serif; }
        #onboarding-v2 .obv2-loading-item.active { opacity:1; color:#3D3630; }
        #onboarding-v2 .obv2-loading-item.done { opacity:0.75; color:rgba(107,101,96,0.85); }
        #onboarding-v2 .obv2-load-check { width:20px; height:20px; border-radius:50%; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
        #onboarding-v2 .obv2-loading-item.done .obv2-load-check { background:#C9A66B; border-color:#C9A66B; color:white; }

        /* Reveal (step 26) — intake dossier */
        #onboarding-v2 .obv2-hero { width:100%; background:white; border-radius:16px; padding:28px 24px 24px; box-shadow:0 6px 28px rgba(139,115,85,0.08); margin-bottom:18px; display:flex; flex-direction:column; align-items:center; border:1px solid rgba(139,115,85,0.08); position:relative; }
        #onboarding-v2 .obv2-hero::before { content:""; display:block; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:60px; height:2px; background:#C9A66B; border-radius:0 0 2px 2px; }
        #onboarding-v2 .obv2-hero img { width:150px; height:188px; border-radius:10px; object-fit:cover; margin-bottom:18px; border:1px solid rgba(139,115,85,0.14); box-shadow:0 8px 24px rgba(61,54,48,0.12); }
        #onboarding-v2 .obv2-hero-name { font-family:'Lora',serif; font-size:1.55rem; font-weight:600; color:#3D3630; margin-bottom:2px; letter-spacing:-0.01em; }
        #onboarding-v2 .obv2-hero-tag { font-size:0.72rem; font-weight:600; color:#C9A66B; margin-bottom:14px; text-transform:uppercase; letter-spacing:0.18em; position:relative; padding:6px 0; }
        #onboarding-v2 .obv2-hero-tag::before, #onboarding-v2 .obv2-hero-tag::after { content:""; display:inline-block; width:20px; height:1px; background:rgba(201,166,107,0.55); vertical-align:middle; margin:0 8px; }
        #onboarding-v2 .obv2-hero-blurb { font-size:0.93rem; color:rgba(107,101,96,0.9); line-height:1.55; text-align:center; font-family:'Lora',serif; font-style:italic; }

        #onboarding-v2 .obv2-block { width:100%; background:white; border-radius:12px; padding:20px 22px; margin-bottom:12px; text-align:left; border:1px solid rgba(139,115,85,0.1); border-left:3px solid rgba(201,166,107,0.4); }
        #onboarding-v2 .obv2-block h3 { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.15em; color:rgba(107,101,96,0.75); margin:0 0 14px; font-family:inherit; }
        #onboarding-v2 .obv2-block p.insight { font-size:1rem; line-height:1.6; color:#3D3630; font-family:'Lora',serif; font-style:italic; margin:0; }
        #onboarding-v2 .obv2-profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        #onboarding-v2 .obv2-profile-cell { padding:12px 14px; background:rgba(250,248,245,0.7); border:1px solid rgba(139,115,85,0.08); border-radius:8px; }
        #onboarding-v2 .obv2-profile-cell small { font-size:0.65rem; color:rgba(107,101,96,0.7); text-transform:uppercase; letter-spacing:0.12em; display:block; margin-bottom:5px; font-weight:600; }
        #onboarding-v2 .obv2-profile-cell strong { font-size:0.98rem; color:#3D3630; font-weight:600; font-family:'Lora',serif; }
        #onboarding-v2 .obv2-bullet { display:flex; gap:12px; margin-bottom:12px; font-size:0.93rem; line-height:1.55; color:#3D3630; }
        #onboarding-v2 .obv2-bullet:last-child { margin-bottom:0; }
        #onboarding-v2 .obv2-bullet:before { content:""; flex:0 0 14px; height:1px; background:#C9A66B; margin-top:11px; }
        #onboarding-v2 .obv2-citation { font-size:0.86rem; color:rgba(107,101,96,0.8); padding:5px 0; position:relative; padding-left:16px; }
        #onboarding-v2 .obv2-citation:before { content:""; position:absolute; left:0; top:50%; width:8px; height:1px; background:#C9A66B; }

        /* ============================================================
           Step 26 Dashboard (Cal-AI-analog reveal, outcome-first)
           ============================================================ */
        #onboarding-v2 .obv2-step.obv2-dash { max-width:460px; padding-bottom:8px; }
        #onboarding-v2 .obv2-dash * { box-sizing:border-box; }

        /* Sections: fade + rise on scroll-in */
        #onboarding-v2 .obv2-dash-section { width:100%; opacity:0; transform:translateY(18px); transition:opacity 700ms cubic-bezier(0.22,0.61,0.36,1), transform 700ms cubic-bezier(0.22,0.61,0.36,1); }
        #onboarding-v2 .obv2-dash-section.visible { opacity:1; transform:translateY(0); }

        /* Section dividers with monospace chapter label */
        #onboarding-v2 .obv2-dash-marker { display:flex; align-items:center; gap:14px; width:100%; margin:30px 0 20px; opacity:0; transform:translateY(10px); transition:opacity 700ms ease 150ms, transform 700ms ease 150ms; }
        #onboarding-v2 .obv2-dash-marker.visible { opacity:1; transform:translateY(0); }
        #onboarding-v2 .obv2-dash-marker .hairline { flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(139,115,85,0.22), rgba(139,115,85,0.22), transparent); }
        #onboarding-v2 .obv2-dash-marker .label { font-family:'IBM Plex Mono','SF Mono','Menlo',monospace; font-size:0.68rem; font-weight:500; color:rgba(107,101,96,0.7); letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap; }

        /* ---- Section 1: Hero + Readiness ring ---- */
        #onboarding-v2 .obv2-dash-hero { display:flex; flex-direction:column; align-items:center; padding:8px 0 22px; position:relative; }
        #onboarding-v2 .obv2-dash-hero::before { content:""; position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:72px; height:2px; background:linear-gradient(90deg, transparent, #C9A66B, transparent); border-radius:2px; }
        #onboarding-v2 .obv2-dash-hero img { width:136px; height:170px; border-radius:12px; object-fit:cover; border:1px solid rgba(139,115,85,0.18); box-shadow:0 14px 36px rgba(61,54,48,0.16), 0 2px 6px rgba(61,54,48,0.06); margin-bottom:18px; }
        #onboarding-v2 .obv2-dash-hero-name { font-family:'Lora',serif; font-size:1.75rem; font-weight:500; font-style:italic; color:#3D3630; letter-spacing:-0.015em; margin-bottom:4px; }
        #onboarding-v2 .obv2-dash-hero-tag { font-family:'IBM Plex Mono','SF Mono','Menlo',monospace; font-size:0.68rem; font-weight:500; color:#8B7355; letter-spacing:0.24em; text-transform:uppercase; padding:4px 0 2px; }

        #onboarding-v2 .obv2-dash-ring-wrap { position:relative; width:160px; height:160px; margin:12px auto 10px; display:flex; align-items:center; justify-content:center; }
        #onboarding-v2 .obv2-dash-ring { display:block; }
        #onboarding-v2 .obv2-dash-ring .track { fill:none; stroke:rgba(139,115,85,0.12); stroke-width:6; }
        #onboarding-v2 .obv2-dash-ring .fill { fill:none; stroke:url(#obv2DashRingGrad); stroke-width:6; stroke-linecap:round; stroke-dasharray:377; stroke-dashoffset:377; transition:stroke-dashoffset 1600ms cubic-bezier(0.22,0.61,0.36,1) 250ms; }
        #onboarding-v2 .obv2-dash-ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
        #onboarding-v2 .obv2-dash-ring-center .n { font-family:'Lora',serif; font-weight:600; font-size:2.4rem; color:#3D3630; line-height:1; letter-spacing:-0.02em; }
        #onboarding-v2 .obv2-dash-ring-center .l { font-family:'IBM Plex Mono','SF Mono','Menlo',monospace; font-size:0.62rem; color:rgba(107,101,96,0.75); letter-spacing:0.2em; text-transform:uppercase; margin-top:5px; }
        #onboarding-v2 .obv2-dash-ring-caption { text-align:center; font-size:0.82rem; color:rgba(107,101,96,0.85); font-family:'Lora',serif; font-style:italic; padding:0 20px; max-width:340px; margin:4px auto 0; line-height:1.45; }

        /* ---- Section 2: Macros ---- */
        #onboarding-v2 .obv2-dash-macros { width:100%; background:white; border:1px solid rgba(139,115,85,0.12); border-radius:14px; padding:22px 20px; display:flex; gap:22px; align-items:stretch; box-shadow:0 2px 14px rgba(61,54,48,0.04); }
        #onboarding-v2 .obv2-dash-macros-main { flex:0 0 90px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid rgba(139,115,85,0.1); padding-right:18px; }
        #onboarding-v2 .obv2-dash-macros-main .big { font-family:'Lora',serif; font-weight:600; font-size:2.6rem; color:#3D3630; line-height:1; letter-spacing:-0.02em; }
        #onboarding-v2 .obv2-dash-macros-main .sm { font-family:'IBM Plex Mono','SF Mono','Menlo',monospace; font-size:0.62rem; color:rgba(107,101,96,0.8); letter-spacing:0.14em; text-transform:uppercase; margin-top:8px; text-align:center; line-height:1.4; }
        #onboarding-v2 .obv2-dash-macros-bars { flex:1; display:flex; flex-direction:column; gap:13px; justify-content:center; }
        #onboarding-v2 .obv2-dash-bar { display:flex; flex-direction:column; gap:5px; }
        #onboarding-v2 .obv2-dash-bar-head { display:flex; justify-content:space-between; font-size:0.82rem; color:#3D3630; font-weight:500; }
        #onboarding-v2 .obv2-dash-bar-head span:last-child { color:#8B7355; font-family:'IBM Plex Mono','SF Mono','Menlo',monospace; font-size:0.75rem; font-weight:600; letter-spacing:0.02em; }
        #onboarding-v2 .obv2-dash-bar-track { height:6px; background:rgba(139,115,85,0.1); border-radius:3px; overflow:hidden; }
        #onboarding-v2 .obv2-dash-bar-fill { height:100%; width:0%; background:linear-gradient(90deg, #C9A66B, #8B7355); border-radius:3px; transition:width 1400ms cubic-bezier(0.22,0.61,0.36,1) 200ms; }
        #onboarding-v2 .obv2-dash-macros-caption { font-size:0.78rem; color:rgba(107,101,96,0.85); font-family:'IBM Plex Mono','SF Mono','Menlo',monospace; padding:10px 4px 0; letter-spacing:0.02em; text-align:center; }

        /* ---- Section 3: Techniques ---- */
        #onboarding-v2 .obv2-dash-tech-title { font-family:'Lora',serif; font-size:1.15rem; font-weight:500; color:#3D3630; text-align:center; margin-bottom:18px; letter-spacing:-0.01em; }
        #onboarding-v2 .obv2-dash-tech-list { display:flex; flex-direction:column; gap:12px; }
        #onboarding-v2 .obv2-dash-tech-item { background:white; border:1px solid rgba(139,115,85,0.12); border-left:3px solid #C9A66B; border-radius:10px; padding:14px 16px; text-align:left; transition:transform 300ms ease, box-shadow 300ms ease; }
        #onboarding-v2 .obv2-dash-tech-item:hover { transform:translateX(2px); box-shadow:0 2px 10px rgba(61,54,48,0.05); }
        #onboarding-v2 .obv2-dash-tech-name { font-weight:600; font-size:0.96rem; color:#3D3630; margin-bottom:3px; letter-spacing:-0.005em; }
        #onboarding-v2 .obv2-dash-tech-for { font-family:'Lora',serif; font-style:italic; font-size:0.84rem; color:rgba(107,101,96,0.88); line-height:1.45; }
        #onboarding-v2 .obv2-dash-tech-citation { font-family:'IBM Plex Mono','SF Mono','Menlo',monospace; font-size:0.66rem; color:rgba(139,115,85,0.7); letter-spacing:0.08em; margin-top:6px; }

        /* ---- Section 4: Path / how-to-reach-your-goal ---- */
        #onboarding-v2 .obv2-dash-path-title { font-family:'Lora',serif; font-size:1.15rem; font-weight:500; color:#3D3630; text-align:center; margin-bottom:18px; letter-spacing:-0.01em; }
        #onboarding-v2 .obv2-dash-path-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
        #onboarding-v2 .obv2-dash-path-list li { display:flex; align-items:flex-start; gap:12px; font-size:0.94rem; color:#3D3630; line-height:1.48; text-align:left; padding:12px 14px; background:white; border:1px solid rgba(139,115,85,0.1); border-radius:10px; }
        #onboarding-v2 .obv2-dash-path-list li::before { content:""; flex:0 0 18px; height:18px; margin-top:1px; border-radius:50%; background:#C9A66B; background-image:linear-gradient(135deg, #C9A66B, #8B7355); position:relative; }
        #onboarding-v2 .obv2-dash-path-list li .check { position:absolute; width:18px; height:18px; margin-top:1px; border-radius:50%; background:linear-gradient(135deg, #C9A66B, #8B7355); display:flex; align-items:center; justify-content:center; color:white; font-size:0.72rem; font-weight:700; }

        /* ---- Sticky CTA ---- */
        #onboarding-v2 .obv2-dash-sticky-spacer { height:96px; width:100%; }
        #onboarding-v2 .obv2-dash-sticky { position:sticky; bottom:0; left:0; right:0; width:calc(100% + 40px); margin:0 -20px; padding:18px 20px calc(env(safe-area-inset-bottom,0px) + 22px); background:linear-gradient(to top, #FAF8F5 65%, rgba(250,248,245,0.95) 85%, rgba(250,248,245,0)); z-index:5; display:flex; justify-content:center; }
        #onboarding-v2 .obv2-dash-sticky .obv2-cta { margin:0; max-width:360px; width:100%; }

        /* ---- Scroll progress rail ---- */
        #onboarding-v2 .obv2-dash-rail { position:fixed; right:max(14px, env(safe-area-inset-right,0px)); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:14px; z-index:6; pointer-events:none; }
        #onboarding-v2 .obv2-dash-rail-dot { width:6px; height:6px; border-radius:50%; background:rgba(139,115,85,0.2); transition:background 400ms ease, transform 400ms ease; }
        #onboarding-v2 .obv2-dash-rail-dot.active { background:#C9A66B; transform:scale(1.5); }

        /* ---- Mobile tightening ---- */
        @media (max-width: 400px) {
            #onboarding-v2 .obv2-dash-hero img { width:118px; height:148px; margin-bottom:14px; }
            #onboarding-v2 .obv2-dash-hero-name { font-size:1.5rem; }
            #onboarding-v2 .obv2-dash-ring-wrap { width:140px; height:140px; }
            #onboarding-v2 .obv2-dash-ring { width:140px; height:140px; }
            #onboarding-v2 .obv2-dash-ring-center .n { font-size:2rem; }
            #onboarding-v2 .obv2-dash-macros { padding:18px 16px; gap:16px; }
            #onboarding-v2 .obv2-dash-macros-main { flex:0 0 78px; padding-right:14px; }
            #onboarding-v2 .obv2-dash-macros-main .big { font-size:2.1rem; }
            #onboarding-v2 .obv2-dash-rail { right:8px; gap:10px; }
            #onboarding-v2 .obv2-dash-marker { margin:24px 0 16px; }
            #onboarding-v2 .obv2-dash-tech-item { padding:12px 14px; }
            #onboarding-v2 .obv2-dash-path-list li { padding:10px 12px; font-size:0.9rem; }
        }

        /* Trust strip — gold checkmark not green */
        #onboarding-v2 .obv2-trust { display:flex; align-items:center; justify-content:center; gap:8px; font-size:0.82rem; color:rgba(107,101,96,0.85); margin:14px 0; font-weight:500; letter-spacing:0.01em; }
        #onboarding-v2 .obv2-trust:before { content:"✓"; color:#C9A66B; font-weight:700; font-size:0.95rem; }

        /* Price cards */
        #onboarding-v2 .obv2-price-cards { display:flex; gap:8px; width:100%; margin:18px 0 8px; }
        #onboarding-v2 .obv2-price-card { flex:1; padding:22px 8px 16px; border:1.5px solid rgba(139,115,85,0.18); border-radius:12px; cursor:pointer; background:white; position:relative; text-align:center; transition: background-color .22s, border-color .22s, color .22s, box-shadow .22s, transform .22s, opacity .22s; min-width:0; }
        #onboarding-v2 .obv2-price-card:hover { border-color:rgba(201,166,107,0.5); transform:translateY(-1px); }
        #onboarding-v2 .obv2-price-card.selected { border-color:#3D3630; background:white; box-shadow:0 6px 20px rgba(61,54,48,0.1); }
        #onboarding-v2 .obv2-price-card .obv2-price-label { font-size:0.72rem; font-weight:600; color:rgba(107,101,96,0.75); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.08em; }
        #onboarding-v2 .obv2-price-card .obv2-price-amt { font-size:1.2rem; font-weight:600; color:#3D3630; font-family:'Lora',serif; letter-spacing:-0.01em; line-height:1; }
        #onboarding-v2 .obv2-price-card .obv2-price-amt span { font-size:0.7rem; font-weight:500; color:rgba(107,101,96,0.6); font-family:'DM Sans',sans-serif; margin-left:1px; letter-spacing:0; }
        #onboarding-v2 .obv2-price-save { display:inline-block; margin-top:8px; padding:3px 8px; background:rgba(201,166,107,0.14); color:#8B5E3C; font-family:'DM Sans',sans-serif; font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; border-radius:999px; }
        #onboarding-v2 .obv2-price-card.selected .obv2-price-save { background:rgba(201,166,107,0.24); }
        #onboarding-v2 .obv2-price-badge { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:#3D3630; color:#C9A66B; font-size:0.6rem; padding:4px 10px; border-radius:100px; font-weight:700; letter-spacing:0.12em; white-space:nowrap; }

        /* Offer bullets (step 30) */
        #onboarding-v2 .obv2-offers { width:100%; max-width:380px; display:flex; flex-direction:column; gap:16px; margin:8px auto 20px; text-align:left; }
        #onboarding-v2 .obv2-offer { display:flex; gap:12px; align-items:flex-start; }
        #onboarding-v2 .obv2-offer-check { flex:0 0 24px; height:24px; border-radius:50%; background:rgba(201,166,107,0.14); display:flex; align-items:center; justify-content:center; margin-top:2px; }
        #onboarding-v2 .obv2-offer-check svg { width:12px; height:12px; stroke:#8B5E3C; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
        #onboarding-v2 .obv2-offer-text strong { display:block; font-family:'Lora',Georgia,serif; font-size:0.98rem; font-weight:600; color:#3D3630; margin-bottom:3px; letter-spacing:-0.005em; line-height:1.3; }
        #onboarding-v2 .obv2-offer-text span { display:block; font-size:0.82rem; color:rgba(107,101,96,0.78); line-height:1.5; }

        /* Timeline — custom SVG icons on gold thread */
        #onboarding-v2 .obv2-timeline { width:100%; padding:10px 0; margin-bottom:10px; }
        #onboarding-v2 .obv2-timeline-node { display:flex; gap:16px; position:relative; padding-bottom:24px; text-align:left; }
        #onboarding-v2 .obv2-timeline-node:not(:last-child):before { content:""; position:absolute; left:17px; top:34px; bottom:4px; width:1px; background:linear-gradient(180deg,#C9A66B 0%,rgba(201,166,107,0.3) 100%); }
        #onboarding-v2 .obv2-timeline-icon { flex:0 0 34px; height:34px; border-radius:50%; background:rgba(201,166,107,0.1); border:1px solid rgba(201,166,107,0.3); display:flex; align-items:center; justify-content:center; color:#C9A66B; }
        #onboarding-v2 .obv2-timeline-icon svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
        #onboarding-v2 .obv2-timeline-content h4 { font-size:0.98rem; font-weight:600; color:#3D3630; margin:6px 0 4px; font-family:'Lora',serif; }
        #onboarding-v2 .obv2-timeline-content p { font-size:0.86rem; color:rgba(107,101,96,0.8); line-height:1.5; margin:0; }

        /* Bell icon (step 29) */
        #onboarding-v2 .obv2-bell { font-size:3.2rem; color:#C9A66B; position:relative; margin:10px 0 22px; display:inline-flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:50%; background:rgba(201,166,107,0.08); border:1px solid rgba(201,166,107,0.25); }
        #onboarding-v2 .obv2-bell svg { width:36px; height:36px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
        #onboarding-v2 .obv2-bell .badge { position:absolute; top:6px; right:4px; background:#3D3630; color:#FAF8F5; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; }

        /* Phone mockup — warm brand, not harsh black */
        #onboarding-v2 .obv2-mockup { width:220px; min-height:320px; background:#3D3630; border-radius:26px; padding:16px; margin:10px auto 20px; border:5px solid #2D2A26; box-shadow:0 12px 36px rgba(61,54,48,0.25); color:#FAF8F5; font-size:0.8rem; text-align:left; }

        /* Screenshot mockup — real platform preview in phone frame */
        #onboarding-v2 .obv2-mockup--shot { width:100%; max-width:320px; min-height:unset; padding:0; background:transparent; border:none; border-radius:18px; margin:12px auto 22px; box-shadow:0 18px 44px -12px rgba(61,54,48,0.22), 0 3px 10px rgba(61,54,48,0.08); overflow:hidden; position:relative; }
        #onboarding-v2 .obv2-mockup--shot img { display:block; width:100%; height:auto; border-radius:18px; }

        /* Legal line under fine print — subtle terms/privacy row */
        #onboarding-v2 .obv2-legal { margin:8px 0 0; font-size:0.7rem; color:rgba(107,101,96,0.55); line-height:1.5; }
        #onboarding-v2 .obv2-legal a { color:rgba(107,101,96,0.8); text-decoration:underline; text-underline-offset:2px; }
        #onboarding-v2 .obv2-legal a:hover { color:#8B7355; }

        /* Feature list (monthly view) */
        #onboarding-v2 .obv2-feature-list { width:100%; text-align:left; margin:16px 0; }
        #onboarding-v2 .obv2-feature-list .obv2-feature { display:flex; gap:14px; padding:14px 0; font-size:0.93rem; border-bottom:1px solid rgba(139,115,85,0.08); }
        #onboarding-v2 .obv2-feature:last-child { border-bottom:none; }
        #onboarding-v2 .obv2-feature:before { content:""; flex:0 0 14px; height:1px; background:#C9A66B; margin-top:11px; }
        #onboarding-v2 .obv2-feature strong { display:block; margin-bottom:3px; color:#3D3630; font-family:'Lora',serif; font-size:0.98rem; }
        #onboarding-v2 .obv2-feature span { color:rgba(107,101,96,0.78); font-size:0.86rem; line-height:1.5; }

        /* OAuth button — identical dimensions to .obv2-cta.full */
        #onboarding-v2 .obv2-oauth-btn { width:100%; max-width:340px; padding:17px 28px; border:1px solid rgba(139,115,85,0.22); background:white; border-radius:14px; font-family:inherit; font-size:1rem; font-weight:600; color:#3D3630; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 10px; transition:transform .22s ease, box-shadow .22s ease; letter-spacing:0.005em; -webkit-tap-highlight-color:transparent; line-height:1; }
        #onboarding-v2 .obv2-oauth-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(139,115,85,0.14); border-color:rgba(139,115,85,0.32); }
        #onboarding-v2 .obv2-oauth-btn svg { flex-shrink:0; }

        /* Inline signup form (step 27) */
        #onboarding-v2 .obv2-auth-divider { width:100%; max-width:340px; margin:14px auto 14px; display:flex; align-items:center; gap:12px; color:rgba(107,101,96,0.55); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; }
        #onboarding-v2 .obv2-auth-divider:before, #onboarding-v2 .obv2-auth-divider:after { content:""; flex:1; height:1px; background:rgba(139,115,85,0.15); }
        #onboarding-v2 .obv2-auth-input { width:100%; max-width:340px; padding:15px 18px; border:1px solid rgba(139,115,85,0.32); border-radius:12px; background:#FCF8F0; font-family:inherit; font-size:0.98rem; color:#3D3630; margin:0 auto 10px; display:block; box-shadow:inset 0 1px 2px rgba(60,54,48,0.05); transition:border-color .2s, box-shadow .2s; }
        #onboarding-v2 .obv2-auth-input:focus { outline:none; border-color:#C9A66B; box-shadow:0 0 0 3px rgba(201,166,107,0.15); }
        #onboarding-v2 .obv2-auth-input::placeholder { color:rgba(107,101,96,0.5); }
        #onboarding-v2 .obv2-auth-error { width:100%; max-width:340px; margin:2px auto 8px; font-size:0.82rem; color:#B8503C; text-align:left; min-height:1em; line-height:1.3; }
        #onboarding-v2 .obv2-auth-error:empty { display:none; }
        #onboarding-v2 [data-step="27"] .obv2-cta { margin-top:6px; }

        /* Evidence step (data-step="29") — bar chart of RCT outcomes */
        #onboarding-v2 .obv2-evidence-lede { font-size: 0.98rem; line-height: 1.55; color: rgba(60,54,48,0.78); text-align: center; max-width: 380px; margin: 0 auto 26px; }
        #onboarding-v2 .obv2-evidence-chart { display: flex; flex-direction: column; gap: 24px; margin: 0 auto 22px; max-width: 360px; }
        #onboarding-v2 .obv2-evidence-row { display: flex; flex-direction: column; gap: 9px; }
        #onboarding-v2 .obv2-evidence-head { display: flex; justify-content: space-between; align-items: baseline; }
        #onboarding-v2 .obv2-evidence-label { font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(60,54,48,0.65); }
        #onboarding-v2 .obv2-evidence-value { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-variation-settings: 'opsz' 60; font-size: 1.65rem; font-weight: 350; color: #1C1B19; letter-spacing: -0.02em; line-height: 1; }
        #onboarding-v2 .obv2-evidence-value span { font-size: 0.85rem; color: rgba(60,54,48,0.55); margin-left: 1px; font-style: italic; }
        #onboarding-v2 .obv2-evidence-track { height: 7px; background: rgba(28,27,25,0.06); border-radius: 999px; overflow: hidden; position: relative; }
        #onboarding-v2 .obv2-evidence-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #8B5E3C 0%, #B07B52 100%); border-radius: 999px; transition: width 1.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
        #onboarding-v2 .obv2-step[data-step="29"].active .obv2-evidence-row:nth-child(1) .obv2-evidence-fill { width: var(--w); transition-delay: 0.12s; }
        #onboarding-v2 .obv2-step[data-step="29"].active .obv2-evidence-row:nth-child(2) .obv2-evidence-fill { width: var(--w); transition-delay: 0.30s; }
        #onboarding-v2 .obv2-step[data-step="29"].active .obv2-evidence-row:nth-child(3) .obv2-evidence-fill { width: var(--w); transition-delay: 0.48s; }
        #onboarding-v2 .obv2-evidence-cite { margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(28,27,25,0.08); text-align: center; max-width: 360px; margin-left: auto; margin-right: auto; }
        #onboarding-v2 .obv2-evidence-cite strong { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-variation-settings: 'opsz' 60; font-size: 1rem; font-weight: 400; color: #1C1B19; display: block; margin-bottom: 4px; letter-spacing: -0.01em; }
        #onboarding-v2 .obv2-evidence-cite span { font-size: 0.74rem; color: rgba(60,54,48,0.55); letter-spacing: 0.02em; line-height: 1.55; }
        #onboarding-v2 .obv2-evidence-foot { text-align: center; margin: 14px auto 22px; font-size: 0.78rem; color: rgba(60,54,48,0.55); line-height: 1.55; max-width: 360px; }
        #onboarding-v2 .obv2-evidence-foot em { font-family: 'Newsreader', Georgia, serif; font-style: italic; }

        /* ===== Welcome-back resume screen (BetterHelp pattern) ===== */
        #welcome-back {
            display: none;
            position: fixed;
            inset: 0;
            background: var(--q-canvas);
            z-index: 50;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }
        #welcome-back.active { display: flex; }
        #welcome-back .wb-card {
            max-width: 440px;
            width: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 18px;
            animation: wb-fade 0.45s var(--q-ease);
        }
        @keyframes wb-fade {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: none; }
        }
        #welcome-back .wb-brand {
            font-family: 'Newsreader', Georgia, serif;
            font-size: 1.4rem;
            font-weight: 500;
            color: var(--q-ink);
            letter-spacing: 0.01em;
            margin-bottom: 8px;
        }
        #welcome-back .wb-brand em {
            font-style: normal;
            font-weight: inherit;
            color: inherit;
        }
        #welcome-back h2 {
            font-family: 'Newsreader', Georgia, serif;
            font-weight: 500;
            font-size: 2rem;
            color: var(--q-ink);
            margin: 0;
            line-height: 1.2;
        }
        #welcome-back p {
            color: var(--q-ink-soft);
            font-size: 1rem;
            line-height: 1.55;
            margin: 0 0 8px;
        }
        #welcome-back .wb-progress {
            font-size: 0.78rem;
            color: var(--q-ink-mute);
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        #welcome-back .wb-btn {
            font-family: inherit;
            font-size: 1rem;
            font-weight: 500;
            padding: 16px 24px;
            border-radius: 14px;
            border: none;
            cursor: pointer;
            transition: transform 0.2s var(--q-ease), background 0.2s var(--q-ease);
        }
        #welcome-back .wb-continue {
            background: var(--q-sage-deep);
            color: var(--q-canvas);
        }
        #welcome-back .wb-continue:hover { transform: translateY(-1px); background: var(--q-ink); }
        #welcome-back .wb-restart {
            background: transparent;
            color: var(--q-ink-soft);
            text-decoration: underline;
            padding: 8px;
        }
        #welcome-back .wb-restart:hover { color: var(--q-ink); }
    

        .obv2-pwset-modal { position:fixed; inset:0; z-index:100030; display:none; background:rgba(28,27,25,0.55); align-items:center; justify-content:center; padding:24px; }
        .obv2-pwset-modal.is-open { display:flex; }
        .obv2-pwset-card {
            background:#FAF8F5; border-radius:18px; padding:28px 24px 24px;
            max-width:380px; width:100%; box-shadow:0 18px 48px rgba(28,27,25,0.25);
            display:flex; flex-direction:column; gap:14px; text-align:center;
        }
        .obv2-pwset-title { font-family:'Newsreader', Georgia, serif; font-size:1.45rem; font-weight:600; color:#1C1B19; letter-spacing:-0.01em; margin:0; }
        .obv2-pwset-sub { font-size:0.92rem; color:rgba(60,54,48,0.75); line-height:1.45; margin:0 0 4px; }
        .obv2-pwset-email-tag { background:rgba(94,128,73,0.08); color:#3F5C32; border:1px solid rgba(94,128,73,0.18); border-radius:10px; padding:8px 12px; font-size:0.88rem; font-weight:600; word-break:break-all; }
        .obv2-pwset-input { width:100%; padding:14px 16px; border:1.5px solid rgba(28,27,25,0.16); border-radius:12px; font-size:1rem; background:#fff; color:#1C1B19; outline:none; box-sizing:border-box; }
        .obv2-pwset-input:focus { border-color:#5E8049; }
        .obv2-pwset-error { color:#B23A2F; font-size:0.86rem; font-weight:500; min-height:1.1em; margin:0; }
        .obv2-pwset-cta {
            width:100%; padding:16px; border:none; border-radius:14px;
            background:#1C1B19; color:#FAF8F5; font-size:1rem; font-weight:600; cursor:pointer;
            transition:transform 0.12s ease, opacity 0.2s ease;
        }
        .obv2-pwset-cta:active { transform:scale(0.98); }
        .obv2-pwset-cta:disabled { opacity:0.55; cursor:not-allowed; }
    

        .day1-intro {
            position: fixed; inset: 0; z-index: 100000;
            background: #FAF8F5;
            display: none;
            align-items: center; justify-content: center;
            padding: 24px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .day1-intro.visible { display: flex; opacity: 1; }
        .day1-card {
            display: flex; flex-direction: column; align-items: center; text-align: center;
            max-width: 360px; width: 100%;
            animation: day1FadeIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        @keyframes day1FadeIn {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .day1-eyebrow {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.78rem; font-weight: 600;
            letter-spacing: 0.18em; text-transform: uppercase;
            color: #8B7355;
            margin-bottom: 28px;
        }
        .day1-photo {
            width: 124px; height: 124px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 26px;
            box-shadow: 0 8px 28px rgba(139, 115, 85, 0.18);
            background: rgba(139, 115, 85, 0.08);
        }
        .day1-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .day1-title {
            font-family: 'Newsreader', Georgia, serif;
            font-optical-sizing: auto;
            font-variation-settings: 'opsz' 144;
            font-size: 1.65rem; font-weight: 400; line-height: 1.25;
            color: #1C1B19;
            letter-spacing: -0.014em;
            margin-bottom: 36px;
        }
        .day1-title em {
            font-style: italic; font-weight: 300; color: #8B5E3C;
        }
        .day1-begin {
            padding: 14px 56px;
            border: none; border-radius: 100px;
            background: #8B7355; color: white;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.95rem; font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            -webkit-tap-highlight-color: transparent;
            min-height: 50px;
        }
        .day1-begin:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(139, 115, 85, 0.25); }
        .day1-begin:active { transform: translateY(0); }
        .day1-screen { display: none; flex-direction: column; align-items: center; text-align: center; max-width: 360px; width: 100%; animation: day1FadeIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
        .day1-screen.active { display: flex; }
        .day1-bullets { list-style: none; padding: 0; margin: 0 0 36px 0; text-align: left; align-self: stretch; }
        .day1-bullets li {
            font-family: 'DM Sans', sans-serif; font-size: 1rem; line-height: 1.55;
            color: #2D2A26; padding: 12px 0 12px 28px; position: relative;
            border-bottom: 1px solid rgba(139, 115, 85, 0.12);
        }
        .day1-bullets li:last-child { border-bottom: none; }
        .day1-bullets li::before {
            content: ''; position: absolute; left: 6px; top: 22px;
            width: 6px; height: 6px; border-radius: 50%; background: #8B7355;
        }
        .day1-body {
            font-family: 'DM Sans', sans-serif; font-size: 0.98rem; line-height: 1.55;
            color: #4A4540; margin-bottom: 32px;
        }
        .day1-dots { display: flex; gap: 8px; margin-top: 22px; justify-content: center; }
        .day1-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(139, 115, 85, 0.25); transition: background 0.2s ease; }
        .day1-dot.active { background: #8B7355; }
    
        /* Companion-name char counter (12-char cap so the name fits the
           app's bottom-nav tab) */
        .obv2-charcount {
            text-align: right;
            font-size: 0.74rem;
            color: rgba(139, 115, 85, 0.55);
            margin: 6px 4px 0 0;
            font-family: 'DM Sans', sans-serif;
        }
        .obv2-charcount.at-limit { color: #B0492F; font-weight: 600; }

/* ---------- Community onboarding steps (cmob-) ---------- */
.cmob-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin: 18px 0 20px;
}
.cmob-tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(50, 35, 22, 0.07);
  border: 2px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cmob-tile img {
  display: block;
  width: 100%;
  height: 86px;
  object-fit: cover;
}
.cmob-tile-name {
  display: block;
  padding: 9px 10px 11px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3A2A1E;
  text-align: left;
  line-height: 1.25;
}
.cmob-tile-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.cmob-tile-check svg { width: 12px; height: 12px; }
.cmob-tile.selected {
  border-color: #4A3526;
}
.cmob-tile.selected .cmob-tile-check {
  background: #4A3526;
  color: #F7F2EC;
}
.cmob-namewrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 14px 12px 14px 20px;
  box-shadow: 0 6px 18px rgba(50, 35, 22, 0.07);
  margin: 22px 0 10px;
}
.cmob-at {
  font-size: 1.05rem;
  font-weight: 700;
  color: #A8794A;
}
.cmob-namewrap input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: #3A2A1E;
}
.cmob-shuffle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #F4EDE3;
  color: #8B7355;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.cmob-shuffle svg { width: 17px; height: 17px; }
.cmob-status {
  min-height: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}
.cmob-status.cmob-available { color: #5E7A4E; }
.cmob-status.cmob-taken { color: #B5543B; }
.cmob-status.cmob-invalid { color: #A8794A; }
.cmob-status.cmob-checking { color: #A89683; }
.cmob-hint {
  font-size: 0.8rem;
  color: rgba(58, 42, 30, 0.55);
  text-align: center;
  margin: 8px 0 18px;
  line-height: 1.5;
}

        /* ==== Community onboarding glow-up (Daniel 2026-06-12) ==== */
        /* Live community preview card (username + profile pic steps) */
        #onboarding-v2 .cmty-preview {
            width: 100%; max-width: 420px; background: #fff;
            border: 1px solid rgba(28,27,25,0.07); border-radius: 16px;
            padding: 16px 18px; margin: 6px auto 20px; text-align: left;
            box-shadow: 0 2px 12px rgba(28,27,25,0.05);
        }
        #onboarding-v2 .cmty-preview-head { display: flex; align-items: center; gap: 11px; }
        #onboarding-v2 .cmty-ava {
            width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
            background: #9CB084; color: #fff; font-weight: 700; font-size: 17px;
            display: flex; align-items: center; justify-content: center;
        }
        #onboarding-v2 img.cmty-ava-img { object-fit: cover; display: block; }
        #onboarding-v2 .cmty-preview-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
        #onboarding-v2 .cmty-preview-name { font-weight: 700; font-size: 0.95rem; color: #2D2A26; overflow: hidden; text-overflow: ellipsis; }
        #onboarding-v2 .cmty-preview-time { font-size: 0.78rem; color: #A89683; }
        #onboarding-v2 .cmty-preview-text { margin: 11px 0 0; font-size: 0.92rem; color: #4A4340; line-height: 1.45; }

        /* Profile photo step */
        #onboarding-v2 .cmty-pp-stage { display: flex; flex-direction: column; align-items: center; margin: 8px 0 18px; }
        #onboarding-v2 .cmty-pp-ava {
            position: relative; width: 112px; height: 112px; border-radius: 50%;
            border: none; padding: 0; cursor: pointer; background: none;
            display: flex; align-items: center; justify-content: center; overflow: visible;
            box-shadow: 0 4px 16px rgba(61,54,48,0.18); border-radius: 50%;
        }
        #onboarding-v2 .cmty-pp-ava img {
            width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
        }
        /* Base layout for the shared in-app DefaultAvatar component (shell.css
           isn't loaded on the funnel route). */
        #onboarding-v2 .qa-avatar {
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 50%; object-fit: cover; flex-shrink: 0;
        }
        #onboarding-v2 .cmty-pp-note { font-size: 0.84rem; color: #A89683; margin: 14px 0 0; }
        #onboarding-v2 .cmty-pp-plus {
            position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px;
            border-radius: 50%; background: #4A3526; color: #fff;
            display: flex; align-items: center; justify-content: center;
            border: 3px solid #F7F3EC;
        }
        #onboarding-v2 .cmty-pp-plus svg { width: 16px; height: 16px; }
        #onboarding-v2 .cmty-pp-skip {
            display: block; margin: 12px auto 0; background: none; border: none;
            color: #8B7355; font-size: 0.95rem; font-weight: 600; cursor: pointer;
            font-family: inherit; padding: 10px;
        }

        /* Community pledge */
        #onboarding-v2 .qpledge-card {
            width: 100%; max-width: 420px; margin: 0 auto 16px; background: #fff;
            border: 1px solid rgba(28,27,25,0.07); border-radius: 16px;
            padding: 4px 18px; text-align: left; box-shadow: 0 2px 12px rgba(28,27,25,0.05);
        }
        #onboarding-v2 .qpledge-row { display: flex; gap: 13px; padding: 11px 0; align-items: flex-start; }
        #onboarding-v2 .qpledge-row + .qpledge-row { border-top: 1px solid rgba(28,27,25,0.06); }
        #onboarding-v2 .qpledge-ic {
            width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px;
            background: rgba(156,176,132,0.16); color: #5E8049;
            display: flex; align-items: center; justify-content: center;
        }
        #onboarding-v2 .qpledge-ic svg { width: 19px; height: 19px; }
        #onboarding-v2 .qpledge-rowtext { display: flex; flex-direction: column; gap: 2px; }
        #onboarding-v2 .qpledge-rowtitle { font-weight: 700; font-size: 0.97rem; color: #2D2A26; }
        #onboarding-v2 .qpledge-rowbody { font-size: 0.86rem; color: #6B6560; line-height: 1.4; }

        /* Pledge hero — the community-in-conversation illustration */
        #onboarding-v2 .qpledge-hero {
            display: block; width: 100%; max-width: 420px; height: 118px;
            object-fit: cover; border-radius: 16px; margin: 2px auto 14px;
            border: 1px solid rgba(28,27,25,0.06); box-shadow: 0 2px 12px rgba(28,27,25,0.05);
        }

        /* Draw-to-sign pad */
        #onboarding-v2 .qsig-wrap { width: 100%; max-width: 420px; margin: 0 auto 14px; }
        #onboarding-v2 .qsig-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
        #onboarding-v2 .qsig-label { font-size: 0.85rem; color: rgba(60,54,48,0.62); }
        #onboarding-v2 .qsig-clear {
            background: none; border: none; padding: 4px 6px; cursor: pointer;
            font-family: inherit; font-size: 0.85rem; font-weight: 600; color: #8B7355;
            transition: opacity .2s ease;
        }
        #onboarding-v2 .qsig-clear:disabled { opacity: 0.35; cursor: default; }
        #onboarding-v2 .qsig-pad {
            position: relative; height: 128px; background: #FFFDF8;
            border: 1.5px solid rgba(139,115,85,0.22); border-radius: 16px;
            box-shadow: inset 0 1px 4px rgba(61,54,48,0.05); overflow: hidden;
        }
        #onboarding-v2 .qsig-pad canvas {
            position: absolute; inset: 0; width: 100%; height: 100%;
            touch-action: none; cursor: crosshair; display: block;
        }
        #onboarding-v2 .qsig-hint {
            position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%);
            font-family: 'Newsreader', Georgia, serif; font-style: italic;
            font-size: 1.08rem; color: rgba(61,54,48,0.32); pointer-events: none;
        }
        #onboarding-v2 .qsig-baseline {
            position: absolute; left: 40px; right: 24px; bottom: 28px;
            border-bottom: 1.5px dashed rgba(139,115,85,0.35); pointer-events: none;
        }
        #onboarding-v2 .qsig-x {
            position: absolute; left: 22px; bottom: 22px; font-size: 0.95rem;
            color: rgba(139,115,85,0.55); pointer-events: none;
        }
        /* Short phones: compact the pledge so the sign pad + CTA stay reachable */
        @media (max-height: 700px) {
            #onboarding-v2 .qpledge-hero { height: 86px; margin-bottom: 10px; }
            #onboarding-v2 .qsig-pad { height: 104px; }
            #onboarding-v2 .qpledge-row { padding: 8px 0; }
            #onboarding-v2 .qsig-baseline { bottom: 22px; }
            #onboarding-v2 .qsig-x { bottom: 16px; }
        }

        #onboarding-v2 .qpledge-celebrate { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
        #onboarding-v2 .qpledge-badge {
            width: 190px; height: 190px; border-radius: 50%; margin: 14px 0 20px;
            box-shadow: 0 14px 40px rgba(94,128,73,0.30);
            animation: qpledgePop 0.7s cubic-bezier(0.34, 1.45, 0.45, 1) both;
        }
        @keyframes qpledgePop {
            0% { transform: scale(0.4) rotate(-8deg); opacity: 0; }
            70% { transform: scale(1.07) rotate(1.5deg); opacity: 1; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }
        #onboarding-v2 .qpledge-done-title { animation: qsFadeUp 0.5s 0.35s both; }
        #onboarding-v2 .qpledge-celebrate .obv2-sub { animation: qsFadeUp 0.5s 0.5s both; }
        #onboarding-v2 .qpledge-celebrate .obv2-cta { animation: qsFadeUp 0.5s 0.65s both; }
        @keyframes qsFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        #onboarding-v2 .qpledge-confetti { position: absolute; top: 70px; left: 50%; width: 0; height: 0; pointer-events: none; }
        #onboarding-v2 .qpledge-dot {
            position: absolute; width: 9px; height: 9px; border-radius: 2px; opacity: 0;
            animation: qpledgeBurst 1.1s 0.15s cubic-bezier(0.16, 0.8, 0.4, 1) both;
        }
        #onboarding-v2 .qpledge-dot:nth-child(odd) { background: #C9A66B; }
        #onboarding-v2 .qpledge-dot:nth-child(even) { background: #9CB084; }
        #onboarding-v2 .qpledge-dot:nth-child(3n) { background: #B8503A; border-radius: 50%; }
        @keyframes qpledgeBurst {
            0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
            15% { opacity: 1; }
            100% { transform: translate(var(--qx, 0px), var(--qy, -90px)) rotate(220deg) scale(1); opacity: 0; }
        }
        #onboarding-v2 .qpledge-dot-0 { --qx: -110px; --qy: -70px; }
        #onboarding-v2 .qpledge-dot-1 { --qx: -75px;  --qy: -120px; animation-delay: 0.22s; }
        #onboarding-v2 .qpledge-dot-2 { --qx: -40px;  --qy: -150px; }
        #onboarding-v2 .qpledge-dot-3 { --qx: 0px;    --qy: -165px; animation-delay: 0.28s; }
        #onboarding-v2 .qpledge-dot-4 { --qx: 40px;   --qy: -150px; }
        #onboarding-v2 .qpledge-dot-5 { --qx: 75px;   --qy: -120px; animation-delay: 0.2s; }
        #onboarding-v2 .qpledge-dot-6 { --qx: 110px;  --qy: -70px; }
        #onboarding-v2 .qpledge-dot-7 { --qx: -130px; --qy: -20px; animation-delay: 0.3s; }
        #onboarding-v2 .qpledge-dot-8 { --qx: 130px;  --qy: -20px; animation-delay: 0.26s; }
        #onboarding-v2 .qpledge-dot-9 { --qx: 0px;    --qy: -110px; animation-delay: 0.36s; }