/* ============================================================
   SELL JOURNEY — Kinetic Quantum Glass v3
   Horizontal Spatial Carousel · Kinetic Timeline · No Vertical Scroll
   Ikhayalami · #1A1D20 / #F58220 / #56C4F8 / #0ABFBC
   ============================================================ */

@property --shimmer-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

:root {
    --sj-orange: #F58220;
    --sj-orange-dark: #D96B10;
    --sj-orange-light: #FFF3E8;
    --sj-orange-mid: #FFE0C0;
    --sj-blue: #56C4F8;
    --sj-blue-dark: #2b95ce;
    --sj-blue-light: #EAF7FE;
    --sj-teal: #0ABFBC;
    --sj-teal-dark: #08A09D;
    --sj-teal-light: #E3FAFA;
    --sj-dark: #1A1D20;
    --sj-dark-muted: #2D3748;
    --sj-muted: #6B7280;
    --sj-muted-light: #9CA3AF;
    --sj-success: #10B981;
    --sj-success-light: #D1FAE5;
    --sj-error: #EF4444;
    --sj-surface: #ffffff;
    --sj-border: rgba(0,0,0,0.08);
    --sj-border-orange: rgba(245,130,32,0.2);
    --sj-shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    --sj-shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
    --sj-shadow-lg: 0 12px 36px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    --sj-shadow-orange: 0 6px 20px rgba(245,130,32,0.28), 0 2px 6px rgba(245,130,32,0.16);
    --sj-radius-sm: 10px;
    --sj-radius-md: 16px;
    --sj-radius-lg: 20px;
    --sj-radius-xl: 28px;
    --sj-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --sj-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --sj-ease-spring: cubic-bezier(0.68, -0.4, 0.265, 1.4);
    --sj-track-panels: 5;
    --sj-sub-panels: 5;
}

/* ═══════════════════════════════════════════════════════════
   OUTER WRAPPER — White background so video doesn't bleed through
   ═══════════════════════════════════════════════════════════ */

#tab-sell {
    background: transparent;
    overflow: hidden;
}

.sj-wrapper {
    background: #ffffff !important;
    border: 1.5px solid rgba(255,255,255,0.92) !important;
    box-shadow: 0 5px 5px rgba(0,0,0,0.18), 0 4px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,1) !important;
    border-radius: 28px;
    padding: 0;
    position: relative;
    overflow: hidden;
    margin: 8px;
    display: flex;
    flex-direction: column;
    font-family: 'Outfit', sans-serif;
    /* Fixed height: kinetic timeline + viewport fills remaining */
    height: calc(100% - 16px);
}

/* ═══════════════════════════════════════════════════════════
   KINETIC TIMELINE — The fluid energy pathfinder
   Replaces old breadcrumb + progress bar entirely.
   Hidden on Panel 0 (theater). Revealed for panels 1+.
   ═══════════════════════════════════════════════════════════ */

.sj-kinetic-timeline {
    flex-shrink: 0;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 10px 20px 6px;
    display: none; /* hidden by default; JS reveals when panel > 0 */
    position: relative;
    z-index: 20;
    overflow: hidden;
}

    .sj-kinetic-timeline::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #F58220, #56C4F8, #0ABFBC);
        background-size: 200% 100%;
        animation: sjKtShimmer 3s linear infinite;
    }

@keyframes sjKtShimmer {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 0%;
    }
}

.sj-kt-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

/* The underlying grey rail */
.sj-kt-track {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
    background: rgba(0,0,0,0.07);
    border-radius: 50px;
    z-index: 0;
    margin-top: -12px; /* pull up so labels below don't interfere */
}

/* The glowing energy line that grows as user progresses */
.sj-kt-energy-line {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg, #F58220, #56C4F8);
    box-shadow: 0 0 8px rgba(245,130,32,0.5), 0 0 16px rgba(86,196,248,0.3);
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    width: 0%;
}

    /* Particle dots that travel along the line */
    .sj-kt-energy-line::after {
        content: '';
        position: absolute;
        right: -4px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--sj-orange);
        box-shadow: 0 0 10px rgba(245,130,32,0.8), 0 0 20px rgba(245,130,32,0.4);
        animation: sjKtPulse 1.5s ease-in-out infinite;
    }

@keyframes sjKtPulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(-50%) scale(1.5);
        opacity: 0.7;
    }
}

.sj-kt-nodes {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 1;
}

.sj-kt-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: default;
}

.sj-kt-node-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.05);
    border: 2px solid rgba(0,0,0,0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--sj-muted);
    transition: all 0.4s var(--sj-ease-bounce);
    position: relative;
    backdrop-filter: blur(4px);
}

.sj-kt-node-label {
    font-size: 0.54rem;
    font-weight: 700;
    color: var(--sj-muted-light);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.3s;
}

/* Active node */
.sj-kt-node.active .sj-kt-node-dot {
    background: var(--sj-orange);
    border-color: var(--sj-orange);
    color: white;
    box-shadow: 0 0 0 4px rgba(245,130,32,0.15), 0 4px 14px rgba(245,130,32,0.4);
    transform: scale(1.12);
    animation: sjKtNodePop 0.4s var(--sj-ease-bounce) both;
}

@keyframes sjKtNodePop {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1.12);
    }
}

.sj-kt-node.active .sj-kt-node-label {
    color: var(--sj-orange);
    font-weight: 800;
}

/* Done node */
.sj-kt-node.done .sj-kt-node-dot {
    background: var(--sj-success);
    border-color: var(--sj-success);
    color: white;
    box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}

.sj-kt-node.done .sj-kt-node-label {
    color: var(--sj-success);
}

.sj-kt-step-counter {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-70%);
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--sj-muted);
    background: rgba(0,0,0,0.05);
    padding: 2px 8px;
    border-radius: 50px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   HORIZONTAL PARALLAX SCROLL TRACK
   ═══════════════════════════════════════════════════════════ */

.sj-track-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.sj-scroll-track {
    display: flex;
    width: calc(var(--sj-track-panels) * 100%);
    height: 100%;
    transform: translateX(0%);
    transition: transform 0.52s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    align-items: stretch;
}

    .sj-scroll-track[data-panel="0"] {
        transform: translateX(0%);
    }

    .sj-scroll-track[data-panel="1"] {
        transform: translateX(calc(-100% / var(--sj-track-panels)));
    }

    .sj-scroll-track[data-panel="2"] {
        transform: translateX(calc(-200% / var(--sj-track-panels)));
    }

    .sj-scroll-track[data-panel="3"] {
        transform: translateX(calc(-300% / var(--sj-track-panels)));
    }

    .sj-scroll-track[data-panel="4"] {
        transform: translateX(calc(-400% / var(--sj-track-panels)));
    }

    .sj-scroll-track.slide-back {
        transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    }

/* Each outer panel */
.sj-panel {
    width: calc(100% / var(--sj-track-panels));
    flex-shrink: 0;
    overflow: hidden; /* NO vertical scroll on outer panels */
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Panel 0 — Step 0 theater */
.sj-panel--theater {
    overflow: hidden;
}

/* Panel 1 — Branch container */
.sj-panel--branch {
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* Branch step within panel 1 */
.sj-branch-step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(24px);
    transition: opacity 0.35s ease, transform 0.35s var(--sj-ease-out);
}

    .sj-branch-step.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

/* ═══════════════════════════════════════════════════════════
   SUB-TRACK: Horizontal carousel WITHIN each branch / panel
   ═══════════════════════════════════════════════════════════ */

.sj-sub-track-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.sj-sub-track {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 0.48s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Sub-panel widths driven by JS (translateX) */
.sj-sub-panel {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════
   HORIZONTAL LAYOUT — Left content col + Right context col
   This is the new premium two-column design per screen.
   ═══════════════════════════════════════════════════════════ */

.sj-horiz-layout {
    display: flex;
    height: 100%;
    gap: 0;
    overflow: hidden;
}

/* Left: main form / interaction area */
.sj-horiz-left {
    flex: 0 0 54%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px 16px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--sj-orange) rgba(245,130,32,0.08);
    border-right: 1px solid rgba(0,0,0,0.05);
}

    .sj-horiz-left::-webkit-scrollbar {
        width: 3px;
    }

    .sj-horiz-left::-webkit-scrollbar-track {
        background: transparent;
    }

    .sj-horiz-left::-webkit-scrollbar-thumb {
        background: var(--sj-orange);
        border-radius: 4px;
    }

/* Right: contextual card, map, AI insights */
.sj-horiz-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(248,249,250,0.6);
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.1) transparent;
}

    .sj-horiz-right::-webkit-scrollbar {
        width: 3px;
    }

    .sj-horiz-right::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.1);
        border-radius: 4px;
    }

/* ═══════════════════════════════════════════════════════════
   PANEL EYEBROW + TITLE (premium editorial typography)
   ═══════════════════════════════════════════════════════════ */

.sj-panel-eyebrow {
    flex-shrink: 0;
}

.sj-panel-step-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
}

    .sj-panel-step-chip.private {
        background: var(--sj-orange-light);
        color: var(--sj-orange);
        border: 1px solid var(--sj-border-orange);
    }

    .sj-panel-step-chip.agent {
        background: var(--sj-blue-light);
        color: var(--sj-blue-dark);
        border: 1px solid rgba(86,196,248,0.3);
    }

    .sj-panel-step-chip.agency {
        background: var(--sj-teal-light);
        color: var(--sj-teal-dark);
        border: 1px solid rgba(10,191,188,0.25);
    }

.sj-panel-title {
    font-size: clamp(1.15rem, 2.5vw, 1.6rem);
    font-weight: 900;
    color: var(--sj-dark);
    margin: 4px 0 2px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    flex-shrink: 0;
}

    .sj-panel-title em {
        font-style: normal;
        background: linear-gradient(135deg, var(--sj-orange), #ff9f4d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.sj-panel-sub {
    font-size: 0.75rem;
    color: var(--sj-muted);
    margin: 0 0 4px;
    line-height: 1.5;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   RIGHT PANEL CARDS — contextual info panels
   ═══════════════════════════════════════════════════════════ */

.sj-right-card {
    background: #ffffff;
    border: 1.5px solid rgba(0,0,0,0.07);
    border-radius: var(--sj-radius-lg);
    padding: 14px 15px;
    box-shadow: var(--sj-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
}

    .sj-right-card::-webkit-scrollbar {
        display: none;
    }

.sj-right-card-header {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--sj-dark);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}

    .sj-right-card-header i {
        color: var(--sj-orange);
    }

/* Intelligence preview card */
.sj-intel-preview-card {
    background: linear-gradient(135deg, rgba(245,130,32,0.03), #ffffff);
}

/* AI insight tips */
.sj-intel-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 11px;
    background: rgba(245,130,32,0.04);
    border-radius: var(--sj-radius-sm);
    border: 1px solid rgba(245,130,32,0.12);
    flex-shrink: 0;
}

.sj-intel-tip-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--sj-orange-light);
    color: var(--sj-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.sj-intel-tip p {
    font-size: 0.71rem;
    color: var(--sj-muted);
    margin: 0;
    line-height: 1.5;
}

    .sj-intel-tip p strong {
        color: var(--sj-dark);
    }

/* ═══════════════════════════════════════════════════════════
   CARD FIELD — Form group within the left panel
   ═══════════════════════════════════════════════════════════ */

.sj-card-field {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   HORIZONTAL NAV ROW (bottom of left panel)
   ═══════════════════════════════════════════════════════════ */

.sj-horiz-nav {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* ═══════════════════════════════════════════════════════════
   SUB-PROGRESS DOTS (replacing old screen dots)
   ═══════════════════════════════════════════════════════════ */

.sj-sub-progress {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 6px 0 4px;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.04);
}

.sj-sub-dot {
    width: 20px;
    height: 3px;
    border-radius: 50px;
    background: rgba(0,0,0,0.1);
    transition: all 0.3s var(--sj-ease-bounce);
    cursor: pointer;
}

    .sj-sub-dot.active {
        width: 28px;
        background: var(--sj-orange);
        box-shadow: 0 0 6px rgba(245,130,32,0.4);
    }

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

/* ═══════════════════════════════════════════════════════════
   ROOMS GRID — Stepper layout
   ═══════════════════════════════════════════════════════════ */

.sj-rooms-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sj-room-stepper {
    flex: 1;
    min-width: 80px;
    background: #fafbfc;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: var(--sj-radius-md);
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.sj-room-icon {
    font-size: 1.1rem;
    color: var(--sj-orange);
}

.sj-room-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--sj-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════
   LISTING SCORE RING
   ═══════════════════════════════════════════════════════════ */

.sj-listing-score-card {
    align-items: center;
    text-align: center;
}

.sj-score-ring-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin: 0 auto 8px;
}

.sj-score-ring {
    width: 80px;
    height: 80px;
}

.sj-score-ring-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sj-score-number {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--sj-dark);
    line-height: 1;
}

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

.sj-score-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
}

.sj-score-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.69rem;
    font-weight: 600;
    color: var(--sj-muted);
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,0.03);
    transition: all 0.2s;
}

    .sj-score-item i {
        color: var(--sj-success);
        font-size: 0.8rem;
    }

    .sj-score-item.done {
        color: var(--sj-dark);
        background: var(--sj-success-light);
    }

    .sj-score-item.missing i {
        color: var(--sj-muted-light);
    }

/* ═══════════════════════════════════════════════════════════
   MAP — Taller in right panel
   ═══════════════════════════════════════════════════════════ */

.sj-map-tall {
    height: 220px !important;
    flex: 1;
    max-height: 280px;
}

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */

.sj-toast {
    position: fixed;
    top: 20px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-16px) scale(0.96);
    background: rgba(26,29,32,0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 60px;
    opacity: 0;
    transition: all 0.28s var(--sj-ease-bounce);
    pointer-events: none;
    z-index: 99999;
    white-space: nowrap;
    box-shadow: var(--sj-shadow-lg);
    letter-spacing: 0.01em;
    font-family: 'Outfit', sans-serif;
}

    .sj-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }

/* ═══════════════════════════════════════════════════════════
   STEP 0 — EDITORIAL THEATER (UNCHANGED)
   ═══════════════════════════════════════════════════════════ */

.sj-step0-theater {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    background: transparent;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.sj-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(55px);
    opacity: 0.22;
    animation: sjOrbDrift 9s ease-in-out infinite alternate;
}

.sj-orb--orange {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #F58220 0%, #FFD0A0 55%, transparent 100%);
    top: -70px;
    left: -60px;
    animation-delay: 0s;
}

.sj-orb--blue {
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, #56C4F8 0%, #B8E8FF 55%, transparent 100%);
    bottom: -50px;
    right: -50px;
    animation-delay: 4s;
}

@keyframes sjOrbDrift {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(28px, 18px) scale(1.1);
    }
}

.sj-editorial-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    opacity: 0;
    animation: sjEyebrowFadeIn 0.5s ease 0.15s forwards;
}

.sj-eyebrow-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,130,32,0.3), transparent);
}

.sj-eyebrow-text {
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--sj-orange);
    white-space: nowrap;
    text-transform: uppercase;
}

@keyframes sjEyebrowFadeIn {
    from {
        opacity: 0;
        transform: scaleX(0.9);
    }

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

.sj-theater-hero {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 14px 16px 10px;
    flex-shrink: 0;
    width: 100%;
    overflow: hidden;
}

.sj-theater-heading {
    font-size: clamp(1.18rem, 3.4vw, 1.75rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: var(--sj-dark);
    margin: 0 0 4px;
    position: relative;
    z-index: 1;
}

.sj-heading-main-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}

.sj-ai-logo-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.sj-ai-logo-inner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.72);
    backdrop-filter: saturate(180%) blur(10px);
    color: var(--sj-orange);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 4px 10px 4px 8px;
    border-radius: 8px;
    border: 1.5px solid rgba(245,130,32,0.35);
    box-shadow: 0 2px 8px rgba(245,130,32,0.12), inset 0 1px 0 rgba(255,255,255,0.95);
    animation: sjAiLogoEnter 0.7s cubic-bezier(0.34,1.4,0.64,1) 0.2s both;
    position: relative;
    overflow: hidden;
}

    .sj-ai-logo-inner::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(245,130,32,0.08), transparent);
        animation: sjAiLogoSheen 4s linear 1.5s infinite;
    }

@keyframes sjAiLogoSheen {
    from {
        left: -100%;
    }

    to {
        left: 200%;
    }
}

.sj-ai-logo-inner svg {
    color: var(--sj-orange);
    animation: sjStarSpin 6s linear infinite;
    transform-origin: center;
}

