/* ============================================================================
   LIST SCENE — list-scene.css
   ----------------------------------------------------------------------------
   Self-contained background experience for the LIST tab (#tab-sell), mirroring
   the proven Stay-tab pattern:

     • A decorative animated SVG ".list-scene" (sun top-right, slow-drifting
       clouds, lazily wheeling birds, a centred thatched hut, gently swaying
       grass) covers the WHOLE #leftPanel — exactly like ".bg-video" and
       ".stay-scene" do for the other tabs.

     • The shared background <video class="bg-video"> is suppressed on List
       (it only belongs on Buy / Rent). Stay already suppresses it via
       ".stay-mode"; List does the same via ".list-mode".

     • The List wrapper (.sj-wrapper) + its STEP-0 theatre become a frosted,
       ~82%-opaque white pane so the scene reads softly behind them. The
       multi-step FORM panels (steps 1+) intentionally stay solid for input
       legibility.

   ACTIVATION CONTRACT (kept in lock-step by tabs.js):
       #leftPanel gains ".list-mode" while the List pill is active, and loses
       it on every other tab. The ".list-scene" element is moved to be a DIRECT
       child of #leftPanel at parse time (see the relocation script in
       Index.cshtml) so position:absolute; inset:0 fills the true panel edges —
       identical to how _StayTab relocates ".stay-scene".

   PERFORMANCE / A11Y:
       • Pure CSS transforms on composited layers (no layout thrash).
       • Honours prefers-reduced-motion (freezes all motion).
       • Honours prefers-reduced-data / Save-Data (the scene is lightweight
         inline SVG, but we still calm it down).
       • Decorative only: aria-hidden, pointer-events:none, never focusable.

   NAMESPACE: every selector is prefixed .list-scene / .ls-* / .list-mode and
   scoped under #leftPanel where it touches shared chrome, so nothing here can
   bleed into Buy / Rent / Stay / Tenant+.
   ========================================================================== */

/* ── SCENE CONTAINER ──────────────────────────────────────────────────────
   Hidden by default; revealed only when #leftPanel.list-mode is active. Lives
   as a direct child of #leftPanel (moved there by JS), same level as .bg-video,
   so inset:0 covers the panel edge-to-edge with no gutter. z-index:0 keeps it
   behind all tab content (nav pills at z-index:2, .search-wrapper at z-2). */
.list-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: none; /* shown only in list-mode */
    overflow: hidden;
}

.list-scene-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── SUN — slow "breathing" scale, anchored top-right ─────────────────────
   transform-box:fill-box + center origin so the scale pivots on the sun
   itself, not the SVG viewBox origin. */
.ls-sun {
    transform-box: fill-box;
    transform-origin: center;
    animation: lsSunBreathe 9s ease-in-out infinite;
    will-change: transform;
}

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

    50% {
        transform: scale(1.04);
    }
}

/* ── CLOUDS — three banks drifting L→R at very different (slow) speeds ─────
   The clouds now CLUSTER near the sun (top-right) and drift only gently in
   place — echoing the Ikhayalami logo, where the cloud sits beside the sun.
   Full-width traversal was distracting and cut across the tab content, so each
   cloud sways within a small local range (≈40–70px) around its sun-side anchor.
   Slow durations keep it calm. */
.ls-cloud {
    will-change: transform;
}

.ls-cloud--a {
    animation: lsDriftA 26s ease-in-out infinite;
}

.ls-cloud--b {
    animation: lsDriftB 32s ease-in-out infinite;
}

.ls-cloud--c {
    animation: lsDriftC 38s ease-in-out infinite;
}

@keyframes lsDriftA {
    0%, 100% {
        transform: translate(1000px, 150px);
    }

    50% {
        transform: translate(1052px, 142px);
    }
}

@keyframes lsDriftB {
    0%, 100% {
        transform: translate(1120px, 235px);
    }

    50% {
        transform: translate(1062px, 243px);
    }
}

@keyframes lsDriftC {
    0%, 100% {
        transform: translate(940px, 95px);
    }

    50% {
        transform: translate(986px, 88px);
    }
}

