/* ============================================================================
   PRIVATE SELLER — BATCH-34 FIX & POLISH LAYER
   ============================================================================
   One override stylesheet for the June-2026 34-item fix round. Loads AFTER
   private-seller.css, private-seller-scenes-extra.css, step5-styles.css and
   vr-tour*.css in _Layout.cshtml, so every rule here wins on equal
   specificity and the upstream files stay untouched (safe diffs, easy
   rollback: remove one <link>).

   Sections (numbers = items in the request batch):
     A.  #1   Back/Continue nav lifted above wrapper layers
     B.  #2   Scene-3 setter labels — wrap instead of truncate
     C.  #4/6 Scene-3/4 chips — kill hover rattle + press lag
     D.  #7   Scene-4 right panel — energy compact, feed tall, identity fits
     E.  #15  Slideshow style cards — premium polish
     F.  #19  360° compass modal +25% width, responsive
     G.  #20  Price cents ghost
     H.  #21  Crypto coin picker + Scene-6 single-viewport compaction
     I.  #22  Composer card paint containment (typing-lag hardening)
     J.  #23/25/26 AI Composer — wider modal, 6-style grid, inline tone pills
     K.  #29  Core Identity — 3-column premium layout + company reveal
     L.  #31  Auth scene — on-theme stack, fixed rail, Continue states
     M.  #34  Legal modal
     N.  #8/9/11/18 Step-5 helpers (upload busy, before-eyes, drag, edit btn)
   ============================================================================ */


/* ════════════════════════════════════════════════════════════════════════
   A. (#1) NAVIGATION ABOVE THE WRAPPER LAYERS
   The Back/Continue row was being overlapped by absolutely-positioned
   scene-extension wrappers (transparent, but they ate the clicks and
   visually collided on short viewports). Lift the nav into its own
   stacking context above every scene decoration layer.
   ════════════════════════════════════════════════════════════════════════ */
.ps-scene .ps-nav {
    position: relative;
    z-index: 60; /* above scene wrappers (≤40) and twin rails (≤50) */
    isolation: isolate; /* own stacking context — children never escape   */
}

    .ps-scene .ps-nav .ps-btn-back,
    .ps-scene .ps-nav .ps-btn-next {
        position: relative;
        z-index: 1;
    }


/* ════════════════════════════════════════════════════════════════════════
   B. (#2) SCENE-3 SETTER LABELS — WRAP, DON'T TRUNCATE
   Longer languages (isiXhosa, Afrikaans, Sepedi…) were ellipsised by the
   nowrap rule in private-seller.css §split-columns. Allow a tidy 2-line
   wrap; anything longer than two lines is clamped, and the metrics grid
   already scrolls vertically so nothing is ever unreachable.
   ════════════════════════════════════════════════════════════════════════ */
.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;
    overflow: hidden !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25 !important;
    max-height: 2.6em;
    word-break: break-word;
}

/* The tiles must be allowed to grow one extra line without clipping. */
.ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile,
.ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile {
    height: auto !important;
    min-height: 0 !important;
}

/* The metrics grid already has overflow-y:auto upstream — reaffirm it so
   tall translations scroll instead of overflowing the panel. */
.ps-dna-panel-metrics .ps-dna-grid {
    overflow-y: auto;
    overscroll-behavior: contain;
}


/* ════════════════════════════════════════════════════════════════════════
   C. (#4 + #6) SETTER & SELECTOR CHIPS — NO RATTLE, NO PRESS LAG
   Two compounding causes:
     1. :hover { transform: translateY(-1px) } moved the hit area out from
        under the cursor at the chip's edge → hover flickered on/off
        ("rattles up and down").
     2. backdrop-filter + `transition: all` made every press recalc an
        expensive filter surface before the active state could paint.
   Feedback now comes from paint-only properties (border, shadow, tint) —
   identical premium feel, zero geometry movement, zero filter cost.
   ════════════════════════════════════════════════════════════════════════ */
.ps-lane-chip,
.ps-feat-chip,
.ps-setter-chip {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* (item 3) Press feedback must feel INSTANT. The base rule was
       `transition: all 0.22s`, so the .selected state — border, background,
       colour — eased in over 220ms and read as lag ("delay to show it is
       pressed"). We transition only cheap paint props and keep them short;
       the .selected state below overrides to ~0 so the pressed look lands
       on the very next frame. */
    transition: border-color .12s ease, box-shadow .12s ease, color .12s ease !important;
    will-change: auto !important;
}

    .ps-lane-chip:hover,
    .ps-feat-chip:hover,
    .ps-setter-chip:hover {
        transform: none !important;
        box-shadow: 0 4px 14px rgba(26, 29, 32, 0.10);
        border-color: rgba(245, 130, 32, 0.55);
    }

    .ps-lane-chip:active,
    .ps-feat-chip:active,
    .ps-setter-chip:active {
        transform: none !important;
        box-shadow: 0 1px 4px rgba(26, 29, 32, 0.14) inset;
    }

    /* (item 3) The pressed/selected state paints IMMEDIATELY — no eased
   background fade. This is what makes the tap feel responsive. */
    .ps-lane-chip.selected,
    .ps-feat-chip.selected,
    .ps-setter-chip.selected {
        transition: none !important;
    }

    /* (item 3) Snappier confirm burst — was slow enough to read as part of the
   "delay". Shorter + lighter, purely decorative on top of the instant
   selected state. */
    .ps-lane-chip.ps-chip-burst,
    .ps-feat-chip.ps-chip-burst {
        animation-duration: .28s !important;
    }


/* ════════════════════════════════════════════════════════════════════════
   D. (#7) SCENE-4 RIGHT PANEL — ENERGY SMALLER, FEED TALLER, IDENTITY FITS
   The Listing-Energy dial dominated the rail while the Intelligence Feed
   (the part that actually narrates value) was squeezed and Property
   Identity overflowed beneath the panel. The rail is now a proper flex
   column: compact dial, feed takes the freed space, identity is pinned
   inside with its own scroll if a long story needs it.
   ════════════════════════════════════════════════════════════════════════ */
#psRight3 {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden; /* identity may NOT spill under the panel  */
}

    #psRight3 .ps-energy-core {
        max-height: clamp(118px, 15vh, 156px) !important; /* was 160–220px */
    }

    #psRight3 .ps-terminal {
        flex: 1 1 auto; /* the feed absorbs the freed height       */
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #psRight3 .ps-terminal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #psRight3 .ps-narrative {
        flex: 0 0 auto;
        margin-top: 10px;
        max-height: 24vh;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    #psRight3 .ps-narrative-text {
        overflow-y: auto;
        min-height: 0;
        padding-right: 4px;
    }


