/* BlueWhiteNile's original three-arm river identity. */
:root { --accent: #62b5ff; --accent-ink: #031427; }
.skip-link { position: fixed; top: -80px; inset-inline-start: 16px; z-index: 100; padding: 12px 20px; background: #fff; color: #07192e; }
.skip-link:focus { top: 12px; }
.confluence-hero { padding: 0; overflow: hidden; background: #030c1d; color: #f4f8ff; border-bottom: 1px solid #172b43; }
.confluence-layout { display: grid; grid-template-columns: 43% 57%; align-items: center; min-height: 560px; gap: 0; }
.confluence-copy { position: relative; z-index: 2; padding: 76px 0; }
.confluence-copy .eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .14em; color: #90a9c4; margin: 0 0 28px; }
.confluence-copy h1 { text-align: start; margin: 0 0 24px; font-size: clamp(44px, 5vw, 70px); line-height: 1.06; letter-spacing: -.045em; max-width: none; }
.confluence-copy h1 span { color: #73bdff; }
.confluence-sub { max-width: 37ch; color: #a9bbcf; font-size: 16px; line-height: 1.75; margin: 0 0 30px; }
.confluence-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.confluence-actions .btn { background: #eaf5ff; border-color: #eaf5ff; color: #06213e; border-radius: 7px; padding: 12px 19px; font-size: 14px; }
.confluence-actions .btn:hover { background: #b9ddff; border-color: #b9ddff; }
.doc-link { color: #c7dbef; text-decoration: none; font-size: 14px; padding: 12px 0; }
.doc-link:hover { color: #fff; }
.confluence-actions a:focus-visible, .motion-toggle:focus-visible { outline: 2px solid #8bcbff; outline-offset: 5px; }
.developer-facts { font-size: 11px; color: #8ba4be; margin: 24px 0 0; }
.confluence-stage { position: relative; direction: ltr; margin: 0; height: 430px; width: calc(100% + 72px); overflow: hidden; isolation: isolate; }
.confluence-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 52% 51%, #12355e55, transparent 57%); z-index: -1; }
.confluence-stage canvas, .river-fallback { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.river-fallback { transition: opacity 700ms; }
.confluence-stage canvas { opacity: 0; transition: opacity 700ms; }
.confluence-stage[data-render="webgl"] canvas { opacity: 1; }
.confluence-stage[data-render="webgl"] .river-fallback { opacity: 0; }
.river-label { position: absolute; font: 10px/1.5 var(--mono); letter-spacing: .12em; color: #a3bed9; }
.river-label--white { left: 16%; top: 13%; color: #dbe9f7; }
.river-label--blue { left: 13%; bottom: 14%; color: #68adff; }
.river-label--nile { right: 12%; top: 24%; color: #cee4ff; }
.confluence-caption { position: absolute; top: 71%; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 7px; width: 48%; text-align: center; }
.confluence-caption::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 12px); width: 1px; height: 65px; background: linear-gradient(transparent, #75baff70); }
.confluence-caption strong { font: 10px/1.4 var(--mono); letter-spacing: .18em; color: #dbeaff; }
.confluence-caption > span:last-child { font-size: 11px; color: #8eabc9; max-width: 26ch; }
.junction-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 5px; height: 5px; border-radius: 50%; background: #c6e7ff; box-shadow: 0 0 14px #65b5ff; z-index: 2; }
.provider-flow { position: absolute; left: var(--rest-x); top: var(--rest-y); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 7px 10px; white-space: nowrap; direction: ltr; color: #e7f2ff; background: #07182eee; border: 1px solid #74b9ef2e; border-radius: 7px; font-size: 12px; font-weight: 500; line-height: 1; box-shadow: 0 5px 18px #00000024; z-index: 3; will-change: transform; }
.provider-flow img { width: 21px; height: 21px; object-fit: contain; flex: none; }
.provider-flow--anthropic img { border-radius: 3px; }
.confluence-stage[data-motion="playing"] .provider-flow, .confluence-stage[data-motion="paused"] .provider-flow { left: 0; top: 0; }
.confluence-stage[data-motion="reduced"] .provider-flow { transform: translate(-50%, -50%) !important; opacity: 1 !important; will-change: auto; }
.confluence-stage[data-motion="reduced"] [data-river-pulse] { opacity: .2; }
.motion-toggle { position: absolute; right: 10%; bottom: 6px; background: transparent; border: 0; color: #abc2da; border-bottom: 1px solid #466078; padding: 5px 0; font: 10px/1.4 inherit; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.payment-strip { padding-top: 28px; }
.payment-strip .cash-availability { margin: 0 auto; max-width: 960px; }
[dir="rtl"] .confluence-copy { padding-inline-end: 12px; }
[dir="rtl"] .confluence-copy .eyebrow { letter-spacing: 0; font-size: 12px; }
[dir="rtl"] .confluence-copy h1 { letter-spacing: -.02em; line-height: 1.3; }
[dir="rtl"] .confluence-stage { margin-left: -72px; }
[dir="rtl"] .confluence-caption, [dir="rtl"] .river-label { font-family: inherit; letter-spacing: 0; direction: rtl; }
[dir="rtl"] .confluence-caption strong { letter-spacing: 0; font-family: inherit; font-size: 13px; }
@media (max-width: 1024px) {
  .confluence-layout { grid-template-columns: 45% 55%; min-height: 520px; }
  .confluence-copy h1 { font-size: 52px; }
  .confluence-actions { gap: 14px; }
  .confluence-stage { height: 370px; }
}
@media (max-width: 767px) {
  .confluence-layout { display: flex; flex-direction: column; min-height: 0; }
  .confluence-copy { align-self: stretch; padding: 48px 0 8px; }
  .confluence-copy .eyebrow { margin-bottom: 22px; font-size: 9px; }
  .confluence-copy h1 { font-size: clamp(44px, 11vw, 62px); }
  .confluence-sub { font-size: 15px; margin-bottom: 24px; max-width: 43ch; }
  .confluence-stage { width: calc(100% + 56px); height: 280px; margin: 0 -28px 20px; }
  [dir="rtl"] .confluence-stage { margin-left: -28px; }
  .river-label { font-size: 8px; }
  .river-label--white { top: 15%; }
  .river-label--blue { bottom: 17%; }
  .confluence-caption { top: 73%; width: 47%; }
  .confluence-caption::before { height: 45px; bottom: calc(100% + 9px); }
  .confluence-caption > span:last-child { font-size: 10px; }
  .provider-flow { font-size: 10px; padding: 6px 7px; gap: 5px; border-radius: 6px; }
  .provider-flow img { width: 17px; height: 17px; }
  .motion-toggle { right: 28px; bottom: 0; }
  .developer-facts { font-size: 10px; margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .confluence-stage canvas, .river-fallback { transition: none; }
  .provider-flow { left: var(--rest-x) !important; top: var(--rest-y) !important; transform: translate(-50%, -50%) !important; opacity: 1 !important; will-change: auto; }
}