/* Let the ocean dissolve into a white page, with readable foregrounds throughout. */
:root{color-scheme:light;--muted:#53647a}
body{background:#fff;color:#17253b}
/* Ease both ends of the dissolve so neither the dark water nor white page has a seam. */
.ocean{
 --ocean-pale-point:.835;
 background-color:#02151e;
 --ocean-dissolve:linear-gradient(180deg,
  #000 0%,#000 68%,
  rgba(0,0,0,.989) 70%,rgba(0,0,0,.957) 72%,
  rgba(0,0,0,.908) 74%,rgba(0,0,0,.844) 76%,
  rgba(0,0,0,.768) 78%,rgba(0,0,0,.684) 80%,
  rgba(0,0,0,.593) 82%,rgba(0,0,0,.5) 84%,
  rgba(0,0,0,.407) 86%,rgba(0,0,0,.316) 88%,
  rgba(0,0,0,.232) 90%,rgba(0,0,0,.156) 92%,
  rgba(0,0,0,.092) 94%,rgba(0,0,0,.043) 96%,
  rgba(0,0,0,.011) 98%,transparent 100%);
 -webkit-mask-image:var(--ocean-dissolve);
 mask-image:var(--ocean-dissolve);
}
.ocean video{filter:brightness(.74)}
.ocean:after{background:linear-gradient(180deg,rgba(0,12,18,.46),rgba(0,9,14,.57) 38%,rgba(0,6,9,.65) 100%)}
.header,.navigation-toggle{color:#fff}
.brand:hover{color:#fff}.desktop-nav a:hover{color:inherit}
.navigation-toggle:hover{background:#125dc412}
.announcement{color:#263b52;background:#ffffffb8;border-color:#b9ccdc;box-shadow:0 3px 14px #15456d08}
.announcement:hover{color:#115dd0;background:#fff}
.announcement-icon{color:#fff}.chevron{color:#62768a}
.gradient-text{background-image:linear-gradient(180deg,#075bcc 20%,#3789e2 100%)}
.hero .subtitle{color:#53647a}
.hero .agents img:first-child{filter:invert(1)}
.primary,.secondary{color:#fff}
.comparison-intro>p{color:#53647a}
.comparison-intro h2{color:#17253b}
.prospecting-comparison{background:transparent}
.comparison-card{box-shadow:0 8px 22px #29588012}
.under-preview,.under-preview button{color:#64748b}
@media(max-width:1050px){
 .desktop-nav{background:#fffffff5;border-color:#d9e2ec;box-shadow:0 16px 45px #294a721c;color:#17253b}
 .desktop-nav a:hover{background:#edf4fd}
}

/* Ocean text is readable immediately, before JavaScript or video loads. */
.hero h1{color:#fafafa}
.hero h1 .gradient-text{background-image:linear-gradient(180deg,#378dff 20%,#9bc6ff 100%)}
.hero .agents img:first-child{filter:none}
.hero .subtitle{color:#e1e8ee}
.hero .announcement{color:#fafafa;background:#061016b0;border-color:#ffffff40;box-shadow:none}
.hero .announcement .chevron{color:#c9d4de}
.comparison-intro>p{color:#d1e0eb}
.comparison-intro h2{color:#f5f8fb}
/* Each element switches only after reaching the pale part of the backdrop. */
.hero h1.over-light{color:#17253b}
.hero h1.over-light .gradient-text{background-image:linear-gradient(180deg,#075bcc 20%,#3789e2 100%)}
.hero h1.over-light .agents img:first-child{filter:invert(1)}
.hero .subtitle.over-light{color:#53647a}
.hero .announcement.over-light{color:#263b52;background:#ffffffeb;border-color:#b9ccdc;box-shadow:0 3px 14px #15456d08}
.hero .announcement.over-light .chevron{color:#62768a}
.comparison-intro.over-light>p{color:#53647a}
.comparison-intro.over-light h2{color:#17253b}