/* ════════════════════════════════════════════════════════════════════════
   E. (#15) SLIDESHOW STYLE CARDS — PREMIUM TOUCH
   The five style cards read flat next to the rest of the journey. Paint-
   only refinement: layered borders, a soft inner sheen, confident selected
   state with the brand orange.
   ════════════════════════════════════════════════════════════════════════ */
.s5-slideshow-card {
    border: 1px solid rgba(26, 29, 32, 0.10);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(26, 29, 32, 0.05);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 38%);
    /* (item 5) The base rule is `transition: all 0.22s` + a hover
       translateY(-1px). At a card EDGE the upward shift moves the element
       out from under the cursor, mouseleave fires, it drops back, mouseenter
       fires again — the "rattle". We transition only paint props and remove
       the transform entirely so hover is rock-steady. */
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}

    .s5-slideshow-card:hover {
        transform: none !important;
        border-color: rgba(245, 130, 32, 0.45);
        box-shadow: 0 8px 22px rgba(26, 29, 32, 0.12);
    }

    .s5-slideshow-card.selected {
        border-color: #F58220;
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.18), 0 10px 26px rgba(245, 130, 32, 0.16);
    }

        .s5-slideshow-card.selected .s5-slideshow-name {
            color: #F58220;
        }


/* ════════════════════════════════════════════════════════════════════════
   F. (#19) 360° MODALS — +25 % WIDTH, STILL RESPONSIVE
   Base modal 640 → 800px; the 8-compass-point step 1100 → 1375px. Both
   stay capped at 95vw so phones and small tablets are untouched, and the
   compass slot grid relaxes from 4 fixed columns to auto-fit so the extra
   width turns into breathing room, not stretched slots.
   ════════════════════════════════════════════════════════════════════════ */
.vrt-modal-inner {
    width: 800px; /* was 640px */
    max-width: 95vw;
}

@media (min-width: 900px) {
    .vrt-modal.vrt-8point-active .vrt-modal-inner {
        width: 1375px !important; /* was 1100px */
        max-width: 95vw !important;
    }
}

@media (min-width: 900px) {
    .vrt-modal.vrt-8point-active .vrt-compass-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 14px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   G. (#20 v2) PRICE CENTS GHOST — mirror-span technique
   An invisible copy of the typed text (identical font + padding to the
   input) sits over the field; the muted ".00" is simply the next inline
   span, so it lands pixel-perfect after the last digit with ZERO
   per-keystroke measurement. JS only toggles display + mirrors the text.
   ════════════════════════════════════════════════════════════════════════ */
.ps-price-input-wrap {
    position: relative;
}

.ps-price-mirror {
    position: absolute;
    inset: 0;
    display: none; /* JS shows as flex while typing */
    align-items: center;
    padding: 18px 18px 18px 52px; /* MUST match .ps-price-input exactly */
    pointer-events: none;
    user-select: none;
    font-size: 1.3rem; /* MUST match .ps-price-input */
    font-weight: 700;
    letter-spacing: -0.01em;
    font-family: inherit;
    white-space: pre;
    overflow: hidden;
    z-index: 1;
}

.ps-price-mirror-text {
    visibility: hidden; /* takes up exact width, never paints */
}

.ps-price-cents-ghost {
    color: rgba(26, 29, 32, 0.28); /* quiet hint, never competes with digits */
    font: inherit;
}

/* ════════════════════════════════════════════════════════════════════════
   H. (#21) CRYPTO COIN PICKER + SCENE-6 SINGLE-VIEWPORT COMPACTION
   ════════════════════════════════════════════════════════════════════════ */
.ps-crypto-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.ps-crypto-picker-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(26, 29, 32, 0.55);
}

.ps-crypto-coins {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ps-crypto-coin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1.5px solid rgba(26, 29, 32, 0.14);
    background: #fff;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1A1D20;
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease, color .14s ease;
}

    .ps-crypto-coin .ps-crypto-coin-sym {
        font-size: 0.9rem;
        line-height: 1;
    }

    .ps-crypto-coin:hover {
        border-color: rgba(245, 130, 32, 0.55);
        box-shadow: 0 3px 10px rgba(26, 29, 32, 0.08);
    }

    .ps-crypto-coin.selected {
        background: #F58220;
        border-color: #F58220;
        color: #fff;
        box-shadow: 0 4px 14px rgba(245, 130, 32, 0.30);
    }

/* Scene-6 vertical rhythm: trims enough air that question → price →
   crypto (+ picker) → nav fits one desktop viewport without scrolling. */
.ps-scene#psScene5 .ps-question {
    margin-bottom: 10px;
}

.ps-scene#psScene5 .ps-subtitle {
    margin-bottom: 14px;
}

.ps-scene#psScene5 .ps-price-block {
    margin-bottom: 14px;
}

.ps-scene#psScene5 .ps-crypto-block {
    margin-top: 12px;
}

.ps-scene#psScene5 .ps-crypto-note {
    margin-top: 8px;
}


/* ════════════════════════════════════════════════════════════════════════
   I. (#22) COMPOSER CARD — PAINT CONTAINMENT
   The JS-side typing-lag fixes (single-bound listener, guardian-owned
   counter) already shipped; this hardens the paint path so a keystroke
   can never invalidate anything beyond the card itself. If lag persists
   after deploy, the served bundle is stale — verify with the version
   query-string on the script tag.
   ════════════════════════════════════════════════════════════════════════ */
.ps-narrative-input {
    contain: layout paint;
    transition: border-color .15s ease, box-shadow .15s ease;
    will-change: auto;
}


/* ════════════════════════════════════════════════════════════════════════
   J. (#23 / #25 / #26) AI COMPOSER MODAL SYSTEM
   One generous, CONSTANT size across every step (tone grid, feelings,
   result) — steps no longer jump between widths. Six style cards sit in
   a 2-column grid; the inline tone-pill row appears in the result step.
   ════════════════════════════════════════════════════════════════════════ */
.ps-s7-modal-inner {
    width: min(860px, 94vw) !important;
    max-height: 88vh;
}