/* ── BIRDS — slow, lazy wheeling near the SUN's height (top-right) ─────────
   Positioned to echo the Ikhayalami logo, where the gulls drift beside the
   sun. The sun core sits at ~(1180, 225) in the 1440×900 viewBox, so the birds
   wheel in the y≈150–270 band and lean toward the right/centre of the sky.
   Long ping-pong paths read as gentle circling, not a fast fly-by; staggered
   durations so they never lock-step. */
.ls-bird {
    will-change: transform;
}

.ls-bird--1 {
    animation: lsBird1 64s ease-in-out infinite;
}

.ls-bird--2 {
    animation: lsBird2 82s ease-in-out infinite;
}

.ls-bird--3 {
    animation: lsBird3 98s ease-in-out infinite;
}

@keyframes lsBird1 {
    0% {
        transform: translate(820px, 220px);
    }

    50% {
        transform: translate(1020px, 170px);
    }

    100% {
        transform: translate(820px, 220px);
    }
}

@keyframes lsBird2 {
    0% {
        transform: translate(950px, 160px);
    }

    50% {
        transform: translate(760px, 250px);
    }

    100% {
        transform: translate(950px, 160px);
    }
}

@keyframes lsBird3 {
    0% {
        transform: translate(700px, 260px);
    }

    50% {
        transform: translate(900px, 200px);
    }

    100% {
        transform: translate(700px, 260px);
    }
}

/* ── GRASS BLADES — gentle sway, pivoting at the base of each blade ───────── */
.ls-blade {
    transform-box: fill-box;
    transform-origin: bottom center;
    will-change: transform;
}

.ls-blade--1 {
    animation: lsSway1 6s ease-in-out infinite;
}

.ls-blade--2 {
    animation: lsSway2 7.5s ease-in-out infinite;
}

.ls-blade--3 {
    animation: lsSway3 6.8s ease-in-out infinite;
}

@keyframes lsSway1 {
    0%, 100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

@keyframes lsSway2 {
    0%, 100% {
        transform: rotate(2.5deg);
    }

    50% {
        transform: rotate(-2.5deg);
    }
}

@keyframes lsSway3 {
    0%, 100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }
}

/* ════════════════════════════════════════════════════════════════════════
   LIST MODE — panel takeover (mirrors #leftPanel.stay-mode)
   --------------------------------------------------------------------------
   When the List tab is active, #leftPanel gains .list-mode. We:
     1. Reveal the scene.
     2. Hide every layer bg-video.js manages (video, the solid dark
        .bg-video-fallback, poster, .bg-shape-strip). This is what removes the
        background video from List.
     3. Kill the right-edge fade overlay so the scene reaches the panel edge.
     4. Make the chain of wrappers transparent so the scene shows through to
        the frosted .sj-wrapper.
   ════════════════════════════════════════════════════════════════════════ */

/* 1 — reveal the scene */
#leftPanel.list-mode .list-scene {
    display: block !important;
}

/* 2 — remove the shared background video + all its managed layers on List */
#leftPanel.list-mode .bg-video,
#leftPanel.list-mode .bg-video-fallback,
#leftPanel.list-mode .bg-shape-strip,
#leftPanel.list-mode [class*="bg-video"] {
    display: none !important;
}

/* 3 — kill the right-edge fade overlay on the search section */
#leftPanel.list-mode.search-section::after,
#leftPanel.list-mode .search-section::after {
    display: none !important;
}

/* Give #tab-sell a positioning context (parity with stay-mode) and ensure the
   wrapper chain doesn't clip the full-bleed scene horizontally. */
#leftPanel.list-mode #tab-sell {
    position: relative !important;
    background: transparent !important;
}

/* 4 — let the scene show through the wrapper chain. .sj-wrapper itself is
   re-painted as frosted glass just below; here we only neutralise the
   intermediate opaque surfaces that would otherwise block it. */
#leftPanel.list-mode .search-wrapper,
#leftPanel.list-mode .dynamic-tabs-container {
    background: transparent !important;
}

/* ── TRANSPARENT WRAPPER (Step 0 / theatre) ──────────────────────────────
   The List wrapper is normally solid #ffffff. On list-mode we make it genuinely
   transparent so the scene reads clearly through it — a single, even, very-light
   frosting (no gradient, no extra header layer).

   CRITICAL CASCADE NOTE: sell-journey.css sets backdrop-filter on the cards with
   blur(24px) !important. A heavy blur smears the scene into a uniform milky wash
   so the pane LOOKS opaque even at low alpha — that was the "not even a bit
   transparent" bug. Every backdrop-filter below therefore uses !important with a
   SMALL blur, so it both wins the cascade and actually lets the scene show. */
