/* DealFlow sales page polish (2026-09-27). Loaded ONLY on /experience/dealflow.
   Everything is scoped under body.dealflow main.xn and uses df- classes.
   Content is fully visible without JS; dealflow-motion.js adds .df-motion-ready to opt in to motion. */
body.dealflow main.xn{--df-violet:#b692fb}

/* ---------- Hero: scenic truck backdrop behind the real laptop + phone mockup ---------- */
body.dealflow main.xn .df-hero{background:#0c0918;overflow:clip}
body.dealflow main.xn .df-hero::before{background:linear-gradient(90deg,rgba(10,7,24,.94) 0%,rgba(10,7,24,.84) 34%,rgba(10,7,24,.46) 62%,rgba(10,7,24,.22) 100%),linear-gradient(0deg,rgba(10,7,24,.55),rgba(10,7,24,0) 32%)}
body.dealflow main.xn .df-hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
body.dealflow main.xn .df-hero-bg picture,body.dealflow main.xn .df-hero-bg img{display:block;width:100%;height:100%;max-width:none}
body.dealflow main.xn .df-hero-bg img{object-fit:cover;object-position:70% 50%;transform:translate3d(0,var(--df-par,0px),0) scale(var(--df-zoom,1));will-change:auto}
body.dealflow main.xn .df-hero .xn-wrap{position:relative;z-index:1}
body.dealflow main.xn .df-hero .xn-hero-art>img{filter:drop-shadow(0 26px 40px rgba(0,0,0,.45))!important}
body.dealflow main.xn .df-hero .xn-hero-art figcaption{text-shadow:0 1px 8px rgba(0,0,0,.7)}
body.dealflow main.xn .df-hero .xn-lead,body.dealflow main.xn .df-hero .xn-fit,body.dealflow main.xn .df-hero .xn-note{text-shadow:0 1px 10px rgba(6,4,16,.55)}
body.dealflow main.xn .df-route{position:absolute;left:0;right:0;bottom:0;width:100%;height:120px;z-index:0;pointer-events:none;overflow:visible}
body.dealflow main.xn .df-route path{fill:none;stroke:var(--df-violet);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.8;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(182,146,251,.7))}

/* ---------- Editorial photos (illustrative) ---------- */
body.dealflow main.xn .df-photo,body.dealflow main.xn .df-banner{margin:0;min-width:0}
body.dealflow main.xn .df-photo picture{display:block;border-radius:18px;overflow:hidden;box-shadow:0 22px 60px rgba(18,10,42,.22);aspect-ratio:16/9;background:#1a1230}
body.dealflow main.xn .df-photo img,body.dealflow main.xn .df-banner img{display:block;width:100%;height:100%;object-fit:cover}
body.dealflow main.xn .df-photo figcaption{font-size:14px;line-height:1.5;margin-top:12px;color:#5f4e6b}
body.dealflow main.xn .xn-cosmic .df-photo figcaption{color:#e7deee}
body.dealflow main.xn #in-the-moment .df-photo figcaption{font-family:Oswald,Arial,sans-serif;font-size:20px;line-height:1.35;letter-spacing:-.01em;color:#fff}

body.dealflow main.xn .df-editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center;margin-bottom:48px}
body.dealflow main.xn .df-editorial .xn-section-intro{margin-bottom:0}
body.dealflow main.xn .df-editorial .xn-note{color:#6b5a78}

body.dealflow main.xn .df-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;margin-top:56px;align-items:start}
body.dealflow main.xn .df-pair .xn-screen h3{font-size:23px}
/* The pair sits in a cosmic section: keep the card button dark-on-white, not the cosmic white-on-glass style. */
body.dealflow main.xn .df-pair .xn-screen .xn-outline{background:#fff;color:#3d2153!important;border-color:#d7c6e4}
body.dealflow main.xn .df-pair .xn-screen .xn-outline:hover{background:#f7effc}
body.dealflow main.xn .df-pair .xn-screen h3{color:#291a38}

body.dealflow main.xn .df-banner{position:relative;border-radius:22px;overflow:hidden;margin-bottom:44px;box-shadow:0 24px 70px rgba(18,10,42,.2);background:#120b28}
body.dealflow main.xn .df-banner picture{display:block;aspect-ratio:21/9}
body.dealflow main.xn .df-banner img{object-position:50% 62%}
body.dealflow main.xn .df-banner figcaption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(22px,4vw,52px);background:linear-gradient(90deg,rgba(9,6,22,.88) 0%,rgba(9,6,22,.62) 34%,rgba(9,6,22,0) 62%)}
body.dealflow main.xn .df-banner h2{color:#fff;margin:0 0 10px;max-width:14ch}
body.dealflow main.xn .df-banner h2 span{color:#dcb4ff}
body.dealflow main.xn .df-banner small{font-size:13px;color:#ece4f4}

/* ---------- Hover lift on screenshot cards (pointer devices only) ---------- */
@media(hover:hover){
body.dealflow main.xn .xn-screen{transition:transform .2s ease,box-shadow .2s ease}
body.dealflow main.xn .xn-screen:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(25,12,54,.16)}
}

/* ---------- Motion (opt-in via JS) ---------- */
body.dealflow main.xn.df-motion-ready .df-reveal{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
body.dealflow main.xn.df-motion-ready .df-reveal:not(.df-in-view){opacity:0;transform:translateY(18px)}
body.dealflow main.xn.df-motion-ready .df-photo img,body.dealflow main.xn.df-motion-ready .df-banner img{transform:scale(1.07);transition:transform 9s cubic-bezier(.16,.6,.25,1)}
body.dealflow main.xn.df-motion-ready .df-in-view .df-photo img,body.dealflow main.xn.df-motion-ready .df-photo.df-in-view img,body.dealflow main.xn.df-motion-ready .df-banner.df-in-view img{transform:scale(1)}
body.dealflow main.xn.df-motion-ready .df-route path{animation:df-draw 1.6s .3s cubic-bezier(.4,.1,.2,1) both}
@keyframes df-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---------- Responsive ---------- */
@media(max-width:1100px){body.dealflow main.xn .df-hero::before{background:linear-gradient(90deg,rgba(10,7,24,.94) 0%,rgba(10,7,24,.8) 45%,rgba(10,7,24,.5) 100%)}}
@media(max-width:760px){
body.dealflow main.xn .df-hero::before{background:linear-gradient(180deg,rgba(10,7,24,.9) 0%,rgba(10,7,24,.78) 45%,rgba(10,7,24,.55) 70%,rgba(10,7,24,.85) 100%)}
body.dealflow main.xn .df-hero-bg img{object-position:60% 50%;transform:none}
body.dealflow main.xn .df-route{height:70px}
body.dealflow main.xn .df-editorial,body.dealflow main.xn .df-pair{grid-template-columns:1fr}
body.dealflow main.xn .df-editorial{margin-bottom:36px}
body.dealflow main.xn .df-pair{margin-top:40px;gap:26px}
body.dealflow main.xn .df-banner picture{aspect-ratio:4/3}
body.dealflow main.xn .df-banner img{object-position:62% 60%}
body.dealflow main.xn .df-banner figcaption{background:linear-gradient(180deg,rgba(9,6,22,.9) 0%,rgba(9,6,22,.7) 42%,rgba(9,6,22,0) 72%)}
body.dealflow main.xn .df-banner h2{font-size:34px}
}

/* ---------- Reduced motion and print: everything static and visible ---------- */
@media(prefers-reduced-motion:reduce){
body.dealflow main.xn .df-reveal,body.dealflow main.xn.df-motion-ready .df-reveal:not(.df-in-view){opacity:1!important;transform:none!important;transition:none!important}
body.dealflow main.xn .df-photo img,body.dealflow main.xn .df-banner img,body.dealflow main.xn .df-hero-bg img{transform:none!important;transition:none!important}
body.dealflow main.xn .df-route path{animation:none!important}
body.dealflow main.xn .xn-screen,body.dealflow main.xn .xn-screen:hover{transition:none!important;transform:none!important}
}
@media print{body.dealflow main.xn .df-reveal{opacity:1!important;transform:none!important}}

/* ---------- Ambient clips (2026-09-27): decorative muted play-once video over the still ---------- */
/* dealflow-motion.js lays video.la-ambient exactly over the still's layout box and copies its fit/focal point. */
body.dealflow main.xn .df-photo{position:relative}
body.dealflow main.xn video.la-ambient{position:absolute;top:0;left:0;width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .6s ease;background:transparent;max-width:none}
body.dealflow main.xn video.la-ambient.is-on{opacity:1}
body.dealflow main.xn .df-hero-bg video.la-ambient{transform:translate3d(0,var(--df-par,0px),0) scale(var(--df-zoom,1))}
/* Ken Burns off where the still is now a clip (the clip keeps its own gentle drift). */
body.dealflow main.xn.df-motion-ready .la-ambient-on img,body.dealflow main.xn .la-ambient-on picture img{transform:none!important;transition:none!important}
body.dealflow main.xn .df-hero-bg.la-ambient-on img{transform:translate3d(0,var(--df-par,0px),0) scale(var(--df-zoom,1))!important}