/* 6-card tone grid — 2 columns desktop, 1 on small screens. */
.ps-s7-tone-grid--six {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    .ps-s7-tone-grid--six .ps-s7-tone-card {
        width: 100%;
        margin: 0;
        text-align: left;
        border-radius: 14px;
        border: 1.5px solid rgba(26, 29, 32, 0.10);
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }

        .ps-s7-tone-grid--six .ps-s7-tone-card:hover {
            border-color: rgba(245, 130, 32, 0.55);
            box-shadow: 0 6px 18px rgba(26, 29, 32, 0.10);
        }

@media (max-width: 720px) {
    .ps-s7-tone-grid--six {
        grid-template-columns: 1fr;
    }
}

/* (#26) Inline tone pills under the result controls. */
.ps-s7-tone-inline-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(245, 130, 32, 0.06);
    border: 1px dashed rgba(245, 130, 32, 0.35);
    animation: psToneRowIn .22s ease both;
}

@keyframes psToneRowIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

.ps-s7-tone-inline-pill {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1.5px solid rgba(26, 29, 32, 0.16);
    background: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1A1D20;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease;
}

    .ps-s7-tone-inline-pill:hover {
        border-color: #F58220;
        box-shadow: 0 3px 10px rgba(245, 130, 32, 0.18);
    }

    .ps-s7-tone-inline-pill.is-current {
        background: #1A1D20;
        border-color: #1A1D20;
        color: #fff;
        cursor: default;
    }


/* ════════════════════════════════════════════════════════════════════════
   K. (#13 v3) CORE IDENTITY — ALIGNED, CARDED, RESPECTS THE BASE GRID
   The base stylesheet already lays the personal block out correctly
   (.ps-id-row = 220px photo | fields). v3 stops fighting it: this layer
   only (a) cards the three sections with one consistent chrome, (b) puts
   email + phone side-by-side inside the fields column, and (c) gives every
   input the same focus language. The Who-is-selling + company sections are
   relocated to form level by core-identity-mobile-fix.js, so all three
   cards share the same left/right edges — true alignment.
   ════════════════════════════════════════════════════════════════════════ */
.ps-scene-identity .ps-id-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* One card chrome for all three sections.
   (item 12b) The cards are frosted glass over the journey background.
   • Transparency (Issue 9): alpha lowered 0.72 → 0.55 so more of the layered
     journey backdrop reads through — the requested "more transparent" look.
   • Performance (Issue 10): a 10px backdrop-blur on three stacked cards was
     re-sampling and re-compositing the blurred backdrop on every scroll/typing
     frame, which is what made the scene feel laggy. The radius is reduced to
     6px (far cheaper to composite) and each card is given paint containment +
     its own compositing layer so the blur result is cached instead of being
     recomputed against the whole page on every frame. */
.ps-scene-identity .ps-id-row,
.ps-scene-identity #peEntitySection,
.ps-scene-identity #psIdCompanySection {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px) saturate(1.08);
    -webkit-backdrop-filter: blur(6px) saturate(1.08);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 8px 30px rgba(26, 29, 32, 0.08);
    width: 100%;
    box-sizing: border-box;
    margin: 0; /* the form's gap owns the rhythm */
    contain: paint;
    transform: translateZ(0);
}

/* Fields column rhythm:
     Names row     → 2-col (from base)
     Email         → full width
     Contact No.   → full width   (item 12a: contact sits ABOVE WhatsApp)
     WhatsApp Q.   → full width   (item 12a: WhatsApp directly BELOW contact)
   Stacking contact + WhatsApp vertically is what the user asked for; the
   two were previously misaligned (one in the grid, one in a side block). */
.ps-scene-identity .ps-id-fields-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    align-content: start;
    min-width: 0;
}

    .ps-scene-identity .ps-id-fields-col > .ps-id-row-2 {
        grid-column: 1 / -1;
    }

    /* Email + Contact Number + the WhatsApp question each span the FULL width
   of the fields column and stack vertically — clean, aligned, predictable. */
    .ps-scene-identity .ps-id-fields-col > .ps-id-field {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .ps-scene-identity .ps-id-fields-col > .ps-id-question-row {
        grid-column: 1 / -1;
        margin: 2px 0 0;
        padding: 13px 15px;
        background: rgba(245, 130, 32, 0.06);
        border: 1px solid rgba(245, 130, 32, 0.2);
        border-radius: 12px;
    }

/* Equal-height input boxes, one focus language, aligned baselines. */
.ps-scene-identity .ps-id-label {
    display: block;
    min-height: 1.2em;
}

.ps-scene-identity .ps-id-input-wrap {
    width: 100%;
}

.ps-scene-identity .ps-id-input,
.ps-scene-identity .ps-id-dial-select,
.ps-scene-identity .pe-input,
.ps-scene-identity .pe-select {
    height: 46px;
    border-radius: 12px;
    border: 1.5px solid rgba(26, 29, 32, 0.13);
    background: rgba(255, 255, 255, 0.85);
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}

    .ps-scene-identity .ps-id-input:focus,
    .ps-scene-identity .ps-id-dial-select:focus,
    .ps-scene-identity .pe-input:focus,
    .ps-scene-identity .pe-select:focus {
        border-color: #F58220;
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.14);
        background: #fff;
        outline: none;
    }

/* Read-only auto-filled fields (registration number) read as "locked,
   verified" rather than disabled — item 13. */
.ps-scene-identity .ps-id-input--locked {
    background: rgba(245, 130, 32, 0.06);
    border-style: dashed;
    color: #475569;
    cursor: default;
}

/* Entity panel internals share the same two-column rhythm. */
.ps-scene-identity .pe-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

/* Company-section reveal (toggled by core-identity-mobile-fix.js). */
#psIdCompanySection {
    overflow: hidden;
}

    #psIdCompanySection.ps-id-company--revealed {
        animation: psIdCompanyIn .32s cubic-bezier(0.22, 1, 0.36, 1) both;
        border-color: rgba(245, 130, 32, 0.35);
    }

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

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

