/* Scoped expansion: new product pages + explicitly marked hub collection only. */
.xn,.xn-lightbox{--xn-ink:#241435;--xn-purple:#984be9;--xn-muted:#675773;font-family:Lato,Arial,sans-serif;color:var(--xn-ink);line-height:1.65}
.xn *, .xn-lightbox *{box-sizing:border-box}.xn img{display:block;max-width:100%;height:auto}.xn h1,.xn h2,.xn h3,.xn-lightbox h2{font-family:Oswald,Arial,sans-serif;line-height:1.12;letter-spacing:-.018em;margin:0 0 22px;font-weight:600}.xn h1{font-size:clamp(42px,4.4vw,70px)}.xn h2{font-size:clamp(34px,3.6vw,54px)}.xn h3{font-size:25px;line-height:1.25}.xn p{margin:0 0 22px;max-width:74ch}.xn h1 span,.xn h2 span{color:#d5a0ff}.xn-white h2 span{color:#8540bd}.xn-wrap{width:min(1240px,calc(100% - 64px));margin-inline:auto}.xn-section{padding:96px 0;scroll-margin-top:110px;position:relative}.xn-white{background:#fff;color:#291a38}.xn-cosmic{color:white;background:#10091e url('/img/showcase/shared/cosmic-supernova.webp') center/cover no-repeat;isolation:isolate}.xn-cosmic::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(10,5,24,.94),rgba(16,7,30,.76) 58%,rgba(16,7,30,.42))}.xn-cosmic:nth-of-type(4n+3){background-image:url('/img/showcase/shared/cosmic-galaxy.webp')}.xn-cosmic p{color:#e7deee}.xn-hero{padding:58px 0 66px}.xn-hero-grid{display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:32px}.xn-lead{font-size:clamp(18px,1.65vw,22px);line-height:1.65}.xn-fit{font-size:16px;font-weight:700}.xn-brand-plate{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:12px 18px;margin-bottom:24px;max-width:100%}.xn-logo{width:230px!important;height:79px!important;object-fit:contain;display:block}.xn-hero-art{margin:0;min-width:0}.xn-hero-art>img{width:100%;filter:none!important}.xn-hero-art figcaption{font-size:14px;text-align:center;color:#e5d5f1}.xn-hero-art .xn-button{display:table;margin:15px auto 0}.xn-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 18px}.xn-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 23px;border-radius:999px;font-family:Lato,Arial,sans-serif;font-size:16px;font-weight:800;line-height:1.3;text-decoration:none!important;border:1px solid transparent;transition:background-color .18s,box-shadow .18s;cursor:pointer;white-space:normal;text-align:center}.xn-primary{background:#8d3dcc!important;color:#fff!important;border-color:#8d3dcc}.xn-primary:hover{background:#7230a9!important;box-shadow:0 5px 18px #56228b30}.xn-outline{background:#fff;color:#3d2153!important;border-color:#d7c6e4}.xn-outline:hover{background:#f7effc}.xn-cosmic .xn-outline{background:rgba(255,255,255,.09);border-color:#ac8cc7;color:white!important}.xn-cosmic .xn-outline:hover{background:rgba(255,255,255,.18)}.xn a:focus-visible,.xn button:focus-visible,.xn summary:focus-visible,.xn-subnav a:focus-visible,.xn-lightbox :focus-visible{outline:3px solid #b377e4;outline-offset:4px}.xn-note,.xn-instruction{font-size:14px;line-height:1.5}.xn-note{opacity:.87}.xn-subnav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:20px max(24px,calc((100% - 1240px)/2));background:#f4eef9;border-bottom:1px solid #e8dced}.xn-subnav a{padding:12px 8px;color:#472560!important;background:white;border:1px solid #dfcce9;border-radius:8px;text-align:center;text-decoration:none;line-height:1.4;font-weight:700;min-height:48px;display:grid;place-items:center}.xn-three,.xn-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:38px}.xn-three article{border-top:1px solid #d7c2e3;padding-top:26px}.xn-cosmic .xn-three article{border-color:#ffffff40}.xn-step-number{font-family:Oswald,sans-serif;display:block;font-size:45px;line-height:1;color:#9444ce;margin-bottom:22px}.xn-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}.xn-section-intro{max-width:880px;margin-bottom:40px}.xn-screen{margin:0;min-width:0;background:#fff;border:1px solid #e4dbe9;border-radius:16px;overflow:hidden;color:#291a38;box-shadow:0 12px 34px #27123609}.xn-image-button{display:block;width:100%;padding:0;border:0;background:#f3f0f5;cursor:zoom-in;overflow:hidden}.xn-screen img{width:100%;height:auto;aspect-ratio:1363/936;object-fit:contain;filter:none}.xn-screen figcaption{padding:24px 26px 28px}.xn-screen p{color:#63536d!important;font-size:16px}.xn-screen .xn-instruction{font-size:14px;margin-bottom:20px}.xn-screen h3{font-size:25px;margin-bottom:12px}.xn-screen .xn-button{font-size:14px;min-height:44px;padding:10px 19px}.xn-life-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:center}.xn-life-grid>img{border-radius:20px;width:100%;height:auto;box-shadow:0 20px 70px #0004}.xn-screen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.xn-screen-item[hidden]{display:none!important}.xn-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}.xn-filters[hidden]{display:none}.xn-filters button{font:700 15px Lato,sans-serif;min-height:44px;border-radius:999px;border:1px solid #dbcbe6;background:white;color:#49265f;padding:10px 20px;cursor:pointer}.xn-filters button[aria-pressed=true]{background:#5d2b80;color:white;border-color:#5d2b80}.xn-screen-status{font-size:14px;color:#776383}.xn-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}.xn details{border-bottom:1px solid #e0d5e7;padding:20px 0}.xn summary{font-family:Oswald,Arial,sans-serif;font-size:24px;line-height:1.3;cursor:pointer;padding:8px 30px 8px 0;min-height:44px}.xn details p{margin:15px 0 0;color:#665471}.xn-faq{max-width:930px}.xn-measure{align-items:center;gap:80px}.xn-measure ul{padding-left:22px;margin:0}.xn-measure li{padding:14px 0 14px 8px;border-bottom:1px solid #ffffff30;font-size:18px}.xn-final .xn-wrap{max-width:950px;text-align:center}.xn-final p,.xn-final .xn-actions{margin-left:auto;margin-right:auto;justify-content:center}.xn-final .xn-brand-plate{margin-bottom:32px}.xn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.xn-lightbox{width:min(1260px,94vw);max-height:94vh;border:0;border-radius:16px;padding:24px;background:#fff;overflow:auto;box-shadow:0 25px 100px #0006}.xn-lightbox::backdrop{background:#10061ecc}.xn-modal-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.xn-modal-head h2{font-size:26px;margin:0}.xn-close{min-height:44px;border:1px solid #d9c7e5;border-radius:999px;padding:8px 18px;color:#42244f;background:white;cursor:pointer;font:700 15px Lato,sans-serif}.xn-lightbox>img{display:block;max-width:100%;height:auto;margin:0 auto 20px}.xn-product main{margin-top:0}.xn-product{background:white}
/* User-requested 2 rows of 5: brand directory and detailed collection, desktop only. */
.xp-hub-menu[data-xn-ten] .xp-hub-links{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important}.xp-hub-menu[data-xn-ten] .xp-hub-links>a{min-width:0;padding:16px!important;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;background:#fff;border-radius:10px}.xp-hub-menu[data-xn-ten] .xp-hub-links img{width:100%!important;height:58px!important;object-fit:contain;object-position:left center}.xp-hub-menu[data-xn-ten] small{font-size:12px!important;line-height:1.4}.xp-hub-grid[data-xn-ten]{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:18px!important}.xp-hub-grid[data-xn-ten] .xp-hub-card{min-width:0!important;display:flex;flex-direction:column}.xp-hub-grid[data-xn-ten] .xp-hub-card>img{width:100%;height:auto;aspect-ratio:1.5;object-fit:contain}.xp-hub-grid[data-xn-ten] .xp-hub-card>div{padding:19px!important;display:flex;flex-direction:column;flex:1}.xp-hub-grid[data-xn-ten] .xp-hub-card h3{margin-top:0}.xp-hub-grid[data-xn-ten] .xp-hub-card p{font-size:15px!important;line-height:1.6}.xp-hub-grid[data-xn-ten] .xp-hub-links{margin-top:auto;display:flex!important;flex-wrap:wrap;gap:9px!important}.xp-hub-grid[data-xn-ten] .xp-hub-links a{min-height:44px;padding:9px 12px!important;font-size:13px!important;white-space:normal}.xp-hub-grid[data-xn-ten] .xn-brand-plate{padding:6px 9px;margin:0;width:100%}.xp-hub-grid[data-xn-ten] .xn-logo{width:100%!important;height:53px!important}.xp-hub-menu[data-xn-ten] .xn-logo{max-width:100%}.xp-hub-grid[data-xn-ten] .xp-brand-logo{max-width:100%;object-fit:contain}
@media(max-width:1100px){.xn-hero-grid{grid-template-columns:1fr 1fr;gap:20px}.xn-life-grid{gap:28px}.xn-wrap{width:calc(100% - 48px)}.xp-hub-menu[data-xn-ten] .xp-hub-links,.xp-hub-grid[data-xn-ten]{grid-template-columns:repeat(3,minmax(0,1fr))!important}.xn-subnav{grid-template-columns:repeat(3,minmax(0,1fr))}.xn-hero h1{font-size:48px}}
@media(max-width:760px){.xn-section{padding:62px 0}.xn-wrap{width:calc(100% - 36px)}.xn-hero-grid,.xn-two,.xn-three,.xn-steps,.xn-life-grid,.xn-feature-grid{grid-template-columns:1fr}.xn-hero h1{font-size:45px}.xn-hero{padding-top:35px}.xn-hero-art{margin-top:5px}.xn-hero-art>img{max-width:600px;margin:auto}.xn-subnav{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 18px}.xn-screen-grid{grid-template-columns:1fr}.xn-screen figcaption{padding:22px}.xn-steps{gap:25px}.xn-life-grid{gap:28px}.xn-measure{gap:20px}.xn-lightbox{padding:16px;width:96vw}.xn-modal-head h2{font-size:21px}.xp-hub-menu[data-xn-ten] .xp-hub-links,.xp-hub-grid[data-xn-ten]{grid-template-columns:repeat(2,minmax(0,1fr))!important}.xp-hub-grid[data-xn-ten] .xp-hub-card>div{padding:15px!important}}
@media(max-width:480px){.xp-hub-grid[data-xn-ten]{grid-template-columns:1fr!important}.xp-hub-menu[data-xn-ten] .xp-hub-links{gap:9px!important}.xp-hub-menu[data-xn-ten] .xp-hub-links>a{padding:12px!important}.xp-hub-menu[data-xn-ten] .xp-hub-links img{height:42px!important}.xn-hero h1{font-size:40px}.xn-button{padding:12px 18px}.xn-actions{gap:10px}.xn-logo{width:210px!important;height:72px!important}.xn-three{gap:22px}.xn-modal-head{align-items:flex-start}.xn-close{flex-shrink:0}}
@media(prefers-reduced-motion:reduce-motion-off){.xn *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* /experience hero (Corey, 2026-09-27): no laptop panel, centred copy over the video, flat buttons like the app pages. */
body.xp-cleanup .xr-hub-hero .hero-grid{grid-template-columns:1fr!important;justify-items:center;text-align:center}
body.xp-cleanup .xr-hub-hero .hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center!important;max-width:880px;margin-inline:auto}
body.xp-cleanup .xr-hub-hero h1{max-width:none!important;margin-inline:auto}
body.xp-cleanup .xr-hub-hero .xr-hub-intro,body.xp-cleanup .xr-hub-hero .xr-fit{margin-inline:auto;text-align:center}
body.xp-cleanup .xr-hub-hero .hero-veil{background:radial-gradient(ellipse at center,rgba(6,5,18,.62),rgba(6,5,18,.38) 70%)!important}
body.xp-cleanup .xr-hub-hero .hero-ctas{display:flex!important;flex-wrap:wrap;justify-content:center!important;gap:12px;margin:28px auto 0}
body.xp-cleanup .xr-hub-hero .hero-ctas .xp-button{min-width:190px}
@media(max-width:760px){body.xp-cleanup .xr-hub-hero .hero-ctas{display:grid!important;grid-template-columns:1fr;width:100%}body.xp-cleanup .xr-hub-hero .hero-ctas .xp-button{width:100%}}
/* The card rule ".xp-hub-links a:last-child" (See it live button) also caught the last directory tile. */
body.xp-refined.xp-cleanup .xp-hub-menu .xp-hub-links>a:last-child{background:#fff;color:inherit;border-color:inherit}
/* /experience: every in-page CTA uses the flat app-page buttons (no glow halo), and the four path cards share one height. */
body.xp-cleanup-hub :is(.flow-cta,.build-cta,#dream .hero-ctas,.book-call){display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
body.xp-cleanup-hub :is(.flow-cta,.build-cta,#dream .hero-ctas,.book-call) .xp-button{min-width:190px}
body.xp-cleanup-hub #path .flow-steps{align-items:stretch}
body.xp-cleanup-hub #path .fstep{display:flex;flex-direction:column}
body.xp-cleanup-hub #path .fcard{flex:1 1 auto;box-sizing:border-box}
/* Corey 2026-09-27: hero product logo is white on transparent (no white plate), like the other app pages. */
.xn-hero .xn-brand-plate--clear{background:none;padding:0;border-radius:0;width:auto}
/* Corey 2026-09-27: the "Explore business experiences" dropdown is now an auto-scrolling logo carousel.
   Two identical groups scroll -50% so the loop is seamless; duration is set from the width in JS so the
   speed is the same px/s on desktop and phone. */
.xn-marquee{background:#140a26;padding:22px 0;border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14;overflow:hidden}
.xn-mq-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.xn-mq-track{display:flex;width:max-content;animation:xnMarquee var(--xn-mq-dur,50s) linear infinite}
.xn-mq-group{display:flex;gap:16px;padding-right:16px}
.xn-marquee:hover .xn-mq-track,.xn-marquee:focus-within .xn-mq-track,.xn-marquee.is-paused .xn-mq-track{animation-play-state:paused}
@keyframes xnMarquee{to{transform:translateX(-50%)}}
.xn-mq-tile{flex:0 0 auto;width:220px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 18px;background:#fff;border:1px solid #e4d9f2;border-radius:12px;text-decoration:none;color:#4f4566;transition:border-color .16s,transform .16s}
.xn-mq-tile:hover,.xn-mq-tile:focus-visible{border-color:#7834d1;transform:translateY(-2px)}
.xn-mq-tile:focus-visible{outline:3px solid #cf9cff;outline-offset:2px}
.xn-mq-tile img{width:auto!important;max-width:170px;height:40px!important;object-fit:contain;display:block}
.xn-mq-tile small{font:400 12px/1.35 Lato,sans-serif;color:#5d5378;text-align:center;min-height:2.7em;display:flex;align-items:center}
@media(max-width:760px){.xn-marquee{padding:16px 0}.xn-mq-tile{width:170px;padding:12px 12px}.xn-mq-tile img{max-width:140px;height:32px!important}.xn-mq-group{gap:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce-motion-off){.xn-mq-track{animation:none}.xn-mq-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.xn-mq-group[aria-hidden]{display:none}}
/* Corey 2026-09-27: the closing-section product logo matches the hero one: colour icon, white wordmark, no plate. */
.xn .xn-brand-plate--clear{background:none;padding:0;border-radius:0;width:auto}
/* 2026-09-27: eleven apps. Cards flow 4 / 4 / 3 on desktop with the last row centred (3 / 3 / 3 / 2 on tablet). */
/* Corey 2026-09-27: 3 apps per row (4 and 5 were too cramped); 11 cards = 3/3/3/2, last row centred */
@media(min-width:761px){.xp-hub-grid[data-xn-ten]{display:flex!important;flex-wrap:wrap;justify-content:center;gap:28px}
.xp-hub-grid[data-xn-ten]>article{flex:0 0 calc((100% - 2*28px)/3);max-width:calc((100% - 2*28px)/3)}}
@media(min-width:761px) and (max-width:1100px){.xp-hub-grid[data-xn-ten]>article{flex-basis:calc((100% - 2*28px)/3);max-width:calc((100% - 2*28px)/3)}}
/* DealFlow has four journey steps: one row of four on desktop, two by two on tablet. */
@media(min-width:1101px){body.dealflow .xn-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:761px) and (max-width:1100px){body.dealflow .xn-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 2026-09-27 polish return: /experience hero uses a still (eleven glass frames on a violet path) instead of the
   autoplaying video, behind the same centred copy and flat buttons. Veil keeps white text AA over the brightest frames. */
body.xp-cleanup-hub .xr-hub-hero .xp-hero-still{object-position:72% 50%;opacity:1}
body.xp-cleanup-hub .xr-hub-hero .hero-veil{background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(7,5,20,.78),rgba(7,5,20,.52) 70%,rgba(7,5,20,.4))!important}
@media(max-width:760px){body.xp-cleanup-hub .xr-hub-hero .xp-hero-still{object-position:80% 50%}
body.xp-cleanup-hub .xr-hub-hero .hero-veil{background:linear-gradient(180deg,rgba(7,5,20,.8),rgba(7,5,20,.66))!important}}
/* App cards: restrained lift on hover, clear focus ring when a card link has keyboard focus. */
body.xp-cleanup-hub .xp-hub-grid[data-xn-ten] .xp-hub-card{transition:transform .18s ease,box-shadow .18s ease}
@media(hover:hover){body.xp-cleanup-hub .xp-hub-grid[data-xn-ten] .xp-hub-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(13,8,35,.14)}}
body.xp-cleanup-hub .xp-hub-grid[data-xn-ten] .xp-hub-card:focus-within{box-shadow:0 0 0 3px #b377e4,0 14px 30px rgba(13,8,35,.12)}
@media(prefers-reduced-motion:reduce){body.xp-cleanup-hub .xp-hub-grid[data-xn-ten] .xp-hub-card{transition:none}body.xp-cleanup-hub .xp-hub-grid[data-xn-ten] .xp-hub-card:hover{transform:none}}
/* DealFlow v3 artwork has no built-in padding, so it is set slightly smaller to sit optically level with the other ten logos. */
body.xp-cleanup-hub .xn-mq-tile img[src*="dealflow-v3"]{height:35px!important}
body.xp-cleanup-hub .xp-hub-card h3 img[src*="dealflow-v3"]{width:172px!important;max-width:100%}
@media(max-width:760px){body.xp-cleanup-hub .xn-mq-tile img[src*="dealflow-v3"]{height:28px!important}}
/* 2026-09-27 /experience hero ambient clip: decorative muted play-once video over the still (dealflow-motion.js places it; the veil stays on top). */
body.xp-cleanup-hub .xr-hub-hero video.la-ambient{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:block;object-fit:cover;object-position:72% 50%;pointer-events:none;opacity:0;transition:opacity .6s ease;background:transparent;max-width:none}
body.xp-cleanup-hub .xr-hub-hero video.la-ambient.is-on{opacity:1}

/* Portfolio polish (Corey, 2026-10-16): equal-height screen cards with the live link on one bottom
   line, a wide first card only when the visible count is odd, and the one quiet demo disclosure. */
.xn-two>.xn-screen,.xn-screen-item>.xn-screen{display:flex;flex-direction:column;height:100%}
.xn-screen-item{display:flex;flex-direction:column}
.xn-screen>figcaption{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start}
.xn-screen>figcaption>.xn-button{margin-top:auto}
@media(min-width:761px){
 .xn-screen-grid:has(>.xn-screen-item:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])))>.xn-screen-item:nth-child(1 of :not([hidden])){grid-column:1/-1}
 .xn-screen-grid:has(>.xn-screen-item:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])))>.xn-screen-item:nth-child(1 of :not([hidden]))>.xn-screen{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:stretch}
 .xn-screen-grid:has(>.xn-screen-item:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])))>.xn-screen-item:nth-child(1 of :not([hidden]))>.xn-screen>figcaption{justify-content:center;padding:32px 36px}
 .xn-screen-grid:has(>.xn-screen-item:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])))>.xn-screen-item:nth-child(1 of :not([hidden]))>.xn-screen>figcaption>.xn-button{margin-top:8px}
}
.xn-disclosure{margin:28px 0 0;font-size:13px;line-height:1.55;color:#6a5a75}