#leftPanel.list-mode .sj-wrapper {
    background: rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: saturate(108%) blur(2px) !important;
    backdrop-filter: saturate(108%) blur(2px) !important;
    /* Whisper-soft lift; no heavy card shadow so the pane melts into the scene. */
    box-shadow: 0 8px 26px rgba(120, 80, 30, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Keep the theatre + its inner column fully transparent so the wrapper is the
   single (very light) translucent layer and the scene reads evenly through it. */
#leftPanel.list-mode .sj-step0-theater,
#leftPanel.list-mode .sj-step0-inner {
    background: transparent !important;
}

/* ── THE REAL CULPRIT: the Step-0 .sj-step panel ─────────────────────────
   The landing role-picker lives in <div class="sj-step active" id="sjStep0">.
   sell-journey.css sets `.sj-step { background: var(--sj-surface) }` = solid
   #ffffff — that opaque panel was painting OVER the scene on the landing, which
   is why the wrapper looked white here but transparent on every other scene.
   (On steps 1..4 that white IS the intended solid form surface — those stay
   untouched.) We make ONLY the Step-0 theatre step transparent. */
#leftPanel.list-mode #sjStep0,
#leftPanel.list-mode .sj-step.sj-step0-theater,
#leftPanel.list-mode .sj-step:has(.sj-step0-theater) {
    background: transparent !important;
}

/* The heading block ("AI Has Entered the Property Market." + sub-lines) needs
   NO backing layer: the site bg is white and the wrapper frosting + the type's
   own weight/colour keep it perfectly readable. Explicitly transparent so no
   stray surface from sell-journey.css reintroduces a plate. */
#leftPanel.list-mode .sj-theater-hero {
    background: transparent !important;
}

/* ── TRANSLUCENT JOURNEY CARDS ────────────────────────────────────────────
   The three path cards stay readable surfaces — but clearly translucent now.
   sell-journey.css forces background:0.65 + backdrop blur(24px) with !important;
   we override BOTH: a moderate alpha plus a LIGHT blur (5px) so the scene tints
   through while titles, body copy and CTAs stay crisp. This is the deliberate
   contrast: the wrapper nearly vanishes, the cards remain legible cards.
   Hover/selected states in sell-journey.css apply on top. */
#leftPanel.list-mode .sj-theater-card {
    background: rgba(255, 255, 255, 0.32) !important;
    -webkit-backdrop-filter: saturate(120%) blur(7px) !important;
    backdrop-filter: saturate(120%) blur(7px) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 14px 34px rgba(120, 80, 30, 0.12) !important;
}

/* The inner top-half highlight gradient (.sj-tc-glass) defaults to a fairly
   strong white wash that can make the card read more opaque than its actual
   background alpha. Soften it so the card's transparency is honest. */
#leftPanel.list-mode .sj-tc-glass {
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 60%, transparent 100%) !important;
}

/* The kinetic timeline header (revealed on steps 1+) sits flush on the wrapper.
   Keep it lightly translucent so there's no opaque white strip breaking the
   glass once the user advances past Step 0. */
#leftPanel.list-mode .sj-kinetic-timeline {
    background: rgba(255, 255, 255, 0.45) !important;
}

/* ── PRIVATE-SELLER FOOTER NAV — transparent row, translucent buttons ─────
   The seller-journey scenes (Change Role / Back · Continue) carry a footer
   nav. `.ps-nav-dna` paints a solid white fade bar; `.ps-btn-next` is a solid
   dark pill. On the List tab we want the ROW transparent so the scene shows
   under it, and the BUTTONS tinted-but-translucent (not solid). All scoped to
   #leftPanel.list-mode so the seller module is untouched everywhere else. */

/* Row: kill the white/fade bar so the scene reads through the footer. */
#leftPanel.list-mode .ps-nav,
#leftPanel.list-mode .ps-nav-dna {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-top-color: rgba(255, 255, 255, 0.35) !important;
}