@media (max-width: 700px) {
    .ps-scene-identity .ps-id-fields-col,
    .ps-scene-identity .pe-row {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   L. (#31) AUTH SCENE — ON-THEME, BALANCED NAV
   The stack now mirrors the journey's form language (rounded cards, brand
   orange accents); the awkward dotted rail becomes a clean hairline with
   a centred chip; the disabled Continue reads as "locked, not broken".
   ════════════════════════════════════════════════════════════════════════ */
.ps-auth-v2-stack {
    background: #fff;
    border: 1px solid rgba(26, 29, 32, 0.08);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(26, 29, 32, 0.06);
    max-width: 520px;
}

.ps-auth-v2-divider {
    border: 0 !important;
    position: relative;
    text-align: center;
    margin: 18px 0;
}

    .ps-auth-v2-divider::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        background: linear-gradient(90deg, rgba(26, 29, 32, 0), rgba(26, 29, 32, 0.14) 18%, rgba(26, 29, 32, 0.14) 82%, rgba(26, 29, 32, 0));
    }

    .ps-auth-v2-divider span {
        position: relative;
        display: inline-block;
        padding: 3px 12px;
        background: #fff;
        border: 1px solid rgba(26, 29, 32, 0.10);
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(26, 29, 32, 0.50);
    }

.ps-auth-v2-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: rgba(26, 29, 32, 0.05);
    border-radius: 999px;
    margin-bottom: 14px;
}

.ps-auth-v2-tab {
    flex: 1;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 9px 0;
    font-weight: 700;
    font-size: 0.85rem;
    color: rgba(26, 29, 32, 0.55);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .ps-auth-v2-tab.is-active {
        background: #fff;
        color: #1A1D20;
        box-shadow: 0 1px 4px rgba(26, 29, 32, 0.12);
    }

.ps-auth-v2-field input {
    border: 1.5px solid rgba(26, 29, 32, 0.14);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ps-auth-v2-field input:focus {
        border-color: #F58220;
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.16);
        outline: none;
    }

.ps-auth-v2-submit {
    background: #F58220;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-weight: 800;
    transition: filter .15s ease, box-shadow .15s ease;
}

    .ps-auth-v2-submit:hover {
        filter: brightness(1.05);
        box-shadow: 0 8px 20px rgba(245, 130, 32, 0.30);
    }

/* Disabled Continue — visibly locked, with an unlocked "ready" state. */
#psAuthV2Continue:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

#psAuthV2Continue.is-ready {
    animation: psAuthContinueIn .3s ease both;
}

@keyframes psAuthContinueIn {
    from {
        transform: scale(0.96);
        opacity: 0.6;
    }

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

/* Legal row under the forms. */
.ps-auth-v2-legal {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.74rem;
    line-height: 1.5;
    color: rgba(26, 29, 32, 0.55);
}

    .ps-auth-v2-legal i {
        color: #F58220;
        margin-top: 1px;
    }

.ps-auth-v2-legal-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: #1A1D20;
    text-decoration: underline;
    text-decoration-color: rgba(245, 130, 32, 0.55);
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color .14s ease;
}

    .ps-auth-v2-legal-link:hover {
        color: #F58220;
    }


/* ════════════════════════════════════════════════════════════════════════
   M. (#34) LEGAL MODAL — premium iframe overlay
   ════════════════════════════════════════════════════════════════════════ */
.ps-legal-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 17, 19, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .24s ease;
}

    .ps-legal-modal.open {
        opacity: 1;
    }

.ps-legal-modal-inner {
    width: min(880px, 96vw);
    height: min(82vh, 900px);
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.40);
    transform: scale(0.94) translateY(14px);
    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ps-legal-modal.open .ps-legal-modal-inner {
    transform: scale(1) translateY(0);
}

.ps-legal-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #1A1D20;
    color: #fff;
}

.ps-legal-modal-title {
    font-weight: 800;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 9px;
}

    .ps-legal-modal-title i {
        color: #F58220;
    }

.ps-legal-modal-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ps-legal-modal-open,
.ps-legal-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color .14s ease;
}

    .ps-legal-modal-open:hover,
    .ps-legal-modal-close:hover {
        background: rgba(245, 130, 32, 0.85);
    }

.ps-legal-modal-body {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #F6F7F8;
}

    .ps-legal-modal-body iframe {
        width: 100%;
        height: 100%;
        border: 0;
        opacity: 0;
        transition: opacity .3s ease;
    }

.ps-legal-modal.is-loaded .ps-legal-modal-body iframe {
    opacity: 1;
}

.ps-legal-modal-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 3px solid rgba(245, 130, 32, 0.25);
    border-top-color: #F58220;
    animation: psLegalSpin .8s linear infinite;
}

.ps-legal-modal.is-loaded .ps-legal-modal-spin {
    display: none;
}

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


/* ════════════════════════════════════════════════════════════════════════
   N. STEP-5 HELPERS — upload busy (#8), before-eyes (#11), drag (#9),
      workspace edit button (#18)
   ════════════════════════════════════════════════════════════════════════ */
/* (#8) Busy overlay over the drop zone while files validate + read. */
.s5-upload-zone,
#s5UploadZone {
    position: relative;
}

.s5-upload-busy {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: s5BusyIn .18s ease both;
}

@keyframes s5BusyIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.s5-upload-busy .s5-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(245, 130, 32, 0.25);
    border-top-color: #F58220;
    animation: psLegalSpin .8s linear infinite;
}

.s5-upload-busy-label {
    font-weight: 800;
    font-size: 0.86rem;
    color: #1A1D20;
}

.s5-upload-busy-sub {
    font-size: 0.72rem;
    color: rgba(26, 29, 32, 0.55);
}

/* (#9) Lifted thumb while dragging. */
.s5-photo-thumb.is-dragging {
    opacity: 0.55;
    outline: 2px dashed #F58220;
    outline-offset: 2px;
    transform: scale(0.97);
    cursor: grabbing;
}

.s5-photo-thumb[draggable="true"] {
    cursor: grab;
}