@keyframes sjStarSpin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.15);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes sjAiLogoEnter {
    from {
        opacity: 0;
        transform: scale(0.7) translateX(-10px);
    }

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

.sj-scramble-text {
    display: inline-block;
    opacity: 0;
    animation: sjScrambleSlideIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    color: var(--sj-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

@keyframes sjScrambleSlideIn {
    from {
        opacity: 0;
        transform: translateX(60px);
        clip-path: inset(0 0 0 100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        clip-path: inset(0 0 0 0%);
    }
}

.scramble-char {
    color: var(--sj-orange);
    font-weight: 900;
    display: inline;
    animation: sjCharFlash 0.08s ease;
}

@keyframes sjCharFlash {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

.sj-heading-line2-standalone {
    font-size: clamp(0.72rem, 1.6vw, 0.88rem);
    font-weight: 700;
    color: var(--sj-muted);
    letter-spacing: -0.01em;
    margin: 2px 0 2px;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

.sj-theater-sub {
    font-size: 0.7rem;
    color: var(--sj-muted-light);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Theater cards */
.sj-theater-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1.4vw, 14px);
    width: 100%;
    padding: 0 12px;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 3;
    perspective: 1200px;
}

.sj-theater-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(0,0,0,0.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    cursor: pointer;
    transform-style: preserve-3d;
    transition: box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1), background 0.5s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* prevent any inner content from breaking card bounds */
    animation: sjCardFallIn 0.7s var(--sj-ease-bounce) both;
}

    .sj-theater-card:nth-child(1) {
        animation-delay: 0.35s;
    }

    .sj-theater-card:nth-child(2) {
        animation-delay: 0.52s;
    }

    .sj-theater-card:nth-child(3) {
        animation-delay: 0.69s;
    }

@keyframes sjCardFallIn {
    0% {
        opacity: 0;
        transform: translateY(-80px) rotateX(28deg) scale(0.9);
    }

    60% {
        opacity: 1;
    }

    80% {
        transform: translateY(6px) rotateX(-4deg) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg) scale(1);
    }
}

.sj-theater-card:focus-visible {
    outline: 2px solid var(--sj-orange);
    outline-offset: 3px;
}

.sj-theater-card:hover {
    background: linear-gradient(180deg, #ffffff 0%, #FAFBFC 100%);
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.1), 0 10px 20px -5px rgba(0,0,0,0.05);
}

.sj-theater-card:active {
    transform: scale(0.985) translateY(1px);
}

.sj-theater-card.sj-tc-selected {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.sj-tc--private.sj-tc-selected {
    border-color: rgba(245,130,32,0.6);
    box-shadow: 0 0 0 3px rgba(245,130,32,0.2), 0 20px 48px rgba(245,130,32,0.18);
}

.sj-tc--agent.sj-tc-selected {
    border-color: rgba(86,196,248,0.6);
    box-shadow: 0 0 0 3px rgba(86,196,248,0.2), 0 20px 48px rgba(86,196,248,0.18);
}

.sj-tc--agency.sj-tc-selected {
    border-color: rgba(10,191,188,0.6);
    box-shadow: 0 0 0 3px rgba(10,191,188,0.2), 0 20px 48px rgba(10,191,188,0.18);
}

.sj-tc-glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(170deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 60%, transparent 100%);
    border-radius: 20px 20px 0 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.32s ease;
}

.sj-theater-card:hover .sj-tc-glass {
    opacity: 0.7;
}

.sj-tc-mouse-glow {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.sj-theater-card:hover .sj-tc-mouse-glow {
    opacity: 1;
}

.sj-tc--private .sj-tc-mouse-glow {
    background: radial-gradient(circle 140px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(245,130,32,0.12) 0%, transparent 70%);
}

.sj-tc--agent .sj-tc-mouse-glow {
    background: radial-gradient(circle 140px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(86,196,248,0.12) 0%, transparent 70%);
}

.sj-tc--agency .sj-tc-mouse-glow {
    background: radial-gradient(circle 140px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(10,191,188,0.12) 0%, transparent 70%);
}

.sj-tc-border-shimmer {
    position: absolute;
    inset: -1.5px;
    border-radius: 21px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: conic-gradient(from var(--shimmer-angle, 0deg), transparent 0deg, rgba(245,130,32,0) 60deg, rgba(245,130,32,0.65) 120deg, rgba(86,196,248,0.65) 180deg, rgba(10,191,188,0.5) 220deg, transparent 280deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1.5px;
}

.sj-theater-card:hover .sj-tc-border-shimmer {
    opacity: 0.5;
    animation: sjShimmerSpin 5s linear infinite;
}

@keyframes sjShimmerSpin {
    from {
        --shimmer-angle: 0deg;
    }

    to {
        --shimmer-angle: 360deg;
    }
}

.sj-tc-icon-wrap {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    margin-bottom: 6px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(8px);
    transition: transform 0.4s cubic-bezier(0.34,1.5,0.64,1), box-shadow 0.4s ease;
}

.sj-tc--private .sj-tc-icon-wrap {
    background: linear-gradient(135deg, rgba(255,243,232,0.9), rgba(255,228,196,0.7));
    border: 1px solid rgba(245,130,32,0.25);
    box-shadow: 0 4px 12px rgba(245,130,32,0.15), inset 0 1px 0 rgba(255,255,255,0.9);
}

.sj-tc--agent .sj-tc-icon-wrap {
    background: linear-gradient(135deg, rgba(234,247,254,0.9), rgba(196,232,255,0.7));
    border: 1px solid rgba(86,196,248,0.25);
    box-shadow: 0 4px 12px rgba(86,196,248,0.15), inset 0 1px 0 rgba(255,255,255,0.9);
}

.sj-tc--agency .sj-tc-icon-wrap {
    background: linear-gradient(135deg, rgba(227,250,250,0.9), rgba(184,244,243,0.7));
    border: 1px solid rgba(10,191,188,0.25);
    box-shadow: 0 4px 12px rgba(10,191,188,0.15), inset 0 1px 0 rgba(255,255,255,0.9);
}

.sj-tc-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(12px,2vw,18px) clamp(10px,1.8vw,16px) clamp(10px,1.8vw,14px);
    gap: 5px;
    overflow: hidden;
}

.sj-tc-label {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 1px;
}

.sj-tc--private .sj-tc-label {
    color: var(--sj-orange);
}

.sj-tc--agent .sj-tc-label {
    color: var(--sj-blue-dark);
}

.sj-tc--agency .sj-tc-label {
    color: var(--sj-teal-dark);
}

.sj-tc-title {
    font-size: clamp(0.82rem, 1.55vw, 0.97rem);
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: -0.025em;
    color: var(--sj-dark);
    margin: 0;
    transition: transform 0.32s var(--sj-ease-out);
}

.sj-theater-card:hover .sj-tc-title {
    transform: translateY(-2px);
}

.sj-tc-desc {
    font-size: clamp(0.65rem, 1.05vw, 0.72rem);
    color: var(--sj-muted);
    line-height: 1.55;
    margin: 0;
    /* Allow text to occupy available space but never push tags/CTA out */
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Show roughly 5 lines on desktop, fewer on smaller cards */
    -webkit-line-clamp: 8;
}

.sj-tc-tags {
    /* 2-column grid: exactly 2 tags per row → 4 tags = 2 rows, perfectly aligned */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 6px;
    flex-shrink: 0; /* never squish — always reserve space for exactly 2 rows */
}

    .sj-tc-tags span {
        font-size: 0.57rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        padding: 4px 7px;
        border-radius: 50px;
        border: 1px solid;
        background: rgba(255,255,255,0.72);
        backdrop-filter: blur(4px);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.sj-tc--private .sj-tc-tags span {
    color: var(--sj-orange);
    border-color: rgba(245,130,32,0.35);
}

.sj-tc--agent .sj-tc-tags span {
    color: var(--sj-blue-dark);
    border-color: rgba(86,196,248,0.35);
}

.sj-tc--agency .sj-tc-tags span {
    color: var(--sj-teal-dark);
    border-color: rgba(10,191,188,0.35);
}

.sj-tc-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto; /* push CTA to absolute bottom regardless of content above */
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0; /* never compress */
}

.sj-cta-arrow {
    font-size: 1rem;
    transition: transform 0.35s var(--sj-ease-bounce), font-size 0.35s var(--sj-ease-bounce), color 0.25s ease;
    display: inline-block;
}

.sj-theater-card:hover .sj-cta-arrow {
    transform: translateX(5px) scale(1.0);
    font-size: 1.55rem;
}

.sj-tc--private .sj-tc-cta {
    color: var(--sj-orange);
}

.sj-tc--agent .sj-tc-cta {
    color: var(--sj-blue-dark);
}

.sj-tc--agency .sj-tc-cta {
    color: var(--sj-teal-dark);
}

.sj-theater-reassurance {
    position: relative;
    z-index: 3;
    text-align: center;
    font-size: 0.6rem;
    color: var(--sj-muted-light);
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 8px 12px 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
    line-height: 1.8;
}

.sj-reassurance-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.sj-theater-reassurance i {
    font-size: 0.68rem;
    color: var(--sj-success);
}

.sj-reassurance-sep {
    opacity: 0.3;
    flex-shrink: 0;
}

/* SVGs */
/* Scoped: only applies inside the sell journey panel.
   The floating buttons (a11y, settings, engagement) share the sj-svg-clean class
   but must use the fab-icon-svg sizing (34px) from site.css. Without this scope,
   sell-journey.css (loaded last via @section Styles) overrides fab-icon-svg and
   blows the icon out to 52px — filling the entire 56px button rectangle. */
.sj-wrapper .sj-svg-clean,
.sj-step0-theater .sj-svg-clean {
    width: 52px;
    height: 52px;
    overflow: visible;
}

.sj-svg-icon {
    width: 36px;
    height: 36px;
    overflow: visible;
}

/* Animated elements */
.sj-anim-float {
    animation: sjFloatBob 3s ease-in-out infinite;
}

@keyframes sjFloatBob {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.sj-anim-beam-vertical {
    animation: sjBeamPulse 2s ease-in-out infinite;
}

@keyframes sjBeamPulse {
    0%,100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.sj-anim-pulse {
    animation: sjDotPulse 1.8s ease-in-out infinite;
}

@keyframes sjDotPulse {
    0%,100% {
        opacity: 0.8;
    }

    50% {
        r: 5.5;
        opacity: 1;
    }
}

.sj-anim-ripple {
    animation: sjRippleOut 2.5s ease-out infinite;
}

.sj-anim-ripple-delay {
    animation: sjRippleOut 2.5s ease-out 1.2s infinite;
}

@keyframes sjRippleOut {
    0% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
    }
}

.sj-anim-pulse-fast {
    animation: sjPulseFast 1.4s ease-in-out infinite;
}

@keyframes sjPulseFast {
    0%,100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

.sj-anim-orbit {
    animation: sjOrbit 3s linear infinite;
    transform-origin: 40px 40px;
}

.sj-anim-orbit-reverse {
    animation: sjOrbitRev 3s linear infinite;
    transform-origin: 40px 40px;
}

@keyframes sjOrbit {
    from {
        transform: rotate(0deg) translateX(16px);
    }

    to {
        transform: rotate(360deg) translateX(16px);
    }
}

@keyframes sjOrbitRev {
    from {
        transform: rotate(0deg) translateX(-12px);
    }

    to {
        transform: rotate(-360deg) translateX(-12px);
    }
}

.sj-icon-tower {
    transition: transform 0.45s cubic-bezier(0.34,1.5,0.64,1);
}

.sj-tc--agency:hover .sj-tower--1 {
    transform: translateY(-3px);
}

.sj-tc--agency:hover .sj-tower--2 {
    transform: translateY(-5px);
    transition-delay: 0.06s;
}

.sj-tc--agency:hover .sj-tower--3 {
    transform: translateY(-3px);
    transition-delay: 0.12s;
}

.sj-icon-packet {
    animation: sjPacketTravel 2s ease-in-out infinite;
}

.sj-packet--1 {
    animation-delay: 0s;
}

.sj-packet--2 {
    animation-delay: 0.65s;
}

.sj-packet--3 {
    animation-delay: 1.3s;
}

@keyframes sjPacketTravel {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    20% {
        opacity: 1;
        transform: scale(1);
    }

    80% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: scale(0.6) translate(8px, -6px);
    }
}

/* ═══════════════════════════════════════════════════════════
   FORM COMPONENTS (inherited + enhanced)
   ═══════════════════════════════════════════════════════════ */

.sj-form-section {
    background: #FAFBFC;
    border: 1.5px solid rgba(0,0,0,0.07);
    border-radius: var(--sj-radius-lg);
    padding: 12px 13px;
    box-shadow: var(--sj-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.sj-section-title {
    font-size: 0.67rem;
    font-weight: 800;
    color: var(--sj-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 2px;
}

    .sj-section-title i {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        background: var(--sj-orange-light);
        color: var(--sj-orange);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        flex-shrink: 0;
    }

.sj-section-badge {
    margin-left: auto;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--sj-success);
    background: var(--sj-success-light);
    padding: 2px 7px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sj-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sj-field--full {
    grid-column: 1 / -1;
}

.sj-label {
    display: block;
    font-size: 0.69rem;
    font-weight: 700;
    color: var(--sj-dark);
    margin-bottom: 5px;
    letter-spacing: 0.01em;
}

.sj-input-wrap {
    position: relative;
}

.sj-input-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sj-muted-light);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
}

.sj-input {
    width: 100%;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: var(--sj-radius-sm);
    padding: 9px 11px 9px 32px;
    font-size: 0.82rem;
    color: var(--sj-dark);
    font-weight: 500;
    outline: none;
    transition: all 0.2s var(--sj-ease-out);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
    font-family: inherit;
}

    .sj-input::placeholder {
        color: var(--sj-muted-light);
        font-weight: 400;
    }

    .sj-input:focus {
        border-color: var(--sj-orange);
        box-shadow: 0 0 0 3px rgba(245,130,32,0.1), inset 0 1px 2px rgba(0,0,0,0.03);
    }

.sj-input--no-icon {
    padding-left: 11px;
}

.sj-field-hint {
    font-size: 0.61rem;
    color: var(--sj-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sj-select {
    width: 100%;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: var(--sj-radius-sm);
    padding: 9px 32px 9px 11px;
    font-size: 0.82rem;
    color: var(--sj-dark);
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: all 0.2s var(--sj-ease-out);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236B7280' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 11px;
    font-family: inherit;
}

    .sj-select:focus {
        border-color: var(--sj-orange);
        box-shadow: 0 0 0 3px rgba(245,130,32,0.1);
    }

.sj-toggle-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.sj-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 50px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.09);
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.2s var(--sj-ease-out);
    font-family: inherit;
}

    .sj-toggle:hover {
        border-color: var(--sj-orange);
        color: var(--sj-orange);
    }

    .sj-toggle.active {
        background: var(--sj-orange);
        border-color: var(--sj-orange);
        color: white;
        box-shadow: 0 3px 12px rgba(245,130,32,0.28);
    }

.sj-textarea {
    width: 100%;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: var(--sj-radius-sm);
    padding: 9px 11px;
    font-size: 0.82rem;
    color: var(--sj-dark);
    font-weight: 500;
    outline: none;
    transition: all 0.2s var(--sj-ease-out);
    resize: vertical;
    min-height: 100px;
    line-height: 1.55;
    font-family: inherit;
}

    .sj-textarea::placeholder {
        color: var(--sj-muted-light);
        font-weight: 400;
    }

    .sj-textarea:focus {
        border-color: var(--sj-orange);
        box-shadow: 0 0 0 3px rgba(245,130,32,0.1);
    }

/* CTA Button */
.sj-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--sj-orange), var(--sj-orange-dark));
    color: #fff;
    border: none;
    border-radius: 60px;
    padding: 12px 22px;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.26s var(--sj-ease-spring);
    box-shadow: var(--sj-shadow-orange);
    flex: 1;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    font-family: inherit;
}

    .sj-cta-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent);
        opacity: 0;
        transition: opacity 0.2s;
    }

    .sj-cta-btn:hover::before {
        opacity: 1;
    }

    .sj-cta-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 32px rgba(245,130,32,0.44);
    }

    .sj-cta-btn:active {
        transform: scale(0.98);
    }

    .sj-cta-btn.sj-cta-disabled {
        background: linear-gradient(135deg,#E5E7EB,#D1D5DB);
        color: var(--sj-muted-light);
        box-shadow: none;
        cursor: not-allowed;
        pointer-events: none;
    }

    .sj-cta-btn.sj-cta-pulse {
        animation: sjPulseGlow 2s infinite;
    }

@keyframes sjPulseGlow {
    0%,100% {
        box-shadow: var(--sj-shadow-orange);
    }

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

/* Back button */
.sj-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 50px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.09);
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    flex-shrink: 0;
    white-space: nowrap;
}

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

/* Category pills */
.sj-category-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sj-category-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 50px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.09);
    font-size: 0.69rem;
    font-weight: 700;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.2s var(--sj-ease-out);
    white-space: nowrap;
    font-family: inherit;
}

    .sj-category-pill:hover {
        border-color: var(--sj-orange);
        color: var(--sj-orange);
    }

    .sj-category-pill.active {
        background: var(--sj-orange);
        border-color: var(--sj-orange);
        color: white;
        box-shadow: 0 3px 10px rgba(245,130,32,0.28);
    }

.sj-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.sj-type-option {
    padding: 5px 11px;
    border-radius: 8px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.09);
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
}

    .sj-type-option:hover {
        border-color: var(--sj-orange);
        color: var(--sj-orange);
    }

    .sj-type-option.active {
        background: var(--sj-orange-light);
        border-color: var(--sj-orange);
        color: var(--sj-orange);
        font-weight: 700;
    }

.sj-feature-btn.active {
    background: var(--sj-orange-light);
    border-color: var(--sj-orange);
    color: var(--sj-orange);
    font-weight: 700;
}

/* Stepper */
.sj-stepper-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.09);
    border-radius: var(--sj-radius-sm);
    padding: 4px 7px;
}

.sj-step-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.09);
    background: #f5f6f7;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s var(--sj-ease-spring);
    color: var(--sj-dark);
    font-weight: 800;
    flex-shrink: 0;
}

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

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

/* Price input */
.sj-price-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sj-price-currency {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--sj-muted);
    flex-shrink: 0;
}

/* AI Pricing card */
.sj-ai-pricing-card {
    background: linear-gradient(135deg, rgba(102,126,234,0.06), rgba(118,75,162,0.06));
    border: 1.5px solid rgba(102,126,234,0.2);
    border-radius: var(--sj-radius-md);
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}

.sj-ai-pricing-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.sj-ai-pricing-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: #5a5fcf;
    display: block;
    margin-bottom: 2px;
}

.sj-ai-pricing-range {
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--sj-dark);
    display: block;
}

.sj-ai-pricing-note {
    font-size: 0.6rem;
    color: var(--sj-muted);
    margin-top: 2px;
    display: block;
    line-height: 1.3;
}

/* Address visibility */
.sj-address-visibility {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    background: rgba(245,130,32,0.04);
    border-radius: var(--sj-radius-sm);
    border: 1.5px solid rgba(245,130,32,0.12);
    flex-shrink: 0;
}

.sj-visibility-label {
    font-size: 0.69rem;
    font-weight: 600;
    color: var(--sj-dark);
}

.sj-visibility-toggle-group {
    display: flex;
    gap: 5px;
}

.sj-visibility-option {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--sj-muted);
    transition: all 0.2s;
}

    .sj-visibility-option.active {
        background: white;
        border-color: var(--sj-orange);
        color: var(--sj-orange);
        box-shadow: var(--sj-shadow-sm);
    }

/* Resilience section */
.sj-resilience-section {
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(86,196,248,0.05));
    border: 1.5px solid rgba(16,185,129,0.18);
    border-radius: var(--sj-radius-lg);
    padding: 11px 12px;
    flex-shrink: 0;
}

.sj-resilience-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.sj-resilience-icon {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
    color: var(--sj-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.sj-resilience-title {
    font-size: 0.69rem;
    font-weight: 800;
    color: var(--sj-dark);
    flex: 1;
}

.sj-resilience-sub {
    font-size: 0.6rem;
    color: var(--sj-muted);
    margin-top: 1px;
    display: block;
}

.sj-resilience-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sj-resilience-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 50px;
    background: white;
    border: 1.5px solid rgba(16,185,129,0.2);
    font-size: 0.67rem;
    font-weight: 700;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

    .sj-resilience-chip:hover {
        border-color: var(--sj-success);
        color: var(--sj-success);
    }

    .sj-resilience-chip.active {
        background: var(--sj-success-light);
        border-color: var(--sj-success);
        color: var(--sj-success);
        font-weight: 800;
    }

/* Lifestyle */
.sj-lifestyle-section {
    background: linear-gradient(135deg, rgba(245,130,32,0.04), rgba(86,196,248,0.04));
    border: 1.5px solid var(--sj-border-orange);
    border-radius: var(--sj-radius-lg);
    padding: 10px 12px;
    flex-shrink: 0;
}

.sj-lifestyle-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.sj-lifestyle-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 50px;
    background: white;
    border: 1.5px solid rgba(245,130,32,0.15);
    font-size: 0.67rem;
    font-weight: 700;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

    .sj-lifestyle-chip:hover {
        border-color: var(--sj-orange);
        color: var(--sj-orange);
    }

    .sj-lifestyle-chip.active {
        background: var(--sj-orange-light);
        border-color: var(--sj-orange);
        color: var(--sj-orange);
        font-weight: 800;
    }

/* AI Enhance button */
.sj-ai-enhance-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.71rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 7px;
    transition: all 0.25s var(--sj-ease-spring);
    box-shadow: 0 4px 14px rgba(102,126,234,0.32);
    font-family: inherit;
}

    .sj-ai-enhance-btn.visible {
        display: flex;
    }

    .sj-ai-enhance-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 7px 20px rgba(102,126,234,0.44);
    }

    .sj-ai-enhance-btn.loading {
        opacity: 0.7;
        cursor: wait;
        pointer-events: none;
    }

.sj-ai-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: sjSpin 0.7s linear infinite;
    flex-shrink: 0;
}

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

/* Photo upload */
.sj-photo-upload-zone {
    border: 2px dashed rgba(0,0,0,0.12);
    border-radius: var(--sj-radius-md);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    background: #FAFBFC;
    flex-shrink: 0;
}

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

    .sj-photo-upload-zone input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

.sj-photo-upload-icon {
    font-size: 1.5rem;
    color: var(--sj-muted-light);
    margin-bottom: 5px;
}

.sj-photo-upload-label {
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--sj-dark);
    display: block;
}

.sj-photo-upload-sublabel {
    font-size: 0.62rem;
    color: var(--sj-muted);
    margin-top: 2px;
    display: block;
}

.sj-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 6px;
}

.sj-photo-thumb {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f3f5;
}

    .sj-photo-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Map */
.sj-map-wrap {
    border-radius: var(--sj-radius-md);
    overflow: hidden;
    border: 1.5px solid rgba(0,0,0,0.09);
    height: 165px;
    position: relative;
    background: #f1f3f5;
    flex-shrink: 0;
    box-shadow: var(--sj-shadow-sm);
}

.sj-map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--sj-muted);
    font-size: 0.72rem;
    font-weight: 600;
    background: linear-gradient(135deg, #f8f9fa, #f1f3f5);
}

    .sj-map-placeholder i {
        font-size: 1.7rem;
        color: var(--sj-muted-light);
    }

#sjPropertyMap, #sjAgentMap {
    width: 100%;
    height: 100%;
}

.sj-map-zoom-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
}

.sj-map-zoom-btn, .sj-map-locate-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: white;
    border: 1.5px solid rgba(0,0,0,0.12);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sj-shadow-sm);
    color: var(--sj-dark);
    transition: all 0.18s;
    font-family: inherit;
}

    .sj-map-zoom-btn:hover, .sj-map-locate-btn:hover {
        background: var(--sj-orange);
        color: white;
        border-color: var(--sj-orange);
    }

.sj-map-locate-btn {
    font-size: 0.8rem;
}

.sj-map-actions {
    display: flex;
    gap: 6px;
    margin-top: 5px;
    align-items: center;
    flex-shrink: 0;
}

.sj-map-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 50px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.09);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

    .sj-map-action-btn:hover {
        border-color: var(--sj-blue);
        color: var(--sj-blue-dark);
    }

.sj-map-tip {
    font-size: 0.6rem;
    color: var(--sj-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Autocomplete */
.sj-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: var(--sj-radius-md);
    border: 1.5px solid rgba(0,0,0,0.09);
    box-shadow: var(--sj-shadow-lg);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.sj-ac-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 9px;
}

    .sj-ac-item:last-child {
        border-bottom: none;
    }

    .sj-ac-item:hover, .sj-ac-item--active {
        background: var(--sj-orange-light);
    }

.sj-ac-icon {
    color: var(--sj-orange);
    font-size: 0.76rem;
    flex-shrink: 0;
}

.sj-ac-main {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sj-dark);
    display: block;
}

.sj-ac-secondary {
    font-size: 0.64rem;
    color: var(--sj-muted);
    display: block;
}

/* Agent cards */
.sj-agent-match-cards {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sj-agent-match-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1.5px solid rgba(0,0,0,0.07);
    border-radius: var(--sj-radius-md);
    cursor: pointer;
    transition: all 0.22s var(--sj-ease-out);
    flex-shrink: 0;
}

    .sj-agent-match-card:hover {
        border-color: var(--sj-blue);
        box-shadow: var(--sj-shadow-md);
        transform: translateY(-1px);
    }

    .sj-agent-match-card.selected {
        border-color: var(--sj-blue);
        box-shadow: 0 0 0 3px rgba(86,196,248,0.15), var(--sj-shadow-md);
    }

.sj-agent-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sj-blue-light), #B9E7FF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sj-blue-dark);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.sj-agent-info {
    flex: 1;
    min-width: 0;
}

.sj-agent-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--sj-dark);
}

.sj-agent-agency {
    font-size: 0.64rem;
    color: var(--sj-muted);
    margin-bottom: 3px;
}