/* Back / Change Role: a faint glass pill so it reads as a control without a
   solid fill. Light blur keeps the label crisp over the moving scene. */
#leftPanel.list-mode .ps-btn-back {
    background: rgba(255, 255, 255, 0.30) !important;
    -webkit-backdrop-filter: saturate(120%) blur(5px) !important;
    backdrop-filter: saturate(120%) blur(5px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
}

    #leftPanel.list-mode .ps-btn-back:hover {
        background: rgba(255, 255, 255, 0.45) !important;
        border-color: rgba(255, 255, 255, 0.75) !important;
    }

/* Continue: keep the brand-dark identity but make it translucent (≈72%) with a
   blur, so it's clearly a primary button yet lets the scene tint through —
   "in colour, but not solid", per the brief. Disabled state stays muted. */
#leftPanel.list-mode .ps-btn-next:not(:disabled) {
    background: rgba(26, 29, 32, 0.72) !important;
    -webkit-backdrop-filter: saturate(120%) blur(6px) !important;
    backdrop-filter: saturate(120%) blur(6px) !important;
}

    #leftPanel.list-mode .ps-btn-next:not(:disabled):hover {
        background: rgba(245, 130, 32, 0.82) !important;
    }

#leftPanel.list-mode .ps-btn-next:disabled {
    background: rgba(255, 255, 255, 0.28) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    color: rgba(26, 29, 32, 0.4) !important;
}

/* ── MOBILE / SMALL FRAMES — keep the BUTTON coloured, row still transparent ─
   On phones the translucent dark Continue can read as weak against the bright
   scene, and tap targets benefit from a clear solid fill. So below 768px we
   keep the footer ROW transparent (set above) but restore a SOLID coloured
   Continue button — "button only colour" per the brief. Back/Change Role stays
   the faint glass pill (it's secondary). */
@media (max-width: 768px) {
    #leftPanel.list-mode .ps-btn-next:not(:disabled) {
        background: var(--sj-dark, #1A1D20) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        color: #fff !important;
    }

        #leftPanel.list-mode .ps-btn-next:not(:disabled):hover {
            background: var(--sj-orange, #F58220) !important;
        }
}

/* ════════════════════════════════════════════════════════════════════════
   PRIVATE-SELLER JOURNEY SCENES — let the scene read through
   --------------------------------------------------------------------------
   The seller module paints several opaque-white surfaces on its inner scenes.
   On the List tab we make the decorative / canvas surfaces transparent so the
   background scene shows through, while leaving genuine input/reading surfaces
   (chips, side intelligence panels) untouched. All scoped to list-mode.
   ════════════════════════════════════════════════════════════════════════ */

/* SCENE 1 — category cards (.ps-cat-card): slightly translucent, like the
   theatre cards. sell/seller CSS forces #ffffff (and a 180deg white gradient
   on the selected card) with !important, so we override with !important +
   light blur. Readable, but the scene tints through. */
#leftPanel.list-mode .ps-cat-card,
#leftPanel.list-mode .ps-scene#psScene0 .ps-cat-card {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: saturate(116%) blur(5px) !important;
    backdrop-filter: saturate(116%) blur(5px) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

    /* Selected card keeps its orange identity but stays translucent so it doesn't
   snap back to a solid white plate. */
    #leftPanel.list-mode .ps-cat-card.selected,
    #leftPanel.list-mode .ps-scene#psScene0 .ps-cat-card.selected {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(245, 130, 32, 0.10) 100%) !important;
    }

/* SCENE 2 / 4 — subtype "sketch" banner (.ps-subtype-banner): make it FULLY
   transparent. It was a white canvas because the loaded sketch images have a
   white/grey background and the <img> uses mix-blend-mode:multiply against it.
   Over a transparent backdrop the multiply blend falls onto the scene instead:
   the sketch's light areas drop away and only the ink lines remain — exactly
   the "transparent" look requested, with the art still legible. We clear the
   element bg, its ::before canvas, and the loading placeholder. */