/* (#11) Before-eye buttons — edit modal + maximised editor. */
.s5-edit-before-eye,
.s5-pmax-before-eye {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-left: 8px;
    border-radius: 10px;
    border: 1.5px solid rgba(26, 29, 32, 0.16);
    background: #fff;
    color: #1A1D20;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

    .s5-edit-before-eye:hover,
    .s5-pmax-before-eye:hover {
        border-color: rgba(245, 130, 32, 0.6);
    }

    .s5-edit-before-eye.is-holding,
    .s5-pmax-before-eye.is-holding {
        background: #1A1D20;
        border-color: #1A1D20;
        color: #fff;
    }

/* (#18) Edit-photo button in the staging workspace header. */
.s5-sw-edit-photo-btn {
    width: 38px;
    height: 38px;
    margin-right: 8px;
    border-radius: 10px;
    border: 1.5px solid rgba(26, 29, 32, 0.16);
    background: #fff;
    color: #1A1D20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

    .s5-sw-edit-photo-btn:hover {
        border-color: #F58220;
        color: #F58220;
        box-shadow: 0 3px 10px rgba(245, 130, 32, 0.18);
    }

/* ════════════════════════════════════════════════════════════════════════
   O. (#6 v2) CRYPTO — ONE ROW + EDUCATIONAL TOOLTIPS + STABLE NAV
   Question, Yes/No pills and the coin chips share a single wrapping row,
   so saying "Yes" reveals coins IN PLACE and never pushes the Back /
   Continue nav down. Each coin carries a rich tooltip (history + usage).
   ════════════════════════════════════════════════════════════════════════ */
.ps-crypto-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 46px; /* reserves the row height — nav never moves */
}

    .ps-crypto-row .ps-crypto-label {
        margin: 0;
        flex-shrink: 0;
    }

.ps-crypto-picker {
    margin-top: 0;
    align-items: center;
}

.ps-crypto-picker-divider {
    width: 1px;
    height: 26px;
    background: rgba(26, 29, 32, 0.12);
    margin: 0 2px;
}

.ps-crypto-coin {
    position: relative; /* tooltip anchor */
}

.ps-crypto-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 264px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #1A1D20;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 70;
}

    .ps-crypto-tip strong {
        display: block;
        color: #F58220;
        font-size: 0.74rem;
        margin-bottom: 4px;
    }

    .ps-crypto-tip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #1A1D20;
    }

.ps-crypto-coin:hover .ps-crypto-tip,
.ps-crypto-coin:focus-visible .ps-crypto-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Edge coins: keep the tooltip on-screen. */
.ps-crypto-coins .ps-crypto-coin:first-child .ps-crypto-tip {
    left: 0;
    transform: translateX(0) translateY(4px);
}

.ps-crypto-coins .ps-crypto-coin:first-child:hover .ps-crypto-tip {
    transform: translateX(0) translateY(0);
}

.ps-crypto-coins .ps-crypto-coin:first-child .ps-crypto-tip::after {
    left: 24px;
}

.ps-crypto-coins .ps-crypto-coin:last-child .ps-crypto-tip {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}

.ps-crypto-coins .ps-crypto-coin:last-child:hover .ps-crypto-tip {
    transform: translateX(0) translateY(0);
}

.ps-crypto-coins .ps-crypto-coin:last-child .ps-crypto-tip::after {
    left: auto;
    right: 24px;
}

/* (#6) Scene-6 vertical compaction — question → price → crypto → nav in
   ONE viewport, with the nav pinned to the bottom of the column. */
.ps-scene#psScene5 .ps-left {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ps-scene#psScene5 .ps-nav {
    margin-top: auto; /* sticky-to-bottom of the column */
    padding-top: 12px;
}

.ps-scene#psScene5 .ps-crypto-option {
    margin-top: 12px;
}

.ps-scene#psScene5 .ps-crypto-note {
    margin-top: 8px;
    font-size: 0.7rem;
}


/* ════════════════════════════════════════════════════════════════════════
   P. (#11) AI PREVIEW — CONTAINED CARD WITH ITS OWN SCROLLBAR
   Long AI stories were overflowing the preview card and painting under
   the Narrative Intelligence card. The right rail is now a proper flex
   column: the preview card flexes, the story section scrolls INSIDE it.
   ════════════════════════════════════════════════════════════════════════ */
#psRight6 {
    display: flex;
    flex-direction: column;
    min-height: 0;
    contain: layout paint; /* preview repaints never leak scene-wide */
}

    #psRight6 #psAiPreviewCard {
        flex: 1.1 1 auto; /* (item 11) +10% share of the rail vs siblings */
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* the card is the hard boundary */
        min-height: 48vh; /* (item 11) ensure a tall preview even when
                                    the flex context is shallow */
    }

        #psRight6 #psAiPreviewCard .ps-ai-preview-section:last-child {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

    #psRight6 #psPreviewDesc,
    #psRight6 .ps-ai-preview-mirror {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 54vh; /* (item 11) +10% (was 44vh) */
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 6px;
    }

        #psRight6 #psPreviewDesc::-webkit-scrollbar,
        #psRight6 .ps-ai-preview-mirror::-webkit-scrollbar {
            width: 5px;
        }

        #psRight6 #psPreviewDesc::-webkit-scrollbar-thumb,
        #psRight6 .ps-ai-preview-mirror::-webkit-scrollbar-thumb {
            background: rgba(245, 130, 32, 0.4);
            border-radius: 99px;
        }


/* ════════════════════════════════════════════════════════════════════════
   Q. (#7) COMPOSER TYPING — PAINT ISOLATION, NO TRANSITIONS ON KEY PATH
   ════════════════════════════════════════════════════════════════════════ */
#psNarrativeInput {
    transition: none !important; /* border/shadow transitions off the key path */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ps-narrative-input,
#psScene6 .ps-narrative-card {
    contain: layout paint;
}

/* The character counter + min-chars hint rewrite their text on (almost)
   every keystroke. Reserving their box and containing their paint means a
   text change can never re-lay-out the column above them. */
#psNarrativeCount,
#psNarrativeMinHint {
    contain: layout paint;
    min-height: 1.25em;
    font-variant-numeric: tabular-nums;
}


/* ════════════════════════════════════════════════════════════════════════
   R. (#10) ENHANCE AGAIN / START OVER row
   ════════════════════════════════════════════════════════════════════════ */
.ps-s7-refine-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.ps-s7-refine-btn,
.ps-s7-startover-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.ps-s7-refine-btn {
    border: 1.5px solid rgba(245, 130, 32, 0.5);
    background: rgba(245, 130, 32, 0.07);
    color: #B4540A;
}

    .ps-s7-refine-btn:hover {
        background: rgba(245, 130, 32, 0.14);
        box-shadow: 0 4px 14px rgba(245, 130, 32, 0.18);
    }

.ps-s7-startover-btn {
    border: 1.5px solid rgba(26, 29, 32, 0.14);
    background: #fff;
    color: #475569;
}

    .ps-s7-startover-btn:hover {
        border-color: rgba(26, 29, 32, 0.3);
        color: #1A1D20;
    }


