/* The proposed final site: pieces that only exist once everything is one site. */

/* Broker program sub-bar, under the main header on every broker page. It scrolls with
   the page so the broker pages' own sticky elements keep their 70px offsets. */
.bsub { background: #071a4a; border-bottom: 1px solid var(--line); }
.bsub .wrap { display: flex; align-items: center; gap: 22px; min-height: 52px; }
.bsub-k { flex: none; color: var(--ice); text-decoration: none; font: 600 13px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.bsub-k b { color: var(--cyan); font-weight: 700; }
.bsub nav { display: flex; gap: 20px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.bsub nav::-webkit-scrollbar { display: none; }
.bsub nav a { color: var(--ice); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; padding: 6px 0; }
.bsub nav a:hover, .bsub nav a[aria-current] { color: var(--cyan); }
.bsub .btn.small { flex: none; }

/* Home announcement with two destinations */
div.ca-announce a.go { text-decoration: none; }
div.ca-announce a.go:hover { text-decoration: underline; }

/* CriticalAsset product menu: the way into the beta */
.ca-sub nav a.get { color: #fff; background: linear-gradient(90deg, #2563eb, #0ea5e9); padding: 7px 14px; border-radius: 9px; }
.ca-sub nav a.get:hover { color: #fff; filter: brightness(1.07); }

/* "Runs on CriticalAsset" links on the white product page */
.ca-page .ca-chip { background: #e7f0ff; border-color: #bcd2f7; color: var(--ca-navy); }
.ca-page .ca-chip:hover { background: var(--ca-blue); color: #fff; }

@media (max-width: 1000px) {
  .bsub .wrap { gap: 16px; }
}
@media (max-width: 640px) {
  .bsub-k { display: none; }
  .bsub nav { margin-left: 0; }
}

/* The owner film: the broker site's film component (broker-site/assets/broker.css "film", "hero teaser"),
   so both films look and behave alike. */
:root { --glass: #050f2bdd; --glass-line: #ffffff33; }
html:not(.js) .needs-js { display: none !important; }
.hero .teaser { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.hero .teaser.on { opacity: .55; }
.btn .play-ic { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-right: 2px; }
.teaser-toggle { position: absolute; right: 18px; bottom: 18px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--glass); color: #fff; cursor: pointer; display: grid; place-items: center; }
.teaser-toggle::before { content: ""; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.teaser-toggle[aria-pressed="true"]::before { width: 0; height: 0; border-right: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.hero .teaser { z-index: 0; }
.film { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: radial-gradient(900px 500px at 20% 20%, #0b3bb8aa, transparent 70%), #02081c; border-top: 5px solid var(--electric); box-shadow: 0 40px 90px #0009, 0 0 0 1px #ffffff14; margin-top: 40px; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: transparent; }
.film-fallback { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; padding: 20px; font-size: clamp(1.8rem, 5vw, 4.4rem); }
.film-fallback .display { line-height: .95; }
.film-fallback .c { color: var(--cyan); }
.film-fallback::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); }
.js .film-fallback .display { visibility: hidden; }
.film-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 20px; border: 0; cursor: pointer; color: #fff; background: radial-gradient(closest-side, #050f2b88, transparent), linear-gradient(0deg, #050f2bcc, transparent 55%); transition: opacity .35s ease; text-align: left; }
.film-play .ic { width: 96px; height: 96px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--cyan), #6fe0ff); box-shadow: 0 0 0 12px #29c7ff2e, 0 20px 50px #0009; transition: transform .25s ease, box-shadow .25s ease; }
.film-play .ic::before { content: ""; margin-left: 7px; border-left: 28px solid var(--ink); border-top: 17px solid transparent; border-bottom: 17px solid transparent; }
.film-play:hover .ic, .film-play:focus-visible .ic { transform: scale(1.06); box-shadow: 0 0 0 18px #29c7ff3a, 0 20px 50px #0009; }
.film-play strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1; letter-spacing: .01em; }
.film-play small { display: block; font: 700 12.5px/1.3 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ice); margin-top: 8px; }
.film-play:focus-visible { outline-offset: -6px; }
.film.playing .film-play { opacity: 0; pointer-events: none; }
.film.missing .film-play small::after { content: " · being rendered"; color: #ffd27a; }
.film-chapters { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.film-chapters button { display: inline-flex; align-items: baseline; gap: 7px; font: 600 13px/1.2 Inter, sans-serif; color: var(--ice); background: #ffffff0a; border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; cursor: pointer; transition: border-color .2s, background .2s; white-space: nowrap; }
.film-chapters button b { font: 600 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cyan); }
.film-chapters button:hover { border-color: #29c7ff88; }
.film-chapters button[aria-current="true"] { border-color: var(--cyan); background: #29c7ff1f; color: #fff; }
@media (max-width: 640px) {
  .film { border-radius: 12px; margin-top: 28px; }
  .film-play { flex-direction: column; gap: 10px; text-align: center; }
  .film-play .ic { width: 64px; height: 64px; box-shadow: 0 0 0 8px #29c7ff2e; }
  .film-play .ic::before { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; margin-left: 5px; }
  .film-play small { font-size: 10.5px; }
  .film-chapters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
}
@media (prefers-reduced-motion: reduce) { .hero .teaser { transition: none; } .film-play, .film-play .ic { transition: none; } }
@media print { .teaser, .teaser-toggle, .film-play, .film-chapters { display: none !important; } }
.film-sec .head { max-width: 900px; margin: 0 auto 34px; text-align: center; }
.film-sec .head .kicker { justify-content: center; }
.film-sec .head .lede { margin-left: auto; margin-right: auto; }