#leftPanel.list-mode .ps-subtype-banner,
#leftPanel.list-mode .ps-subtype-banner::before,
#leftPanel.list-mode .ps-subtype-banner-placeholder {
    background: transparent !important;
}

    /* Keep the multiply blend working over the transparent scene (it already is
   on the img); ensure no stray border/box paints a frame — including the dashed
   "empty" frame the :has() rule adds while the placeholder is visible. */
    #leftPanel.list-mode .ps-subtype-banner,
    #leftPanel.list-mode .ps-subtype-banner:has(.ps-subtype-banner-placeholder:not([style*="display: none"])) {
        border-color: transparent !important;
        border-style: solid !important;
        box-shadow: none !important;
    }

/* SCENE 4 — Value Intelligence (.ps-scene-value): the scene container paints an
   opaque white-ish gradient (linear-gradient #fafbff→#fff→#fff9f2) that filled
   the whole left workbench, blocking the background. Make the SCENE shell + its
   left workbench transparent so the scene reads through — but DO NOT touch the
   dark right "intelligence" panel (.ps-right / the Listing Energy column),
   which is intentionally solid and looks perfect. */
#leftPanel.list-mode .ps-scene-value,
#leftPanel.list-mode .ps-scene-value .ps-workbench-left,
#leftPanel.list-mode .ps-scene#psScene3 .ps-left {
    background: transparent !important;
}

    /* The ambient ::before glow on the value scene is fine (it's a faint radial
   tint with transparent stops) — but neutralise any opaque fallback. */
    #leftPanel.list-mode .ps-scene-value::before {
        background: transparent !important;
    }

/* VALUE INTELLIGENCE footer — uses .ps-workbench-foot (white fade bar) with
   .ps-btn-ghost (Back) + .ps-btn-orb (Continue). Make the ROW transparent;
   keep .ps-btn-orb's coloured gradient (that's the "button only colour" we
   want) and turn .ps-btn-ghost into a faint glass pill. */
#leftPanel.list-mode .ps-workbench-foot {
    background: transparent !important;
    border-top-color: rgba(255, 255, 255, 0.35) !important;
}

#leftPanel.list-mode .ps-btn-ghost {
    background: rgba(255, 255, 255, 0.30) !important;
    -webkit-backdrop-filter: saturate(120%) blur(5px) !important;
    backdrop-filter: saturate(120%) blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
}

    #leftPanel.list-mode .ps-btn-ghost:hover {
        background: rgba(255, 255, 255, 0.45) !important;
        border-color: rgba(255, 255, 255, 0.75) !important;
    }
/* .ps-btn-orb keeps its solid orange gradient — already the coloured button. */

/* LAUNCH scene (psScene7) — launch-card-redesign.css pins a solid white .ps-nav
   bar via `.ps-scene#psScene7 > .ps-left > .ps-nav` (1 id, 3 classes !important).
   We must out-specify it, so prefix with #leftPanel.list-mode. Row transparent;
   .ps-btn-launch keeps its coloured fill; .ps-btn-back → glass pill. */
#leftPanel.list-mode .ps-scene#psScene7 > .ps-left > .ps-nav {
    background: transparent !important;
}

    #leftPanel.list-mode .ps-scene#psScene7 > .ps-left > .ps-nav .ps-btn-back {
        background: rgba(255, 255, 255, 0.30) !important;
        -webkit-backdrop-filter: saturate(120%) blur(5px) !important;
        backdrop-filter: saturate(120%) blur(5px) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
    }

/* ════════════════════════════════════════════════════════════════════════
   PROPERTY AGENT JOURNEY (cyan theme) — left transparent, cards translucent,
   buttons coloured, RIGHT PANEL LEFT AS-IS.
   --------------------------------------------------------------------------
   The agent flow reuses the seller's .ps-* classes wrapped in .pa-host (and is
   gated globally on body[data-pa-flow="agent"]). We scope OUR overrides to
   #leftPanel.list-mode so they only soften the agent journey while it's mounted
   in the List tab. The right intelligence panel (.pa-host .ps-right) is
   deliberately untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* Left workspace transparent (it inherits no explicit bg, but the agent shell
   and left-body can; clear them so the scene reads through). */
#leftPanel.list-mode .pa-host .ps-left,
#leftPanel.list-mode .pa-host .pa-left-body,
#leftPanel.list-mode .pa-host > .ps-scene {
    background: transparent !important;
}

/* Footer nav row transparent (agent reuses .ps-nav / .ps-nav-dna — already
   handled above for seller, but the agent shell re-skins them, so re-assert). */