/* ════════════════════════════════════════════════════════════════════════
   S. (#14) SECURE PAYMENT — SAAS CHECKOUT
   Styles for the upgraded scene-11 markup in the payment patch: order
   summary with VAT lines, payment-method tabs, brand marks, processor
   note and guarantee. All ids/handlers unchanged.
   ════════════════════════════════════════════════════════════════════════ */
.ps-pay-v2-summary {
    background: #fff;
    border: 1px solid rgba(26, 29, 32, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(26, 29, 32, 0.05);
    padding: 0 !important;
}

.ps-pay-v2-summary-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    background: #1A1D20;
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

    .ps-pay-v2-summary-head i {
        color: #F58220;
    }

.ps-pay-v2-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    font-size: 0.82rem;
    color: #475569;
}

    .ps-pay-v2-summary-row + .ps-pay-v2-summary-row {
        border-top: 1px dashed rgba(26, 29, 32, 0.08);
    }

.ps-pay-v2-summary-vat {
    color: #94A3B8;
    font-size: 0.76rem;
}

.ps-pay-v2-summary-total {
    border-top: 2px solid rgba(26, 29, 32, 0.1) !important;
    background: rgba(245, 130, 32, 0.05);
    padding: 14px 18px;
    font-size: 0.92rem;
    color: #1A1D20;
    font-weight: 700;
}

/* Method tabs */
.ps-pay-method-block {
    margin: 14px 0 4px;
}

.ps-pay-method-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(26, 29, 32, 0.5);
    margin-bottom: 8px;
}

.ps-pay-method-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ps-pay-method-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid rgba(26, 29, 32, 0.12);
    background: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

    .ps-pay-method-tab.is-active {
        border-color: #F58220;
        color: #1A1D20;
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.14);
    }

    .ps-pay-method-tab:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

.ps-pay-method-soon {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(26, 29, 32, 0.07);
    color: #64748B;
}

.ps-pay-method-brands {
    display: inline-flex;
    gap: 4px;
    margin-left: 2px;
}

.ps-pay-brand {
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid rgba(26, 29, 32, 0.16);
    color: #1A1D20;
    background: #fff;
}

.ps-pay-brand-visa {
    color: #1A1F71;
    border-color: rgba(26, 31, 113, 0.35);
}

.ps-pay-brand-mc {
    color: #EB001B;
    border-color: rgba(235, 0, 27, 0.3);
}

.ps-pay-brand-amex {
    color: #006FCF;
    border-color: rgba(0, 111, 207, 0.35);
}

/* Card form panel + CTA polish */
.ps-pay-card-form {
    background: #fff;
    border: 1px solid rgba(26, 29, 32, 0.08);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 16px rgba(26, 29, 32, 0.05);
    margin-top: 10px;
}

.ps-pay-v2-cta {
    width: 100%;
    border-radius: 14px;
    background: linear-gradient(135deg, #F58220, #E36A00);
    box-shadow: 0 10px 26px rgba(245, 130, 32, 0.35);
    font-weight: 800;
    letter-spacing: 0.01em;
    transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .ps-pay-v2-cta:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
        box-shadow: 0 14px 32px rgba(245, 130, 32, 0.42);
    }

.ps-pay-processor-note {
    margin: 12px 0 0;
    font-size: 0.7rem;
    line-height: 1.55;
    color: #64748B;
    text-align: center;
}

.ps-pay-guarantee {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    margin: 8px 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: #166534;
}

    .ps-pay-guarantee i {
        color: #16A34A;
        margin-top: 1px;
    }

/* ════════════════════════════════════════════════════════════════════════
   T. (items 15-17) SECURE PAYMENT — METHOD CHOOSER + STICKY NAV + 1 VIEWPORT
   The scene-11 left column is now: order summary → method chooser (step 1)
   OR the selected method's panel (step 2) → sticky Back + Pay CTA. The
   whole column is a flex layout so the nav pins to the bottom and the
   middle scrolls if needed — everything stays inside one viewport.
   ════════════════════════════════════════════════════════════════════════ */
#psScene10.ps-scene-pay-v2 .ps-left {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

/* The scrollable middle (everything between subtitle and the sticky nav). */
#psScene10.ps-scene-pay-v2 .ps-pay-v2-summary,
#psScene10.ps-scene-pay-v2 .ps-pay-choose,
#psScene10.ps-scene-pay-v2 .ps-pay-panels {
    flex: 0 0 auto;
}

#psScene10.ps-scene-pay-v2 .ps-pay-panels {
    overflow-y: auto;
    min-height: 0;
}

/* (item 16) Sticky nav — Back + Pay CTA, always visible at the foot. */
.ps-pay-nav-sticky {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0 4px;
    background: linear-gradient(180deg, rgba(255,255,255,0), var(--ps-bg, #fff) 32%);
    z-index: 5;
}

    .ps-pay-nav-sticky .ps-btn-back {
        flex: 0 0 auto;
    }

    .ps-pay-nav-sticky .ps-pay-v2-cta {
        flex: 1 1 auto;
    }

/* Order summary — compact so the whole scene fits one viewport. */
#psScene10.ps-scene-pay-v2 .ps-pay-v2-summary {
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(26,29,32,0.08);
    padding: 0;
    margin-bottom: 14px;
}

.ps-pay-v2-summary-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    background: #1A1D20;
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

    .ps-pay-v2-summary-head i {
        color: #F58220;
    }

.ps-pay-v2-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 18px;
    font-size: 0.82rem;
    color: #475569;
}

    .ps-pay-v2-summary-row + .ps-pay-v2-summary-row {
        border-top: 1px dashed rgba(26,29,32,0.08);
    }

.ps-pay-v2-summary-vat {
    color: #94A3B8;
    font-size: 0.76rem;
}

.ps-pay-v2-summary-total {
    border-top: 2px solid rgba(26,29,32,0.1) !important;
    background: rgba(245,130,32,0.05);
    padding: 13px 18px;
    font-size: 0.92rem;
    color: #1A1D20;
    font-weight: 700;
}

/* (item 17) Method chooser grid — 2×2 premium cards. */
.ps-pay-method-title {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(26,29,32,0.55);
    margin-bottom: 10px;
}

.ps-pay-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