.sj-agent-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sj-agent-stat {
    font-size: 0.61rem;
    font-weight: 600;
    color: var(--sj-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

    .sj-agent-stat i {
        font-size: 0.7rem;
        color: var(--sj-orange);
    }

.sj-agent-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.sj-agent-score-val {
    font-size: 0.92rem;
    font-weight: 900;
    color: var(--sj-success);
}

.sj-agent-score-label {
    font-size: 0.56rem;
    font-weight: 700;
    color: var(--sj-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* AI Banner */
.sj-ai-banner {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    background: linear-gradient(135deg, rgba(102,126,234,0.06), rgba(118,75,162,0.06));
    border: 1.5px solid rgba(102,126,234,0.2);
    border-radius: var(--sj-radius-md);
    flex-shrink: 0;
}

.sj-ai-banner-icon {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.sj-ai-banner-title {
    font-size: 0.68rem;
    font-weight: 800;
    color: #5a5fcf;
    display: block;
    margin-bottom: 2px;
}

.sj-ai-banner-text {
    font-size: 0.63rem;
    color: var(--sj-muted);
    line-height: 1.5;
    display: block;
}

/* Agency tiers */
.sj-agency-tier-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--sj-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.sj-tier-cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 7px;
    flex-shrink: 0;
}

.sj-tier-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 7px;
    background: #fafbfc;
    border: 2px solid transparent;
    border-radius: var(--sj-radius-md);
    cursor: pointer;
    transition: all 0.26s var(--sj-ease-spring);
    text-align: center;
    box-shadow: var(--sj-shadow-sm);
    outline: none;
}

    .sj-tier-card:hover {
        box-shadow: var(--sj-shadow-md);
        transform: translateY(-2px);
    }

    .sj-tier-card.selected {
        border-color: var(--sj-teal);
        background: var(--sj-teal-light);
        box-shadow: 0 0 0 3px rgba(10,191,188,0.12), var(--sj-shadow-md);
    }

.sj-tier-badge {
    position: absolute;
    top: -6px;
    right: 8px;
    font-size: 0.54rem;
    font-weight: 800;
    color: white;
    background: var(--sj-orange);
    padding: 2px 6px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sj-tier-icon {
    font-size: 1.3rem;
    margin-bottom: 2px;
    transition: transform 0.3s var(--sj-ease-bounce);
}

.sj-tier-card:hover .sj-tier-icon {
    transform: scale(1.12);
}

.sj-tier-name {
    font-size: 0.73rem;
    font-weight: 800;
    color: var(--sj-dark);
    line-height: 1.2;
}

.sj-tier-agents {
    font-size: 0.6rem;
    color: var(--sj-muted);
    font-weight: 500;
}

.sj-tier-price {
    font-size: 0.78rem;
    font-weight: 900;
    color: var(--sj-teal-dark);
    margin-top: 3px;
}

.sj-agency-benefits {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex-shrink: 0;
}

.sj-agency-benefit {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 7px 9px;
    background: #fff;
    border-radius: var(--sj-radius-sm);
    border: 1px solid rgba(0,0,0,0.06);
}

.sj-ab-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--sj-teal-light);
    color: var(--sj-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    flex-shrink: 0;
}

.sj-ab-text {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--sj-dark);
    line-height: 1.3;
}

.sj-agency-details-form {
    display: none;
    flex-direction: column;
    gap: 8px;
}

/* Credit system */
.sj-credit-system {
    background: linear-gradient(135deg, rgba(245,130,32,0.05), rgba(10,191,188,0.04));
    border: 1.5px solid var(--sj-border-orange);
    border-radius: var(--sj-radius-md);
    padding: 11px 13px;
    flex-shrink: 0;
}

.sj-credit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.sj-credit-title {
    font-size: 0.69rem;
    font-weight: 800;
    color: var(--sj-dark);
}

.sj-credit-price {
    font-size: 0.71rem;
    font-weight: 700;
    color: var(--sj-orange);
}

.sj-credit-counter {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sj-credit-note {
    font-size: 0.61rem;
    color: var(--sj-muted);
    margin-top: 5px;
}

/* Review cards */
.sj-review-card {
    background: #FAFBFC;
    border: 1.5px solid rgba(245,130,32,0.14);
    border-radius: var(--sj-radius-md);
    padding: 10px 13px;
    flex-shrink: 0;
}

.sj-review-title {
    font-size: 0.63rem;
    font-weight: 800;
    color: var(--sj-orange);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sj-review-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 4px;
}

.sj-review-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 8px;
    background: rgba(0,0,0,0.025);
    border-radius: 7px;
}

    .sj-review-item.full {
        grid-column: 1 / -1;
    }

.sj-ri-key {
    font-size: 0.57rem;
    color: var(--sj-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sj-ri-val {
    font-size: 0.72rem;
    color: var(--sj-dark);
    font-weight: 700;
}

.sj-confirm-edit-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 50px;
    background: white;
    border: 1.5px solid rgba(0,0,0,0.09);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.18s;
    margin-left: auto;
    flex-shrink: 0;
    font-family: inherit;
}

    .sj-confirm-edit-btn:hover {
        border-color: var(--sj-orange);
        color: var(--sj-orange);
    }

/* Intelligence Panel */
.sj-intel-header-card {
    background: linear-gradient(135deg, rgba(245,130,32,0.06), rgba(86,196,248,0.06));
    border: 1.5px solid rgba(245,130,32,0.14);
    border-radius: var(--sj-radius-lg);
    padding: 12px 14px;
    flex-shrink: 0;
}

.sj-intel-meter {
    background: #FAFBFC;
    border: 1.5px solid rgba(0,0,0,0.07);
    border-radius: var(--sj-radius-lg);
    padding: 12px 14px;
    flex-shrink: 0;
    box-shadow: var(--sj-shadow-sm);
}

.sj-meter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sj-dark);
}

.sj-meter-score {
    color: var(--sj-orange);
    font-weight: 900;
    font-size: 0.88rem;
}

.sj-meter-bar {
    height: 8px;
    background: rgba(0,0,0,0.07);
    border-radius: 50px;
    overflow: hidden;
}

.sj-meter-fill {
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--sj-orange), #ff9f4d);
    transition: width 1.2s var(--sj-ease-out);
    width: 0%;
}

.sj-meter-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 0.6rem;
    color: var(--sj-muted);
    font-weight: 600;
}

.sj-meter-verdict {
    font-weight: 800;
    color: var(--sj-dark);
    font-size: 0.72rem;
}

.sj-intel-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 7px;
    flex-shrink: 0;
}

.sj-intel-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding: 9px 6px;
    background: #FAFBFC;
    border: 1.5px solid rgba(0,0,0,0.07);
    border-radius: var(--sj-radius-md);
    box-shadow: var(--sj-shadow-sm);
}

.sj-kpi-icon {
    font-size: 1rem;
    color: var(--sj-orange);
}

.sj-kpi-val {
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--sj-dark);
}

.sj-kpi-label {
    font-size: 0.57rem;
    color: var(--sj-muted);
    font-weight: 600;
    line-height: 1.3;
}

.sj-lock-veil {
    background: linear-gradient(135deg, rgba(245,130,32,0.04), rgba(86,196,248,0.04));
    border: 1.5px solid var(--sj-border-orange);
    border-radius: var(--sj-radius-lg);
    padding: 13px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sj-lock-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.sj-lock-icon {
    font-size: 1.4rem;
    color: var(--sj-orange);
}

.sj-lock-msg {
    font-size: 0.71rem;
    color: var(--sj-muted);
    line-height: 1.5;
    margin: 0;
    max-width: 280px;
}

.sj-lock-price {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--sj-dark);
    background: var(--sj-orange-light);
    padding: 5px 14px;
    border-radius: 50px;
    border: 1.5px solid var(--sj-border-orange);
}

.sj-blur-row {
    height: 7px;
    background: rgba(0,0,0,0.06);
    border-radius: 50px;
    margin: 3px 0;
    width: 90%;
}

/* Price strip */
.sj-price-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(245,130,32,0.07), rgba(255,255,255,1));
    border: 1.5px solid var(--sj-border-orange);
    border-radius: var(--sj-radius-md);
    padding: 10px 13px;
    box-shadow: var(--sj-shadow-sm);
    flex-shrink: 0;
}

.sj-price-strip-left {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.sj-price-strip-amount {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--sj-orange);
    letter-spacing: -0.02em;
}

.sj-price-strip-period {
    font-size: 0.7rem;
    color: var(--sj-muted);
    font-weight: 600;
}

.sj-price-strip-label {
    font-size: 0.71rem;
    font-weight: 700;
    color: var(--sj-dark);
    text-align: center;
}

.sj-price-strip-check {
    color: var(--sj-success);
    font-size: 1.1rem;
}

/* Summary card */
.sj-summary-card {
    background: linear-gradient(135deg, rgba(245,130,32,0.05), #fff);
    border: 1.5px solid var(--sj-border-orange);
    border-radius: var(--sj-radius-md);
    padding: 11px 14px;
    flex-shrink: 0;
}

.sj-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

    .sj-summary-row:last-child {
        border-bottom: none;
    }

.sj-summary-key {
    font-size: 0.72rem;
    color: var(--sj-muted);
    font-weight: 600;
}

.sj-summary-val {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--sj-dark);
}

.sj-summary-row--total .sj-summary-key {
    font-weight: 800;
    color: var(--sj-dark);
}

.sj-summary-row--total .sj-summary-val {
    font-size: 1rem;
    font-weight: 900;
    color: var(--sj-orange);
}

/* Terms */
.sj-terms-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    background: #FAFBFC;
    border-radius: var(--sj-radius-sm);
    border: 1.5px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
}

    .sj-terms-row input[type="checkbox"] {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        accent-color: var(--sj-orange);
        cursor: pointer;
        flex-shrink: 0;
        margin-top: 1px;
    }

.sj-terms-text {
    font-size: 0.66rem;
    color: var(--sj-muted);
    line-height: 1.5;
}

    .sj-terms-text a {
        color: var(--sj-orange);
        text-decoration: none;
        font-weight: 700;
    }

        .sj-terms-text a:hover {
            text-decoration: underline;
        }

/* Staging rooms */
.sj-staging-rooms {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.sj-staging-room-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    background: white;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: var(--sj-radius-sm);
}

.sj-staging-room-thumb {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sj-muted-light);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.sj-staging-room-info {
    flex: 1;
    min-width: 0;
}

.sj-staging-room-name {
    font-size: 0.71rem;
    font-weight: 700;
    color: var(--sj-dark);
}

.sj-staging-room-status {
    font-size: 0.61rem;
    color: var(--sj-muted);
}

.sj-staging-room-badge {
    font-size: 0.55rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

    .sj-staging-room-badge.empty {
        background: rgba(0,0,0,0.06);
        color: var(--sj-muted);
    }

    .sj-staging-room-badge.staged {
        background: linear-gradient(135deg,#667eea,#764ba2);
        color: white;
    }

.sj-staging-action-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f5f6f7;
    border: 1.5px solid rgba(0,0,0,0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: var(--sj-muted);
    cursor: pointer;
    transition: all 0.18s;
    flex-shrink: 0;
}

    .sj-staging-action-btn:hover {
        background: var(--sj-orange);
        color: white;
        border-color: var(--sj-orange);
    }

/* 360 hero */
.sj-360-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    padding: 10px;
    background: white;
    border-radius: var(--sj-radius-sm);
    border: 1px solid rgba(10,191,188,0.15);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .sj-360-hero:hover {
        border-color: var(--sj-teal);
        background: var(--sj-teal-light);
    }

.sj-360-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sj-teal), var(--sj-blue));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    animation: sjRotate360 4s linear infinite;
}

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

.sj-360-hero-title {
    font-size: 0.73rem;
    font-weight: 800;
    color: var(--sj-dark);
}

.sj-360-hero-sub {
    font-size: 0.62rem;
    color: var(--sj-muted);
    line-height: 1.4;
}

/* Success */
.sj-success-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 32px 20px;
    flex: 1;
}

.sj-success-orb {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
    border: 3px solid var(--sj-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    color: var(--sj-success);
    animation: sjSuccessOrb 0.5s var(--sj-ease-bounce) both;
    box-shadow: 0 8px 28px rgba(16,185,129,0.3);
}

@keyframes sjSuccessOrb {
    from {
        opacity: 0;
        transform: scale(0.3) rotate(-20deg);
    }

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

.sj-success-title {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--sj-dark);
    letter-spacing: -0.025em;
    margin: 0;
}

.sj-success-sub {
    font-size: 0.8rem;
    color: var(--sj-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 300px;
}

.sj-success-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.sj-success-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 50px;
    background: var(--sj-success-light);
    border: 1px solid rgba(16,185,129,0.3);
    font-size: 0.69rem;
    font-weight: 700;
    color: var(--sj-success);
}

/* Old progress ribbon — keep hidden */
.sj-progress-ribbon,
.sj-progress-ribbon.visible {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .sj-horiz-layout {
        flex-direction: column;
        overflow-y: auto;
    }

    .sj-horiz-left {
        flex: none;
        overflow-y: visible;
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        padding: 14px 14px 10px;
    }

    .sj-horiz-right {
        flex: none;
        padding: 10px 14px 14px;
    }

    .sj-map-tall {
        height: 160px !important;
    }

    .sj-theater-cards {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 10px;
        overflow-y: auto;
        /* On mobile, cards stack — allow them to size naturally */
        flex: none;
    }

    .sj-theater-card {
        padding: 0; /* padding is on .sj-tc-inner */
        min-height: unset; /* override the clamp min-height; let content drive */
    }

    /* On mobile single-column, more text is visible — relax line clamp */
    .sj-tc-desc {
        -webkit-line-clamp: 8 !important;
    }

    /* Tags: max-content right column maintained on mobile */
    .sj-tc-tags {
        grid-template-columns: 1fr max-content !important;
    }

    .sj-tier-cards {
        grid-template-columns: repeat(2,1fr);
    }

    .sj-intel-kpi-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .sj-form-grid {
        grid-template-columns: 1fr;
    }

    .sj-kt-nodes {
        gap: 0;
    }

    .sj-kt-node-dot {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .sj-kt-node-label {
        font-size: 0.48rem;
    }

    .sj-panel-title {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .sj-wrapper {
        margin: 4px;
        border-radius: 20px;
    }

    .sj-kinetic-timeline {
        padding: 8px 12px 5px;
    }

    .sj-kt-node-label {
        display: none;
    }

    .sj-horiz-nav {
        gap: 6px;
    }

    .sj-back-btn {
        padding: 8px 12px;
        font-size: 0.7rem;
    }

    .sj-cta-btn {
        padding: 11px 16px;
        font-size: 0.8rem;
    }

    .sj-photo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sj-rooms-grid {
        gap: 6px;
    }

    .sj-tier-cards {
        grid-template-columns: repeat(2,1fr);
    }
}

/* ── oldstyling
Step Base ── */
.sj-step0-inner {
    display: flex;
    flex-direction: column;
    background: var(--sj-surface);
}

.sj-step0-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
}

.sj-step {
    display: none;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow-y: auto;
    /*  padding: 16px 16px 16px 16px;*/
    scrollbar-width: thin;
    scrollbar-color: var(--sj-orange) rgba(245,130,32,0.1);
    animation: sjFadeSlideUp 0.35s var(--sj-ease-out) forwards;
    background: var(--sj-surface);
}

    .sj-step::-webkit-scrollbar {
        width: 3px;
    }

    .sj-step::-webkit-scrollbar-track {
        background: transparent;
    }

    .sj-step::-webkit-scrollbar-thumb {
        background: var(--sj-orange);
        border-radius: 4px;
    }

    .sj-step.active {
        display: flex;
    }

    .sj-step.slide-back {
        animation: sjFadeSlideDown 0.30s var(--sj-ease-out) forwards;
    }

@keyframes sjFadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@keyframes sjFadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

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

/* ============================================================
   PREMIUM THEATER CARDS UPGRADE (Awwwards-style)
   Intelligent scaling, deeper physics, and fluid typography.
   ============================================================ */

/* 1. Add Container Queries to the cards */
.sj-theater-card {
    container-type: inline-size;
    min-height: clamp(340px, 45vh, 480px); /* Gives the cards a more elegant, commanding height */
    border-radius: 32px; /* Smoother, modern squircle feel */
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

    /* 2. Deeper, softer 3D physics on hover — NO translateY/scale to prevent rattle.
       The JS tilt (rotateX/Y) operates in the same transform context; any translateY
       or scale here would conflict with the JS inline style and shift the hit boundary. */
    .sj-theater-card:hover {
        box-shadow: 0 40px 60px -15px rgba(0, 0, 0, 0.12), 0 12px 24px -10px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 1) !important;
    }

/* 3. Fluid Inner Spacing (Scales with the card's width) */
.sj-tc-inner {
    padding: clamp(20px, 8cqi, 48px) clamp(16px, 7cqi, 40px) !important;
    gap: clamp(8px, 3cqi, 20px) !important;
    overflow: hidden !important;
}

/* 4. Icon block scaling */
.sj-tc-icon-wrap {
    width: clamp(56px, 18cqi, 88px) !important;
    height: clamp(56px, 18cqi, 88px) !important;
    margin-bottom: clamp(4px, 2cqi, 16px) !important;
    border-radius: 24px !important;
}

    .sj-tc-icon-wrap svg {
        width: 55%;
        height: 55%;
    }

/* Label: managed by final typographic stamp block */


.sj-tc-title {
    font-size: clamp(1.2rem, 6.5cqi, 2.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
}

.sj-tc-desc {
    font-size: clamp(0.72rem, 2.8cqi, 0.92rem) !important;
    line-height: 1.6 !important;
    margin-top: 4px !important;
    /* Bounded growth — desc fills available space but never pushes tags/CTA out */
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 8 !important;
}

/* 6. Tags — layout managed by final annotation block below */
.sj-tc-tags {
    flex-shrink: 0 !important;
}

    .sj-tc-tags span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

/* 7. Call to Action row — always pinned to the absolute bottom of every card */
.sj-tc-cta {
    margin-top: auto !important;
    padding-top: clamp(10px, 3cqi, 18px) !important;
    font-size: clamp(0.75rem, 2.8cqi, 0.95rem) !important;
    flex-shrink: 0 !important;
}

.sj-cta-arrow {
    font-size: 1.25em !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.5, 0.64, 1) !important;
}

.sj-theater-card:hover .sj-cta-arrow {
    transform: translateX(8px) scale(1.1);
}

/* 8. Make the mouse-tracking glow richer */
.sj-tc-mouse-glow {
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.sj-theater-card:hover .sj-tc-mouse-glow {
    opacity: 1 !important;
}

/* 9. Grid layout boundary for ultrawide screens */
.sj-theater-cards {
    max-width: 1600px;
    margin: 0 auto;
    gap: clamp(12px, 2vw, 32px) !important;
}
/* ============================================================
   PREMIUM MOUSE-TRACKING GLOW & SHIMMER RESTORATION
   Brings back the vibrant, interactive color follow effect.
   ============================================================ */

/* 1. Restore the mouse glow visibility and enlarge it */
.sj-tc-mouse-glow {
    mix-blend-mode: normal !important; /* Removes the washout effect */
    z-index: 1 !important; /* Positions it between the glass base and the text */
    border-radius: inherit !important; /* Matches the new 32px card radius */
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Show on hover */
.sj-theater-card:hover .sj-tc-mouse-glow {
    opacity: 1 !important;
}

/* 2. Amplify the colors and make the tracking circle wider (250px instead of 140px) */
.sj-tc--private .sj-tc-mouse-glow {
    background: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(245, 130, 32, 0.18) 0%, transparent 80%) !important;
}

.sj-tc--agent .sj-tc-mouse-glow {
    background: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(86, 196, 248, 0.18) 0%, transparent 80%) !important;
}

.sj-tc--agency .sj-tc-mouse-glow {
    background: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(10, 191, 188, 0.18) 0%, transparent 80%) !important;
}

/* 3. Fix the spinning border shimmer to match the new curved radius */
.sj-tc-border-shimmer {
    border-radius: 32px !important; /* Matches the new card radius */
    z-index: 1 !important;
    padding: 2px !important; /* Slightly thicker premium border */
}

/* 4. Ensure the text and icons stay crisply above the moving glow */
.sj-tc-inner {
    position: relative;
    z-index: 2 !important;
    overflow: hidden !important;
}

/* ============================================================
   STEP 0 THEATER CARDS — RESPONSIVE STANDARDIZATION
   Ensures equal card heights, aligned tags (2-row grid), and
   CTA pinned to bottom across all device frames.
   ============================================================ */

/* ── Desktop 3-col: equal-height cards via grid align-items stretch (default) ── */
.sj-theater-cards {
    align-items: stretch;
}

/* ── Tablet (600px–900px): 2-col layout keeps cards roughly equal ── */
@media (min-width: 600px) and (max-width: 900px) {
    .sj-theater-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 0 10px !important;
        overflow-y: auto !important;
    }

    /* Third card spans full width so it's centered */
    .sj-theater-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 60%;
        margin: 0 auto;
        width: 100%;
    }

    .sj-tc-desc {
        -webkit-line-clamp: 8 !important;
    }
}

/* ── Small mobile (< 480px): tighter padding, smaller icon ── */
@media (max-width: 480px) {
    .sj-theater-cards {
        gap: 8px !important;
        padding: 0 6px !important;
    }

    .sj-tc-icon-wrap {
        width: clamp(40px, 14cqi, 56px) !important;
        height: clamp(40px, 14cqi, 56px) !important;
        margin-bottom: 4px !important;
    }

    .sj-tc-desc {
        -webkit-line-clamp: 8 !important;
    }

    /* Tags: annotation style — no grid needed */
    .sj-tc-tags {
        margin-top: 6px !important;
    }

    .sj-tc-cta {
        padding-top: 8px !important;
    }
}

/* ── Very wide desktop (>1400px): keep desc readable, don't over-expand ── */
@media (min-width: 1400px) {
    .sj-tc-desc {
        -webkit-line-clamp: 8 !important;
    }
}

/* ============================================================
   SCENE 0 — RESTORE ORIGINAL PROPORTIONS + FIX DESC VISIBILITY
   The "Awwwards upgrade" block inflated title to 2.4rem max
   and icon to 88px, consuming all card height and leaving no
   room for the desc. This block reverts those specific overrides
   back to the original values and removes the line-clamp.
   Everything else (glass, shimmer, glow, hover physics) untouched.
   ============================================================ */

/* Revert inflated title back to original */
.sj-tc-title {
    font-size: clamp(0.82rem, 1.55vw, 0.97rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
}

/* Revert inflated icon back to original */
.sj-tc-icon-wrap {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 6px !important;
    border-radius: 16px !important;
}

    .sj-tc-icon-wrap svg {
        width: 52px !important;
        height: 52px !important;
    }

/* Revert inner padding back to original */
.sj-tc-inner {
    padding: clamp(12px,2vw,18px) clamp(10px,1.8vw,16px) clamp(10px,1.8vw,14px) !important;
    gap: 5px !important;
    overflow: hidden !important;
}

/* Label: styling managed by final typographic stamp block — no overrides here */


/* Desc: remove line-clamp entirely — desc fills remaining space visibly */
.sj-tc-desc {
    font-size: clamp(0.65rem, 1.05vw, 0.72rem) !important;
    line-height: 1.55 !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    /* No -webkit-line-clamp — text shows as much as space allows */
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}

/* Tags: styling managed by final annotation block — no overrides here */


/* CTA: revert to original */
.sj-tc-cta {
    font-size: 0.69rem !important;
    padding-top: 8px !important;
    margin-top: auto !important;
}

/* ============================================================
   STEP 0 THEATER — RESPONSIVE POLISH v4
   1. Centre-align icon, label & title in each card
   2. Description font +20% larger
   3. Card desc area scrollable so content never truncates on
      125%+ browser zoom — card heights stay locked, no overflow
   ============================================================ */

/* ── 1. Centre-align icon wrap, label and title ── */
.sj-tc-inner {
    align-items: center !important; /* horizontally centre all children */
    text-align: center !important;
}

/* Icon wrap: already inline-flex, just make sure it is centred */
.sj-tc-icon-wrap {
    align-self: center !important;
}

/* Label stays centred */
.sj-tc-label {
    text-align: center !important;
    width: 100% !important;
}

/* Title stays centred */
.sj-tc-title {
    text-align: center !important;
    width: 100% !important;
}

/* Description: left-aligned for readability, but centred as a block */
.sj-tc-desc {
    text-align: left !important;
    width: 100% !important;
    /* +20% font size: current clamp(0.65rem, 1.05vw, 0.72rem) × 1.2 */
    font-size: clamp(0.78rem, 1.26vw, 0.865rem) !important;
    line-height: 1.6 !important;
    /* Remove line-clamp — scrollable area handles overflow */
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    /* Let it grow to fill available space, scroll if needed */
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Thin, branded scrollbar */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0,0,0,0.18) transparent !important;
}

    .sj-tc-desc::-webkit-scrollbar {
        width: 3px;
    }

    .sj-tc-desc::-webkit-scrollbar-track {
        background: transparent;
    }

    .sj-tc-desc::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.18);
        border-radius: 4px;
    }