#leftPanel.list-mode .pa-host .ps-nav,
#leftPanel.list-mode .pa-host .ps-nav-dna {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Continue keeps its cyan brand gradient (already coloured). Back becomes a
   faint glass pill to match the rest of the List-tab footers. */
#leftPanel.list-mode .pa-host .ps-btn-back {
    background: rgba(255, 255, 255, 0.30) !important;
    -webkit-backdrop-filter: saturate(120%) blur(5px) !important;
    backdrop-filter: saturate(120%) blur(5px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
}

/* Content cards within the agent left panel: slightly translucent. The agent
   shell selects cards via [class*="card"]; we soften any white-filled card on
   the LEFT only (the right panel chain is excluded by .ps-left scope). */
#leftPanel.list-mode .pa-host .ps-left [class*="card"]:not(.is-selected),
#leftPanel.list-mode .pa-host .ps-left .ps-cat-card,
#leftPanel.list-mode .pa-host .ps-left .ps-metric-tile {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: saturate(116%) blur(5px) !important;
    backdrop-filter: saturate(116%) blur(5px) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   PROPERTY AGENCY JOURNEY (.pag-* / #propertyAgencyModule) — left transparent,
   cards translucent, buttons coloured, RIGHT ASIDE LEFT AS-IS.
   ════════════════════════════════════════════════════════════════════════ */

/* Module root + left content body transparent so the scene shows through.
   The right intelligence column (.pag-scene-aside) is intentionally NOT
   listed — it keeps its own styling. */
#leftPanel.list-mode #propertyAgencyModule,
#leftPanel.list-mode #propertyAgencyModule .pag-scene,
#leftPanel.list-mode #propertyAgencyModule .pag-scene-body,
#leftPanel.list-mode #propertyAgencyModule .pag-scene-head {
    background: transparent !important;
}

    /* The module's ::before paints a full white→grey gradient backdrop — clear it
   so it doesn't re-opaque the stage. */
    #leftPanel.list-mode #propertyAgencyModule::before {
        background: transparent !important;
    }

    /* Footer nav row transparent. */
    #leftPanel.list-mode #propertyAgencyModule .pag-nav {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Back → faint glass pill; Next/Pay keep their charcoal brand fill (coloured). */
    #leftPanel.list-mode #propertyAgencyModule .pag-btn-back {
        background: rgba(255, 255, 255, 0.30) !important;
        -webkit-backdrop-filter: saturate(120%) blur(5px) !important;
        backdrop-filter: saturate(120%) blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.55) !important;
    }

    /* Plan / content cards: slightly translucent, keep selected state's identity. */
    #leftPanel.list-mode #propertyAgencyModule .pag-plan-card:not([aria-checked="true"]) {
        background: rgba(255, 255, 255, 0.55) !important;
        -webkit-backdrop-filter: saturate(116%) blur(5px) !important;
        backdrop-filter: saturate(116%) blur(5px) !important;
    }

/* IMPORTANT — the actual FORM steps (1..4) keep their solid surface for input
   legibility. We deliberately do NOT make .sj-step transparent: a translucent
   field area over moving grass/clouds harms readability and accessibility.
   The premium scene is felt on the entry theatre; the working forms stay
   clean and solid. (No rule needed — .sj-step's default --sj-surface stands.) */

/* ── REDUCED MOTION ───────────────────────────────────────────────────────
   Freeze everything. The static scene is still beautiful — sun, clouds, hut
   and grass simply hold their pose. Mirrors bg-video.css policy. */
@media (prefers-reduced-motion: reduce) {
    .ls-sun,
    .ls-cloud,
    .ls-bird,
    .ls-blade {
        animation: none !important;
    }
}

/* ── REDUCED DATA / SAVE-DATA ──────────────────────────────────────────────
   The scene is lightweight inline SVG (no network cost), but we still calm the
   motion to respect the spirit of the preference. */
@media (prefers-reduced-data: reduce) {
    .ls-cloud,
    .ls-bird {
        animation: none !important;
    }
}

html.save-data .ls-cloud,
html.save-data .ls-bird {
    animation: none !important;
}

/* ── PRINT — never include the decorative scene ──────────────────────────── */
@media print {
    .list-scene {
        display: none !important;
    }
}