.ps-pay-method-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    border: 1.5px solid rgba(26,29,32,0.12);
    background: rgba(255,255,255,0.78);
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

    .ps-pay-method-card:hover {
        border-color: rgba(245,130,32,0.5);
        box-shadow: 0 6px 18px rgba(26,29,32,0.1);
    }

    .ps-pay-method-card.is-active {
        border-color: #F58220;
        box-shadow: 0 0 0 3px rgba(245,130,32,0.16);
    }

.ps-pay-method-ic {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26,29,32,0.05);
    color: #1A1D20;
    font-size: 1.2rem;
}

.ps-pay-method-ic--capitec {
    background: rgba(0,160,227,0.1);
    color: #00A0E3;
}

.ps-pay-method-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ps-pay-method-name {
    font-weight: 800;
    font-size: 0.86rem;
    color: #1A1D20;
}

.ps-pay-method-sub {
    font-size: 0.68rem;
    color: #64748B;
}

.ps-pay-method-brands {
    margin-left: auto;
    display: inline-flex;
    gap: 3px;
}

.ps-pay-brand {
    font-size: 0.52rem;
    font-weight: 900;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid rgba(26,29,32,0.16);
    color: #1A1D20;
    background: #fff;
}

.ps-pay-brand-visa {
    color: #1A1F71;
    border-color: rgba(26,31,113,0.35);
}

.ps-pay-brand-mc {
    color: #EB001B;
    border-color: rgba(235,0,27,0.3);
}

.ps-pay-brand-amex {
    color: #006FCF;
    border-color: rgba(0,111,207,0.35);
}

@media (max-width: 560px) {
    .ps-pay-method-grid {
        grid-template-columns: 1fr;
    }

    .ps-pay-method-brands {
        display: none;
    }
}

/* (item 17) Per-method panels. */
.ps-pay-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #F58220;
}

    .ps-pay-change:hover {
        text-decoration: underline;
    }

.ps-pay-card-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ps-pay-card-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ps-pay-card-field label {
        font-size: 0.72rem;
        font-weight: 700;
        color: #475569;
    }

.ps-pay-card-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ps-pay-card-icon {
    position: absolute;
    left: 13px;
    color: #94A3B8;
    font-size: 0.95rem;
    pointer-events: none;
}

.ps-pay-card-input-wrap input,
.ps-pay-bank-select {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    padding: 0 14px 0 38px;
    border: 1.5px solid rgba(26,29,32,0.13);
    background: #fff;
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ps-pay-card-input-wrap input:focus,
    .ps-pay-bank-select:focus {
        border-color: #F58220;
        box-shadow: 0 0 0 3px rgba(245,130,32,0.14);
        outline: none;
    }

.ps-pay-card-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ps-pay-card-brand {
    position: absolute;
    right: 12px;
}

.ps-pay-card-err {
    font-size: 0.68rem;
    color: #dc2626;
    min-height: 0.8em;
}

.ps-pay-wallet-card {
    text-align: center;
    padding: 22px 18px;
    border-radius: 16px;
    border: 1px dashed rgba(26,29,32,0.18);
    background: rgba(255,255,255,0.6);
}

.ps-pay-wallet-ic {
    font-size: 2.4rem;
    color: #1A1D20;
    margin-bottom: 8px;
}

.ps-pay-wallet-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: #1A1D20;
    margin-bottom: 6px;
}

.ps-pay-wallet-body {
    font-size: 0.8rem;
    color: #64748B;
    line-height: 1.55;
    margin: 0 0 8px;
}

/* Trust strip + processor note + guarantee. */
.ps-pay-v2-trust {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0 0;
}

.ps-pay-v2-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #475569;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(26,29,32,0.05);
}

    .ps-pay-v2-trust-chip i {
        color: #16A34A;
    }

.ps-pay-processor-note {
    margin: 10px 0 0;
    font-size: 0.68rem;
    line-height: 1.5;
    color: #64748B;
    text-align: center;
}

.ps-pay-guarantee {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    margin: 8px 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: #166534;
}

    .ps-pay-guarantee i {
        color: #16A34A;
        margin-top: 1px;
    }

.ps-pay-v2-cta {
    border-radius: 14px;
    background: linear-gradient(135deg, #F58220, #E36A00);
    box-shadow: 0 10px 26px rgba(245,130,32,0.35);
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #fff;
    border: 0;
    transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .ps-pay-v2-cta:hover:not(:disabled) {
        filter: brightness(1.05);
        transform: translateY(-1px);
    }

    .ps-pay-v2-cta:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        filter: grayscale(0.3);
    }

.ps-pay-v2-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    color: #dc2626;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   U. (item 18) GOING-LIVE SUMMARY — Instagram-style listing card
   The launch scene's right rail now leads with a real property-listing
   preview: cover photo + price overlay, category, AI headline, location,
   key facts, a description snippet, and the seller's own face (like a
   listing agent). Built from the live twin + Step 5 photos.
   ════════════════════════════════════════════════════════════════════════ */
.ps-gl-card {
    background: #fff;
    border: 1px solid rgba(26, 29, 32, 0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(26, 29, 32, 0.1);
    margin-bottom: 16px;
    animation: psGlIn .4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

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

.ps-gl-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #475569;
    background: rgba(245, 130, 32, 0.05);
    border-bottom: 1px solid rgba(245, 130, 32, 0.12);
}

.ps-gl-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    animation: psGlPulse 1.8s infinite;
}

@keyframes psGlPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.ps-gl-cover {
    position: relative;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #e2e8f0;
}

.ps-gl-cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #334155, #1A1D20);
    color: rgba(255, 255, 255, 0.5);
    font-size: 2.4rem;
}

.ps-gl-count {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.ps-gl-price {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 7px 13px;
    border-radius: 12px;
    background: rgba(245, 130, 32, 0.95);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(245, 130, 32, 0.4);
}

    .ps-gl-price small {
        font-size: 0.66rem;
        font-weight: 600;
        opacity: 0.9;
    }

.ps-gl-body {
    padding: 14px 16px 12px;
}

.ps-gl-cat {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #F58220;
    margin-bottom: 4px;
}

.ps-gl-title {
    font-size: 0.96rem;
    font-weight: 800;
    color: #1A1D20;
    line-height: 1.3;
    margin-bottom: 5px;
}

.ps-gl-loc {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: #64748B;
    margin-bottom: 9px;
}

    .ps-gl-loc i {
        color: #F58220;
    }

.ps-gl-facts {
    display: flex;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid rgba(26, 29, 32, 0.07);
    border-bottom: 1px solid rgba(26, 29, 32, 0.07);
    margin-bottom: 10px;
}

.ps-gl-fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
}

    .ps-gl-fact i {
        color: #94A3B8;
        font-size: 0.85rem;
    }

