/* ============================================================
   PRIVATE SELLER MODULE — Digital Twin AI Carousel v3
   Category-first · Conversational branching · Premium UX
   Ikhayalami · 8-Scene Horizontal Interview Experience
   ============================================================ */
/* ── SCENE VIEWPORT ─────────────────────────────────────────── */
.ps-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ── SCENE TRACK ────────────────────────────────────────────── */
.ps-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* ── INDIVIDUAL SCENE ───────────────────────────────────────── */
.ps-scene {
    min-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-shrink: 0;
}

/* ── TWO-COLUMN LAYOUT ──────────────────────────────────────── */
.ps-left {
    flex: 1 1 55%;
    min-width: 0;
    padding: 18px 28px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    scrollbar-width: none;
    gap: 0;
}

    .ps-left::-webkit-scrollbar {
        display: none;
    }

.ps-right {
    flex: 0 0 42%;
    min-width: 280px;
    max-width: 340px;
    background: linear-gradient(160deg, #FAFBFC 0%, #F3F4F6 100%);
    border-left: 1px solid rgba(0,0,0,0.06);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    scrollbar-width: none;
}

    .ps-right::-webkit-scrollbar {
        display: none;
    }

/* ── SCENE HEADER ───────────────────────────────────────────── */
.ps-scene-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--sj-orange);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    background: var(--sj-orange-light);
    padding: 4px 12px;
    border-radius: 50px;
    width: fit-content;
}

    .ps-scene-label i {
        font-size: 0.75rem;
    }

.ps-question {
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
    font-weight: 800;
    color: var(--sj-dark);
    line-height: 1.18;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

    .ps-question em {
        font-style: normal;
        color: var(--sj-orange);
    }

.ps-subtitle {
    font-size: 0.82rem;
    color: var(--sj-muted);
    margin-bottom: 12px;
    line-height: 1.5;
    font-weight: 400;
}

/* ── PROGRESS DOTS ──────────────────────────────────────────── */
.ps-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.ps-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0,0,0,0.12);
    transition: all 0.3s var(--sj-ease-out);
    cursor: pointer;
}

    .ps-dot.active {
        width: 20px;
        border-radius: 3px;
        background: var(--sj-orange);
    }

    .ps-dot.done {
        background: var(--sj-success);
    }

/* ── CATEGORY GRID — SCENE 1 ────────────────────────────────── */
.ps-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.ps-cat-card {
    background: #fff;
    border: 2px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 10px 8px;
    cursor: pointer;
    transition: all 0.28s var(--sj-ease-out);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .ps-cat-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--sj-orange-light);
        opacity: 0;
        transition: opacity 0.25s;
        border-radius: 14px;
    }

    .ps-cat-card:hover {
        border-color: rgba(245,130,32,0.3);
        transform: none; /* FIX: was scale(1.01) — caused blur */
        box-shadow: var(--sj-shadow-sm);
    }

    .ps-cat-card.selected {
        border-color: var(--sj-orange);
        box-shadow: 0 6px 20px rgba(245,130,32,0.2);
    }

        .ps-cat-card.selected::before {
            opacity: 1;
        }

.ps-cat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--sj-muted);
    transition: all 0.28s var(--sj-ease-out);
    position: relative;
    z-index: 1;
}

.ps-cat-card.selected .ps-cat-icon {
    background: var(--sj-orange);
    color: white;
    box-shadow: 0 4px 12px rgba(245,130,32,0.3);
}

.ps-cat-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sj-dark);
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.ps-cat-meta {
    font-size: 0.62rem;
    color: var(--sj-muted);
    position: relative;
    z-index: 1;
}

.ps-cat-card.selected .ps-cat-name {
    color: var(--sj-orange-dark);
}

/* ── SUBTYPE CHIPS — SCENE 2 ────────────────────────────────── */
.ps-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ps-chip {
    padding: 9px 16px;
    border-radius: 50px;
    background: white;
    border: 1.5px solid rgba(0,0,0,0.08);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sj-muted);
    cursor: pointer;
    /* PERF PASS 2: the .selected colour now applies INSTANTLY. The previous
       0.13s fade on background/border/colour was still read as "the active
       colour is slow to show" when picking a chip. A property-type chip is a
       discrete choice — there is nothing to animate — so the selected state
       should snap the moment the class lands. We keep a short transform-only
       transition for the hover lift (transform is compositor-only and never
       blocks the selection paint). No colour/background transition at all. */
    transition: transform 0.12s ease;
    white-space: nowrap;
}

    .ps-chip:hover {
        border-color: rgba(245,130,32,0.4);
        color: var(--sj-dark);
    }

    .ps-chip.selected {
        background: var(--sj-dark);
        border-color: var(--sj-dark);
        color: white;
    }

/* ── DNA BUILDER — SCENE 3 ──────────────────────────────────── */
.ps-dna-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
}

.ps-dna-block {
    background: white;
    border: 1.5px solid rgba(0,0,0,0.07);
    border-radius: 14px;
    padding: 14px;
    transition: border-color 0.2s;
}

.ps-metric-tile {
    position: relative;
    min-height: 112px;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff 0%, #fff8f1 100%);
    border: 1.5px solid rgba(245,130,32,0.11);
    box-shadow: 0 8px 22px rgba(17,24,39,0.055), inset 0 1px 0 rgba(255,255,255,0.95);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

    .ps-metric-tile::after {
        content: '';
        position: absolute;
        inset: auto -20% -42% -20%;
        height: 72px;
        background: radial-gradient(circle at center, rgba(245,130,32,0.16), transparent 64%);
        pointer-events: none;
    }

.ps-dna-block:hover {
    border-color: rgba(245,130,32,0.3);
}

.ps-dna-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--sj-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ps-metric-tile .ps-dna-label {
    margin-bottom: 6px;
    color: #6B7280;
    line-height: 1.15;
}

.ps-metric-icon {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sj-orange);
    background: rgba(245,130,32,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    margin-bottom: 8px;
}

.ps-dna-label i {
    font-size: 0.75rem;
    color: var(--sj-orange);
}

/* Stepper inside dna block */
.ps-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.ps-step-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.12);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--sj-dark);
    /* PERF PASS 2: was `transition: all 0.18s`. `all` animates every property
       (incl. layout-affecting ones) on every +/- tap, and a stepper is tapped
       repeatedly and fast. Scope to the two cheap, compositor-friendly
       properties that actually change on hover/active. */
    transition: border-color 0.14s ease, color 0.14s ease;
    line-height: 1;
    padding: 0;
}

    .ps-step-btn:hover {
        border-color: var(--sj-orange);
        color: var(--sj-orange);
    }

.ps-step-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--sj-dark);
    min-width: 24px;
    text-align: center;
}

/* Size input in dna block */
.ps-size-input {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}

    .ps-size-input input {
        width: 100%;
        border: 1.5px solid rgba(0,0,0,0.1);
        border-radius: 12px;
        padding: 7px 9px;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--sj-dark);
        outline: none;
        transition: border-color 0.2s;
    }

        .ps-size-input input:focus {
            border-color: var(--sj-orange);
        }

    .ps-size-input span {
        font-size: 0.74rem;
        color: var(--sj-muted);
        font-weight: 600;
    }

.ps-metric-pulse {
    animation: psMetricPulse 0.34s var(--sj-ease-out);
}

@keyframes psMetricPulse {
    0% {
        transform: scale(1);
    }

    55% {
        transform: scale(1.025);
        box-shadow: 0 12px 28px rgba(245,130,32,0.16);
    }

    100% {
        transform: scale(1);
    }
}

/* Address block — full width */
.ps-address-block {
    background: white;
    border: 1.5px solid rgba(0,0,0,0.07);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
    grid-column: 1 / -1;
}

.ps-address-input-wrap {
    position: relative;
}

    .ps-address-input-wrap i {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--sj-orange);
        font-size: 0.9rem;
    }

.ps-address-input {
    width: 100%;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 8px 10px 8px 30px;
    font-size: 0.85rem;
    color: var(--sj-dark);
    outline: none;
    transition: border-color 0.2s;
}

    .ps-address-input:focus {
        border-color: var(--sj-orange);
    }

.ps-location-card {
    position: relative;
    grid-column: 1 / -1;
    padding: 14px;
    border-radius: 22px;
    background: radial-gradient(circle at 88% 10%, rgba(86,196,248,0.20), transparent 30%), linear-gradient(145deg, #ffffff 0%, #fff7ed 58%, #f8fbff 100%);
    border: 1.5px solid rgba(245,130,32,0.16);
    box-shadow: 0 12px 30px rgba(17,24,39,0.075), inset 0 1px 0 rgba(255,255,255,0.95);
    overflow: visible;
}

    .ps-location-card.is-locked {
        border-color: rgba(245,130,32,0.45);
        box-shadow: 0 16px 34px rgba(245,130,32,0.13), inset 0 1px 0 rgba(255,255,255,0.95);
    }

.ps-location-topline,
.ps-location-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ps-location-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--sj-orange);
}

.ps-location-title {
    font-size: 0.95rem;
    font-weight: 850;
    color: var(--sj-dark);
    letter-spacing: -0.02em;
}

.ps-location-state {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #92400E;
    background: rgba(245,130,32,0.12);
    border: 1px solid rgba(245,130,32,0.18);
}

.ps-location-card.is-locked .ps-location-state {
    color: #166534;
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.24);
}

.ps-location-search-wrap {
    position: relative;
    margin-top: 10px;
}

    .ps-location-search-wrap > i {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--sj-orange);
        font-size: 0.95rem;
        z-index: 2;
    }

.ps-location-search {
    width: 100%;
    height: 42px;
    border: 1.5px solid rgba(17,24,39,0.09);
    border-radius: 15px;
    padding: 0 42px 0 38px;
    font-size: 0.86rem;
    font-weight: 650;
    color: var(--sj-dark);
    outline: none;
    background: rgba(255,255,255,0.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .ps-location-search:focus {
        border-color: rgba(245,130,32,0.55);
        box-shadow: 0 0 0 4px rgba(245,130,32,0.10);
    }

.ps-location-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 10px;
    color: #6B7280;
    background: rgba(17,24,39,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.ps-location-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    border-radius: 16px;
    padding: 6px;
    background: rgba(255,255,255,1);
    border: 1px solid rgba(17,24,39,0.08);
    box-shadow: 0 18px 45px rgba(17,24,39,0.16);
    /* backdrop-filter removed: the panel background is fully opaque white, so
       the blur was visually imperceptible but forced a GPU re-rasterisation
       of the blurred region on every keystroke (the dropdown content is
       rebuilt as you type). Pure cost, no benefit. */
    max-height: 212px;
    overflow: auto;
    scrollbar-width: none;
}

    .ps-location-results::-webkit-scrollbar {
        display: none;
    }

.ps-location-result {
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 12px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

    .ps-location-result:hover {
        background: rgba(245,130,32,0.09);
        transform: translateX(2px);
    }

    .ps-location-result i {
        color: var(--sj-orange);
    }

    .ps-location-result strong {
        display: block;
        font-size: 0.78rem;
        color: var(--sj-dark);
    }

    .ps-location-result small,
    .ps-location-result span {
        font-size: 0.68rem;
        color: var(--sj-muted);
    }

    .ps-location-result.muted {
        cursor: default;
        color: var(--sj-muted);
    }

        .ps-location-result.muted:hover {
            background: transparent;
            transform: none;
        }

.ps-location-map {
    position: relative;
    min-height: 112px;
    margin-top: 10px;
    border-radius: 17px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15,23,42,0.92), rgba(31,41,55,0.88));
    isolation: isolate;
}

.ps-map-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.65;
}

.ps-map-route {
    position: absolute;
    inset: 18% 8%;
    border: 2px solid rgba(86,196,248,0.26);
    border-left-color: transparent;
    border-bottom-color: rgba(245,130,32,0.42);
    border-radius: 55% 45% 62% 38%;
    transform: rotate(-8deg);
}

.ps-map-pin {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%) scale(0.92);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(245,130,32,0.17);
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(245,130,32,0.08);
    transition: all 0.32s var(--sj-ease-out);
}

    .ps-map-pin.is-dropped {
        top: 36%;
        transform: translate(-50%, -50%) scale(1.14);
        color: white;
        background: var(--sj-orange);
        box-shadow: 0 0 0 8px rgba(245,130,32,0.18), 0 8px 22px rgba(245,130,32,0.38);
    }

.ps-location-summary {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.97);
    /* backdrop-filter removed: this overlay sits ON TOP of the live Google
       Map, so the blur was recomputed continuously as the map rendered —
       a constant GPU drain whenever Scene 3 was on screen. The 0.97 white
       background already hides the map beneath it. */
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.ps-location-summary-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--sj-orange);
    flex-shrink: 0;
}

.ps-location-summary strong {
    display: block;
    color: var(--sj-dark);
    font-size: 0.78rem;
    line-height: 1.15;
}

.ps-location-summary span {
    display: block;
    color: var(--sj-muted);
    font-size: 0.66rem;
    line-height: 1.25;
}

.ps-location-foot {
    margin-top: 9px;
    color: #6B7280;
    font-size: 0.66rem;
    font-weight: 650;
}

    .ps-location-foot span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

/* ── FEATURE CHIPS — SCENE 4 ────────────────────────────────── */
.ps-feature-section {
    margin-bottom: 14px;
}

.ps-feature-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sj-muted);
    margin-bottom: 8px;
    display: block;
}

.ps-feature-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ps-feature-chip {
    padding: 7px 14px;
    border-radius: 50px;
    background: white;
    border: 1.5px solid rgba(0,0,0,0.08);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.2s var(--sj-ease-out);
    display: flex;
    align-items: center;
    gap: 5px;
}

    .ps-feature-chip i {
        font-size: 0.8rem;
    }

    .ps-feature-chip:hover {
        border-color: rgba(245,130,32,0.4);
        color: var(--sj-dark);
    }

    .ps-feature-chip.selected {
        background: var(--sj-dark);
        border-color: var(--sj-dark);
        color: white;
    }

/* ── MEDIA STUDIO — SCENE 5 ─────────────────────────────────── */
.ps-media-modules {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.ps-media-module {
    background: white;
    border: 1.5px solid rgba(0,0,0,0.07);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color 0.2s;
}

.ps-media-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ps-media-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sj-dark);
}

    .ps-media-title i {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: var(--sj-orange-light);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--sj-orange);
        font-size: 0.85rem;
    }

.ps-media-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 50px;
    background: var(--sj-orange);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ps-upload-zone {
    border: 2px dashed rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

    .ps-upload-zone:hover {
        border-color: var(--sj-orange);
        background: var(--sj-orange-light);
    }

    .ps-upload-zone i {
        font-size: 1.4rem;
        color: var(--sj-muted-light);
        display: block;
        margin-bottom: 6px;
    }

    .ps-upload-zone span {
        font-size: 0.78rem;
        color: var(--sj-muted);
        font-weight: 500;
    }

.ps-style-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.ps-style-pill {
    padding: 5px 12px;
    border-radius: 50px;
    border: 1.5px solid rgba(0,0,0,0.08);
    background: white;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.2s;
}

    .ps-style-pill:hover {
        border-color: var(--sj-orange);
        color: var(--sj-dark);
    }

    .ps-style-pill.active {
        background: var(--sj-dark);
        border-color: var(--sj-dark);
        color: white;
    }

/* ── PRICING ENGINE — SCENE 6 ───────────────────────────────── */
.ps-price-confidence {
    background: linear-gradient(135deg, var(--sj-dark) 0%, #2D3748 100%);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 14px;
    color: white;
    position: relative;
    overflow: hidden;
}

    .ps-price-confidence::before {
        content: '';
        position: absolute;
        top: -20px;
        right: -20px;
        width: 100px;
        height: 100px;
        background: var(--sj-orange);
        border-radius: 50%;
        opacity: 0.08;
    }

.ps-price-conf-label {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 4px;
}

.ps-price-range {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

    .ps-price-range span {
        color: var(--sj-orange);
    }

.ps-price-conf-bar-wrap {
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    margin-top: 10px;
    overflow: hidden;
}

.ps-price-conf-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--sj-orange), var(--sj-blue));
    border-radius: 2px;
    width: 0%;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Price zone slider */
.ps-price-zones {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.ps-price-zone {
    flex: 1;
    padding: 10px 8px;
    border-radius: 12px;
    border: 2px solid rgba(0,0,0,0.08);
    background: white;
    cursor: pointer;
    text-align: center;
    transition: all 0.22s;
}

    .ps-price-zone:hover {
        border-color: rgba(245,130,32,0.4);
    }

    .ps-price-zone.selected {
        border-color: var(--sj-orange);
        background: var(--sj-orange-light);
    }

.ps-price-zone-icon {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.ps-price-zone-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sj-dark);
    display: block;
}

.ps-price-zone-desc {
    font-size: 0.62rem;
    color: var(--sj-muted);
    display: block;
    margin-top: 2px;
}

.ps-price-manual {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: white;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    margin-bottom: 10px;
}

    .ps-price-manual i {
        color: var(--sj-muted);
        font-size: 0.85rem;
    }

    .ps-price-manual input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--sj-dark);
        background: transparent;
    }

    .ps-price-manual span {
        font-size: 0.75rem;
        color: var(--sj-muted);
        font-weight: 500;
    }

/* Price mode toggle for commercial */
.ps-price-mode-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.ps-price-mode-tab {
    flex: 1;
    padding: 7px 6px;
    border-radius: 8px;
    border: 1.5px solid rgba(0,0,0,0.08);
    background: white;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sj-muted);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

    .ps-price-mode-tab.active {
        background: var(--sj-dark);
        color: white;
        border-color: var(--sj-dark);
    }

/* ── AI NARRATIVE SCENE 7 ───────────────────────────────────── */
.ps-narrative-input {
    width: 100%;
    min-height: 80px;
    max-height: 120px;
    resize: none;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 0.88rem;
    color: var(--sj-dark);
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    line-height: 1.6;
    margin-bottom: 10px;
}

    .ps-narrative-input:focus {
        border-color: var(--sj-orange);
    }

    .ps-narrative-input::placeholder {
        color: var(--sj-muted-light);
    }

.ps-ai-compose-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: linear-gradient(135deg, var(--sj-dark) 0%, #2D3748 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}

    .ps-ai-compose-btn:hover {
        background: linear-gradient(135deg, #2D3748 0%, var(--sj-dark) 100%);
        transform: translateY(-1px);
        box-shadow: var(--sj-shadow-md);
    }

    .ps-ai-compose-btn i {
        color: var(--sj-orange);
        font-size: 0.9rem;
    }

/* ── PACKAGE SCENE 8 ────────────────────────────────────────── */
.ps-packages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.ps-package {
    background: white;
    border: 2px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.22s;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

    .ps-package:hover {
        border-color: rgba(245,130,32,0.3);
    }

    .ps-package.selected {
        border-color: var(--sj-orange);
        background: var(--sj-orange-light);
    }

    .ps-package.featured {
        border-color: var(--sj-orange);
        background: linear-gradient(135deg, var(--sj-orange-light) 0%, rgba(255,255,255,0.9) 100%);
    }

.ps-pkg-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ps-package.featured .ps-pkg-icon {
    background: var(--sj-orange);
}

    .ps-package.featured .ps-pkg-icon i {
        color: white;
    }

.ps-pkg-info {
    flex: 1;
    min-width: 0;
}

.ps-pkg-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sj-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.ps-pkg-badge {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 50px;
    background: var(--sj-orange);
    color: white;
    text-transform: uppercase;
}

.ps-pkg-desc {
    font-size: 0.72rem;
    color: var(--sj-muted);
    font-weight: 400;
}

.ps-pkg-price {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--sj-dark);
    white-space: nowrap;
}

    .ps-pkg-price.free {
        color: var(--sj-success);
    }

.ps-pkg-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.ps-package.selected .ps-pkg-check {
    background: var(--sj-orange);
    border-color: var(--sj-orange);
    color: white;
    font-size: 0.65rem;
}

/* ── NAV FOOTER ─────────────────────────────────────────────── */
.ps-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    flex-shrink: 0;
    gap: 10px;
}

.ps-btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: transparent;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.2s;
}

    .ps-btn-back:hover {
        border-color: rgba(0,0,0,0.2);
        color: var(--sj-dark);
    }

.ps-btn-next {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    background: var(--sj-dark);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s var(--sj-ease-out);
    letter-spacing: 0.01em;
}

    .ps-btn-next:hover {
        background: var(--sj-orange);
        transform: translateY(-1px);
        box-shadow: var(--sj-shadow-orange);
    }

    .ps-btn-next:disabled {
        background: rgba(0,0,0,0.1);
        color: rgba(0,0,0,0.3);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .ps-btn-next i {
        font-size: 0.85rem;
    }

.ps-btn-launch {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    background: linear-gradient(135deg, var(--sj-orange) 0%, #E86810 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s var(--sj-ease-out);
    box-shadow: var(--sj-shadow-orange);
}

    .ps-btn-launch:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(245,130,32,0.4);
    }

/* ── RIGHT PANEL — AI CONTEXT CARDS ─────────────────────────── */
.ps-intel-card {
    background: white;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--sj-shadow-sm);
}

.ps-intel-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--sj-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

    .ps-intel-header i {
        color: var(--sj-orange);
    }

.ps-intel-insight {
    font-size: 0.8rem;
    color: var(--sj-dark);
    line-height: 1.55;
    font-weight: 400;
}

    .ps-intel-insight strong {
        color: var(--sj-orange-dark);
        font-weight: 700;
    }

/* Twin preview card */
.ps-twin-card {
    background: linear-gradient(135deg, var(--sj-dark) 0%, #2D3748 100%);
    border-radius: 14px;
    padding: 14px;
    color: white;
    min-height: 120px;
    position: relative;
    overflow: hidden;
}

    .ps-twin-card::before {
        content: '';
        position: absolute;
        bottom: -20px;
        right: -20px;
        width: 80px;
        height: 80px;
        background: var(--sj-orange);
        border-radius: 50%;
        opacity: 0.1;
    }

.ps-twin-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.ps-twin-value {
    font-size: 1rem;
    font-weight: 800;
    color: white;
    margin-bottom: 8px;
}

.ps-twin-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ps-twin-chip {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 50px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
}

    .ps-twin-chip.orange {
        background: rgba(245,130,32,0.3);
        color: var(--sj-orange);
    }

/* Score card */
.ps-score-card {
    background: white;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(0,0,0,0.06);
}

.ps-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ps-score-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sj-muted);
}

.ps-score-val {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--sj-dark);
}

.ps-score-bar-wrap {
    height: 5px;
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.ps-score-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sj-orange), var(--sj-blue));
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

/* Achievement toast */
.ps-achievement {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sj-success-light);
    border-radius: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(16,185,129,0.15);
    animation: psAchieveIn 0.4s var(--sj-ease-bounce) forwards;
    font-size: 0.76rem;
    font-weight: 600;
    color: #065F46;
}

    .ps-achievement i {
        color: var(--sj-success);
    }

@keyframes psAchieveIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* AI writing preview */
.ps-ai-preview {
    background: white;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(0,0,0,0.06);
}

.ps-ai-preview-section {
    margin-bottom: 10px;
}

.ps-ai-preview-tag {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sj-orange);
    margin-bottom: 4px;
    display: block;
}

.ps-ai-preview-text {
    font-size: 0.78rem;
    color: var(--sj-dark);
    line-height: 1.5;
    font-weight: 400;
}

.ps-ai-typing::after {
    content: '|';
    animation: psBlink 0.9s step-end infinite;
    color: var(--sj-orange);
}

@keyframes psBlink {
    50% {
        opacity: 0;
    }
}

/* ── TRANSITIONS & ANIMATIONS ───────────────────────────────── */
@keyframes psFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.ps-scene-enter .ps-left > * {
    animation: psFadeUp 0.4s var(--sj-ease-out) forwards;
}

    .ps-scene-enter .ps-left > *:nth-child(1) {
        animation-delay: 0.05s;
    }

    .ps-scene-enter .ps-left > *:nth-child(2) {
        animation-delay: 0.1s;
    }

    .ps-scene-enter .ps-left > *:nth-child(3) {
        animation-delay: 0.15s;
    }

    .ps-scene-enter .ps-left > *:nth-child(4) {
        animation-delay: 0.2s;
    }

    .ps-scene-enter .ps-left > *:nth-child(5) {
        animation-delay: 0.25s;
    }

/* ── AI SPINNER (scene loading) ─────────────────────────────── */
.ps-ai-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(245,130,32,0.15);
    border-top-color: var(--sj-orange);
    border-radius: 50%;
    animation: psSpin 0.8s linear infinite;
}

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

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ps-scene {
        flex-direction: column;
    }

    .ps-right {
        display: none;
    }

    .ps-left {
        padding: 20px 18px 16px;
        flex: 1;
    }

    .ps-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ps-dna-grid {
        grid-template-columns: 1fr;
    }

    .ps-price-zones {
        flex-wrap: wrap;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .ps-dna-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ps-location-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .ps-location-topline,
    .ps-location-foot {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .ps-location-state {
        align-self: flex-start;
    }

    .ps-location-map {
        min-height: 104px;
    }

    .ps-location-summary {
        align-items: flex-start;
    }

    .ps-metric-tile {
        min-height: 104px;
    }
}
/* ============================================================
   SCENE 1: PROPERTY CATEGORY CARDS - PREMIUM HOVER UPGRADE
   Adds 3D physics, icon scaling, and a glass shimmer sweep.
   ============================================================ */

/* 1. Base card physics & isolation for new effects
   FIX: removed transform-style: preserve-3d — it forces GPU layer promotion
   which causes subpixel text blur on non-HiDPI screens. The shimmer sweep
   (::after pseudo) works fine without it. */
.ps-cat-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-style: flat; /* was preserve-3d — caused blurry text */
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    /* Add a hidden sweeping shimmer element to the card */
    .ps-cat-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
        transform: skewX(-20deg);
        transition: left 0s;
        pointer-events: none;
        z-index: 2;
    }

    /* 2. Premium Hover State */
    .ps-cat-card:hover {
        transform: none !important; /* FIX: was scale(1.02) — caused blur + click issues */
        border-color: rgba(245, 130, 32, 0.4) !important;
        box-shadow: 0 15px 30px -5px rgba(245, 130, 32, 0.15), 0 8px 12px -4px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
        background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%) !important;
    }

        /* Trigger the glass shimmer sweep on hover */
        .ps-cat-card:hover::after {
            left: 200%;
            transition: left 0.6s ease-in-out;
        }

        /* 3. Icon Interaction (Pop and Glow — scale removed to prevent blur) */
        .ps-cat-card:hover .ps-cat-icon {
            background: linear-gradient(135deg, var(--sj-orange), #ff9f4d) !important;
            color: white !important;
            transform: none !important; /* FIX: was scale(1.12) translateY(-2px) — blur source */
            box-shadow: 0 8px 16px rgba(245, 130, 32, 0.35) !important;
        }

        /* 4. Text Interaction */
        .ps-cat-card:hover .ps-cat-name {
            color: var(--sj-orange-dark) !important;
            transform: none !important; /* FIX: was translateY(1px) */
            transition: all 0.3s ease;
        }

    /* 5. Selected State Enhancement */
    .ps-cat-card.selected {
        border-color: var(--sj-orange) !important;
        background: linear-gradient(135deg, #fffaf5 0%, #fff 100%) !important;
        box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.15), 0 10px 24px rgba(245, 130, 32, 0.18) !important;
        transform: none !important; /* FIX: was scale(1.01) — caused blur */
    }
/* ============================================================
   SCENE 2 — SUBTYPE BANNER IMAGE
   Shown below the chip grid after a type is selected.
   Falls back gracefully to a placeholder if image is missing.
   ============================================================ */

.ps-subtype-banner {
    position: relative;
    width: 100%;
    /* Fixed height that fills the banner; flex-shrink allows it to
       compress rather than overflow when zoom is 100% */
    height: 291px;
    flex-shrink: 1;
    min-height: 160px;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 16px;
    margin-bottom: 20px;
    background: #ffffff;
    border: none;
    box-shadow: none;
    animation: psFadeUp 0.38s var(--sj-ease-out) forwards;
    box-sizing: border-box;
}

    /* White canvas behind the image — sketch draws on this */
    .ps-subtype-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background: #ffffff;
        z-index: 0;
        border-radius: 16px;
    }

.ps-subtype-banner-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* cover: always fills the full banner frame, no white gaps */
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: opacity 0.35s ease;
    /* multiply blend: the sketch's grey/brown background dissolves
       into the white ::before canvas — only ink lines stay visible */
    mix-blend-mode: multiply;
    /* grayscale strips colour casts; modest brightness/contrast
       keeps lines clean without eye-strain glare */
    filter: grayscale(1) brightness(1.05) contrast(1.15);
}

/* No overlay gradient */
.ps-subtype-banner::after {
    content: none;
}

/* ── Placeholder (shown when image is absent / loading) ─────── */
.ps-subtype-banner-placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    color: var(--sj-muted);
}

    .ps-subtype-banner-placeholder i {
        font-size: 2rem;
        color: rgba(0,0,0,0.15);
    }

    .ps-subtype-banner-placeholder span {
        font-size: 0.75rem;
        font-weight: 600;
        color: rgba(0,0,0,0.3);
        letter-spacing: 0.03em;
        text-align: center;
        padding: 0 16px;
    }

/* ── Dashed border treatment for placeholder state ──────────── */
.ps-subtype-banner:has(.ps-subtype-banner-placeholder:not([style*="display: none"])) {
    border-style: dashed;
    border-color: rgba(0,0,0,0.12);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ps-subtype-banner {
        height: 237px;
        min-height: 140px;
        margin-top: 14px;
        margin-bottom: 16px;
    }
}


/* ============================================================
   SCENE 2 — SUBTYPE EDUCATION CARD (right panel)
   Appears when a subtype chip is selected.
   ============================================================ */

.ps-subtype-edu-card {
    background: white;
    border-radius: 14px;
    padding: 14px 16px;
    border: 1.5px solid rgba(245,130,32,0.18);
    box-shadow: 0 2px 12px rgba(245,130,32,0.08);
    overflow: hidden;
}

@keyframes psEduSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.ps-edu-animate {
    animation: psEduSlideIn 0.35s var(--sj-ease-out) forwards;
}

.ps-subtype-edu-headline {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--sj-dark);
    margin-bottom: 5px;
    letter-spacing: -0.01em;
}

.ps-subtype-edu-stat {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--sj-orange-dark);
    background: var(--sj-orange-light);
    border-radius: 50px;
    padding: 3px 10px;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

    .ps-subtype-edu-stat::before {
        content: '📊 ';
        font-size: 0.7rem;
        margin-right: 3px;
    }

/* Body text inherits .ps-intel-insight styles, defined above */

/* ============================================================
   ZOOM-RESILIENT PRIVATE SELLER JOURNEY FIXES
   Keeps footer actions visible at 75%–125% zoom and gives
   Scene 3 a premium 50 / 25 / 25 spatial layout.
   ============================================================ */

.ps-viewport,
.ps-track,
.ps-scene {
    min-height: 0;
}

.ps-scene {
    overflow: hidden;
}

.ps-left {
    min-height: 0;
    overflow: hidden;
    padding: clamp(12px, 2vh, 18px) clamp(18px, 2.4vw, 28px) clamp(10px, 1.4vh, 16px);
}

.ps-right {
    min-height: 0;
}

.ps-progress {
    flex-shrink: 0;
    margin-bottom: clamp(5px, 1vh, 10px);
}

.ps-scene-label {
    flex-shrink: 0;
    margin-bottom: clamp(4px, 0.8vh, 6px);
}

.ps-question {
    flex-shrink: 0;
    font-size: clamp(1.05rem, 2.1vw, 1.68rem);
    margin-bottom: clamp(4px, 0.8vh, 6px);
}

.ps-subtitle {
    flex-shrink: 0;
    font-size: clamp(0.72rem, 1.1vw, 0.82rem);
    margin-bottom: clamp(8px, 1.4vh, 12px);
    line-height: 1.38;
}

.ps-cat-grid,
.ps-chip-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding-bottom: 4px;
}

    .ps-cat-grid::-webkit-scrollbar,
    .ps-chip-grid::-webkit-scrollbar {
        display: none;
    }

.ps-cat-grid {
    gap: clamp(6px, 0.9vw, 8px);
    align-content: start;
}

.ps-cat-card {
    min-height: 0;
    padding: clamp(8px, 1.2vh, 10px) 8px;
}

.ps-cat-icon {
    width: clamp(30px, 4.8vh, 36px);
    height: clamp(30px, 4.8vh, 36px);
}

.ps-chip-grid {
    align-content: flex-start;
}

.ps-subtype-banner {
    flex: 0 1 clamp(120px, 24vh, 210px) !important;
    height: clamp(120px, 24vh, 210px) !important;
    min-height: 96px !important;
    margin-top: clamp(8px, 1.4vh, 14px) !important;
    margin-bottom: clamp(8px, 1.4vh, 14px) !important;
}

.ps-nav {
    position: relative;
    z-index: 80;
    flex-shrink: 0;
    margin-top: auto;
    padding: clamp(8px, 1.2vh, 14px) 0 0;
    min-height: clamp(48px, 7.5vh, 58px);
    background: linear-gradient(180deg, rgba(255,255,255,0.70), #ffffff 42%);
}

.ps-btn-back,
.ps-btn-next {
    min-height: 40px;
    white-space: nowrap;
}

.ps-btn-back {
    padding: 9px clamp(12px, 1.5vw, 16px);
}

.ps-btn-next {
    padding: 10px clamp(16px, 2vw, 24px);
}

.ps-scene-dna {
    display: block;
    padding: 0;
}

.ps-dna-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(10px, 1.6vh, 16px) clamp(12px, 1.8vw, 20px) clamp(8px, 1.2vh, 12px);
    background: radial-gradient(circle at 18% 8%, rgba(245,130,32,0.10), transparent 28%), linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    overflow: hidden;
}

.ps-dna-heading {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
    gap: clamp(10px, 1.6vw, 18px);
    align-items: end;
    margin-bottom: clamp(8px, 1.4vh, 12px);
}

    .ps-dna-heading .ps-progress,
    .ps-dna-heading .ps-scene-label,
    .ps-dna-heading .ps-question,
    .ps-dna-heading .ps-subtitle {
        margin-bottom: 0;
    }

    .ps-dna-heading .ps-scene-label {
        margin: 0 0 5px;
    }

    .ps-dna-heading .ps-subtitle {
        color: #64748B;
        max-width: 520px;
    }

.ps-dna-panels {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr) minmax(220px, 1fr);
    gap: clamp(10px, 1.5vw, 16px);
    overflow: hidden;
}

.ps-dna-panel {
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(15,23,42,0.07);
    border-radius: 24px;
    background: rgba(255,255,255,0.86);
    box-shadow: 0 12px 34px rgba(15,23,42,0.07), inset 0 1px 0 rgba(255,255,255,0.92);
    overflow: hidden;
}

.ps-dna-panel-location {
    display: flex;
}

#psSpatialAnchorMount {
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
}

.ps-dna-panel-location .ps-location-card {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 24px;
    box-shadow: none;
    padding: clamp(12px, 1.7vw, 18px);
    background: radial-gradient(circle at 85% 12%, rgba(86,196,248,0.24), transparent 30%), linear-gradient(145deg, #ffffff 0%, #fff7ed 46%, #f8fbff 100%);
}

.ps-dna-panel-location .ps-location-map {
    flex: 1 1 auto;
    min-height: clamp(250px, 42vh, 520px);
    margin-top: clamp(10px, 1.5vh, 14px);
    border-radius: 22px;
}

.ps-dna-panel-location .ps-location-search {
    height: clamp(42px, 6vh, 50px);
}

.ps-dna-panel-location .ps-location-summary {
    left: clamp(10px, 1.4vw, 16px);
    right: clamp(10px, 1.4vw, 16px);
    bottom: clamp(10px, 1.4vw, 16px);
}

.ps-dna-panel-metrics,
.ps-dna-panel-twin {
    display: flex;
    flex-direction: column;
    padding: clamp(12px, 1.7vw, 16px);
    overflow: hidden;
}

.ps-panel-kicker {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(245,130,32,0.11);
    color: var(--sj-orange);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ps-panel-title {
    flex-shrink: 0;
    font-size: clamp(0.92rem, 1.3vw, 1.06rem);
    font-weight: 850;
    color: var(--sj-dark);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.ps-dna-panel-metrics .ps-dna-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    margin: 0;
    scrollbar-width: none;
}

    .ps-dna-panel-metrics .ps-dna-grid::-webkit-scrollbar {
        display: none;
    }

.ps-dna-panel-metrics .ps-metric-tile,
.ps-dna-panel-metrics .ps-dna-block {
    min-height: clamp(86px, 13vh, 112px);
    padding: clamp(10px, 1.5vh, 12px);
}

.ps-dna-panel-twin {
    gap: 10px;
}

    .ps-dna-panel-twin .ps-twin-card {
        min-height: clamp(104px, 18vh, 138px);
    }

    .ps-dna-panel-twin .ps-intel-card,
    .ps-dna-panel-twin .ps-score-card {
        flex-shrink: 0;
    }

.ps-nav-dna {
    flex: 0 0 auto;
    margin-top: clamp(8px, 1.4vh, 12px);
    padding-top: clamp(7px, 1vh, 10px);
    min-height: clamp(46px, 6.5vh, 56px);
}

@media (max-width: 1180px), (max-height: 720px) {
    .ps-right {
        max-width: 320px;
        min-width: 260px;
        padding: 16px 14px;
    }

    .ps-dna-panels {
        grid-template-columns: minmax(0, 1.7fr) minmax(190px, 0.9fr) minmax(190px, 0.9fr);
        gap: 10px;
    }

    .ps-dna-panel-location .ps-location-map {
        min-height: clamp(220px, 38vh, 430px);
    }

    .ps-location-foot {
        font-size: 0.6rem;
    }
}

@media (max-height: 660px) {
    .ps-left {
        padding-top: 10px;
        padding-bottom: 8px;
    }

    .ps-cat-card {
        gap: 3px;
        padding: 7px 6px;
    }

    .ps-cat-meta {
        display: none;
    }

    .ps-dna-heading {
        grid-template-columns: 1fr;
        gap: 4px;
    }

        .ps-dna-heading .ps-subtitle {
            display: none;
        }

    .ps-dna-panel-location .ps-location-topline {
        align-items: flex-start;
    }

    .ps-dna-panel-location .ps-location-foot {
        display: none;
    }

    .ps-dna-panel-location .ps-location-map {
        min-height: 210px;
    }
}

@media (max-width: 900px) {
    .ps-scene-dna {
        overflow: hidden;
    }

    .ps-dna-heading {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .ps-dna-panels {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(260px, 1.35fr) minmax(160px, 0.75fr) minmax(150px, 0.65fr);
        overflow-y: auto;
        padding-right: 2px;
    }

    .ps-dna-panel-location .ps-location-map {
        min-height: 260px;
    }
}

@media (max-width: 768px) {
    .ps-left {
        padding: 14px 14px 10px;
    }

    .ps-nav {
        position: sticky;
        bottom: 0;
        margin-left: -2px;
        margin-right: -2px;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
    }

    .ps-scene-dna {
        flex-direction: column;
    }

    .ps-dna-shell {
        padding: 10px;
    }
}

@media (max-width: 560px) {
    .ps-nav {
        gap: 8px;
    }

    .ps-btn-back,
    .ps-btn-next {
        flex: 1 1 0;
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ============================================================
   BUG FIX PATCH — private-seller.css
   1. Scene 1: Category card edge-overflow on hover
   2. Nav buttons: always visible/fixed at all zoom levels
   3. Scene 2: Initial layout not lifted/truncated
   4. Scene 3: Nav buttons always visible, layout fixed
   5. Scene 3: Real Leaflet map container styles
   ============================================================ */

/* ── FIX 1: Category card hover stays within container ──────── */
/* Contain hover scaling within the grid bounds */
.ps-cat-grid {
    /* Prevent edge cards from visually escaping their container */
    padding: 2px; /* small buffer so shadow isn't clipped */
    overflow: visible !important; /* let shadows show... */
}

/* FIX: Drop all transform: scale() on cat cards completely.
   Scaling forces a new stacking context + GPU compositing layer which:
     a) blurs subpixel text on standard-DPI screens
     b) can clip child elements unexpectedly
   The hover/selected states still get clear visual feedback from
   border-color, box-shadow, and background — no scale needed.
   seller-additions.css v4 already set transform: none !important on
   :hover/:selected; these rules ensure the base card also never scales. */
.ps-cat-card:hover,
.ps-cat-card:focus,
.ps-cat-card:active {
    transform: none !important;
    z-index: 2;
    position: relative;
}

/* Remove edge-card micro-scale overrides — no longer needed */
.ps-cat-card:first-child:hover,
.ps-cat-card:nth-child(3):hover,
.ps-cat-card:nth-child(7):hover,
.ps-cat-card:last-child:hover {
    transform: none !important;
}

/* ── FIX 2: Nav buttons — always fixed/visible at every zoom ── */
/* Override margin-top: auto which can push nav offscreen */
.ps-nav {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 6px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 30%) !important;
    flex-shrink: 0 !important;
    z-index: 50 !important;
}

/* Nav inside .ps-dna-shell also needs to be visible */
.ps-nav-dna {
    position: sticky !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.97) 28%) !important;
    padding-top: 10px !important;
    padding-bottom: 6px !important;
    flex-shrink: 0 !important;
    z-index: 50 !important;
    margin-top: 8px !important;
}

/* Ensure ps-left can scroll and nav sticks */
.ps-left {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* ── FIX 3: Scene 2 — initial view not truncated/lifted ──────── */
/* The chip grid was flex:1 which made it collapse before subtype chosen */
/* The scene must lay out top-to-bottom naturally */
.ps-scene#psScene1 .ps-left {
    justify-content: flex-start !important;
}

/* chip grid: flex-grow but don't collapse; give it a sensible min */
.ps-scene#psScene1 .ps-chip-grid {
    flex: 1 1 auto !important;
    min-height: 60px !important;
    overflow-y: auto !important;
    max-height: none !important;
}

/* Subtype banner should not shift layout on initial load */
.ps-subtype-banner[style*="display: none"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
}

/* ── FIX 4: Scene 3 (DNA Builder) — full layout overhaul ──────── */
/* The dna-shell must fill height and lay out as a proper column */
.ps-dna-shell {
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Heading: compact, never grows to push panels down */
.ps-dna-heading {
    flex-shrink: 0 !important;
}

/* Panels: fill available space, allow scroll */
.ps-dna-panels {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Make the panels individually scrollable */
.ps-dna-panel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0,0,0,0.1) transparent !important;
}

/* nav-dna: never hidden, always at bottom of shell */
.ps-nav-dna {
    flex: 0 0 auto !important;
    min-height: 52px !important;
}

/* ── FIX 5: Real Leaflet Map container styles ────────────────── */
/* Leaflet replaces the fake gradient .ps-location-map */
.ps-location-map {
    background: #e8ecef !important; /* fallback while tile loads */
    overflow: hidden !important;
}

/* The leaflet map div itself */
#psDnaLeafletMap {
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    border-radius: inherit !important;
    z-index: 1 !important;
}

/* Override Leaflet's default font for cohesion */
.leaflet-container {
    font-family: inherit !important;
    border-radius: inherit !important;
}

/* Leaflet controls styling - match brand */
.leaflet-control-zoom a {
    color: var(--sj-dark) !important;
    font-weight: 700 !important;
}

    .leaflet-control-zoom a:hover {
        background-color: var(--sj-orange-light) !important;
        color: var(--sj-orange) !important;
    }

/* Location summary floats above leaflet map */
.ps-location-map .ps-location-summary {
    z-index: 500 !important; /* above leaflet tiles (z:200-400) */
    position: absolute !important;
}

/* Hide fake map decorations when leaflet is active */
.ps-location-map.leaflet-active .ps-map-grid,
.ps-location-map.leaflet-active .ps-map-route {
    display: none !important;
}

/* Pin: shown above leaflet when NOT locked (Leaflet marker handles locked) */
.ps-location-map.leaflet-active .ps-map-pin {
    display: none !important; /* Leaflet uses its own marker */
}

/* ── Extra: at 100% zoom, ensure scene-3 panels have min sizes ─ */
@media (min-width: 769px) {
    .ps-dna-panel-location .ps-location-map {
        min-height: clamp(200px, 36vh, 480px) !important;
    }
}

/* Scene 3 on smaller viewports: stack cleanly */
@media (max-height: 700px) {
    .ps-dna-panels {
        overflow-y: auto !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
    }

    .ps-dna-panel-location .ps-location-map {
        min-height: 200px !important;
    }
}

/* ============================================================
   GOOGLE MAPS CONTAINER — replaces Leaflet rules
   The div#psDnaLeafletMap is kept as the container ID for
   backwards-compat with the HTML scaffold, but now hosts
   a Google Maps instance.
   ============================================================ */

/* Container fills the .ps-location-map wrapper fully */
#psDnaLeafletMap {
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    border-radius: inherit !important;
    display: block !important;
    overflow: hidden !important;
}

    /* Google Maps injects its own div — make sure it also inherits radius */
    #psDnaLeafletMap > div {
        border-radius: inherit !important;
    }

/* Hide the fake gradient decorations — Google Maps renders the real map */
.ps-location-map .ps-map-grid,
.ps-location-map .ps-map-route,
.ps-location-map .ps-map-pin {
    display: none !important;
}

/* Location summary floats above Google Map tiles (z:100+) */
.ps-location-map .ps-location-summary {
    z-index: 500 !important;
    position: absolute !important;
}

/* Keep map background neutral while tiles load */
.ps-location-map {
    background: #e8ecf0 !important;
}

/* ============================================================
   IKHAYALAMI — ENHANCED SCENE 3 (DNA BUILDER) STYLES
   v4 — Grouped DNA, Market Pulse, Reveal Address, Map Fix
   ============================================================ */

/* ── FIX: Map — remove scrollbar, cap height to viewport ────── */
.ps-dna-panel-location .ps-location-map {
    min-height: clamp(130px, 28vh, 340px) !important;
    max-height: clamp(160px, 32vh, 380px) !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

/* Tighten the location card vertical padding so map fits without scroll */
.ps-dna-panel-location .ps-location-card {
    padding: clamp(10px, 1.4vw, 14px) !important;
    gap: 0 !important;
    overflow: hidden !important;
}

.ps-location-topline {
    margin-bottom: 8px;
    flex-shrink: 0;
}

.ps-location-search-wrap {
    flex-shrink: 0;
}

.ps-location-foot {
    flex-shrink: 0;
    font-size: 0.63rem;
}

/* ── DNA GROUP STYLING ───────────────────────────────────────── */
.ps-dna-group {
    margin-bottom: 10px;
}

    .ps-dna-group:last-child {
        margin-bottom: 0;
    }

.ps-dna-group-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--sj-orange);
    background: rgba(245,130,32,0.08);
    border-left: 3px solid var(--sj-orange);
    padding: 4px 10px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ps-dna-group-items {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* Override the grid on panel-metrics to use flex column for groups */
.ps-dna-panel-metrics .ps-dna-grid {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .ps-dna-panel-metrics .ps-dna-grid::-webkit-scrollbar {
        display: none !important;
    }

/* Metric tiles inside groups — slimmer for groups */
.ps-dna-group .ps-metric-tile {
    min-height: clamp(72px, 10vh, 88px) !important;
    padding: clamp(8px, 1.2vh, 10px) clamp(10px, 1.4vw, 12px) !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-start !important;
}

    .ps-dna-group .ps-metric-tile .ps-metric-icon {
        flex-shrink: 0;
        margin-bottom: 0 !important;
        width: 26px;
        height: 26px;
    }

    .ps-dna-group .ps-metric-tile .ps-dna-label {
        flex: 1;
        margin-bottom: 0 !important;
        font-size: 0.64rem;
    }

    .ps-dna-group .ps-metric-tile .ps-stepper {
        flex-shrink: 0;
        margin-left: auto;
    }

    .ps-dna-group .ps-metric-tile .ps-size-input {
        flex-shrink: 0;
        margin-left: auto;
        width: 100px;
    }

        .ps-dna-group .ps-metric-tile .ps-size-input input {
            width: 70px;
            font-size: 0.88rem;
        }

.ps-dna-group .ps-dna-block {
    min-height: auto !important;
    padding: clamp(8px, 1.2vh, 10px) clamp(10px, 1.4vw, 12px) !important;
}

/* ── REVEAL ADDRESS RADIO BUTTON ────────────────────────────── */
.ps-location-reveal {
    flex-shrink: 0;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(245,130,32,0.05);
    border: 1.5px solid rgba(245,130,32,0.15);
    border-radius: 14px;
}

.ps-reveal-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748B;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .ps-reveal-label i {
        color: var(--sj-orange);
    }

.ps-reveal-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ps-reveal-opt {
    cursor: pointer;
    display: flex;
    align-items: center;
}

    .ps-reveal-opt input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.ps-reveal-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: white;
    color: #6B7280;
    transition: all 0.22s ease;
}

.ps-reveal-opt input[type="radio"]:checked + .ps-reveal-pill.ps-reveal-yes {
    background: rgba(16,185,129,0.1);
    border-color: #10B981;
    color: #065F46;
}

.ps-reveal-opt input[type="radio"]:checked + .ps-reveal-pill.ps-reveal-no {
    background: rgba(245,130,32,0.1);
    border-color: var(--sj-orange);
    color: #7C2D12;
}

.ps-reveal-pill:hover {
    border-color: rgba(245,130,32,0.4);
    transform: scale(1.03);
}

/* ── MARKET PULSE CARD ───────────────────────────────────────── */
.ps-market-pulse-card {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border-radius: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(245,130,32,0.22);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

    .ps-market-pulse-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 90% 10%, rgba(245,130,32,0.2), transparent 55%);
        pointer-events: none;
    }

.ps-pulse-animate {
    animation: pulseReveal 0.45s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes pulseReveal {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

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

.ps-pulse-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ps-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sj-orange);
    box-shadow: 0 0 0 3px rgba(245,130,32,0.25);
    animation: pulseDot 2s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes pulseDot {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(245,130,32,0.25);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(245,130,32,0.1);
    }
}

.ps-pulse-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

    .ps-pulse-title strong {
        color: white;
        font-weight: 800;
    }

.ps-pulse-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .ps-pulse-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 0.73rem;
        color: rgba(255,255,255,0.82);
        line-height: 1.4;
    }

.ps-pulse-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── COLUMN 3 (Twin Panel) — match Scene 1/2 right panel style ─ */
.ps-dna-panel-twin {
    background: linear-gradient(160deg, #FAFBFC 0%, #F3F4F6 100%) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
}

    .ps-dna-panel-twin::-webkit-scrollbar {
        display: none !important;
    }

    .ps-dna-panel-twin .ps-twin-card {
        background: linear-gradient(135deg, var(--sj-dark) 0%, #1E2B3C 100%);
        border-radius: 18px;
        padding: 16px;
        flex-shrink: 0;
    }

    .ps-dna-panel-twin .ps-score-card {
        background: white;
        border-radius: 16px;
        border: 1.5px solid rgba(0,0,0,0.06);
        flex-shrink: 0;
    }

    .ps-dna-panel-twin .ps-intel-card {
        background: white;
        border-radius: 16px;
        border: 1.5px solid rgba(0,0,0,0.06);
        flex-shrink: 0;
    }

    .ps-dna-panel-twin .ps-panel-kicker {
        margin-bottom: 12px;
    }

/* ── RESPONSIVE — Tablet / Mobile adjustments ──────────────── */
@media (max-width: 1024px) {
    .ps-dna-panels {
        grid-template-columns: minmax(0, 1.6fr) minmax(180px, 0.85fr) minmax(180px, 0.85fr) !important;
    }

    .ps-dna-panel-location .ps-location-map {
        min-height: clamp(110px, 24vh, 280px) !important;
        max-height: clamp(140px, 28vh, 320px) !important;
    }
}

@media (max-width: 768px) {
    .ps-dna-panels {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        overflow-y: auto !important;
        gap: 10px !important;
    }

    .ps-dna-panel-location .ps-location-map {
        min-height: 180px !important;
        max-height: 220px !important;
    }

    .ps-dna-panel-twin {
        display: none !important;
    }

    .ps-reveal-options {
        flex-direction: column;
    }

    .ps-market-pulse-card {
        display: none !important;
    }
}

@media (max-height: 640px) {
    .ps-dna-panel-location .ps-location-map {
        min-height: 110px !important;
        max-height: 160px !important;
    }

    .ps-location-foot {
        display: none !important;
    }
}

/* ============================================================
   SCENE 3 (DNA BUILDER) — PREMIUM v5 OVERHAUL
   ------------------------------------------------------------
   Goals:
   1. Zoom-stable 60% → 150% — content fits at all zoom levels
   2. Col 1: reveal-address pills ALWAYS visible (was clipped)
   3. Col 2: premium grouped cards, every metric visible, no clip
   4. Col 3: mirror Scene 1 structure (twin → pulse → AI intel)
   5. Heading: subtitle BELOW question (scenes 0/1/3 pattern)
   ------------------------------------------------------------
   This block is appended LAST so it supersedes earlier patches
   without requiring edits to the prior rule blocks.
   ============================================================ */

/* ── HEADING (stack label → question → subtitle) ─────────────── */
.ps-dna-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    margin-bottom: clamp(6px, 1.1vh, 10px) !important;
}

    .ps-dna-heading .ps-progress {
        margin-bottom: 6px !important;
        width: 100%;
    }

    .ps-dna-heading .ps-scene-label {
        margin-bottom: 6px !important;
    }

    .ps-dna-heading .ps-question {
        margin-bottom: 4px !important;
        font-size: clamp(1.1rem, 1.9vw, 1.55rem) !important;
        line-height: 1.2 !important;
    }

    .ps-dna-heading .ps-subtitle {
        display: block !important;
        margin: 0 !important;
        max-width: none !important;
        color: #64748B;
        font-size: clamp(0.72rem, 1vw, 0.82rem);
        line-height: 1.5;
    }

/* ── SHELL — tighter vertical padding so 3 cols fit ─────────── */
.ps-dna-shell {
    padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.4vw, 18px) clamp(6px, 0.9vh, 10px) !important;
    gap: 0 !important;
}

/* ── PANELS GRID — balanced 3 columns with guaranteed minima ── */
.ps-dna-panels {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.05fr) minmax(0, 1fr) !important;
    gap: clamp(8px, 1.1vw, 14px) !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.ps-dna-panel {
    border-radius: 20px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* ============================================================
   COLUMN 1 — LOCATION (reveal pills always visible)
   ------------------------------------------------------------
   Strategy: the map is the only *flexible* child. Everything
   else (topline, search, summary row, reveal pills) is pinned
   with flex-shrink:0 so they never disappear. The map shrinks
   via clamp() floor when vertical space gets tight.
   ============================================================ */
.ps-dna-panel-location .ps-location-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: clamp(9px, 1.1vh, 12px) clamp(10px, 1.2vw, 13px) !important;
    gap: clamp(6px, 0.9vh, 9px) !important;
    overflow: hidden !important;
}

.ps-dna-panel-location .ps-location-topline,
.ps-dna-panel-location .ps-location-search-wrap,
.ps-dna-panel-location .ps-location-foot,
.ps-dna-panel-location .ps-location-reveal {
    flex-shrink: 0 !important;
}

/* Map: flexible middle that CAN shrink, with a sensible floor */
.ps-dna-panel-location .ps-location-map {
    flex: 1 1 auto !important;
    min-height: clamp(120px, 20vh, 240px) !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 16px !important;
}

/* Hide the decorative footer badges at cramped heights to keep
   the reveal pills visible. */
@media (max-height: 760px) {
    .ps-dna-panel-location .ps-location-foot {
        display: none !important;
    }
}

/* Reveal address — premium compact design, always visible */
.ps-location-reveal {
    margin-top: 0 !important;
    padding: clamp(8px, 1vh, 10px) clamp(10px, 1.2vw, 12px) !important;
    background: linear-gradient(135deg, rgba(245,130,32,0.06) 0%, rgba(86,196,248,0.05) 100%) !important;
    border: 1.5px solid rgba(245,130,32,0.16) !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
}

.ps-reveal-label {
    font-size: clamp(0.6rem, 0.78vw, 0.66rem) !important;
    margin-bottom: clamp(5px, 0.7vh, 7px) !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ps-reveal-options {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
}

.ps-reveal-opt {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.ps-reveal-pill {
    width: 100% !important;
    justify-content: center !important;
    padding: clamp(5px, 0.8vh, 7px) clamp(8px, 1vw, 12px) !important;
    font-size: clamp(0.64rem, 0.85vw, 0.72rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ============================================================
   COLUMN 2 — PROPERTY DNA (premium redesign)
   ------------------------------------------------------------
   The prior design placed groups as flex-column stacks that
   pushed the last group (Utility & Access / Garages) below
   the scroll fold. The new design:
   - anchors the panel header (kicker + title + completion ring)
   - groups sit in a scroll-only-if-needed column
   - each group is a compact section card with its label as a
     chip-style header and horizontal metric rows
   - metric rows are single-line flex layouts → always visible
   ============================================================ */
.ps-dna-panel-metrics {
    padding: clamp(10px, 1.3vh, 14px) clamp(10px, 1.2vw, 14px) clamp(8px, 1vh, 12px) !important;
    background: linear-gradient(165deg, #ffffff 0%, #fcfcfd 100%) !important;
    border: 1px solid rgba(15,23,42,0.07) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

/* Header: kicker + title on the left, progress ring on the right */
.ps-metrics-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    margin-bottom: clamp(8px, 1.1vh, 12px) !important;
    padding-bottom: clamp(8px, 1.1vh, 12px) !important;
    border-bottom: 1px dashed rgba(245,130,32,0.22) !important;
}

    .ps-metrics-head .ps-metrics-head-left {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ps-metrics-head .ps-panel-kicker {
        margin-bottom: 4px !important;
        font-size: clamp(0.55rem, 0.7vw, 0.62rem) !important;
    }

    .ps-metrics-head .ps-panel-title {
        margin-bottom: 0 !important;
        font-size: clamp(0.8rem, 1.1vw, 0.96rem) !important;
        font-weight: 800 !important;
    }

/* Completion ring */
.ps-metrics-completion {
    position: relative;
    flex-shrink: 0;
    width: clamp(36px, 4vw, 44px);
    height: clamp(36px, 4vw, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ps-ring-bg {
    stroke: rgba(245,130,32,0.15);
}

.ps-ring-fill {
    stroke: var(--sj-orange);
    transition: stroke-dasharray 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-metrics-completion.is-complete .ps-ring-fill {
    stroke: var(--sj-success, #10B981);
}

.ps-ring-label {
    position: absolute;
    font-size: clamp(0.58rem, 0.75vw, 0.68rem);
    font-weight: 800;
    color: var(--sj-dark);
    letter-spacing: -0.02em;
}

/* The group container fills remaining space; scrolls internally
   only when truly necessary. */
.ps-dna-panel-metrics .ps-dna-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(7px, 0.9vh, 10px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 2px;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(245,130,32,0.25) transparent !important;
}

    .ps-dna-panel-metrics .ps-dna-grid::-webkit-scrollbar {
        display: block !important;
        width: 4px !important;
    }

    .ps-dna-panel-metrics .ps-dna-grid::-webkit-scrollbar-thumb {
        background: rgba(245,130,32,0.25);
        border-radius: 2px;
    }

/* DNA group card — premium container */
.ps-dna-panel-metrics .ps-dna-group {
    margin: 0 !important;
    padding: clamp(7px, 0.9vh, 10px) clamp(9px, 1vw, 11px) !important;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(15,23,42,0.035);
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .ps-dna-panel-metrics .ps-dna-group::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, var(--sj-orange), #f97316);
        opacity: 0.85;
    }

    .ps-dna-panel-metrics .ps-dna-group:hover {
        border-color: rgba(245,130,32,0.3);
        box-shadow: 0 5px 14px rgba(245,130,32,0.08);
    }

.ps-dna-panel-metrics .ps-dna-group-label {
    background: transparent !important;
    border-left: 0 !important;
    padding: 0 !important;
    margin: 0 0 clamp(5px, 0.7vh, 7px) !important;
    border-radius: 0 !important;
    font-size: clamp(0.58rem, 0.75vw, 0.65rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    color: var(--sj-dark) !important;
    text-transform: uppercase !important;
    padding-left: clamp(6px, 0.8vw, 8px) !important;
}

.ps-dna-panel-metrics .ps-dna-group-items {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(4px, 0.6vh, 6px) !important;
    padding-left: clamp(6px, 0.8vw, 8px) !important;
}

/* Each metric becomes a compact horizontal row — no wasted space */
.ps-dna-panel-metrics .ps-dna-group .ps-metric-tile {
    min-height: clamp(38px, 5.2vh, 46px) !important;
    padding: clamp(4px, 0.6vh, 6px) clamp(7px, 0.9vw, 10px) !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(7px, 0.9vw, 10px) !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffbf7 100%) !important;
    border: 1px solid rgba(245,130,32,0.1) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.03) !important;
    overflow: hidden !important;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s !important;
}

    .ps-dna-panel-metrics .ps-dna-group .ps-metric-tile::after {
        display: none !important;
    }

    .ps-dna-panel-metrics .ps-dna-group .ps-metric-tile:hover {
        border-color: rgba(245,130,32,0.3) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 10px rgba(245,130,32,0.1) !important;
    }

    .ps-dna-panel-metrics .ps-dna-group .ps-metric-tile .ps-metric-icon {
        flex-shrink: 0 !important;
        width: clamp(22px, 2.5vw, 26px) !important;
        height: clamp(22px, 2.5vw, 26px) !important;
        margin: 0 !important;
        border-radius: 7px !important;
        font-size: clamp(0.68rem, 0.9vw, 0.78rem) !important;
    }

    .ps-dna-panel-metrics .ps-dna-group .ps-metric-tile .ps-dna-label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: clamp(0.6rem, 0.82vw, 0.68rem) !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #475569 !important;
    }

    /* Stepper — tighter, right-aligned */
    .ps-dna-panel-metrics .ps-dna-group .ps-metric-tile .ps-stepper {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        gap: clamp(4px, 0.5vw, 6px) !important;
    }

    .ps-dna-panel-metrics .ps-dna-group .ps-metric-tile .ps-step-btn {
        width: clamp(22px, 2.6vw, 26px) !important;
        height: clamp(22px, 2.6vw, 26px) !important;
        font-size: clamp(0.8rem, 1vw, 0.95rem) !important;
    }

    .ps-dna-panel-metrics .ps-dna-group .ps-metric-tile .ps-step-val {
        font-size: clamp(0.75rem, 0.95vw, 0.88rem) !important;
        font-weight: 800 !important;
        min-width: 16px !important;
        text-align: center !important;
    }

    /* Size input — right-aligned, compact */
    .ps-dna-panel-metrics .ps-dna-group .ps-metric-tile .ps-size-input {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        width: clamp(74px, 9vw, 94px) !important;
    }

        .ps-dna-panel-metrics .ps-dna-group .ps-metric-tile .ps-size-input input {
            width: clamp(50px, 6vw, 64px) !important;
            font-size: clamp(0.72rem, 0.95vw, 0.84rem) !important;
            font-weight: 700 !important;
        }

/* Power-phase & zoning selects — normalize inline presentation */
.ps-dna-panel-metrics .ps-dna-group .ps-dna-block:not(.ps-metric-tile) {
    min-height: clamp(38px, 5.2vh, 46px) !important;
    padding: clamp(6px, 0.8vh, 8px) clamp(8px, 1vw, 10px) !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffbf7 100%) !important;
    border: 1px solid rgba(245,130,32,0.1) !important;
    border-radius: 10px !important;
}

/* ============================================================
   COLUMN 3 — DIGITAL TWIN (mirrors Scene 1 right panel)
   ------------------------------------------------------------
   Order: twin card → market pulse card → AI intel card.
   Matches psRight1 pattern: ps-twin-card → ps-subtype-edu-card
   → ps-intel-card. The score bar is inlined inside the AI
   intel card instead of occupying its own card — this is what
   keeps the whole column visible at every zoom level.
   ============================================================ */
.ps-dna-panel-twin {
    padding: clamp(10px, 1.3vh, 14px) !important;
    gap: clamp(8px, 1.1vh, 12px) !important;
    background: linear-gradient(160deg, #FAFBFC 0%, #F3F4F6 100%) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
}

    .ps-dna-panel-twin::-webkit-scrollbar {
        display: none !important;
    }

    .ps-dna-panel-twin > * {
        flex-shrink: 0 !important;
    }

    /* Twin card — premium dark hero (matches Scene 1 twin card) */
    .ps-dna-panel-twin .ps-twin-card {
        min-height: clamp(88px, 14vh, 118px) !important;
        padding: clamp(11px, 1.3vh, 14px) !important;
        border-radius: 16px !important;
        background: linear-gradient(135deg, var(--sj-dark) 0%, #1E2B3C 100%) !important;
        position: relative !important;
        overflow: hidden !important;
    }

        .ps-dna-panel-twin .ps-twin-card::before {
            content: '';
            position: absolute;
            bottom: -20px;
            right: -20px;
            width: 80px;
            height: 80px;
            background: var(--sj-orange);
            border-radius: 50%;
            opacity: 0.12;
            pointer-events: none;
        }

    .ps-dna-panel-twin .ps-twin-label {
        font-size: clamp(0.55rem, 0.7vw, 0.62rem) !important;
        margin-bottom: 4px !important;
    }

    .ps-dna-panel-twin .ps-twin-value {
        font-size: clamp(0.82rem, 1.1vw, 0.98rem) !important;
        font-weight: 800 !important;
        margin-bottom: clamp(5px, 0.8vh, 8px) !important;
        word-break: break-word !important;
    }

    .ps-dna-panel-twin .ps-twin-row {
        gap: 5px !important;
    }

    .ps-dna-panel-twin .ps-twin-chip {
        font-size: clamp(0.58rem, 0.75vw, 0.66rem) !important;
        padding: 3px 8px !important;
    }

    /* Market pulse card — compact, always visible when location locked */
    .ps-dna-panel-twin .ps-market-pulse-card {
        padding: clamp(10px, 1.2vh, 13px) clamp(11px, 1.3vw, 14px) !important;
        border-radius: 16px !important;
    }

    .ps-dna-panel-twin .ps-pulse-header {
        margin-bottom: clamp(6px, 0.9vh, 9px) !important;
    }

    .ps-dna-panel-twin .ps-pulse-title {
        font-size: clamp(0.58rem, 0.78vw, 0.66rem) !important;
        line-height: 1.3 !important;
    }

    .ps-dna-panel-twin .ps-pulse-list {
        gap: clamp(4px, 0.6vh, 6px) !important;
    }

        .ps-dna-panel-twin .ps-pulse-list li {
            font-size: clamp(0.65rem, 0.85vw, 0.72rem) !important;
            line-height: 1.35 !important;
        }

    .ps-dna-panel-twin .ps-pulse-icon {
        font-size: clamp(0.75rem, 0.95vw, 0.82rem) !important;
    }

    /* AI Signal intel card — with inlined score bar
   ALWAYS FULLY VISIBLE: no max-height, no clip, text wraps */
    .ps-dna-panel-twin .ps-dna-intel-card {
        padding: clamp(10px, 1.3vh, 14px) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: clamp(8px, 1.1vh, 10px) !important;
        overflow: visible !important;
    }

        .ps-dna-panel-twin .ps-dna-intel-card .ps-intel-header {
            margin-bottom: 0 !important;
            font-size: clamp(0.6rem, 0.8vw, 0.7rem) !important;
        }

        .ps-dna-panel-twin .ps-dna-intel-card .ps-intel-insight {
            margin: 0 !important;
            font-size: clamp(0.72rem, 0.95vw, 0.8rem) !important;
            line-height: 1.5 !important;
            color: var(--sj-dark) !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            white-space: normal !important;
            overflow: visible !important;
        }

/* Inline score meter inside the AI Signal card */
.ps-dna-score-inline {
    padding-top: clamp(6px, 0.9vh, 9px);
    border-top: 1px dashed rgba(15,23,42,0.08);
}

.ps-dna-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 10px;
}

.ps-dna-score-label {
    font-size: clamp(0.62rem, 0.82vw, 0.7rem);
    font-weight: 700;
    color: var(--sj-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ps-dna-score-val {
    font-size: clamp(0.8rem, 1vw, 0.92rem);
    font-weight: 900;
    color: var(--sj-orange);
    letter-spacing: -0.02em;
}

.ps-dna-score-bar-wrap {
    height: 5px;
    background: rgba(15,23,42,0.06);
    border-radius: 3px;
    overflow: hidden;
}

.ps-dna-score-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sj-orange), #56C4F8);
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   SUPERSEDE PRIOR MAP HEIGHT CAPS
   ------------------------------------------------------------
   Earlier rule blocks set max-height on the map that conflicted
   with the new flex-1 behaviour. Override explicitly so the
   reveal pills always stay in view.
   ============================================================ */
.ps-dna-panel-location .ps-location-map {
    max-height: none !important;
}

@media (min-width: 769px) {
    .ps-dna-panel-location .ps-location-map {
        max-height: none !important;
    }
}

@media (max-width: 1024px) {
    .ps-dna-panels {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.95fr) !important;
    }

    .ps-dna-panel-location .ps-location-map {
        max-height: none !important;
    }
}

/* ============================================================
   ZOOM-STABLE MID-VIEWPORT (1180px / 720px breakpoint)
   ------------------------------------------------------------
   At 60-75% browser zoom on a typical laptop, the viewport
   reads as 1400–1600px wide — plenty of room for 3 columns.
   At 125-150% zoom the viewport reads as 900–1100px. The
   rule below keeps 3 columns down to 900px wide by tightening
   internal padding. Below 900px the existing tablet stack
   kicks in (see @media max-width: 900px earlier in the file).
   ============================================================ */
@media (max-width: 1180px) {
    .ps-dna-panels {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .ps-dna-panel-metrics,
    .ps-dna-panel-twin {
        padding: 10px !important;
    }

    .ps-dna-panel-location .ps-location-card {
        padding: 10px !important;
    }
}

/* ============================================================
   HIGH-ZOOM FALLBACK (viewport below 900px)
   ------------------------------------------------------------
   When zoomed > 150% on a 1440px monitor, the viewport shrinks
   below 900px. Stack columns vertically with scroll. Previously
   col 3 was hidden entirely — we now keep it visible because
   the Digital Twin feedback is the point of the scene.
   ============================================================ */
@media (max-width: 900px) {
    .ps-dna-panels {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        gap: 10px !important;
        overflow-y: auto !important;
    }

    .ps-dna-panel {
        min-height: auto !important;
    }

    .ps-dna-panel-location .ps-location-map {
        min-height: 200px !important;
    }

    .ps-dna-panel-twin {
        display: flex !important; /* override earlier display:none at 768px */
    }
}

@media (max-width: 768px) {
    .ps-dna-panel-twin {
        display: flex !important;
    }

    .ps-market-pulse-card {
        display: block !important;
    }
}

/* ============================================================
   LOW HEIGHT FALLBACK (≤ 640px — e.g. small laptop zoom-in)
   ------------------------------------------------------------
   Hide progressively less-critical visual decorations rather
   than letting content overflow.
   ============================================================ */
@media (max-height: 640px) and (min-width: 901px) {
    .ps-dna-heading .ps-subtitle {
        display: none !important;
    }

    .ps-dna-panel-location .ps-location-topline {
        display: none !important;
    }

    .ps-dna-panel-location .ps-location-map {
        min-height: 100px !important;
    }

    .ps-dna-panel-twin .ps-twin-card {
        min-height: 72px !important;
    }

    .ps-dna-panel-metrics .ps-metrics-completion {
        display: none !important;
    }
}

/* ============================================================
   HIGH-DPI / EXTREME ZOOM (very tall viewports)
   ------------------------------------------------------------
   Lock the upper bounds so card layouts don't balloon on
   ultra-tall monitors or extreme zoom-outs.
   ============================================================ */
@media (min-height: 1100px) {
    .ps-dna-panel-location .ps-location-map {
        min-height: 280px !important;
    }

    .ps-dna-panel-metrics .ps-dna-group .ps-metric-tile {
        min-height: 52px !important;
    }
}

/* ============================================================
   SCENE 3 (DNA BUILDER) — v6 RESTRUCTURE
   ------------------------------------------------------------
   This scene now uses the SAME .ps-left / .ps-right wrapper
   as scenes 0 and 1. The old .ps-dna-shell / .ps-dna-panels
   three-column layout has been retired — Column 3 (Digital
   Twin) is now a standalone .ps-right rail, and Columns 1+2
   live inside .ps-left as a clean 2-column .ps-dna-workarea.
   ------------------------------------------------------------
   The v5 block above still lives in the file because it
   contained zoom-proofing rules that remain useful for the
   silhouette / reveal-pills. This v6 block supersedes only
   the structural rules that no longer apply.
   ============================================================ */

/* ── Retire the old shell — the scene is now a plain flex row ─ */
.ps-scene-dna {
    flex-direction: row !important;
    align-items: stretch !important;
}

/* Left rail — holds the heading, workarea, and nav */
.ps-dna-left {
    padding: clamp(12px, 1.4vh, 18px) clamp(14px, 1.8vw, 24px) clamp(8px, 1vh, 12px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    gap: 0 !important;
}

    /* Heading: tight, stacked, subtitle right below the question */
    .ps-dna-left .ps-progress {
        flex-shrink: 0 !important;
        margin-bottom: 6px !important;
    }

    .ps-dna-left .ps-scene-label {
        flex-shrink: 0 !important;
        margin-bottom: 4px !important;
    }

    .ps-dna-left .ps-question {
        flex-shrink: 0 !important;
        margin-bottom: 2px !important;
        font-size: clamp(1rem, 1.65vw, 1.4rem) !important;
        line-height: 1.2 !important;
    }

    .ps-dna-left .ps-subtitle {
        flex-shrink: 0 !important;
        margin: 0 0 clamp(8px, 1vh, 12px) !important;
        font-size: clamp(0.7rem, 0.92vw, 0.78rem) !important;
        color: #64748B !important;
        line-height: 1.45 !important;
        max-width: none !important;
    }

/* ── Workarea: the 2-column grid of Location + DNA ─────────── */
.ps-dna-workarea {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) !important;
    gap: clamp(10px, 1.2vw, 14px) !important;
    overflow: hidden !important;
}

    /* Panels inside the workarea */
    .ps-dna-workarea .ps-dna-panel {
        min-height: 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border: 1px solid rgba(15,23,42,0.07) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 6px 18px rgba(15,23,42,0.05), inset 0 1px 0 rgba(255,255,255,0.95) !important;
    }

/* Nav inside ps-dna-left — sticky at the bottom */
.ps-dna-left .ps-nav-dna {
    flex: 0 0 auto !important;
    margin-top: clamp(8px, 1vh, 12px) !important;
    padding-top: clamp(6px, 0.8vh, 10px) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 40%) !important;
}

/* ============================================================
   COLUMN 1 — LOCATION (map is the hero visual, now bigger)
   ============================================================ */
.ps-dna-workarea .ps-dna-panel-location {
    background: linear-gradient(155deg, #ffffff 0%, #fff7ed 55%, #f4faff 100%) !important;
}

    .ps-dna-workarea .ps-dna-panel-location .ps-location-card {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        padding: clamp(9px, 1vh, 12px) clamp(10px, 1.1vw, 13px) !important;
        gap: clamp(6px, 0.8vh, 8px) !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .ps-dna-workarea .ps-dna-panel-location .ps-location-topline,
    .ps-dna-workarea .ps-dna-panel-location .ps-location-search-wrap,
    .ps-dna-workarea .ps-dna-panel-location .ps-location-foot,
    .ps-dna-workarea .ps-dna-panel-location .ps-location-reveal {
        flex-shrink: 0 !important;
    }

    /* MAP — the hero. Taller min, flexes to fill remaining space. */
    .ps-dna-workarea .ps-dna-panel-location .ps-location-map {
        flex: 1 1 auto !important;
        min-height: clamp(200px, 34vh, 420px) !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        position: relative !important;
        background: #e8ecf0 !important;
        box-shadow: 0 4px 14px rgba(15,23,42,0.08) !important;
    }

/* Hide decorative footer badges at tight heights */
@media (max-height: 760px) {
    .ps-dna-workarea .ps-dna-panel-location .ps-location-foot {
        display: none !important;
    }
}

/* Google Maps zoom control — make it pop against the map */
.ps-location-map .gm-bundled-control,
.ps-location-map .gmnoprint {
    margin: 8px !important;
}

.ps-location-map button[title*="Zoom"] {
    box-shadow: 0 2px 8px rgba(15,23,42,0.15) !important;
}

/* Reveal pills — compact, always visible */
.ps-dna-workarea .ps-location-reveal {
    padding: clamp(7px, 0.9vh, 9px) clamp(9px, 1vw, 11px) !important;
    background: linear-gradient(135deg, rgba(245,130,32,0.07) 0%, rgba(86,196,248,0.05) 100%) !important;
    border: 1.5px solid rgba(245,130,32,0.18) !important;
    border-radius: 11px !important;
    margin-top: 0 !important;
}

.ps-dna-workarea .ps-reveal-label {
    margin-bottom: 5px !important;
    font-size: clamp(0.56rem, 0.72vw, 0.62rem) !important;
    letter-spacing: 0.08em !important;
}

.ps-dna-workarea .ps-reveal-options {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}

.ps-dna-workarea .ps-reveal-opt {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.ps-dna-workarea .ps-reveal-pill {
    width: 100% !important;
    justify-content: center !important;
    padding: clamp(4px, 0.6vh, 6px) clamp(6px, 0.8vw, 9px) !important;
    font-size: clamp(0.58rem, 0.78vw, 0.66rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

    .ps-dna-workarea .ps-reveal-pill i {
        font-size: 0.8em !important;
    }

/* Topline — compact */
.ps-dna-workarea .ps-location-topline {
    margin-bottom: 0 !important;
}

.ps-dna-workarea .ps-location-kicker {
    font-size: clamp(0.55rem, 0.72vw, 0.62rem) !important;
    margin-bottom: 2px !important;
}

.ps-dna-workarea .ps-location-title {
    font-size: clamp(0.78rem, 1vw, 0.9rem) !important;
}

.ps-dna-workarea .ps-location-state {
    font-size: clamp(0.56rem, 0.72vw, 0.62rem) !important;
    padding: 3px 8px !important;
}

.ps-dna-workarea .ps-location-foot {
    font-size: clamp(0.56rem, 0.72vw, 0.6rem) !important;
    margin-top: 0 !important;
}

.ps-dna-workarea .ps-location-search {
    height: clamp(36px, 4.6vh, 42px) !important;
    font-size: clamp(0.76rem, 1vw, 0.88rem) !important;
}

/* ============================================================
   COLUMN 2 — DNA DIMENSIONS (Silhouette + flat rows)
   ------------------------------------------------------------
   The panel is vertically divided:
     1. Anchored header (kicker + title + completion ring)
     2. Silhouette stage (the live blueprint — hero of Col 2)
     3. Flat dimension rows (icon + label + control)
   Everything is tight, clean, and always visible at every
   zoom level because the silhouette itself scales via the
   SVG's preserveAspectRatio.
   ============================================================ */
.ps-dna-workarea .ps-dna-panel-metrics {
    padding: clamp(9px, 1.1vh, 12px) clamp(10px, 1.1vw, 13px) clamp(7px, 0.9vh, 10px) !important;
    background: linear-gradient(165deg, #ffffff 0%, #fcfcfd 100%) !important;
    gap: 0 !important;
}

/* Header — compact, never steals space from the stage */
.ps-dna-workarea .ps-metrics-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    margin-bottom: clamp(6px, 0.8vh, 9px) !important;
    padding-bottom: clamp(6px, 0.8vh, 9px) !important;
    border-bottom: 1px dashed rgba(245,130,32,0.22) !important;
}

.ps-dna-workarea .ps-metrics-head-left {
    flex: 1 1 auto;
    min-width: 0;
}

.ps-dna-workarea .ps-metrics-head .ps-panel-kicker {
    margin-bottom: 2px !important;
    font-size: clamp(0.52rem, 0.68vw, 0.58rem) !important;
    padding: 3px 7px !important;
}

.ps-dna-workarea .ps-metrics-head .ps-panel-title {
    margin-bottom: 0 !important;
    font-size: clamp(0.74rem, 1vw, 0.88rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}

.ps-dna-workarea .ps-metrics-completion {
    position: relative;
    flex-shrink: 0;
    width: clamp(32px, 3.6vw, 40px);
    height: clamp(32px, 3.6vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-dna-workarea .ps-ring-label {
    font-size: clamp(0.52rem, 0.7vw, 0.6rem);
    font-weight: 800;
}

/* ── SILHOUETTE STAGE — the live SVG blueprint hero ────────── */
.ps-silhouette-stage {
    flex: 0 0 auto;
    width: 100%;
    min-height: clamp(110px, 17vh, 175px);
    max-height: clamp(135px, 22vh, 210px);
    margin-bottom: clamp(7px, 0.9vh, 10px);
    padding: clamp(6px, 0.8vh, 9px) clamp(8px, 1vw, 11px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 70%, rgba(245,130,32,0.06) 0%, transparent 65%), linear-gradient(180deg, #fffdfa 0%, #fff5e9 100%);
    border: 1px dashed rgba(245,130,32,0.28);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

    .ps-silhouette-stage::before {
        /* subtle grid backdrop, like blueprint paper */
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(245,130,32,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(245,130,32,0.05) 1px, transparent 1px);
        background-size: 14px 14px;
        pointer-events: none;
    }

.ps-silhouette-svg {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: calc(100% - 18px);
    flex: 1 1 auto;
    display: block;
    min-height: 0;
}

.ps-silhouette-caption {
    position: relative;
    flex-shrink: 0;
    font-size: clamp(0.56rem, 0.74vw, 0.64rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sj-orange);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

/* Silhouette strokes/fills */
.ps-sil-fill {
    fill: rgba(245,130,32,0.12);
    stroke: var(--sj-orange, #F58220);
    stroke-linejoin: round;
}

.ps-sil-fill-soft {
    fill: rgba(245,130,32,0.06);
    stroke: rgba(245,130,32,0.7);
}

.ps-sil-stroke {
    stroke: var(--sj-orange, #F58220);
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.ps-sil-door {
    fill: rgba(15,23,42,0.82);
    stroke: rgba(15,23,42,0.9);
}

.ps-sil-slat {
    stroke: rgba(255,255,255,0.7);
    fill: none;
}

.ps-sil-window {
    fill: rgba(86,196,248,0.35);
    stroke: rgba(15,23,42,0.6);
}

.ps-sil-ground {
    stroke: rgba(15,23,42,0.4);
    stroke-dasharray: 3 3;
}

/* ── FLAT DIMENSION ROWS (no group cards) ─────────────────── */
/* The ps-dna-grid becomes a flat vertical list. Group dividers
   slip between sections as subtle horizontal lines. */
.ps-dna-workarea .ps-dna-panel-metrics .ps-dna-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(4px, 0.55vh, 6px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 2px !important;
    margin: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(245,130,32,0.25) transparent !important;
}

    .ps-dna-workarea .ps-dna-panel-metrics .ps-dna-grid::-webkit-scrollbar {
        display: block !important;
        width: 4px !important;
    }

    .ps-dna-workarea .ps-dna-panel-metrics .ps-dna-grid::-webkit-scrollbar-thumb {
        background: rgba(245,130,32,0.25) !important;
        border-radius: 2px !important;
    }

/* Subtle section divider between groups */
.ps-dna-row-divider {
    flex-shrink: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,130,32,0.24), transparent);
    margin: clamp(3px, 0.5vh, 5px) 0;
}

/* Each metric row — icon + label + control, single line */
.ps-dna-workarea .ps-dna-panel-metrics .ps-metric-tile,
.ps-dna-workarea .ps-dna-panel-metrics .ps-dna-block {
    min-height: clamp(34px, 4.6vh, 42px) !important;
    padding: clamp(4px, 0.55vh, 6px) clamp(8px, 1vw, 10px) !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(6px, 0.85vw, 9px) !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffaf4 100%) !important;
    border: 1px solid rgba(245,130,32,0.1) !important;
    border-radius: 9px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.025) !important;
    transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s !important;
    overflow: hidden !important;
}

    .ps-dna-workarea .ps-dna-panel-metrics .ps-metric-tile::after {
        display: none !important;
    }

    .ps-dna-workarea .ps-dna-panel-metrics .ps-metric-tile:hover,
    .ps-dna-workarea .ps-dna-panel-metrics .ps-dna-block:hover {
        border-color: rgba(245,130,32,0.32) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 3px 7px rgba(245,130,32,0.1) !important;
    }

    .ps-dna-workarea .ps-dna-panel-metrics .ps-metric-tile .ps-metric-icon {
        flex-shrink: 0 !important;
        width: clamp(20px, 2.3vw, 24px) !important;
        height: clamp(20px, 2.3vw, 24px) !important;
        margin: 0 !important;
        border-radius: 6px !important;
        font-size: clamp(0.62rem, 0.82vw, 0.72rem) !important;
    }

    .ps-dna-workarea .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: clamp(0.58rem, 0.78vw, 0.68rem) !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #475569 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    /* Stepper — tight, right-aligned */
    .ps-dna-workarea .ps-dna-panel-metrics .ps-metric-tile .ps-stepper {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        gap: clamp(4px, 0.5vw, 6px) !important;
    }

    .ps-dna-workarea .ps-dna-panel-metrics .ps-metric-tile .ps-step-btn {
        width: clamp(22px, 2.5vw, 26px) !important;
        height: clamp(22px, 2.5vw, 26px) !important;
        font-size: clamp(0.8rem, 1vw, 0.95rem) !important;
        border-radius: 6px !important;
    }

    .ps-dna-workarea .ps-dna-panel-metrics .ps-metric-tile .ps-step-val {
        font-size: clamp(0.72rem, 0.95vw, 0.84rem) !important;
        font-weight: 800 !important;
        min-width: 16px !important;
        text-align: center !important;
    }

    /* Size input — right-aligned, compact */
    .ps-dna-workarea .ps-dna-panel-metrics .ps-metric-tile .ps-size-input {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        width: clamp(80px, 9vw, 104px) !important;
        gap: 4px !important;
    }

        .ps-dna-workarea .ps-dna-panel-metrics .ps-metric-tile .ps-size-input input {
            width: clamp(50px, 6vw, 66px) !important;
            font-size: clamp(0.7rem, 0.92vw, 0.82rem) !important;
            font-weight: 700 !important;
            padding: 3px 6px !important;
        }

        .ps-dna-workarea .ps-dna-panel-metrics .ps-metric-tile .ps-size-input span {
            font-size: clamp(0.6rem, 0.78vw, 0.68rem) !important;
            color: var(--sj-muted) !important;
            font-weight: 700 !important;
        }

    /* Select inputs (power phase, zoning) */
    .ps-dna-workarea .ps-dna-panel-metrics .ps-dna-block:not(.ps-metric-tile) {
        min-height: clamp(34px, 4.6vh, 42px) !important;
        padding: clamp(5px, 0.7vh, 7px) clamp(8px, 1vw, 10px) !important;
    }

        .ps-dna-workarea .ps-dna-panel-metrics .ps-dna-block:not(.ps-metric-tile) select {
            font-size: clamp(0.66rem, 0.9vw, 0.76rem) !important;
        }

/* ============================================================
   COLUMN 3 — DIGITAL TWIN (standalone .ps-right rail)
   ------------------------------------------------------------
   Identical structure to psRight0 / psRight1:
       twin hero card → insight card → AI intel card.
   ============================================================ */
.ps-scene-dna > .ps-right {
    flex: 0 0 32% !important;
    min-width: 260px !important;
    max-width: 340px !important;
    padding: clamp(14px, 1.8vh, 20px) clamp(14px, 1.6vw, 18px) !important;
    gap: clamp(10px, 1.3vh, 14px) !important;
    background: linear-gradient(160deg, #FAFBFC 0%, #F3F4F6 100%) !important;
    border-left: 1px solid rgba(0,0,0,0.06) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
}

    .ps-scene-dna > .ps-right::-webkit-scrollbar {
        display: none !important;
    }

    .ps-scene-dna > .ps-right > * {
        flex-shrink: 0 !important;
    }

    /* Twin hero card — matches Scene 1's dark twin card */
    .ps-scene-dna > .ps-right .ps-twin-card {
        min-height: clamp(90px, 14vh, 124px) !important;
        padding: clamp(12px, 1.4vh, 16px) !important;
        border-radius: 16px !important;
        background: linear-gradient(135deg, var(--sj-dark) 0%, #1E2B3C 100%) !important;
        position: relative !important;
        overflow: hidden !important;
    }

        .ps-scene-dna > .ps-right .ps-twin-card::before {
            content: '';
            position: absolute;
            bottom: -20px;
            right: -20px;
            width: 80px;
            height: 80px;
            background: var(--sj-orange);
            border-radius: 50%;
            opacity: 0.12;
            pointer-events: none;
        }

    .ps-scene-dna > .ps-right .ps-twin-label {
        font-size: clamp(0.56rem, 0.72vw, 0.62rem) !important;
        margin-bottom: 4px !important;
    }

    .ps-scene-dna > .ps-right .ps-twin-value {
        font-size: clamp(0.86rem, 1.15vw, 1rem) !important;
        font-weight: 800 !important;
        margin-bottom: clamp(5px, 0.8vh, 8px) !important;
        word-break: break-word !important;
    }

    .ps-scene-dna > .ps-right .ps-twin-row {
        gap: 5px !important;
    }

    .ps-scene-dna > .ps-right .ps-twin-chip {
        font-size: clamp(0.6rem, 0.78vw, 0.68rem) !important;
        padding: 3px 8px !important;
    }

    /* Market pulse card (visible once location locked) */
    .ps-scene-dna > .ps-right .ps-market-pulse-card {
        padding: clamp(11px, 1.3vh, 14px) clamp(12px, 1.4vw, 15px) !important;
        border-radius: 16px !important;
    }

    .ps-scene-dna > .ps-right .ps-pulse-title {
        font-size: clamp(0.6rem, 0.78vw, 0.66rem) !important;
        line-height: 1.3 !important;
    }

    .ps-scene-dna > .ps-right .ps-pulse-list li {
        font-size: clamp(0.66rem, 0.86vw, 0.74rem) !important;
        line-height: 1.4 !important;
    }

    /* AI Signal card — text ALWAYS fully visible */
    .ps-scene-dna > .ps-right .ps-dna-intel-card {
        padding: clamp(12px, 1.4vh, 15px) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: clamp(8px, 1vh, 11px) !important;
        overflow: visible !important;
    }

        .ps-scene-dna > .ps-right .ps-dna-intel-card .ps-intel-header {
            margin-bottom: 0 !important;
            font-size: clamp(0.6rem, 0.78vw, 0.68rem) !important;
        }

        .ps-scene-dna > .ps-right .ps-dna-intel-card .ps-intel-insight {
            margin: 0 !important;
            font-size: clamp(0.72rem, 0.95vw, 0.82rem) !important;
            line-height: 1.55 !important;
            color: var(--sj-dark) !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            white-space: normal !important;
            overflow: visible !important;
        }

/* ============================================================
   RESPONSIVE BREAKPOINTS for the new structure
   ============================================================ */
@media (max-width: 1180px) {
    .ps-dna-workarea {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .ps-scene-dna > .ps-right {
        flex-basis: 28% !important;
        padding: 14px 12px !important;
    }
}

@media (max-width: 1024px) {
    .ps-scene-dna > .ps-right {
        flex-basis: 30% !important;
        min-width: 240px !important;
    }

    .ps-dna-workarea .ps-dna-panel-location .ps-location-map {
        min-height: clamp(170px, 28vh, 340px) !important;
    }
}

/* Tablet — stack Col 1 + Col 2 vertically, keep Col 3 as right rail */
@media (max-width: 900px) {
    .ps-dna-workarea {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        overflow-y: auto !important;
    }

        .ps-dna-workarea .ps-dna-panel-location .ps-location-map {
            min-height: 220px !important;
        }

    .ps-silhouette-stage {
        min-height: 140px !important;
        max-height: 180px !important;
    }

    .ps-scene-dna > .ps-right {
        flex-basis: 34% !important;
        min-width: 220px !important;
    }
}

/* Mobile — single column, Twin as bottom panel */
@media (max-width: 768px) {
    .ps-scene-dna {
        flex-direction: column !important;
    }

    .ps-dna-left {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    .ps-scene-dna > .ps-right {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(0,0,0,0.06) !important;
        max-height: 42vh !important;
        padding: 12px 14px !important;
    }

    .ps-dna-workarea .ps-dna-panel-location .ps-location-map {
        min-height: 200px !important;
    }
}

/* Very short viewports — progressive enhancement hides */
@media (max-height: 640px) and (min-width: 901px) {
    .ps-dna-left .ps-subtitle {
        display: none !important;
    }

    .ps-dna-workarea .ps-location-topline {
        display: none !important;
    }

    .ps-silhouette-stage {
        min-height: 90px !important;
        max-height: 120px !important;
    }

    .ps-dna-workarea .ps-metrics-completion {
        display: none !important;
    }
}

/* High-DPI / very tall viewports — give the silhouette room */
@media (min-height: 1000px) {
    .ps-silhouette-stage {
        min-height: 180px !important;
        max-height: 230px !important;
    }

    .ps-dna-workarea .ps-dna-panel-location .ps-location-map {
        min-height: 320px !important;
    }
}

/* ============================================================
   NEUTRALIZE LEGACY v4/v5 RULES that still reference the old
   .ps-dna-shell / .ps-dna-panels / .ps-dna-heading / .ps-dna-group
   ------------------------------------------------------------
   Several earlier blocks in this file bound !important rules to
   these selectors. They're now vestigial because the scaffold
   no longer includes them. These overrides make sure any stale
   pre-rendered content doesn't leak visual artifacts.
   ============================================================ */
.ps-dna-shell {
    /* If this class reappears on any legacy render, fall through */
    all: unset;
    display: contents;
}

.ps-dna-panels {
    all: unset;
    display: contents;
}

.ps-dna-heading {
    all: unset;
    display: contents;
}

.ps-dna-group,
.ps-dna-group-label,
.ps-dna-group-items {
    all: unset;
    display: contents;
}

/* ============================================================
   SCENE 3 (DNA BUILDER) — v7 CRITICAL FIX
   ------------------------------------------------------------
   v6 shipped with two bugs:

   1. `.ps-scene-dna { display: block }` from line 2011 was NOT
      overridden by the v6 rule (which only set flex-direction).
      `flex-direction` without `display: flex` is a no-op —
      which is why the .ps-right rail was falling below .ps-left
      as a block element instead of sitting beside it.

   2. The nav buttons weren't pinned to the scene bottom. At zoom
      levels where content overflowed, the nav scrolled out of
      view. Must use position: sticky + backdrop background so
      Back/Continue are always reachable.

   This block FORCES the Scene 2 layout to:
       [  .ps-left (heading + workarea + sticky nav)  ] [ .ps-right (Twin) ]
   at every viewport width down to 768px.

   At 768px and below we still stack (mobile), but that was
   already handled by existing rules.
   ============================================================ */

/* ── 1. FORCE the scene to be a flex ROW ─────────────────────── */
/* This is the single most important rule in this patch: without
   `display: flex`, the `flex-direction` declarations do nothing. */
.ps-scene#psScene2,
.ps-scene-dna {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Override the max-width:768px rule that forces column stacking.
   We keep the column stack ONLY at true mobile widths. */
@media (min-width: 769px) {
    .ps-scene#psScene2,
    .ps-scene-dna {
        flex-direction: row !important;
    }
}

/* ── 2. Left rail — fills remaining width, column layout ────── */
.ps-scene#psScene2 .ps-dna-left,
.ps-scene-dna .ps-dna-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: clamp(10px, 1.3vh, 16px) clamp(12px, 1.6vw, 22px) 0 !important;
    position: relative !important;
}

/* ── 3. Right rail — pinned to the right, never falls below ─── */
.ps-scene#psScene2 > .ps-right,
.ps-scene-dna > .ps-right {
    flex: 0 0 30% !important;
    min-width: 260px !important;
    max-width: 340px !important;
    height: 100% !important;
    align-self: stretch !important;
    padding: clamp(12px, 1.6vh, 20px) clamp(12px, 1.4vw, 18px) !important;
    gap: clamp(9px, 1.2vh, 13px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: linear-gradient(160deg, #FAFBFC 0%, #F3F4F6 100%) !important;
    border-left: 1px solid rgba(0,0,0,0.06) !important;
    scrollbar-width: none !important;
}

    .ps-scene#psScene2 > .ps-right::-webkit-scrollbar,
    .ps-scene-dna > .ps-right::-webkit-scrollbar {
        display: none !important;
    }

/* ── 4. Nav buttons ALWAYS visible (pinned to ps-left bottom) ── */
/* Critical: .ps-dna-left is a flex column with overflow:hidden.
   .ps-dna-workarea uses flex:1 1 auto which absorbs all remaining
   vertical space. The nav is flex:0 0 auto, so the flexbox algo
   naturally pins it to the bottom — no sticky/absolute needed.
   The workarea's own min-height:0 + overflow:hidden prevents the
   nav from being pushed offscreen. */
.ps-scene#psScene2 .ps-nav-dna,
.ps-scene-dna .ps-nav-dna {
    position: relative !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: clamp(46px, 6vh, 54px) !important;
    padding: clamp(8px, 1vh, 11px) 0 clamp(6px, 0.8vh, 9px) !important;
    margin-top: clamp(6px, 0.8vh, 10px) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 32%, #ffffff 100%) !important;
    border-top: 1px solid rgba(15,23,42,0.04) !important;
    z-index: 30 !important;
    bottom: auto !important;
}

    .ps-scene#psScene2 .ps-nav-dna .ps-btn-back,
    .ps-scene#psScene2 .ps-nav-dna .ps-btn-next,
    .ps-scene-dna .ps-nav-dna .ps-btn-back,
    .ps-scene-dna .ps-nav-dna .ps-btn-next {
        flex-shrink: 0 !important;
    }

/* ── 5. Workarea (Col 1 + Col 2) — flex column, NOT scrolling ─ */
.ps-scene#psScene2 .ps-dna-workarea,
.ps-scene-dna .ps-dna-workarea {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
    gap: clamp(9px, 1.1vw, 13px) !important;
    overflow: hidden !important;
    padding-bottom: 2px !important;
}

/* ============================================================
   COLUMN 2 — DNA: split dimension rows into TWO sub-columns
   ------------------------------------------------------------
   Residential needs 6 rows (beds, baths, levels, floor, erf,
   garages). At typical laptop heights, even with a compact row,
   they were overflowing. Splitting into a 2-column grid halves
   the vertical demand so every row is visible without scroll.
   ============================================================ */
.ps-scene#psScene2 .ps-dna-panel-metrics .ps-dna-grid,
.ps-scene-dna .ps-dna-panel-metrics .ps-dna-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(5px, 0.7vh, 7px) clamp(6px, 0.8vw, 9px) !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-content: start !important;
}

/* Dividers span both columns (act as a horizontal full-width rule) */
.ps-scene#psScene2 .ps-dna-row-divider,
.ps-scene-dna .ps-dna-row-divider {
    grid-column: 1 / -1 !important;
    margin: 2px 0 !important;
}

/* Metric rows — compact inside the grid cells */
.ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile,
.ps-scene#psScene2 .ps-dna-panel-metrics .ps-dna-block,
.ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile,
.ps-scene-dna .ps-dna-panel-metrics .ps-dna-block {
    min-height: clamp(32px, 4.2vh, 40px) !important;
    padding: clamp(4px, 0.5vh, 6px) clamp(7px, 0.9vw, 9px) !important;
    gap: clamp(5px, 0.7vw, 8px) !important;
    width: 100% !important;
}

    /* Label — even tighter inside split columns (no room for extras) */
    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label,
    .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label {
        font-size: clamp(0.54rem, 0.7vw, 0.62rem) !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Stepper inside split grid cells — tighter */
    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-stepper,
    .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-stepper {
        gap: 3px !important;
    }

    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-step-btn,
    .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-step-btn {
        width: clamp(20px, 2.3vw, 24px) !important;
        height: clamp(20px, 2.3vw, 24px) !important;
        font-size: clamp(0.74rem, 0.95vw, 0.88rem) !important;
    }

    /* Size input — shrinks to fit split-column width */
    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-size-input,
    .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-size-input {
        width: clamp(68px, 8vw, 88px) !important;
        gap: 3px !important;
    }

        .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-size-input input,
        .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-size-input input {
            width: clamp(42px, 5vw, 56px) !important;
            font-size: clamp(0.66rem, 0.86vw, 0.76rem) !important;
            padding: 2px 4px !important;
        }

/* Silhouette — tighter when split grid is in play */
.ps-scene#psScene2 .ps-silhouette-stage,
.ps-scene-dna .ps-silhouette-stage {
    min-height: clamp(100px, 15vh, 160px) !important;
    max-height: clamp(120px, 19vh, 190px) !important;
    margin-bottom: clamp(6px, 0.8vh, 9px) !important;
}

/* ── 6. When right panel is narrower, compress its content ──── */
@media (max-width: 1180px) {
    .ps-scene#psScene2 > .ps-right,
    .ps-scene-dna > .ps-right {
        flex-basis: 28% !important;
        min-width: 240px !important;
        padding: 12px 11px !important;
    }

    .ps-scene#psScene2 .ps-dna-workarea,
    .ps-scene-dna .ps-dna-workarea {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
        gap: 9px !important;
    }
}

@media (max-width: 1024px) {
    .ps-scene#psScene2 > .ps-right,
    .ps-scene-dna > .ps-right {
        flex-basis: 30% !important;
        min-width: 220px !important;
    }

    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-dna-grid,
    .ps-scene-dna .ps-dna-panel-metrics .ps-dna-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Tablet: stack Col 1 + Col 2 vertically but keep Col 3 as right rail */
@media (max-width: 900px) {
    .ps-scene#psScene2 .ps-dna-workarea,
    .ps-scene-dna .ps-dna-workarea {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
    }

    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-dna-grid,
    .ps-scene-dna .ps-dna-panel-metrics .ps-dna-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* True mobile — scene stacks (this preserves existing behaviour) */
@media (max-width: 768px) {
    .ps-scene#psScene2,
    .ps-scene-dna {
        flex-direction: column !important;
    }

        .ps-scene#psScene2 > .ps-right,
        .ps-scene-dna > .ps-right {
            flex: 0 0 auto !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            border-left: 0 !important;
            border-top: 1px solid rgba(0,0,0,0.06) !important;
            max-height: 38vh !important;
        }

        .ps-scene#psScene2 .ps-dna-panel-metrics .ps-dna-grid,
        .ps-scene-dna .ps-dna-panel-metrics .ps-dna-grid {
            grid-template-columns: 1fr !important;
        }
}

/* Very narrow (≤ 540px): single-column rows are easier to read */
@media (max-width: 540px) {
    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-dna-grid,
    .ps-scene-dna .ps-dna-panel-metrics .ps-dna-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Short viewports: trim decorations so everything still fits ── */
@media (max-height: 700px) and (min-width: 769px) {
    .ps-scene#psScene2 .ps-dna-left .ps-subtitle,
    .ps-scene-dna .ps-dna-left .ps-subtitle {
        display: none !important;
    }

    .ps-silhouette-stage {
        min-height: 80px !important;
        max-height: 120px !important;
    }
}

@media (max-height: 600px) and (min-width: 769px) {
    .ps-silhouette-stage {
        display: none !important;
    }

    .ps-scene#psScene2 .ps-metrics-completion,
    .ps-scene-dna .ps-metrics-completion {
        display: none !important;
    }
}

/* ============================================================
   Legacy ps-dna-shell override safety-net
   ------------------------------------------------------------
   The earlier v6 `all: unset; display: contents;` reset was
   too aggressive — if any legacy DOM still carries these
   classes they'd lose all layout. Since the new scaffold
   doesn't emit them, we can harmlessly cancel that reset and
   let the old rules apply to nothing.
   ============================================================ */
.ps-dna-shell,
.ps-dna-panels,
.ps-dna-heading,
.ps-dna-group,
.ps-dna-group-label,
.ps-dna-group-items {
    all: revert;
}

/* ============================================================
   SCENE 3 (DNA BUILDER) — v8 FIXES
   ------------------------------------------------------------
   1. Reveal-address pills were being clipped at 100% zoom
      because the map had `min-height: clamp(200px, 34vh, 420px)`
      and `flex: 1 1 auto` with no ceiling — it was expanding to
      push everything below (including the reveal row) out of the
      card's bounded height.

      Fix: give the map a hard MAX-height that leaves guaranteed
      room for the reveal pills, and drop its min-height on tight
      viewports. The reveal row itself gets `order: 3` plus
      `margin-top: auto` so it's always the bottom-most child
      when flex has extra space.

   2. Street View card replaces the old AI Signal card.
   3. Buyer Readiness meter is now inlined in the Twin card.
   ============================================================ */

/* ── COL 1 FIX: reveal pills always visible ──────────────────── */
/* The map flex-grows, but is now capped so the reveal can NEVER
   be squeezed off the card. */
.ps-scene#psScene2 .ps-dna-panel-location .ps-location-card,
.ps-scene-dna .ps-dna-panel-location .ps-location-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Cap the map height: floor low enough to always fit a reveal row. */
.ps-scene#psScene2 .ps-dna-panel-location .ps-location-map,
.ps-scene-dna .ps-dna-panel-location .ps-location-map {
    flex: 1 1 auto !important;
    min-height: clamp(140px, 22vh, 260px) !important;
    max-height: clamp(180px, 34vh, 360px) !important;
    margin: 0 !important;
}

/* Reveal pills: pinned to the BOTTOM of the card, never clipped.
   Using `flex: 0 0 auto` with `margin-top: 0` and `order: 99`
   guarantees the reveal never yields vertical space to the map. */
.ps-scene#psScene2 .ps-dna-panel-location .ps-location-reveal,
.ps-scene-dna .ps-dna-panel-location .ps-location-reveal {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    order: 99 !important;
    min-height: clamp(50px, 7vh, 62px) !important;
    margin-top: clamp(6px, 0.8vh, 9px) !important;
    padding: clamp(7px, 0.9vh, 9px) clamp(9px, 1vw, 11px) !important;
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
}

    /* Ensure the label line itself can't truncate */
    .ps-scene#psScene2 .ps-dna-panel-location .ps-location-reveal .ps-reveal-label,
    .ps-scene-dna .ps-dna-panel-location .ps-location-reveal .ps-reveal-label {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin-bottom: clamp(5px, 0.7vh, 7px) !important;
        font-size: clamp(0.58rem, 0.76vw, 0.64rem) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-height: 14px !important;
        visibility: visible !important;
    }

    .ps-scene#psScene2 .ps-dna-panel-location .ps-location-reveal .ps-reveal-options,
    .ps-scene-dna .ps-dna-panel-location .ps-location-reveal .ps-reveal-options {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        min-height: 28px !important;
    }

    .ps-scene#psScene2 .ps-dna-panel-location .ps-location-reveal .ps-reveal-opt,
    .ps-scene-dna .ps-dna-panel-location .ps-location-reveal .ps-reveal-opt {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .ps-scene#psScene2 .ps-dna-panel-location .ps-location-reveal .ps-reveal-pill,
    .ps-scene-dna .ps-dna-panel-location .ps-location-reveal .ps-reveal-pill {
        width: 100% !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: clamp(5px, 0.7vh, 7px) clamp(6px, 0.8vw, 10px) !important;
        font-size: clamp(0.6rem, 0.8vw, 0.68rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-height: 26px !important;
    }

/* Hide the footer badges (they're the lowest-priority decoration)
   so the reveal has guaranteed breathing room. */
.ps-scene#psScene2 .ps-dna-panel-location .ps-location-foot,
.ps-scene-dna .ps-dna-panel-location .ps-location-foot {
    display: none !important;
}

/* Short viewport: shrink the topline to free up more map and reveal room */
@media (max-height: 760px) {
    .ps-scene#psScene2 .ps-dna-panel-location .ps-location-topline,
    .ps-scene-dna .ps-dna-panel-location .ps-location-topline {
        display: none !important;
    }

    .ps-scene#psScene2 .ps-dna-panel-location .ps-location-map,
    .ps-scene-dna .ps-dna-panel-location .ps-location-map {
        min-height: 120px !important;
        max-height: clamp(150px, 28vh, 260px) !important;
    }
}

@media (max-height: 640px) {
    .ps-scene#psScene2 .ps-dna-panel-location .ps-location-map,
    .ps-scene-dna .ps-dna-panel-location .ps-location-map {
        min-height: 100px !important;
        max-height: 170px !important;
    }
}

/* ============================================================
   TWIN CARD — inline Buyer Readiness meter (moved from old
   AI Signal card, which was removed in favour of Street View)
   ============================================================ */
.ps-scene#psScene2 > .ps-right .ps-twin-readiness,
.ps-scene-dna > .ps-right .ps-twin-readiness {
    margin-top: clamp(9px, 1.2vh, 13px);
    padding-top: clamp(8px, 1vh, 11px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ps-scene#psScene2 > .ps-right .ps-twin-readiness-row,
.ps-scene-dna > .ps-right .ps-twin-readiness-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.ps-scene#psScene2 > .ps-right .ps-twin-readiness-label,
.ps-scene-dna > .ps-right .ps-twin-readiness-label {
    font-size: clamp(0.58rem, 0.74vw, 0.64rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.ps-scene#psScene2 > .ps-right .ps-twin-readiness-val,
.ps-scene-dna > .ps-right .ps-twin-readiness-val {
    font-size: clamp(0.78rem, 1vw, 0.9rem);
    font-weight: 900;
    color: var(--sj-orange);
    letter-spacing: -0.02em;
}

.ps-scene#psScene2 > .ps-right .ps-twin-readiness-bar-wrap,
.ps-scene-dna > .ps-right .ps-twin-readiness-bar-wrap {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.ps-scene#psScene2 > .ps-right .ps-twin-readiness-bar,
.ps-scene-dna > .ps-right .ps-twin-readiness-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sj-orange), #56C4F8);
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   STREET VIEW CARD — premium real-world preview
   ------------------------------------------------------------
   The replacement for the old AI Signal card. Shows an
   interactive Google Street View panorama of the selected
   property, letting the user drag / zoom / look around.
   ============================================================ */
.ps-streetview-card {
    background: linear-gradient(160deg, #0F172A 0%, #1E293B 60%, #0F172A 100%);
    border: 1px solid rgba(245, 130, 32, 0.22);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: clamp(180px, 28vh, 280px);
    position: relative;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

    .ps-streetview-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 85% 10%, rgba(245, 130, 32, 0.16), transparent 55%);
        pointer-events: none;
        z-index: 1;
    }

/* Header bar */
.ps-streetview-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: clamp(8px, 1vh, 10px) clamp(10px, 1.1vw, 12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

    .ps-streetview-header i {
        color: var(--sj-orange);
        font-size: clamp(0.78rem, 1vw, 0.9rem);
        flex-shrink: 0;
    }

.ps-streetview-title {
    flex: 1 1 auto;
    font-size: clamp(0.64rem, 0.82vw, 0.72rem);
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-streetview-status {
    flex-shrink: 0;
    font-size: clamp(0.56rem, 0.72vw, 0.62rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.3s, background 0.3s;
}

.ps-streetview-stage.ps-streetview-ready ~ * .ps-streetview-status,
.ps-streetview-card:has(.ps-streetview-ready) .ps-streetview-status {
    color: #0F172A;
    background: #4ADE80;
}

/* Live dot animation when ready (compat fallback for browsers
   without :has() support — .ps-streetview-ready provides a class
   hook we can scope from). */
.ps-streetview-card .ps-streetview-stage.ps-streetview-ready {
    background: transparent;
}

/* Stage — holds the pano OR the placeholder */
.ps-streetview-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: clamp(130px, 22vh, 220px);
    overflow: hidden;
    background: linear-gradient(135deg, #1a2230 0%, #0F172A 100%);
}

.ps-streetview-pano {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.ps-streetview-stage.ps-streetview-ready .ps-streetview-pano {
    opacity: 1;
}

/* Google's Street View injects its own iframe / canvas — inherit radius */
.ps-streetview-pano > div,
.ps-streetview-pano canvas,
.ps-streetview-pano iframe {
    width: 100% !important;
    height: 100% !important;
}

/* Placeholder (shown before location locks, or when no coverage) */
.ps-streetview-placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    background: radial-gradient(circle at center, rgba(245,130,32,0.08) 0%, transparent 70%);
}

    .ps-streetview-placeholder i {
        font-size: clamp(1.2rem, 1.8vw, 1.6rem);
        color: rgba(245, 130, 32, 0.55);
    }

    .ps-streetview-placeholder span {
        font-size: clamp(0.66rem, 0.84vw, 0.74rem);
        line-height: 1.4;
        max-width: 220px;
    }

/* Footer — lat/long + hint */
.ps-streetview-foot {
    position: relative;
    z-index: 2;
    display: none; /* shown only when pano loads successfully */
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: clamp(6px, 0.8vh, 8px) clamp(10px, 1.1vw, 12px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.28);
    flex-shrink: 0;
}

.ps-streetview-coords {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Menlo', monospace;
    font-size: clamp(0.56rem, 0.72vw, 0.62rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.58);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-streetview-hint {
    flex-shrink: 0;
    font-size: clamp(0.54rem, 0.7vw, 0.6rem);
    font-weight: 700;
    color: rgba(245, 130, 32, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* When short: trim the placeholder message */
@media (max-height: 700px) and (min-width: 769px) {
    .ps-streetview-card {
        min-height: 150px;
    }

    .ps-streetview-stage {
        min-height: 100px;
    }
}

/* Mobile: stage can't be too short or Street View controls crowd */
@media (max-width: 768px) {
    .ps-streetview-stage {
        min-height: 180px !important;
    }
}

/* ============================================================
   Remove vestigial AI Signal card rules — the scaffold no longer
   emits .ps-dna-intel-card, but earlier CSS blocks wrote a lot
   of styles for it. They're harmless (no matching element) but
   this block documents the intentional removal.
   ============================================================ */
.ps-dna-intel-card {
    display: none !important;
}

/* ============================================================
   SCENE 3 (DNA BUILDER) — v9 MOBILE-FIRST OVERHAUL
   ------------------------------------------------------------
   Issue: at 375×667, 390×844, 414×736, 430×932 and 768×1024
   the scene was unusable — the heading showed but the map,
   the blueprint, and the dimension rows were invisible and
   non-scrollable. The nav buttons floated between columns and
   the Digital Twin.

   Root cause: the desktop layout used `overflow: hidden` on
   both `.ps-dna-left` and `.ps-dna-workarea` combined with
   `height: 100%` on every container. On mobile those rules
   remained in force — content was clipped instead of allowed
   to flow as a scrolling document. Also, the nav was nested
   inside `.ps-dna-left` so when the scene stacked vertically
   on mobile, the order became: Col1+Col2 → Nav → Digital Twin.

   The fix:
   1. The nav has been moved OUT of `.ps-dna-left` in the DOM
      so it's a direct sibling of `.ps-right`. On mobile we use
      `order` to force: Heading → Col1 → Col2 → Twin → Nav.
   2. On mobile the scene becomes a normal vertically-scrolling
      document. Every `height: 100%` + `overflow: hidden` is
      dropped in favour of auto heights and auto overflow.
   3. Nav is sticky to the scene-scroll container bottom so it
      feels like a native mobile app's action bar.
   4. Content padding-bottom reserves room for the fixed nav so
      nothing is hidden behind it.
   ============================================================ */

/* ── DESKTOP FIXES for the new DOM (nav is now a direct child) ── */
/* Re-apply the desktop flex layout to the 3 direct children of
   `.ps-scene-dna`: `.ps-dna-left` (flex: 1), `.ps-right` (fixed
   width), and `.ps-nav-dna`. The nav at desktop must pin to the
   bottom of the scene — not flow inline between left and right. */
@media (min-width: 769px) {
    .ps-scene#psScene2,
    .ps-scene-dna {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: relative !important;
    }

        /* Left rail — reserve bottom space for the absolute-pinned nav */
        .ps-scene#psScene2 > .ps-dna-left,
        .ps-scene-dna > .ps-dna-left {
            flex: 1 1 auto !important;
            order: 1 !important;
            min-width: 0 !important;
            min-height: 0 !important;
            height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            padding: clamp(10px, 1.3vh, 16px) clamp(12px, 1.6vw, 22px) clamp(62px, 8vh, 74px) !important;
            position: relative !important;
        }

        /* Right rail — stays to the right */
        .ps-scene#psScene2 > .ps-right,
        .ps-scene-dna > .ps-right {
            order: 2 !important;
            flex: 0 0 30% !important;
            min-width: 260px !important;
            max-width: 340px !important;
            height: 100% !important;
            align-self: stretch !important;
            padding: clamp(12px, 1.6vh, 20px) clamp(12px, 1.4vw, 18px) clamp(62px, 8vh, 74px) !important;
        }

        /* Nav is absolutely pinned to the scene's bottom edge, spanning
       the full scene width. This keeps it always-visible at every
       desktop zoom level without scroll interference. */
        .ps-scene#psScene2 > .ps-nav-dna,
        .ps-scene-dna > .ps-nav-dna {
            order: 3 !important;
            position: absolute !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            z-index: 40 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 10px !important;
            padding: clamp(8px, 1vh, 12px) clamp(14px, 1.8vw, 22px) clamp(8px, 1vh, 12px) !important;
            margin: 0 !important;
            min-height: clamp(48px, 6.2vh, 58px) !important;
            background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, #ffffff 40%, #ffffff 100%) !important;
            backdrop-filter: blur(8px) !important;
            border-top: 1px solid rgba(15,23,42,0.06) !important;
        }
}

/* ============================================================
   MOBILE LAYOUT (≤ 768px) — the whole scene scrolls as one page
   ============================================================ */
@media (max-width: 768px) {
    /* Scene: a scrollable flex-column with pinned nav. Give it
       explicit overflow-y:auto so the entire thing scrolls — no
       more clipped content. */
    .ps-scene#psScene2,
    .ps-scene-dna {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        background: #ffffff !important;
    }

        /* Left rail — drop the height cap and overflow:hidden so
       content flows naturally. The padding-bottom reserves room
       for the pinned nav so content isn't hidden behind it. */
        .ps-scene#psScene2 > .ps-dna-left,
        .ps-scene-dna > .ps-dna-left {
            order: 1 !important;
            flex: 0 0 auto !important;
            width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: visible !important;
            display: block !important;
            padding: clamp(14px, 3vh, 22px) clamp(14px, 4vw, 20px) 0 !important;
        }

        /* Right rail — shown as a full-width block, AFTER the left. */
        .ps-scene#psScene2 > .ps-right,
        .ps-scene-dna > .ps-right {
            order: 2 !important;
            display: flex !important;
            flex-direction: column !important;
            flex: 0 0 auto !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            border-left: 0 !important;
            border-top: 1px solid rgba(0,0,0,0.06) !important;
            margin-top: clamp(12px, 2vh, 18px) !important;
            padding: clamp(14px, 3vh, 20px) clamp(14px, 4vw, 20px) clamp(82px, 12vh, 100px) !important;
            gap: clamp(10px, 1.8vh, 14px) !important;
            background: linear-gradient(175deg, #FAFBFC 0%, #F3F4F6 100%) !important;
        }

        /* Nav — pinned to the scene's bottom as a fixed action bar */
        .ps-scene#psScene2 > .ps-nav-dna,
        .ps-scene-dna > .ps-nav-dna {
            order: 3 !important;
            position: sticky !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 50 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 10px !important;
            padding: clamp(10px, 1.6vh, 14px) clamp(14px, 4vw, 18px) calc(clamp(10px, 1.6vh, 14px) + env(safe-area-inset-bottom, 0px)) !important;
            margin: 0 !important;
            min-height: clamp(56px, 8vh, 64px) !important;
            background: rgba(255, 255, 255, 0.96) !important;
            backdrop-filter: blur(12px) !important;
            border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
            box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06) !important;
        }

            .ps-scene#psScene2 > .ps-nav-dna .ps-btn-back,
            .ps-scene#psScene2 > .ps-nav-dna .ps-btn-next,
            .ps-scene-dna > .ps-nav-dna .ps-btn-back,
            .ps-scene-dna > .ps-nav-dna .ps-btn-next {
                flex: 1 1 0 !important;
                justify-content: center !important;
                padding: clamp(10px, 1.5vh, 12px) clamp(10px, 3vw, 16px) !important;
                font-size: clamp(0.8rem, 3.5vw, 0.9rem) !important;
                min-height: 44px !important;
            }

        /* Heading — no truncation on mobile, show everything */
        .ps-scene#psScene2 .ps-dna-left .ps-progress {
            display: flex !important;
            margin-bottom: clamp(8px, 1.4vh, 12px) !important;
        }

        .ps-scene#psScene2 .ps-dna-left .ps-scene-label {
            display: inline-flex !important;
            margin-bottom: 8px !important;
            font-size: clamp(0.6rem, 2.5vw, 0.68rem) !important;
        }

        .ps-scene#psScene2 .ps-dna-left .ps-question {
            display: block !important;
            margin-bottom: 4px !important;
            font-size: clamp(1.15rem, 5.5vw, 1.5rem) !important;
            line-height: 1.2 !important;
        }

        .ps-scene#psScene2 .ps-dna-left .ps-subtitle {
            display: block !important;
            margin-bottom: clamp(14px, 2.4vh, 18px) !important;
            font-size: clamp(0.78rem, 3.4vw, 0.88rem) !important;
            line-height: 1.5 !important;
            color: #64748B !important;
        }

        /* Workarea — stack Col 1 and Col 2 vertically, natural height */
        .ps-scene#psScene2 .ps-dna-workarea,
        .ps-scene-dna .ps-dna-workarea {
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: visible !important;
            gap: clamp(12px, 2.2vh, 16px) !important;
            grid-template-columns: none !important;
        }

            /* Panels — auto height, natural flow */
            .ps-scene#psScene2 .ps-dna-workarea .ps-dna-panel,
            .ps-scene-dna .ps-dna-workarea .ps-dna-panel {
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                overflow: visible !important;
                display: flex !important;
                flex-direction: column !important;
                width: 100% !important;
            }

            /* Location card — generous padding for tap targets */
            .ps-scene#psScene2 .ps-dna-workarea .ps-dna-panel-location .ps-location-card,
            .ps-scene-dna .ps-dna-workarea .ps-dna-panel-location .ps-location-card {
                height: auto !important;
                min-height: 0 !important;
                overflow: visible !important;
                padding: clamp(12px, 2.4vh, 16px) !important;
                gap: clamp(10px, 1.6vh, 13px) !important;
            }

            /* Map — generous mobile height (220-300px), bigger tap target */
            .ps-scene#psScene2 .ps-dna-workarea .ps-dna-panel-location .ps-location-map,
            .ps-scene-dna .ps-dna-workarea .ps-dna-panel-location .ps-location-map {
                flex: 0 0 auto !important;
                width: 100% !important;
                height: clamp(220px, 32vh, 300px) !important;
                min-height: 220px !important;
                max-height: 300px !important;
                margin: 0 !important;
                border-radius: 14px !important;
            }

            /* Show topline on mobile (it was hidden on short-height desktop) */
            .ps-scene#psScene2 .ps-dna-workarea .ps-dna-panel-location .ps-location-topline,
            .ps-scene-dna .ps-dna-workarea .ps-dna-panel-location .ps-location-topline {
                display: flex !important;
            }

        .ps-scene#psScene2 .ps-dna-panel-location .ps-location-kicker,
        .ps-scene-dna .ps-dna-panel-location .ps-location-kicker {
            font-size: clamp(0.58rem, 2.5vw, 0.66rem) !important;
            margin-bottom: 3px !important;
        }

        .ps-scene#psScene2 .ps-dna-panel-location .ps-location-title,
        .ps-scene-dna .ps-dna-panel-location .ps-location-title {
            font-size: clamp(0.84rem, 3.6vw, 0.95rem) !important;
        }

        .ps-scene#psScene2 .ps-dna-panel-location .ps-location-state,
        .ps-scene-dna .ps-dna-panel-location .ps-location-state {
            font-size: clamp(0.6rem, 2.6vw, 0.66rem) !important;
            padding: 4px 9px !important;
        }

        /* Search input — tap-friendly height */
        .ps-scene#psScene2 .ps-dna-panel-location .ps-location-search,
        .ps-scene-dna .ps-dna-panel-location .ps-location-search {
            height: 44px !important;
            font-size: clamp(0.86rem, 3.8vw, 0.95rem) !important;
        }

        /* Reveal pills — full readable on mobile */
        .ps-scene#psScene2 .ps-dna-panel-location .ps-location-reveal,
        .ps-scene-dna .ps-dna-panel-location .ps-location-reveal {
            min-height: auto !important;
            padding: clamp(10px, 1.8vh, 13px) clamp(12px, 3vw, 15px) !important;
        }

            .ps-scene#psScene2 .ps-dna-panel-location .ps-location-reveal .ps-reveal-label,
            .ps-scene-dna .ps-dna-panel-location .ps-location-reveal .ps-reveal-label {
                font-size: clamp(0.64rem, 2.7vw, 0.7rem) !important;
                margin-bottom: 8px !important;
            }

            .ps-scene#psScene2 .ps-dna-panel-location .ps-location-reveal .ps-reveal-pill,
            .ps-scene-dna .ps-dna-panel-location .ps-location-reveal .ps-reveal-pill {
                min-height: 38px !important;
                font-size: clamp(0.68rem, 3vw, 0.76rem) !important;
                padding: 8px 10px !important;
            }

        /* DNA panel — generous padding for touch */
        .ps-scene#psScene2 .ps-dna-panel-metrics,
        .ps-scene-dna .ps-dna-panel-metrics {
            padding: clamp(12px, 2.4vh, 16px) !important;
        }

        /* Metrics head — still show ring, just smaller */
        .ps-scene#psScene2 .ps-metrics-head,
        .ps-scene-dna .ps-metrics-head {
            margin-bottom: clamp(10px, 1.6vh, 13px) !important;
            padding-bottom: clamp(10px, 1.6vh, 13px) !important;
        }

            .ps-scene#psScene2 .ps-metrics-head .ps-panel-kicker,
            .ps-scene-dna .ps-metrics-head .ps-panel-kicker {
                font-size: clamp(0.58rem, 2.5vw, 0.64rem) !important;
                padding: 3px 8px !important;
            }

            .ps-scene#psScene2 .ps-metrics-head .ps-panel-title,
            .ps-scene-dna .ps-metrics-head .ps-panel-title {
                font-size: clamp(0.88rem, 4vw, 1.02rem) !important;
            }

        .ps-scene#psScene2 .ps-metrics-completion,
        .ps-scene-dna .ps-metrics-completion {
            width: 40px !important;
            height: 40px !important;
        }

        /* Silhouette — natural aspect-ratio sized for mobile */
        .ps-scene#psScene2 .ps-silhouette-stage,
        .ps-scene-dna .ps-silhouette-stage {
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 220 / 150 !important;
            min-height: 150px !important;
            max-height: 220px !important;
            margin-bottom: clamp(10px, 1.8vh, 14px) !important;
            padding: clamp(8px, 1.6vh, 11px) clamp(10px, 2.5vw, 12px) !important;
        }

        /* DNA grid — 2 cols at ≥ 480px, 1 col at < 480px for clearer rows */
        .ps-scene#psScene2 .ps-dna-panel-metrics .ps-dna-grid,
        .ps-scene-dna .ps-dna-panel-metrics .ps-dna-grid {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: clamp(7px, 1.3vh, 9px) clamp(8px, 2vw, 11px) !important;
            overflow: visible !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
        }

        /* Metric rows — tap-friendly height (44px min for touch) */
        .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile,
        .ps-scene#psScene2 .ps-dna-panel-metrics .ps-dna-block,
        .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile,
        .ps-scene-dna .ps-dna-panel-metrics .ps-dna-block {
            min-height: 44px !important;
            padding: clamp(6px, 1.2vh, 9px) clamp(8px, 2.2vw, 11px) !important;
            gap: clamp(6px, 1.8vw, 9px) !important;
        }

            .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-metric-icon,
            .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-metric-icon {
                width: 26px !important;
                height: 26px !important;
                font-size: 0.8rem !important;
            }

            .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label,
            .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label {
                font-size: clamp(0.6rem, 2.6vw, 0.68rem) !important;
            }

            /* Stepper buttons — 28px tap targets */
            .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-step-btn,
            .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-step-btn {
                width: 28px !important;
                height: 28px !important;
                font-size: 1rem !important;
            }

            .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-size-input,
            .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-size-input {
                width: clamp(72px, 22vw, 92px) !important;
            }

                .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-size-input input,
                .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-size-input input {
                    width: clamp(46px, 14vw, 60px) !important;
                    font-size: clamp(0.74rem, 3.2vw, 0.84rem) !important;
                    padding: 4px 6px !important;
                    min-height: 28px !important;
                }

        /* Twin card — tap-friendly, no vertical crush */
        .ps-scene#psScene2 > .ps-right .ps-twin-card,
        .ps-scene-dna > .ps-right .ps-twin-card {
            min-height: auto !important;
            padding: clamp(14px, 2.4vh, 18px) !important;
        }

        .ps-scene#psScene2 > .ps-right .ps-twin-value,
        .ps-scene-dna > .ps-right .ps-twin-value {
            font-size: clamp(0.95rem, 4.2vw, 1.1rem) !important;
        }

        /* Street View — taller on mobile to be the premium hero */
        .ps-scene#psScene2 > .ps-right .ps-streetview-card,
        .ps-scene-dna > .ps-right .ps-streetview-card {
            min-height: clamp(240px, 34vh, 320px) !important;
        }

        .ps-scene#psScene2 > .ps-right .ps-streetview-stage,
        .ps-scene-dna > .ps-right .ps-streetview-stage {
            min-height: clamp(200px, 28vh, 260px) !important;
        }

        /* Market pulse card on mobile — re-show it (was hidden earlier) */
        .ps-scene#psScene2 > .ps-right .ps-market-pulse-card,
        .ps-scene-dna > .ps-right .ps-market-pulse-card {
            display: block !important;
        }

    /* Hide the completion ring on tiny screens — not critical UX */
    @media (max-width: 380px) {
        .ps-scene#psScene2 .ps-metrics-completion,
        .ps-scene-dna .ps-metrics-completion {
            display: none !important;
        }
    }
}

/* ============================================================
   SMALL PHONES (≤ 480px) — single-column rows for readability
   ============================================================ */
@media (max-width: 480px) {
    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-dna-grid,
    .ps-scene-dna .ps-dna-panel-metrics .ps-dna-grid {
        grid-template-columns: 1fr !important;
    }

    /* Divider spans 1 col now */
    .ps-scene#psScene2 .ps-dna-row-divider,
    .ps-scene-dna .ps-dna-row-divider {
        grid-column: 1 !important;
    }

    /* Give the label more room since each row is full width */
    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label,
    .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label {
        font-size: 0.72rem !important;
    }

    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile,
    .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile {
        min-height: 48px !important;
    }
}

/* ============================================================
   TABLET PORTRAIT (769–1024px tall) — similar to mobile but
   with roomier content. The earlier 900px rule already handled
   this case. We just re-assert a few bits to make sure it plays
   well with the new DOM (nav as direct child).
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .ps-scene#psScene2,
    .ps-scene-dna {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: 100% !important;
    }

        .ps-scene#psScene2 > .ps-dna-left,
        .ps-scene-dna > .ps-dna-left {
            flex: 0 0 auto !important;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: visible !important;
            order: 1 !important;
            padding: clamp(18px, 2.4vh, 24px) clamp(20px, 3vw, 28px) 0 !important;
        }

        .ps-scene#psScene2 > .ps-right,
        .ps-scene-dna > .ps-right {
            order: 2 !important;
            flex: 0 0 auto !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            border-left: 0 !important;
            border-top: 1px solid rgba(0,0,0,0.06) !important;
            margin-top: clamp(14px, 2.2vh, 20px) !important;
            padding: clamp(16px, 2.4vh, 22px) clamp(20px, 3vw, 28px) clamp(82px, 10vh, 100px) !important;
        }

        .ps-scene#psScene2 > .ps-nav-dna,
        .ps-scene-dna > .ps-nav-dna {
            order: 3 !important;
            position: sticky !important;
            bottom: 0 !important;
            margin: 0 !important;
            width: 100% !important;
            z-index: 50 !important;
        }

        /* 2-col workarea at tablet portrait so map + DNA still fit nicely */
        .ps-scene#psScene2 .ps-dna-workarea,
        .ps-scene-dna .ps-dna-workarea {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
            gap: clamp(12px, 1.6vw, 16px) !important;
            height: auto !important;
            overflow: visible !important;
        }

            .ps-scene#psScene2 .ps-dna-workarea .ps-dna-panel,
            .ps-scene-dna .ps-dna-workarea .ps-dna-panel {
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                overflow: visible !important;
            }

            .ps-scene#psScene2 .ps-dna-workarea .ps-location-map,
            .ps-scene-dna .ps-dna-workarea .ps-location-map {
                height: 260px !important;
                min-height: 260px !important;
                max-height: 300px !important;
            }

        .ps-scene#psScene2 .ps-silhouette-stage,
        .ps-scene-dna .ps-silhouette-stage {
            aspect-ratio: 220 / 150 !important;
            height: auto !important;
            min-height: 140px !important;
            max-height: 180px !important;
        }

        .ps-scene#psScene2 .ps-dna-panel-metrics .ps-dna-grid,
        .ps-scene-dna .ps-dna-panel-metrics .ps-dna-grid {
            grid-template-columns: 1fr !important;
            overflow: visible !important;
            height: auto !important;
        }
}

/* ============================================================
   LANDSCAPE MOBILE (≤ 900×500) — short and wide
   ============================================================ */
@media (max-height: 500px) and (max-width: 900px) {
    .ps-scene#psScene2 .ps-silhouette-stage,
    .ps-scene-dna .ps-silhouette-stage {
        display: none !important;
    }

    .ps-scene#psScene2 .ps-dna-workarea .ps-location-map,
    .ps-scene-dna .ps-dna-workarea .ps-location-map {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
    }

    .ps-scene#psScene2 .ps-dna-left .ps-subtitle,
    .ps-scene-dna .ps-dna-left .ps-subtitle {
        display: none !important;
    }
}

/* ============================================================
   v10 — FINE-TUNING FIXES
   ------------------------------------------------------------
   1. Desktop Twin disappears at 100% zoom → remove flex-wrap
   2. Reveal pills truncated on mobile → short/long label split
   3. Search placeholder too long on mobile → handled in JS
   4. Scene 0 category cards truncated → 2-col grid ≤ 480px
   5. Scene 1 property-type chips → premium mobile grid
   6. Role selector (theater cards) → ensure mobile scroll
   7. Safety-net for all scenes on mobile → scrollable left panel
   ============================================================ */

/* ============================================================
   1. FIX: Digital Twin hidden at 100% desktop zoom
   ------------------------------------------------------------
   Root cause: `flex-wrap: wrap` on `.ps-scene-dna` combined
   with `flex: 1 1 auto` on `.ps-dna-left` meant the right rail
   would wrap to a new line whenever the left had "enough"
   content — which was every time at 100%. At 90% zoom the
   viewport was big enough to avoid the wrap.
   ============================================================ */
@media (min-width: 769px) {
    .ps-scene#psScene2,
    .ps-scene-dna {
        flex-wrap: nowrap !important;
    }

        /* Belt-and-braces: cap the left rail so it can never push the
       right off-screen, no matter how heavy its content gets. */
        .ps-scene#psScene2 > .ps-dna-left,
        .ps-scene-dna > .ps-dna-left {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            max-width: calc(100% - 280px) !important;
        }

        /* Right rail — keep its space reserved no matter what */
        .ps-scene#psScene2 > .ps-right,
        .ps-scene-dna > .ps-right {
            flex: 0 0 32% !important;
            min-width: 280px !important;
            max-width: 360px !important;
        }
}

/* ============================================================
   2. FIX: Reveal pills truncated on mobile
   ------------------------------------------------------------
   Two spans now live inside each pill — `.ps-reveal-short`
   (always visible) and `.ps-reveal-long` (desktop only).
   At ≤ 600px only the short label shows, so the icon + "Yes"
   or "No" fits comfortably in the narrow pill width.
   ============================================================ */
.ps-reveal-pill .ps-reveal-short {
    display: inline;
    font-weight: 800;
}

.ps-reveal-pill .ps-reveal-long {
    display: inline;
    margin-left: 3px;
    opacity: 0.92;
}

@media (max-width: 600px) {
    .ps-reveal-pill .ps-reveal-long {
        display: none;
    }
}

/* Even on desktop, guarantee pills never overflow */
.ps-reveal-pill {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ============================================================
   3. FIX: Scene 0 category grid truncation on mobile
   ------------------------------------------------------------
   Was 3 columns at all widths → labels like "Retirement Estate"
   and "Vacant Land" couldn't fit in ~120px card width at 375px
   viewport. Now: 3 cols > 560px, 2 cols 380-560px, 2 cols with
   bigger cards ≤ 380px.
   ============================================================ */
@media (max-width: 560px) {
    .ps-scene#psScene0 .ps-cat-grid,
    .ps-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .ps-cat-card {
        padding: 14px 10px !important;
        gap: 7px !important;
        min-height: 110px !important;
        justify-content: center !important;
    }

    .ps-cat-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.25rem !important;
    }

    .ps-cat-name {
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
    }

    .ps-cat-meta {
        font-size: 0.64rem !important;
        opacity: 0.85;
    }
}

/* Tiny screens — single column with larger cards */
@media (max-width: 360px) {
    .ps-scene#psScene0 .ps-cat-grid,
    .ps-cat-grid {
        grid-template-columns: 1fr !important;
    }

    .ps-cat-card {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        min-height: 64px !important;
        text-align: left !important;
    }

    .ps-cat-icon {
        flex-shrink: 0 !important;
    }

    .ps-cat-card > :not(.ps-cat-icon) {
        text-align: left !important;
    }
}

/* ============================================================
   4. FIX: Scene 1 property-type chips — premium mobile design
   ------------------------------------------------------------
   Desktop keeps the rounded-pill row design. Mobile switches
   to a clean 2-column grid with flat cards that feel like
   native selections. Larger tap targets, uniform sizing.
   ============================================================ */
@media (max-width: 768px) {
    .ps-chip-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        flex-wrap: initial !important;
    }

    .ps-chip {
        padding: 12px 10px !important;
        border-radius: 12px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        background: #ffffff !important;
        border: 1.5px solid rgba(15, 23, 42, 0.1) !important;
        transition: background-color 0.13s ease, border-color 0.13s ease, color 0.13s ease, box-shadow 0.18s ease !important;
    }

        .ps-chip:hover,
        .ps-chip:focus-visible {
            border-color: var(--sj-orange) !important;
            background: var(--sj-orange-light, rgba(245, 130, 32, 0.08)) !important;
            color: var(--sj-orange-dark) !important;
            transform: none !important;
        }

        .ps-chip.selected {
            background: var(--sj-orange) !important;
            border-color: var(--sj-orange) !important;
            color: #ffffff !important;
            box-shadow: 0 4px 14px rgba(245, 130, 32, 0.28) !important;
        }
}

/* Very tight phones — single column so long subtype names fit */
@media (max-width: 380px) {
    .ps-chip-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   5. FIX: Role selector (sj-theater-cards) — mobile scroll safety
   ------------------------------------------------------------
   The theater-card container lives in sell-journey.css (not
   uploaded), but we can add scope-limited overrides that kick
   in on mobile to ensure the 3 cards are actually reachable by
   scroll. Target by class only; no structural assumptions.
   ============================================================ */
@media (max-width: 900px) {
    .sj-theater-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: clamp(14px, 2.5vh, 20px) !important;
        width: 100% !important;
        padding: clamp(10px, 2vh, 16px) clamp(14px, 4vw, 20px) clamp(20px, 4vh, 30px) !important;
        overflow-y: visible !important;
        align-items: stretch !important;
    }

    .sj-theater-card {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    /* Parent wrapper — ensure it's scrollable on small screens */
    #sjStep0 {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: 100% !important;
        max-height: 100% !important;
        padding-bottom: clamp(20px, 4vh, 40px) !important;
    }

        #sjStep0::-webkit-scrollbar {
            width: 4px;
        }

        #sjStep0::-webkit-scrollbar-thumb {
            background: rgba(15, 23, 42, 0.15);
            border-radius: 2px;
        }
}

/* Tablet landscape — 3 cards in a row if room, otherwise scroll */
@media (min-width: 900px) and (max-width: 1180px) {
    .sj-theater-cards {
        gap: 16px !important;
    }

    .sj-theater-card {
        min-width: 260px !important;
    }
}

/* ============================================================
   6. SAFETY-NET: every ps-scene is scrollable on mobile
   ------------------------------------------------------------
   If any scene (0, 1, 3, 4, 5, 6, 7) has content longer than
   the viewport, the user must be able to scroll through it.
   The base rule sets `flex-direction: column` on the scene at
   ≤ 768px but doesn't enforce overflow-y: auto. Make sure.
   ============================================================ */
@media (max-width: 768px) {
    .ps-scene {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

        .ps-scene .ps-left {
            overflow: visible !important;
            height: auto !important;
            min-height: 0 !important;
            padding-bottom: clamp(90px, 14vh, 110px) !important;
        }

        /* Pinned action bar for every scene on mobile */
        .ps-scene .ps-nav:not(.ps-nav-dna) {
            position: sticky !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 50 !important;
            margin: clamp(10px, 1.6vh, 14px) calc(clamp(-14px, -4vw, -18px)) 0 !important;
            padding: clamp(10px, 1.6vh, 14px) clamp(14px, 4vw, 18px) calc(clamp(10px, 1.6vh, 14px) + env(safe-area-inset-bottom, 0px)) !important;
            background: rgba(255, 255, 255, 0.96) !important;
            backdrop-filter: blur(12px) !important;
            border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
            box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 10px !important;
        }

        .ps-scene .ps-btn-back,
        .ps-scene .ps-btn-next {
            flex: 1 1 0 !important;
            min-height: 44px !important;
            justify-content: center !important;
            padding: clamp(10px, 1.5vh, 12px) clamp(10px, 3vw, 16px) !important;
            font-size: clamp(0.8rem, 3.5vw, 0.9rem) !important;
        }
}

/* ============================================================
   7. PROPERTY CATEGORY cards — better tap affordance on mobile
   ------------------------------------------------------------
   Also increase icon contrast so users can identify categories
   without relying on reading the label first.
   ============================================================ */
@media (max-width: 560px) {
    .ps-cat-icon {
        background: linear-gradient(135deg, rgba(245, 130, 32, 0.15) 0%, rgba(245, 130, 32, 0.08) 100%) !important;
        color: var(--sj-orange) !important;
        border: 1.5px solid rgba(245, 130, 32, 0.2) !important;
    }

    .ps-cat-card:hover .ps-cat-icon {
        background: var(--sj-orange) !important;
        color: #ffffff !important;
        border-color: var(--sj-orange) !important;
    }

    .ps-cat-card {
        border-radius: 16px !important;
        border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
    }

        .ps-cat-card.selected {
            background: linear-gradient(135deg, rgba(245, 130, 32, 0.06) 0%, #ffffff 100%) !important;
            border-color: var(--sj-orange) !important;
        }
}

/* ============================================================
   v11 — FINAL POLISH (Step 3)
   ------------------------------------------------------------
   1. Label "Floor Size" truncating to "Floor Siz" → allow
      2-line wrap on narrow tiles (the tile is tall enough).
   2. New silhouette paths: boundary wall, gate, attached
      garage door panels/handle, door handle dot, overflow
      badge for extra garages.
   3. Map gets +12px vertical breathing room (tightened reveal).
   ============================================================ */

/* ── 1. LABEL WRAP: allow 2 lines on tight tiles ────────────── */
/* The metric tile is min-height 34-42px which fits 2 short lines
   of the label. Removing `white-space: nowrap` and allowing
   wrap solves the "Floor Size" → "Floor Siz" truncation without
   shrinking the font further or widening the tile. */
.ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label,
.ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label {
    white-space: normal !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
    hyphens: none !important;
}

/* ── 2. NEW SILHOUETTE STYLES ───────────────────────────────── */
/* Boundary wall (erf outline) — orange dashed line */
.ps-sil-wall {
    stroke: var(--sj-orange, #F58220);
    fill: none;
    stroke-dasharray: 3 3;
    stroke-linecap: round;
    opacity: 0.75;
}

/* Small gate gap in the boundary wall (drawn over the top edge) */
.ps-sil-gate {
    stroke: rgba(15, 23, 42, 0.45);
    fill: none;
    stroke-linecap: round;
}

/* Garage sectional door — lighter than the front door so it reads
   as a different material (metal vs wood) while still clearly
   being a door */
.ps-sil-garage-door {
    fill: rgba(30, 41, 59, 0.75);
    stroke: rgba(15, 23, 42, 0.88);
    stroke-linejoin: round;
}

/* Horizontal panel lines inside the garage door */
.ps-sil-garage-panel {
    stroke: rgba(255, 255, 255, 0.55);
    fill: none;
    stroke-linecap: round;
}

/* Garage door handle */
.ps-sil-garage-handle {
    stroke: rgba(255, 255, 255, 0.75);
    fill: none;
    stroke-linecap: round;
}

/* Front door handle dot */
.ps-sil-door-handle {
    fill: rgba(245, 180, 80, 0.95);
    stroke: none;
}

/* Overflow badge — when > 2 garages, show "+N" */
.ps-sil-badge-bg {
    fill: var(--sj-orange, #F58220);
    stroke: #ffffff;
    stroke-width: 1.2;
}

.ps-sil-badge-text {
    fill: #ffffff;
    font-size: 8px;
    font-weight: 800;
    font-family: inherit;
}

/* ── 3. MAP +12PX: tighter reveal, taller map ────────────────── */
/* Before: map max-height clamp(180px, 34vh, 360px),
   reveal margin-top clamp(6px, 0.8vh, 9px),
   reveal padding clamp(7px, 0.9vh, 9px),
   reveal min-height clamp(50px, 7vh, 62px).
   After: map gets +6vh equivalent, reveal trims +4-6px of gap
   and internal padding while staying readable. */

/* Desktop map height — +vh */
@media (min-width: 769px) {
    .ps-scene#psScene2 .ps-dna-panel-location .ps-location-map,
    .ps-scene-dna .ps-dna-panel-location .ps-location-map {
        max-height: clamp(200px, 40vh, 420px) !important;
        min-height: clamp(160px, 26vh, 280px) !important;
    }

    /* Tighten the gap between the map and the reveal panel */
    .ps-scene#psScene2 .ps-dna-panel-location .ps-location-reveal,
    .ps-scene-dna .ps-dna-panel-location .ps-location-reveal {
        margin-top: clamp(4px, 0.4vh, 6px) !important;
        padding: clamp(6px, 0.7vh, 8px) clamp(9px, 1vw, 11px) !important;
        min-height: clamp(46px, 6.2vh, 58px) !important;
    }

        /* Nudge the reveal's internal label+options spacing tighter too */
        .ps-scene#psScene2 .ps-dna-panel-location .ps-location-reveal .ps-reveal-label,
        .ps-scene-dna .ps-dna-panel-location .ps-location-reveal .ps-reveal-label {
            margin-bottom: clamp(3px, 0.4vh, 5px) !important;
        }

    /* Also shrink the card's internal gap by a hair so the map
       visually inherits the saved pixels */
    .ps-scene#psScene2 .ps-dna-panel-location .ps-location-card,
    .ps-scene-dna .ps-dna-panel-location .ps-location-card {
        gap: clamp(5px, 0.7vh, 7px) !important;
    }
}

/* Short-viewport adjustments — keep the map/reveal balance */
@media (min-width: 769px) and (max-height: 760px) {
    .ps-scene#psScene2 .ps-dna-panel-location .ps-location-map,
    .ps-scene-dna .ps-dna-panel-location .ps-location-map {
        max-height: clamp(170px, 34vh, 300px) !important;
    }
}

@media (min-width: 769px) and (max-height: 640px) {
    .ps-scene#psScene2 .ps-dna-panel-location .ps-location-map,
    .ps-scene-dna .ps-dna-panel-location .ps-location-map {
        min-height: 120px !important;
        max-height: 190px !important;
    }
}

/* ============================================================
   v12 — SILHOUETTE YARD, MAP OVERLAY, STEP 4 PREMIUM REDESIGN
   ============================================================ */

/* ── Yard (erf boundary) — surrounds the house, not inside it ── */
.ps-sil-yard {
    stroke: var(--sj-orange, #F58220);
    fill: none;
    stroke-dasharray: 3 3;
    stroke-linecap: round;
    opacity: 0.62;
}

/* The gate break — clears part of the top boundary wall */
.ps-sil-gate {
    stroke: #ffffff;
    fill: none;
    stroke-linecap: butt;
}

/* Small posts either side of the gate opening */
.ps-sil-yard-post {
    fill: var(--sj-orange, #F58220);
    stroke: none;
    opacity: 0.85;
}

/* Lawn texture — subtle dashes inside the yard */
.ps-sil-lawn {
    stroke: rgba(34, 197, 94, 0.55);
    fill: none;
    stroke-linecap: round;
}

/* Retire the v11 .ps-sil-wall selector — yard has replaced it */
.ps-sil-wall {
    display: none;
}

/* ============================================================
   MAP OVERLAY — the floating address summary was overlapping
   Google's pan-direction controls. Fix:
     1. Confine the summary to ~60% of the map width (left side)
     2. Dim it on hover of the Google controls
     3. Guarantee Google's nav buttons are above the summary
   ============================================================ */
.ps-dna-panel-location .ps-location-summary {
    left: clamp(8px, 1vw, 12px) !important;
    right: auto !important;
    bottom: clamp(8px, 1vw, 12px) !important;
    max-width: min(62%, 240px) !important;
    transition: opacity 0.2s ease !important;
    z-index: 480 !important;
}

    .ps-dna-panel-location .ps-location-summary strong {
        display: block !important;
        font-size: clamp(0.68rem, 0.9vw, 0.76rem) !important;
        line-height: 1.18 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .ps-dna-panel-location .ps-location-summary span {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: clamp(0.6rem, 0.78vw, 0.66rem) !important;
    }

/* When the user hovers the map area near the controls, fade the
   summary so they can read the zoom/pan labels. The fade is
   triggered by hovering any Google Maps native control. */
.ps-dna-panel-location .ps-location-map:has(.gm-svpc:hover) .ps-location-summary,
.ps-dna-panel-location .ps-location-map:has([title*="pan"]:hover) .ps-location-summary,
.ps-dna-panel-location .ps-location-map:has([title*="Pan"]:hover) .ps-location-summary,
.ps-dna-panel-location .ps-location-map:has([title*="zoom"]:hover) .ps-location-summary,
.ps-dna-panel-location .ps-location-map:has([title*="Zoom"]:hover) .ps-location-summary {
    opacity: 0.25 !important;
    pointer-events: none !important;
}

/* Hovering the summary itself also brings it fully visible */
.ps-dna-panel-location .ps-location-summary:hover {
    opacity: 1 !important;
}

/* Ensure Google's bottom-right control cluster is always above */
.ps-dna-panel-location .ps-location-map .gmnoprint,
.ps-dna-panel-location .ps-location-map .gm-control-active,
.ps-dna-panel-location .ps-location-map button[title*="Zoom"],
.ps-dna-panel-location .ps-location-map button[title*="pan"],
.ps-dna-panel-location .ps-location-map button[title*="Pan"] {
    z-index: 600 !important;
}

/* Mobile — summary shrinks even more, hide subtitle line */
@media (max-width: 560px) {
    .ps-dna-panel-location .ps-location-summary {
        max-width: min(70%, 200px) !important;
        padding: 7px 9px !important;
    }

        .ps-dna-panel-location .ps-location-summary span {
            display: none !important;
        }
}

/* ============================================================
   SCENE 4 — VALUE INTELLIGENCE (premium persona-driven layout)
   ============================================================ */

/* Scene scaffold — mirror the desktop 2-rail pattern used by other
   scenes. .ps-scene-value is just a marker for our overrides. */
.ps-scene-value {
    /* uses base .ps-scene flex-row; nothing to override at desktop */
}

/* Hide the old .ps-feature-* rules' visual weight in case any
   residual markup shows up during a bfcache reload */
.ps-feature-section,
.ps-feature-chips,
.ps-feature-chip {
    /* safe no-op if not present; prevents stale rules from leaking */
}

/* ── PERSONA BOARD — scrollable column of grouped personas ─── */
.ps-persona-board {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vh, 14px);
    scrollbar-width: thin;
    scrollbar-color: rgba(245,130,32,0.25) transparent;
    margin-bottom: clamp(8px, 1vh, 12px);
}

    .ps-persona-board::-webkit-scrollbar {
        width: 4px;
    }

    .ps-persona-board::-webkit-scrollbar-thumb {
        background: rgba(245,130,32,0.25);
        border-radius: 2px;
    }

/* ── PERSONA GROUP — a card for each buyer archetype ───────── */
.ps-persona-group {
    --persona-tint: #F58220;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 14px;
    padding: clamp(10px, 1.3vh, 13px) clamp(10px, 1.2vw, 13px);
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

    .ps-persona-group::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--persona-tint);
        opacity: 0.35;
        transition: opacity 0.25s ease;
    }

    .ps-persona-group.is-active {
        border-color: color-mix(in srgb, var(--persona-tint) 45%, transparent);
        box-shadow: 0 6px 18px color-mix(in srgb, var(--persona-tint) 18%, transparent);
    }

        .ps-persona-group.is-active::before {
            opacity: 1;
        }

.ps-persona-head {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 11px);
    margin-bottom: clamp(8px, 1.1vh, 10px);
    padding-left: clamp(3px, 0.4vw, 5px);
}

.ps-persona-icon {
    flex-shrink: 0;
    width: clamp(30px, 3.4vw, 36px);
    height: clamp(30px, 3.4vw, 36px);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--persona-tint);
    background: color-mix(in srgb, var(--persona-tint) 12%, transparent);
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    transition: all 0.25s ease;
}

.ps-persona-group.is-active .ps-persona-icon {
    color: #ffffff;
    background: var(--persona-tint);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--persona-tint) 35%, transparent);
}

.ps-persona-meta {
    flex: 1;
    min-width: 0;
}

.ps-persona-name {
    font-size: clamp(0.78rem, 1.02vw, 0.88rem);
    font-weight: 800;
    color: var(--sj-dark);
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}

.ps-persona-blurb {
    font-size: clamp(0.62rem, 0.82vw, 0.7rem);
    color: #64748B;
    line-height: 1.3;
}

.ps-persona-pct {
    flex-shrink: 0;
    font-size: clamp(0.64rem, 0.86vw, 0.74rem);
    font-weight: 900;
    color: var(--persona-tint);
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--persona-tint) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--persona-tint) 22%, transparent);
    letter-spacing: -0.01em;
    transition: all 0.25s ease;
}

.ps-persona-group.is-active .ps-persona-pct {
    background: color-mix(in srgb, var(--persona-tint) 18%, transparent);
    border-color: var(--persona-tint);
}

/* Tiles inside a persona group */
.ps-persona-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(6px, 0.8vh, 8px) clamp(6px, 0.8vw, 9px);
}

/* ── VALUE TILE — selectable feature card ─────────────────── */
.ps-value-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.5vh, 6px);
    padding: clamp(8px, 1vh, 10px) clamp(9px, 1vw, 11px);
    background: #ffffff;
    border: 1.5px solid rgba(15,23,42,0.08);
    border-radius: 11px;
    font-family: inherit;
    color: var(--sj-dark);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

    .ps-value-tile:hover {
        border-color: color-mix(in srgb, var(--persona-tint) 40%, transparent);
        transform: translateY(-1px);
        box-shadow: 0 4px 10px color-mix(in srgb, var(--persona-tint) 15%, transparent);
    }

    .ps-value-tile.selected {
        border-color: var(--persona-tint);
        background: color-mix(in srgb, var(--persona-tint) 6%, #ffffff);
        box-shadow: 0 6px 16px color-mix(in srgb, var(--persona-tint) 22%, transparent);
    }

/* Micro-burst on select — a subtle outward pulse */
@keyframes psTileBurst {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.035);
    }

    100% {
        transform: scale(1);
    }
}

.ps-value-tile.ps-tile-burst {
    animation: psTileBurst 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-value-tile-head {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.8vw, 8px);
}

.ps-value-tile-icon {
    flex-shrink: 0;
    width: clamp(22px, 2.5vw, 26px);
    height: clamp(22px, 2.5vw, 26px);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--persona-tint) 11%, transparent);
    color: var(--persona-tint);
    font-size: clamp(0.68rem, 0.9vw, 0.78rem);
    transition: all 0.22s ease;
}

.ps-value-tile.selected .ps-value-tile-icon {
    background: var(--persona-tint);
    color: #ffffff;
}

.ps-value-tile-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(0.66rem, 0.9vw, 0.76rem);
    font-weight: 700;
    line-height: 1.18;
    color: var(--sj-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-value-tile-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--persona-tint) 15%, transparent);
    color: var(--persona-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-value-tile.selected .ps-value-tile-check {
    opacity: 1;
    transform: scale(1);
    background: var(--persona-tint);
    color: #ffffff;
}

.ps-value-tile-meta {
    display: none;
    flex-direction: column;
    gap: 3px;
    padding-top: clamp(4px, 0.5vh, 6px);
    border-top: 1px dashed color-mix(in srgb, var(--persona-tint) 25%, transparent);
}

.ps-value-tile.selected .ps-value-tile-meta {
    display: flex;
}

.ps-value-tile-demand {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: clamp(0.58rem, 0.78vw, 0.64rem);
    font-weight: 800;
    color: var(--persona-tint);
    letter-spacing: 0.02em;
}

    .ps-value-tile-demand i {
        font-size: 0.85em;
    }

.ps-value-tile-note {
    font-size: clamp(0.56rem, 0.76vw, 0.62rem);
    color: #64748B;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── RIGHT RAIL — premium intelligence cards ──────────────── */
.ps-scene-value .ps-right {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.3vh, 13px);
}

/* ── TIER CARD — hero tier badge with progress ──────────────── */
.ps-tier-card {
    --tier-accent: #b08968;
    position: relative;
    background: linear-gradient(135deg, var(--sj-dark, #1A1D20) 0%, #1E2B3C 100%);
    border-radius: 16px;
    padding: clamp(12px, 1.5vh, 16px);
    overflow: hidden;
    color: #ffffff;
    transition: box-shadow 0.4s ease;
}

    .ps-tier-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--tier-accent) 30%, transparent) 0%, transparent 55%);
        pointer-events: none;
    }

    .ps-tier-card[data-tier="gold"],
    .ps-tier-card[data-tier="platinum"] {
        box-shadow: 0 10px 28px color-mix(in srgb, var(--tier-accent) 25%, transparent);
    }

.ps-tier-badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 12px);
    margin-bottom: clamp(10px, 1.3vh, 13px);
    z-index: 1;
}

.ps-tier-badge-icon {
    flex-shrink: 0;
    width: clamp(38px, 4.2vw, 46px);
    height: clamp(38px, 4.2vw, 46px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tier-accent) 22%, rgba(255,255,255,0.05));
    color: var(--tier-accent);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    border: 1.5px solid color-mix(in srgb, var(--tier-accent) 38%, transparent);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-tier-card[data-tier="gold"] .ps-tier-badge-icon,
.ps-tier-card[data-tier="platinum"] .ps-tier-badge-icon {
    background: var(--tier-accent);
    color: #ffffff;
    border-color: var(--tier-accent);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--tier-accent) 55%, transparent);
}

.ps-tier-badge-meta {
    flex: 1;
    min-width: 0;
}

.ps-tier-label {
    font-size: clamp(0.56rem, 0.72vw, 0.62rem);
    font-weight: 800;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 2px;
}

.ps-tier-name {
    font-size: clamp(1rem, 1.4vw, 1.22rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #ffffff;
    transition: color 0.3s ease;
}

.ps-tier-card[data-tier="gold"] .ps-tier-name,
.ps-tier-card[data-tier="platinum"] .ps-tier-name {
    color: var(--tier-accent);
}

.ps-tier-progress {
    position: relative;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    margin-bottom: clamp(8px, 1.1vh, 10px);
    overflow: visible;
}

.ps-tier-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--tier-accent), color-mix(in srgb, var(--tier-accent) 70%, #ffffff));
    border-radius: 3px;
    transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px color-mix(in srgb, var(--tier-accent) 50%, transparent);
}

.ps-tier-progress-markers {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 1px;
    pointer-events: none;
}

.ps-tier-marker {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.18);
    align-self: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

    .ps-tier-marker.reached {
        background: #ffffff;
        border-color: #ffffff;
    }

    .ps-tier-marker.current {
        transform: scale(1.25);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier-accent) 45%, transparent);
    }

.ps-tier-nudge {
    position: relative;
    font-size: clamp(0.64rem, 0.82vw, 0.72rem);
    color: rgba(255,255,255,0.8);
    line-height: 1.4;
    z-index: 1;
}

    .ps-tier-nudge strong {
        color: #ffffff;
        font-weight: 800;
    }

    .ps-tier-nudge i {
        color: var(--tier-accent);
        margin-right: 4px;
    }

/* ── BUYER MATCH CARD ───────────────────────────────────────── */
.ps-match-card {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 14px;
    padding: clamp(11px, 1.3vh, 14px);
    box-shadow: var(--sj-shadow-sm);
}

    .ps-match-card .ps-intel-header {
        margin-bottom: clamp(9px, 1.1vh, 11px);
    }

.ps-match-empty {
    font-size: clamp(0.68rem, 0.88vw, 0.76rem);
    color: #94A3B8;
    text-align: center;
    padding: clamp(8px, 1vh, 12px) 0;
    font-style: italic;
}

.ps-match-personas {
    display: flex;
    flex-direction: column;
    gap: clamp(7px, 0.9vh, 9px);
}

.ps-match-row {
    --persona-tint: #F58220;
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 10px);
    animation: psMatchRowIn 0.4s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes psMatchRowIn {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }

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

.ps-match-row-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--persona-tint) 12%, transparent);
    color: var(--persona-tint);
    font-size: 0.8rem;
}

.ps-match-row-meta {
    flex: 1;
    min-width: 0;
}

.ps-match-row-name {
    display: block;
    font-size: clamp(0.66rem, 0.86vw, 0.72rem);
    font-weight: 700;
    color: var(--sj-dark);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-match-row-bar {
    height: 4px;
    background: rgba(15,23,42,0.06);
    border-radius: 2px;
    overflow: hidden;
}

.ps-match-row-bar-fill {
    height: 100%;
    background: var(--persona-tint);
    border-radius: 2px;
    transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-match-row-pct {
    flex-shrink: 0;
    font-size: clamp(0.66rem, 0.88vw, 0.74rem);
    font-weight: 900;
    color: var(--persona-tint);
    letter-spacing: -0.01em;
    min-width: 34px;
    text-align: right;
}

/* ── STRATEGY CARD — live intelligence update ──────────────── */
.ps-strategy-card {
    background: linear-gradient(135deg, rgba(245, 130, 32, 0.06) 0%, rgba(86, 196, 248, 0.04) 100%);
    border: 1px solid rgba(245, 130, 32, 0.2);
    border-radius: 14px;
    padding: clamp(10px, 1.3vh, 13px);
    position: relative;
    overflow: hidden;
}

    .ps-strategy-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, #F58220, #56C4F8);
    }

.ps-strategy-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: clamp(0.58rem, 0.76vw, 0.64rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sj-orange-dark, #B4540A);
    margin-bottom: clamp(6px, 0.9vh, 8px);
    padding-left: 5px;
}

.ps-strategy-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sj-orange, #F58220);
    box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.25);
    animation: psPulseDot 2s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes psPulseDot {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.25);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(245, 130, 32, 0.10);
    }
}

.ps-strategy-text {
    font-size: clamp(0.7rem, 0.92vw, 0.8rem);
    color: var(--sj-dark);
    line-height: 1.5;
    margin: 0;
    padding-left: 5px;
}

    .ps-strategy-text strong {
        color: var(--sj-orange-dark, #B4540A);
        font-weight: 800;
    }

/* ── SNIPPET CARD — auto-generated marketing copy ──────────── */
.ps-snippet-card {
    background: #fffaf4;
    border: 1px dashed rgba(245, 130, 32, 0.35);
    border-radius: 14px;
    padding: clamp(10px, 1.3vh, 13px);
    animation: psSnippetIn 0.4s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes psSnippetIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

.ps-snippet-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: clamp(0.58rem, 0.76vw, 0.64rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sj-orange-dark, #B4540A);
    margin-bottom: clamp(5px, 0.7vh, 7px);
}

    .ps-snippet-header i {
        color: var(--sj-orange, #F58220);
    }

.ps-snippet-text {
    font-size: clamp(0.7rem, 0.92vw, 0.78rem);
    color: var(--sj-dark);
    line-height: 1.55;
    margin: 0;
    font-style: italic;
}

/* ── RESPONSIVE — Scene 4 on mobile ───────────────────────── */
@media (max-width: 768px) {
    .ps-scene-value {
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

        .ps-scene-value > .ps-left {
            flex: 0 0 auto !important;
            height: auto !important;
            min-height: 0 !important;
            overflow: visible !important;
            padding-bottom: clamp(12px, 2vh, 18px) !important;
        }

        .ps-scene-value > .ps-right {
            display: flex !important;
            flex: 0 0 auto !important;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            border-left: 0 !important;
            border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
            margin-top: clamp(10px, 2vh, 14px) !important;
            padding-bottom: clamp(90px, 14vh, 110px) !important;
        }

    .ps-persona-board {
        max-height: none !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    .ps-persona-tiles {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .ps-persona-head {
        flex-wrap: wrap;
    }

    .ps-persona-pct {
        order: 3;
    }

    .ps-value-tile {
        padding: 9px 10px !important;
    }

    .ps-value-tile-label {
        font-size: 0.78rem !important;
    }
}

/* Tablet portrait keeps 2-col tiles but stacks vertically */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .ps-scene-value {
        flex-direction: column !important;
        overflow-y: auto !important;
    }

        .ps-scene-value > .ps-right {
            width: 100% !important;
            max-width: 100% !important;
            border-left: 0 !important;
            border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
            margin-top: 16px !important;
        }
}

/* ============================================================
   v13 — STEP 4 "INTELLIGENCE WORKBENCH" CANVAS
   ------------------------------------------------------------
   The v12 card-grid Step 4 was truncating at 100% zoom because
   fixed-height tiles + fixed grids don't adapt to viewport
   height. v13 replaces the entire Step 4 with a flowing
   canvas: chips that reflow by content width, a central energy
   core, a live terminal, and an auto-narrative. Nothing is
   fixed-height — everything flows.
   ============================================================ */

/* ── Neutralise v12 Step 4 remnants ─────────────────────────── */
/* These selectors don't exist in the new scaffold anymore; if any
   cached partial lingers with them, keep layout neutral. */
.ps-persona-board,
.ps-persona-group,
.ps-persona-head,
.ps-persona-icon,
.ps-persona-meta,
.ps-persona-name,
.ps-persona-blurb,
.ps-persona-pct,
.ps-persona-tiles,
.ps-value-tile,
.ps-value-tile-head,
.ps-value-tile-icon,
.ps-value-tile-label,
.ps-value-tile-check,
.ps-value-tile-meta,
.ps-value-tile-demand,
.ps-value-tile-note,
.ps-tier-card,
.ps-tier-badge,
.ps-tier-badge-icon,
.ps-tier-badge-meta,
.ps-tier-progress,
.ps-tier-progress-bar,
.ps-tier-progress-markers,
.ps-tier-marker,
.ps-match-card,
.ps-match-personas,
.ps-match-empty,
.ps-match-row,
.ps-match-row-icon,
.ps-match-row-meta,
.ps-match-row-name,
.ps-match-row-bar,
.ps-match-row-bar-fill,
.ps-match-row-pct,
.ps-strategy-card,
.ps-strategy-header,
.ps-strategy-dot,
.ps-strategy-text,
.ps-snippet-card,
.ps-snippet-header,
.ps-snippet-text {
    all: unset;
    display: revert;
}

/* ============================================================
   SCENE SHELL — desktop 2-column canvas
   ============================================================ */
.ps-scene-value {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    height: 100% !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, #fafbff 0%, #fff 45%, #fff9f2 100%);
    position: relative;
}

    .ps-scene-value::before {
        /* ambient glow backdrop — very subtle */
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 600px 400px at 15% 20%, rgba(245,130,32,0.05) 0%, transparent 65%), radial-gradient(ellipse 500px 340px at 85% 80%, rgba(86,196,248,0.04) 0%, transparent 65%);
        pointer-events: none;
        z-index: 0;
    }

/* Left workbench — heading + canvas + foot */
.ps-workbench-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.8vw, 22px) 0 !important;
    overflow: hidden !important;
    position: relative;
    z-index: 1;
    gap: clamp(8px, 1.2vh, 12px);
}

/* Right rail */
.ps-scene-value > .ps-workbench-right {
    flex: 0 0 30% !important;
    min-width: 280px !important;
    max-width: 360px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: clamp(14px, 1.8vh, 20px) clamp(12px, 1.4vw, 18px) !important;
    gap: clamp(10px, 1.3vh, 14px);
    background: linear-gradient(172deg, #0F172A 0%, #111C2E 55%, #0B1220 100%);
    border-left: 1px solid rgba(245,130,32,0.14);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* ── COMPACT TOP ROW ─────────────────────────────────────────── */
.ps-workbench-top {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(10px, 1.4vw, 14px);
}

.ps-workbench-heading {
    flex: 1;
    min-width: 0;
}

    .ps-workbench-heading .ps-progress {
        margin-bottom: 6px;
    }

    .ps-workbench-heading .ps-scene-label {
        margin-bottom: 4px;
    }

    .ps-workbench-heading .ps-question {
        margin-bottom: 2px;
        font-size: clamp(1.05rem, 1.8vw, 1.45rem);
        line-height: 1.18;
    }

    .ps-workbench-heading .ps-subtitle {
        margin: 0;
        font-size: clamp(0.7rem, 0.92vw, 0.8rem);
        color: #64748B;
        line-height: 1.45;
        max-width: none;
    }

/* ── LIVE TIER PILL ──────────────────────────────────────────── */
.ps-tier-pill {
    --tier-accent: #b08968;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.8vw, 9px);
    padding: clamp(5px, 0.7vh, 7px) clamp(10px, 1.1vw, 12px);
    background: #ffffff;
    border: 1.5px solid color-mix(in srgb, var(--tier-accent) 32%, transparent);
    border-radius: 999px;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--tier-accent) 16%, transparent);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .ps-tier-pill[data-tier="gold"],
    .ps-tier-pill[data-tier="platinum"] {
        background: color-mix(in srgb, var(--tier-accent) 6%, #ffffff);
        border-color: var(--tier-accent);
        box-shadow: 0 6px 20px color-mix(in srgb, var(--tier-accent) 30%, transparent);
    }

.ps-tier-pill-icon {
    flex-shrink: 0;
    width: clamp(26px, 3vw, 30px);
    height: clamp(26px, 3vw, 30px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tier-accent) 18%, transparent);
    color: var(--tier-accent);
    font-size: clamp(0.8rem, 1vw, 0.9rem);
}

.ps-tier-pill[data-tier="gold"] .ps-tier-pill-icon,
.ps-tier-pill[data-tier="platinum"] .ps-tier-pill-icon {
    background: var(--tier-accent);
    color: #ffffff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--tier-accent) 48%, transparent);
}

.ps-tier-pill-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.ps-tier-pill-label {
    font-size: clamp(0.5rem, 0.66vw, 0.56rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #94A3B8;
    line-height: 1;
}

.ps-tier-pill-name {
    font-size: clamp(0.76rem, 1vw, 0.88rem);
    font-weight: 900;
    color: var(--sj-dark);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.ps-tier-pill[data-tier="gold"] .ps-tier-pill-name,
.ps-tier-pill[data-tier="platinum"] .ps-tier-pill-name {
    color: var(--tier-accent);
}

.ps-tier-pill-count {
    flex-shrink: 0;
    font-size: clamp(0.78rem, 1.1vw, 0.94rem);
    font-weight: 900;
    color: var(--sj-dark);
    letter-spacing: -0.02em;
    padding-left: clamp(4px, 0.5vw, 6px);
    border-left: 1px solid rgba(15,23,42,0.1);
}

    .ps-tier-pill-count small {
        font-size: 0.6em;
        font-weight: 700;
        color: #94A3B8;
        margin-left: 1px;
    }

/* ── CLUSTER TABS (mobile focus mode, hidden on desktop) ────── */
.ps-cluster-tabs {
    display: none;
    flex-shrink: 0;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 2px;
}

    .ps-cluster-tabs::-webkit-scrollbar {
        display: none;
    }

.ps-cluster-tab {
    --cluster-tint: #F58220;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1.5px solid rgba(15,23,42,0.1);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.22s ease;
}

    .ps-cluster-tab i {
        color: var(--cluster-tint);
        font-size: 0.8rem;
    }

    .ps-cluster-tab.is-active {
        background: color-mix(in srgb, var(--cluster-tint) 12%, #ffffff);
        border-color: var(--cluster-tint);
        color: var(--sj-dark);
        box-shadow: 0 4px 10px color-mix(in srgb, var(--cluster-tint) 25%, transparent);
    }

    .ps-cluster-tab .ps-cluster-tab-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: rgba(15,23,42,0.08);
        color: #64748B;
        font-size: 0.6rem;
        font-weight: 800;
        transition: all 0.22s ease;
    }

        .ps-cluster-tab .ps-cluster-tab-count.has-picks {
            background: var(--cluster-tint);
            color: #ffffff;
        }

/* ── WORKBENCH CANVAS — the flowing cluster stage ───────────── */
.ps-workbench-canvas {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(10px, 1.2vh, 14px);
    padding: 2px 4px 2px 0;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(245,130,32,0.25) transparent;
}

    .ps-workbench-canvas::-webkit-scrollbar {
        width: 4px;
    }

    .ps-workbench-canvas::-webkit-scrollbar-thumb {
        background: rgba(245,130,32,0.25);
        border-radius: 2px;
    }

/* ── CLUSTER — each persona group ───────────────────────────── */
.ps-cluster {
    --cluster-tint: #F58220;
    /* PERF: dropped `backdrop-filter: blur(10px)` — this container wraps the
       feature chips, so its large blurred region recomputed on every chip
       hover/selection. Near-opaque white keeps the layered look without the
       per-frame backdrop sample. */
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 16px;
    padding: clamp(10px, 1.2vh, 13px) clamp(10px, 1.2vw, 13px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vh, 10px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .ps-cluster::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--cluster-tint) 8%, transparent) 0%, transparent 60%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.35s ease;
    }

    .ps-cluster.is-active {
        border-color: color-mix(in srgb, var(--cluster-tint) 40%, transparent);
        box-shadow: 0 8px 24px color-mix(in srgb, var(--cluster-tint) 16%, transparent);
    }

        .ps-cluster.is-active::before {
            opacity: 1;
        }

.ps-cluster-head {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 10px);
}

.ps-cluster-icon {
    flex-shrink: 0;
    width: clamp(32px, 3.6vw, 38px);
    height: clamp(32px, 3.6vw, 38px);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cluster-tint) 12%, transparent);
    color: var(--cluster-tint);
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    transition: all 0.3s ease;
}

.ps-cluster.is-active .ps-cluster-icon {
    background: var(--cluster-tint);
    color: #ffffff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cluster-tint) 40%, transparent);
}

.ps-cluster-meta {
    flex: 1;
    min-width: 0;
}

.ps-cluster-name {
    font-size: clamp(0.8rem, 1.02vw, 0.9rem);
    font-weight: 800;
    color: var(--sj-dark);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: 2px;
}

.ps-cluster-blurb {
    font-size: clamp(0.62rem, 0.8vw, 0.7rem);
    color: #64748B;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ps-cluster-pct {
    flex-shrink: 0;
    font-size: clamp(0.68rem, 0.9vw, 0.76rem);
    font-weight: 900;
    color: var(--cluster-tint);
    letter-spacing: -0.01em;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cluster-tint) 10%, transparent);
    transition: all 0.3s ease;
}

.ps-cluster.is-active .ps-cluster-pct {
    background: color-mix(in srgb, var(--cluster-tint) 18%, transparent);
}

/* ── CHIP FLOW — the feature chips inside a cluster ─────────── */
.ps-chip-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
}

.ps-feat-chip {
    --cluster-tint: #F58220;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 8px;
    border: 1.5px solid rgba(15,23,42,0.1);
    border-radius: 999px;
    /* PERF: was `background: rgba(255,255,255,0.7)` + `backdrop-filter: blur(6px)`.
       There are many feature chips, each nested inside a .ps-cluster that ALSO
       blurred — so every repaint (hover, selection, map tick, any scene paint)
       recomputed a stack of backdrop blurs right where the user is clicking.
       A solid background is visually near-identical on the light scene and
       removes the per-frame blur cost entirely — the main fix for "clicking
       features is slow / hover feels blocked". */
    background: #ffffff;
    font-family: inherit;
    font-size: clamp(0.64rem, 0.82vw, 0.72rem);
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    /* PERF: was `transition: all 0.25s` — a 250ms fade on EVERY state change,
       so the selected colour took a beat to appear. Scope to the cheap
       properties that actually change and shorten it so feedback feels instant. */
    transition: transform 0.14s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease, box-shadow 0.18s ease;
    overflow: hidden;
}

    .ps-feat-chip i {
        color: var(--cluster-tint);
        font-size: 0.85em;
        width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

.ps-feat-chip-label {
    letter-spacing: -0.01em;
}

.ps-feat-chip-demand {
    display: none;
    margin-left: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.88em;
    font-weight: 800;
    background: color-mix(in srgb, var(--cluster-tint) 18%, transparent);
    color: var(--cluster-tint);
    letter-spacing: -0.01em;
}

.ps-feat-chip:hover {
    transform: translateY(-1px) scale(1.02);
    border-color: color-mix(in srgb, var(--cluster-tint) 45%, transparent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--cluster-tint) 18%, transparent);
}

.ps-feat-chip.selected {
    background: linear-gradient(135deg, var(--cluster-tint) 0%, color-mix(in srgb, var(--cluster-tint) 85%, #ffffff) 100%);
    border-color: var(--cluster-tint);
    color: #ffffff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--cluster-tint) 35%, transparent);
    padding-right: 8px;
}

    .ps-feat-chip.selected i {
        color: #ffffff;
    }

    .ps-feat-chip.selected .ps-feat-chip-demand {
        display: inline-block;
        background: rgba(255,255,255,0.25);
        color: #ffffff;
    }

/* Micro-burst on select */
@keyframes psChipBurst {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.08) translateY(-2px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.ps-feat-chip.ps-chip-burst {
    animation: psChipBurst 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── WORKBENCH FOOT — minimal nav + nudge ───────────────────── */
.ps-workbench-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.2vw, 14px);
    padding: clamp(8px, 1vh, 12px) 0 clamp(6px, 0.9vh, 10px);
    border-top: 1px solid rgba(15,23,42,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 40%);
}

.ps-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: clamp(7px, 0.9vh, 9px) clamp(11px, 1.2vw, 14px);
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(15,23,42,0.12);
    color: #475569;
    font-family: inherit;
    font-size: clamp(0.68rem, 0.9vw, 0.76rem);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s ease;
}

    .ps-btn-ghost:hover {
        background: rgba(15,23,42,0.04);
        color: var(--sj-dark);
        border-color: rgba(15,23,42,0.2);
    }

    .ps-btn-ghost i {
        font-size: 0.88em;
    }

.ps-workbench-nudge {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: clamp(0.64rem, 0.84vw, 0.72rem);
    color: #64748B;
    line-height: 1.35;
}

    .ps-workbench-nudge strong {
        color: var(--sj-dark);
        font-weight: 800;
    }

    .ps-workbench-nudge i {
        color: var(--sj-orange);
    }

.ps-btn-orb {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: clamp(8px, 1vh, 11px) clamp(14px, 1.6vw, 20px);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--sj-orange, #F58220) 0%, #F97316 100%);
    border: 0;
    color: #ffffff;
    font-family: inherit;
    font-size: clamp(0.72rem, 0.95vw, 0.8rem);
    font-weight: 800;
    cursor: pointer;
    letter-spacing: -0.01em;
    box-shadow: 0 6px 18px rgba(245,130,32,0.35);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

    .ps-btn-orb:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(245,130,32,0.48);
    }

    .ps-btn-orb i {
        font-size: 1em;
    }

/* ============================================================
   RIGHT RAIL — dark workbench "thinking" layer
   ============================================================ */

/* ── ENERGY CORE — pulsing orb ─────────────────────────────── */
.ps-energy-core {
    --tier-accent: #F58220;
    position: relative;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: clamp(160px, 22vh, 220px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.6s ease;
}

    .ps-energy-core.is-strong {
        filter: drop-shadow(0 0 18px rgba(245,130,32,0.35));
    }

    .ps-energy-core.is-peak {
        filter: drop-shadow(0 0 26px rgba(245,130,32,0.55));
    }

.ps-energy-svg {
    width: 100%;
    height: 100%;
    display: block;
    max-width: clamp(150px, 20vh, 210px);
    max-height: clamp(150px, 20vh, 210px);
}

.ps-energy-track {
    stroke: rgba(255,255,255,0.08);
}

.ps-energy-fill {
    stroke: var(--tier-accent);
    transition: stroke-dasharray 0.7s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease;
}

.ps-energy-pulse {
    stroke: var(--tier-accent);
    transform-origin: 70px 70px;
    opacity: 0;
    animation: psEnergyPulse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

    .ps-energy-pulse.ps-energy-pulse--alt {
        animation-delay: 1.4s;
    }

@keyframes psEnergyPulse {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }

    70% {
        opacity: 0;
        transform: scale(1.15);
    }

    100% {
        opacity: 0;
        transform: scale(1.25);
    }
}

.ps-energy-readout {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.ps-energy-pct {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.04em;
    line-height: 1;
}

.ps-energy-unit {
    font-size: clamp(0.9rem, 1.4vw, 1.2rem);
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    margin-left: 1px;
    letter-spacing: -0.02em;
}

.ps-energy-label {
    font-size: clamp(0.58rem, 0.74vw, 0.64rem);
    font-weight: 800;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: 4px;
}

/* ── PERSONA BARS ──────────────────────────────────────────── */
.ps-persona-bars {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.8vh, 8px);
    min-height: 24px;
}

.ps-persona-bar-empty {
    font-size: clamp(0.64rem, 0.82vw, 0.7rem);
    color: rgba(255,255,255,0.35);
    text-align: center;
    padding: 4px 0;
    font-style: italic;
}

.ps-persona-bar {
    --persona-tint: #F58220;
    animation: psBarIn 0.4s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes psBarIn {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }

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

.ps-persona-bar-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    font-size: clamp(0.64rem, 0.84vw, 0.7rem);
    color: rgba(255,255,255,0.85);
}

    .ps-persona-bar-head i {
        color: var(--persona-tint);
        font-size: 0.92em;
        width: 14px;
        text-align: center;
    }

.ps-persona-bar-name {
    flex: 1;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
}

.ps-persona-bar-pct {
    flex-shrink: 0;
    font-weight: 900;
    color: var(--persona-tint);
    letter-spacing: -0.02em;
}

.ps-persona-bar-track {
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}

.ps-persona-bar-fill {
    height: 100%;
    background: var(--persona-tint);
    border-radius: 2px;
    transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px color-mix(in srgb, var(--persona-tint) 60%, transparent);
}

/* ── TERMINAL — live AI feed ───────────────────────────────── */
.ps-terminal {
    flex: 1 1 auto;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(245,130,32,0.18);
    border-radius: 12px;
    overflow: hidden;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Menlo', monospace;
}

.ps-terminal-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    font-size: clamp(0.54rem, 0.72vw, 0.6rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #F58220;
    background: rgba(0,0,0,0.32);
    border-bottom: 1px solid rgba(245,130,32,0.16);
}

.ps-terminal-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F58220;
    box-shadow: 0 0 0 2.5px rgba(245,130,32,0.2);
    animation: psPulseDot 2s infinite ease-in-out;
    flex-shrink: 0;
}

.ps-terminal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(245,130,32,0.25) transparent;
}

    .ps-terminal-body::-webkit-scrollbar {
        width: 3px;
    }

    .ps-terminal-body::-webkit-scrollbar-thumb {
        background: rgba(245,130,32,0.2);
        border-radius: 2px;
    }

.ps-terminal-line {
    display: flex;
    gap: 6px;
    font-size: clamp(0.58rem, 0.76vw, 0.66rem);
    line-height: 1.4;
    animation: psTerminalLineIn 0.3s ease-out;
}

@keyframes psTerminalLineIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

.ps-terminal-tag {
    flex-shrink: 0;
    color: #F58220;
    font-weight: 700;
    opacity: 0.9;
}

.ps-terminal-line--system .ps-terminal-tag {
    color: #56C4F8;
}

.ps-terminal-line--strategy .ps-terminal-tag {
    color: #F58220;
}

.ps-terminal-line > span:last-child {
    color: rgba(255,255,255,0.82);
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.ps-terminal-line em {
    color: #ffffff;
    font-style: normal;
    font-weight: 700;
}

/* ── NARRATIVE — property identity card ────────────────────── */
.ps-narrative {
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(245,130,32,0.1) 0%, rgba(86,196,248,0.06) 100%);
    border: 1px solid rgba(245,130,32,0.24);
    border-radius: 12px;
    padding: clamp(9px, 1.1vh, 11px) clamp(10px, 1.1vw, 12px);
}

.ps-narrative-head {
    font-size: clamp(0.54rem, 0.72vw, 0.6rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #F58220;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ps-narrative-head i {
        font-size: 0.9em;
    }

.ps-narrative-text {
    margin: 0;
    font-size: clamp(0.66rem, 0.88vw, 0.74rem);
    line-height: 1.5;
    color: rgba(255,255,255,0.92);
    font-style: italic;
}

/* ============================================================
   RESPONSIVE — Scene 4 across device frames
   ============================================================ */

/* Tablet / mid-range: single column workbench + focus-mode tabs */
@media (max-width: 1024px) {
    .ps-scene-value > .ps-workbench-right {
        flex: 0 0 28% !important;
        min-width: 240px !important;
    }

    .ps-workbench-canvas {
        grid-template-columns: 1fr !important;
    }
}

/* Tablet portrait / small tablet — focus mode kicks in */
@media (max-width: 900px) {
    .ps-cluster-tabs {
        display: flex !important;
    }

    /* Only the active cluster is visible in focus mode */
    .ps-workbench-canvas .ps-cluster {
        display: none;
    }

        .ps-workbench-canvas .ps-cluster.is-focus {
            display: flex !important;
            animation: psClusterIn 0.32s cubic-bezier(0.25, 1, 0.5, 1);
        }

    @keyframes psClusterIn {
        from {
            opacity: 0;
            transform: translateY(8px);
        }

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

    /* Stack right rail BELOW left on tablet portrait */
    .ps-scene-value {
        flex-direction: column !important;
        overflow-y: auto !important;
    }

        .ps-scene-value > .ps-workbench-right {
            flex: 0 0 auto !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            height: auto !important;
            border-left: 0 !important;
            border-top: 1px solid rgba(245,130,32,0.18) !important;
            flex-direction: row !important;
            flex-wrap: wrap !important;
            gap: 10px !important;
            padding: 14px !important;
        }

    .ps-energy-core {
        flex: 0 0 auto !important;
        width: clamp(140px, 28vw, 180px) !important;
        max-height: 180px !important;
    }

    .ps-persona-bars {
        flex: 1 1 50% !important;
        min-width: 200px !important;
    }

    .ps-terminal {
        flex: 1 1 100% !important;
        min-height: 100px !important;
        max-height: 180px !important;
    }

    .ps-narrative {
        flex: 1 1 100% !important;
    }
}

/* Mobile — compact stack, focus-mode clusters */
@media (max-width: 768px) {
    .ps-workbench-left {
        padding: clamp(12px, 2.2vh, 16px) clamp(14px, 4vw, 18px) 0 !important;
    }

    .ps-workbench-top {
        flex-direction: column;
        gap: 10px;
    }

    .ps-tier-pill {
        align-self: flex-start;
    }

    .ps-workbench-canvas {
        padding-right: 0;
    }

    .ps-cluster {
        padding: 12px !important;
    }

    .ps-feat-chip {
        padding: 8px 12px 8px 10px !important;
        font-size: 0.76rem !important;
        min-height: 36px;
    }

        .ps-feat-chip i {
            font-size: 0.9em !important;
        }

    .ps-workbench-foot {
        position: sticky;
        bottom: 0;
        padding: 12px 0 calc(10px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 35%);
        z-index: 30;
    }

    .ps-workbench-nudge {
        display: none;
    }

    .ps-btn-ghost,
    .ps-btn-orb {
        flex: 1 1 0;
        justify-content: center;
        min-height: 44px;
    }

    .ps-scene-value > .ps-workbench-right {
        flex-direction: column !important;
    }

    .ps-energy-core {
        width: 100% !important;
        max-width: 200px !important;
        margin: 0 auto !important;
    }

    .ps-persona-bars {
        flex: 1 1 100% !important;
    }
}

/* Tiny phones */
@media (max-width: 400px) {
    .ps-cluster-tab {
        padding: 6px 10px !important;
        font-size: 0.68rem !important;
    }

        .ps-cluster-tab .ps-cluster-tab-name {
            display: none;
        }

    .ps-cluster-name {
        font-size: 0.88rem !important;
    }
}

/* Very short viewports — compact the core and terminal */
@media (max-height: 700px) and (min-width: 1025px) {
    .ps-energy-core {
        max-height: 150px !important;
    }

    .ps-terminal {
        min-height: 70px !important;
    }

    .ps-workbench-heading .ps-subtitle {
        display: none;
    }
}

/* ============================================================
   v14 — VALIDATION GATES + STEP 3 NAV ALIGNMENT FIX
   ============================================================ */

/* ── 1. STEP 3 NAV — pin to bottom of LEFT RAIL only ────────────
   Previous v9 pinned the nav across the FULL scene width, putting
   the Continue button in the bottom-right where the chatbot orb
   lives. The user's complaint: "Continue is close to chatbot icon."
   Fix: keep absolute positioning (so nav doesn't break the flex
   row layout that gives left=70% / twin=30%), but constrain it to
   the LEFT RAIL's horizontal space only. The Continue button now
   sits at the right edge of the workarea, NOT the right edge of
   the whole scene — well clear of the chatbot orb. */
@media (min-width: 769px) {
    .ps-scene#psScene2 > .ps-nav-dna,
    .ps-scene-dna > .ps-nav-dna {
        position: absolute !important;
        order: 3 !important;
        left: 0 !important;
        /* Leave the right ~32% (Digital Twin column) free —
           matches the .ps-right flex: 0 0 32% from v10 */
        right: 32% !important;
        bottom: 0 !important;
        z-index: 40 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: clamp(10px, 1.4vw, 16px) !important;
        padding: clamp(8px, 1vh, 12px) clamp(14px, 1.8vw, 22px) clamp(8px, 1vh, 12px) !important;
        margin: 0 !important;
        min-height: clamp(48px, 6.2vh, 58px) !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, #ffffff 40%, #ffffff 100%) !important;
        backdrop-filter: blur(8px) !important;
        border-top: 1px solid rgba(15,23,42,0.06) !important;
    }

    /* Restore the v9 flex layout — left rail + twin in a row */
    .ps-scene#psScene2,
    .ps-scene-dna {
        flex-wrap: nowrap !important;
    }

        /* Reserve padding for the absolute nav so workarea content
       doesn't get hidden underneath it */
        .ps-scene#psScene2 > .ps-dna-left,
        .ps-scene-dna > .ps-dna-left {
            padding-bottom: clamp(56px, 7.5vh, 70px) !important;
        }
}

/* On narrower desktops where the twin is closer to 30% and nav
   needs slightly more right inset to avoid overlapping it */
@media (min-width: 1025px) and (max-width: 1280px) {
    .ps-scene#psScene2 > .ps-nav-dna,
    .ps-scene-dna > .ps-nav-dna {
        right: 30% !important;
    }
}

/* ── 2. VALIDATION NUDGE in the Step 3 nav ──────────────────── */
.ps-dna-validation-nudge {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: clamp(0.66rem, 0.86vw, 0.74rem);
    line-height: 1.35;
    color: #64748B;
    padding: 0 clamp(6px, 1vw, 12px);
    transition: color 0.25s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .ps-dna-validation-nudge i {
        margin-right: 5px;
        font-size: 0.95em;
    }

    .ps-dna-validation-nudge strong {
        font-weight: 800;
        color: var(--sj-dark);
    }

    .ps-dna-validation-nudge.is-warn {
        color: #B4540A;
    }

        .ps-dna-validation-nudge.is-warn i {
            color: var(--sj-orange, #F58220);
        }

    .ps-dna-validation-nudge.is-ok {
        color: #047857;
    }

        .ps-dna-validation-nudge.is-ok i {
            color: #10B981;
        }

/* ── 3. CONTINUE BUTTON DISABLED / LOCKED STATE ─────────────── */
.ps-btn-next:disabled,
.ps-btn-next.is-locked {
    background: #E2E8F0 !important;
    color: #94A3B8 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    border-color: transparent !important;
    transform: none !important;
}

    .ps-btn-next:disabled:hover,
    .ps-btn-next.is-locked:hover {
        transform: none !important;
        box-shadow: none !important;
    }

/* Same for the Step 4 orb button */
.ps-btn-orb:disabled,
.ps-btn-orb.is-locked {
    background: #E2E8F0 !important;
    color: #94A3B8 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

    .ps-btn-orb:disabled:hover,
    .ps-btn-orb.is-locked:hover {
        transform: none !important;
        box-shadow: none !important;
    }

/* ── 4. INPUT-NEEDS HINT — required-but-empty fields glow ────── */
.ps-location-search.ps-input-needs {
    border-color: rgba(245, 130, 32, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.12) !important;
}

.ps-metric-tile.ps-metric-tile--needs {
    border-color: rgba(245, 130, 32, 0.45) !important;
    box-shadow: 0 0 0 1.5px rgba(245, 130, 32, 0.08), 0 4px 12px rgba(245, 130, 32, 0.1) !important;
}

    .ps-metric-tile.ps-metric-tile--needs::after {
        content: '';
        position: absolute;
        top: 4px;
        right: 4px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--sj-orange, #F58220);
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.18);
        pointer-events: none;
    }

.ps-metric-tile.ps-metric-tile--needs {
    position: relative;
}

/* Pulse animation when Continue is clicked while something's missing */
@keyframes psInputPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 130, 32, 0.5);
    }

    35% {
        box-shadow: 0 0 0 8px rgba(245, 130, 32, 0.18);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(245, 130, 32, 0);
    }
}

.ps-input-pulse {
    animation: psInputPulse 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 5. TERMINAL FEED — new tag types ───────────────────────── */
.ps-terminal-line--insight .ps-terminal-tag {
    color: #56C4F8;
}

.ps-terminal-line--release .ps-terminal-tag {
    color: #94A3B8;
}

.ps-terminal-line--market .ps-terminal-tag {
    color: #F59E0B;
}

.ps-terminal-line--insight strong {
    color: #ffffff;
    font-weight: 800;
}

/* ── 6. MOBILE NAV — keep nudge visible but compact ─────────── */
@media (max-width: 768px) {
    .ps-dna-validation-nudge {
        flex: 1 1 100%;
        order: 3;
        text-align: center;
        white-space: normal;
        padding: 6px 4px 0;
        font-size: 0.7rem;
        border-top: 1px dashed rgba(15, 23, 42, 0.08);
        margin-top: 4px;
    }

    .ps-scene#psScene2 .ps-nav-dna,
    .ps-scene-dna .ps-nav-dna {
        flex-wrap: wrap !important;
    }
}

/* On very narrow phones the nudge alone takes the row */
@media (max-width: 480px) {
    .ps-dna-validation-nudge {
        font-size: 0.66rem;
    }
}

/* ============================================================
   v15 — STEP 4 SWIMLANE REDESIGN + STEP 0/1 MOBILE POLISH
   ============================================================ */

/* ── Neutralize the v13 .ps-cluster card layout — replaced by
   the swimlane below. We keep the selectors flat-reset so any
   stale partial rendering can't bleed visually. */
.ps-cluster,
.ps-cluster-head,
.ps-cluster-icon,
.ps-cluster-meta,
.ps-cluster-name,
.ps-cluster-blurb,
.ps-cluster-pct,
.ps-chip-flow,
.ps-feat-chip,
.ps-feat-chip-label,
.ps-feat-chip-demand {
    all: unset;
    display: revert;
}

/* ============================================================
   SWIMLANE — horizontal persona stripe
   ------------------------------------------------------------
   Each persona is one stripe: a sticky-left header (icon + name +
   stat) and a horizontally-flowing track of feature chips. This
   replaces the old vertical card stacks — far denser, cleaner,
   and scales naturally to any viewport height.
   ============================================================ */

/* Canvas now stacks lanes vertically as a flex column, NOT a grid */
.ps-workbench-canvas {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: clamp(7px, 0.9vh, 10px) !important;
    padding: 2px 4px 2px 0;
}

.ps-swimlane {
    --cluster-tint: #F58220;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(15,23,42,0.06);
    border-left: 3px solid color-mix(in srgb, var(--cluster-tint) 30%, transparent);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    min-height: clamp(54px, 7.5vh, 68px);
}

    .ps-swimlane.is-active {
        border-left-color: var(--cluster-tint);
        box-shadow: 0 4px 14px color-mix(in srgb, var(--cluster-tint) 14%, transparent);
        background: rgba(255,255,255,0.85);
    }

    .ps-swimlane::before {
        /* subtle gradient wash from the tint side */
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, color-mix(in srgb, var(--cluster-tint) 5%, transparent) 0%, transparent 35%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .ps-swimlane.is-active::before {
        opacity: 1;
    }

/* ── LANE HEAD (left-pinned region) ─────────────────────────── */
.ps-lane-head {
    flex: 0 0 clamp(150px, 18vw, 200px);
    display: flex;
    align-items: center;
    gap: clamp(7px, 0.9vw, 10px);
    padding: clamp(7px, 1vh, 10px) clamp(8px, 1vw, 11px);
    background: linear-gradient(135deg, color-mix(in srgb, var(--cluster-tint) 6%, transparent) 0%, transparent 100%);
    border-right: 1px dashed color-mix(in srgb, var(--cluster-tint) 22%, transparent);
    position: relative;
    z-index: 1;
}

.ps-lane-icon {
    flex-shrink: 0;
    width: clamp(28px, 3vw, 32px);
    height: clamp(28px, 3vw, 32px);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cluster-tint) 14%, transparent);
    color: var(--cluster-tint);
    font-size: clamp(0.85rem, 1.05vw, 0.95rem);
    transition: all 0.3s ease;
}

.ps-swimlane.is-active .ps-lane-icon {
    background: var(--cluster-tint);
    color: #ffffff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--cluster-tint) 38%, transparent);
}

.ps-lane-meta {
    flex: 1;
    min-width: 0;
}

.ps-lane-name {
    font-size: clamp(0.72rem, 0.9vw, 0.8rem);
    font-weight: 800;
    color: var(--sj-dark);
    letter-spacing: -0.01em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-lane-blurb {
    font-size: clamp(0.56rem, 0.72vw, 0.62rem);
    color: #64748B;
    line-height: 1.25;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-lane-stat {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 36px;
}

.ps-lane-stat-num {
    font-size: clamp(0.66rem, 0.86vw, 0.74rem);
    font-weight: 900;
    color: var(--cluster-tint);
    letter-spacing: -0.02em;
    line-height: 1;
}

    .ps-lane-stat-num small {
        font-size: 0.72em;
        font-weight: 700;
        opacity: 0.55;
    }

.ps-lane-stat-bar {
    width: 32px;
    height: 3px;
    background: rgba(15,23,42,0.06);
    border-radius: 2px;
    overflow: hidden;
}

.ps-lane-stat-fill {
    height: 100%;
    background: var(--cluster-tint);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── LANE TRACK — horizontal chip flow ──────────────────────── */
.ps-lane-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 5px;
    padding: clamp(6px, 0.8vh, 8px) clamp(8px, 1vw, 12px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(245,130,32,0.2) transparent;
    /* Allow horizontal overflow on very narrow lanes — chips stay 1 line */
    flex-wrap: wrap;
}

    .ps-lane-track::-webkit-scrollbar {
        height: 3px;
    }

    .ps-lane-track::-webkit-scrollbar-thumb {
        background: rgba(245,130,32,0.2);
        border-radius: 2px;
    }

/* ── LANE CHIP — pill in a swimlane ─────────────────────────── */
.ps-lane-chip {
    --cluster-tint: #F58220;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 8px;
    border: 1.5px solid rgba(15,23,42,0.1);
    border-radius: 999px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    font-family: inherit;
    font-size: clamp(0.62rem, 0.78vw, 0.7rem);
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-swimlane .ps-lane-chip {
    --cluster-tint: var(--cluster-tint, #F58220);
}

/* Inherit tint from parent swimlane via CSS custom property */
.ps-swimlane[data-cluster] .ps-lane-track .ps-lane-chip {
    --cluster-tint: inherit;
}

.ps-lane-chip i {
    color: var(--cluster-tint);
    font-size: 0.85em;
    width: 14px;
    text-align: center;
}

.ps-lane-chip-label {
    letter-spacing: -0.01em;
}

.ps-lane-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--cluster-tint) 45%, transparent);
    background: color-mix(in srgb, var(--cluster-tint) 6%, #ffffff);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--cluster-tint) 18%, transparent);
}

.ps-lane-chip.selected {
    background: linear-gradient(135deg, var(--cluster-tint) 0%, color-mix(in srgb, var(--cluster-tint) 85%, #ffffff) 100%);
    border-color: var(--cluster-tint);
    color: #ffffff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cluster-tint) 32%, transparent);
}

    .ps-lane-chip.selected i {
        color: #ffffff;
    }

/* Micro-burst on select */
@keyframes psLaneChipBurst {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.07) translateY(-2px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.ps-lane-chip.ps-chip-burst {
    animation: psLaneChipBurst 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The legacy class name `ps-chip-burst` may also be added to old chips —
   ensure animation targets the new lane-chip class via the same name */

/* ── RESPONSIVE — tablet ───────────────────────────────────── */
@media (max-width: 1024px) {
    .ps-lane-head {
        flex-basis: clamp(130px, 22vw, 170px);
    }
}

/* ── MOBILE — collapse swimlane head on top of the track ───── */
@media (max-width: 768px) {
    .ps-swimlane {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
    }

    .ps-lane-head {
        flex: 0 0 auto;
        border-right: 0;
        border-bottom: 1px dashed color-mix(in srgb, var(--cluster-tint) 22%, transparent);
        padding: 9px 12px;
    }

    .ps-lane-blurb {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .ps-lane-track {
        padding: 8px 12px 10px;
        gap: 6px;
    }

    .ps-lane-chip {
        padding: 7px 12px 7px 10px;
        font-size: 0.74rem;
        min-height: 32px;
    }
}

/* ============================================================
   STEP 0 — premium mobile polish
   ============================================================ */

/* Mobile: stack heading + grid in a clean column, hide right rail */
@media (max-width: 768px) {
    /* FIX (Scene 1 nav mid-screen): the scene must NOT be the scroll
       container. It is a fixed-height flex column; the .ps-left fills it,
       its category grid scrolls internally, and the nav stays pinned at the
       bottom. (Previously the scene scrolled and .ps-left was height:auto /
       overflow:visible, which let the nav float wherever the content ended.) */
    .ps-scene#psScene0 {
        flex-direction: column !important;
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

        .ps-scene#psScene0 > .ps-left {
            flex: 1 1 auto !important;
            height: 100% !important;
            max-height: 100% !important;
            min-height: 0 !important;
            overflow: hidden !important;
            padding: clamp(14px, 2.5vh, 18px) clamp(14px, 4vw, 18px) 0 !important;
        }

        /* Hide the educational right rail on mobile — categories are
       self-explanatory; right rail content takes space we don't have */
        .ps-scene#psScene0 > .ps-right {
            display: none !important;
        }

        /* Heading compresses */
        .ps-scene#psScene0 .ps-question {
            font-size: clamp(1.15rem, 5.5vw, 1.45rem) !important;
            line-height: 1.18 !important;
            margin-bottom: 6px !important;
        }

        .ps-scene#psScene0 .ps-subtitle {
            font-size: clamp(0.78rem, 3.4vw, 0.88rem) !important;
            margin-bottom: clamp(12px, 2.5vh, 16px) !important;
        }

        /* Card grid tighter */
        .ps-scene#psScene0 .ps-cat-grid {
            gap: 9px !important;
            margin-bottom: 0 !important;
        }
}

/* Phones — single-column horizontal cards with bigger tap targets */
@media (max-width: 480px) {
    .ps-scene#psScene0 .ps-cat-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .ps-cat-card {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        min-height: 64px !important;
        text-align: left !important;
    }

        .ps-cat-card .ps-cat-icon {
            width: 40px !important;
            height: 40px !important;
            font-size: 1.15rem !important;
            flex-shrink: 0 !important;
        }

        .ps-cat-card .ps-cat-name,
        .ps-cat-card .ps-cat-meta {
            text-align: left !important;
        }

        .ps-cat-card .ps-cat-name {
            font-size: 0.92rem !important;
            font-weight: 800 !important;
        }

        .ps-cat-card .ps-cat-meta {
            font-size: 0.7rem !important;
        }

        /* Right-side chevron to feel like a modern picker */
        .ps-cat-card::before {
            content: '\F285' !important;
            font-family: 'bootstrap-icons' !important;
            position: absolute !important;
            right: 14px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            color: rgba(15, 23, 42, 0.18) !important;
            font-size: 1rem !important;
            background: transparent !important;
            opacity: 1 !important;
            inset: auto 14px auto auto !important;
            border-radius: 0 !important;
            width: auto !important;
            height: auto !important;
        }

        .ps-cat-card.selected::before {
            color: var(--sj-orange) !important;
        }

    /* Sticky bottom nav already handled by base; ensure it's contained */
    .ps-scene#psScene0 .ps-nav {
        margin-left: calc(-1 * clamp(14px, 4vw, 18px)) !important;
        margin-right: calc(-1 * clamp(14px, 4vw, 18px)) !important;
        padding-left: clamp(14px, 4vw, 18px) !important;
        padding-right: clamp(14px, 4vw, 18px) !important;
    }
}

/* ============================================================
   STEP 1 — premium mobile polish
   ============================================================ */
@media (max-width: 768px) {
    /* FIX (Scene 2 nav mid-screen): same model as Scene 1 above — the scene
       is a fixed-height flex column, .ps-left fills it and scrolls its own
       body, and the nav stays pinned at the bottom. */
    .ps-scene#psScene1 {
        flex-direction: column !important;
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

        .ps-scene#psScene1 > .ps-left {
            flex: 1 1 auto !important;
            height: 100% !important;
            max-height: 100% !important;
            min-height: 0 !important;
            overflow: hidden !important;
            padding: clamp(14px, 2.5vh, 18px) clamp(14px, 4vw, 18px) 0 !important;
        }

        /* Hide the right educational rail on mobile */
        .ps-scene#psScene1 > .ps-right {
            display: none !important;
        }

        /* Heading + subtitle */
        .ps-scene#psScene1 .ps-question {
            font-size: clamp(1.1rem, 5.4vw, 1.4rem) !important;
            line-height: 1.18 !important;
            margin-bottom: 6px !important;
        }

        .ps-scene#psScene1 .ps-subtitle {
            font-size: clamp(0.78rem, 3.4vw, 0.86rem) !important;
            margin-bottom: clamp(10px, 2vh, 14px) !important;
        }

        /* Subtype banner — show as a small pill at top */
        .ps-scene#psScene1 .ps-subtype-banner {
            margin-bottom: clamp(10px, 2vh, 14px) !important;
            padding: 10px 12px !important;
            border-radius: 12px !important;
        }
}

/* Phones — chips become big tap targets in 2 cols */
@media (max-width: 480px) {
    .ps-scene#psScene1 .ps-chip-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        flex-wrap: initial !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .ps-scene#psScene1 .ps-chip {
        padding: 14px 16px !important;
        border-radius: 12px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        text-align: left !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }

        /* Right chevron to indicate selectability */
        .ps-scene#psScene1 .ps-chip::after {
            content: '\F285';
            font-family: 'bootstrap-icons';
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(15, 23, 42, 0.18);
            font-size: 1rem;
        }

        .ps-scene#psScene1 .ps-chip.selected::after {
            content: '\F26A';
            color: #ffffff !important;
        }

    .ps-scene#psScene1 .ps-nav {
        margin-left: calc(-1 * clamp(14px, 4vw, 18px)) !important;
        margin-right: calc(-1 * clamp(14px, 4vw, 18px)) !important;
        padding-left: clamp(14px, 4vw, 18px) !important;
        padding-right: clamp(14px, 4vw, 18px) !important;
    }
}

/* ============================================================
   v16 — STEP 4 SWIMLANE → PREMIUM TABLE  (rev 4)
   ------------------------------------------------------------
   Rev 4 fixes:
   1. Column 1 still too narrow to fit full persona BLURBS in
      one line (e.g. "Growing families seeking space, safety
      and community" = 52 chars). Solution: widen column 1 a
      bit more AND allow the blurb to wrap to 2 lines so very
      long sentences breathe instead of being ellipsised.
   2. Selected chip showed white text on white background
      because v16 rev 3's chip background `rgba(255,255,255,
      0.95) !important` was overriding the .selected rule's
      colored background. Selected state now wins via more
      specific selector + !important.
   ============================================================ */

/* Outer canvas becomes the table wrapper */
.ps-workbench-canvas {
    /* Override v13/v15 gap so rows pack flush against each other */
    gap: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    overflow-y: auto !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.55) inset !important;
    position: relative !important;
}

    .ps-workbench-canvas::after {
        display: none !important;
    }

/* Each swimlane = 2-COLUMN GRID. Column 1 wider in rev 4. */
.ps-swimlane {
    display: grid !important;
    /* Column 1 wide enough for full persona name + 2-line blurb;
       column 2 still has the larger horizontal share. */
    grid-template-columns: clamp(260px, 32vw, 340px) 1fr !important;
    align-items: stretch !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* Slight bump in min-height so the 2-line blurb has room */
    min-height: clamp(54px, 7vh, 66px) !important;
    transition: background 0.22s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

    .ps-swimlane:nth-child(even) {
        background: rgba(15, 23, 42, 0.018) !important;
    }

    .ps-swimlane:last-child {
        border-bottom: 0 !important;
    }

    .ps-swimlane:hover {
        background: color-mix(in srgb, var(--cluster-tint) 4%, rgba(255,255,255,0.6)) !important;
    }

    .ps-swimlane.is-active {
        background: color-mix(in srgb, var(--cluster-tint) 7%, #ffffff) !important;
        box-shadow: none !important;
    }

        .ps-swimlane.is-active::before {
            content: '' !important;
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            bottom: 0 !important;
            right: auto !important;
            width: 3px !important;
            background: var(--cluster-tint) !important;
            opacity: 1 !important;
            pointer-events: none !important;
            z-index: 2 !important;
        }

/* ── COLUMN 1 (LANE HEAD) ────────────────────────────────── */
.ps-lane-head {
    flex: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(8px, 0.9vw, 11px) !important;
    padding: clamp(7px, 1vh, 10px) clamp(11px, 1.2vw, 14px) !important;
    background: transparent !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
}

.ps-lane-icon {
    flex-shrink: 0 !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--cluster-tint) 75%, #475569) !important;
    width: clamp(28px, 3vw, 32px) !important;
    height: clamp(28px, 3vw, 32px) !important;
    font-size: clamp(0.92rem, 1.08vw, 1.05rem) !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.ps-swimlane.is-active .ps-lane-icon {
    background: var(--cluster-tint) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cluster-tint) 40%, transparent) !important;
}

.ps-lane-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.ps-lane-name {
    font-size: clamp(0.74rem, 0.92vw, 0.82rem) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    color: var(--sj-dark) !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Blurb now WRAPS to 2 lines instead of being ellipsised on 1 */
.ps-lane-blurb {
    font-size: clamp(0.56rem, 0.72vw, 0.62rem) !important;
    line-height: 1.28 !important;
    margin-top: 2px !important;
    color: #64748B !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    max-width: 100% !important;
}

.ps-lane-stat {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.ps-lane-stat-num {
    font-size: clamp(0.62rem, 0.82vw, 0.7rem) !important;
    font-weight: 900 !important;
    color: var(--cluster-tint) !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

    .ps-lane-stat-num small {
        font-size: 0.72em !important;
        font-weight: 700 !important;
        opacity: 0.55 !important;
    }

.ps-lane-stat-bar {
    width: clamp(24px, 3vw, 32px) !important;
    height: 3px !important;
    background: rgba(15,23,42,0.06) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.ps-lane-stat-fill {
    height: 100% !important;
    background: var(--cluster-tint) !important;
    border-radius: 2px !important;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── COLUMN 2 (LANE TRACK) ────────────────────────────────── */
.ps-lane-track {
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: clamp(5px, 0.7vh, 7px) clamp(10px, 1.2vw, 14px) !important;
    background: transparent !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: center !important;
    gap: 5px !important;
    overflow: hidden !important;
}

/* DEFAULT chip background — only applies when NOT selected.
   Using :not(.selected) so the .selected rule below always wins
   without needing more !important specificity wars. */
.ps-lane-chip:not(.selected) {
    padding: 5px 11px !important;
    font-size: clamp(0.62rem, 0.78vw, 0.7rem) !important;
    border-width: 1px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #334155 !important;
}

/* Padding/sizing applies to ALL chips, but background only to default */
.ps-lane-chip {
    padding: 5px 11px !important;
    font-size: clamp(0.62rem, 0.78vw, 0.7rem) !important;
    border-width: 1px !important;
}

    /* Hide the chip icon entirely — col 1 icon represents the category */
    .ps-lane-chip i {
        display: none !important;
    }

    .ps-lane-chip:hover:not(.selected) {
        transform: translateY(-1px) !important;
        background: color-mix(in srgb, var(--cluster-tint) 6%, #ffffff) !important;
        border-color: color-mix(in srgb, var(--cluster-tint) 45%, transparent) !important;
    }

    /* SELECTED state — solid tint background, white text. Force-win
   over the v16 default background using !important on every prop
   that the default rule sets. */
    .ps-lane-chip.selected {
        background: linear-gradient(135deg, var(--cluster-tint) 0%, color-mix(in srgb, var(--cluster-tint) 85%, #ffffff) 100%) !important;
        border-color: var(--cluster-tint) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--cluster-tint) 32%, transparent) !important;
    }

        .ps-lane-chip.selected .ps-lane-chip-label {
            color: #ffffff !important;
        }

        .ps-lane-chip.selected:hover {
            transform: translateY(-1px) !important;
            background: linear-gradient(135deg, var(--cluster-tint) 0%, color-mix(in srgb, var(--cluster-tint) 90%, #ffffff) 100%) !important;
        }

/* ── RESPONSIVE — tablet ───────────────────────────────────── */
@media (max-width: 1024px) {
    .ps-swimlane {
        grid-template-columns: clamp(220px, 34vw, 280px) 1fr !important;
    }
}

/* ── MOBILE — table collapses; rows revert to stacked card look */
@media (max-width: 768px) {
    .ps-workbench-canvas {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        gap: 8px !important;
    }

    .ps-swimlane {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        background: rgba(255, 255, 255, 0.85) !important;
        border: 1px solid rgba(15, 23, 42, 0.06) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

        .ps-swimlane:nth-child(even) {
            background: rgba(255, 255, 255, 0.85) !important;
        }

        .ps-swimlane.is-active {
            border-color: color-mix(in srgb, var(--cluster-tint) 40%, transparent) !important;
            background: color-mix(in srgb, var(--cluster-tint) 5%, #ffffff) !important;
        }

            .ps-swimlane.is-active::before {
                width: 3px !important;
                border-radius: 12px 0 0 12px !important;
            }

    .ps-lane-head {
        width: auto !important;
        border-right: 0 !important;
        border-bottom: 1px dashed color-mix(in srgb, var(--cluster-tint) 22%, transparent) !important;
        padding: 9px 12px !important;
    }
}

/* ============================================================
   v17 — MOBILE-APP EXPERIENCE + STEP 0 DESKTOP POLISH + FARM FIX
   ------------------------------------------------------------
   1. Homestead label truncation on farm DNA — widen tile min
      width and relax single-word label rule.
   2. Step 0 desktop — premium category cards with gradient icon
      bubbles, hover micro-animation, cleaner accent.
   3. Step 0 mobile — true mobile-app list view with iconography,
      title + subtitle, chevron right, selected state.
   4. Step 1/2/3 mobile — nav buttons pinned to viewport bottom
      with safe-area padding, content reserves space above.
   5. Smooth tap states on mobile (scale micro-bounce on press).
   ============================================================ */

/* ── 1. FARM DNA — "Homestead" label no longer truncates ─────
   The 2-line clamp was being applied too aggressively on farm's
   narrow tile grid. Farm's Homestead section only has 2 items,
   so give each tile enough breathing room for a single-word
   label like "Homestead" to render fully. */
.ps-dna-panel-metrics .ps-metric-tile[data-field="floorSize"] .ps-dna-label,
.ps-dna-panel-metrics .ps-metric-tile[data-field="erfSize"] .ps-dna-label,
.ps-dna-panel-metrics .ps-metric-tile[data-field="beds"] .ps-dna-label {
    /* Short labels like "Homestead", "Rooms", "Farm Extent" should never
       ellipsis-truncate. Allow them to shrink font + wrap if space is
       genuinely tight rather than getting clipped. */
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* When the farm tile has only one or two fields, widen them */
.ps-scene#psScene2 .ps-dna-panel-metrics .ps-dna-grid,
.ps-scene-dna .ps-dna-panel-metrics .ps-dna-grid {
    grid-auto-rows: auto !important;
}

/* Farm / vacant-land tiles get a bit more room per tile */
.ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile,
.ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile {
    min-width: 0 !important;
    overflow: hidden !important;
}

    /* The size-input wrapper takes the tail of the tile — ensure
       it doesn't starve the label */
    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-size-input,
    .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-size-input {
        flex-shrink: 0 !important;
        max-width: 45% !important;
    }

    /* Label takes priority over the input */
    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label,
    .ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

/* ============================================================
   2. STEP 0 DESKTOP — premium category cards
   ------------------------------------------------------------
   Upgrade the category picker from "flat 3x3 grid" to something
   that signals premium: gradient icon bubbles, soft shadows,
   animated hover, clean accent bar on selected.
   ============================================================ */
@media (min-width: 769px) {
    .ps-scene#psScene0 .ps-cat-card {
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.06) !important;
        border-radius: 16px !important;
        padding: clamp(13px, 1.6vh, 18px) clamp(11px, 1.3vw, 15px) !important;
        gap: clamp(8px, 1.1vh, 11px) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease, border-color 0.22s ease !important;
        position: relative !important;
        overflow: hidden !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    }

        /* Gradient "lifted" bubble for the icon */
        .ps-scene#psScene0 .ps-cat-card .ps-cat-icon {
            width: clamp(42px, 4.6vw, 50px) !important;
            height: clamp(42px, 4.6vw, 50px) !important;
            border-radius: 14px !important;
            background: linear-gradient(135deg, rgba(245, 130, 32, 0.15) 0%, rgba(245, 130, 32, 0.05) 100%) !important;
            color: var(--sj-orange, #F58220) !important;
            border: 1px solid rgba(245, 130, 32, 0.12) !important;
            font-size: clamp(1.1rem, 1.4vw, 1.35rem) !important;
            transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
            box-shadow: 0 2px 6px rgba(245, 130, 32, 0.08) !important;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-name {
            font-size: clamp(0.84rem, 1vw, 0.92rem) !important;
            font-weight: 800 !important;
            letter-spacing: -0.01em !important;
            margin-top: clamp(2px, 0.3vh, 4px) !important;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-meta {
            font-size: clamp(0.66rem, 0.8vw, 0.72rem) !important;
            color: #64748B !important;
        }

        /* Soft wash that appears on hover */
        .ps-scene#psScene0 .ps-cat-card::before {
            content: '' !important;
            position: absolute !important;
            inset: 0 !important;
            background: radial-gradient(ellipse at top, rgba(245, 130, 32, 0.06) 0%, transparent 60%) !important;
            opacity: 0 !important;
            transition: opacity 0.28s ease !important;
            pointer-events: none !important;
            border-radius: 16px !important;
        }

        .ps-scene#psScene0 .ps-cat-card:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 12px 28px rgba(245, 130, 32, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05) !important;
            border-color: rgba(245, 130, 32, 0.22) !important;
        }

            .ps-scene#psScene0 .ps-cat-card:hover::before {
                opacity: 1 !important;
            }

            .ps-scene#psScene0 .ps-cat-card:hover .ps-cat-icon {
                background: linear-gradient(135deg, var(--sj-orange, #F58220) 0%, #F97316 100%) !important;
                color: #ffffff !important;
                border-color: transparent !important;
                transform: scale(1.06) !important;
                box-shadow: 0 8px 18px rgba(245, 130, 32, 0.35) !important;
            }

        /* Selected — keep the gradient bubble filled, subtle accent bar at bottom */
        .ps-scene#psScene0 .ps-cat-card.selected {
            border-color: var(--sj-orange, #F58220) !important;
            box-shadow: 0 10px 24px rgba(245, 130, 32, 0.18), 0 0 0 3px rgba(245, 130, 32, 0.08) !important;
            background: linear-gradient(180deg, #ffffff 0%, rgba(245, 130, 32, 0.04) 100%) !important;
        }

            .ps-scene#psScene0 .ps-cat-card.selected::before {
                opacity: 1 !important;
            }

            .ps-scene#psScene0 .ps-cat-card.selected .ps-cat-icon {
                background: linear-gradient(135deg, var(--sj-orange, #F58220) 0%, #F97316 100%) !important;
                color: #ffffff !important;
                border-color: transparent !important;
                box-shadow: 0 8px 18px rgba(245, 130, 32, 0.35) !important;
            }

            .ps-scene#psScene0 .ps-cat-card.selected .ps-cat-name {
                color: var(--sj-orange-dark, #B4540A) !important;
            }
}

/* ============================================================
   3. STEP 0 MOBILE — true mobile-app list view
   ------------------------------------------------------------
   At ≤480px, the picker becomes a native-feeling iOS/Android
   style list: tinted icon bubble on the left, title + subtitle
   stacked, chevron on the right, full-width tap target. Each
   row has a subtle shadow, rounded corners, and active-press
   scale feedback.
   ============================================================ */
@media (max-width: 480px) {
    /* Override the v15 list style with a more polished rendition */
    .ps-scene#psScene0 .ps-cat-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        grid-template-columns: none !important;
    }

    .ps-scene#psScene0 .ps-cat-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 14px 48px 14px 14px !important;
        min-height: 72px !important;
        text-align: left !important;
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.06) !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
        position: relative !important;
        transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease !important;
    }

        /* Press feedback (haptic-like) */
        .ps-scene#psScene0 .ps-cat-card:active {
            transform: scale(0.985) !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
        }

        /* Gradient icon bubble on the left */
        .ps-scene#psScene0 .ps-cat-card .ps-cat-icon {
            width: 46px !important;
            height: 46px !important;
            border-radius: 12px !important;
            flex-shrink: 0 !important;
            background: linear-gradient(135deg, rgba(245, 130, 32, 0.15) 0%, rgba(245, 130, 32, 0.05) 100%) !important;
            color: var(--sj-orange, #F58220) !important;
            border: 1px solid rgba(245, 130, 32, 0.12) !important;
            font-size: 1.2rem !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 2px 6px rgba(245, 130, 32, 0.08) !important;
        }

        /* Stack name + meta on the right of the icon */
        .ps-scene#psScene0 .ps-cat-card > :not(.ps-cat-icon):not(::before):not(::after) {
            flex: 1 !important;
            min-width: 0 !important;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-name {
            font-size: 1rem !important;
            font-weight: 700 !important;
            color: var(--sj-dark) !important;
            text-align: left !important;
            line-height: 1.22 !important;
            letter-spacing: -0.01em !important;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-meta {
            font-size: 0.75rem !important;
            color: #94A3B8 !important;
            text-align: left !important;
            font-weight: 500 !important;
            margin-top: 2px !important;
        }

        /* Chevron — positioned on the far right */
        .ps-scene#psScene0 .ps-cat-card::before {
            content: '\F285' !important;
            font-family: 'bootstrap-icons' !important;
            position: absolute !important;
            right: 18px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            color: rgba(15, 23, 42, 0.2) !important;
            font-size: 1.1rem !important;
            background: transparent !important;
            opacity: 1 !important;
            inset: auto 18px auto auto !important;
            border-radius: 0 !important;
            width: auto !important;
            height: auto !important;
            transition: transform 0.22s ease, color 0.22s ease !important;
        }

        /* Selected state — filled bubble, tinted background, checkmark */
        .ps-scene#psScene0 .ps-cat-card.selected {
            background: linear-gradient(180deg, #ffffff 0%, rgba(245, 130, 32, 0.05) 100%) !important;
            border-color: var(--sj-orange, #F58220) !important;
            box-shadow: 0 6px 18px rgba(245, 130, 32, 0.15) !important;
        }

            .ps-scene#psScene0 .ps-cat-card.selected .ps-cat-icon {
                background: linear-gradient(135deg, var(--sj-orange, #F58220) 0%, #F97316 100%) !important;
                color: #ffffff !important;
                border-color: transparent !important;
                box-shadow: 0 4px 12px rgba(245, 130, 32, 0.35) !important;
            }

            .ps-scene#psScene0 .ps-cat-card.selected::before {
                content: '\F26B' !important; /* bi-check2 */
                color: var(--sj-orange, #F58220) !important;
                font-weight: 700 !important;
            }

            .ps-scene#psScene0 .ps-cat-card.selected .ps-cat-name {
                color: var(--sj-orange-dark, #B4540A) !important;
            }
}

/* ============================================================
   4. MOBILE APP NAV — pin nav buttons to viewport bottom
   ------------------------------------------------------------
   The base `.ps-nav` uses `position: sticky`. On short content
   that doesn't scroll, sticky doesn't pin — the nav ends up
   wherever the content ended. On mobile we want ALWAYS-visible
   navigation at the bottom edge, like a mobile app's tab bar.
   ============================================================ */
@media (max-width: 768px) {
    /* Each scene is height:100% of the track and acts as a positioning
       container. The nav is positioned ABSOLUTE within its own scene so
       it pins to the bottom of ONLY that scene's slot — not stacked at
       the viewport bottom with every other scene's nav. No `.active`
       class dependency (the codebase uses transform-based scene
       switching, not class toggles). */
    .ps-scene {
        position: relative !important;
    }

        .ps-scene > .ps-nav,
        .ps-scene > .ps-nav-dna,
        .ps-scene .ps-left > .ps-nav,
        .ps-scene .ps-dna-left > .ps-nav-dna {
            position: absolute !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            margin: 0 !important;
            padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
            background: rgba(255, 255, 255, 0.98) !important;
            backdrop-filter: blur(14px) saturate(1.2) !important;
            -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
            border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
            box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.06) !important;
            z-index: 100 !important;
            display: flex !important;
            gap: 10px !important;
            align-items: center !important;
            justify-content: space-between !important;
            width: auto !important;
        }

        /* Nav buttons — split 50/50 with 48px min tap target */
        .ps-scene .ps-nav .ps-btn-back,
        .ps-scene .ps-nav .ps-btn-next,
        .ps-scene .ps-nav-dna .ps-btn-back,
        .ps-scene .ps-nav-dna .ps-btn-next {
            flex: 1 1 0 !important;
            min-height: 48px !important;
            padding: 12px 16px !important;
            font-size: 0.92rem !important;
            font-weight: 700 !important;
            justify-content: center !important;
            border-radius: 12px !important;
            transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

            .ps-scene .ps-nav .ps-btn-back:active,
            .ps-scene .ps-nav .ps-btn-next:active,
            .ps-scene .ps-nav-dna .ps-btn-back:active,
            .ps-scene .ps-nav-dna .ps-btn-next:active {
                transform: scale(0.97) !important;
            }

        /* Content column reserves space above the pinned nav */
        .ps-scene > .ps-left,
        .ps-scene .ps-dna-left {
            padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        }

    .ps-scene-dna > .ps-dna-left {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Validation nudge hidden on mobile — button state is enough */
    .ps-dna-validation-nudge {
        display: none !important;
    }
}

/* ============================================================
   5. MOBILE APP — smooth scene transitions + scrolling
   ------------------------------------------------------------
   Ensure every scene on mobile uses momentum scrolling, hides
   its scrollbar (native-app feel), and transitions cleanly.
   ============================================================ */
@media (max-width: 768px) {
    .ps-scene {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }

        .ps-scene > .ps-left::-webkit-scrollbar {
            display: none !important;
        }

        .ps-scene > .ps-left {
            scrollbar-width: none !important;
        }

        /* Big tappable buttons everywhere */
        .ps-scene button,
        .ps-scene .ps-btn-back,
        .ps-scene .ps-btn-next,
        .ps-scene .ps-btn-orb,
        .ps-scene .ps-btn-ghost {
            min-height: 44px !important;
        }

        /* Headings breathe a bit more on mobile */
        .ps-scene .ps-question {
            line-height: 1.2 !important;
        }
}

/* ============================================================
   6. STEP 1 MOBILE — chip refinements for app feel
   ============================================================ */
@media (max-width: 480px) {
    .ps-scene#psScene1 .ps-chip {
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
        transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease !important;
    }

        .ps-scene#psScene1 .ps-chip:active {
            transform: scale(0.985) !important;
        }

        .ps-scene#psScene1 .ps-chip.selected {
            box-shadow: 0 6px 18px rgba(245, 130, 32, 0.25) !important;
        }
}

/* ============================================================
   7. VALIDATION NUDGE on desktop — keep visible but lift on
   mobile since the pinned nav already communicates state.
   ============================================================ */
@media (min-width: 769px) {
    .ps-dna-validation-nudge {
        display: block !important;
    }
}

/* ============================================================
   v18 — STEP 0 MOBILE COMPACT + MOBILE NAV FIX + FILTER.JS POLISH
   ------------------------------------------------------------
   1. Step 0 mobile: all 9 categories visible in one viewport on
      standard phones (375×667 iPhone SE through 414×896 iPhone
      Pro Max). Tighter rows with iconography still readable.
   2. Step 1 mobile: same — reduce subtitle/heading spacing.
   ============================================================ */

/* Step 0 mobile — FIT ALL 9 CATEGORIES IN ONE VIEWPORT */
@media (max-width: 480px) {
    /* Tighter heading block to maximise vertical real-estate */
    .ps-scene#psScene0 .ps-left {
        padding: 10px 14px calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .ps-scene#psScene0 .ps-progress {
        margin-bottom: 6px !important;
    }

    .ps-scene#psScene0 .ps-scene-label {
        font-size: 0.65rem !important;
        margin-bottom: 4px !important;
        padding: 3px 8px !important;
    }

    .ps-scene#psScene0 .ps-question {
        font-size: 1.1rem !important;
        line-height: 1.15 !important;
        margin: 0 0 4px 0 !important;
    }

    /* Subtitle clamps to 2 lines on mobile — the long SA paragraph
       eats half the viewport otherwise */
    .ps-scene#psScene0 .ps-subtitle {
        font-size: 0.72rem !important;
        line-height: 1.32 !important;
        margin-bottom: 10px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: #64748B !important;
    }

    /* Cards — compact rows that collectively fit 9 in one viewport.
       At ~58px min-height × 9 + 8×8px gaps = 586px. Combined with
       heading block (~90px) and nav (~80px) we fit in 750-760px,
       which works for all common phone portraits 667-896px tall. */
    .ps-scene#psScene0 .ps-cat-grid {
        gap: 8px !important;
    }

    .ps-scene#psScene0 .ps-cat-card {
        padding: 10px 44px 10px 11px !important;
        min-height: 58px !important;
        gap: 12px !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-icon {
            width: 38px !important;
            height: 38px !important;
            font-size: 1.05rem !important;
            border-radius: 10px !important;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-name {
            font-size: 0.9rem !important;
            line-height: 1.18 !important;
            font-weight: 700 !important;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-meta {
            font-size: 0.67rem !important;
            margin-top: 1px !important;
            line-height: 1.25 !important;
        }

        .ps-scene#psScene0 .ps-cat-card::before {
            right: 14px !important;
            inset: auto 14px auto auto !important;
            font-size: 0.95rem !important;
        }
}

/* Even tighter for very small devices (iPhone SE 1st gen @ 320w, etc) */
@media (max-width: 360px) {
    .ps-scene#psScene0 .ps-cat-card {
        min-height: 54px !important;
        padding: 9px 40px 9px 10px !important;
        gap: 10px !important;
    }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-icon {
            width: 34px !important;
            height: 34px !important;
            font-size: 0.95rem !important;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-name {
            font-size: 0.86rem !important;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-meta {
            font-size: 0.62rem !important;
        }
}

/* Step 1 mobile — tighten heading so chip rows get real estate */
@media (max-width: 480px) {
    .ps-scene#psScene1 .ps-left {
        padding: 10px 14px calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .ps-scene#psScene1 .ps-scene-label {
        font-size: 0.65rem !important;
        padding: 3px 8px !important;
        margin-bottom: 4px !important;
    }

    .ps-scene#psScene1 .ps-question {
        font-size: 1.1rem !important;
        line-height: 1.15 !important;
        margin: 0 0 4px 0 !important;
    }

    .ps-scene#psScene1 .ps-subtitle {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
}

/* ============================================================
   v19 — CRITICAL FIXES + MOBILE APP POLISH + JEWELRY ICONS
   ============================================================
   Fix 1: Step 1/2 mobile nav drift — .ps-left had position:relative
          which made it the positioned ancestor of the absolute nav,
          causing nav to scroll with the content. Neutralise on mobile
          so the nav anchors to .ps-scene (stationary) instead.
   Fix 2: Mobile breadcrumb pill on Steps 1,2,3,4 showing what was
          chosen previously (role → category → type).
   Fix 3: Step 4 feature chips — premium pressed-in/pressed-out 3D
          effect using inset+outset box-shadow.
   Fix 4: Step 4 tier pill — refined ring-and-gem jewelry design.
   ============================================================ */

@media (max-width: 768px) {
    /* ── NAV FIX ─────────────────────────────────────────────
       Force .ps-left to be NON-positioned so nav's `position:
       absolute; bottom: 0` anchors to .ps-scene (stationary),
       not the scrolling .ps-left. This is the single line that
       unblocks Step 1 and Step 2 nav pinning on mobile. */
    .ps-scene > .ps-left,
    .ps-scene .ps-dna-left {
        position: static !important;
    }

    /* The scene IS the positioned ancestor for nav */
    .ps-scene {
        position: relative !important;
        overflow: hidden !important; /* clip nav shadow to scene */
    }
}

/* ============================================================
   v19.2 — STEP 4 JEWELRY SVG ICONS + PRESSED BUTTON EFFECT
   ============================================================ */

/* Feature chip — refined pressed-in / pressed-out 3D effect.
   Default (unselected) = raised, with a soft elevated shadow.
   Hover = lifts further. Selected = pressed INTO the surface
   with an inset shadow and darker tint. This signals state
   tactilely the way physical controls do. */

.ps-lane-chip:not(.selected) {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(15, 23, 42, 0.03) inset, 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04) !important;
    transform: translateY(0) !important;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background 0.2s ease !important;
}

    .ps-lane-chip:not(.selected):hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 4px 8px rgba(15, 23, 42, 0.08), 0 8px 16px rgba(245, 130, 32, 0.12) !important;
        border-color: color-mix(in srgb, var(--cluster-tint) 40%, transparent) !important;
        background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--cluster-tint) 3%, #ffffff) 100%) !important;
    }

    .ps-lane-chip:not(.selected):active {
        transform: translateY(1px) !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) inset, 0 1px 1px rgba(15, 23, 42, 0.04) !important;
        transition: transform 0.08s, box-shadow 0.08s !important;
    }

.ps-lane-chip.selected {
    background: linear-gradient(180deg, color-mix(in srgb, var(--cluster-tint) 92%, #000) 0%, var(--cluster-tint) 100%) !important;
    border-color: color-mix(in srgb, var(--cluster-tint) 80%, #000) !important;
    color: #ffffff !important;
    /* PRESSED-IN: inset shadows simulate indentation */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset, 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 1px 0 color-mix(in srgb, var(--cluster-tint) 60%, #000) !important;
    transform: translateY(0) !important;
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s ease !important;
}

    .ps-lane-chip.selected:hover {
        background: linear-gradient(180deg, color-mix(in srgb, var(--cluster-tint) 88%, #000) 0%, color-mix(in srgb, var(--cluster-tint) 96%, #fff) 100%) !important;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
    }

    .ps-lane-chip.selected:active {
        transform: translateY(1px) scale(0.98) !important;
    }

    .ps-lane-chip.selected .ps-lane-chip-label {
        color: #ffffff !important;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    }

/* Tier pill — jewelry ring style */
.ps-tier-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 14px 7px 9px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 6px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: #0F172A !important;
}

    .ps-tier-pill .ps-tier-gem {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* ============================================================
   v19.3 — MOBILE BREADCRUMB PILL
   ============================================================ */
.ps-breadcrumb {
    display: none;
}

@media (max-width: 768px) {
    .ps-breadcrumb {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 0 8px 0 !important;
        padding: 6px 10px 6px 6px !important;
        background: linear-gradient(135deg, rgba(245, 130, 32, 0.08) 0%, rgba(245, 130, 32, 0.03) 100%) !important;
        border: 1px solid rgba(245, 130, 32, 0.18) !important;
        border-radius: 999px !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        color: var(--sj-orange-dark, #B4540A) !important;
        width: fit-content !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .ps-breadcrumb-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--sj-orange, #F58220);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
    }

    .ps-breadcrumb-text {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: -0.005em;
    }

    .ps-breadcrumb-chevron {
        flex-shrink: 0;
        color: rgba(245, 130, 32, 0.5);
        font-size: 0.65rem;
        margin: 0 2px;
    }
}

/* ============================================================
   v19.4 — STEP 2 (PROPERTY TYPE) MOBILE IMAGE POLISH
   ============================================================ */
@media (max-width: 768px) {
    /* Subtype banner — full-width hero card on mobile */
    .ps-scene#psScene1 .ps-subtype-banner {
        margin-top: 12px !important;
        margin-bottom: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
        border: 1px solid rgba(15, 23, 42, 0.06) !important;
        aspect-ratio: 16 / 9 !important;
        /* background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%) !important;*/
    }

    .ps-scene#psScene1 .ps-subtype-banner-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .ps-scene#psScene1 .ps-subtype-banner-placeholder {
        width: 100% !important;
        height: 100% !important;
        /* display: flex !important;*/
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        color: #94A3B8 !important;
        /* background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%) !important;*/
    }

        .ps-scene#psScene1 .ps-subtype-banner-placeholder i {
            font-size: 2rem !important;
            opacity: 0.4 !important;
        }

        .ps-scene#psScene1 .ps-subtype-banner-placeholder span {
            font-size: 0.85rem !important;
            font-weight: 700 !important;
            color: #475569 !important;
        }
}

/* ============================================================
   v19.5 — SELLER JOURNEY CARDS — MOBILE COLLAGE LAYOUT
   ============================================================
   Inspired by the alternating image/text grid aesthetic.
   On mobile, the 3 cards stack vertically with EACH card
   rendered as a premium split layout: icon side + text side.
   Adjacent cards alternate which side carries the icon, and
   subtle background tints create the collage rhythm.
   Applied via :nth-child(n) selectors.
   ============================================================ */
@media (max-width: 768px) {
    .sj-theater-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 0 4px !important;
    }

    .sj-theater-card {
        width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        flex: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(15, 23, 42, 0.06) !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06) !important;
        transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease !important;
    }

        .sj-theater-card:active {
            transform: scale(0.985) !important;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
        }

        .sj-theater-card .sj-tc-inner {
            display: grid !important;
            grid-template-columns: 128px 1fr !important;
            grid-template-rows: auto !important;
            gap: 0 !important;
            padding: 0 !important;
            min-height: 180px !important;
        }

        /* Alternate the icon side for visual rhythm (collage feel) */
        .sj-theater-card:nth-child(even) .sj-tc-inner {
            grid-template-columns: 1fr 128px !important;
        }

        .sj-theater-card:nth-child(even) .sj-tc-icon-wrap {
            grid-column: 2 !important;
            grid-row: 1 !important;
        }

        .sj-theater-card:nth-child(even) .sj-tc-label,
        .sj-theater-card:nth-child(even) .sj-tc-title,
        .sj-theater-card:nth-child(even) .sj-tc-desc,
        .sj-theater-card:nth-child(even) .sj-tc-tags,
        .sj-theater-card:nth-child(even) .sj-tc-cta {
            grid-column: 1 !important;
        }

        /* Icon wrap — left/right side of card as a tinted panel */
        .sj-theater-card .sj-tc-icon-wrap {
            grid-column: 1 !important;
            grid-row: 1 / span 5 !important;
            align-self: stretch !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-height: 100% !important;
            margin: 0 !important;
            padding: 18px !important;
            background: linear-gradient(135deg, var(--sj-tc-bg-1, rgba(245, 130, 32, 0.08)) 0%, var(--sj-tc-bg-2, rgba(245, 130, 32, 0.02)) 100%) !important;
        }

        .sj-theater-card.sj-tc--private .sj-tc-icon-wrap {
            --sj-tc-bg-1: rgba(245, 130, 32, 0.12);
            --sj-tc-bg-2: rgba(245, 130, 32, 0.03);
        }

        .sj-theater-card.sj-tc--agent .sj-tc-icon-wrap {
            --sj-tc-bg-1: rgba(86, 196, 248, 0.14);
            --sj-tc-bg-2: rgba(86, 196, 248, 0.04);
        }

        .sj-theater-card.sj-tc--agency .sj-tc-icon-wrap {
            --sj-tc-bg-1: rgba(10, 191, 188, 0.14);
            --sj-tc-bg-2: rgba(10, 191, 188, 0.04);
        }

        .sj-theater-card .sj-tc-icon-wrap svg {
            width: 72px !important;
            height: 72px !important;
            max-width: 100% !important;
        }

        /* Text side */
        .sj-theater-card .sj-tc-label {
            grid-column: 2 !important;
            grid-row: 1 !important;
            margin: 14px 16px 0 16px !important;
            font-size: 0.62rem !important;
            letter-spacing: 0.14em !important;
            padding: 0 !important;
            background: none !important;
            border: none !important;
            color: var(--sj-muted, #64748B) !important;
            font-weight: 800 !important;
        }

        .sj-theater-card .sj-tc-title {
            grid-column: 2 !important;
            grid-row: 2 !important;
            margin: 4px 16px 0 16px !important;
            font-size: 1.05rem !important;
            line-height: 1.18 !important;
            font-weight: 800 !important;
            color: #1A1D20 !important;
            letter-spacing: -0.015em !important;
        }

            .sj-theater-card .sj-tc-title br {
                display: none !important;
            }

        .sj-theater-card .sj-tc-desc {
            grid-column: 2 !important;
            grid-row: 3 !important;
            margin: 6px 16px 0 16px !important;
            font-size: 0.72rem !important;
            line-height: 1.42 !important;
            color: #64748B !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 3 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }

        .sj-theater-card .sj-tc-tags {
            display: none !important; /* too busy on mobile */
        }

        .sj-theater-card .sj-tc-cta {
            grid-column: 2 !important;
            grid-row: 4 !important;
            margin: 10px 16px 14px 16px !important;
            padding: 10px 14px !important;
            border-radius: 10px !important;
            background: #F58220 !important;
            color: #ffffff !important;
            font-weight: 700 !important;
            font-size: 0.82rem !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
            width: fit-content !important;
            box-shadow: 0 4px 12px rgba(245, 130, 32, 0.35) !important;
        }

        .sj-theater-card.sj-tc--agent .sj-tc-cta {
            background: #56C4F8 !important;
            box-shadow: 0 4px 12px rgba(86, 196, 248, 0.35) !important;
        }

        .sj-theater-card.sj-tc--agency .sj-tc-cta {
            background: #0ABFBC !important;
            box-shadow: 0 4px 12px rgba(10, 191, 188, 0.35) !important;
        }

        /* Disable the desktop hover/glass/shimmer flourishes on mobile */
        .sj-theater-card .sj-tc-glass,
        .sj-theater-card .sj-tc-mouse-glow,
        .sj-theater-card .sj-tc-border-shimmer {
            display: none !important;
        }
}

/* ============================================================
   v19.6 — SVG JEWELRY ICON SUPPORT
   ============================================================ */

/* Lane head — now renders an inline SVG instead of a bootstrap icon */
.ps-lane-icon.ps-lane-icon-svg {
    padding: 0 !important;
}

    .ps-lane-icon.ps-lane-icon-svg svg {
        width: 70% !important;
        height: 70% !important;
        display: block;
    }

        .ps-lane-icon.ps-lane-icon-svg svg path,
        .ps-lane-icon.ps-lane-icon-svg svg circle,
        .ps-lane-icon.ps-lane-icon-svg svg rect,
        .ps-lane-icon.ps-lane-icon-svg svg ellipse {
            stroke-width: 1.6;
        }

/* Tier pill icon holds an SVG gem */
.ps-tier-pill-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
    color: var(--tier-accent, #B08968);
}

.ps-tier-pill[data-tier="bronze"] {
    --tier-accent: #B08968;
}

.ps-tier-pill[data-tier="silver"] {
    --tier-accent: #94A3B8;
}

.ps-tier-pill[data-tier="gold"] {
    --tier-accent: #F59E0B;
}

.ps-tier-pill[data-tier="platinum"] {
    --tier-accent: #7C3AED;
}

/* Extra polish on the jewelry ring container */
.ps-tier-pill-icon {
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--tier-accent, #B08968) 18%, #ffffff) 0%, color-mix(in srgb, var(--tier-accent, #B08968) 8%, #ffffff) 100%) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier-accent, #B08968) 24%, transparent) inset, 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ════════════════════════════════════════════════════════════════
   SCENE 6 — PRICING ENGINE v2
   Sell/Rent toggle, "Your Asking Price" input, market signals,
   confidence-weighted predicted range. All classes are .ps-*-prefixed
   so they share the existing scene 6 visual language.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sell / Rent toggle (replaces commercial-only mode tabs) ── */
.ps-tx-toggle {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    margin-bottom: 12px;
}

.ps-tx-pill {
    flex: 1;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--sj-muted);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

    .ps-tx-pill i {
        font-size: 0.85rem;
    }

    .ps-tx-pill:hover {
        color: var(--sj-dark);
    }

    .ps-tx-pill.active {
        background: white;
        color: var(--sj-orange);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

/* ── Your Asking Price (replaces "Override Price") ──────────── */
.ps-asking-block {
    margin-bottom: 12px;
}

.ps-asking-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sj-dark);
    margin-bottom: 6px;
}

    .ps-asking-label i {
        color: var(--sj-orange);
    }

.ps-asking-hint {
    font-weight: 500;
    color: var(--sj-muted);
    font-size: 0.62rem;
    margin-left: auto;
}

.ps-asking-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 11px 14px;
    background: white;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: border-color 0.18s, box-shadow 0.18s;
}

    .ps-asking-input-wrap:focus-within {
        border-color: var(--sj-orange);
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.12);
    }

.ps-asking-currency {
    font-size: 1rem;
    font-weight: 800;
    color: var(--sj-dark);
    flex-shrink: 0;
}

.ps-asking-input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sj-dark);
    background: transparent;
    font-family: inherit;
    min-width: 0;
}

    .ps-asking-input::placeholder {
        color: rgba(0, 0, 0, 0.25);
        font-weight: 500;
    }

.ps-asking-suffix {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sj-muted);
    flex-shrink: 0;
}

.ps-asking-foot {
    margin-top: 6px;
    font-size: 0.66rem;
    line-height: 1.4;
    color: var(--sj-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 16px;
}

    .ps-asking-foot i {
        font-size: 0.78rem;
    }

    .ps-asking-foot.ok {
        color: var(--sj-success, #16a34a);
    }

    .ps-asking-foot.near {
        color: var(--sj-muted);
    }

    .ps-asking-foot.warn-low {
        color: #2563eb;
    }

    .ps-asking-foot.warn-high {
        color: #b45309;
    }

/* ── Predicted range card additions ─────────────────────────── */
.ps-val-skel {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
}

.ps-val-skel-bar {
    display: inline-block;
    min-width: 160px;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.06) 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: ps-val-shimmer 1.4s ease-in-out infinite;
    color: transparent !important;
    user-select: none;
}

@keyframes ps-val-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.ps-val-skel-pill {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.ps-val-explanation {
    margin-top: 8px;
    font-size: 0.68rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7);
}

.ps-val-conf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.66rem;
}

.ps-val-conf-label {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}

.ps-val-conf-val {
    color: white;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Override the existing label so it can host a trailing pill */
.ps-price-confidence .ps-price-conf-label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Strategy chip enhancement: show predicted value per zone ── */
.ps-section-lbl-tight {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--sj-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 4px 0 8px;
}

.ps-price-zone-val {
    display: block;
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--sj-dark);
    font-variant-numeric: tabular-nums;
}

.ps-price-zone.selected .ps-price-zone-val {
    color: var(--sj-orange);
}

/* ── Right-panel: market signal chips ───────────────────────── */
.ps-signals-card {
    margin-top: 10px;
}

.ps-signal-chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 4px;
}

.ps-signal-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 9px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    border-left: 3px solid var(--sj-muted);
    min-width: 0;
}

.ps-signal-chip-label {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--sj-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-signal-chip-value {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sj-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-trend-rising {
    border-left-color: var(--sj-success, #16a34a);
}

.ps-trend-cooling {
    border-left-color: #2563eb;
}

.ps-trend-stable {
    border-left-color: var(--sj-orange);
}

.ps-trend-neutral {
    border-left-color: rgba(0,0,0,0.15);
}

.ps-signal-skel {
    grid-column: 1 / -1;
    padding: 12px;
    background: rgba(0,0,0,0.03);
    border-radius: 8px;
    text-align: center;
    font-size: 0.66rem;
    color: var(--sj-muted);
}

/* Compact down for narrow viewports — keep the pricing card readable
   even on the smallest mobile sizes without zoom hacks. */
@media (max-width: 420px) {
    .ps-tx-pill {
        font-size: 0.72rem;
        padding: 8px 8px;
    }

    .ps-asking-input {
        font-size: 0.92rem;
    }

    .ps-signal-chips {
        grid-template-columns: 1fr;
    }

    .ps-price-zone-val {
        font-size: 0.68rem;
    }
}

/* ============================================================
   SCENE 6 — PRICING ENGINE v2 (User-Driven Redesign)
   Sell/Rent toggle · Hero price input · Crypto Yes/No · Strategy Guide
   ============================================================ */

/* ── Sell / Rent toggle ── */
.ps-tx-toggle {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    margin-bottom: 20px;
}

.ps-tx-pill {
    flex: 1;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--sj-muted);
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

    .ps-tx-pill i {
        font-size: 0.9rem;
    }

    .ps-tx-pill:hover {
        color: var(--sj-dark);
        background: rgba(0, 0, 0, 0.02);
    }

    .ps-tx-pill.active {
        background: white;
        color: var(--sj-orange);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

/* ── Hero Price Input ── */
.ps-price-hero {
    margin-bottom: 20px;
}

.ps-price-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ps-price-label-text {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sj-dark);
    letter-spacing: -0.01em;
}

.ps-price-label-hint {
    font-size: 0.68rem;
    color: var(--sj-muted);
    font-weight: 500;
}

.ps-price-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .ps-price-input-wrap:focus-within {
        border-color: var(--sj-orange);
        box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.12);
    }

.ps-price-currency {
    position: absolute;
    left: 18px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sj-dark);
    pointer-events: none;
}

.ps-price-input {
    width: 100%;
    padding: 18px 18px 18px 52px;
    border: 0;
    outline: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--sj-dark);
    background: transparent;
    font-family: inherit;
    letter-spacing: -0.01em;
}

    .ps-price-input::placeholder {
        color: rgba(0, 0, 0, 0.2);
        font-weight: 500;
        font-size: 1rem;
    }

    /* Remove number input spinners */
    .ps-price-input::-webkit-outer-spin-button,
    .ps-price-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .ps-price-input[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
    }

/* ── Crypto Option — Binary Yes/No ── */
.ps-crypto-option {
    margin-bottom: 20px;
    padding: 12px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ps-crypto-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sj-dark);
    margin-bottom: 8px;
}

    .ps-crypto-label i {
        color: var(--sj-orange);
        font-size: 0.9rem;
    }

.ps-crypto-toggle-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ps-crypto-yes,
.ps-crypto-no {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 40px;
    transition: all 0.2s ease;
    background: #f5f6f7;
    color: var(--sj-muted);
    border: 1.5px solid transparent;
}

    .ps-crypto-yes i,
    .ps-crypto-no i {
        font-size: 0.85rem;
    }

    .ps-crypto-yes:hover,
    .ps-crypto-no:hover {
        background: var(--sj-orange-light);
        color: var(--sj-orange);
    }

    .ps-crypto-yes.active {
        background: var(--sj-orange);
        border-color: var(--sj-orange);
        color: white;
        box-shadow: 0 2px 8px rgba(245, 130, 32, 0.25);
    }

    .ps-crypto-no.active {
        background: #1A1D20;
        border-color: #1A1D20;
        color: white;
    }

.ps-crypto-note {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(245, 130, 32, 0.06);
    border-radius: 8px;
    font-size: 0.65rem;
    color: var(--sj-muted);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.4;
    animation: psCryptoNoteFadeIn 0.3s ease;
}

    .ps-crypto-note i {
        color: var(--sj-orange);
        font-size: 0.7rem;
        margin-top: 1px;
        flex-shrink: 0;
    }

@keyframes psCryptoNoteFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* ── Strategy Guide (replaces AI content) ──
   COMPACT: tuned so all 4–5 cards fit a 1080p right rail without
   needing a scrollbar. Emoji row removed (bi icon in the title is
   enough), padding + gap halved, type a step smaller. */
.ps-strategy-guide {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    box-shadow: var(--sj-shadow-sm);
}

.ps-strategy-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    background: linear-gradient(135deg, var(--sj-orange-light) 0%, rgba(245, 130, 32, 0.03) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

    .ps-strategy-header i {
        font-size: 0.92rem;
        color: var(--sj-orange);
    }

    .ps-strategy-header span {
        font-size: 0.66rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--sj-dark);
    }

.ps-strategy-content {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ps-strategy-card {
    background: #FAFBFC;
    border-radius: 10px;
    padding: 8px 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .ps-strategy-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

/* Emoji icon row hidden — the bi-* icon inside the title carries
   the topic glyph already. Keeps card height down. */
.ps-strategy-card-icon {
    display: none;
}

.ps-strategy-card-title {
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--sj-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.2;
}

    .ps-strategy-card-title i {
        color: var(--sj-orange);
        font-size: 0.72rem;
    }

.ps-strategy-card-text {
    font-size: 0.65rem;
    color: var(--sj-muted);
    line-height: 1.4;
    margin: 0;
}

/* Rental context card — shown only when Rent mode active */
.ps-rental-context {
    background: linear-gradient(135deg, rgba(86, 196, 248, 0.06) 0%, rgba(86, 196, 248, 0.02) 100%);
    border-left: 3px solid var(--sj-blue);
}

    .ps-rental-context .ps-strategy-card-title i {
        color: var(--sj-blue);
    }

/* Validation error state */
.ps-price-input-wrap.error {
    border-color: #ef4444;
    animation: psPriceErrorShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes psPriceErrorShake {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-2px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(2px);
    }
}

.ps-price-error-msg {
    font-size: 0.68rem;
    color: #ef4444;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .ps-price-error-msg i {
        font-size: 0.72rem;
    }

/* ── Right panel ── */
#psRight5 .ps-strategy-guide {
    margin-bottom: 0;
}

#psRight5 .ps-intel-card,
#psRight5 .ps-score-card {
    display: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ps-price-input {
        padding: 14px 14px 14px 48px;
        font-size: 1rem;
    }

    .ps-price-currency {
        left: 14px;
        font-size: 1rem;
    }

    .ps-tx-pill {
        padding: 8px 10px;
        font-size: 0.75rem;
    }

    .ps-strategy-content {
        gap: 12px;
        padding: 12px;
    }

    .ps-strategy-card {
        padding: 10px 12px;
    }

    .ps-crypto-yes,
    .ps-crypto-no {
        padding: 6px 14px;
        font-size: 0.72rem;
    }
}

@media (max-width: 480px) {
    .ps-price-input {
        padding: 12px 12px 12px 42px;
        font-size: 0.95rem;
    }

    .ps-price-currency {
        left: 12px;
        font-size: 0.9rem;
    }

    .ps-crypto-yes,
    .ps-crypto-no {
        padding: 5px 12px;
        font-size: 0.68rem;
    }

    .ps-crypto-note {
        font-size: 0.6rem;
    }
}

/* ============================================================
   SCENE 7 — AI NARRATIVE COMPOSER  (Enhanced Styles)
   Append to: private-seller.css
   All classes prefixed .ps-s7-  to avoid collisions
   ============================================================ */

/* ── TONE BADGE (below textarea) ─────────────────────────────── */
.ps-s7-tone-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(245,130,32,0.09);
    border: 1px solid rgba(245,130,32,0.2);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #B4540A;
    transition: all 0.3s ease;
}

    .ps-s7-tone-badge i {
        color: var(--sj-orange, #F58220);
        font-size: 0.72rem;
    }

/* ── SUGGESTIONS CARD (right panel) ─────────────────────────── */
.ps-s7-suggestions-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.ps-s7-suggestion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ps-s7-suggestion-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ps-s7-suggestion-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(245,130,32,0.07);
    border: 1px solid rgba(245,130,32,0.18);
    font-size: 0.7rem;
    font-weight: 700;
    color: #B4540A;
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
}

    .ps-s7-suggestion-chip:hover {
        background: var(--sj-orange, #F58220);
        border-color: var(--sj-orange, #F58220);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(245,130,32,0.25);
    }

.ps-s7-suggestion-hint {
    font-size: 0.62rem;
    color: #94A3B8;
    line-height: 1.35;
    padding-left: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── COMPOSER MODAL OVERLAY ──────────────────────────────────── */
.ps-s7-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 16px;
}

    .ps-s7-modal.is-open {
        opacity: 1;
    }

/* ── MODAL CARD ──────────────────────────────────────────────── */
.ps-s7-modal-inner {
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15,23,42,0.25), 0 6px 20px rgba(15,23,42,0.12);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1);
}

.ps-s7-modal.is-open .ps-s7-modal-inner {
    transform: translateY(0) scale(1);
}

/* ── MODAL HEADER ────────────────────────────────────────────── */
.ps-s7-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(245,130,32,0.05) 0%, #ffffff 60%);
}

.ps-s7-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #1A1D20;
    letter-spacing: -0.01em;
}

    .ps-s7-modal-title i {
        color: var(--sj-orange, #F58220);
        font-size: 1.05rem;
    }

.ps-s7-modal-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.05);
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
}

    .ps-s7-modal-close:hover {
        background: rgba(0,0,0,0.1);
        color: #1A1D20;
        transform: rotate(90deg);
    }

/* ── MODAL BODY (scrolls internally) ────────────────────────── */
.ps-s7-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(245,130,32,0.25) transparent;
    display: flex;
    flex-direction: column;
}

    .ps-s7-modal-body::-webkit-scrollbar {
        width: 4px;
    }

    .ps-s7-modal-body::-webkit-scrollbar-thumb {
        background: rgba(245,130,32,0.25);
        border-radius: 2px;
    }

/* ── MODAL STEP WRAPPER ──────────────────────────────────────── */
.ps-s7-step {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 6px;
    flex: 1;
}

.ps-s7-step-subtitle {
    font-size: 0.78rem;
    color: #64748B;
    line-height: 1.5;
    margin: 0;
}

/* ── INTELLIGENCE HINTS ──────────────────────────────────────── */
.ps-s7-hints {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ps-s7-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 8px 12px;
    background: rgba(245,130,32,0.05);
    border: 1px solid rgba(245,130,32,0.15);
    border-radius: 10px;
    font-size: 0.7rem;
    color: #64748B;
    line-height: 1.4;
}

    .ps-s7-hint i {
        color: var(--sj-orange, #F58220);
        font-size: 0.78rem;
        flex-shrink: 0;
        margin-top: 1px;
    }

/* ── TONE CARDS ──────────────────────────────────────────────── */
.ps-s7-tone-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ps-s7-tone-card {
    text-align: left;
    background: #ffffff;
    border: 2px solid rgba(0,0,0,0.07);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.22s ease;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: inherit;
}

    .ps-s7-tone-card:hover {
        border-color: rgba(245,130,32,0.3);
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(245,130,32,0.1);
    }

    .ps-s7-tone-card.selected {
        border-color: var(--sj-orange, #F58220);
        background: linear-gradient(135deg, rgba(245,130,32,0.06) 0%, #ffffff 100%);
        box-shadow: 0 8px 20px rgba(245,130,32,0.15);
    }

.ps-s7-tone-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(245,130,32,0.1);
    color: var(--sj-orange, #F58220);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.22s ease;
}

.ps-s7-tone-card.selected .ps-s7-tone-icon {
    background: var(--sj-orange, #F58220);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(245,130,32,0.3);
}

.ps-s7-tone-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: #1A1D20;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ps-s7-tone-rec {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--sj-orange, #F58220);
    color: #ffffff;
}

.ps-s7-tone-desc {
    font-size: 0.7rem;
    color: #64748B;
    line-height: 1.45;
}

/* ── VALIDATION QUESTIONS ────────────────────────────────────── */
.ps-s7-questions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ps-s7-question-block {
    padding: 12px 14px;
    background: #F8FAFC;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
}

.ps-s7-question-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: #1A1D20;
    margin-bottom: 10px;
    line-height: 1.4;
}

.ps-s7-quick-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ps-s7-quick-opt {
    padding: 6px 12px;
    border: 1.5px solid rgba(0,0,0,0.09);
    border-radius: 999px;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.18s ease;
}

    .ps-s7-quick-opt:hover {
        border-color: rgba(245,130,32,0.4);
        color: #1A1D20;
    }

    .ps-s7-quick-opt.selected {
        background: var(--sj-orange, #F58220);
        border-color: var(--sj-orange, #F58220);
        color: #ffffff;
    }

.ps-s7-skip-opt {
    background: transparent;
    color: #94A3B8;
    border-color: rgba(0,0,0,0.06);
}

.ps-s7-q-textarea {
    width: 100%;
    resize: none;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 0.76rem;
    color: #1A1D20;
    outline: none;
    transition: border-color 0.2s;
    line-height: 1.5;
    box-sizing: border-box;
}

    .ps-s7-q-textarea:focus {
        border-color: var(--sj-orange, #F58220);
    }

    .ps-s7-q-textarea:disabled {
        background: #f5f5f5;
        color: #94A3B8;
    }

.ps-s7-skip-btn {
    margin-top: 6px;
    padding: 4px 10px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.62rem;
    color: #94A3B8;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.18s;
}

    .ps-s7-skip-btn:hover {
        color: #475569;
    }

    .ps-s7-skip-btn:disabled {
        color: #10B981;
        text-decoration: none;
        cursor: default;
    }

/* ── GENERATING STATE ────────────────────────────────────────── */
.ps-s7-generating {
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    gap: 16px;
}

.ps-s7-gen-orb {
    position: relative;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-s7-gen-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: psS7RotateRing 2s linear infinite;
}

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

.ps-s7-gen-ring {
    fill: none;
    stroke: rgba(245,130,32,0.15);
    stroke-width: 5;
}

.ps-s7-gen-fill {
    fill: none;
    stroke: var(--sj-orange, #F58220);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 80 110;
    transform-origin: center;
}

.ps-s7-gen-icon {
    font-size: 2rem;
    color: var(--sj-orange, #F58220);
    position: relative;
    z-index: 1;
    animation: psS7Pulse 1.8s ease-in-out infinite;
}

@keyframes psS7Pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

.ps-s7-gen-label {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1A1D20;
    letter-spacing: -0.01em;
}

.ps-s7-gen-sublabel {
    font-size: 0.72rem;
    color: #64748B;
    text-align: center;
    max-width: 280px;
    line-height: 1.45;
}

.ps-s7-gen-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 320px;
}

.ps-s7-gen-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #94A3B8;
    padding: 8px 12px;
    border-radius: 8px;
    background: #F8FAFC;
    transition: all 0.3s ease;
}

    .ps-s7-gen-step i {
        color: #CBD5E1;
        font-size: 0.82rem;
    }

    .ps-s7-gen-step.active {
        background: rgba(245,130,32,0.07);
        color: #B4540A;
    }

        .ps-s7-gen-step.active i {
            color: var(--sj-orange, #F58220);
        }

/* ── RESULT DISPLAY ──────────────────────────────────────────── */
.ps-s7-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(245,130,32,0.1) 0%, rgba(86,196,248,0.06) 100%);
    border: 1px solid rgba(245,130,32,0.2);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #B4540A;
    width: fit-content;
}

    .ps-s7-result-badge i {
        color: var(--sj-orange, #F58220);
    }

.ps-s7-result-preview {
    background: linear-gradient(145deg, #fffaf4 0%, #fff 100%);
    border: 1.5px solid rgba(245,130,32,0.15);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.ps-s7-result-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1A1D20;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.ps-s7-result-body {
    font-size: 0.76rem;
    color: #334155;
    line-height: 1.65;
}

/* ── RESULT CONTROLS ─────────────────────────────────────────── */
.ps-s7-result-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ps-s7-result-row {
    display: flex;
    gap: 8px;
}

.ps-s7-ctrl-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .ps-s7-ctrl-btn:hover {
        border-color: rgba(245,130,32,0.35);
        color: #1A1D20;
        background: rgba(245,130,32,0.04);
        transform: translateY(-1px);
    }

    .ps-s7-ctrl-btn i {
        font-size: 0.82rem;
        color: var(--sj-orange, #F58220);
    }

/* ── USE BUTTON ──────────────────────────────────────────────── */
.ps-s7-use-btn {
    background: linear-gradient(135deg, var(--sj-orange, #F58220) 0%, #F97316 100%) !important;
    box-shadow: 0 6px 18px rgba(245,130,32,0.35) !important;
}

.ps-s7-gen-btn {
    background: linear-gradient(135deg, #1A1D20 0%, #2D3748 100%) !important;
}

    .ps-s7-gen-btn i {
        color: var(--sj-orange, #F58220);
    }

/* ── MODAL FOOTER ────────────────────────────────────────────── */
.ps-s7-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0 6px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 40%);
    flex-shrink: 0;
}

/* ── FALLBACK BANNER ─────────────────────────────────────────── */
.ps-s7-fallback {
    gap: 16px;
}

.ps-s7-fallback-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.18);
    border-radius: 12px;
    font-size: 0.72rem;
    color: #64748B;
    line-height: 1.5;
}

    .ps-s7-fallback-banner i {
        color: #EF4444;
        font-size: 1.1rem;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .ps-s7-fallback-banner strong {
        color: #1A1D20;
        display: block;
        margin-bottom: 3px;
    }

/* ── MOBILE RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 600px) {
    .ps-s7-modal {
        align-items: flex-end;
        padding: 0;
    }

    .ps-s7-modal-inner {
        max-width: 100%;
        width: 100%;
        border-radius: 22px 22px 0 0;
        max-height: 92vh;
        transform: translateY(40px);
    }

    .ps-s7-modal.is-open .ps-s7-modal-inner {
        transform: translateY(0);
    }

    .ps-s7-tone-card {
        padding: 12px 14px;
    }

    .ps-s7-result-preview {
        max-height: 180px;
    }

    .ps-s7-result-row {
        flex-direction: column;
    }

    .ps-s7-ctrl-btn {
        min-height: 44px;
    }
}

@media (max-width: 400px) {
    .ps-s7-step {
        padding: 14px 14px 4px;
    }

    .ps-s7-modal-header {
        padding: 14px 14px 12px;
    }
}

/* ── SCENE 7 LEFT PANEL ENHANCEMENTS ────────────────────────── */
/* The main textarea gets a larger, more inviting treatment */
#psScene6 .ps-narrative-input {
    min-height: 130px;
    max-height: 200px;
    font-size: 0.82rem;
    line-height: 1.6;
}

/* Upgraded AI compose button */
#psScene6 .ps-ai-compose-btn {
    background: linear-gradient(135deg, #1A1D20 0%, #2D3748 100%);
    position: relative;
    overflow: hidden;
}

    #psScene6 .ps-ai-compose-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(245,130,32,0.15) 0%, transparent 60%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    #psScene6 .ps-ai-compose-btn:hover::before {
        opacity: 1;
    }

/* Preview card refinements */
#psAiPreviewCard {
    background: linear-gradient(145deg, #fffaf4 0%, #ffffff 100%);
    border: 1.5px solid rgba(245,130,32,0.14);
}

#psPreviewTitle {
    font-size: 0.84rem;
    font-weight: 800;
    color: #1A1D20;
    line-height: 1.3;
}

#psPreviewDesc {
    font-size: 0.72rem;
    line-height: 1.6;
    color: #334155;
}

/* ============================================================
   v19.3 — BREADCRUMB PILL (all viewports)
   Previously only shown on mobile. Now visible on all sizes
   so the agent flow can use it consistently.
   ============================================================ */
.ps-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 8px 0 !important;
    padding: 6px 10px 6px 6px !important;
    background: linear-gradient(135deg, rgba(245, 130, 32, 0.08) 0%, rgba(245, 130, 32, 0.03) 100%) !important;
    border: 1px solid rgba(245, 130, 32, 0.18) !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--sj-orange-dark, #B4540A) !important;
    width: fit-content !important;
    max-width: 100% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.ps-breadcrumb-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sj-orange, #F58220);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.ps-breadcrumb-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ps-breadcrumb-chevron {
    flex-shrink: 0;
    color: rgba(245, 130, 32, 0.5);
    font-size: 0.65rem;
    margin: 0 2px;
}

.ps-breadcrumb-text button,
.ps-breadcrumb-text .pa-breadcrumb-back {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.18s ease;
}

    .ps-breadcrumb-text button:hover,
    .ps-breadcrumb-text .pa-breadcrumb-back:hover {
        text-decoration: underline;
        color: var(--sj-orange, #F58220);
    }

/* On mobile, keep existing behavior */
@media (max-width: 768px) {
    .ps-breadcrumb {
        margin: 0 0 12px 0 !important;
    }
}

/* =============================================================================
   FIX: Scene-enter animation broken when seller runs inside agent shell
   =============================================================================
   Root cause: psFadeUp starts at opacity:0 with animation-fill-mode:forwards.
   When the parent .pa-slot is display:none (initial agent shell state), the
   browser suspends the animation before it plays. When the slot later becomes
   visible the children are stuck at opacity:0 and pointer-events don't register
   (clicks pass through invisible elements, text looks blurred/absent).

   Fix 1: Ensure every .ps-left child has opacity:1 as its base state.
           The animation overrides this when it actually runs, but if it can't
           run (hidden container), the fallback keeps content visible.

   Fix 2: Inside the agent seller-slot, suppress the ps-scene-enter entrance
           animation entirely. The slot visibility crossfade in private-agent.js
           already provides the transition; the per-child stagger is redundant
           and causes the opacity:0 freeze.

   Fix 3: Same protection for the ps-subtype-banner which also uses psFadeUp.
   ============================================================================= */

/* Fix 1: opacity fallback so children are never invisibly frozen */
.ps-scene-enter .ps-left > * {
    opacity: 1; /* fallback; animation overrides this when it can run */
}

/* Fix 2: disable entrance animation inside the agent seller slot */
.pa-seller-slot .ps-scene-enter .ps-left > *,
.pa-seller-slot .ps-scene-enter .ps-left > *:nth-child(1),
.pa-seller-slot .ps-scene-enter .ps-left > *:nth-child(2),
.pa-seller-slot .ps-scene-enter .ps-left > *:nth-child(3),
.pa-seller-slot .ps-scene-enter .ps-left > *:nth-child(4),
.pa-seller-slot .ps-scene-enter .ps-left > *:nth-child(5) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Fix 3: same for the subtype banner animation */
.pa-seller-slot .ps-subtype-banner {
    animation: none !important;
    opacity: 1 !important;
}

/* ============================================================================
   SCENE 8 — SINGLE R199 LAUNCH PACKAGE
   ----------------------------------------------------------------------------
   When .ps-packages has the .ps-pkg-single-mode class (set by buildScene8),
   we show a centred premium hero card instead of the legacy 4-row stack.
   ============================================================================ */
.ps-packages.ps-pkg-single-mode {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 12px 0 18px;
    flex-direction: column;
}

.ps-pkg-single {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    background: linear-gradient(160deg, #ffffff 0%, var(--sj-orange-light) 100%) !important;
    border: 2px solid var(--sj-orange) !important;
    border-radius: 22px !important;
    padding: 26px 26px 22px !important;
    box-shadow: 0 16px 48px rgba(245,130,32,0.18), 0 4px 14px rgba(0,0,0,0.06) !important;
    overflow: hidden;
    display: block !important;
    cursor: default !important;
}

    .ps-pkg-single::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 70% at 100% 0%, rgba(245,130,32,0.18) 0%, transparent 55%), radial-gradient(80% 60% at 0% 100%, rgba(86,196,248,0.10) 0%, transparent 60%);
        pointer-events: none;
    }

.ps-pkg-single-ribbon {
    position: absolute;
    top: 14px;
    right: -42px;
    transform: rotate(40deg);
    background: linear-gradient(135deg, var(--sj-orange) 0%, var(--sj-orange-dark) 100%);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    z-index: 2;
}

.ps-pkg-single-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.ps-pkg-single-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--sj-orange) 0%, var(--sj-orange-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    box-shadow: 0 8px 22px rgba(245,130,32,0.35);
    flex-shrink: 0;
}

.ps-pkg-single-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sj-dark);
    line-height: 1.15;
    margin-bottom: 2px;
}

.ps-pkg-single-subtitle {
    font-size: 0.78rem;
    color: var(--sj-muted);
    font-weight: 500;
}

.ps-pkg-single-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 6px 0 14px;
    position: relative;
    z-index: 1;
}

.ps-pkg-single-price {
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--sj-dark);
    line-height: 1;
    letter-spacing: -0.02em;
}

.ps-pkg-single-price-sub {
    font-size: 0.72rem;
    color: var(--sj-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ps-pkg-single-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px;
    position: relative;
    z-index: 1;
}

    .ps-pkg-single-features li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 0.84rem;
        color: var(--sj-dark);
        font-weight: 500;
        line-height: 1.35;
    }

    .ps-pkg-single-features i {
        color: var(--sj-success);
        font-size: 1rem;
        margin-top: 1px;
        flex-shrink: 0;
    }

/* ============================================================================
   SCENE 9 — REGISTRATION / LOGIN  (carousel idx 8 / #psScene8)
   ============================================================================ */
.ps-auth-left-pane {
    overflow-y: auto;
}

.ps-auth-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 24px;
    margin: 14px 0 18px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .ps-auth-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

.ps-auth-social-col,
.ps-auth-form-col {
    display: flex;
    flex-direction: column;
}

.ps-auth-form-col {
    background: linear-gradient(160deg, #FAFBFC 0%, #F4F6F9 100%);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 18px 18px 20px;
}

/* ── Sign in / Register tabs ───────────────────────────────────────── */
.ps-auth-tabs {
    display: inline-flex;
    background: #F4F5F7;
    border-radius: 50px;
    padding: 4px;
    margin-bottom: 14px;
    gap: 4px;
    align-self: flex-start;
}

.ps-auth-tab {
    border: none;
    background: transparent;
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.22s;
}

    .ps-auth-tab.active {
        background: #fff;
        color: var(--sj-dark);
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

/* ── Social provider buttons ──────────────────────────────────────── */
.ps-social-stack {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.ps-social-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1.5px solid rgba(0,0,0,0.10);
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sj-dark);
    text-align: left;
    width: 100%;
    position: relative;
    font-family: inherit;
}

    .ps-social-btn:hover {
        border-color: var(--sj-orange);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    }

    .ps-social-btn[data-provider="google"]:hover {
        border-color: #4285F4;
    }

    .ps-social-btn[data-provider="apple"]:hover {
        border-color: #000;
    }

    .ps-social-btn[data-provider="microsoft"]:hover {
        border-color: #00A4EF;
    }

.ps-social-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-social-label {
    flex: 1;
}

.ps-social-arrow {
    color: var(--sj-muted);
    font-size: 0.85rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.22s;
}

.ps-social-btn:hover .ps-social-arrow {
    opacity: 1;
    transform: translateX(0);
}

.ps-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
}

    .ps-auth-divider::before,
    .ps-auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(0,0,0,0.08);
    }

    .ps-auth-divider span {
        font-size: 0.65rem;
        color: var(--sj-muted);
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

.ps-auth-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.ps-auth-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--sj-muted);
    font-weight: 600;
}

    .ps-auth-trust-chip i {
        color: var(--sj-success);
        font-size: 0.9rem;
    }

/* ── Form fields (shared between auth and payment) ────────────────── */
.ps-auth-field {
    margin-bottom: 11px;
}

.ps-auth-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sj-dark);
    margin-bottom: 5px;
    letter-spacing: 0.02em;
}

.ps-auth-input-wrap {
    position: relative;
}

.ps-auth-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1.5px solid rgba(0,0,0,0.10);
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--sj-dark);
    background: #fff;
    transition: all 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}

    .ps-auth-input:focus {
        outline: none;
        border-color: var(--sj-orange);
        box-shadow: 0 0 0 3px rgba(245,130,32,0.14);
    }

/* Plain inputs without leading icon (name fields) */
.ps-auth-name-row .ps-auth-input {
    padding-left: 12px;
}

.ps-auth-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sj-muted);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color 0.2s;
}

.ps-auth-input-wrap:focus-within .ps-auth-input-icon {
    color: var(--sj-orange);
}

.ps-auth-pwd-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--sj-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 0.95rem;
    transition: color 0.2s;
}

    .ps-auth-pwd-toggle:hover {
        color: var(--sj-orange);
    }

.ps-auth-input-error {
    display: block;
    font-size: 0.7rem;
    color: var(--sj-error);
    font-weight: 600;
    margin-top: 4px;
    min-height: 14px;
}

.ps-auth-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ps-auth-recaptcha-wrap {
    margin: 6px 0 12px;
    display: flex;
    justify-content: center;
}

.ps-auth-form-error,
.ps-pay-form-error {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    color: var(--sj-error);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 11px;
    display: none;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

    .ps-auth-form-error.show,
    .ps-pay-form-error.show {
        display: flex;
    }

    .ps-auth-form-error i,
    .ps-pay-form-error i {
        flex-shrink: 0;
        margin-top: 1px;
    }

/* ── Submit buttons ───────────────────────────────────────────────── */
.ps-auth-submit {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sj-orange) 0%, var(--sj-orange-dark) 100%);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s var(--sj-ease-out);
    box-shadow: var(--sj-shadow-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}

    .ps-auth-submit:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(245,130,32,0.42);
    }

    .ps-auth-submit:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
    }

.ps-auth-spin {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ps-auth-spin 0.7s linear infinite;
    display: none;
}

.ps-auth-submit.loading .ps-auth-spin,
.ps-btn-pay.loading .ps-auth-spin {
    display: inline-block;
}

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

.ps-auth-switch {
    text-align: center;
    font-size: 0.78rem;
    color: var(--sj-muted);
    margin-top: 12px;
}

    .ps-auth-switch a {
        color: var(--sj-orange);
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
    }

        .ps-auth-switch a:hover {
            text-decoration: underline;
        }

/* ============================================================================
   SCENE 10 — CARD PAYMENT (Ozow)  (carousel idx 9 / #psScene9)
   ============================================================================ */
.ps-pay-left-pane {
    overflow-y: auto;
    position: relative;
}

.ps-pay-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ps-pay-card-brand {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    display: flex;
    align-items: center;
    pointer-events: none;
    transition: opacity 0.2s;
    opacity: 0;
}

    .ps-pay-card-brand.show {
        opacity: 1;
    }

    .ps-pay-card-brand svg {
        height: 22px;
        width: auto;
    }

.ps-btn-pay {
    flex: 1;
}

    .ps-btn-pay:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
    }

.ps-pay-secure-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 0.7rem;
    color: var(--sj-muted);
    font-weight: 600;
}

    .ps-pay-secure-row i {
        color: var(--sj-success);
    }

/* ── Order summary (right pane) ───────────────────────────────────── */
.ps-pay-right-pane {
    background: transparent !important;
}

.ps-pay-summary {
    background: linear-gradient(160deg, #1A1D20 0%, #2D3748 100%);
    color: #fff;
    border-radius: 18px;
    padding: 22px 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .ps-pay-summary::before {
        content: '';
        position: absolute;
        top: -40%;
        right: -30%;
        width: 80%;
        height: 100%;
        background: radial-gradient(circle, rgba(245,130,32,0.28) 0%, transparent 60%);
        pointer-events: none;
    }

.ps-pay-summary-eyebrow {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--sj-orange);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

.ps-pay-summary-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 14px;
    position: relative;
    z-index: 1;
    color: #fff;
}

.ps-pay-summary-listing-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(245,130,32,0.18);
    color: var(--sj-orange);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 50px;
    border: 1px solid rgba(245,130,32,0.3);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.ps-pay-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
    z-index: 1;
    gap: 10px;
}

    .ps-pay-summary-row:last-of-type {
        border-bottom: none;
    }

    .ps-pay-summary-row .label {
        color: rgba(255,255,255,0.7);
        font-weight: 500;
    }

    .ps-pay-summary-row .value {
        color: #fff;
        font-weight: 700;
        text-align: right;
    }

.ps-pay-summary-divider {
    height: 1px;
    background: rgba(255,255,255,0.14);
    margin: 10px 0;
    position: relative;
    z-index: 1;
}

.ps-pay-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}

    .ps-pay-summary-total .label {
        font-size: 0.72rem;
        color: rgba(255,255,255,0.6);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .ps-pay-summary-total .value {
        font-size: 1.7rem;
        font-weight: 900;
        color: #fff;
        letter-spacing: -0.01em;
    }

.ps-pay-ozow-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    padding: 8px 12px;
    margin-top: 14px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    position: relative;
    z-index: 1;
}

    .ps-pay-ozow-badge i {
        color: var(--sj-orange);
        font-size: 1rem;
    }

    .ps-pay-ozow-badge strong {
        color: #fff;
        font-weight: 800;
    }

/* ── Success overlay ──────────────────────────────────────────────── */
.ps-pay-success-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s var(--sj-ease-out);
    z-index: 50;
    border-radius: inherit;
}

    .ps-pay-success-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

.ps-pay-success-card {
    max-width: 480px;
    text-align: center;
}

.ps-pay-success-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sj-success) 0%, #059669 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    margin: 0 auto 18px;
    box-shadow: 0 10px 30px rgba(16,185,129,0.35);
    animation: ps-pay-pop 0.5s var(--sj-ease-bounce) both;
}

@keyframes ps-pay-pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.ps-pay-success-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sj-dark);
    margin: 0 0 10px;
}

.ps-pay-success-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sj-success-light, #D1FAE5);
    color: #065F46;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.ps-pay-success-sub {
    font-size: 0.88rem;
    color: var(--sj-muted);
    line-height: 1.55;
    margin: 0 0 22px;
}

.ps-pay-success-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.ps-pay-success-btn {
    padding: 11px 22px;
    border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: #fff;
    color: var(--sj-dark);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

    .ps-pay-success-btn:hover {
        border-color: var(--sj-orange);
        color: var(--sj-orange);
    }

    .ps-pay-success-btn.primary {
        background: linear-gradient(135deg, var(--sj-orange) 0%, var(--sj-orange-dark) 100%);
        color: #fff;
        border-color: transparent;
        box-shadow: var(--sj-shadow-orange);
    }

        .ps-pay-success-btn.primary:hover {
            transform: translateY(-2px);
            color: #fff;
        }

/* ── reCAPTCHA scaling on very small phones ───────────────────────── */
@media (max-width: 360px) {
    .ps-auth-recaptcha-wrap .g-recaptcha {
        transform: scale(0.88);
        transform-origin: 0 0;
    }
}

/* ============================================================================
   SCENE 3 — DNA BUILDER · MOBILE LAYOUT
   ----------------------------------------------------------------------------
   Design call: Ikhayalami is a website, not a native app. On phones and
   small tablets (≤768 px) Scene 3 is stripped to its data-entry essentials.

       SHOWN ON MOBILE
         • Spatial Anchor (address search + map pin) — required input
         • Property DNA fields (steppers + size inputs) — required input
         • Continue / Back nav — sticky-pinned to the bottom by the
           existing rule at lines 5279-5310 in this file (we DO NOT
           override it; we only feed it the right environment).

       HIDDEN ON MOBILE
         • The right rail (#psRight2):
             - Digital Twin card
             - Market Pulse panel
             - Street View panorama
         • The silhouette SVG stage (inside the left pane)
         • The metrics completion ring (decorative)

   Pairs with the JS gate in updateDnaTwinPreviewHeavy() (private-seller.js):
   when the same (max-width: 768px) media query matches, the heavy
   preview pass skips silhouette redraws, market pulse, and Street View
   geocoding. So we're not just hiding chrome — the work is skipped.

   IMPORTANT — DO NOT REPOSITION THE NAV HERE.

   The existing block at lines 5223-5310 already gives Scene 3 a proper
   mobile layout:
       .ps-scene#psScene2          — display:flex column, overflow-y:auto
       .ps-scene#psScene2 > .ps-dna-left     — order:1, natural height
       .ps-scene#psScene2 > .ps-right        — order:2, padding-bottom holds nav-space
       .ps-scene#psScene2 > .ps-nav-dna      — order:3, position:sticky bottom:0
   The sticky nav works because .ps-scene#psScene2 IS the scroll
   container (overflow-y:auto). Earlier versions of this fix tried to
   switch the nav to position:fixed, which then competed with the
   sticky rule's `!important` and the nav lost its sibling reference,
   ending up either out of frame or in the middle of the scrolling
   content.

   What we DO change:
     1. Hide the right rail + silhouette + ring (display:none).
     2. Move the nav-space-reservation padding from .ps-right (which
        was holding it via `padding-bottom: clamp(82px, 12vh, 100px)`
        at line 5274) onto .ps-dna-left, since .ps-right is now
        display:none and isn't there to reserve scroll-end room any
        more. Without this, the last DNA tile would sit hidden under
        the sticky nav bar.
     3. Add `touch-action: manipulation` to the steppers and size
        inputs (invisible win — kills iOS 300 ms double-tap-zoom
        delay).
     4. Force-set 16 px font on the size input (iOS only zooms when
        a focused input has computed font-size < 16 px).

   Nothing else. The existing mobile system handles the rest.
   ============================================================================ */

@media (max-width: 768px) {

    /* ── A. HIDE the entire right rail on Scene 3 ───────────────── */
    .ps-scene#psScene2 > .ps-right,
    .ps-scene#psScene2 > #psRight2 {
        display: none !important;
    }

    /* ── B. HIDE the silhouette stage inside the left pane ──────── */
    .ps-scene#psScene2 .ps-silhouette-stage,
    .ps-scene#psScene2 #psSilhouetteStage,
    .ps-scene#psScene2 #psSilhouetteSvg,
    .ps-scene#psScene2 .ps-silhouette-caption,
    .ps-scene#psScene2 #psSilhouetteCaption {
        display: none !important;
    }

    /* ── C. HIDE the decorative completion ring in the panel head ─ */
    .ps-scene#psScene2 .ps-metrics-completion,
    .ps-scene#psScene2 #psMetricsCompletion {
        display: none !important;
    }

    /* metrics-head was a 2-col grid with the ring on the right.
       With the ring gone, let the kicker + title span full row. */
    .ps-scene#psScene2 .ps-metrics-head {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    /* ── D. Reserve scroll-end space for the sticky nav ─────────────
       The existing rule at line 5274 puts ~82-100px of padding-bottom
       on .ps-right so the sticky nav doesn't cover the last item in
       the scroll. With .ps-right hidden, we shift that responsibility
       onto .ps-dna-left, which is now the only scrolling content.
       The clamp() matches the existing nav-height clamp so on every
       viewport the breathing room exactly matches what nav-height +
       safe-area-inset asks for. */
    .ps-scene#psScene2 > .ps-dna-left {
        padding-bottom: calc(clamp(82px, 12vh, 100px) + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ── E. Touch-action — invisible interaction win ────────────────
       Kills the iOS 300 ms double-tap-zoom delay on stepper buttons
       and the size input. No size/font changes — this is just a
       behaviour hint to the browser. */
    .ps-scene#psScene2 .ps-step-btn,
    .ps-scene#psScene2 .ps-size-input input {
        touch-action: manipulation;
    }

    /* iOS bumps the page zoom whenever a focused <input> has a
       computed font-size below 16 px. The default 0.95rem (≈ 15.2 px)
       hit that threshold. Setting a literal 16 px stops the focus-
       zoom shudder without affecting the look (the difference is
       under 1 px at the default root size). */
    .ps-scene#psScene2 .ps-size-input input {
        font-size: 16px !important;
    }
}

/* ============================================================================
   AI COMPOSER (Scene 7) — VALIDATION GATE STYLING
   ----------------------------------------------------------------------------
   Companion to the validation logic in private-seller.js buildScene7() /
   _refreshNarrativeGate(). Two visual pieces:

     1. .ps-narrative-min-hint — the live "X chars to go / Looks good"
        message that sits below the 0/500 counter. Two states:
           --need (orange) — gate is closed; user has more to write.
           --ok   (green)  — gate is open; user can advance.

     2. .ps-btn-next.ps-btn-disabled — the disabled-state look for
        Continue. Browsers grey out [disabled] natively, but the
        gradient + box-shadow on .ps-btn-next normally override the
        UA default, so we have to explicitly desaturate ourselves.
        We keep the button click-blocked via the actual `disabled`
        attribute (set in JS); the class is purely cosmetic.
   ============================================================================ */

.ps-narrative-min-hint {
    /* Sits just below the "N / 500" counter, right-aligned to match it. */
    margin-top: -6px; /* tuck up close to the counter */
    margin-bottom: 14px;
    text-align: right;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.005em;
    transition: color 0.18s ease;
}

.ps-narrative-min-hint--need {
    color: var(--sj-orange, #F58220);
}

.ps-narrative-min-hint--ok {
    color: #15803D; /* tailwind green-700 — same hue family
                                   as the success pill on the launch card,
                                   so the "you can go now" feedback feels
                                   visually consistent with the rest of
                                   the flow. */
}

/* Continue button — disabled-state when narrative gate is closed.
   We override the orange gradient + glow with a flat muted surface so
   the user reads "not yet" without thinking the button is broken. */
.ps-btn-next.ps-btn-disabled,
.ps-btn-next[disabled] {
    background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%) !important;
    color: #9CA3AF !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    /* Keep the size + padding intact — only the colour changes —
       so the button doesn't jump dimensions when it un-disables.
       The transform-block here also keeps any hover handlers from
       briefly lifting it before the disabled attribute kicks in. */
    transform: none !important;
    filter: grayscale(0.15);
}

    .ps-btn-next.ps-btn-disabled:hover,
    .ps-btn-next[disabled]:hover {
        background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%) !important;
        color: #9CA3AF !important;
        transform: none !important;
        box-shadow: none !important;
    }

    /* The arrow icon goes muted too so it matches the label. */
    .ps-btn-next.ps-btn-disabled i,
    .ps-btn-next[disabled] i {
        opacity: 0.6;
    }

/* Narrative textarea pulse — re-uses the same .ps-input-pulse animation
   the seller already defines, but adds an outline ring scoped just to
   the narrative input so the visual nudge reads as "this field" rather
   than "something is wrong". */
.ps-narrative-input.ps-input-pulse {
    outline: 2px solid rgba(245, 130, 32, 0.55);
    outline-offset: 2px;
    transition: outline-color 0.2s ease;
}

/* Mobile: keep the hint a hair smaller so it doesn't dominate the
   already-tight composer pane on phones. */
@media (max-width: 600px) {
    .ps-narrative-min-hint {
        font-size: 0.7rem;
        margin-bottom: 10px;
    }
}

/* ============================================================
   SCENE 7 (AI COMPOSER) — RIGHT PANEL COMPACT FIT
   ------------------------------------------------------------
   Goal: AI Preview + Smart Suggestions + Narrative Intelligence
   must all be visible in the right rail at ~1080p without the
   rail needing to scroll. We tighten every card's padding +
   typography, scoped to #psRight6 so other scenes are untouched.
   ============================================================ */
#psRight6 {
    gap: 8px !important;
    padding: 14px 14px !important;
}

    #psRight6 .ps-ai-preview,
    #psRight6 .ps-s7-suggestions-card,
    #psRight6 .ps-intel-card {
        padding: 10px 12px;
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }

    #psRight6 .ps-intel-header {
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        margin-bottom: 6px;
        gap: 5px;
    }

        #psRight6 .ps-intel-header i {
            font-size: 0.78rem;
        }

    #psRight6 .ps-ai-preview-section {
        margin-bottom: 6px;
    }

        #psRight6 .ps-ai-preview-section:last-child {
            margin-bottom: 0;
        }

    #psRight6 .ps-ai-preview-tag {
        font-size: 0.58rem;
        margin-bottom: 1px;
    }

    #psRight6 .ps-ai-preview-text {
        font-size: 0.72rem;
        line-height: 1.35;
        margin: 0;
    }

    #psRight6 .ps-s7-suggestion-list {
        gap: 6px;
    }

    #psRight6 .ps-s7-suggestion-item {
        gap: 1px;
    }

    #psRight6 .ps-s7-suggestion-chip {
        padding: 4px 9px;
        font-size: 0.66rem;
        gap: 4px;
    }

    #psRight6 .ps-s7-suggestion-hint {
        font-size: 0.58rem;
        line-height: 1.3;
        -webkit-line-clamp: 2;
        padding-left: 2px;
    }

    #psRight6 .ps-intel-insight {
        font-size: 0.7rem;
        line-height: 1.4;
        margin: 0;
    }

/* On shorter screens, allow the rail to scroll silently if needed
   instead of clipping the bottom card. The scrollbar stays hidden
   (matches .ps-right defaults) so the design still feels seamless. */
@media (max-height: 820px) {
    #psRight6 .ps-s7-suggestion-list {
        max-height: 200px;
        overflow-y: auto;
        scrollbar-width: none;
    }

        #psRight6 .ps-s7-suggestion-list::-webkit-scrollbar {
            display: none;
        }
}

/* ============================================================
   SCENE 9 — INLINE REGISTER FORM (terms + phone)
   ------------------------------------------------------------
   New surface added when we merged the SignInModal register
   fields into the in-journey scene. Terms checkbox styling
   mirrors the modal's .ikh-modal-terms so the experience is
   visually identical.
   ============================================================ */
.ps-auth-terms {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 6px 0 12px;
    padding: 11px 13px;
    background: rgba(245, 130, 32, 0.04);
    border: 1px solid rgba(245, 130, 32, 0.18);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--sj-dark);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .ps-auth-terms:hover {
        background: rgba(245, 130, 32, 0.06);
        border-color: rgba(245, 130, 32, 0.28);
    }

    .ps-auth-terms input[type="checkbox"] {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        margin-top: 2px;
        accent-color: var(--sj-orange);
        cursor: pointer;
    }

    .ps-auth-terms span {
        flex: 1 1 auto;
    }

    .ps-auth-terms a {
        color: var(--sj-orange);
        text-decoration: none;
        font-weight: 600;
    }

        .ps-auth-terms a:hover {
            text-decoration: underline;
        }

/* ============================================================
   SCENE 7 — AI PREVIEW PAGER
   ------------------------------------------------------------
   Long AI narratives (6–8 paragraphs) overflow the right rail.
   _psSetPreviewDesc paginates them at 3 paragraphs/page; this
   block styles the prev / page-N / next pager rendered beneath
   psPreviewDesc. Visible only when the description is long
   enough to need pagination (else the pager isn't injected).
   ============================================================ */
.ps-ai-preview-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.ps-ai-preview-pager-btn {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    color: var(--sj-dark, #1A1D20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    font-size: 0.78rem;
    padding: 0;
}

    .ps-ai-preview-pager-btn:hover:not(:disabled) {
        border-color: var(--sj-orange, #F58220);
        color: var(--sj-orange, #F58220);
        background: rgba(245, 130, 32, 0.06);
    }

    .ps-ai-preview-pager-btn:active:not(:disabled) {
        transform: scale(0.94);
    }

    .ps-ai-preview-pager-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

.ps-ai-preview-pager-info {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sj-muted, #64748B);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

/* When the pager is present we want the description to keep a
   stable height so paging doesn't make the rail jump. The container
   already caps height via the scene 7 compact rules; here we just
   make sure paginated text doesn't push the pager out of view. */
#psRight6 #psPreviewDesc {
    white-space: pre-wrap;
}

/* ============================================================
   SCENE 7 — AI PREVIEW MIRROR (sibling-mirror pattern)
   ------------------------------------------------------------
   The guardian in private-seller.js hides #psPreviewDesc when
   the AI description has 4+ paragraphs and renders this mirror
   next to it. Visual identity matches the original preview text
   so the user perceives a single, paginated card.
   ============================================================ */
.ps-ai-preview-mirror {
    margin: 0;
    /* Mirror text inherits the same look as the original preview text. */
}

#psRight6 .ps-ai-preview-mirror-text {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--sj-dark, #1A1D20);
    margin: 0;
    white-space: pre-wrap;
}

/* Pager styling (also rendered inside the mirror — same look as before). */
.ps-ai-preview-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.ps-ai-preview-pager-btn {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    color: var(--sj-dark, #1A1D20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    font-size: 0.78rem;
    padding: 0;
}

    .ps-ai-preview-pager-btn:hover:not(:disabled) {
        border-color: var(--sj-orange, #F58220);
        color: var(--sj-orange, #F58220);
        background: rgba(245, 130, 32, 0.06);
    }

    .ps-ai-preview-pager-btn:active:not(:disabled) {
        transform: scale(0.94);
    }

    .ps-ai-preview-pager-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

.ps-ai-preview-pager-info {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sj-muted, #64748B);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   SCENE 7 — RIGHT RAIL CHATBOT CLEARANCE
   ------------------------------------------------------------
   The floating chatbot sits in the bottom-right of the viewport
   and was covering the Next chevron of the pagination pager.
   Add bottom padding to the rail so the pager floats ~80px
   above the chatbot. Scoped to #psRight6 only.
   ============================================================ */
#psRight6 {
    padding-bottom: 110px !important;
}

/* On smaller heights, trim the clearance so the rail doesn't
   feel hollow but still keeps the pager clear of the chatbot. */
@media (max-height: 820px) {
    #psRight6 {
        padding-bottom: 96px !important;
    }
}

@media (max-height: 640px) {
    #psRight6 {
        padding-bottom: 80px !important;
    }
}

/* Belt-and-braces: make the mirror's pager sit a bit further up
   from the bottom edge so even with custom chatbots the chevrons
   stay tappable. */
#psRight6 .ps-ai-preview-mirror {
    margin-bottom: 24px;
}

/* ============================================================
   SCENE 7 — AI PREVIEW CARD INTERNAL SCROLL  (CSS-only safety)
   ------------------------------------------------------------
   Pure CSS belt-and-braces — guarantees the AI Preview card
   never overflows the rail, regardless of what JS is doing.
   If our pagination guardian engages, the pager renders inside
   this scrollable card; if not, the user gets a normal slim
   scrollbar and can still read every paragraph.
   ============================================================ */
#psRight6 .ps-ai-preview {
    /* Use the rail's flex sizing to compute a sane cap. */
    max-height: calc(100vh - 320px);
    min-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Slim scrollbar so the user knows they can scroll if pagination
       didn't engage. */
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 130, 32, 0.4) transparent;
}

    #psRight6 .ps-ai-preview::-webkit-scrollbar {
        width: 6px;
    }

    #psRight6 .ps-ai-preview::-webkit-scrollbar-track {
        background: transparent;
    }

    #psRight6 .ps-ai-preview::-webkit-scrollbar-thumb {
        background-color: rgba(245, 130, 32, 0.35);
        border-radius: 3px;
    }

        #psRight6 .ps-ai-preview::-webkit-scrollbar-thumb:hover {
            background-color: rgba(245, 130, 32, 0.6);
        }

/* Bump rail bottom clearance — chatbot icon is ~50–80px tall and
   sits in the bottom-right; 130px keeps the AI Preview card's
   scrollbar AND its pager well above it. */
#psRight6 {
    padding-bottom: 130px !important;
}

@media (max-height: 820px) {
    #psRight6 {
        padding-bottom: 110px !important;
    }

        #psRight6 .ps-ai-preview {
            max-height: calc(100vh - 280px);
        }
}

@media (max-height: 640px) {
    #psRight6 {
        padding-bottom: 90px !important;
    }

        #psRight6 .ps-ai-preview {
            max-height: calc(100vh - 240px);
        }
}

/* ============================================================================
   V8 MOBILE DNA PICKER — HORIZONTAL SLIDER + JOG WHEEL + SUBTYPE SHEET
   ----------------------------------------------------------------------------
   Premium horizontal slider for count fields (beds/baths/levels/garages) —
   icon + label + brand-orange fill track + big tappable readout. Drag the
   thumb for 0–10; tap the readout for overflow values (prompt).
   Size fields (floor/erf) keep the jog-wheel drum + editable readout.
   ============================================================================ */

@media (max-width: 768px) {
    /* ── 1 metric per row — override every upstream 2-col rule ──── */
    .ps-scene#psScene2 .ps-dna-panel-metrics .ps-dna-grid,
    .ps-scene-dna .ps-dna-panel-metrics .ps-dna-grid,
    .ps-dna-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .ps-metric-tile--mobile {
        grid-column: 1 / -1 !important;
    }

        /* Hide legacy +/− stepper everywhere on mobile. */
        .ps-metric-tile--mobile .ps-stepper {
            display: none !important;
        }

    /* ── Card chrome ──────────────────────────────────────────── */
    .ps-scene#psScene2 .ps-metric-tile--mobile,
    .ps-scene-dna .ps-metric-tile--mobile,
    .ps-metric-tile--mobile {
        display: block !important;
        width: 100% !important;
        padding: 12px 14px !important;
        min-height: 0 !important;
        height: auto !important;
        background: #fff !important;
        border: 1.5px solid rgba(0,0,0,0.07) !important;
        border-radius: 14px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    }

        /* ── HORIZONTAL SLIDER ROW (count fields) ─────────────────── */
        .ps-metric-tile--mobile .ps-slider-row {
            display: flex !important;
            align-items: center;
            gap: 10px;
            width: 100%;
        }

        .ps-metric-tile--mobile .ps-slider-icon {
            flex: 0 0 auto;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: rgba(245,130,32,0.10);
            color: var(--sj-orange);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
        }

        .ps-metric-tile--mobile .ps-slider-label {
            flex: 0 0 auto;
            font-size: 0.72rem !important;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #6B7280;
            min-width: 70px;
            max-width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Slider track + fill */
        .ps-metric-tile--mobile .ps-slider-track-wrap {
            flex: 1 1 auto;
            position: relative;
            height: 22px;
            display: flex;
            align-items: center;
            min-width: 0;
        }

            .ps-metric-tile--mobile .ps-slider-track-wrap::before {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                height: 6px;
                background: #E5E7EB;
                border-radius: 3px;
                transform: translateY(-50%);
            }

        .ps-metric-tile--mobile .ps-slider-fill {
            position: absolute;
            left: 0;
            top: 50%;
            height: 6px;
            background: linear-gradient(90deg, #F58220 0%, #FFA34D 100%);
            border-radius: 3px;
            transform: translateY(-50%);
            pointer-events: none;
            transition: width 0.05s linear;
            will-change: width;
        }
        /* Hide native slider rendering, keep it tappable above the fill */
        .ps-metric-tile--mobile .ps-slider {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: transparent;
            -webkit-appearance: none;
            appearance: none;
            outline: none;
            cursor: grab;
            z-index: 2;
        }

            .ps-metric-tile--mobile .ps-slider:active {
                cursor: grabbing;
            }
            /* Thumb — Webkit/Blink */
            .ps-metric-tile--mobile .ps-slider::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: #fff;
                border: 2.5px solid var(--sj-orange, #F58220);
                box-shadow: 0 2px 6px rgba(0,0,0,0.15);
                cursor: grab;
                margin-top: 0;
                transition: transform 0.1s ease, box-shadow 0.1s ease;
            }

            .ps-metric-tile--mobile .ps-slider:active::-webkit-slider-thumb {
                transform: scale(1.12);
                box-shadow: 0 4px 12px rgba(245,130,32,0.30);
            }
            /* Thumb — Firefox */
            .ps-metric-tile--mobile .ps-slider::-moz-range-thumb {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: #fff;
                border: 2.5px solid var(--sj-orange, #F58220);
                box-shadow: 0 2px 6px rgba(0,0,0,0.15);
                cursor: grab;
            }

            .ps-metric-tile--mobile .ps-slider::-webkit-slider-runnable-track,
            .ps-metric-tile--mobile .ps-slider::-moz-range-track {
                background: transparent;
                height: 6px;
                border: 0;
            }

        /* Readout — big tap-to-edit number */
        .ps-metric-tile--mobile .ps-slider-readout {
            flex: 0 0 auto;
            min-width: 32px;
            height: 32px;
            padding: 0 8px;
            border: 0;
            background: transparent;
            font-family: inherit;
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--sj-dark, #1F2937);
            font-variant-numeric: tabular-nums;
            line-height: 1;
            text-align: right;
            cursor: pointer;
            -webkit-tap-highlight-color: rgba(245,130,32,0.10);
            border-radius: 6px;
            transition: background 0.12s;
        }

            .ps-metric-tile--mobile .ps-slider-readout:active {
                background: rgba(245,130,32,0.08);
            }

            .ps-metric-tile--mobile .ps-slider-readout.is-overflow {
                color: var(--sj-orange, #F58220);
            }

        /* ── SIZE FIELDS — jog wheel + editable readout (unchanged) ─── */
        .ps-metric-tile--mobile .ps-metric-tile-head {
            display: flex !important;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .ps-metric-tile--mobile .ps-metric-icon {
            width: 28px !important;
            height: 28px !important;
            min-width: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: rgba(245,130,32,0.10);
            color: var(--sj-orange);
            font-size: 0.9rem;
            margin-bottom: 0 !important;
        }

        .ps-metric-tile--mobile .ps-dna-label {
            flex: 1 1 auto;
            font-size: 0.72rem !important;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #6B7280;
            margin-bottom: 0 !important;
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ps-metric-tile--mobile .ps-jog-readout {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: baseline;
            gap: 4px;
            padding: 6px 10px;
            border: 1.5px solid rgba(0,0,0,0.08);
            border-radius: 10px;
            background: #fff;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

            .ps-metric-tile--mobile .ps-jog-readout:focus-within {
                border-color: var(--sj-orange, #F58220);
                box-shadow: 0 0 0 3px rgba(245,130,32,0.12);
            }

        .ps-metric-tile--mobile .ps-jog-input {
            border: 0 !important;
            outline: 0 !important;
            background: transparent !important;
            padding: 0 !important;
            width: 56px !important;
            font-size: 1.05rem !important;
            font-weight: 800 !important;
            color: var(--sj-dark, #1F2937) !important;
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-family: inherit;
            -moz-appearance: textfield;
        }

            .ps-metric-tile--mobile .ps-jog-input::-webkit-outer-spin-button,
            .ps-metric-tile--mobile .ps-jog-input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

        .ps-metric-tile--mobile .ps-jog-unit {
            font-size: 0.72rem;
            font-weight: 700;
            color: #6B7280;
            letter-spacing: 0.03em;
        }

        .ps-metric-tile--mobile .ps-jog-wheel {
            position: relative;
            margin-top: 4px;
            padding: 4px 0 2px;
        }

        .ps-metric-tile--mobile .ps-jog-track {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
            padding: 4px 50%;
            scrollbar-width: none;
            scroll-behavior: smooth;
        }

            .ps-metric-tile--mobile .ps-jog-track::-webkit-scrollbar {
                display: none;
            }

        .ps-metric-tile--mobile .ps-jog-rung {
            flex: 0 0 auto;
            scroll-snap-align: center;
            /* v2: rung sized to match the .ps-dna-label heading (0.72rem).
               Previous 0.92rem made the numbers visually dominant against
               their own section title — on a narrow phone the "40 / 60 /
               80 / 1000 / 1500" pills shouted louder than the FLOOR SIZE
               header above them. Bringing the rung type-size to parity
               with the label restores the original visual hierarchy
               (label leads → value supports). min-width drops from 56px
               to 48px and padding tightens so the smaller numerals
               don't float in an over-large pill. */
            min-width: 48px;
            height: 38px;
            padding: 0 10px;
            border-radius: 10px;
            border: 1.5px solid rgba(0,0,0,0.08);
            background: #fff;
            color: var(--sj-dark, #1F2937);
            font-size: 0.72rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.02em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.08s;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            user-select: none;
            font-family: inherit;
        }

            .ps-metric-tile--mobile .ps-jog-rung:active {
                transform: scale(0.95);
            }

            .ps-metric-tile--mobile .ps-jog-rung.is-selected {
                background: var(--sj-orange, #F58220);
                border-color: var(--sj-orange, #F58220);
                color: #fff;
                box-shadow: 0 4px 12px rgba(245,130,32,0.24);
                /* The selected rung steps up a hair (0.78rem) so the
                   active value reads as the focal point without breaking
                   the calm hierarchy the un-selected rungs establish. */
                font-size: 0.78rem;
                font-weight: 800;
            }

        .ps-metric-tile--mobile .ps-jog-needle {
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 2px;
            height: 6px;
            background: rgba(245,130,32,0.6);
            border-radius: 1px;
            transform: translateX(-50%);
            pointer-events: none;
        }
}

/* ============================================================================
   SUBTYPE ANCHORED DROPDOWN (Scene 2 / mobile)
   ----------------------------------------------------------------------------
   Originally a full-screen bottom sheet. The user reported it should render
   like a normal anchored dropdown — small panel right under the trigger,
   not a sheet that takes over the whole screen — and that tapping the
   chevron icon on the right edge of the trigger should also close the
   open picker, not require tapping the middle.

   The new implementation:
     • Trigger button stays the same shape and behaves like a <select>.
     • The PANEL is absolutely positioned inside .ps-subtype-select-wrap
       (which is already position:relative via private-seller-mobile-fixes.css),
       so it appears directly below the trigger.
     • The whole trigger is one click target. pointer-events:none on the
       inner label + caret means even chevron-icon clicks bubble cleanly
       to the trigger button itself.
   ============================================================================ */
.ps-subtype-trigger {
    display: none;
}

.ps-subtype-anchored-panel {
    display: none;
}
/* desktop default — picker only renders on mobile */

@media (max-width: 768px) {
    .ps-subtype-select-wrap .ps-subtype-select {
        position: absolute !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 100% !important;
        height: 100% !important;
        left: 0;
        top: 0;
    }

    .ps-subtype-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 52px;
        padding: 12px 16px;
        border: 1.5px solid rgba(0,0,0,0.10);
        border-radius: 12px;
        background: #fff;
        color: var(--sj-dark, #1F2937);
        font-size: 0.95rem;
        font-weight: 700;
        font-family: inherit;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(245,130,32,0.08);
        touch-action: manipulation;
        transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
        position: relative;
        z-index: 2;
    }

        .ps-subtype-trigger:active {
            background: #FFF7ED;
            border-color: rgba(245,130,32,0.40);
        }

        .ps-subtype-trigger.is-open {
            border-color: var(--sj-orange, #F58220);
            box-shadow: 0 0 0 3px rgba(245,130,32,0.12);
        }

        .ps-subtype-trigger.is-placeholder .ps-subtype-trigger-label {
            color: #9CA3AF;
            font-weight: 600;
        }

    .ps-subtype-trigger-label {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 12px;
        /* pointer-events:none — so clicks bubble through to the
           parent <button> and the trigger as a whole is one tap zone. */
        pointer-events: none;
    }

    .ps-subtype-trigger-caret {
        flex: 0 0 auto;
        color: var(--sj-orange, #F58220);
        font-size: 1rem;
        font-weight: 700;
        transition: transform 0.18s ease;
        /* pointer-events:none means tapping the chevron also fires the
           trigger's click handler — the bug fix the user asked for. */
        pointer-events: none;
    }

    .ps-subtype-trigger.is-open .ps-subtype-trigger-caret {
        transform: rotate(180deg);
    }

    /* ── Anchored panel: sits directly below the trigger ───────────── */
    .ps-subtype-anchored-panel {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 60;
        max-height: 280px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        border: 1.5px solid rgba(0,0,0,0.10);
        border-radius: 12px;
        padding: 6px;
        box-shadow: 0 12px 32px rgba(0,0,0,0.14);
        /* Hidden until .is-open is toggled */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
        pointer-events: none;
    }

        .ps-subtype-anchored-panel.is-open {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.16s ease, transform 0.16s ease;
            pointer-events: auto;
        }

    .ps-subtype-anchored-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        margin: 0;
        border: none;
        border-radius: 8px;
        background: transparent;
        font-size: 0.92rem;
        font-weight: 600;
        font-family: inherit;
        color: var(--sj-dark, #1F2937);
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(245,130,32,0.08);
        touch-action: manipulation;
        transition: background 0.12s;
    }

        .ps-subtype-anchored-item:hover {
            background: rgba(245,130,32,0.06);
        }

        .ps-subtype-anchored-item:active {
            background: #FFF7ED;
        }

        .ps-subtype-anchored-item.is-selected {
            background: rgba(245,130,32,0.10);
            color: var(--sj-orange, #F58220);
            font-weight: 800;
        }

    .ps-subtype-anchored-item-label {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 8px;
    }

    .ps-subtype-anchored-item-check {
        opacity: 0;
        color: var(--sj-orange, #F58220);
        font-size: 1.05rem;
        font-weight: 800;
        margin-left: 8px;
        flex: 0 0 auto;
    }

    .ps-subtype-anchored-item.is-selected .ps-subtype-anchored-item-check {
        opacity: 1;
    }

    /* Keep the wrap above sibling rows so its overflowing panel
       isn't visually clipped. */
    .ps-subtype-select-wrap {
        position: relative !important;
        z-index: 5;
    }

        /* z-index MUST beat .ps-nav (z-index: 80 from the V9 sticky-footer rule)
           so the open dropdown panel floats above the Back/Continue bar on mobile. */
        .ps-subtype-select-wrap:has(.ps-subtype-anchored-panel.is-open) {
            z-index: 120 !important;
        }
}
/* ============================================================================
   END SUBTYPE ANCHORED DROPDOWN
   ============================================================================ */
/* ============================================================================
   V9 MOBILE FINISHING TOUCHES
   ----------------------------------------------------------------------------
   • Sticky scene header (breadcrumb · progress · label · title · subtitle)
   • Sticky scene footer (Back / Continue nav)
   • Middle content area is the only scrollable region
   • Scene 1 category grid: 2 columns even on phones ≤480 px
     so all 9 categories fit in one tap-reach without long-scroll
   • Consistent readout font size across slider + jog (1.15 rem)
   ============================================================================ */
@media (max-width: 768px) {
    /* ── Sticky scene layout ──────────────────────────────────── */
    /* The scene is already flex-column on mobile (line 1611). We pin
       the header chrome to the top and the nav to the bottom so only
       the middle (cat-grid, dna-grid, location card, etc.) scrolls. */
    .ps-scene .ps-left {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

        /* Sticky head: every element above the scrollable body */
        .ps-scene .ps-left .ps-breadcrumb,
        .ps-scene .ps-left .ps-progress,
        .ps-scene .ps-left .ps-scene-label,
        .ps-scene .ps-left .ps-question,
        .ps-scene .ps-left .ps-subtitle,
        .ps-scene .ps-left .ps-subtype-select-wrap,
        .ps-scene .ps-left .ps-panel-kicker,
        .ps-scene .ps-left .ps-panel-title,
        .ps-scene .ps-left .ps-dna-heading {
            flex: 0 0 auto !important;
        }

        /* Scrollable body — the FIRST grid/list/container after the
       header text. Covers cat-grid (Scene 1), chip-grid + banner
       (Scene 2), dna-grid + spatial anchor (Scene 3). */
        .ps-scene .ps-left .ps-cat-grid,
        .ps-scene .ps-left .ps-chip-grid,
        .ps-scene .ps-left .ps-subtype-banner,
        .ps-scene .ps-left .ps-dna-grid,
        .ps-scene .ps-left .ps-dna-workarea,
        .ps-scene .ps-left .ps-dna-panel-metrics {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        /* Sticky footer — nav stays pinned at bottom */
        .ps-scene .ps-left .ps-nav,
        .ps-scene .ps-left .ps-nav-dna {
            flex: 0 0 auto !important;
            position: sticky !important;
            bottom: 0 !important;
            z-index: 80 !important;
            background: #fff !important;
            padding-top: 10px !important;
            padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
            margin-top: 0 !important;
            border-top: 1px solid rgba(0,0,0,0.05) !important;
        }

    /* ── Scene 1 — show ALL categories in viewport (2-col) ────── */
    .ps-scene#psScene0 .ps-cat-grid,
    .ps-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 2px 2px 12px 2px !important;
        align-content: start !important;
    }

    /* Each category tile becomes compact: icon left + 2-line label */
    .ps-scene#psScene0 .ps-cat-card,
    .ps-cat-card {
        min-height: 0 !important;
        padding: 10px 10px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: left !important;
        border-radius: 12px !important;
    }

        .ps-scene#psScene0 .ps-cat-icon,
        .ps-cat-card .ps-cat-icon {
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            font-size: 1.05rem !important;
            margin: 0 !important;
            border-radius: 9px !important;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-name,
        .ps-cat-card .ps-cat-name {
            flex: 1 1 auto !important;
            font-size: 0.82rem !important;
            font-weight: 800 !important;
            line-height: 1.18 !important;
            margin: 0 !important;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-meta,
        .ps-cat-card .ps-cat-meta {
            display: block !important;
            font-size: 0.66rem !important;
            color: var(--sj-muted, #6B7280) !important;
            margin-top: 2px !important;
            line-height: 1.2 !important;
        }

    /* Shrink Scene 1 heading slightly so the grid has room */
    .ps-scene#psScene0 .ps-question {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }

    .ps-scene#psScene0 .ps-subtitle {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ── Consistent readout font size on Scene 3 ──────────────── */
    /* Slider readout and jog input use the SAME numeric size so the
       column reads as one harmonious system.
       v2: stepped down from 1.15rem to 0.95rem to align with the new
       rung type-size (0.72/0.78rem) and prevent the readout pill from
       visually swallowing the label above it. 0.95rem keeps it
       legible without thumb gymnastics — the readout is still the
       prominent number, just no longer SHOUTY. */
    .ps-metric-tile--mobile .ps-slider-readout,
    .ps-metric-tile--mobile .ps-jog-input {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .ps-metric-tile--mobile .ps-slider-readout {
        min-width: 36px;
        padding: 0 6px;
    }

    .ps-metric-tile--mobile .ps-jog-input {
        width: 52px !important;
    }

    /* Make the metric tile margins zero-bottom so the scroll body breathes properly */
    .ps-metric-tile--mobile {
        margin-bottom: 8px !important;
    }

        /* ── Long-translation overflow handling ──────────────────────────
       Several SA languages (especially Nguni and Sotho families) form
       compound words that are MUCH longer than the English source —
       "Bedrooms" → isiZulu "Amagumbi okulala", isiXhosa "Amagumbi
       okulala", Sepedi "Dikamore tša go robala" (3 separate words!).
       Without intervention, the label either truncates with an
       ellipsis (losing meaning) or pushes the stepper/jog control off
       the tile (breaking the grid).

       Strategy:
         • Allow up to 2 lines of wrapping (-webkit-line-clamp-2).
         • Shrink letter-spacing because uppercase + tracking eats
           horizontal room fast.
         • Break-word fallback for the rare case where one token
           itself overflows.
         • Reduce the icon→label gap so wraps don't collide.

       Scoped to the mobile tile only — desktop has plenty of room
       per row and the original styling is preserved.
       ──────────────────────────────────────────────────────────── */
        .ps-metric-tile--mobile .ps-dna-label {
            flex: 1 1 auto;
            min-width: 0;
            max-width: 100%;
            line-height: 1.15;
            letter-spacing: 0.04em;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
            hyphens: auto;
            /* Allow up to 2 lines; cap with ellipsis if a translation
           somehow exceeds even that. */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }
            /* Slightly tighter icon→text gap for translated labels — the
           icon never wraps so it can sit closer. */
            .ps-metric-tile--mobile .ps-dna-label i {
                flex: 0 0 auto;
                margin-right: 2px;
            }

        /* Tile head row: let label flex, lock the stepper/readout to its
       natural width so the label takes the remaining space without
       pushing the control off the right edge. */
        .ps-metric-tile--mobile .ps-stepper-control,
        .ps-metric-tile--mobile .ps-jog-readout-wrap,
        .ps-metric-tile--mobile .ps-slider-readout-wrap {
            flex: 0 0 auto;
        }

    /* On very narrow phones (handled in the top-level
       @media (max-width: 380px) block below) the label needs an extra
       notch smaller — that rule lives there, not here, because
       nested @media queries aren't safely supported in older mobile
       Safari (12.x / 13.x) which is still common on devices in SA. */

    /* Padding at the bottom of the scrollable body so the last item
       isn't hidden behind the sticky nav. */
    .ps-scene .ps-left .ps-cat-grid,
    .ps-scene .ps-left .ps-dna-grid {
        padding-bottom: 12px !important;
    }
}

/* Very narrow phones — still 2 columns, tighter padding */
@media (max-width: 380px) {
    .ps-scene#psScene0 .ps-cat-grid,
    .ps-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .ps-scene#psScene0 .ps-cat-card,
    .ps-cat-card {
        padding: 9px 9px !important;
    }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-name,
        .ps-cat-card .ps-cat-name {
            font-size: 0.78rem !important;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-meta,
        .ps-cat-card .ps-cat-meta {
            font-size: 0.62rem !important;
        }

    /* Long-translation safeguard at narrow widths. Combined with the
       2-line clamp added in the @media (max-width: 768px) block above,
       this keeps DNA labels readable on the smallest production phones
       (iPhone SE 1st-gen, Samsung A04) when Sepedi/Setswana/isiZulu
       translations balloon by 2–3× over English. */
    .ps-metric-tile--mobile .ps-dna-label {
        font-size: 0.62rem;
        letter-spacing: 0.02em;
    }
}
/* ============================================================================
   END V9 MOBILE FINISHING TOUCHES
   ============================================================================ */
/* ============================================================================
   V10 MOBILE — SCENE 3 (DNA BUILDER) STICKY HEADER + SCROLLABLE BODY
   ----------------------------------------------------------------------------
   The user reported: "scrollbar does not show rest of form on mobile, I was
   trying to freeze the top part and make it sticky with back and continue
   and only get the body to move."

   Layout strategy (clean flex, no sticky/position juggling):

     .ps-scene-dna  (display:flex, flex-direction:column, height:100% of pane)
        ├── .ps-dna-left  (flex:1 1 auto, min-height:0, overflow:hidden, flex column)
        │      ├── breadcrumb         (flex:0 0 auto — pinned at top)
        │      ├── progress           (flex:0 0 auto — pinned at top)
        │      ├── scene-label        (flex:0 0 auto — pinned at top)
        │      ├── question           (flex:0 0 auto — pinned at top)
        │      ├── subtitle           (flex:0 0 auto — pinned at top)
        │      └── .ps-dna-workarea   (flex:1 1 auto, min-height:0, overflow-y:auto)
        │             ├── spatial anchor card
        │             └── metrics panel + form grid
        ├── .ps-right                 (hidden on mobile)
        └── .ps-nav-dna               (flex:0 0 auto — pinned at bottom)

   Notes:
     - We use flex (not position:sticky) so there is exactly ONE scroll
       container (.ps-dna-workarea) and the back/continue nav is just a
       sibling that never moves.
     - The previous v10 implementation targeted ".ps-dna-heading" which
       does not exist in the markup — the elements are ".ps-scene-label",
       ".ps-question", ".ps-subtitle". Sticky never applied, the whole
       column scrolled and the user couldn't reach the form fields below.
     - Category overflow (point 2 of the original v10 comment) is kept
       — that part was working correctly.
   ============================================================================ */
@media (max-width: 768px) {
    /* ── Scene 3 column layout: top chrome / scrolling body / bottom nav ── */
    .ps-scene#psScene2.ps-scene-dna,
    .ps-scene-dna {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

        /* The left column owns the chrome AND the scrollable workarea. */
        .ps-scene-dna .ps-dna-left,
        .ps-scene#psScene2 .ps-dna-left {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 auto !important;
            min-height: 0 !important;
            height: auto !important;
            overflow: hidden !important;
            padding-bottom: 0 !important;
        }

            /* Header chrome — never shrink, never scroll. */
            .ps-scene-dna .ps-dna-left > .ps-breadcrumb,
            .ps-scene-dna .ps-dna-left > .ps-progress,
            .ps-scene-dna .ps-dna-left > .ps-scene-label,
            .ps-scene-dna .ps-dna-left > .ps-question,
            .ps-scene-dna .ps-dna-left > .ps-subtitle,
            .ps-scene#psScene2 .ps-dna-left > .ps-breadcrumb,
            .ps-scene#psScene2 .ps-dna-left > .ps-progress,
            .ps-scene#psScene2 .ps-dna-left > .ps-scene-label,
            .ps-scene#psScene2 .ps-dna-left > .ps-question,
            .ps-scene#psScene2 .ps-dna-left > .ps-subtitle {
                flex: 0 0 auto !important;
                background: #fff !important;
            }

            /* The single scrollable region — the workarea holds the location
       card + metrics panel + dna-grid (all the form fields). */
            .ps-scene-dna .ps-dna-left > .ps-dna-workarea,
            .ps-scene#psScene2 .ps-dna-left > .ps-dna-workarea {
                flex: 1 1 auto !important;
                min-height: 0 !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                /* Force single-column stacking inside the workarea on mobile —
           desktop's 2-column grid (.ps-dna-workarea sets grid-template-
           columns) would crush each panel to half the available width. */
                display: flex !important;
                flex-direction: column !important;
                grid-template-columns: none !important;
                gap: 12px !important;
                padding: 4px 2px 16px 2px !important;
            }

                /* Inner panels stop being height-constrained — they grow to their
       natural content height inside the scrolling parent. */
                .ps-scene-dna .ps-dna-left > .ps-dna-workarea > .ps-dna-panel,
                .ps-scene#psScene2 .ps-dna-left > .ps-dna-workarea > .ps-dna-panel {
                    flex: 0 0 auto !important;
                    min-height: 0 !important;
                    height: auto !important;
                    overflow: visible !important;
                }

            /* The DNA-grid (rows of metric tiles) flows naturally inside the
       metrics panel. Avoid double-scroll: only the workarea scrolls. */
            .ps-scene-dna .ps-dna-left .ps-dna-panel-metrics .ps-dna-grid,
            .ps-scene#psScene2 .ps-dna-left .ps-dna-panel-metrics .ps-dna-grid {
                overflow: visible !important;
                max-height: none !important;
                height: auto !important;
            }

            /* The location card likewise — let it grow with its content. */
            .ps-scene-dna .ps-dna-left .ps-dna-panel-location .ps-location-card,
            .ps-scene#psScene2 .ps-dna-left .ps-dna-panel-location .ps-location-card {
                height: auto !important;
                overflow: visible !important;
            }

            /* The location map needs a real height in pixels on mobile —
       collapsing to flex auto-height leaves it 0px tall. */
            .ps-scene-dna .ps-dna-left .ps-dna-panel-location .ps-location-map,
            .ps-scene#psScene2 .ps-dna-left .ps-dna-panel-location .ps-location-map {
                min-height: 180px !important;
                height: 200px !important;
            }

        /* The bottom nav (Back / Continue) — direct child of .ps-scene-dna,
       sticky at the bottom of the column. */
        .ps-scene-dna > .ps-nav-dna,
        .ps-scene#psScene2 > .ps-nav-dna {
            position: relative !important;
            flex: 0 0 auto !important;
            background: #fff !important;
            padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important;
            border-top: 1px solid rgba(0,0,0,0.05) !important;
            z-index: 80 !important;
            margin: 0 !important;
        }

        /* Hide the validation nudge from cramming the nav row — let it
       sit ABOVE the buttons on its own line. */
        .ps-scene-dna > .ps-nav-dna,
        .ps-scene#psScene2 > .ps-nav-dna {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 8px !important;
        }

            .ps-scene-dna > .ps-nav-dna .ps-dna-validation-nudge,
            .ps-scene#psScene2 > .ps-nav-dna .ps-dna-validation-nudge {
                order: -1 !important;
                flex: 1 1 100% !important;
                text-align: center !important;
                font-size: 0.78rem !important;
            }

    /* ── 2. Category names / meta — allow 2-line clamp (unchanged) ──── */
    .ps-scene#psScene0 .ps-cat-card,
    .ps-cat-card {
        align-items: center !important;
        gap: 8px !important;
        padding: 9px 9px !important;
        min-height: 54px !important;
    }
        /* The .ps-cat-name and .ps-cat-meta are sibling spans inside the card. */
        .ps-scene#psScene0 .ps-cat-card .ps-cat-name,
        .ps-cat-card .ps-cat-name {
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
            font-size: 0.78rem !important;
            font-weight: 800 !important;
            line-height: 1.15 !important;
            color: var(--sj-dark, #1F2937) !important;
            white-space: normal !important;
            text-overflow: clip !important;
            word-break: break-word;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-meta,
        .ps-cat-card .ps-cat-meta {
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
            font-size: 0.62rem !important;
            color: var(--sj-muted, #6B7280) !important;
            line-height: 1.2 !important;
            margin-top: 2px !important;
            white-space: normal !important;
            text-overflow: clip !important;
        }

        .ps-scene#psScene0 .ps-cat-icon,
        .ps-cat-card .ps-cat-icon {
            width: 30px !important;
            height: 30px !important;
            min-width: 30px !important;
            font-size: 1rem !important;
        }

    /* Tighter scene 1 heading on mobile — gives the grid more room */
    .ps-scene#psScene0 .ps-question {
        font-size: 1.18rem !important;
        line-height: 1.18 !important;
        margin-bottom: 4px !important;
    }

    .ps-scene#psScene0 .ps-subtitle {
        font-size: 0.74rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Narrow phones: even smaller type so 2 columns still fit comfortably */
@media (max-width: 380px) {
    .ps-scene#psScene0 .ps-cat-card,
    .ps-cat-card {
        padding: 8px 8px !important;
        gap: 7px !important;
    }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-name,
        .ps-cat-card .ps-cat-name {
            font-size: 0.74rem !important;
        }

        .ps-scene#psScene0 .ps-cat-card .ps-cat-meta,
        .ps-cat-card .ps-cat-meta {
            font-size: 0.58rem !important;
        }

        .ps-scene#psScene0 .ps-cat-icon,
        .ps-cat-card .ps-cat-icon {
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            font-size: 0.92rem !important;
        }
}
/* ============================================================================
   END V10 MOBILE — SCENE 3 STICKY HEADER + CATEGORY OVERFLOW
   ============================================================================ */
/* ============================================================================
   V11 — TRANSLATION OVERFLOW SAFETY
   ----------------------------------------------------------------------------
   Many SA languages (especially Zulu/Xhosa) are 30–60% longer than English.
   This block lets text-bearing UI elements grow gracefully and never get
   truncated:
   • Location summary overlay on the map → up to 4 lines, card grows vertically
   • Right-panel intel insights → no fixed height, allow wrap
   • Strategy cards (Scene 6) → flex column, body wraps naturally
   ============================================================================ */

/* Location summary on map — let it grow with content (was 2-line clamp) */
.ps-dna-panel-location .ps-location-summary {
    max-width: min(80%, 360px) !important;
    width: auto !important;
}

    .ps-dna-panel-location .ps-location-summary span {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 4 !important;
        line-clamp: 4 !important;
        overflow: hidden !important;
        line-height: 1.35 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    .ps-dna-panel-location .ps-location-summary strong {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        line-height: 1.25 !important;
    }

@media (max-width: 560px) {
    .ps-dna-panel-location .ps-location-summary {
        max-width: min(88%, 280px) !important;
    }

        .ps-dna-panel-location .ps-location-summary span {
            display: -webkit-box !important;
            -webkit-line-clamp: 3 !important;
        }
}

/* Right-panel intel insights — wrap freely, no fixed height */
.ps-intel-card .ps-intel-insight,
.ps-intel-insight {
    height: auto !important;
    overflow: visible !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: unset !important;
}

/* Scene 6 strategy cards — let body grow */
.ps-strategy-card,
.ps-strategy-card .ps-strategy-card-text {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    height: auto !important;
}

/* Feature chips, persona names — wrap if needed instead of overflowing */
.ps-lane-chip-label,
.ps-lane-name,
.ps-lane-blurb,
.ps-persona-bar-name {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    overflow: visible !important;
}
/* But constrain chip height so it doesn't become massive */
.ps-lane-chip {
    min-height: 36px;
    align-items: center;
}

/* AI Preview card on Scene 7 — grow with content */
.ps-ai-preview,
.ps-ai-preview-text,
.ps-ai-preview-section {
    height: auto !important;
    overflow: visible !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
/* ============================================================================
   END V11 TRANSLATION OVERFLOW SAFETY
   ============================================================================ */

/* ============================================================================
   OFF-SCREEN SCENE QUIESCING  (performance — added with the Scene 3 work)
   ----------------------------------------------------------------------------
   The Sell journey is a translateX carousel: ALL scenes stay mounted side by
   side and the track slides between them. Without intervention, every
   off-screen scene keeps running its CSS animations every frame — eight
   scenes' worth of pulses, shimmers and spinners ticking on the compositor at
   once. That steady background cost is why earlier steps felt sluggish even
   though nothing on them was changing.

   goToScene() in private-seller.js stamps the on-screen scene with
   .ps-scene-active (Scene 0 carries it at first paint). The rule below pauses
   animations on every OTHER scene. They resume the instant a scene becomes
   active, so this is visually a no-op — the rule only ever applies to scenes
   the user cannot see. The only runtime cost is one class toggle per
   navigation.

   Deliberately NOT used here:
     • content-visibility / contain on .ps-scene — either would make the scene
       the containing block for its fixed/absolute descendants, which would
       break the auth, AI-composer and payment modals that live inside scenes.
     • a universal backdrop-filter override — the two blurs that actually cost
       anything (the live-map summary overlay and the per-keystroke autocomplete
       dropdown) are removed at their source above; the rest sit over static
       content off-screen and never recompute.
   ============================================================================ */
.ps-scene:not(.ps-scene-active) *,
.ps-scene:not(.ps-scene-active) *::before,
.ps-scene:not(.ps-scene-active) *::after {
    animation-play-state: paused !important;
}

/* ============================================================================
   ARCHITECTURE: RENDER ONLY THE ON-SCREEN SCENE  (the big lever)
   ----------------------------------------------------------------------------
   The journey mounts all 11 scenes side-by-side in one translateX track, so
   the browser was painting, compositing AND animating every scene at once —
   including Scene 3's live Google Map and Street View — no matter which step
   the user was on. That is the dominant, cross-scene cost: no amount of JS
   tuning helps while the compositor is juggling eleven full-screen layers.

   content-visibility:auto tells the browser to skip ALL rendering work
   (layout, paint, compositing, and CSS animations) for any scene that isn't
   intersecting the viewport. The active scene is forced `visible` so it's
   always fully rendered; during a slide BOTH the outgoing and incoming scenes
   intersect the viewport and therefore render, so the transition stays smooth
   with no blank flash. Everything else costs essentially nothing until the
   user navigates to it.

   This is safe here because every modal/overlay/toast in the journey is
   appended to <body>, NOT inside a .ps-scene — so the size/paint containment
   that content-visibility implies cannot reparent or clip any fixed overlay.

   contain-intersection-size gives the skipped scenes a placeholder size for
   intersection math; the real box size still comes from the explicit
   width/height:100% on .ps-scene, so the track never shifts.
   ============================================================================ */
.ps-scene {
    content-visibility: auto;
    contain-intersection-size: 100vw 100dvh;
}

    .ps-scene.ps-scene-active,
    .ps-scene.ps-scene-near {
        /* Never skip the scene the user is on, nor its immediate neighbours —
       so sliding to an adjacent scene has no first-render paint spike. */
        content-visibility: visible;
    }

/* ============================================================================
   PERF: GOOGLE-SURFACE PAINT ISOLATION  (ps-perf-arch-2026-06-07-sched)
   ----------------------------------------------------------------------------
   The perf trace showed a long tail of "(no script attribution — likely
   style/layout/paint)" frames of 200–700ms. A large share of those are the
   Google Map canvas and the Street View panorama continuously repainting
   (tile loads, pano motion) and invalidating layout/paint for the WHOLE page,
   because nothing scoped their work.

   `contain: layout paint` tells the browser these subtrees can't affect the
   geometry or pixels of anything outside themselves, so their repaints stay
   local instead of triggering page-wide style/layout/paint passes. We
   deliberately do NOT use `size` containment (the containers already have
   explicit width/height above, and size containment could collapse them) and
   we do NOT use content-visibility here (these must stay rendered while the
   DNA scene is on screen). Purely a rendering-scope hint — zero visual change.
   ============================================================================ */
#psDnaLeafletMap,
#psStreetViewPano,
#psStreetViewStage {
    contain: layout paint !important;
}

/* The map/Street-View wrappers also isolate their paint so a tile repaint
   inside the panel doesn't bubble into the surrounding DNA grid. Layout +
   paint only — sizing still flows from the existing rules above. */
.ps-location-map,
#psLocationMapWrap {
    contain: layout paint;
}

/* ============================================================================
   PERF PASS 2 — SCENE 2 (chips) & SCENE 3 (setters) INTERACTION RESPONSIVENESS
   (ps-perf-arch-2026-06-07-sched4)
   ----------------------------------------------------------------------------
   WHY THIS BLOCK EXISTS
     The earlier perf pass removed several backdrop-filters and added
     content-visibility + paint containment to the off-screen scenes. That
     fixed the steady background cost. What remained — and what the user still
     felt as "the active colour is slow" (Scene 2) and "setting a value lags"
     (Scene 3) — is PER-INTERACTION paint:

       1. backdrop-filter: blur(...) on surfaces that sit OVER scrolling or
          changing content (the sticky nav footers, the workbench canvas and
          its chips). Every repaint inside those scenes re-samples the blurred
          region. backdrop-filter is one of the most expensive things a browser
          can do per frame, and these blurs sit exactly where the user is
          clicking. Their backgrounds are already near-opaque (0.78–0.98), so
          dropping the blur is visually near-identical and removes the cost
          entirely.

       2. transition: all on the DNA metric tiles / steppers. `all` animates
          every property (including layout ones) on every +/- tap; a stepper is
          tapped fast and repeatedly. Scoped to cheap, compositor-only props.

       3. No paint isolation on the grids that change on interaction. Toggling
          .selected on a chip, or rewriting a metric readout, invalidated paint
          for the whole scene. `contain: layout paint` keeps that repaint local
          to the grid.

   This block is intentionally appended and uses !important so it wins against
   the v11/v13/v15/mobile override layers above regardless of cascade order.
   It is VISUAL-ONLY and changes NO behaviour, business rule, or DOM.
   ============================================================================ */

/* ── 1. Kill blur on interactive / scrolling surfaces ─────────────────────── */
/* Sticky scene nav footers — they float over the scrolling scene body, so the
   blurred region was recomputed on every scroll tick and every scene repaint.
   Backgrounds are made fully opaque to preserve the "frosted bar" read. */
.ps-scene .ps-nav,
.ps-scene-dna > .ps-nav-dna,
.ps-scene .ps-dna-left > .ps-nav-dna,
.ps-scene#psScene1 .ps-nav,
.ps-scene .ps-nav:not(.ps-nav-dna) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #ffffff !important;
}

/* Workbench canvas (Scene 4 value-intelligence stage) — the WHOLE canvas was
   blurred, so every feature-chip toggle re-sampled the full canvas area. */
.ps-workbench-canvas {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #ffffff !important;
}

/* Chip / cluster / lane variants that carried their own per-chip blur. With
   many chips on screen, each was a separate backdrop sample on every repaint. */
.ps-feat-chip,
.ps-lane-chip,
.ps-cluster {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ps-feat-chip,
.ps-lane-chip {
    background-color: #ffffff !important;
}

.ps-cluster {
    background-color: rgba(255,255,255,0.97) !important;
}

/* ── 2. Snap the Scene 3 setters ─────────────────────────────────────────── */
/* The +/- stepper buttons, the metric tile container, the mobile slider row and
   the jog-wheel rungs all change on the tap/drag critical path. None of them
   should run a multi-property transition while a value is being set. */
.ps-metric-tile,
.ps-dna-block,
.ps-step-btn,
.ps-slider-fill,
.ps-slider-readout,
.ps-jog-rung,
.ps-jog-input {
    transition: border-color 0.14s ease, color 0.14s ease, background-color 0.14s ease !important;
}
/* The slider fill width is driven directly from JS on every input event; an
   animated width would lag a frame behind the thumb. Make it track instantly. */
.ps-slider-fill {
    transition: none !important;
}

/* ── 3. Paint-isolate the grids that change on interaction ───────────────── */
/* A .selected toggle or a readout rewrite now repaints only within the grid,
   not the whole scene. layout + paint only (NOT size) so the boxes keep their
   intrinsic sizing and the track never shifts. */
#psSubtypeChips,
.ps-scene#psScene1 .ps-chip-grid,
.ps-dna-grid,
#psDnaGrid,
.ps-workbench-canvas,
.ps-chip-flow {
    contain: layout paint;
}

/* ── 4. Respect reduced-motion (accessibility + a free perf win) ─────────── */
@media (prefers-reduced-motion: reduce) {
    .ps-feat-chip.ps-chip-burst,
    .ps-metric-pulse,
    .ps-edu-animate {
        animation: none !important;
    }

    .ps-chip,
    .ps-feat-chip,
    .ps-step-btn,
    .ps-metric-tile {
        transition: none !important;
    }
}
/* ============================================================================
   END PERF PASS 2
   ============================================================================ */

/* ============================================================================
   SCENE 3 — SIZE CONFIRMATION POPUP  (".ps-sizecheck-*")
   ----------------------------------------------------------------------------
   Shown by psConfirmDnaSizes() in private-seller.js when the seller taps
   Continue with an unusually-small floor or erf value. Non-blocking: the
   seller can Fix it or Continue anyway. Class names are namespaced so they
   never collide with the legacy patch's ".ps-size-modal-*" rules.
   ============================================================================ */
.ps-sizecheck-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.18s ease;
}

    .ps-sizecheck-overlay.is-open {
        opacity: 1;
    }

.ps-sizecheck-modal {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 20px;
    padding: 24px 22px 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-family: inherit;
}

.ps-sizecheck-overlay.is-open .ps-sizecheck-modal {
    transform: none;
}

.ps-sizecheck-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.ps-sizecheck-badge {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFF1E0, #FFE2C2);
    color: var(--sj-orange, #F58220);
    font-size: 1.15rem;
}

.ps-sizecheck-title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--sj-dark, #1F2937);
    line-height: 1.2;
}

.ps-sizecheck-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.ps-sizecheck-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ps-sizecheck-warn {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 700;
    color: #B45309;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.35;
}

    .ps-sizecheck-warn i {
        color: #F59E0B;
        margin-top: 2px;
        flex: 0 0 auto;
    }

.ps-sizecheck-val {
    font-weight: 800;
    white-space: nowrap;
}

.ps-sizecheck-edu {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #64748B;
}

.ps-sizecheck-actions {
    display: flex;
    gap: 10px;
}

.ps-sizecheck-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform 0.12s, box-shadow 0.15s, background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

    .ps-sizecheck-btn:active {
        transform: translateY(1px);
    }

.ps-sizecheck-fix {
    background: linear-gradient(135deg, #F58220, #E0701A);
    color: #fff;
    box-shadow: 0 6px 16px rgba(245, 130, 32, 0.32);
}

    .ps-sizecheck-fix:hover {
        box-shadow: 0 8px 20px rgba(245, 130, 32, 0.42);
    }

.ps-sizecheck-continue {
    background: #fff;
    color: #475569;
    border-color: rgba(15, 23, 42, 0.16);
}

    .ps-sizecheck-continue:hover {
        background: #F8FAFC;
        color: var(--sj-dark, #1F2937);
    }

@media (max-width: 480px) {
    .ps-sizecheck-modal {
        max-width: none;
        border-radius: 18px;
        padding: 20px 16px 16px;
    }

    .ps-sizecheck-actions {
        flex-direction: column-reverse;
    }
}

/* =============================================================================
   BREADCRUMB v2 — flat trail + inline "Change Role" (every scene after Scene 0)
   -----------------------------------------------------------------------------
   Replaces the legacy orange "pill" breadcrumb with a flat single-line trail:

       [icon] Category  ›  Subtype  —  Scene Name            [ ⇄ Change Role ]

   • The leading icon is the SAME SIZE as the text (no circular orange chip).
   • The row spans the full width; the Change Role control is pinned right and
     returns the user to the List-tab role chooser (sellJourney.reset()).
   • Built/populated by updateBreadcrumbs() in private-seller.js, which adds
     the `.ps-breadcrumb--v2` modifier to each scene's breadcrumb.

   Every rule is scoped to `.ps-breadcrumb--v2` so it wins over the older
   `.ps-breadcrumb` (0,1,0) and `#psScene3 .ps-breadcrumb` (1,1,0) rules
   regardless of stylesheet load order. The legacy `.ps-breadcrumb` class is
   intentionally kept on the element so existing positioning / sticky-header
   CSS (e.g. the Scene-3 workbench `flex:0 0 auto`) continues to apply.
   ============================================================================= */
.ps-breadcrumb.ps-breadcrumb--v2 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--sj-orange-dark, #B4540A) !important;
}

    /* Trail — icon + Category › Subtype — Scene. Takes the available width and
   ellipsises segment-by-segment when space is tight (it never wraps). */
    .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-trail {
        flex: 1 1 auto;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        overflow: hidden;
        white-space: nowrap;
    }

    /* Icon: matches text size, flat (no orange circle). */
    .ps-breadcrumb.ps-breadcrumb--v2 .ps-breadcrumb-icon {
        flex: 0 0 auto !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        border-radius: 0 !important;
        color: var(--sj-orange, #F58220) !important;
        font-size: 1em !important;
        display: inline-flex !important;
        align-items: center !important;
    }

        .ps-breadcrumb.ps-breadcrumb--v2 .ps-breadcrumb-icon i {
            font-size: 1em !important;
            line-height: 1 !important;
        }

    /* Category + subtype segments — each truncates individually. */
    .ps-breadcrumb.ps-breadcrumb--v2 .ps-breadcrumb-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        letter-spacing: -0.005em;
    }

    .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-cat {
        flex: 0 1 auto;
        font-weight: 700;
    }

    .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-sub {
        flex: 0 1 auto;
        font-weight: 600;
    }

    .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-chev {
        flex: 0 0 auto !important;
        margin: 0 !important;
        color: rgba(245, 130, 32, 0.55) !important;
        font-size: 0.85em !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Dash + scene name. Scene name is de-emphasised and truncates last. */
    .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-dash {
        flex: 0 0 auto;
        color: var(--sj-text-soft, #94A3B8);
        opacity: 0.85;
    }

    .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-scene {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
        color: var(--sj-dark, #334155);
    }

    /* Change Role — compact pill, pinned right, never shrinks. */
    .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-changerole {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 5px 11px !important;
        background: rgba(245, 130, 32, 0.08) !important;
        border: 1px solid rgba(245, 130, 32, 0.22) !important;
        border-radius: 999px !important;
        color: var(--sj-orange-dark, #B4540A) !important;
        font: inherit !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
    }

        .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-changerole:hover {
            background: rgba(245, 130, 32, 0.16) !important;
            border-color: rgba(245, 130, 32, 0.40) !important;
            color: var(--sj-orange, #F58220) !important;
        }

        .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-changerole i {
            font-size: 0.95em !important;
        }

/* Scene-2 (DNA) and Scene-3 (Value Intelligence / workbench) ship their own
   higher-specificity pill rules (1,1,0 / 1,3,0). Re-assert the flat look here
   at matching-or-higher specificity. We deliberately do NOT touch their `flex`
   sizing so they remain non-shrinking sticky header chrome. */
#psScene2 .ps-breadcrumb.ps-breadcrumb--v2,
#psScene3 .ps-breadcrumb.ps-breadcrumb--v2 {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    font-size: 0.8rem !important;
}

.ps-scene#psScene2 .ps-dna-left > .ps-breadcrumb.ps-breadcrumb--v2 {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ps-breadcrumb.ps-breadcrumb--v2 {
        gap: 8px !important;
        font-size: 0.74rem !important;
        margin: 0 0 8px 0 !important;
    }

    #psScene2 .ps-breadcrumb.ps-breadcrumb--v2,
    #psScene3 .ps-breadcrumb.ps-breadcrumb--v2 {
        padding: 0 !important;
        font-size: 0.74rem !important;
        background: none !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-changerole {
        padding: 5px 10px !important;
        font-size: 0.72rem !important;
    }
}

/* Very narrow — collapse the Change Role label to an icon-only control to
   protect the trail. The accessible name is preserved via aria-label. */
@media (max-width: 430px) {
    .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-changerole-txt {
        display: none !important;
    }

    .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-changerole {
        padding: 6px !important;
        gap: 0 !important;
    }

        .ps-breadcrumb.ps-breadcrumb--v2 .ps-crumb-changerole i {
            font-size: 1.05em !important;
        }
}
/* The scene name now lives in the breadcrumb (… — Scene Name), so the separate
   `.ps-scene-label` pill below the progress rail is redundant. Hide it on every
   scene that carries a v2 breadcrumb (Scene 0 is never flagged, so its
   "Start Here" label stays). Core Identity's grid is updated separately in
   core-identity-fix.css to account for the removed row. */
.ps-crumb-host .ps-scene-label {
    display: none !important;
}
/* ===== END BREADCRUMB v2 ===================================================== */