/* Per-card accent colour for the desc scrollbar thumb */
.sj-tc--private .sj-tc-desc {
    scrollbar-color: rgba(245,130,32,0.4) transparent !important;
}

    .sj-tc--private .sj-tc-desc::-webkit-scrollbar-thumb {
        background: rgba(245,130,32,0.4);
    }

.sj-tc--agent .sj-tc-desc {
    scrollbar-color: rgba(86,196,248,0.5) transparent !important;
}

    .sj-tc--agent .sj-tc-desc::-webkit-scrollbar-thumb {
        background: rgba(86,196,248,0.5);
    }

.sj-tc--agency .sj-tc-desc {
    scrollbar-color: rgba(10,191,188,0.5) transparent !important;
}

    .sj-tc--agency .sj-tc-desc::-webkit-scrollbar-thumb {
        background: rgba(10,191,188,0.5);
    }

/* Tags: centre them as a block (individual pills remain left-aligned by grid) */
.sj-tc-tags {
    width: 100% !important;
    flex-shrink: 0 !important;
    /* keep 2-col grid already defined */
}

/* CTA: keep full-width space-between, just centred within the inner */
.sj-tc-cta {
    width: 100% !important;
    flex-shrink: 0 !important;
}

/* ── 2. Responsive: ensure card inner never overflows card at any zoom ── */
/* The card itself must stay rigid — its inner flex column absorbs the zoom */
.sj-theater-card {
    overflow: hidden !important;
    /* height is controlled by the grid row (align-items: stretch) */
}

.sj-tc-inner {
    /* Flex column already set; lock overflow so nothing bleeds out of card */
    overflow: hidden !important;
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* ── 3. Extra zoom breakpoints — tighten padding to recover vertical space ── */
/* These fire when the *effective* viewport shrinks due to 125%–200% zoom */

@media (max-height: 620px) {
    .sj-tc-inner {
        padding: 10px 12px 8px !important;
        gap: 4px !important;
    }

    .sj-tc-icon-wrap {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 4px !important;
    }

        .sj-tc-icon-wrap svg {
            width: 36px !important;
            height: 36px !important;
        }

    .sj-tc-tags {
        margin-top: 4px !important;
        gap: 3px !important;
    }

    .sj-tc-cta {
        padding-top: 6px !important;
    }
}

@media (max-height: 520px) {
    .sj-tc-inner {
        padding: 8px 10px 6px !important;
        gap: 3px !important;
    }

    .sj-tc-icon-wrap {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: 2px !important;
    }

        .sj-tc-icon-wrap svg {
            width: 28px !important;
            height: 28px !important;
        }

    .sj-tc-title {
        font-size: clamp(0.7rem, 1.4vw, 0.82rem) !important;
    }

    .sj-tc-desc {
        font-size: 0.7rem !important;
    }

    .sj-tc-tags {
        display: none !important; /* sacrifice tags to save space at extreme zoom */
    }
}

/* ============================================================
   SELL JOURNEY — Theater Card Patch v2
   Fixes:
   1. Card title — premium editorial redesign (ps-scene inspired)
   2. 125% zoom truncation — cards + wrapper flex gracefully
   3. Hover rattle — CSS-side guard (JS patch in sell-journey-patch-v2.js)
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   0. GLOBAL FONT IMPORT
   Playfair Display for the editorial accent on card titles
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');


/* ─────────────────────────────────────────────────────────────
   1. RATTLE FIX — CSS SIDE
   The JS handler sets inline transform which CSS :hover cannot
   override. So we:
   a) Remove preserve-3d so the card is flat-composited.
   b) Ensure transition covers EVERY transform change, including
      the inline ones set by JS mousemove — this makes the browser
      interpolate rather than snap.
   c) Add a transparent 12px "ghost" padding zone around the card
      via ::after so mouseleave fires further from the visible
      edge, eliminating the boundary flicker.
   ───────────────────────────────────────────────────────────── */
.sj-theater-card {
    transform-style: flat !important;
    will-change: transform, box-shadow !important;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1), background 0.42s ease !important;
    /* Prevent the card from being the hit-test element right up to its
       painted edge — the ::after pseudo-element extends the zone */
    isolation: isolate;
}

    /* Transparent hit-zone halo — expands the pointer boundary by 10px
   on all sides so the cursor never "clips out" on sub-pixel positions */
    .sj-theater-card::after {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: 0;
        pointer-events: auto; /* this is what matters */
        border-radius: inherit;
        background: transparent;
    }

    /* CSS-only hover box-shadow lift — NO translateY/scale — the JS tilt
       (rotateX/Y) handles the interactive feel without shifting the boundary */
    .sj-theater-card:hover {
        box-shadow: 0 40px 60px -15px rgba(0,0,0,0.12), 0 12px 24px -10px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,1) !important;
    }

/* ─────────────────────────────────────────────────────────────
   2. CARD TITLE — Premium Editorial Redesign
   Inspired by private-seller ps-question + ps-scene-label.
   Each card gets a large, confident heading where the key
   power word is gradient-accented (like ps-question em).
   Typography uses Playfair Display for the accent word and
   Outfit (existing brand font) for the supporting line.
   ───────────────────────────────────────────────────────────── */

/* Outer title container — two stacked lines */
.sj-tc-title {
    font-size: clamp(1.05rem, 3.2cqi, 1.65rem) !important;
    font-weight: 900 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.03em !important;
    color: var(--sj-dark) !important;
    margin: 0 !important;
    text-align: center !important;
}

/* The <em> inside each title gets the editorial accent treatment.
   In HTML these are hard line breaks (<br>), so we target the
   first text node by wrapping the accent word in <em> via a
   CSS-only approach — we style .sj-tc-title itself to act as
   the "supporting" line and inject the big accent above it. */

/* We use a data-accent attribute pattern — but since the HTML
   uses plain text, we instead restyle the existing <br>-split
   title so the WHOLE title is the editorial display piece. */

/* Private — warm orange gradient accent on key phrase */
.sj-tc--private .sj-tc-title {
    /* First line: normal weight brand dark */
    /* Second line: bold gradient — achieved via background-clip
       on the whole element, then we rely on the <br> split to
       create two visual lines */
    background: linear-gradient( 150deg, var(--sj-dark) 0%, var(--sj-dark) 48%, var(--sj-orange) 52%, #FF9F4D 100% ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
}

/* Agent — cool blue gradient */
.sj-tc--agent .sj-tc-title {
    background: linear-gradient( 150deg, var(--sj-dark) 0%, var(--sj-dark) 48%, var(--sj-blue-dark) 52%, var(--sj-blue) 100% ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
}

/* Agency — teal gradient */
.sj-tc--agency .sj-tc-title {
    background: linear-gradient( 150deg, var(--sj-dark) 0%, var(--sj-dark) 48%, var(--sj-teal-dark) 52%, var(--sj-teal) 100% ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
}

/* Ensure the title text doesn't get clipped during the card's
   overflow:hidden — give the gradient a small extra render zone */
.sj-tc-title {
    padding-bottom: 2px !important;
    overflow: visible !important;
}

/* On hover, the JS tilt handles the motion — no additional CSS transform needed */
.sj-theater-card:hover .sj-tc-title {
    transition: opacity 0.35s ease !important;
}

/* ─────────────────────────────────────────────────────────────
   3. LABEL — Typographic category stamp
   No background, no border, no pill. The label reads as a
   category classification mark — like a section header in a
   premium catalogue or a Bloomberg terminal asset class tag.
   A thin coloured overline above the text is the only structural
   accent, echoing the tags' left-rule language.
   ───────────────────────────────────────────────────────────── */
.sj-tc-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: fit-content !important;
    margin-bottom: 4px !important;
    position: relative !important;
    /* Overline: drawn as a top border on a ::before pseudo spanning full width */
}

    /* Overline accent bar — same grammar as the tags' left-rule */
    .sj-tc-label::before {
        content: '' !important;
        display: inline-block !important;
        width: 18px !important;
        height: 2px !important;
        border-radius: 0 !important;
        flex-shrink: 0 !important;
        /* no dot pulse animation — keeps it calm and non-interactive */
        animation: none !important;
        background: currentColor !important;
        opacity: 0.9 !important;
        align-self: center !important;
    }

@keyframes sjLabelDotPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.75);
    }
}

.sj-tc--private .sj-tc-label {
    color: var(--sj-orange) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.sj-tc--agent .sj-tc-label {
    color: var(--sj-blue-dark) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.sj-tc--agency .sj-tc-label {
    color: var(--sj-teal-dark) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────
   4. TAGS — Spec-sheet field entries
   2-column grid: left column flush left, right column flush right.
   A hairline rule above separates the tags zone from the desc.
   Zero button affordance: no background, no border enclosure.
   ───────────────────────────────────────────────────────────── */
.sj-tc-tags {
    display: grid !important;
    grid-template-columns: 1fr max-content !important;
    gap: 5px 0 !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
    padding: 10px 0 2px !important;
    border-top: 1px solid rgba(0,0,0,0.07) !important;
    width: 100% !important;
}

    /* Left column: flush left, natural width */
    .sj-tc-tags span:nth-child(odd) {
        justify-self: start !important;
        border-left: 2px solid currentColor !important;
        border-right: none !important;
        padding-left: 6px !important;
        padding-right: 0 !important;
        flex-direction: row !important;
    }

    /* Right column: all items fill the full max-content column so the
       left-rule is pinned at the same x for both rows. The column itself
       is sized to the longest tag (max-content on the grid), so that tag
       touches the card's right edge and the shorter tag aligns beneath it. */
    .sj-tc-tags span:nth-child(even) {
        justify-self: stretch !important;
        width: 100% !important;
        border-left: 2px solid currentColor !important;
        border-right: none !important;
        padding-left: 6px !important;
        padding-right: 0 !important;
        flex-direction: row !important;
        text-align: left !important;
    }

    .sj-tc-tags span {
        display: flex !important;
        align-items: center !important;
        font-family: 'Outfit', sans-serif !important;
        font-size: 0.58rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
        cursor: default !important;
        user-select: none !important;
        pointer-events: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        border: none !important;
        opacity: 0.82 !important;
        line-height: 1.1 !important;
        max-width: 100% !important;
    }

        .sj-tc-tags span::before,
        .sj-tc-tags span::after {
            content: none !important;
            display: none !important;
        }

/* Private — amber rule */
.sj-tc--private .sj-tc-tags {
    border-top-color: rgba(245,130,32,0.18) !important;
}

    .sj-tc--private .sj-tc-tags span {
        color: var(--sj-orange-dark) !important;
        border-left-color: var(--sj-orange) !important;
    }

/* Agent — blue rule */
.sj-tc--agent .sj-tc-tags {
    border-top-color: rgba(86,196,248,0.22) !important;
}

    .sj-tc--agent .sj-tc-tags span {
        color: var(--sj-blue-dark) !important;
        border-left-color: var(--sj-blue-dark) !important;
    }

/* Agency — teal rule */
.sj-tc--agency .sj-tc-tags {
    border-top-color: rgba(10,191,188,0.18) !important;
}

    .sj-tc--agency .sj-tc-tags span {
        color: var(--sj-teal-dark) !important;
        border-left-color: var(--sj-teal-dark) !important;
    }

/* ─────────────────────────────────────────────────────────────
   5. 125% ZOOM TRUNCATION FIX
   The problem: .sj-wrapper uses height: calc(100% - 16px).
   At 125% zoom, the browser's CSS pixel viewport shrinks — the
   parent's effective pixel height drops, and the fixed-height
   wrapper overflows its container, getting clipped.
   The theater cards use min-height: clamp(340px,45vh,480px)
   which can't fit in the reduced viewport.

   Fix strategy:
   a) Allow .sj-wrapper to scroll as a last resort (overflow-y:auto)
      so content is never hard-clipped.
   b) Tighten the theater card min-height so it doesn't force
      overflow at 125% (approx. effective viewport height ~600px).
   c) Add a @media (max-height: 700px) zone (covers 125% on most
      common laptop screens) that compresses the hero section and
      reduces card min-height.
   d) Make .sj-step0-theater allow its content to be scrollable
      if truly out of room, rather than clipping.
   ───────────────────────────────────────────────────────────── */

/* a) Allow wrapper to scroll instead of clip */
.sj-wrapper {
    overflow-y: auto !important;
    /* Keep the scrollbar invisible unless needed */
    scrollbar-width: none !important;
}

    .sj-wrapper::-webkit-scrollbar {
        display: none;
    }

/* The track viewport must fill remaining flex space */
.sj-track-viewport {
    min-height: 0 !important;
    overflow: hidden !important;
}

/* b) Gentler card min-height — uses svh (small viewport height) where
      supported so zoom doesn't trick it, with a px fallback */
.sj-theater-card {
    min-height: clamp(280px, 40svh, 480px) !important;
}

/* c) 700px breakpoint (covers 125% zoom on 900px-tall laptop displays) */
@media (max-height: 700px) {
    /* Compress the hero text block */
    .sj-theater-hero {
        padding: 8px 16px 6px !important;
    }

    .sj-theater-heading {
        font-size: clamp(1.0rem, 2.8vw, 1.35rem) !important;
        margin-bottom: 2px !important;
    }

    .sj-heading-line2-standalone {
        display: none !important; /* sacrifice the subheading first */
    }

    .sj-theater-sub {
        font-size: 0.62rem !important;
        margin: 0 !important;
    }

    .sj-editorial-eyebrow {
        margin-bottom: 4px !important;
    }

    /* Reduce card min-height so 3 cards fit at 125% */
    .sj-theater-card {
        min-height: clamp(220px, 35svh, 360px) !important;
        border-radius: 20px !important;
    }

    /* Tighter inner padding */
    .sj-tc-inner {
        padding: 12px 14px 10px !important;
        gap: 4px !important;
    }

    .sj-tc-icon-wrap {
        width: 46px !important;
        height: 46px !important;
        margin-bottom: 4px !important;
    }

        .sj-tc-icon-wrap svg {
            width: 36px !important;
            height: 36px !important;
        }

    .sj-tc-title {
        font-size: clamp(0.9rem, 2.5cqi, 1.25rem) !important;
    }

    .sj-tc-desc {
        font-size: 0.7rem !important;
        line-height: 1.5 !important;
    }
}

/* d) At 620px and below (existing breakpoint), also compress hero */
@media (max-height: 620px) {
    .sj-theater-hero {
        padding: 6px 14px 4px !important;
    }

    .sj-theater-heading {
        font-size: clamp(0.9rem, 2.4vw, 1.1rem) !important;
    }

    .sj-theater-sub {
        display: none !important;
    }

    .sj-theater-cards {
        gap: 8px !important;
    }

    .sj-theater-card {
        min-height: clamp(180px, 30svh, 300px) !important;
    }
}

/* e) Step 0 theater — allow scroll as last resort so nothing clips */
.sj-step0-theater {
    overflow-y: auto !important;
    scrollbar-width: none !important;
}

    .sj-step0-theater::-webkit-scrollbar {
        display: none;
    }

/* ─────────────────────────────────────────────────────────────
   6. RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .sj-tc-tags {
        gap: 4px 0 !important;
        padding: 8px 0 2px !important;
    }

        .sj-tc-tags span {
            font-size: 0.53rem !important;
            padding-left: 5px !important;
        }

    .sj-tc-label {
        font-size: 0.62rem !important;
        letter-spacing: 0.14em !important;
    }

    .sj-tc-title {
        font-size: clamp(0.88rem, 2.8cqi, 1.2rem) !important;
    }
}

@media (max-height: 520px) {
    .sj-tc-tags {
        display: none !important;
    }
}

/* ============================================================
   SELL JOURNEY — STEP 0 THEATER CARDS — PREMIUM REDESIGN
   Awwwards-level light theme · Replaces all card CSS patches
   Drop this file AFTER sell-journey.css in your layout
   Namespace: .sj-premium-cards (add to #sjTheaterCards)
   ============================================================ */

/* ── 0. FONT — Cinematic serif accent ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');

/* ── 1. CSS CUSTOM PROPERTIES (scoped) ── */
.sj-premium-cards {
    --sj-card-radius: 28px;
    --sj-card-bg: rgba(255, 255, 255, 0.82);
    --sj-card-bg-hover: rgba(255, 255, 255, 0.96);
    --sj-card-border: rgba(0, 0, 0, 0.04);
    --sj-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
    --sj-card-shadow-hover: 0 32px 64px -16px rgba(0, 0, 0, 0.14), 0 16px 32px -8px rgba(0, 0, 0, 0.06);
    --sj-card-transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    --sj-icon-size: 62px;
    --sj-glow-size: 280px;
}

/* ── 2. GRID CONTAINER ── */
.sj-premium-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.8vw, 20px);
    width: 100%;
    padding: 0 16px;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 3;
    perspective: 1200px;
    max-width: 1500px;
    margin: 0 auto;
    align-items: stretch;
}

    /* ── 3. THE CARD — Core Design ── */
    .sj-premium-cards .sj-theater-card {
        position: relative;
        background: var(--sj-card-bg);
        border-radius: var(--sj-card-radius);
        border: 1px solid var(--sj-card-border);
        box-shadow: var(--sj-card-shadow);
        cursor: pointer;
        transform-style: flat;
        will-change: transform, box-shadow;
        transition: transform var(--sj-card-transition), box-shadow var(--sj-card-transition), background var(--sj-card-transition), border-color 0.4s ease;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        isolation: isolate;
        animation: sjPremiumCardReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        min-height: clamp(300px, 42svh, 500px);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        container-type: inline-size;
    }

        .sj-premium-cards .sj-theater-card:nth-child(1) {
            animation-delay: 0.15s;
        }

        .sj-premium-cards .sj-theater-card:nth-child(2) {
            animation-delay: 0.3s;
        }

        .sj-premium-cards .sj-theater-card:nth-child(3) {
            animation-delay: 0.45s;
        }

@keyframes sjPremiumCardReveal {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.92);
        filter: blur(8px);
    }

    60% {
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

.sj-premium-cards .sj-theater-card::after {
    content: '';
    position: absolute;
    inset: -12px;
    z-index: -1;
    pointer-events: auto;
    border-radius: inherit;
    background: transparent;
}

.sj-premium-cards .sj-theater-card:focus-visible {
    outline: 2px solid var(--sj-orange);
    outline-offset: 4px;
}

/* ── 4. HOVER — Elevated & Luminous ── */
.sj-premium-cards .sj-theater-card:hover {
    background: var(--sj-card-bg-hover);
    box-shadow: var(--sj-card-shadow-hover);
    border-color: transparent;
}

.sj-premium-cards .sj-tc--private:hover {
    box-shadow: var(--sj-card-shadow-hover), 0 0 0 1px rgba(245, 130, 32, 0.12), 0 0 80px -20px rgba(245, 130, 32, 0.15);
}

.sj-premium-cards .sj-tc--agent:hover {
    box-shadow: var(--sj-card-shadow-hover), 0 0 0 1px rgba(86, 196, 248, 0.15), 0 0 80px -20px rgba(86, 196, 248, 0.15);
}

.sj-premium-cards .sj-tc--agency:hover {
    box-shadow: var(--sj-card-shadow-hover), 0 0 0 1px rgba(10, 191, 188, 0.15), 0 0 80px -20px rgba(10, 191, 188, 0.15);
}

.sj-premium-cards .sj-theater-card:active {
    transform: scale(0.985);
    transition-duration: 0.12s;
}

/* ── 5. SELECTED STATE ── */
.sj-premium-cards .sj-tc--private.sj-tc-selected {
    border-color: rgba(245, 130, 32, 0.5);
    box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.15), 0 24px 48px rgba(245, 130, 32, 0.12);
}

.sj-premium-cards .sj-tc--agent.sj-tc-selected {
    border-color: rgba(86, 196, 248, 0.5);
    box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.15), 0 24px 48px rgba(86, 196, 248, 0.12);
}

.sj-premium-cards .sj-tc--agency.sj-tc-selected {
    border-color: rgba(10, 191, 188, 0.5);
    box-shadow: 0 0 0 3px rgba(10, 191, 188, 0.15), 0 24px 48px rgba(10, 191, 188, 0.12);
}

/* ── 6. GLASS LAYER — Specular highlight ── */
.sj-premium-cards .sj-tc-glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(175deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    border-radius: var(--sj-card-radius) var(--sj-card-radius) 0 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease;
}

.sj-premium-cards .sj-theater-card:hover .sj-tc-glass {
    opacity: 0.5;
}

/* ── 7. MOUSE GLOW — Cursor-following light ── */
.sj-premium-cards .sj-tc-mouse-glow {
    position: absolute;
    inset: 0;
    border-radius: var(--sj-card-radius);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
    mix-blend-mode: normal;
}

.sj-premium-cards .sj-theater-card:hover .sj-tc-mouse-glow {
    opacity: 1;
}

.sj-premium-cards .sj-tc--private .sj-tc-mouse-glow {
    background: radial-gradient(circle var(--sj-glow-size) at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(245, 130, 32, 0.12) 0%, transparent 75%);
}

.sj-premium-cards .sj-tc--agent .sj-tc-mouse-glow {
    background: radial-gradient(circle var(--sj-glow-size) at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(86, 196, 248, 0.12) 0%, transparent 75%);
}