.ps-gl-desc {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #64748B;
}

.ps-gl-seller {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(26, 29, 32, 0.07);
    background: rgba(248, 250, 252, 0.7);
}

.ps-gl-seller-pic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex: 0 0 auto;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(26, 29, 32, 0.15);
}

.ps-gl-seller-pic--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cbd5e1;
    color: #fff;
    font-size: 1.1rem;
}

.ps-gl-seller-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ps-gl-seller-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: #1A1D20;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-gl-seller-role {
    font-size: 0.68rem;
    color: #94A3B8;
}

.ps-gl-verified {
    margin-left: auto;
    color: #16A34A;
    font-size: 1.1rem;
}


/* ════════════════════════════════════════════════════════════════════════
   SECURE PAYMENT (#psScene10.ps-scene-pay-v2) — REFINEMENTS
   • (Issue 11) Compact the left order summary so the whole pane fits one
     viewport, and make the Back / Pay nav genuinely sticky with edge padding.
   • (Issue 12) Right pane is now a premium property-listing summary CARD
     (hero photo + price + headline + location + key features).
   ════════════════════════════════════════════════════════════════════════ */

/* ── (11) Compact order summary ─────────────────────────────────────────── */
#psScene10.ps-scene-pay-v2 .ps-pay-v2-summary {
    backdrop-filter: blur(6px) !important;       /* cheaper than blur(10) */
    -webkit-backdrop-filter: blur(6px) !important;
    margin-bottom: 10px !important;
    border-radius: 14px !important;
}
#psScene10.ps-scene-pay-v2 .ps-pay-v2-summary-head {
    padding: 8px 14px !important;
    font-size: 0.76rem !important;
}
#psScene10.ps-scene-pay-v2 .ps-pay-v2-summary-row {
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
}
#psScene10.ps-scene-pay-v2 .ps-pay-v2-summary-vat {
    padding-top: 2px !important;
    padding-bottom: 6px !important;
    font-size: 0.72rem !important;
}
#psScene10.ps-scene-pay-v2 .ps-pay-v2-summary-total {
    padding: 9px 14px !important;
    font-size: 0.86rem !important;
}
#psScene10.ps-scene-pay-v2 .ps-pay-v2-summary-total strong { font-size: 1rem !important; }

/* ── (11) Genuinely-sticky Back / Pay nav, padded off the pane edges ────── */
/* The whole left pane is the single scroll container; the nav is the last
   child and sticks to the bottom of the viewport while everything above it
   scrolls. This is what stops the order summary from pushing the nav out of
   view. (flex column + overflow-y:auto + position:sticky is well-supported.) */
#psScene10.ps-scene-pay-v2 .ps-left {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}
#psScene10.ps-scene-pay-v2 .ps-pay-nav-sticky {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: auto !important;
    flex: 0 0 auto !important;
    padding: 12px 2px max(10px, env(safe-area-inset-bottom)) 2px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 34%) !important;
    z-index: 6 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   (12) RIGHT PANE — PROPERTY SUMMARY CARD
   ════════════════════════════════════════════════════════════════════════ */
#psScene10.ps-scene-pay-v2 .ps-pay-v2-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 18px;
    overflow-y: auto;
    min-height: 0;
}

.ps-pay-proptile {
    background: #fff;
    border: 1px solid rgba(26,29,32,0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 34px -14px rgba(26,29,32,0.30);
}

.ps-pay-proptile-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #1A1D20 0%, #2c3137 100%);
    overflow: hidden;
}
.ps-pay-proptile-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ps-pay-proptile-noimg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.35);
    font-size: 2.4rem;
}
/* Bottom scrim so the price reads on any photo. */
.ps-pay-proptile-media::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 58%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.62) 100%);
    pointer-events: none;
}
.ps-pay-proptile-badge {
    position: absolute; top: 10px; left: 10px;
    z-index: 2;
    background: rgba(245,130,32,0.96);
    color: #fff;
    font-size: 0.64rem; font-weight: 800;
    letter-spacing: 0.05em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 7px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.ps-pay-proptile-price {
    position: absolute; bottom: 10px; left: 12px;
    z-index: 2;
    color: #fff;
    font-size: 1.18rem; font-weight: 800;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}

.ps-pay-proptile-body { padding: 13px 15px 15px; }
.ps-pay-proptile-title {
    font-size: 0.98rem; font-weight: 700;
    color: #1A1D20; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ps-pay-proptile-loc {
    display: flex; align-items: center; gap: 5px;
    margin-top: 5px;
    font-size: 0.78rem; color: #64748B;
}
.ps-pay-proptile-loc i { color: #F58220; font-size: 0.82rem; }
.ps-pay-proptile-feats {
    display: flex; flex-wrap: wrap; gap: 7px;
    margin-top: 12px;
}
.ps-pay-feat {
    display: inline-flex; align-items: center; gap: 5px;
    background: #F4F6F8;
    border: 1px solid rgba(26,29,32,0.06);
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 0.74rem; font-weight: 600;
    color: #334155;
}
.ps-pay-feat i { color: #F58220; font-size: 0.82rem; }

/* "What you get" — compact companion card under the property tile. */
.ps-pay-getcard {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(26,29,32,0.06);
    border-radius: 14px;
    padding: 13px 15px;
}
.ps-pay-getcard-head {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.78rem; font-weight: 800;
    color: #1A1D20; margin-bottom: 9px;
}
.ps-pay-getcard-head i { color: #F58220; }
.ps-pay-getcard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ps-pay-getcard-list li {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.78rem; color: #475569;
}
.ps-pay-getcard-list li i { color: #22C55E; font-size: 0.9rem; flex: 0 0 auto; }

/* On narrow screens the right pane stacks under the form (existing journey
   behaviour); keep the card full-width and a touch tighter. */
@media (max-width: 900px) {
    #psScene10.ps-scene-pay-v2 .ps-pay-v2-right { padding: 16px 16px 22px; }
    .ps-pay-proptile-media { aspect-ratio: 16 / 9; }
}