.sj-premium-cards .sj-tc--agency .sj-tc-mouse-glow {
    background: radial-gradient(circle var(--sj-glow-size) at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(10, 191, 188, 0.12) 0%, transparent 75%);
}

/* ── 8. BORDER SHIMMER — Animated conic gradient ── */
.sj-premium-cards .sj-tc-border-shimmer {
    position: absolute;
    inset: -1.5px;
    border-radius: calc(var(--sj-card-radius) + 1.5px);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: conic-gradient( from var(--shimmer-angle, 0deg), transparent 0deg, rgba(245, 130, 32, 0) 80deg, rgba(245, 130, 32, 0.5) 140deg, rgba(86, 196, 248, 0.5) 200deg, rgba(10, 191, 188, 0.4) 250deg, transparent 310deg );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1.5px;
}

.sj-premium-cards .sj-theater-card:hover .sj-tc-border-shimmer {
    opacity: 0.5;
    animation: sjPremiumShimmerSpin 6s linear infinite;
}

@keyframes sjPremiumShimmerSpin {
    from {
        --shimmer-angle: 0deg;
    }

    to {
        --shimmer-angle: 360deg;
    }
}

/* ── 9. INNER CONTENT LAYOUT ── */
.sj-premium-cards .sj-tc-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: clamp(16px, 2.5vw, 24px) clamp(14px, 2vw, 22px) clamp(14px, 2vw, 18px);
    gap: 6px;
    overflow: hidden;
    min-height: 0;
    box-sizing: border-box;
}

/* ── 10. ICON WRAP — Frosted accent container ── */
.sj-premium-cards .sj-tc-icon-wrap {
    width: var(--sj-icon-size);
    height: var(--sj-icon-size);
    flex-shrink: 0;
    margin-bottom: 8px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(8px);
    transition: transform 0.5s cubic-bezier(0.34, 1.5, 0.64, 1), box-shadow 0.5s ease;
}

    .sj-premium-cards .sj-tc-icon-wrap svg {
        width: 48px;
        height: 48px;
        overflow: visible;
    }

.sj-premium-cards .sj-tc--private .sj-tc-icon-wrap {
    background: linear-gradient(145deg, rgba(255, 243, 232, 0.95), rgba(255, 228, 196, 0.7));
    border: 1px solid rgba(245, 130, 32, 0.2);
    box-shadow: 0 4px 16px rgba(245, 130, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.sj-premium-cards .sj-tc--agent .sj-tc-icon-wrap {
    background: linear-gradient(145deg, rgba(234, 247, 254, 0.95), rgba(196, 232, 255, 0.7));
    border: 1px solid rgba(86, 196, 248, 0.2);
    box-shadow: 0 4px 16px rgba(86, 196, 248, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.sj-premium-cards .sj-tc--agency .sj-tc-icon-wrap {
    background: linear-gradient(145deg, rgba(227, 250, 250, 0.95), rgba(184, 244, 243, 0.7));
    border: 1px solid rgba(10, 191, 188, 0.2);
    box-shadow: 0 4px 16px rgba(10, 191, 188, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.sj-premium-cards .sj-theater-card:hover .sj-tc-icon-wrap {
    transform: translateY(-4px) scale(1.08);
}

.sj-premium-cards .sj-tc--private:hover .sj-tc-icon-wrap {
    box-shadow: 0 8px 28px rgba(245, 130, 32, 0.25), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.sj-premium-cards .sj-tc--agent:hover .sj-tc-icon-wrap {
    box-shadow: 0 8px 28px rgba(86, 196, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.sj-premium-cards .sj-tc--agency:hover .sj-tc-icon-wrap {
    box-shadow: 0 8px 28px rgba(10, 191, 188, 0.25), inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ── 11. LABEL — Editorial classification ── */
.sj-premium-cards .sj-tc-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    width: fit-content;
    margin-bottom: 2px;
    opacity: 0.9;
    transition: opacity 0.3s ease, letter-spacing 0.4s ease;
}

    .sj-premium-cards .sj-tc-label::before {
        content: '';
        display: inline-block;
        width: 18px;
        height: 2px;
        border-radius: 1px;
        flex-shrink: 0;
        background: currentColor;
        opacity: 0.8;
        transition: width 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
    }

.sj-premium-cards .sj-theater-card:hover .sj-tc-label {
    opacity: 1;
    letter-spacing: 0.22em;
}

    .sj-premium-cards .sj-theater-card:hover .sj-tc-label::before {
        width: 28px;
    }

.sj-premium-cards .sj-tc--private .sj-tc-label {
    color: var(--sj-orange);
}

.sj-premium-cards .sj-tc--agent .sj-tc-label {
    color: var(--sj-blue-dark);
}

.sj-premium-cards .sj-tc--agency .sj-tc-label {
    color: var(--sj-teal-dark);
}

/* ── 12. TITLE — Premium gradient typography ── */
.sj-premium-cards .sj-tc-title {
    font-size: clamp(1rem, 3.5cqi, 1.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--sj-dark);
    margin: 0;
    text-align: center;
    width: 100%;
    padding-bottom: 2px;
    overflow: visible;
    transition: transform 0.4s var(--sj-card-transition);
}

.sj-premium-cards .sj-theater-card:hover .sj-tc-title {
    transform: translateY(-2px);
}

.sj-premium-cards .sj-tc--private .sj-tc-title {
    background: linear-gradient(155deg, var(--sj-dark) 0%, var(--sj-dark) 45%, var(--sj-orange) 55%, #FF9F4D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sj-premium-cards .sj-tc--agent .sj-tc-title {
    background: linear-gradient(155deg, var(--sj-dark) 0%, var(--sj-dark) 45%, var(--sj-blue-dark) 55%, var(--sj-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sj-premium-cards .sj-tc--agency .sj-tc-title {
    background: linear-gradient(155deg, var(--sj-dark) 0%, var(--sj-dark) 45%, var(--sj-teal-dark) 55%, var(--sj-teal) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── 13. DESCRIPTION — Readable, scrollable ── */
.sj-premium-cards .sj-tc-desc {
    font-size: clamp(0.76rem, 1.2vw, 0.86rem);
    color: var(--sj-muted);
    line-height: 1.6;
    margin: 0;
    text-align: left;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
    display: block;
    transition: color 0.3s ease;
}

    .sj-premium-cards .sj-tc-desc::-webkit-scrollbar {
        width: 3px;
    }

    .sj-premium-cards .sj-tc-desc::-webkit-scrollbar-track {
        background: transparent;
    }

    .sj-premium-cards .sj-tc-desc::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.15);
        border-radius: 4px;
    }

.sj-premium-cards .sj-tc--private .sj-tc-desc {
    scrollbar-color: rgba(245, 130, 32, 0.3) transparent;
}

    .sj-premium-cards .sj-tc--private .sj-tc-desc::-webkit-scrollbar-thumb {
        background: rgba(245, 130, 32, 0.3);
    }

.sj-premium-cards .sj-tc--agent .sj-tc-desc {
    scrollbar-color: rgba(86, 196, 248, 0.4) transparent;
}

    .sj-premium-cards .sj-tc--agent .sj-tc-desc::-webkit-scrollbar-thumb {
        background: rgba(86, 196, 248, 0.4);
    }

.sj-premium-cards .sj-tc--agency .sj-tc-desc {
    scrollbar-color: rgba(10, 191, 188, 0.4) transparent;
}

    .sj-premium-cards .sj-tc--agency .sj-tc-desc::-webkit-scrollbar-thumb {
        background: rgba(10, 191, 188, 0.4);
    }

.sj-premium-cards .sj-theater-card:hover .sj-tc-desc {
    color: var(--sj-dark-muted);
}

/* ── 14. TAGS — Staggered reveal on hover ── */
.sj-premium-cards .sj-tc-tags {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: 5px 0;
    margin-top: 0;
    flex-shrink: 0;
    padding: 10px 0 2px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    width: 100%;
}

    .sj-premium-cards .sj-tc-tags span {
        display: flex;
        align-items: center;
        font-family: 'Outfit', sans-serif;
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        cursor: default;
        user-select: none;
        pointer-events: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        border: none;
        line-height: 1.1;
        max-width: 100%;
        border-left: 2px solid currentColor;
        padding-left: 6px;
        padding-right: 0;
        opacity: 0.6;
        transform: translateX(-6px);
        transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
    }

        .sj-premium-cards .sj-tc-tags span::before,
        .sj-premium-cards .sj-tc-tags span::after {
            content: none;
            display: none;
        }

        .sj-premium-cards .sj-tc-tags span:nth-child(even) {
            justify-self: stretch;
            width: 100%;
            text-align: left;
        }

        .sj-premium-cards .sj-tc-tags span:nth-child(odd) {
            justify-self: start;
        }

.sj-premium-cards .sj-theater-card:hover .sj-tc-tags span {
    opacity: 0.9;
    transform: translateX(0);
}

    .sj-premium-cards .sj-theater-card:hover .sj-tc-tags span:nth-child(1) {
        transition-delay: 0.05s;
    }

    .sj-premium-cards .sj-theater-card:hover .sj-tc-tags span:nth-child(2) {
        transition-delay: 0.1s;
    }

    .sj-premium-cards .sj-theater-card:hover .sj-tc-tags span:nth-child(3) {
        transition-delay: 0.15s;
    }

    .sj-premium-cards .sj-theater-card:hover .sj-tc-tags span:nth-child(4) {
        transition-delay: 0.2s;
    }

.sj-premium-cards .sj-tc--private .sj-tc-tags {
    border-top-color: rgba(245, 130, 32, 0.15);
}

    .sj-premium-cards .sj-tc--private .sj-tc-tags span {
        color: var(--sj-orange-dark);
        border-left-color: var(--sj-orange);
    }

.sj-premium-cards .sj-tc--agent .sj-tc-tags {
    border-top-color: rgba(86, 196, 248, 0.18);
}

    .sj-premium-cards .sj-tc--agent .sj-tc-tags span {
        color: var(--sj-blue-dark);
        border-left-color: var(--sj-blue-dark);
    }

.sj-premium-cards .sj-tc--agency .sj-tc-tags {
    border-top-color: rgba(10, 191, 188, 0.15);
}

    .sj-premium-cards .sj-tc--agency .sj-tc-tags span {
        color: var(--sj-teal-dark);
        border-left-color: var(--sj-teal-dark);
    }

/* ── 15. CTA — Animated arrow with accent line ── */
.sj-premium-cards .sj-tc-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

    .sj-premium-cards .sj-tc-cta::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        border-radius: 1px;
        transition: width 0.5s cubic-bezier(0.34, 1.5, 0.64, 1);
    }

.sj-premium-cards .sj-theater-card:hover .sj-tc-cta::before {
    width: 100%;
}

.sj-premium-cards .sj-tc--private .sj-tc-cta {
    color: var(--sj-orange);
}

    .sj-premium-cards .sj-tc--private .sj-tc-cta::before {
        background: linear-gradient(90deg, var(--sj-orange), rgba(245, 130, 32, 0.2));
    }

.sj-premium-cards .sj-tc--agent .sj-tc-cta {
    color: var(--sj-blue-dark);
}

    .sj-premium-cards .sj-tc--agent .sj-tc-cta::before {
        background: linear-gradient(90deg, var(--sj-blue-dark), rgba(86, 196, 248, 0.2));
    }

.sj-premium-cards .sj-tc--agency .sj-tc-cta {
    color: var(--sj-teal-dark);
}

    .sj-premium-cards .sj-tc--agency .sj-tc-cta::before {
        background: linear-gradient(90deg, var(--sj-teal-dark), rgba(10, 191, 188, 0.2));
    }

.sj-premium-cards .sj-cta-arrow {
    font-size: 1.1rem;
    display: inline-block;
    transition: transform 0.45s cubic-bezier(0.34, 1.5, 0.64, 1), opacity 0.3s ease;
}

.sj-premium-cards .sj-theater-card:hover .sj-cta-arrow {
    transform: translateX(8px) scale(1.15);
}

/* ── 16. SVG ICON ANIMATIONS (preserved) ── */
.sj-premium-cards .sj-svg-clean {
    width: 48px;
    height: 48px;
    overflow: visible;
}

.sj-premium-cards .sj-anim-float {
    animation: sjFloatBob 3s ease-in-out infinite;
}

.sj-premium-cards .sj-anim-float-delay-1 {
    animation: sjFloatBob 3s ease-in-out 0.3s infinite;
}

.sj-premium-cards .sj-anim-float-delay-2 {
    animation: sjFloatBob 3s ease-in-out 0.6s infinite;
}

.sj-premium-cards .sj-anim-beam-vertical {
    animation: sjBeamPulse 2s ease-in-out infinite;
}

.sj-premium-cards .sj-anim-pulse {
    animation: sjDotPulse 1.8s ease-in-out infinite;
}

.sj-premium-cards .sj-anim-pulse-fast {
    animation: sjPulseFast 1.4s ease-in-out infinite;
}

.sj-premium-cards .sj-anim-ripple {
    animation: sjRippleOut 2.5s ease-out infinite;
}

.sj-premium-cards .sj-anim-ripple-delay {
    animation: sjRippleOut 2.5s ease-out 1.2s infinite;
}

.sj-premium-cards .sj-anim-orbit {
    animation: sjOrbit 3s linear infinite;
    transform-origin: 40px 40px;
}

.sj-premium-cards .sj-anim-orbit-reverse {
    animation: sjOrbitRev 3s linear infinite;
    transform-origin: 40px 40px;
}

.sj-premium-cards .sj-anim-spin {
    animation: sjSpinSlow 8s linear infinite;
    transform-origin: 40px 40px;
}

.sj-premium-cards .sj-anim-flow-1 {
    animation: sjFlowParticle1 2.5s ease-in-out infinite;
}

.sj-premium-cards .sj-anim-flow-2 {
    animation: sjFlowParticle2 2.5s ease-in-out 0.8s infinite;
}

@keyframes sjSpinSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes sjFlowParticle1 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(-15px, -20px);
        opacity: 0;
    }
}

@keyframes sjFlowParticle2 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(15px, -18px);
        opacity: 0;
    }
}

/* ── 17. HOVER ICON ANIMATIONS — Enhanced on hover ── */
.sj-premium-cards .sj-theater-card:hover .sj-anim-pulse {
    animation-duration: 1s;
}

.sj-premium-cards .sj-theater-card:hover .sj-anim-orbit {
    animation-duration: 1.8s;
}

.sj-premium-cards .sj-theater-card:hover .sj-anim-orbit-reverse {
    animation-duration: 1.8s;
}

.sj-premium-cards .sj-theater-card:hover .sj-anim-spin {
    animation-duration: 4s;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet: 2-column ── */
@media (min-width: 600px) and (max-width: 900px) {
    .sj-premium-cards {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 0 12px;
        overflow-y: auto;
    }

        .sj-premium-cards .sj-theater-card:nth-child(3) {
            grid-column: 1 / -1;
            max-width: 55%;
            margin: 0 auto;
            width: 100%;
        }

        .sj-premium-cards .sj-theater-card {
            min-height: clamp(260px, 38svh, 420px);
        }
}

/* ── Mobile: 1-column ── */
@media (max-width: 599px) {
    .sj-premium-cards {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 10px;
        overflow-y: auto;
        flex: none;
    }

        .sj-premium-cards .sj-theater-card {
            min-height: unset;
            padding: 0;
        }

        .sj-premium-cards .sj-tc-desc {
            -webkit-line-clamp: 8;
        }

        .sj-premium-cards .sj-tc-tags {
            grid-template-columns: 1fr max-content;
        }
}

/* ── Small mobile ── */
@media (max-width: 480px) {
    .sj-premium-cards {
        gap: 8px;
        padding: 0 6px;
    }

        .sj-premium-cards .sj-tc-icon-wrap {
            width: 48px;
            height: 48px;
            margin-bottom: 4px;
        }

            .sj-premium-cards .sj-tc-icon-wrap svg {
                width: 38px;
                height: 38px;
            }

        .sj-premium-cards .sj-tc-inner {
            padding: 14px 12px 12px;
            gap: 4px;
        }

        .sj-premium-cards .sj-tc-title {
            font-size: clamp(0.9rem, 2.8cqi, 1.2rem);
        }

        .sj-premium-cards .sj-tc-label {
            font-size: 0.6rem;
            letter-spacing: 0.14em;
        }

        .sj-premium-cards .sj-tc-tags {
            gap: 4px 0;
            padding: 8px 0 2px;
        }

            .sj-premium-cards .sj-tc-tags span {
                font-size: 0.53rem;
                padding-left: 5px;
            }

        .sj-premium-cards .sj-tc-cta {
            padding-top: 8px;
        }
}

/* ── Height-constrained (high zoom / short screens) ── */
@media (max-height: 700px) {
    .sj-premium-cards .sj-theater-card {
        min-height: clamp(220px, 35svh, 360px);
        border-radius: 20px;
        --sj-card-radius: 20px;
    }

    .sj-premium-cards .sj-tc-inner {
        padding: 12px 14px 10px;
        gap: 4px;
    }

    .sj-premium-cards .sj-tc-icon-wrap {
        width: 46px;
        height: 46px;
        margin-bottom: 4px;
    }

        .sj-premium-cards .sj-tc-icon-wrap svg {
            width: 36px;
            height: 36px;
        }

    .sj-premium-cards .sj-tc-title {
        font-size: clamp(0.9rem, 2.5cqi, 1.25rem);
    }

    .sj-premium-cards .sj-tc-desc {
        font-size: 0.7rem;
        line-height: 1.5;
    }
}

@media (max-height: 620px) {
    .sj-premium-cards .sj-tc-inner {
        padding: 10px 12px 8px;
        gap: 3px;
    }

    .sj-premium-cards .sj-tc-icon-wrap {
        width: 40px;
        height: 40px;
        margin-bottom: 3px;
    }

        .sj-premium-cards .sj-tc-icon-wrap svg {
            width: 30px;
            height: 30px;
        }

    .sj-premium-cards .sj-tc-tags {
        margin-top: 4px;
        gap: 3px;
    }

    .sj-premium-cards .sj-tc-cta {
        padding-top: 6px;
    }
}

@media (max-height: 520px) {
    .sj-premium-cards .sj-tc-inner {
        padding: 8px 10px 6px;
        gap: 3px;
    }

    .sj-premium-cards .sj-tc-icon-wrap {
        width: 34px;
        height: 34px;
        margin-bottom: 2px;
    }

        .sj-premium-cards .sj-tc-icon-wrap svg {
            width: 26px;
            height: 26px;
        }

    .sj-premium-cards .sj-tc-title {
        font-size: clamp(0.72rem, 1.4vw, 0.85rem);
    }

    .sj-premium-cards .sj-tc-desc {
        font-size: 0.68rem;
    }

    .sj-premium-cards .sj-tc-tags {
        display: none;
    }

    .sj-premium-cards .sj-theater-card {
        min-height: clamp(180px, 30svh, 280px);
    }
}

/* ── Ultra-wide: cap readability ── */
@media (min-width: 1400px) {
    .sj-premium-cards .sj-tc-desc {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   v3 — SELLER JOURNEY CARDS: MOBILE COLLAGE LAYOUT
   ------------------------------------------------------------
   Inspired by alternating image/text grid aesthetic.
   On mobile each card becomes a horizontal split — icon panel
   on one side, text + CTA on the other. Adjacent cards swap
   sides for visual rhythm. This block must live in this CSS
   file to win over the non-media-scoped overrides earlier in
   the file (the "Revert inflated…" block at line 3869).
   ============================================================ */

@media (max-width: 768px) {
    .sj-theater-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 0 10px !important;
        grid-template-columns: none !important;
        align-items: stretch !important;
        overflow-y: visible !important;
    }

        .sj-theater-cards .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;
            position: relative !important;
        }

            .sj-theater-cards .sj-theater-card:active {
                transform: scale(0.985) !important;
                box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
            }

            .sj-theater-cards .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: 190px !important;
                overflow: visible !important;
            }

            /* EVEN cards flip the icon/text sides for collage rhythm */
            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
                grid-template-columns: 1fr 128px !important;
            }

            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-icon-wrap {
                grid-column: 2 !important;
                grid-row: 1 / span 5 !important;
            }

            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-label,
            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-title,
            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-desc,
            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-tags,
            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-cta {
                grid-column: 1 !important;
            }

            /* ICON SIDE — tinted panel with centered SVG */
            .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap {
                grid-column: 1 !important;
                grid-row: 1 / span 5 !important;
                align-self: stretch !important;
                width: 100% !important;
                height: 100% !important;
                max-width: none !important;
                max-height: none !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin: 0 !important;
                padding: 18px !important;
                border-radius: 0 !important;
                background: linear-gradient(135deg, var(--sj-tc-bg-1, rgba(245, 130, 32, 0.1)) 0%, var(--sj-tc-bg-2, rgba(245, 130, 32, 0.02)) 100%) !important;
                border: none !important;
            }

            .sj-theater-cards .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-cards .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-cards .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-cards .sj-theater-card .sj-tc-icon-wrap svg {
                width: 72px !important;
                height: 72px !important;
                max-width: 100% !important;
                max-height: 100% !important;
            }

            /* TEXT SIDE */
            .sj-theater-cards .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: #64748B !important;
                font-weight: 800 !important;
            }

            .sj-theater-cards .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-cards .sj-theater-card .sj-tc-title br {
                    display: none !important;
                }

            .sj-theater-cards .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: 8 !important;
                -webkit-box-orient: vertical !important;
                overflow: hidden !important;
            }

            .sj-theater-cards .sj-theater-card .sj-tc-tags {
                display: none !important;
            }

            .sj-theater-cards .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;
                border: none !important;
                opacity: 1 !important;
            }

                .sj-theater-cards .sj-theater-card .sj-tc-cta span {
                    color: #ffffff !important;
                }

                .sj-theater-cards .sj-theater-card .sj-tc-cta .sj-cta-arrow {
                    color: #ffffff !important;
                }

            .sj-theater-cards .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-cards .sj-theater-card.sj-tc--agency .sj-tc-cta {
                background: #0ABFBC !important;
                box-shadow: 0 4px 12px rgba(10, 191, 188, 0.35) !important;
            }

            /* Kill the desktop hover/glass flourishes on mobile */
            .sj-theater-cards .sj-theater-card .sj-tc-glass,
            .sj-theater-cards .sj-theater-card .sj-tc-mouse-glow,
            .sj-theater-cards .sj-theater-card .sj-tc-border-shimmer {
                display: none !important;
            }
}

/* ============================================================
   SELL JOURNEY — PREMIUM COLLAGE CARD REDESIGN v4
   ────────────────────────────────────────────────────────────
   Changes:
   1. Fix mobile heading visibility (hero always fully visible)
   2. Fix mobile "Private Seller" card top-truncation
   3. Bring the mobile collage horizontal-split design to ALL
      screen sizes — desktop now uses the same stacked collage
      pattern rather than the 3-col vertical card grid
   4. Agency SVG beam animation support
   ============================================================ */

/* ── Agency beam-teal animation (for the new team SVG) ── */
.sj-anim-beam-teal {
    animation: sjBeamTealPulse 2.2s ease-in-out infinite;
}

@keyframes sjBeamTealPulse {
    0%, 100% {
        opacity: 0.55;
        stroke-width: 1.5;
    }

    50% {
        opacity: 1;
        stroke-width: 2.2;
    }
}

/* ─────────────────────────────────────────────────────────────
   1. HEADING VISIBILITY FIX
   The sj-step0-theater is overflow:auto but the hero section
   can still get clipped when the parent panel is too short.
   Ensure the hero is always a fixed-shrink element so it
   never gets squished below zero.
   ───────────────────────────────────────────────────────────── */
.sj-step0-inner.sj-step0-theater {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
}

    .sj-step0-inner.sj-step0-theater::-webkit-scrollbar {
        display: none;
    }

/* Hero block: never shrink below its natural height */
.sj-theater-hero {
    flex-shrink: 0 !important;
    padding: clamp(10px, 2vh, 18px) 16px clamp(8px, 1.5vh, 14px) !important;
}

/* Cards area: allow it to scroll/shrink but hero is protected */
.sj-theater-cards,
.sj-premium-cards {
    flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   2 & 3. COLLAGE CARD LAYOUT — ALL SCREEN SIZES
   Each card is a horizontal split: coloured icon panel on one
   side, text + CTA on the other. Odd cards: icon left.
   Even cards: icon right. This creates the editorial alternating
   rhythm on every breakpoint including desktop.
   ───────────────────────────────────────────────────────────── */

/* Container: override grid → single flex column for all sizes */
.sj-theater-cards,
.sj-premium-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 0 14px !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    overflow-y: visible !important;
    max-width: 820px !important; /* cap width so it looks premium even on ultrawide */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

    /* Each card: reset grid/height constraints, let content dictate */
    .sj-theater-cards .sj-theater-card,
    .sj-premium-cards .sj-theater-card {
        width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        flex: none !important;
        opacity: 1 !important;
        filter: none !important;
        border-radius: 20px !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 28px rgba(15, 23, 42, 0.07) !important;
        transition: transform 0.20s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease !important;
        /* Preserve entrance animation */
    }

        /* Inner layout: 2-column grid — icon panel | text panel */
        .sj-theater-cards .sj-theater-card .sj-tc-inner,
        .sj-premium-cards .sj-theater-card .sj-tc-inner {
            display: grid !important;
            grid-template-columns: 140px 1fr !important;
            grid-template-rows: auto !important;
            gap: 0 !important;
            padding: 0 !important;
            min-height: 164px !important;
            height: auto !important;
            overflow: visible !important;
            align-items: stretch !important;
            text-align: left !important;
        }

        /* EVEN cards: flip icon to the right for alternating rhythm */
        .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
        .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
            grid-template-columns: 1fr 140px !important;
        }

        /* Icon panel — always in its grid column, full height */
        .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap {
            grid-column: 1 !important;
            grid-row: 1 / span 6 !important;
            align-self: stretch !important;
            width: 100% !important;
            height: 100% !important;
            max-width: none !important;
            max-height: none !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0 !important;
            padding: 20px 16px !important;
            border-radius: 0 !important;
            background: linear-gradient( 145deg, var(--sj-tc-icon-bg-1, rgba(245,130,32,0.10)) 0%, var(--sj-tc-icon-bg-2, rgba(245,130,32,0.03)) 100% ) !important;
            border: none !important;
            box-shadow: none !important;
            transition: background 0.3s ease !important;
            min-height: 164px !important;
        }

        /* Even: icon goes to column 2 */
        .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-icon-wrap {
            grid-column: 2 !important;
        }

        /* Per-card icon background colours */
        .sj-theater-cards .sj-theater-card.sj-tc--private .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--private .sj-tc-icon-wrap {
            --sj-tc-icon-bg-1: rgba(245, 130, 32, 0.11);
            --sj-tc-icon-bg-2: rgba(245, 130, 32, 0.03);
        }

        .sj-theater-cards .sj-theater-card.sj-tc--agent .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--agent .sj-tc-icon-wrap {
            --sj-tc-icon-bg-1: rgba(86, 196, 248, 0.13);
            --sj-tc-icon-bg-2: rgba(86, 196, 248, 0.04);
        }

        .sj-theater-cards .sj-theater-card.sj-tc--agency .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--agency .sj-tc-icon-wrap {
            --sj-tc-icon-bg-1: rgba(10, 191, 188, 0.13);
            --sj-tc-icon-bg-2: rgba(10, 191, 188, 0.04);
        }

        .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap svg,
        .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap svg {
            width: 68px !important;
            height: 68px !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }

        /* ── Text-side elements: always go to column 2 (odd cards) ── */
        .sj-theater-cards .sj-theater-card .sj-tc-label,
        .sj-theater-cards .sj-theater-card .sj-tc-title,
        .sj-theater-cards .sj-theater-card .sj-tc-desc,
        .sj-theater-cards .sj-theater-card .sj-tc-tags,
        .sj-theater-cards .sj-theater-card .sj-tc-cta,
        .sj-premium-cards .sj-theater-card .sj-tc-label,
        .sj-premium-cards .sj-theater-card .sj-tc-title,
        .sj-premium-cards .sj-theater-card .sj-tc-desc,
        .sj-premium-cards .sj-theater-card .sj-tc-tags,
        .sj-premium-cards .sj-theater-card .sj-tc-cta {
            grid-column: 2 !important;
            text-align: left !important;
            align-self: auto !important;
        }

        /* Even cards: text goes to column 1 */
        .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-label,
        .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-title,
        .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-desc,
        .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-tags,
        .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-cta,
        .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-label,
        .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-title,
        .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-desc,
        .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-tags,
        .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-cta {
            grid-column: 1 !important;
        }

        /* Label */
        .sj-theater-cards .sj-theater-card .sj-tc-label,
        .sj-premium-cards .sj-theater-card .sj-tc-label {
            grid-row: 1 !important;
            margin: 16px 18px 0 18px !important;
            font-size: 0.6rem !important;
            letter-spacing: 0.16em !important;
            padding: 0 !important;
            background: none !important;
            border: none !important;
            font-weight: 800 !important;
        }

        /* Title */
        .sj-theater-cards .sj-theater-card .sj-tc-title,
        .sj-premium-cards .sj-theater-card .sj-tc-title {
            grid-row: 2 !important;
            margin: 4px 18px 0 18px !important;
            font-size: clamp(0.95rem, 2vw, 1.2rem) !important;
            line-height: 1.2 !important;
            font-weight: 900 !important;
            letter-spacing: -0.025em !important;
            /* Preserve per-card gradient — only override layout */
            text-align: left !important;
            overflow: visible !important;
        }

            .sj-theater-cards .sj-theater-card .sj-tc-title br,
            .sj-premium-cards .sj-theater-card .sj-tc-title br {
                display: none !important; /* single-line title in collage */
            }

        /* Description */
        .sj-theater-cards .sj-theater-card .sj-tc-desc,
        .sj-premium-cards .sj-theater-card .sj-tc-desc {
            grid-row: 3 !important;
            margin: 6px 18px 0 18px !important;
            font-size: 0.73rem !important;
            line-height: 1.48 !important;
            color: #64748B !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 3 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            flex: none !important;
            min-height: 0 !important;
            overflow-y: hidden !important;
            scrollbar-width: none !important;
            text-align: left !important;
        }

        /* Tags: hidden to keep cards compact in collage mode */
        .sj-theater-cards .sj-theater-card .sj-tc-tags,
        .sj-premium-cards .sj-theater-card .sj-tc-tags {
            display: none !important;
        }

        /* CTA button */
        .sj-theater-cards .sj-theater-card .sj-tc-cta,
        .sj-premium-cards .sj-theater-card .sj-tc-cta {
            grid-row: 4 !important;
            margin: 10px 18px 16px 18px !important;
            padding: 9px 16px !important;
            border-radius: 10px !important;
            background: #F58220 !important;
            color: #ffffff !important;
            font-weight: 700 !important;
            font-size: 0.8rem !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 7px !important;
            width: fit-content !important;
            box-shadow: 0 4px 14px rgba(245, 130, 32, 0.35) !important;
            border: none !important;
            border-top: none !important;
            margin-top: auto !important;
            letter-spacing: 0.02em !important;
        }

            .sj-theater-cards .sj-theater-card .sj-tc-cta span,
            .sj-theater-cards .sj-theater-card .sj-tc-cta .sj-cta-arrow,
            .sj-premium-cards .sj-theater-card .sj-tc-cta span,
            .sj-premium-cards .sj-theater-card .sj-tc-cta .sj-cta-arrow {
                color: #ffffff !important;
                -webkit-text-fill-color: #ffffff !important;
            }

            .sj-theater-cards .sj-theater-card .sj-tc-cta::before,
            .sj-premium-cards .sj-theater-card .sj-tc-cta::before {
                display: none !important; /* remove the underline animation in collage mode */
            }

        /* Per-card CTA accent colours */
        .sj-theater-cards .sj-theater-card.sj-tc--agent .sj-tc-cta,
        .sj-premium-cards .sj-theater-card.sj-tc--agent .sj-tc-cta {
            background: #2b95ce !important;
            box-shadow: 0 4px 14px rgba(86, 196, 248, 0.38) !important;
        }

        .sj-theater-cards .sj-theater-card.sj-tc--agency .sj-tc-cta,
        .sj-premium-cards .sj-theater-card.sj-tc--agency .sj-tc-cta {
            background: #08A09D !important;
            box-shadow: 0 4px 14px rgba(10, 191, 188, 0.38) !important;
        }

        /* Hover: lift card */
        .sj-theater-cards .sj-theater-card:hover,
        .sj-premium-cards .sj-theater-card:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08), 0 16px 40px rgba(15, 23, 42, 0.10) !important;
            background: #FFFFFF !important;
            border-color: rgba(15, 23, 42, 0.09) !important;
        }

        /* Per-card hover glow */
        .sj-theater-cards .sj-theater-card.sj-tc--private:hover,
        .sj-premium-cards .sj-theater-card.sj-tc--private:hover {
            box-shadow: 0 6px 20px rgba(245, 130, 32, 0.10), 0 16px 40px rgba(245, 130, 32, 0.12) !important;
        }

        .sj-theater-cards .sj-theater-card.sj-tc--agent:hover,
        .sj-premium-cards .sj-theater-card.sj-tc--agent:hover {
            box-shadow: 0 6px 20px rgba(86, 196, 248, 0.12), 0 16px 40px rgba(86, 196, 248, 0.14) !important;
        }

        .sj-theater-cards .sj-theater-card.sj-tc--agency:hover,
        .sj-premium-cards .sj-theater-card.sj-tc--agency:hover {
            box-shadow: 0 6px 20px rgba(10, 191, 188, 0.12), 0 16px 40px rgba(10, 191, 188, 0.14) !important;
        }

        /* Active press */
        .sj-theater-cards .sj-theater-card:active,
        .sj-premium-cards .sj-theater-card:active {
            transform: scale(0.987) !important;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
            transition-duration: 0.10s !important;
        }

        /* Kill desktop glass/shimmer — the collage design is clean and flat */
        .sj-theater-cards .sj-theater-card .sj-tc-glass,
        .sj-theater-cards .sj-theater-card .sj-tc-mouse-glow,
        .sj-theater-cards .sj-theater-card .sj-tc-border-shimmer,
        .sj-premium-cards .sj-theater-card .sj-tc-glass,
        .sj-premium-cards .sj-theater-card .sj-tc-mouse-glow,
        .sj-premium-cards .sj-theater-card .sj-tc-border-shimmer {
            display: none !important;
        }

/* ─────────────────────────────────────────────────────────────
   COLLAGE: LARGER SCREENS — wider icon column + tighter spacing
   ───────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
    .sj-theater-cards .sj-theater-card .sj-tc-inner,
    .sj-premium-cards .sj-theater-card .sj-tc-inner {
        grid-template-columns: 160px 1fr !important;
        min-height: 180px !important;
    }

    .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
    .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
        grid-template-columns: 1fr 160px !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap svg,
    .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap svg {
        width: 76px !important;
        height: 76px !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-title,
    .sj-premium-cards .sj-theater-card .sj-tc-title {
        font-size: clamp(1.05rem, 2.2vw, 1.3rem) !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-desc,
    .sj-premium-cards .sj-theater-card .sj-tc-desc {
        -webkit-line-clamp: 8 !important;
        font-size: 0.75rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   COLLAGE: SMALL MOBILE — narrower icon, tighter margins
   ───────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .sj-theater-cards,
    .sj-premium-cards {
        gap: 10px !important;
        padding: 0 8px !important;
    }

        .sj-theater-cards .sj-theater-card .sj-tc-inner,
        .sj-premium-cards .sj-theater-card .sj-tc-inner {
            grid-template-columns: 112px 1fr !important;
            min-height: 148px !important;
        }

        .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
        .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
            grid-template-columns: 1fr 112px !important;
        }

        .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap svg,
        .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap svg {
            width: 54px !important;
            height: 54px !important;
        }

        .sj-theater-cards .sj-theater-card .sj-tc-label,
        .sj-premium-cards .sj-theater-card .sj-tc-label {
            margin: 12px 12px 0 12px !important;
            font-size: 0.56rem !important;
        }

        .sj-theater-cards .sj-theater-card .sj-tc-title,
        .sj-premium-cards .sj-theater-card .sj-tc-title {
            margin: 3px 12px 0 12px !important;
            font-size: 0.9rem !important;
        }

        .sj-theater-cards .sj-theater-card .sj-tc-desc,
        .sj-premium-cards .sj-theater-card .sj-tc-desc {
            margin: 4px 12px 0 12px !important;
            font-size: 0.68rem !important;
            -webkit-line-clamp: 3 !important;
        }

        .sj-theater-cards .sj-theater-card .sj-tc-cta,
        .sj-premium-cards .sj-theater-card .sj-tc-cta {
            margin: 8px 12px 12px 12px !important;
            padding: 8px 12px !important;
            font-size: 0.73rem !important;
        }
}

/* ─────────────────────────────────────────────────────────────
   SELECTED STATE — preserved for all collage variants
   ───────────────────────────────────────────────────────────── */
.sj-theater-cards .sj-theater-card.sj-tc--private.sj-tc-selected,
.sj-premium-cards .sj-theater-card.sj-tc--private.sj-tc-selected {
    border-color: rgba(245, 130, 32, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.15) !important;
}

.sj-theater-cards .sj-theater-card.sj-tc--agent.sj-tc-selected,
.sj-premium-cards .sj-theater-card.sj-tc--agent.sj-tc-selected {
    border-color: rgba(86, 196, 248, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.15) !important;
}

.sj-theater-cards .sj-theater-card.sj-tc--agency.sj-tc-selected,
.sj-premium-cards .sj-theater-card.sj-tc--agency.sj-tc-selected {
    border-color: rgba(10, 191, 188, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(10, 191, 188, 0.15) !important;
}


/* ============================================================
   SELL JOURNEY — DESKTOP 3-COLUMN CARD LAYOUT v5
   ────────────────────────────────────────────────────────────
   On desktop (≥769px): three cards side-by-side in a row,
   each framed by a slow-moving animated border line that
   travels around the card perimeter (SVG stroke-dashoffset).
   A small accent dot sits at the connection point on the
   right edge of each card, matching the reference design.
   Mobile (≤768px): keeps the collage stacked layout from v4.
   ============================================================ */

/* ── DESKTOP: 3-column horizontal grid ── */
@media (min-width: 769px) {

    /* Container: back to 3-col grid, full width */
    .sj-theater-cards,
    .sj-premium-cards {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        flex-direction: unset !important;
        gap: clamp(18px, 2.5vw, 32px) !important;
        padding: 0 clamp(12px, 2vw, 24px) clamp(12px, 2vh, 20px) !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        align-items: stretch !important;
        overflow-y: visible !important;
        flex-shrink: 0 !important;
    }

        /* ── Each card: vertical flex, full height ── */
        .sj-theater-cards .sj-theater-card,
        .sj-premium-cards .sj-theater-card {
            width: 100% !important;
            height: auto !important;
            min-height: clamp(260px, 38svh, 440px) !important;
            max-height: none !important;
            flex: none !important;
            border-radius: 18px !important;
            overflow: visible !important; /* allow the animated border SVG to bleed */
            background: #ffffff !important;
            border: none !important; /* border handled by SVG overlay */
            box-shadow: 0 4px 16px rgba(0,0,0,0.05), 0 12px 36px rgba(0,0,0,0.07), 6px 6px 0 0 rgba(0,0,0,0.04) !important; /* subtle bottom-right shadow from reference */
            transition: transform 0.32s cubic-bezier(0.25,1,0.5,1), box-shadow 0.32s ease !important;
            position: relative !important;
            display: flex !important;
            flex-direction: column !important;
            /* clip inner content but let SVG border overflow */
            clip-path: none !important;
        }

            /* Inner clip so card bg stays rounded */
            .sj-theater-cards .sj-theater-card::before,
            .sj-premium-cards .sj-theater-card::before {
                content: '' !important;
                position: absolute !important;
                inset: 0 !important;
                border-radius: 18px !important;
                background: #ffffff !important;
                z-index: 0 !important;
                pointer-events: none !important;
            }

            /* Hover lift */
            .sj-theater-cards .sj-theater-card:hover,
            .sj-premium-cards .sj-theater-card:hover {
                transform: translateY(-4px) !important;
                box-shadow: 0 8px 28px rgba(0,0,0,0.08), 0 20px 50px rgba(0,0,0,0.10), 6px 6px 0 0 rgba(0,0,0,0.05) !important;
            }

            /* ── Inner content: vertical flex (original desktop style) ── */
            .sj-theater-cards .sj-theater-card .sj-tc-inner,
            .sj-premium-cards .sj-theater-card .sj-tc-inner {
                display: flex !important;
                flex-direction: column !important;
                grid-template-columns: unset !important;
                align-items: center !important;
                text-align: center !important;
                padding: clamp(20px,3vw,28px) clamp(16px,2.5vw,24px) clamp(16px,2.5vw,20px) !important;
                gap: 6px !important;
                height: 100% !important;
                min-height: 0 !important;
                overflow: hidden !important;
                position: relative !important;
                z-index: 1 !important;
            }

            /* ── Icon wrap: back to centred square ── */
            .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap,
            .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap {
                grid-column: unset !important;
                grid-row: unset !important;
                align-self: center !important;
                width: clamp(52px,7vw,68px) !important;
                height: clamp(52px,7vw,68px) !important;
                min-height: unset !important;
                max-width: unset !important;
                max-height: unset !important;
                margin: 0 0 10px 0 !important;
                padding: 0 !important;
                border-radius: 16px !important;
                border: 1px solid rgba(0,0,0,0.06) !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                background: unset !important; /* restored per-card colours below */
                transition: transform 0.4s cubic-bezier(0.34,1.5,0.64,1), box-shadow 0.4s ease !important;
            }

            /* Restore per-card icon backgrounds */
            .sj-theater-cards .sj-theater-card.sj-tc--private .sj-tc-icon-wrap,
            .sj-premium-cards .sj-theater-card.sj-tc--private .sj-tc-icon-wrap {
                background: linear-gradient(135deg,rgba(255,243,232,0.95),rgba(255,228,196,0.7)) !important;
                border-color: rgba(245,130,32,0.2) !important;
                box-shadow: 0 4px 14px rgba(245,130,32,0.13), inset 0 1px 0 rgba(255,255,255,0.95) !important;
            }

            .sj-theater-cards .sj-theater-card.sj-tc--agent .sj-tc-icon-wrap,
            .sj-premium-cards .sj-theater-card.sj-tc--agent .sj-tc-icon-wrap {
                background: linear-gradient(135deg,rgba(234,247,254,0.95),rgba(196,232,255,0.7)) !important;
                border-color: rgba(86,196,248,0.2) !important;
                box-shadow: 0 4px 14px rgba(86,196,248,0.13), inset 0 1px 0 rgba(255,255,255,0.95) !important;
            }

            .sj-theater-cards .sj-theater-card.sj-tc--agency .sj-tc-icon-wrap,
            .sj-premium-cards .sj-theater-card.sj-tc--agency .sj-tc-icon-wrap {
                background: linear-gradient(135deg,rgba(227,250,250,0.95),rgba(184,244,243,0.7)) !important;
                border-color: rgba(10,191,188,0.2) !important;
                box-shadow: 0 4px 14px rgba(10,191,188,0.13), inset 0 1px 0 rgba(255,255,255,0.95) !important;
            }

            .sj-theater-cards .sj-theater-card:hover .sj-tc-icon-wrap,
            .sj-premium-cards .sj-theater-card:hover .sj-tc-icon-wrap {
                transform: translateY(-3px) scale(1.07) !important;
            }

            .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap svg,
            .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap svg {
                width: clamp(36px,5vw,48px) !important;
                height: clamp(36px,5vw,48px) !important;
            }

            /* ── Text elements: back to centred column ── */
            .sj-theater-cards .sj-theater-card .sj-tc-label,
            .sj-theater-cards .sj-theater-card .sj-tc-title,
            .sj-theater-cards .sj-theater-card .sj-tc-desc,
            .sj-theater-cards .sj-theater-card .sj-tc-tags,
            .sj-theater-cards .sj-theater-card .sj-tc-cta,
            .sj-premium-cards .sj-theater-card .sj-tc-label,
            .sj-premium-cards .sj-theater-card .sj-tc-title,
            .sj-premium-cards .sj-theater-card .sj-tc-desc,
            .sj-premium-cards .sj-theater-card .sj-tc-tags,
            .sj-premium-cards .sj-theater-card .sj-tc-cta {
                grid-column: unset !important;
                grid-row: unset !important;
                text-align: center !important;
                margin: 0 !important;
                align-self: auto !important;
            }

            /* Even-card overrides from v4 must be neutralised on desktop */
            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
            .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
                grid-template-columns: unset !important;
                flex-direction: column !important;
            }

            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-icon-wrap,
            .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-icon-wrap {
                grid-column: unset !important;
                grid-row: unset !important;
            }

            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-label,
            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-title,
            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-desc,
            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-tags,
            .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-cta,
            .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-label,
            .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-title,
            .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-desc,
            .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-tags,
            .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-cta {
                grid-column: unset !important;
                text-align: center !important;
                margin: 0 !important;
            }

            /* Label */
            .sj-theater-cards .sj-theater-card .sj-tc-label,
            .sj-premium-cards .sj-theater-card .sj-tc-label {
                font-size: 0.6rem !important;
                letter-spacing: 0.16em !important;
                margin-bottom: 4px !important;
                display: inline-flex !important;
                align-items: center !important;
                gap: 6px !important;
                width: fit-content !important;
                align-self: center !important;
            }

            /* Title */
            .sj-theater-cards .sj-theater-card .sj-tc-title,
            .sj-premium-cards .sj-theater-card .sj-tc-title {
                font-size: clamp(0.9rem, 1.8vw, 1.15rem) !important;
                line-height: 1.22 !important;
                text-align: center !important;
                width: 100% !important;
                overflow: visible !important;
            }

                /* Restore <br> line breaks on desktop */
                .sj-theater-cards .sj-theater-card .sj-tc-title br,
                .sj-premium-cards .sj-theater-card .sj-tc-title br {
                    display: inline !important;
                }

            /* Description */
            .sj-theater-cards .sj-theater-card .sj-tc-desc,
            .sj-premium-cards .sj-theater-card .sj-tc-desc {
                font-size: clamp(0.68rem, 1vw, 0.76rem) !important;
                line-height: 1.58 !important;
                text-align: left !important;
                width: 100% !important;
                flex: 1 1 0 !important;
                min-height: 0 !important;
                overflow-y: auto !important;
                display: block !important;
                -webkit-line-clamp: unset !important;
                margin: 4px 0 0 !important;
            }

            /* Tags */
            .sj-theater-cards .sj-theater-card .sj-tc-tags,
            .sj-premium-cards .sj-theater-card .sj-tc-tags {
                display: grid !important;
                grid-template-columns: 1fr max-content !important;
                gap: 5px 0 !important;
                padding: 8px 0 2px !important;
                border-top: 1px solid rgba(0,0,0,0.06) !important;
                width: 100% !important;
                flex-shrink: 0 !important;
                margin-top: 0 !important;
            }

            /* CTA: solid filled pill button at card bottom */
            .sj-theater-cards .sj-theater-card .sj-tc-cta,
            .sj-premium-cards .sj-theater-card .sj-tc-cta {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 8px !important;
                margin-top: auto !important;
                padding: 11px 20px !important;
                border-radius: 8px !important;
                font-size: 0.74rem !important;
                font-weight: 800 !important;
                letter-spacing: 0.06em !important;
                width: 100% !important;
                flex-shrink: 0 !important;
                border-top: none !important;
                border: none !important;
                color: #ffffff !important;
                transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
                position: relative !important;
                overflow: hidden !important;
            }

                .sj-theater-cards .sj-theater-card .sj-tc-cta span,
                .sj-theater-cards .sj-theater-card .sj-tc-cta .sj-cta-arrow,
                .sj-premium-cards .sj-theater-card .sj-tc-cta span,
                .sj-premium-cards .sj-theater-card .sj-tc-cta .sj-cta-arrow {
                    color: #ffffff !important;
                    -webkit-text-fill-color: #ffffff !important;
                }

                .sj-theater-cards .sj-theater-card .sj-tc-cta::before,
                .sj-premium-cards .sj-theater-card .sj-tc-cta::before {
                    content: '' !important;
                    position: absolute !important;
                    inset: 0 !important;
                    background: rgba(255,255,255,0.12) !important;
                    opacity: 0 !important;
                    transition: opacity 0.2s ease !important;
                    border-radius: inherit !important;
                    display: block !important;
                    width: auto !important;
                    height: auto !important;
                }

            .sj-theater-cards .sj-theater-card:hover .sj-tc-cta::before,
            .sj-premium-cards .sj-theater-card:hover .sj-tc-cta::before {
                opacity: 1 !important;
            }

            /* Per-card CTA colours */
            .sj-theater-cards .sj-theater-card.sj-tc--private .sj-tc-cta,
            .sj-premium-cards .sj-theater-card.sj-tc--private .sj-tc-cta {
                background: var(--sj-orange) !important;
                box-shadow: 0 4px 16px rgba(245,130,32,0.38) !important;
            }

            .sj-theater-cards .sj-theater-card.sj-tc--agent .sj-tc-cta,
            .sj-premium-cards .sj-theater-card.sj-tc--agent .sj-tc-cta {
                background: var(--sj-teal) !important;
                box-shadow: 0 4px 16px rgba(10,191,188,0.38) !important;
            }

            .sj-theater-cards .sj-theater-card.sj-tc--agency .sj-tc-cta,
            .sj-premium-cards .sj-theater-card.sj-tc--agency .sj-tc-cta {
                background: #E05A2B !important;
                box-shadow: 0 4px 16px rgba(224,90,43,0.38) !important;
            }

    /* ── ANIMATED BORDER LINE — the perimeter-travelling stroke ── */
    /*
       We inject an <svg class="sj-card-border-svg"> into each card
       via JS (below). This rule styles that SVG element which sits
       absolutely positioned over the card, covering its border-box.
       The <rect> inside it travels its own perimeter with a
       stroke-dashoffset animation — the "line moving around the card"
       effect from the reference image.
    */
    .sj-card-border-svg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
        z-index: 4 !important; /* above card content glass but below interactive z-layers */
        overflow: visible !important;
        border-radius: 18px !important;
    }

    .sj-card-border-rect {
        fill: none;
        stroke-width: 1.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0.38;
    }

    /* Private — orange */
    .sj-tc--private .sj-card-border-rect {
        stroke: var(--sj-orange);
    }

    /* Agent — teal */
    .sj-tc--agent .sj-card-border-rect {
        stroke: var(--sj-teal);
    }

    /* Agency — red-orange */
    .sj-tc--agency .sj-card-border-rect {
        stroke: #E05A2B;
    }

    /* ── Accent dot at right edge connection point ── */
    .sj-card-accent-dot {
        position: absolute !important;
        right: -7px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 14px !important;
        height: 14px !important;
        border-radius: 50% !important;
        z-index: 5 !important;
        pointer-events: none !important;
        animation: sjDotPop 0.5s cubic-bezier(0.34,1.6,0.64,1) both !important;
        box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 2px 8px rgba(0,0,0,0.15) !important;
    }

    .sj-tc--private .sj-card-accent-dot {
        background: var(--sj-orange) !important;
        animation-delay: 0.4s !important;
    }

    .sj-tc--agent .sj-card-accent-dot {
        background: var(--sj-teal) !important;
        animation-delay: 0.55s !important;
    }

    .sj-tc--agency .sj-card-accent-dot {
        background: #E05A2B !important;
        animation-delay: 0.7s !important;
    }

    /* Restore glass / shimmer effects on desktop */
    .sj-theater-cards .sj-theater-card .sj-tc-glass,
    .sj-premium-cards .sj-theater-card .sj-tc-glass {
        display: block !important;
    }

    /* ── SELECTED state ── */
    .sj-theater-cards .sj-theater-card.sj-tc--private.sj-tc-selected,
    .sj-premium-cards .sj-theater-card.sj-tc--private.sj-tc-selected {
        box-shadow: 0 0 0 3px rgba(245,130,32,0.22), 0 12px 36px rgba(245,130,32,0.16), 6px 6px 0 0 rgba(245,130,32,0.10) !important;
    }

    .sj-theater-cards .sj-theater-card.sj-tc--agent.sj-tc-selected,
    .sj-premium-cards .sj-theater-card.sj-tc--agent.sj-tc-selected {
        box-shadow: 0 0 0 3px rgba(10,191,188,0.22), 0 12px 36px rgba(10,191,188,0.16), 6px 6px 0 0 rgba(10,191,188,0.10) !important;
    }

    .sj-theater-cards .sj-theater-card.sj-tc--agency.sj-tc-selected,
    .sj-premium-cards .sj-theater-card.sj-tc--agency.sj-tc-selected {
        box-shadow: 0 0 0 3px rgba(224,90,43,0.22), 0 12px 36px rgba(224,90,43,0.16), 6px 6px 0 0 rgba(224,90,43,0.10) !important;
    }
}
/* end @media (min-width: 769px) */


/* ── Keyframes for animated card border & dot — top-level for full browser support ── */
@keyframes sjBorderTravel {
    from {
        stroke-dashoffset: var(--sj-border-perimeter, 1400);
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes sjDotPop {
    from {
        transform: translateY(-50%) scale(0);
        opacity: 0;
    }

    to {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
}

/* ============================================================
   SELL JOURNEY — DESKTOP ENHANCEMENTS v6
   ────────────────────────────────────────────────────────────
   Fixes:
   1. Restore cursor spray-paint (mouse-glow) on desktop —
      the v4 collage block killed it with no media scope.
   2. Restore border shimmer on desktop hover.
   3. Fix 3rd card text truncation — hide tags on desktop,
      give description full remaining flex space with scroll,
      increase card min-height slightly.
   Border animation speed: changed in JS from 7s → 14s.
   ============================================================ */

@media (min-width: 769px) {

    /* ── 1. Restore cursor spray-paint glow ── */
    /* The v4 collage block set display:none with no media scope,
       killing the glow on desktop too. Undo that here. */
    .sj-theater-cards .sj-theater-card .sj-tc-mouse-glow,
    .sj-premium-cards .sj-theater-card .sj-tc-mouse-glow {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        border-radius: 18px !important;
        pointer-events: none !important;
        z-index: 2 !important;
        opacity: 0;
        transition: opacity 0.5s ease !important;
        mix-blend-mode: normal !important;
    }

    .sj-theater-cards .sj-theater-card:hover .sj-tc-mouse-glow,
    .sj-premium-cards .sj-theater-card:hover .sj-tc-mouse-glow {
        opacity: 1 !important;
    }

    /* Per-card glow colours — large 280px radius for generous coverage */
    .sj-theater-cards .sj-theater-card.sj-tc--private .sj-tc-mouse-glow,
    .sj-premium-cards .sj-theater-card.sj-tc--private .sj-tc-mouse-glow {
        background: radial-gradient( circle 280px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(245, 130, 32, 0.16) 0%, transparent 72% ) !important;
    }

    .sj-theater-cards .sj-theater-card.sj-tc--agent .sj-tc-mouse-glow,
    .sj-premium-cards .sj-theater-card.sj-tc--agent .sj-tc-mouse-glow {
        background: radial-gradient( circle 280px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(86, 196, 248, 0.16) 0%, transparent 72% ) !important;
    }

    .sj-theater-cards .sj-theater-card.sj-tc--agency .sj-tc-mouse-glow,
    .sj-premium-cards .sj-theater-card.sj-tc--agency .sj-tc-mouse-glow {
        background: radial-gradient( circle 280px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(224, 90, 43, 0.15) 0%, transparent 72% ) !important;
    }

    /* ── 2. Restore border shimmer on hover ── */
    .sj-theater-cards .sj-theater-card .sj-tc-border-shimmer,
    .sj-premium-cards .sj-theater-card .sj-tc-border-shimmer {
        display: block !important;
    }

    /* ── 3. Fix 3rd card description truncation ── */
    /* Hide tags on desktop to reclaim vertical space for the description */
    .sj-theater-cards .sj-theater-card .sj-tc-tags,
    .sj-premium-cards .sj-theater-card .sj-tc-tags {
        display: none !important;
    }

    /* Description: scrollable flex-1, no clamp, readable font */
    .sj-theater-cards .sj-theater-card .sj-tc-desc,
    .sj-premium-cards .sj-theater-card .sj-tc-desc {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        /* thin branded scrollbar — nearly invisible */
        scrollbar-width: thin !important;
        scrollbar-color: rgba(0,0,0,0.12) transparent !important;
        font-size: clamp(0.68rem, 0.95vw, 0.75rem) !important;
        line-height: 1.6 !important;
        padding-right: 2px !important;
    }

        .sj-theater-cards .sj-theater-card .sj-tc-desc::-webkit-scrollbar,
        .sj-premium-cards .sj-theater-card .sj-tc-desc::-webkit-scrollbar {
            width: 3px;
        }

        .sj-theater-cards .sj-theater-card .sj-tc-desc::-webkit-scrollbar-thumb,
        .sj-premium-cards .sj-theater-card .sj-tc-desc::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.14);
            border-radius: 4px;
        }

    /* Per-card accent scrollbar */
    .sj-theater-cards .sj-theater-card.sj-tc--private .sj-tc-desc,
    .sj-premium-cards .sj-theater-card.sj-tc--private .sj-tc-desc {
        scrollbar-color: rgba(245,130,32,0.35) transparent !important;
    }

    .sj-theater-cards .sj-theater-card.sj-tc--agent .sj-tc-desc,
    .sj-premium-cards .sj-theater-card.sj-tc--agent .sj-tc-desc {
        scrollbar-color: rgba(10,191,188,0.4) transparent !important;
    }

    .sj-theater-cards .sj-theater-card.sj-tc--agency .sj-tc-desc,
    .sj-premium-cards .sj-theater-card.sj-tc--agency .sj-tc-desc {
        scrollbar-color: rgba(224,90,43,0.35) transparent !important;
    }

    /* Slightly taller card floor so all three cards have breathing room */
    .sj-theater-cards .sj-theater-card,
    .sj-premium-cards .sj-theater-card {
        min-height: clamp(280px, 42svh, 480px) !important;
    }

        /* CTA: shrink 0 so it never gets pushed away by the description */
        .sj-theater-cards .sj-theater-card .sj-tc-cta,
        .sj-premium-cards .sj-theater-card .sj-tc-cta {
            flex-shrink: 0 !important;
            margin-top: 12px !important;
        }
}
/* end @media (min-width: 769px) */

/* ============================================================
   SELL JOURNEY — MOBILE THEATER FIX (final)
   ─────────────────────────────────────────────────────────────
   ALL fixes are scoped to max-width:768px ONLY so desktop is
   completely unaffected. Desktop gets explicit restores at
   min-width:769px to undo anything that bled through.
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   MOBILE (≤ 768px) — full theater + scroll fix
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* 1. sj-step: the scroll frame — keep fixed height, just ensure
          overflow-y:auto is active so it scrolls its taller content */
    .sj-step {
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }

        .sj-step::-webkit-scrollbar {
            display: none;
        }

    /* 2. Theater: grow to content, anchored to top.
          - height:auto  → stops it being a fixed-size clipping box
          - justify-content:flex-start → CRITICAL: base CSS sets
            justify-content:center on .sj-step0-inner which vertically
            centres children. With any height, the top half (heading +
            card 1) sits above scroll position 0 and is invisibly clipped.
            flex-start pins content to the top edge. */
    .sj-step0-inner.sj-step0-theater,
    .sj-step0-theater {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        justify-content: flex-start !important;
    }

    /* 3. Hero: rigid, never shrinks, never clips heading */
    .sj-theater-hero {
        flex-shrink: 0 !important;
        overflow: visible !important;
    }

    /* 3b. Decorative orbs: freeze the drift on mobile. The 300px / 260px
          blurred blobs with negative offsets were the only elements whose
          motion (sjOrbDrift, translate up to +28px) could extend the
          paintable/scrollable box on a narrow frame and let the whole
          Step-0 column be nudged sideways. Static + contained = no drift. */
    #sjStep0 .sj-orb {
        animation: none !important;
        transform: none !important;
    }

    /* 4. Heading: allow wrapping on narrow screens */
    .sj-theater-heading {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .sj-heading-main-row {
        flex-wrap: wrap !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .sj-scramble-text {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        min-width: 0 !important;
    }

    /* 5. Cards container: natural stacked height, bottom padding */
    .sj-theater-cards,
    .sj-premium-cards {
        flex-shrink: 0 !important;
        overflow-y: visible !important;
        padding-bottom: 24px !important;
    }

    /* 6. Reassurance strip */
    .sj-theater-reassurance {
        flex-shrink: 0 !important;
    }

    /* 7. Mobile card entrance is owned ENTIRELY by private-seller-mobile-redesign.css
          (the `psmrFadeUp` keyframe). The previous duplicate block here set a
          SECOND, competing `sjMobileCardFadeIn` with a different delay set —
          because the two files split `animation-name`/`animation-delay` across
          `!important` longhands, the browser composited a half-from-each
          animation that left cards settling at the wrong offset and reading as
          a horizontal "jump/jitter" every time the List tab was activated.
          Block intentionally removed so a SINGLE deterministic entrance runs.
          Desktop fall-in (sjCardFallIn) is untouched — it lives outside this
          mobile media query. */

    /* 8. Hide floating FABs on mobile */
    .floating-engagement {
        display: none !important;
    }
}

/* Mobile card entrance — simple fade, no 3D, no off-screen start */
@keyframes sjMobileCardFadeIn {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   EXTRA SMALL (≤ 380px) — tighten spacing
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .sj-theater-hero {
        padding: 10px 12px 8px !important;
    }

    .sj-theater-heading {
        font-size: clamp(0.95rem, 5vw, 1.15rem) !important;
    }

    .sj-theater-cards,
    .sj-premium-cards {
        gap: 8px !important;
        padding: 0 8px 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP (≥ 769px) — explicit restores
   Undo any mobile rules that weren't properly scoped and
   ensure desktop layout is exactly as the original intended.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

    /* Restore theater to original fixed-height behaviour */
    .sj-step0-inner.sj-step0-theater,
    .sj-step0-theater {
        height: 100% !important;
        min-height: unset !important;
        overflow: hidden !important;
        justify-content: flex-start !important;
    }

    /* Restore sj-step scroll to original (thin branded scrollbar visible) */
    .sj-step {
        overflow-y: auto !important;
        scrollbar-width: thin !important;
    }

    /* Restore hero padding to original */
    .sj-theater-hero {
        overflow: hidden !important;
        padding: 14px 16px 10px !important;
    }

    /* Restore heading — single line on desktop */
    .sj-theater-heading {
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .sj-heading-main-row {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .sj-scramble-text {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Restore cards container — fills available height on desktop */
    .sj-theater-cards,
    .sj-premium-cards {
        flex-shrink: unset !important;
        overflow-y: visible !important;
        padding-bottom: 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   ANIMATION TWEAKS — border line + hover shimmer (all sizes)
   ───────────────────────────────────────────────────────────── */

/* Perimeter border-travel line: slower */
.sj-card-border-rect {
    animation-duration: 22s !important;
    animation-timing-function: linear !important;
}

/* end sell-journey mobile fix */


/* ============================================================
   MOBILE FIX v3 — Step 0 Theater Cards
   ─────────────────────────────────────────────────────────────
   Audited root causes:

   1. BLACK CARD FLASH
      backdrop-filter:blur on cards starting at opacity:0 during
      entrance animation composites dark — browser blurs nothing.
      The desktop ::before white layer is inside min-width:769px
      so mobile has no white base. Fix: strip backdrop-filter on
      mobile, add explicit white bg to keyframe 0% via a wrapper
      class, and use animation-fill-mode:both with bg set upfront.

   2. TEXT TRUNCATION — TITLE
      The gradient title uses -webkit-text-fill-color:transparent
      + background-clip:text. Any overflow:hidden on the element
      itself or an ancestor clips the painted gradient pixels,
      making the text appear invisible or cut at the column edge.
      Fix: keep overflow:visible on the title; contain width via
      min-width:0 + word-break:break-word on the grid cell item.

   3. TEXT TRUNCATION — DESC
      Two global (unscoped) rules at lines ~3906 and ~3961 set
      display:block !important and -webkit-line-clamp:unset !
      important on .sj-tc-desc. Our block comes later in cascade
      so !important wins — but the display:-webkit-box must come
      AFTER both globals. Confirmed: our block at line 7000+
      does come last. The real problem was overflow:hidden on
      the GRID COLUMN itself (the 1fr column has no min-width:0
      set on the column track, only on grid items).
      Fix: min-width:0 explicitly on every text-side grid item,
      proper display:-webkit-box with line-clamp on desc.

   4. SCRAMBLE ON MOBILE
      JS scramble loop runs regardless of screen size, causing
      text to rattle. Fix: media-query guard in JS (see .js file).
      CSS: ensure the scramble text is always visible as static
      on mobile even if JS hasn't resolved yet.

   5. CARD BORDER + DIVIDER + ICON SIZE
      Preserved from v2: 1px solid #1A1D20 border, 2px colored
      divider between icon panel and text, SVG icons 20% larger.

   All rules scoped to max-width:768px. Desktop untouched.
   ============================================================ */

@media (max-width: 768px) {

    /* ─────────────────────────────────────────────────────────
       1. BLACK CARD FLASH — strip backdrop-filter, set solid bg
       ───────────────────────────────────────────────────────── */
    .sj-theater-cards .sj-theater-card,
    .sj-premium-cards .sj-theater-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Solid white from the very first frame so blur has something to paint */
        background: #ffffff !important;
    }

    /* Override the entrance animation to a clean no-filter fade.
       fill-mode:both means the from{} state applies before delay fires,
       so opacity:0 + white bg = white card fading in, never dark. */
    .sj-theater-cards .sj-theater-card,
    .sj-premium-cards .sj-theater-card {
        animation-name: sjMobileCardFadeIn !important;
        animation-duration: 0.4s !important;
        animation-timing-function: ease-out !important;
        animation-fill-mode: both !important;
    }

        .sj-theater-cards .sj-theater-card:nth-child(1),
        .sj-premium-cards .sj-theater-card:nth-child(1) {
            animation-delay: 0.05s !important;
        }

        .sj-theater-cards .sj-theater-card:nth-child(2),
        .sj-premium-cards .sj-theater-card:nth-child(2) {
            animation-delay: 0.15s !important;
        }

        .sj-theater-cards .sj-theater-card:nth-child(3),
        .sj-premium-cards .sj-theater-card:nth-child(3) {
            animation-delay: 0.25s !important;
        }

    /* ─────────────────────────────────────────────────────────
       2. CARD OUTER BORDER — 1px solid dark
       ───────────────────────────────────────────────────────── */
    .sj-theater-cards .sj-theater-card,
    .sj-premium-cards .sj-theater-card {
        border: 1px solid #1A1D20 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        height: auto !important;
        min-height: 0 !important;
        box-shadow: 0 2px 8px rgba(15,23,42,0.06), 0 6px 20px rgba(15,23,42,0.08) !important;
    }

        .sj-theater-cards .sj-theater-card:hover,
        .sj-premium-cards .sj-theater-card:hover {
            border: 1px solid #1A1D20 !important;
            background: #ffffff !important;
        }

        /* ─────────────────────────────────────────────────────────
       3. INNER GRID — let rows grow with content
       ───────────────────────────────────────────────────────── */
        .sj-theater-cards .sj-theater-card .sj-tc-inner,
        .sj-premium-cards .sj-theater-card .sj-tc-inner {
            /* Rows auto-size: label | title | desc | cta each take natural height */
            grid-template-rows: auto auto auto auto !important;
            min-height: 0 !important;
            height: auto !important;
            /* icon panel stretches to match tallest column (the text side) */
            align-items: stretch !important;
            overflow: visible !important;
            padding: 0 !important;
        }

        /* Icon panel: no fixed min-height, stretches via grid */
        .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap {
            min-height: 0 !important;
            align-self: stretch !important;
            /* Breathing room so SVG doesn't touch panel edges */
            padding: 18px 12px !important;
        }

        /* ─────────────────────────────────────────────────────────
       4. TEXT COLUMN — min-width:0 guard on every grid item
          This is the critical fix: CSS grid items don't shrink
          below intrinsic width without min-width:0 explicitly
          set on each item, not just the column track definition.
       ───────────────────────────────────────────────────────── */
        .sj-theater-cards .sj-theater-card .sj-tc-label,
        .sj-theater-cards .sj-theater-card .sj-tc-title,
        .sj-theater-cards .sj-theater-card .sj-tc-desc,
        .sj-theater-cards .sj-theater-card .sj-tc-tags,
        .sj-theater-cards .sj-theater-card .sj-tc-cta,
        .sj-premium-cards .sj-theater-card .sj-tc-label,
        .sj-premium-cards .sj-theater-card .sj-tc-title,
        .sj-premium-cards .sj-theater-card .sj-tc-desc,
        .sj-premium-cards .sj-theater-card .sj-tc-tags,
        .sj-premium-cards .sj-theater-card .sj-tc-cta {
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        /* ─────────────────────────────────────────────────────────
       5. TITLE — gradient-safe: overflow MUST stay visible
          The gradient is painted via background-clip:text.
          overflow:hidden clips the paint, making text invisible.
          We contain width via word-break + the min-width:0 above.
       ───────────────────────────────────────────────────────── */
        .sj-theater-cards .sj-theater-card .sj-tc-title,
        .sj-premium-cards .sj-theater-card .sj-tc-title {
            overflow: visible !important; /* NEVER clip gradient text */
            white-space: normal !important; /* allow wrap */
            word-break: break-word !important;
            hyphens: auto !important;
            font-size: clamp(0.92rem, 3.8vw, 1.1rem) !important;
            line-height: 1.25 !important;
            /* Margins already set by the v4 collage block (18px L/R) */
        }

        /* ─────────────────────────────────────────────────────────
       6. DESCRIPTION — correct display for line-clamp
          display:-webkit-box is REQUIRED for -webkit-line-clamp.
          display:block breaks it regardless of the clamp value.
          This block comes last in the file so it wins cascade.
       ───────────────────────────────────────────────────────── */
        .sj-theater-cards .sj-theater-card .sj-tc-desc,
        .sj-premium-cards .sj-theater-card .sj-tc-desc {
            display: -webkit-box !important;
            -webkit-box-orient: vertical !important;
            -webkit-line-clamp: 8 !important; /* show 4 lines — enough context */
            overflow: hidden !important;
            overflow-y: hidden !important;
            /* Layout */
            flex: none !important;
            min-height: 0 !important;
            /* Typography */
            font-size: clamp(0.70rem, 2.8vw, 0.78rem) !important;
            line-height: 1.52 !important;
            word-break: break-word !important;
            hyphens: auto !important;
            text-align: left !important;
            color: #64748B !important;
            /* No scrollbar on mobile — clamp handles overflow */
            scrollbar-width: none !important;
        }

        /* ─────────────────────────────────────────────────────────
       7. CTA — keep contained, correct color regardless of clamp
       ───────────────────────────────────────────────────────── */
        .sj-theater-cards .sj-theater-card .sj-tc-cta,
        .sj-premium-cards .sj-theater-card .sj-tc-cta {
            max-width: calc(100% - 36px) !important;
            overflow: hidden !important;
            white-space: nowrap !important;
            box-sizing: border-box !important;
        }

        /* ─────────────────────────────────────────────────────────
       8. ICON / TEXT DIVIDER — 2px solid per-card darkest color
          Odd cards: icon LEFT  → border-right is the divider
          Even cards: icon RIGHT → border-left is the divider
       ───────────────────────────────────────────────────────── */

        /* Reset all borders on icon panel first */
        .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap {
            border: none !important;
        }

        /* Odd (1st, 3rd) — icon left → right edge divides */
        .sj-theater-cards .sj-theater-card:nth-child(odd) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card:nth-child(odd) .sj-tc-icon-wrap {
            border-right: 2px solid transparent !important;
        }

        /* Even (2nd) — icon right → left edge divides */
        .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-icon-wrap {
            border-left: 2px solid transparent !important;
        }

        /* Private — darkest orange */
        .sj-theater-cards .sj-theater-card.sj-tc--private:nth-child(odd) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--private:nth-child(odd) .sj-tc-icon-wrap {
            border-right-color: #D96B10 !important;
        }

        .sj-theater-cards .sj-theater-card.sj-tc--private:nth-child(even) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--private:nth-child(even) .sj-tc-icon-wrap {
            border-left-color: #D96B10 !important;
        }

        /* Agent — darkest blue */
        .sj-theater-cards .sj-theater-card.sj-tc--agent:nth-child(odd) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--agent:nth-child(odd) .sj-tc-icon-wrap {
            border-right-color: #2b95ce !important;
        }

        .sj-theater-cards .sj-theater-card.sj-tc--agent:nth-child(even) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--agent:nth-child(even) .sj-tc-icon-wrap {
            border-left-color: #2b95ce !important;
        }

        /* Agency — darkest teal */
        .sj-theater-cards .sj-theater-card.sj-tc--agency:nth-child(odd) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--agency:nth-child(odd) .sj-tc-icon-wrap {
            border-right-color: #08A09D !important;
        }

        .sj-theater-cards .sj-theater-card.sj-tc--agency:nth-child(even) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--agency:nth-child(even) .sj-tc-icon-wrap {
            border-left-color: #08A09D !important;
        }

        /* ─────────────────────────────────────────────────────────
       9. SVG ICONS — 20% larger than original 68px baseline
       ───────────────────────────────────────────────────────── */
        .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap svg,
        .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap svg {
            /* clamp: min=60px, preferred=55% of panel width, max=82px (68×1.2) */
            width: clamp(60px, 55%, 82px) !important;
            height: clamp(60px, 55%, 82px) !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }

    /* ─────────────────────────────────────────────────────────
       10. SCRAMBLE HEADING — static on mobile, no rattle
           JS disables the loop on mobile (see sell-journey.js).
           CSS ensures text is always fully visible as static.
       ───────────────────────────────────────────────────────── */
    #sjScrambleHeading {
        opacity: 1 !important;
        animation: none !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    /* The scramble chars should not flash on mobile */
    .scramble-char {
        animation: none !important;
        color: inherit !important;
    }

    /* Heading row: allow wrapping on narrow screens */
    .sj-heading-main-row {
        flex-wrap: wrap !important;
        white-space: normal !important;
        overflow: visible !important;
        gap: 6px !important;
    }

    .sj-scramble-text {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* ─────────────────────────────────────────────────────────
       11. KILL ALL DESKTOP-ONLY EFFECTS on mobile
       ───────────────────────────────────────────────────────── */
    .sj-theater-cards .sj-theater-card .sj-tc-glass,
    .sj-theater-cards .sj-theater-card .sj-tc-mouse-glow,
    .sj-theater-cards .sj-theater-card .sj-tc-border-shimmer,
    .sj-premium-cards .sj-theater-card .sj-tc-glass,
    .sj-premium-cards .sj-theater-card .sj-tc-mouse-glow,
    .sj-premium-cards .sj-theater-card .sj-tc-border-shimmer {
        display: none !important;
    }
}

/* ── Keyframe: simple white fade-in — no blur, no 3D, no off-screen start ── */
/* Defined outside media query so it's always available for the animation-name ref */
@keyframes sjMobileCardFadeIn {
    0% {
        opacity: 0;
        transform: translateY(12px);
        background: #ffffff;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        background: #ffffff;
    }
}

/* ── Very small screens ≤ 400px ── */
@media (max-width: 400px) {

    .sj-theater-cards .sj-theater-card,
    .sj-premium-cards .sj-theater-card {
        border: 1px solid #1A1D20 !important;
        border-radius: 16px !important;
    }

        /* Smaller SVG but still 20% up from the 54px original = 65px */
        .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap svg,
        .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap svg {
            width: clamp(52px, 50%, 65px) !important;
            height: clamp(52px, 50%, 65px) !important;
        }

        /* Tighter text margins */
        .sj-theater-cards .sj-theater-card .sj-tc-label,
        .sj-premium-cards .sj-theater-card .sj-tc-label {
            margin: 12px 14px 0 14px !important;
            font-size: 0.58rem !important;
        }

        .sj-theater-cards .sj-theater-card .sj-tc-title,
        .sj-premium-cards .sj-theater-card .sj-tc-title {
            margin: 4px 14px 0 14px !important;
            font-size: 0.88rem !important;
        }

        .sj-theater-cards .sj-theater-card .sj-tc-desc,
        .sj-premium-cards .sj-theater-card .sj-tc-desc {
            margin: 5px 14px 0 14px !important;
            font-size: 0.68rem !important;
        }

        .sj-theater-cards .sj-theater-card .sj-tc-cta,
        .sj-premium-cards .sj-theater-card .sj-tc-cta {
            margin: 8px 14px 14px 14px !important;
            max-width: calc(100% - 28px) !important;
            padding: 8px 12px !important;
            font-size: 0.74rem !important;
        }

        /* Dividers at small screens */
        .sj-theater-cards .sj-theater-card.sj-tc--private:nth-child(odd) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--private:nth-child(odd) .sj-tc-icon-wrap {
            border-right: 2px solid #D96B10 !important;
        }

        .sj-theater-cards .sj-theater-card.sj-tc--private:nth-child(even) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--private:nth-child(even) .sj-tc-icon-wrap {
            border-left: 2px solid #D96B10 !important;
        }

        .sj-theater-cards .sj-theater-card.sj-tc--agent:nth-child(odd) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--agent:nth-child(odd) .sj-tc-icon-wrap {
            border-right: 2px solid #2b95ce !important;
        }

        .sj-theater-cards .sj-theater-card.sj-tc--agent:nth-child(even) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--agent:nth-child(even) .sj-tc-icon-wrap {
            border-left: 2px solid #2b95ce !important;
        }

        .sj-theater-cards .sj-theater-card.sj-tc--agency:nth-child(odd) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--agency:nth-child(odd) .sj-tc-icon-wrap {
            border-right: 2px solid #08A09D !important;
        }

        .sj-theater-cards .sj-theater-card.sj-tc--agency:nth-child(even) .sj-tc-icon-wrap,
        .sj-premium-cards .sj-theater-card.sj-tc--agency:nth-child(even) .sj-tc-icon-wrap {
            border-left: 2px solid #08A09D !important;
        }
}

/* end mobile fix v3 */

/* ============================================================
   MOBILE CARD FIX v4 — TEXT OVERFLOW + ICON BALANCE
   ------------------------------------------------------------
   Root cause of truncation: the .sj-theater-card has
   overflow:hidden (correct — clips rounded corners), BUT the
   text column items (label, title, desc, cta) have NO
   min-width:0 set on them as grid ITEMS (only on the track).
   CSS grid items by default have min-width = max-content,
   so long words blow past the 1fr column boundary and get
   hard-clipped by the card's overflow:hidden.

   Fix: Set min-width:0 + overflow:hidden on every text item
   inside the grid, and reduce the fixed icon column so the
   text side gets proportionally more horizontal space on
   narrow phones (<600px). Applied LAST in this file so
   !important rules here override all earlier blocks.
   ============================================================ */

@media (max-width: 768px) {

    /* ── The inner grid must clip its own children ── */
    .sj-theater-cards .sj-theater-card .sj-tc-inner,
    .sj-premium-cards .sj-theater-card .sj-tc-inner {
        overflow: hidden !important;
    }

    /* ── Every text-column grid item: honour the 1fr column width ── */
    .sj-theater-cards .sj-theater-card .sj-tc-label,
    .sj-theater-cards .sj-theater-card .sj-tc-title,
    .sj-theater-cards .sj-theater-card .sj-tc-desc,
    .sj-theater-cards .sj-theater-card .sj-tc-cta,
    .sj-premium-cards .sj-theater-card .sj-tc-label,
    .sj-premium-cards .sj-theater-card .sj-tc-title,
    .sj-premium-cards .sj-theater-card .sj-tc-desc,
    .sj-premium-cards .sj-theater-card .sj-tc-cta {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* ── Title: allow wrapping, never overflow ── */
    .sj-theater-cards .sj-theater-card .sj-tc-title,
    .sj-premium-cards .sj-theater-card .sj-tc-title {
        overflow: hidden !important; /* clip, don't bleed */
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    /* ── CTA text: allow wrapping if too wide ── */
    .sj-theater-cards .sj-theater-card .sj-tc-cta,
    .sj-premium-cards .sj-theater-card .sj-tc-cta {
        white-space: normal !important;
        word-break: break-word !important;
        max-width: none !important; /* remove the calc() constraint */
    }
}

/* ── Narrower phones: shrink icon panel, give text more room ── */
@media (max-width: 520px) {
    .sj-theater-cards .sj-theater-card .sj-tc-inner,
    .sj-premium-cards .sj-theater-card .sj-tc-inner {
        grid-template-columns: 96px 1fr !important;
        min-height: 140px !important;
    }

    .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
    .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
        grid-template-columns: 1fr 96px !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap,
    .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap {
        padding: 14px 8px !important;
        min-height: 140px !important;
    }

        .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap svg,
        .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap svg {
            width: 50px !important;
            height: 50px !important;
        }

    /* Label: tighter side margins */
    .sj-theater-cards .sj-theater-card .sj-tc-label,
    .sj-premium-cards .sj-theater-card .sj-tc-label {
        margin: 12px 12px 0 12px !important;
        font-size: 0.55rem !important;
        letter-spacing: 0.12em !important;
    }

    /* Title: smaller on narrow screen */
    .sj-theater-cards .sj-theater-card .sj-tc-title,
    .sj-premium-cards .sj-theater-card .sj-tc-title {
        margin: 3px 12px 0 12px !important;
        font-size: clamp(0.82rem, 4vw, 0.98rem) !important;
        line-height: 1.22 !important;
    }

    /* Desc: 3 lines on very narrow, tighter margins */
    .sj-theater-cards .sj-theater-card .sj-tc-desc,
    .sj-premium-cards .sj-theater-card .sj-tc-desc {
        margin: 4px 12px 0 12px !important;
        font-size: 0.69rem !important;
        line-height: 1.44 !important;
        -webkit-line-clamp: 8 !important;
    }

    /* CTA: tighter */
    .sj-theater-cards .sj-theater-card .sj-tc-cta,
    .sj-premium-cards .sj-theater-card .sj-tc-cta {
        margin: 8px 12px 12px 12px !important;
        padding: 7px 12px !important;
        font-size: 0.74rem !important;
        gap: 5px !important;
    }
}

/* ── Very small phones (≤380px) ── */
@media (max-width: 380px) {
    .sj-theater-cards .sj-theater-card .sj-tc-inner,
    .sj-premium-cards .sj-theater-card .sj-tc-inner {
        grid-template-columns: 82px 1fr !important;
        min-height: 130px !important;
    }

    .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
    .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
        grid-template-columns: 1fr 82px !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap,
    .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap {
        padding: 12px 6px !important;
        min-height: 130px !important;
    }

        .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap svg,
        .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap svg {
            width: 42px !important;
            height: 42px !important;
        }

    .sj-theater-cards .sj-theater-card .sj-tc-label,
    .sj-premium-cards .sj-theater-card .sj-tc-label {
        margin: 10px 10px 0 10px !important;
        font-size: 0.5rem !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-title,
    .sj-premium-cards .sj-theater-card .sj-tc-title {
        margin: 2px 10px 0 10px !important;
        font-size: 0.82rem !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-desc,
    .sj-premium-cards .sj-theater-card .sj-tc-desc {
        margin: 3px 10px 0 10px !important;
        font-size: 0.66rem !important;
        -webkit-line-clamp: 8 !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-cta,
    .sj-premium-cards .sj-theater-card .sj-tc-cta {
        margin: 6px 10px 10px 10px !important;
        padding: 7px 10px !important;
        font-size: 0.70rem !important;
    }
}
/* end mobile card fix v4 */

/* ════════════════════════════════════════════════════════════
   v5 FIX — Seller-journey card text overflowing card edge
   ────────────────────────────────────────────────────────────
   Problem: on mobile (≤768px) the cards use a 2-col grid layout
   inside .sj-tc-inner — icon panel + text panel. The text track
   was declared as `1fr`, which in CSS grid has an implicit
   minimum equal to the max-content of its items. The desc
   paragraph's max-content is the whole one-line width (~700px+),
   so the 1fr track expanded past the card's right edge and the
   text bled outside the card despite the card's overflow:hidden.

   Earlier `min-width: 0` patches on the text items helped some
   cases but were not bulletproof — the `display: -webkit-box`
   used for line-clamp interacts oddly with grid minimum sizing,
   and the inner itself was set to `overflow: visible` which let
   any residual bleed escape the card.

   Fix (three layers of defense, applied at ≤768px so desktop is
   completely untouched):

   1. Switch every `grid-template-columns: <fixed> 1fr` declaration
      to `<fixed> minmax(0, 1fr)`. minmax(0, 1fr) is the canonical
      CSS-grid solution for "1fr track overflowing its container"
      — it tells the grid the track can shrink all the way to 0,
      ignoring its items' max-content size.

   2. Force `.sj-tc-inner` to `overflow: hidden` so even if a
      child somehow exceeds its track, the card boundary clips it.

   3. Force `width: 100%` + `box-sizing: border-box` on every text
      grid item so they cannot compute wider than their track.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* ── 1. minmax(0, 1fr) on every inner grid template ────── */
    .sj-theater-cards .sj-theater-card .sj-tc-inner,
    .sj-premium-cards .sj-theater-card .sj-tc-inner {
        grid-template-columns: 140px minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
    .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
        grid-template-columns: minmax(0, 1fr) 140px !important;
    }
}

/* Match the existing icon-column step-downs so the 96/82/112px
   ladders are preserved, just with minmax(0, 1fr) on the text side. */
@media (min-width: 600px) {
    .sj-theater-cards .sj-theater-card .sj-tc-inner,
    .sj-premium-cards .sj-theater-card .sj-tc-inner {
        grid-template-columns: 160px minmax(0, 1fr) !important;
    }

    .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
    .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
        grid-template-columns: minmax(0, 1fr) 160px !important;
    }
}

@media (max-width: 520px) {
    .sj-theater-cards .sj-theater-card .sj-tc-inner,
    .sj-premium-cards .sj-theater-card .sj-tc-inner {
        grid-template-columns: 96px minmax(0, 1fr) !important;
    }

    .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
    .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
        grid-template-columns: minmax(0, 1fr) 96px !important;
    }
}

@media (max-width: 400px) {
    .sj-theater-cards .sj-theater-card .sj-tc-inner,
    .sj-premium-cards .sj-theater-card .sj-tc-inner {
        grid-template-columns: 112px minmax(0, 1fr) !important;
    }

    .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
    .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
        grid-template-columns: minmax(0, 1fr) 112px !important;
    }
}

@media (max-width: 380px) {
    .sj-theater-cards .sj-theater-card .sj-tc-inner,
    .sj-premium-cards .sj-theater-card .sj-tc-inner {
        grid-template-columns: 82px minmax(0, 1fr) !important;
    }

    .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
    .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
        grid-template-columns: minmax(0, 1fr) 82px !important;
    }
}

/* ── 3. Belt-and-suspenders: width:100% on every text grid item ─ */
@media (max-width: 768px) {
    .sj-theater-cards .sj-theater-card .sj-tc-label,
    .sj-theater-cards .sj-theater-card .sj-tc-title,
    .sj-theater-cards .sj-theater-card .sj-tc-desc,
    .sj-theater-cards .sj-theater-card .sj-tc-tags,
    .sj-theater-cards .sj-theater-card .sj-tc-cta,
    .sj-premium-cards .sj-theater-card .sj-tc-label,
    .sj-premium-cards .sj-theater-card .sj-tc-title,
    .sj-premium-cards .sj-theater-card .sj-tc-desc,
    .sj-premium-cards .sj-theater-card .sj-tc-tags,
    .sj-premium-cards .sj-theater-card .sj-tc-cta {
        width: auto !important; /* shrink to the minmax(0,1fr) track */
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important; /* never let a long token overflow */
        word-break: break-word !important;
    }

    /* Title specifically — it tends to be the worst offender since
       gradient-clip text fights overflow rules. Force it. */
    .sj-theater-cards .sj-theater-card .sj-tc-title,
    .sj-premium-cards .sj-theater-card .sj-tc-title {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        hyphens: auto !important;
        white-space: normal !important;
    }
}
/* end v5 seller-journey card overflow fix */